@font-face{font-family:'Klein';src:url('../Fuentes/Klein-Bold.ttf') format('truetype');font-weight:700;font-style:normal;}
@font-face{font-family:'Klein';src:url('../Fuentes/Klein-Regular.ttf') format('truetype');font-weight:400;font-style:normal;}
@font-face{font-family:'Klein';src:url('../Fuentes/Klein-Book.ttf') format('truetype');font-weight:300;font-style:normal;}
@font-face{font-family:'Klein Condensed';src:url('../Fuentes/KleinCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;}
@font-face{font-family:'Klein Text';src:url('../Fuentes/KleinText-Book.ttf') format('truetype');font-weight:400;font-style:normal;}
@font-face{font-family:'Klein Text';src:url('../Fuentes/KleinText-Bold.ttf') format('truetype');font-weight:700;font-style:normal;}

:root{
  --rojo:#E33E2B;--azul:#2E59A8;--amar:#F9D44B;--verde:#32A982;
  --negro:#111;--blanco:#FFF;--gris:#666;--fondo:#F7F7F7;--crema:#F9F9F5;
  --klein:'Klein',sans-serif;--klein-c:'Klein Condensed',sans-serif;--klein-t:'Klein Text',sans-serif;
  --bree:'Bree Serif',Georgia,serif;
  --font-title:var(--bree);
  --font-body:var(--klein-t);
  --font-ui:var(--klein-c);
  --touch-min:48px;
  --hdr-h:72px;--franja-h:4px;--social-h:38px;--footer-h:48px;
  --safe-top:calc(var(--hdr-h) + var(--franja-h) + var(--social-h));
  --safe-bottom:var(--footer-h);
  --screen-h:calc(100dvh - var(--safe-top) - var(--safe-bottom));
  --space-xs:clamp(4px,.65vh,6px);
  --space-sm:clamp(8px,1.1vh,10px);
  --space-md:clamp(12px,1.6vh,16px);
  --space-lg:clamp(16px,2.2vh,22px);
  --gap-v:var(--space-sm);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100dvh;max-height:100dvh;font-family:var(--font-body);background:var(--blanco);color:var(--negro);overflow:hidden;touch-action:manipulation;position:fixed;inset:0;}
body::before{display:none;}

/* ── KIOSK CHROME ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:400;height:var(--hdr-h);background:var(--blanco);border-bottom:3px solid var(--rojo);display:flex;align-items:center;justify-content:space-between;padding:0 16px;}
.hdr-logo{display:flex;align-items:center;gap:10px;}
.hdr-logo img{height:60px;object-fit:contain;}
.hdr-logo-fb{display:none;flex-direction:column;line-height:1.1;}
.hdr-fil{font-family:var(--klein-c);font-size:17px;font-weight:700;letter-spacing:2px;}
.hdr-fil span{color:var(--rojo);}
.hdr-sub{font-size:11px;color:var(--gris);letter-spacing:1.5px;text-transform:uppercase;}
.hdr-r{text-align:right;}
.hdr-ed{font-family:var(--klein-c);font-size:14px;font-weight:700;color:var(--azul);letter-spacing:1.5px;text-transform:uppercase;}
.hdr-fecha{font-size:13px;color:var(--gris);}
.franja{position:fixed;top:var(--hdr-h);left:0;right:0;z-index:399;height:var(--franja-h);display:flex;}
.fr{flex:1;}
.mobile-footer-logos{display:none!important;}
.footer{position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--blanco);padding:8px 16px;border-top:1px solid #E8E8E8;display:flex!important;align-items:center;justify-content:center;}
.footer-inner{display:flex;align-items:flex-start;justify-content:center;gap:6px;}
.footer-lbl{font-family:var(--klein-c);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gris);line-height:1.15;white-space:nowrap;flex-shrink:0;}
.flogo{object-fit:contain;display:block;flex-shrink:0;}
.flogo-cpl{height:clamp(24px,3.8vh,32px);}
.flogo-apros{height:clamp(18px,2.8vh,24px);}
.flogo-sep{width:1px;height:22px;background:#DDD;flex-shrink:0;align-self:center;margin:0 10px;}
.kiosk-bar{position:fixed;top:calc(var(--hdr-h) + var(--franja-h));left:0;right:0;z-index:398;height:3px;background:#E8E8E8;}
.kiosk-bar-fill{height:100%;background:var(--amar);width:100%;transform-origin:left;transition:none;}
.social-proof{position:fixed;top:calc(var(--hdr-h) + var(--franja-h) + 11px);left:0;right:0;z-index:397;min-height:var(--social-h);display:none;align-items:flex-start;justify-content:center;padding:8px 16px 0;pointer-events:none;}
.social-proof span{font-family:var(--klein-c);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--azul);background:var(--blanco);padding:7px 16px;border-radius:999px;border:1px solid #E8E8E8;box-shadow:0 1px 4px rgba(0,0,0,.04);}

/* ── ATTRACT / IDLE ── */
#attract{position:fixed;inset:0;z-index:350;background:linear-gradient(165deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--safe-top) 20px var(--safe-bottom);cursor:pointer;color:var(--blanco);transition:opacity .5s;overflow:hidden;}
#attract.hidden{opacity:0;pointer-events:none;}
.attract-pulse{width:clamp(64px,10vh,80px);height:clamp(64px,10vh,80px);border-radius:50%;border:3px solid var(--rojo);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md);animation:touchPulse 2s ease-in-out infinite;}
.attract-pulse svg{width:36px;height:36px;fill:var(--blanco);}
@keyframes touchPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(227,62,43,.5);}50%{transform:scale(1.06);box-shadow:0 0 0 18px rgba(227,62,43,0);}}
.attract-tag{font-family:var(--klein-c);font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--amar);margin-bottom:var(--space-sm);}
.attract-h{font-family:var(--font-title);font-size:clamp(24px,5vh,38px);font-weight:400;line-height:1.1;margin-bottom:var(--space-xs);}
.attract-h em{font-style:normal;color:var(--rojo);}
.attract-sub{font-size:clamp(13px,2vh,15px);opacity:.75;max-width:320px;line-height:1.5;margin-bottom:var(--space-md);}
.attract-books{display:flex;gap:12px;align-items:flex-end;margin-bottom:var(--space-md);height:clamp(80px,12vh,120px);}
.attract-book{width:clamp(52px,8vh,68px);height:clamp(72px,11vh,95px);border-radius:3px 6px 6px 3px;box-shadow:4px 8px 20px rgba(0,0,0,.4);animation:bookFloat 3s ease-in-out infinite;}
.attract-cta{font-family:var(--font-ui);font-size:clamp(12px,2vh,14px);font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--rojo);padding:12px;border-radius:999px;animation:ctaGlow 2.5s ease-in-out infinite;}
.attract-rotate{font-size:13px;opacity:.5;margin-top:var(--space-sm);font-style:italic;}
@keyframes bookFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes ctaGlow{0%,100%{box-shadow:0 4px 20px rgba(227,62,43,.4);}50%{box-shadow:0 4px 28px rgba(227,62,43,.65);}}
.attract-book:nth-child(2){height:clamp(85px,13vh,110px);animation-delay:.4s;}
.attract-book:nth-child(3){height:clamp(68px,10vh,88px);animation-delay:.8s;}
.attract-book:nth-child(4){height:clamp(78px,11.5vh,100px);animation-delay:1.2s;}
@keyframes girar{to{transform:rotate(360deg);}}
@keyframes pop{from{transform:scale(0);}to{transform:scale(1);}}
.est.ok{color:var(--verde);font-weight:600;}.est.err{color:var(--rojo);}.est.load{color:var(--azul);}
@media(max-height:640px){.social-proof{display:none;}:root{--social-h:0px;--safe-top:calc(var(--hdr-h) + var(--franja-h));}}

