/* Kiosco tablet — diseño base 1920x1080, escalado con --u (1px de diseño) */
:root{
  --u: max(.55px, min(calc(100vw / 1920), calc(100vh / 1080)));
  --orange:#f86600;
  --teal:#0094aa;
  --teal-2:#00b0c8;
  --info:rgba(0,90,105,.55);
  --btn-bg:linear-gradient(180deg,var(--teal-2),#0089a3);
  --btn-fg:#fff;
}
body.v2{
  --teal:#1f95cf;
  --info:rgba(0,95,140,.55);
  --btn-bg:#fff;
  --btn-fg:var(--orange);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b6f80;color:#fff;overflow-x:hidden}
body.v2{background:#1c8fcd}
body{font-family:'Montserrat Alternates',system-ui,sans-serif;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0}

.screen{position:fixed;inset:0;display:none;background-size:cover;background-position:center;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Pantalla de inicio / gracias ---------- */
.hero{min-height:100%;display:flex;justify-content:flex-end;align-items:center;padding:calc(40*var(--u)) calc(110*var(--u)) calc(40*var(--u)) 0}
.hero-col{width:calc(620*var(--u));display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .logo{width:calc(270*var(--u));margin-bottom:calc(110*var(--u))}
.hero .naming{width:calc(610*var(--u));margin-bottom:calc(150*var(--u))}
body.v2 .hero .naming{width:calc(720*var(--u));margin-right:0}
.hero .gracias{width:calc(550*var(--u));margin-bottom:calc(70*var(--u))}
.hero .sub{font-weight:700;font-size:calc(36*var(--u));margin:0 0 calc(95*var(--u))}
.btn-hero{width:calc(555*var(--u));height:calc(90*var(--u));border-radius:calc(22*var(--u));background:var(--btn-bg);color:var(--btn-fg);
  font-weight:800;font-size:calc(38*var(--u));letter-spacing:.06em;text-transform:uppercase;box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(0,0,0,.18);transition:transform .1s}
.btn-hero:active{transform:scale(.97)}
.paseo-tag{margin-top:calc(42*var(--u));font-size:calc(20*var(--u));letter-spacing:.06em;text-transform:uppercase;font-weight:500}
body.v2 .paseo-tag{font-weight:700}
.stock-mini{display:none}

/* ---------- Formulario ---------- */
.form-wrap{width:calc(1460*var(--u));margin:0 auto;padding:calc(20*var(--u)) 0 calc(60*var(--u))}
.form-head{display:flex;justify-content:space-between;align-items:flex-start;margin-left:calc(-8*var(--u))}
.form-head .logo{width:calc(178*var(--u))}
.form-head .brand{display:flex;flex-direction:column;align-items:flex-end;padding-top:calc(18*var(--u))}
.form-head .naming{width:calc(350*var(--u))}
body.v2 .form-head .naming{width:calc(348*var(--u))}
.pill{margin-top:calc(14*var(--u));background:var(--info);border-radius:calc(8*var(--u));padding:calc(8*var(--u)) calc(24*var(--u));font-size:calc(15*var(--u));letter-spacing:.05em;text-transform:uppercase}
body.v2 .pill{font-weight:700}

.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(32*var(--u));row-gap:calc(18*var(--u));margin-top:calc(36*var(--u))}
.field label{display:block;font-family:Montserrat,sans-serif;font-weight:500;font-size:calc(21*var(--u));margin:0 0 calc(8*var(--u))}
.field input{width:100%;height:calc(81*var(--u));border:3px solid transparent;border-radius:calc(14*var(--u));background:#fff;color:#123;
  font-family:Montserrat,sans-serif;font-size:max(16px,calc(30*var(--u)));font-weight:500;padding:0 calc(26*var(--u));outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--orange)}
.field.err input{border-color:#ffdd00;background:#fff8e0}
.field .msg{min-height:0;font-family:Montserrat,sans-serif;font-size:calc(17*var(--u));font-weight:600;color:#ffe066;margin-top:calc(4*var(--u));display:none}
.field.err .msg{display:block}
.info-box{align-self:end;height:calc(81*var(--u));border-radius:calc(14*var(--u));background:var(--info);display:flex;align-items:center;justify-content:center;
  font-family:Montserrat,sans-serif;font-size:calc(22*var(--u));font-weight:500;text-align:center;padding:0 calc(16*var(--u))}

.photos{display:grid;grid-template-columns:1fr 1fr;gap:calc(32*var(--u));margin-top:calc(28*var(--u))}
.drop{position:relative;height:calc(112*var(--u));border:2px dashed rgba(255,255,255,.95);border-radius:calc(14*var(--u));background:transparent;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6*var(--u));font-family:Montserrat,sans-serif;font-weight:500;font-size:calc(21*var(--u));overflow:hidden}
.drop img.ico{width:calc(40*var(--u))}
.drop.has{border-style:solid;justify-content:flex-start;flex-direction:row;padding:0 calc(16*var(--u));gap:calc(18*var(--u));background:rgba(0,0,0,.12)}
.drop .thumb{display:none;height:calc(86*var(--u));width:calc(86*var(--u));object-fit:cover;border-radius:calc(8*var(--u));background:#fff}
.drop.has .thumb{display:block}
.drop.has img.ico{display:none}
.drop .ok{display:none;font-weight:700}
.drop.has .ok{display:block;text-align:left}
.drop.has .lbl{display:none}
.drop .ok small{display:block;font-weight:500;opacity:.85;font-size:calc(17*var(--u))}
.drop.err{border-color:#ffdd00}
.drop .rm{display:none;position:absolute;right:calc(14*var(--u));top:50%;transform:translateY(-50%);width:calc(54*var(--u));height:calc(54*var(--u));min-width:36px;min-height:36px;border-radius:50%;
  background:rgba(255,255,255,.95);color:#c33;font-size:calc(30*var(--u));font-weight:700;line-height:1}
.drop.has .rm{display:block}
.drop .busy{display:none}
.drop.loading .busy{display:block}

.bottom{display:grid;grid-template-columns:1fr 1fr;gap:calc(32*var(--u));margin-top:calc(36*var(--u));align-items:center}
.check{display:flex;align-items:center;gap:calc(16*var(--u));font-size:calc(19*var(--u));font-weight:500;cursor:pointer}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{flex:0 0 auto;width:calc(32*var(--u));height:calc(32*var(--u));min-width:24px;min-height:24px;background:#fff;border:2px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:800;font-size:calc(26*var(--u))}
.check input:checked + .box::after{content:'✓'}
.check.err .box{border-color:#ffdd00;box-shadow:0 0 0 3px rgba(255,221,0,.5)}
.check u{text-underline-offset:3px}
.btn-save{height:calc(81*var(--u));border-radius:calc(14*var(--u));background:var(--orange);color:#fff;font-weight:800;font-size:calc(38*var(--u));letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) rgba(0,0,0,.15);transition:transform .1s, opacity .2s}
.btn-save:active{transform:scale(.98)}
.btn-save[disabled]{opacity:.65}
.back{position:fixed;left:calc(20*var(--u));bottom:calc(16*var(--u));background:rgba(0,0,0,.18);color:#fff;border-radius:calc(10*var(--u));padding:calc(10*var(--u)) calc(18*var(--u));
  font-size:max(12px,calc(17*var(--u)));font-weight:600}

/* ---------- Hojas / modales ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center;z-index:50}
.sheet-bg.open{display:flex}
.sheet{width:min(560px,94vw);background:#fff;color:#123;border-radius:18px 18px 0 0;padding:18px 18px 22px;animation:up .2s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{margin:4px 0 14px;font-size:18px;text-align:center;color:#345}
.sheet button{display:flex;align-items:center;gap:14px;width:100%;padding:18px;margin-bottom:10px;border-radius:12px;background:#eef6f8;color:#0b4f5c;font-size:19px;font-weight:700}
.sheet button svg{width:28px;height:28px;flex:0 0 auto}
.sheet button.cancel{background:transparent;color:#789;justify-content:center;margin:0}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-bg.open{display:flex}
.modal{background:#fff;color:#223;border-radius:16px;max-width:760px;width:100%;max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.modal .body{padding:22px 26px;overflow:auto;font-family:Montserrat,sans-serif;font-size:16px;line-height:1.55;white-space:pre-wrap}
.modal .foot{padding:14px 20px;border-top:1px solid #eee;text-align:right}
.modal .foot button{background:var(--orange);color:#fff;border-radius:10px;padding:12px 26px;font-weight:700;font-size:16px}
.modal h2{margin:0;padding:20px 26px 0;font-size:22px;color:var(--orange)}

.toast{position:fixed;left:50%;top:calc(24*var(--u));transform:translate(-50%,-160%);background:#fff;color:#b33;font-family:Montserrat,sans-serif;font-weight:700;
  font-size:max(15px,calc(24*var(--u)));padding:calc(18*var(--u)) calc(34*var(--u));border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:80;transition:transform .3s;max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:rgba(0,40,50,.6);z-index:70;font-size:max(18px,calc(30*var(--u)));font-weight:700}
.overlay.open{display:flex}
.spinner{width:64px;height:64px;border-radius:50%;border:6px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.nostock{display:none;margin-top:calc(30*var(--u));background:rgba(0,0,0,.28);padding:calc(18*var(--u)) calc(28*var(--u));border-radius:calc(14*var(--u));font-weight:700;font-size:calc(28*var(--u))}
body.agotado .nostock{display:block}
body.agotado #btnIngresar{opacity:.5}

/* ---------- Tablets en vertical ---------- */
@media (orientation:portrait){
  :root{--u: max(.62px, calc(100vw / 1200))}
  .hero{justify-content:center;align-items:flex-end;padding:0 0 calc(120*var(--u))}
  .hero-col{background:rgba(0,0,0,.25);border-radius:24px;padding:calc(40*var(--u))}
  .form-wrap{width:92vw}
  .grid,.photos,.bottom{grid-template-columns:1fr}
}

/* ======================================================================
   Escenas animadas (inicio y gracias)
   ====================================================================== */
.screen.scened{background:#1d3a12}
body.v2 .screen.scened{background:#36a9e6}
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* Escenario 16:9 que siempre cubre la pantalla: así las capas quedan alineadas entre sí */
.stage{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%)}
.stage .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.screen.scened .hero{position:relative;z-index:2}
.flies{position:absolute;inset:0;width:100%;height:100%;display:block}
.flies-front{z-index:1}

/* V1 — fondo fijo (sin zoom), sol que late y hamaca que se mece */
.sun{position:absolute;left:-8%;top:-22%;width:62%;height:80%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,170,.55),rgba(255,214,120,.18) 55%,rgba(255,214,120,0));
  mix-blend-mode:screen;animation:sun 7s ease-in-out infinite alternate}
@keyframes sun{from{opacity:.35;transform:scale(.96)}to{opacity:.8;transform:scale(1.05)}}
/* Pivote: punto donde la soga sale por arriba de la imagen */
.hamaca{transform-origin:57.6% -4%;animation:swing 5.2s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
@keyframes swing{
  from{transform:scale(1.04) rotate(-.8deg)}
  to{transform:scale(1.04) rotate(.8deg)}
}

/* V2 — cielo en loop horizontal infinito (la imagen empalma perfecto consigo misma) */
.sky{position:absolute;inset:0;overflow:hidden}
.sky-track{position:absolute;top:0;left:0;height:100%;display:flex;animation:sky 150s linear infinite;will-change:transform}
.sky-track img{height:100%;width:auto;max-width:none;flex:none;display:block}
@keyframes sky{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Degradé azul sobre la mitad derecha de la pantalla, encima del cielo y detrás de mamá e hija */
.sky-shade{position:absolute;top:0;bottom:0;right:calc((100% - 100vw) / 2);width:90vw;pointer-events:none;
  background:linear-gradient(to left,rgba(0,95,160,.8),rgba(0,95,160,0))}
/* Mamá e hija: estática, sin cambios de tamaño */

body.v2 .screen.scened .paseo-tag,body.v2 .screen.scened .sub{text-shadow:0 1px 8px rgba(0,70,130,.55)}

/* Entrada de los textos al mostrarse la pantalla */
.screen.scened.active .hero-col > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.screen.scened.active .hero-col > :nth-child(1){animation-delay:.05s}
.screen.scened.active .hero-col > :nth-child(2){animation-delay:.2s}
.screen.scened.active .hero-col > :nth-child(3){animation-delay:.38s}
.screen.scened.active .hero-col > :nth-child(4){animation-delay:.52s}
.screen.scened.active .hero-col > :nth-child(5){animation-delay:.64s}
.screen.scened.active .hero-col > :nth-child(6){animation-delay:.74s}
@keyframes rise{from{opacity:0;transform:translateY(calc(26*var(--u)))}to{opacity:1;transform:none}}
#scrOk.active .gracias{animation:pop 1s cubic-bezier(.2,1.4,.4,1) .2s both}
@keyframes pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.screen.scened.active .btn-hero{animation:rise .9s cubic-bezier(.2,.7,.2,1) .38s both}
body.v2 #scrHome.active #btnIngresar{animation:none}
.screen.scened .btn-hero:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .fondo,.sun,.hamaca,.sky-track,.screen.scened.active .btn-hero,body.v2 .screen.scened.active .btn-hero{animation:none!important}
  .flies{display:none}
}