/* ── SCREENS — contenido centrado entre cabecera y pie ── */
#app{position:fixed;top:var(--safe-top);bottom:var(--safe-bottom);left:0;right:0;overflow:hidden;z-index:2;}
.screen{display:none;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--space-md) 16px;text-align:center;position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.js-ready #s-inicio:not(.active){display:none;}
#s-inicio{display:flex;}
.screen.active{display:flex;animation:ent .35s ease;}
@keyframes ent{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* Contenedor único: head + body + foot como bloque centrado verticalmente */
.screen-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:480px;flex:0 0 auto;gap:var(--space-md);padding:var(--space-sm) 0;margin:auto;}
.screen-head{flex-shrink:0;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);}
.screen-body{flex-shrink:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);}
.screen-foot{flex-shrink:0;width:100%;padding-top:0;margin-top:0;display:flex;flex-direction:column;align-items:center;}

.eyebrow{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--azul);}
.h1{font-family:var(--font-title);font-size:clamp(44px,10.5vh,88px);font-weight:400;line-height:1.06;}
.inicio-hero{width:100%;max-width:min(480px,88vw);height:auto;max-height:clamp(120px,22vh,200px);object-fit:contain;flex-shrink:0;display:block;}
.h1 em{font-style:normal;color:var(--rojo);}
.h2{font-family:var(--font-title);font-size:clamp(18px,3.5vh,28px);font-weight:400;line-height:1.12;}
.lead{font-family:var(--font-body);font-size:clamp(14px,2.1vh,17px);color:var(--gris);line-height:1.45;max-width:400px;}
.time-hint{font-family:var(--font-body);font-size:14px;color:var(--azul);font-weight:700;}
.dots{display:flex;gap:6px;justify-content:center;}
.dot{width:10px;height:10px;border-radius:50%;}

.pasos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;flex-shrink:0;margin-top:8px;}
.pd{width:9px;height:9px;border-radius:50%;background:#DDD;transition:all .3s;}
.pd.ok{background:var(--verde);}.pd.on{background:var(--rojo);transform:scale(1.5);}
.plbl{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris);}

.nav-row{display:flex;gap:var(--space-sm);flex-wrap:nowrap;justify-content:center;width:100%;max-width:420px;flex-shrink:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--touch-min);padding:12px 32px;font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:none;border-radius:999px;cursor:pointer;transition:transform .12s,opacity .12s;position:relative;overflow:hidden;width:100%;max-width:420px;box-sizing:border-box;}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.3;pointer-events:none;}
.btn-r{background:var(--rojo);color:var(--blanco);}
.btn-b{background:var(--azul);color:var(--blanco);}
.btn-v{background:var(--verde);color:var(--blanco);}
.btn-o{background:transparent;color:var(--negro);border:2px solid var(--negro);}
.btn-ghost{background:transparent;color:var(--gris);border:none;font-size:13px;min-height:40px;padding:6px 24px;width:auto;border-radius:999px;}
.btn-lg{font-size:14px;padding:14px 32px;min-height:52px;}
.nav-row .btn{flex:1;width:auto;}
.nav-row .btn-ghost{flex:0 1 auto;}

.form-wrap{width:100%;max-width:420px;text-align:left;flex:0 0 auto;display:flex;flex-direction:column;gap:var(--space-xs);}
.distrito-select{width:100%;max-width:420px;padding:12px 14px;font-family:var(--font-body);font-size:clamp(15px,2.2vh,17px);font-weight:600;border:2px solid #E8E8E8;border-bottom:3px solid var(--azul);border-radius:2px;min-height:var(--touch-min);background:var(--blanco);color:var(--negro);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.distrito-select:focus{border-color:var(--azul);}
.prologo-line{font-family:var(--font-title);font-size:clamp(18px,3.2vh,26px);font-weight:400;line-height:1.2;font-style:italic;color:var(--negro);}
.btn-back::before{content:'← ';}
.btn-touch-hint{animation:touchHint 2s ease-in-out infinite;}
@keyframes touchHint{0%,100%{box-shadow:0 0 0 0 rgba(227,62,43,.35);}50%{box-shadow:0 0 0 12px rgba(227,62,43,0);}}

/* ── NOMBRE + TECLADO CUSTOM ── */
.nombre-display{width:100%;background:var(--blanco);border:2px solid #DDD;border-bottom:3px solid var(--azul);border-radius:2px;padding:10px 12px;font-family:var(--klein);font-size:clamp(18px,3vh,22px);font-weight:700;min-height:44px;margin-bottom:var(--space-xs);word-break:break-word;flex-shrink:0;}
.nombre-display.empty{color:#BBB;font-weight:400;font-family:var(--klein-t);font-size:16px;}
.nombre-display.err{border-bottom-color:var(--rojo);background:#FFF5F5;}
.kbd{width:100%;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:0;flex-shrink:0;}
.kkey{min-height:clamp(42px,5.5vh,52px);background:var(--blanco);border:2px solid #E8E8E8;border-radius:4px;font-family:var(--klein-t);font-size:clamp(14px,2vh,17px);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kkey:active{background:var(--fondo);border-color:var(--azul);transform:scale(.95);}
.kkey-space{grid-column:span 5;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gris);}
.kkey-del{grid-column:span 2;background:#FFF5F5;border-color:#F5C4C4;color:var(--rojo);font-size:13px;}

/* ── CARRUSEL HORIZONTAL ── */
.campo{margin-bottom:var(--space-md);flex-shrink:0;width:100%;}
.campo:last-child{margin-bottom:0;}
.clbl{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--klein-c);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--azul);margin-bottom:var(--space-xs);}
.clbl small{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--gris);}
.h-pins{display:flex;gap:var(--space-xs);margin-bottom:var(--space-xs);}
.h-pins-after{margin-top:var(--space-sm);margin-bottom:0;}
.h-pin{flex:1;min-height:44px;padding:8px 6px;background:var(--blanco);border:2px solid var(--azul);border-radius:4px;font-family:var(--klein-t);font-size:clamp(13px,1.8vh,15px);font-weight:700;color:var(--azul);cursor:pointer;text-align:center;line-height:1.2;display:flex;align-items:center;justify-content:center;}
.h-pin.alt{border-color:var(--amar);background:#FFFBEE;color:#8A6D00;}
.h-pin.sel,.h-pill.sel{background:var(--azul);color:var(--blanco);border-color:var(--azul);}
.h-pin.alt.sel{background:var(--amar);color:var(--negro);border-color:var(--amar);}
.h-carousel-wrap{position:relative;width:100%;}
.h-carousel-wrap::before,.h-carousel-wrap::after{content:'';position:absolute;top:0;bottom:0;width:18px;z-index:2;pointer-events:none;}
.h-carousel-wrap::before{left:0;background:linear-gradient(90deg,var(--blanco),transparent);}
.h-carousel-wrap::after{right:0;background:linear-gradient(-90deg,var(--blanco),transparent);}
.h-carousel{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 4px;}
.h-carousel::-webkit-scrollbar{display:none;}
.h-pill{flex:0 0 auto;scroll-snap-align:start;min-height:42px;padding:8px 14px;background:var(--blanco);border:2px solid #E8E8E8;border-radius:999px;font-family:var(--klein-t);font-size:clamp(13px,1.8vh,15px);font-weight:600;cursor:pointer;white-space:nowrap;}
.h-pill:active{border-color:#CCC;background:var(--fondo);}
.h-swipe-hint{font-size:12px;color:var(--gris);text-align:center;margin-top:var(--space-xs);letter-spacing:.5px;}

/* ── QUIZ ── */
.qhead{width:100%;max-width:480px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-xs);}
.qrail{height:5px;background:#E8E8E8;border-radius:999px;overflow:hidden;}
.qfill{height:100%;background:var(--rojo);border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1);}
.qmeta{display:flex;justify-content:space-between;}
.qnum,.qpct{font-family:var(--klein-c);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.qnum{color:var(--gris);}.qpct{color:var(--rojo);}
.qpreg{font-family:var(--font-title);font-size:clamp(18px,3vh,26px);font-weight:400;line-height:1.3;max-width:480px;flex-shrink:0;}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:480px;flex:0 1 auto;align-content:start;}
.opt{background:var(--blanco);border:2px solid #E8E8E8;border-radius:12px;padding:10px 8px;cursor:pointer;text-align:left;min-height:clamp(64px,9vh,80px);transition:all .15s;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.opt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;transform:scaleY(0);transform-origin:bottom;transition:transform .15s;}
.opt:nth-child(1)::before{background:var(--rojo);}
.opt:nth-child(2)::before{background:var(--azul);}
.opt:nth-child(3)::before{background:var(--verde);}
.opt:nth-child(4)::before{background:var(--amar);}
.opt:active,.opt.sel{border-color:#CCC;background:var(--fondo);}
.opt.sel::before,.opt:active::before{transform:scaleY(1);}
.opt.sel:nth-child(1){border-color:var(--rojo);background:#FFF5F5;}
.opt.sel:nth-child(2){border-color:var(--azul);background:#EEF3FB;}
.opt.sel:nth-child(3){border-color:var(--verde);background:#EEFAF4;}
.opt.sel:nth-child(4){border-color:var(--amar);background:#FFFBEE;}
.oi{font-size:clamp(18px,2.5vh,22px);display:block;margin-bottom:3px;}
.ol{font-size:clamp(14px,2vh,16px);font-weight:700;display:block;line-height:1.2;}
.od{font-size:13px;color:var(--gris);display:block;margin-top:2px;line-height:1.2;}

/* ── PROCESANDO / CELEBRACIÓN ── */
.proc-skip{font-size:13px;color:var(--gris);opacity:.7;}
.spin{width:40px;height:40px;border:3px solid #EEE;border-top-color:var(--rojo);border-radius:50%;animation:girar .7s linear infinite;margin:0 auto;}
.celeb-emoji{font-size:clamp(40px,6vh,52px);margin-bottom:.5rem;animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
.celeb-name{font-family:var(--font-title);font-size:clamp(22px,4vh,34px);font-weight:400;color:var(--rojo);margin-bottom:.35rem;}

/* ── RESULTADO unificado ── */
.res-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);width:100%;align-items:center;text-align:left;}
.res-book-col{display:flex;justify-content:center;}
.libro-sc{perspective:900px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.libro-3d{width:clamp(100px,16vh,130px);height:clamp(140px,22.5vh,182px);position:relative;transform-style:preserve-3d;transform:rotateY(-25deg);transition:transform 1.5s ease;animation:initBook 1s ease 0s 1;}
.libro-3d.still{animation:none;transition:none;}
.libro-3d.animate{animation:initBook 1s ease 0s 1,flota 4s ease-in-out 1s infinite;}
@keyframes initBook{0%{transform:rotateY(-32deg);}100%{transform:rotateY(-25deg);}}
@keyframes flota{0%,100%{transform:rotateY(-25deg) translateY(0);}50%{transform:rotateY(-25deg) translateY(-5px);}}
.libro-sc:hover .libro-3d,.libro-sc:focus .libro-3d{transform:rotateY(-32deg);}
.l-lomo{position:absolute;left:-14px;top:0;width:14px;height:100%;border-radius:3px 0 0 3px;transform:rotateY(-90deg) translateX(-7px);transform-origin:right;display:flex;align-items:center;justify-content:center;}
.l-lomo-txt{font-family:var(--klein-c);font-size:6px;font-weight:700;letter-spacing:1px;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);color:rgba(255,255,255,.75);}
.l-front{position:absolute;inset:0;border-radius:2px 6px 6px 2px;overflow:hidden;transform:translateZ(12px);box-shadow:5px 5px 20px rgba(0,0,0,.3);z-index:2;}
.l-front svg{display:block;width:100%;height:100%;}
.libro-3d::before{content:'';position:absolute;top:3px;right:0;width:24px;height:calc(100% - 6px);transform:translateX(50%) rotateY(90deg);z-index:1;background:linear-gradient(90deg,#fff 0%,#f9f9f9 5%,#fff 10%,#f9f9f9 15%,#fff 20%,#f9f9f9 25%,#fff 30%,#f9f9f9 35%,#fff 40%,#f9f9f9 45%,#fff 50%,#f9f9f9 55%,#fff 60%,#f9f9f9 65%,#fff 70%,#f9f9f9 75%,#fff 80%,#f9f9f9 85%,#fff 90%,#f9f9f9 95%,#fff 100%);}
.libro-3d::after{content:'';position:absolute;inset:0;border-radius:2px 6px 6px 2px;transform:translateZ(-12px);background:#01060f;box-shadow:-10px 0 50px 10px rgba(0,0,0,.25);z-index:0;}

.panel{text-align:left;width:100%;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:var(--space-xs);}
.ptag{display:inline-block;font-family:var(--klein-c);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:8px;color:var(--blanco);align-self:flex-start;}
.pnombre{font-family:var(--font-title);font-size:clamp(17px,2.8vh,22px);font-weight:400;line-height:1.1;}
.pdesc{font-size:clamp(13px,1.8vh,15px);color:var(--gris);line-height:1.45;padding-left:8px;border-left:2px solid var(--rojo);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ptitulo{font-size:clamp(13px,1.8vh,15px);padding:7px 10px;background:var(--fondo);border-left:2px solid var(--amar);line-height:1.3;}
.ptitulo span:first-child{font-family:var(--klein-c);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:var(--space-xs);}

.share-panel{width:100%;border:2px solid #E8E8E8;border-top:3px solid var(--rojo);border-radius:4px;padding:var(--space-md);background:var(--blanco);text-align:center;display:flex;flex-direction:column;gap:var(--space-sm);}
.share-panel-title{font-family:var(--klein-c);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--rojo);}
.share-qr-row{display:flex;align-items:center;gap:var(--space-sm);justify-content:center;text-align:left;}
.qr-wrap{background:var(--blanco);padding:4px;border-radius:4px;border:1px solid #EEE;flex-shrink:0;}
.qr-wrap canvas,.qr-wrap img{display:block;width:clamp(72px,11vh,96px)!important;height:auto!important;}
.qr-copy{flex:1;min-width:0;}
.qr-copy-center{text-align:center;}
.qr-copy p{font-size:clamp(13px,1.8vh,14px);color:var(--gris);line-height:1.45;}
.qr-or{font-family:var(--klein-c);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris);text-align:center;}

.email-row{display:flex;gap:var(--space-xs);width:100%;}
.email-row .einp{flex:1;min-width:0;margin:0;padding:10px;font-size:15px;border:2px solid #DDD;border-radius:2px;outline:none;}
.email-row .einp:focus{border-color:var(--azul);}
.email-row .ebtn{flex-shrink:0;min-width:88px;min-height:42px;padding:0 12px;background:var(--azul);color:var(--blanco);border:none;border-radius:999px;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;}
.est{font-size:13px;min-height:16px;text-align:center;}

.feria-mini{font-size:12px;color:var(--gris);line-height:1.4;}
.feria-mini a{color:var(--azul);font-weight:700;text-decoration:none;}

.est.ok{color:var(--verde);font-weight:600;}.est.err{color:var(--rojo);}.est.load{color:var(--azul);}

.btn-wa{background:#25D366;color:var(--blanco);}
.btn-ig{background:linear-gradient(135deg,#833AB4,#E1306C,#F77737);color:var(--blanco);}
.programa-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;border-radius:999px;}
.mob-share-block{width:100%;padding-top:var(--space-sm);border-top:1px solid #EEE;display:flex;flex-direction:column;gap:var(--space-sm);}
#s-mobile-share{display:none;}
#s-mobile-share.active{display:block!important;}
.mobile-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--space-md) 0 var(--space-lg);max-width:400px;margin:0 auto;width:100%;gap:var(--space-md);text-align:center;}
.mobile-book{margin:0 auto;}
.mobile-share-btns{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;}
.mobile-share-btns .btn{width:100%;}

.panel-mob{text-align:center;width:100%;}
.pdesc-mob{text-align:left;-webkit-line-clamp:4;}
.ptitulo-mob{text-align:left;}
.share-panel-mob{width:100%;}

/* Ripple feedback */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .5s ease-out;pointer-events:none;}
@keyframes ripple{to{transform:scale(4);opacity:0;}}

/* Toast offline */
.toast{position:fixed;bottom:44px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--negro);color:var(--blanco);padding:10px 18px;border-radius:12px;font-size:13px;z-index:500;opacity:0;transition:all .3s;pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

/* Vista previa imagen compartir (fallback file:// y descarga bloqueada) */
.share-preview-modal{position:fixed;inset:0;z-index:700;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(17,17,17,.88);}
.share-preview-modal.open{display:flex;}
.share-preview-panel{position:relative;width:100%;max-width:420px;max-height:92dvh;display:flex;flex-direction:column;gap:12px;}
.share-preview-panel img{width:100%;height:auto;max-height:calc(92dvh - 100px);object-fit:contain;border-radius:4px;background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.35);}
.share-preview-hint{font-size:13px;color:#ddd;text-align:center;line-height:1.45;padding:0 8px;}
.share-preview-close{align-self:center;min-width:160px;}


@media(max-width:380px){
  .opts{gap:5px;}
}

/* ── MODO WEB / MÓVIL — viewport fijo, contenido centrado ── */
body.mode-web,body.mode-mobile-first{overflow:hidden;height:100dvh;max-height:100dvh;position:fixed;inset:0;touch-action:auto;}
body.mode-web #app,body.mode-mobile-first #app{position:fixed;top:var(--safe-top);bottom:var(--safe-bottom);left:0;right:0;overflow:hidden;min-height:auto;}
body.mode-web .screen,body.mode-mobile-first .screen{position:absolute;inset:0;height:100%;min-height:0;max-height:none;justify-content:center;overflow-y:auto;padding:var(--space-md) 16px;}
body.mode-web .screen-inner,body.mode-mobile-first .screen-inner{height:auto;min-height:0;max-height:none;justify-content:center;overflow:visible;flex:0 0 auto;margin:auto;}
body.mode-web #attract,body.mode-mobile-first #attract{display:none!important;}
body.mode-web .kbd,body.mode-mobile-first .kbd{display:none!important;}
body.mode-web .field-display,body.mode-mobile-first .field-display{display:none!important;}
body.mode-web .field-native,body.mode-mobile-first .field-native{display:block!important;}
body.mode-web #s-nombre .kbd,body.mode-mobile-first #s-nombre .kbd{display:none!important;}
body.mode-web #s-nombre .field-display,body.mode-mobile-first #s-nombre .field-display{display:none!important;}
body.mode-totem #s-nombre .field-native{display:none!important;}
body.mode-web .inicio-hero-web,body.mode-mobile-first .inicio-hero-web{display:block!important;}
body.mode-web .inicio-hero-totem,body.mode-mobile-first .inicio-hero-totem{display:none!important;}
body.mode-totem .inicio-hero-web{display:none!important;}
body.mode-totem .inicio-hero-totem{display:block!important;}
body.mode-totem .social-proof{display:flex;}
body.mode-web .social-proof,body.mode-mobile-first .social-proof{display:none;}
body.mode-web,body.mode-mobile-first{--social-h:0px;--safe-top:calc(var(--hdr-h) + var(--franja-h));}
body.mode-mobile-first .kiosk-bar,body.mode-web .kiosk-bar{display:none!important;}
body.mode-web #s-compartir .share-panel{display:none!important;}
body.mode-totem #s-compartir .share-panel.totem-only{display:flex!important;}
.inicio-hero-web{display:none;width:100%;max-width:min(480px,92vw);height:auto;max-height:clamp(140px,24vh,220px);object-fit:contain;margin-bottom:var(--space-md);}
.inicio-web-extra{font-size:clamp(14px,2.1vh,17px);color:var(--gris);line-height:1.5;max-width:400px;text-align:center;margin-top:var(--space-xs);}

/* ── FIRMA TU LIBRO ── */
.firma-form{width:100%;text-align:left;display:flex;flex-direction:column;gap:var(--space-sm);flex:0 0 auto;}
.firma-scroll{flex:0 0 auto;width:100%;overflow:visible;-webkit-overflow-scrolling:touch;}
.firma-field{display:flex;flex-direction:column;gap:4px;}
.field-display{width:100%;background:var(--blanco);border:2px solid #DDD;border-bottom:3px solid var(--azul);border-radius:2px;padding:10px 12px;font-family:var(--klein);font-size:clamp(16px,2.6vh,20px);font-weight:700;min-height:44px;cursor:pointer;word-break:break-word;}
.field-display.empty{color:#BBB;font-weight:400;font-family:var(--klein-t);font-size:15px;}
.field-display.active{border-color:var(--rojo);border-bottom-color:var(--rojo);background:#FFF9F8;}
.field-display.err{border-bottom-color:var(--rojo);background:#FFF5F5;}
.field-native{display:none;width:100%;padding:10px 12px;font-family:var(--klein-t);font-size:16px;border:2px solid #DDD;border-radius:2px;outline:none;min-height:44px;}
.field-native:focus{border-color:var(--azul);}
.terms-row{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:8px 0;}
.terms-row input[type=checkbox]{width:22px;height:22px;min-width:22px;margin-top:2px;accent-color:var(--rojo);cursor:pointer;}
.terms-row label{font-size:clamp(13px,1.8vh,14px);color:var(--gris);line-height:1.45;cursor:pointer;}
.terms-row a{color:var(--azul);font-weight:700;}
.terms-link{background:none;border:none;padding:0;font:inherit;color:var(--azul);font-weight:700;cursor:pointer;text-decoration:underline;display:inline;}
.terms-link:active{opacity:.7;}

/* ── MODAL TÉRMINOS ── */
.terms-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:16px;}
.terms-modal.open{display:flex;}
.terms-modal-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.55);}
.terms-modal-panel{position:relative;z-index:1;width:100%;max-width:480px;max-height:min(80dvh,640px);background:var(--blanco);border-radius:4px;border-top:4px solid var(--rojo);display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.22);overflow:hidden;}
.terms-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #EEE;flex-shrink:0;}
.terms-modal-head h3{font-family:var(--font-title);font-size:18px;font-weight:400;}
.terms-modal-close{width:40px;height:40px;border:none;background:var(--fondo);border-radius:4px;font-size:18px;cursor:pointer;color:var(--gris);}
.terms-modal-body{flex:1;overflow-y:auto;padding:16px;font-size:14px;color:var(--gris);line-height:1.55;-webkit-overflow-scrolling:touch;}
.terms-modal-body p{margin-bottom:12px;}
.terms-modal-body p:last-child{margin-bottom:0;}
.terms-modal-ok{margin:12px 16px 16px;flex-shrink:0;width:calc(100% - 32px);align-self:center;}
.incentive-box{width:100%;max-width:420px;border:2px solid var(--amar);border-radius:4px;padding:var(--space-md);background:#FFFBEE;text-align:center;}
.incentive-code{font-family:var(--font-title);font-size:clamp(28px,5vh,36px);font-weight:400;color:var(--rojo);letter-spacing:3px;margin:var(--space-sm) 0;}
.incentive-desc{font-size:clamp(14px,2vh,16px);color:var(--gris);line-height:1.45;}
.share-btns-col{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;max-width:420px;}
.share-btns-col .btn{width:100%;}
.btn-copy{background:var(--azul);color:var(--blanco);}
.btn-native{background:var(--negro);color:var(--blanco);}
.res-actions{width:100%;display:flex;flex-direction:column;gap:var(--space-sm);align-items:center;}
#s-resultado .pasos .plbl{display:none;}
#s-resultado .res-main{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);width:100%;align-items:stretch;text-align:left;padding:var(--space-md) 0;}
#s-resultado .res-book-col{display:flex;justify-content:center;align-items:center;}
#s-resultado .res-right-col{display:flex;flex-direction:column;gap:var(--space-md);justify-content:space-between;min-width:0;}
#s-resultado .res-titulo-row{width:100%;text-align:left;}
#s-resultado .res-titulo-row .ptitulo{width:100%;margin:0;}
#s-resultado .res-perfil{width:100%;min-width:0;text-align:left;display:flex;flex-direction:column;gap:var(--space-xs);align-items:flex-start;margin-top:0;}
#s-resultado .res-perfil .ptag{align-self:flex-start;}
#s-resultado .res-perfil .pnombre{text-align:left;width:100%;font-size:clamp(18px,3.2vh,24px);}
#s-resultado .pdesc{border-left:2px solid var(--rojo);padding-left:8px;text-align:left;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;width:100%;font-size:clamp(13px,1.9vh,15px);}
#s-resultado .screen-body{gap:var(--space-md);}
#s-resultado .result-ctas{margin-top:0;align-self:center;}
#s-resultado .libro-3d{width:clamp(140px,38vw,200px);height:clamp(196px,53vw,280px);transform:rotateY(-25deg);}
#s-resultado .l-front{transform:translateZ(18px);}
#s-resultado .libro-3d::before{width:30px;transform:translateX(50%) rotateY(90deg);}
#s-resultado .libro-3d::after{transform:translateZ(-18px);}
.result-ctas{width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--space-md);}
.cta-lottery{width:100%;border:2px solid var(--amar);border-radius:12px;padding:var(--space-md);background:#FFFBEE;text-align:center;display:flex;flex-direction:column;gap:var(--space-sm);}
.cta-lottery-title{font-family:var(--font-title);font-size:clamp(17px,2.8vh,22px);font-weight:400;line-height:1.2;color:var(--negro);}
.cta-lottery-desc{font-size:clamp(14px,2vh,16px);color:var(--gris);line-height:1.45;}
.cta-lottery .btn{width:100%;}
.btn-share-img{background:var(--azul);color:var(--blanco);width:100%;}
.lottery-info-box{width:100%;border:2px solid var(--amar);border-radius:12px;padding:var(--space-md);background:#FFFBEE;text-align:left;display:flex;flex-direction:column;gap:var(--space-xs);transition:max-height .3s ease,opacity .3s ease,margin .3s ease,padding .3s ease;overflow:hidden;max-height:500px;}
.lottery-info-box.collapsed{max-height:0;opacity:0;padding:0;margin:0;border:none;}
.lottery-info-box h3{font-family:var(--font-title);font-size:clamp(16px,2.6vh,20px);font-weight:400;line-height:1.2;}
.lottery-info-box ul{font-size:clamp(13px,1.9vh,15px);color:var(--gris);line-height:1.5;padding-left:18px;margin:4px 0;}
.lottery-info-list{font-size:clamp(13px,1.9vh,15px);color:var(--gris);line-height:1.5;padding-left:18px;margin:var(--space-sm) 0 0;text-align:left;}
#share-card-template{position:fixed;left:-9999px;top:0;width:1080px;height:1920px;background:#F9F9F5;pointer-events:none;overflow:hidden;}
.share-card-inner{width:100%;height:100%;padding:64px 72px;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;}
.share-card-brand{font-family:var(--klein-c);font-size:28px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--rojo);margin-bottom:8px;}
.share-card-sub{font-size:22px;color:#666;margin-bottom:48px;}
.share-card-row{width:100%;display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:center;margin-top:32px;}
.share-card-titulo-col{text-align:left;}
.share-card-body{width:100%;margin-top:40px;text-align:left;}
.share-card-footer{width:100%;margin-top:auto;padding-top:32px;border-top:1px solid #E8E8E8;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.share-card-footer-lbl{font-family:var(--klein-c);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#666;}
.share-card-footer-sep{width:1px;height:22px;background:#DDD;margin:0 12px;}
.share-card-footer img{object-fit:contain;display:block;}
.share-card-footer .share-logo-cpl{height:32px;}
.share-card-footer .share-logo-apros{height:24px;}
.share-card-tag{display:inline-block;font-family:var(--klein-c);font-size:22px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;border-radius:4px;color:#fff;margin-bottom:20px;}
.share-card-perfil{font-family:var(--font-title);font-size:52px;font-weight:400;line-height:1.1;margin-bottom:20px;color:#111;}
.share-card-desc{font-size:30px;color:#555;line-height:1.45;margin-bottom:28px;}
.share-card-titulo-lbl{font-family:var(--klein-c);font-size:20px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#888;display:block;margin-bottom:8px;}
.share-card-titulo{font-size:32px;line-height:1.35;padding:20px 24px;background:#fff;border-left:4px solid var(--amar);}
.share-card-cover{width:240px;height:338px;border-radius:4px 12px 12px 4px;overflow:hidden;box-shadow:8px 16px 40px rgba(0,0,0,.18);flex-shrink:0;}
.share-card-cover svg{width:100%;height:100%;display:block;}
#s-resultado.mode-compact .share-panel-email{display:none;}
.kbd-email .kkey-at,.kbd-email .kkey-dot,.kbd-email .kkey-und,.kbd-email .kkey-star{font-weight:700;color:var(--azul);}
.kbd-phone{grid-template-columns:repeat(3,1fr);}
.firma-scroll{flex:0 0 auto;width:100%;overflow:visible;-webkit-overflow-scrolling:touch;}