:root{
  --navy:#18246C; --snow:#F6F8FB; --ice:#A3BCDA; --ice-t:#D3E0EE;
  --red:#CC1820; --yellow:#FCF000; --green:#4F7D1A; --green-on:#7DBB2E;
  --gris:#56607f; --r:22px; --cab:76px; --lado:4vw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--snow);color:var(--navy);font:400 16px/1.45 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;padding:8px 12px;border-radius:8px}
.saltar:focus{left:8px}
.f{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:#e3e8f0}
.f img{width:100%;height:100%;object-fit:cover}

/* ---------- encabezado ---------- */
.cab{position:fixed;inset:0 0 auto;height:var(--cab);display:flex;align-items:center;gap:26px;padding:0 var(--lado);z-index:50;color:#fff;transition:background .3s,height .3s,transform .35s}
.cab.compacta{background:rgba(24,36,108,.96);height:64px;box-shadow:0 6px 24px rgba(10,14,40,.18)}
.cab.oculta{transform:translateY(-100%)}
.cab-logo img{height:64px;width:auto;transition:height .3s}
.cab.compacta .cab-logo img{height:48px}
.cab-nav{display:flex;gap:26px;margin-left:auto}
.cab-nav a{text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.cab-nav a:hover{border-color:var(--yellow)}
.estado{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;background:rgba(255,255,255,.14);padding:8px 14px;border-radius:999px;margin:0;white-space:nowrap}
.estado i{width:9px;height:9px;border-radius:50%;background:#9aa3c4;flex:none}
.estado.abierto i{background:var(--green-on);box-shadow:0 0 0 4px rgba(125,187,46,.25)}
.demo-tag{background:var(--yellow);color:var(--navy);font-weight:800;font-size:12px;letter-spacing:.04em;padding:6px 10px;border-radius:6px;text-decoration:none}
.barra{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--yellow)}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;background:var(--navy);color:#fff;overflow:hidden}
.slides,.slide{position:absolute;inset:0;margin:0}
.slide{opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1}
.slide video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,13,42,.78) 0%,rgba(9,13,42,.45) 38%,rgba(9,13,42,0) 66%),linear-gradient(0deg,rgba(9,13,42,.7) 0%,rgba(9,13,42,0) 34%),linear-gradient(180deg,rgba(9,13,42,.45) 0%,rgba(9,13,42,0) 18%)}
.hero-txt{position:absolute;left:var(--lado);bottom:17vh;z-index:2;width:min(46vw,660px)}
.titulares{display:grid}
.tit{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.tit.on{opacity:1;transform:none;transition-delay:.25s}
.t-g{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(48px,9.4vh,112px);line-height:.9;margin:0 0 2.2vh;text-wrap:balance}
.t-b{font-size:clamp(17px,2.5vh,23px);line-height:1.4;margin:0;max-width:28em}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:3.6vh}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:background .2s,color .2s,transform .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.rojo{background:var(--red);color:#fff}
.btn.rojo:hover{background:#ad121a}
.btn.linea{border:2px solid rgba(255,255,255,.9);color:#fff}
.btn.linea:hover{background:#fff;color:var(--navy)}
.pasos{position:absolute;left:var(--lado);right:var(--lado);bottom:5vh;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.paso{background:none;border:0;color:#fff;text-align:left;padding:8px 0 0;cursor:pointer;font:600 15px Figtree,sans-serif;opacity:.65;transition:opacity .2s}
.paso:hover,.paso.on{opacity:1}
.paso i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.28);overflow:hidden;position:relative;margin-bottom:10px}
.paso i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.paso.hecho i::after{transform:scaleX(1)}
.paso.on i::after{animation:llena 5s linear forwards}
@keyframes llena{to{transform:scaleX(1)}}

/* ---------- secciones ---------- */
.sec > *,.g-der > *{min-width:0}
.sec{position:relative;height:100svh;padding:calc(var(--cab) + 3vh) var(--lado) 4vh;display:grid;gap:3vw;overflow:hidden}
.sec-tit{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(42px,7.6vh,92px);line-height:.92;margin:0 0 1.8vh;text-wrap:balance}
.lead{font-size:clamp(16px,2.4vh,22px);line-height:1.4;margin:0 0 2.6vh;max-width:32em}
.navy{background:var(--navy);color:#fff}
.panel{border-radius:var(--r);padding:5vh 3.2vw;position:relative;display:flex;flex-direction:column;justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips li{background:#fff;color:var(--navy);border-radius:999px;padding:8px 15px;font-weight:600;font-size:clamp(14px,1.9vh,17px)}
.chips.oscuro li{background:var(--navy);color:#fff}
.mini{font-size:14px;font-weight:700;opacity:.75;margin:0 0 10px}

/* el sello: el yeti se asoma por el borde, como en el cartel */
.asoma{position:absolute;left:3vw;bottom:100%;width:clamp(130px,19vh,200px);aspect-ratio:839/503;overflow:hidden;pointer-events:none}
.asoma img{width:100%;height:auto;transform:translateY(100%);transition:transform .8s cubic-bezier(.2,.9,.25,1.15)}
.asoma.v img,html:not(.js) .asoma img{transform:translateY(4%)}

/* hoy */
.hoy{grid-template-columns:1.15fr 1fr}
.hoy-fotos{position:relative;min-height:0}
.f-grande{position:absolute;inset:0 20% 0 0}
.f-chica{position:absolute;right:0;bottom:7%;width:40%;aspect-ratio:1;border:7px solid var(--snow);border-radius:28px}
.f-chica figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(24,36,108,.92);color:#fff;font-weight:600;font-size:14px;padding:8px 12px;border-radius:12px}
.hoy .panel{margin-top:13vh;align-self:stretch}
.estado.grande{font-size:clamp(15px,2.1vh,18px);padding:10px 16px;align-self:flex-start;margin-bottom:2.4vh}
.sabores-hoy{margin-top:.4vh}
.aviso{margin:3.2vh 0 0;border-left:4px solid var(--yellow);padding-left:14px;font-size:clamp(15px,2vh,17px);max-width:30em}

/* helado */
.helado{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr auto;grid-template-areas:'foto txt' 'foto res';row-gap:0;background:var(--ice-t)}
.helado-foto{grid-area:foto}
.helado-txt{grid-area:txt;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.helado .resena{grid-area:res;align-self:start;margin-bottom:4vh}
.sabores{list-style:none;padding:0;margin:0 0 2.6vh;columns:2;column-gap:2vw}
.sabores li{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:clamp(22px,3.9vh,42px);line-height:1.08;text-transform:uppercase;break-inside:avoid}
/* precios en una línea que corre, como un cartel */
.ticker{overflow:hidden;max-width:100%;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);padding:1.1vh 0;margin:0 0 3.2vh;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-in{display:inline-flex;white-space:nowrap;animation:corre 24s linear infinite}
.ticker-in span{padding:0 1.4em;font-size:clamp(15px,2.1vh,18px);font-weight:600}
.ticker-in span::after{content:'✱';color:var(--red);margin-left:2.8em;font-size:.8em}
.ticker-in b{color:var(--red);margin-left:7px}
@keyframes corre{to{transform:translateX(-50%)}}
.t-sabores{display:none}
.resena{display:grid;grid-template-columns:56px 1fr;gap:14px;background:#fff;border-radius:18px;padding:16px 20px;max-width:540px;box-shadow:0 10px 30px rgba(24,36,108,.08)}
.resena img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.r-nom{font-weight:700;margin:0}
.r-meta{font-size:13px;color:var(--gris);margin:2px 0 6px}
.estrellas{color:#F2A900;letter-spacing:1px;margin-right:4px}
.r-txt{margin:0;font-size:clamp(15px,2vh,17px)}

/* golosinas */
.golosinas{grid-template-columns:.8fr 1.2fr}
.g-der{display:grid;grid-template-rows:auto 1fr;gap:3.4vh;min-height:0}
.g-txt{padding-top:2vh}
.g-tira{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;min-height:0}

/* comida caliente */
.caliente{grid-template-columns:1fr 1fr}
.c-txt{display:flex;flex-direction:column;justify-content:center;min-height:0}
.menu{list-style:none;padding:0;margin:0;columns:2;column-gap:3vw}
.menu li{display:flex;align-items:baseline;gap:10px;padding:1.15vh 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:clamp(14px,2.2vh,20px);break-inside:avoid}
.menu .m-n{flex:1;font-weight:600}
.menu .m-x{display:block;font-weight:400;font-size:.82em;opacity:.7}
.menu .m-p{font-weight:700;color:var(--yellow)}
.nota{font-size:13px;opacity:.7;margin:1.8vh 0 0}
.c-fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0}
.c-fotos figcaption{position:absolute;left:12px;bottom:12px;background:rgba(24,36,108,.92);color:#fff;font-weight:700;font-size:14px;padding:7px 12px;border-radius:12px}

/* chocolate */
.chocolate{grid-template-columns:1.25fr .75fr}
.ch-fotos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;min-height:0}
.ch-a{grid-row:1/3}
.ch-txt{display:flex;flex-direction:column;justify-content:center}
.lista{list-style:none;padding:0;margin:0;border-top:2px solid var(--navy)}
.lista li{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:clamp(20px,3.3vh,34px);text-transform:uppercase;line-height:1.1;padding:1vh 0;border-bottom:2px solid var(--navy)}

/* reseñas: próximamente */
.resenas{grid-template-rows:auto auto auto;align-content:center;row-gap:4vh;text-align:center;justify-items:center}
.r-vacias{display:grid;grid-template-columns:repeat(3,minmax(0,360px));gap:20px;width:100%;justify-content:center;align-self:center}
.r-card{background:#fff;border:2px dashed #c3cbe0;border-radius:20px;padding:28px;display:grid;gap:14px;grid-template-columns:56px 1fr;align-content:start;height:min(44vh,400px);text-align:left}
.r-card i{width:56px;height:56px;border-radius:50%;background:var(--ice-t);grid-row:span 2}
.r-card b{height:14px;border-radius:7px;background:#dfe5f0;width:60%;align-self:end}
.r-card span{grid-column:1/-1;height:12px;border-radius:6px;background:#eef1f7}
.r-card span:first-of-type{grid-column:2;width:40%;background:#f6d77a}
.r-card .corta{width:55%}
.nota-demo{max-width:660px;font-size:clamp(16px,2.3vh,20px);margin:0}
.nota-demo b{display:inline-block;background:var(--yellow);color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:6px;margin-right:8px;vertical-align:2px}

/* dónde */
.donde{grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto;row-gap:1.6vh;padding-bottom:2.2vh}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.donde .panel{margin-top:10vh;padding-top:3.6vh;padding-bottom:3.6vh}
.datos{margin:0 0 3vh}
.datos div{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:.95vh 0;border-bottom:1px solid rgba(255,255,255,.16)}
.datos dt{font-weight:700;opacity:.7;font-size:14px}
.datos dd{margin:0;font-size:clamp(14px,1.95vh,17px)}
.datos a{text-decoration:none;font-weight:700}
.btn.pronto{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);border:1px dashed rgba(255,255,255,.35);cursor:default;font-weight:600}
.btn.pronto em{font-style:normal;background:var(--yellow);color:var(--navy);font-size:11px;font-weight:800;padding:3px 7px;border-radius:5px;margin-left:10px}
.pie{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--gris)}
.pie p{margin:0}

/* ---------- fotos que se tocan: visor ---------- */
.sec .f img{cursor:zoom-in}
.f.toca::after{content:"";position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318246C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/15px no-repeat;pointer-events:none}
.visor{position:fixed;inset:0;z-index:90;background:rgba(9,13,42,.94);display:grid;grid-template-rows:1fr auto;padding:56px 16px 20px;touch-action:pan-y}
.visor[hidden]{display:none}
.visor img{width:100%;height:100%;object-fit:contain;border-radius:14px;min-height:0;animation:entra .3s ease}
@keyframes entra{from{opacity:0;transform:scale(.97)}}
.visor .v-pie{display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;padding-top:14px;font-weight:600}
.visor button{background:rgba(255,255,255,.14);color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer}
.visor .v-x{position:absolute;top:10px;right:14px}
.visor .v-alt{position:absolute;left:16px;right:72px;top:16px;color:#fff;font-size:14px;opacity:.85;margin:0}

/* ---------- hero: el titular entra palabra por palabra y el video se acerca ---------- */
.t-g .w{display:inline-block;opacity:0;transform:translateY(.45em)}
.tit.on .t-g .w{animation:sube .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--k) * 70ms + .3s)}
@keyframes sube{to{opacity:1;transform:none}}
.slide.on video{animation:acerca 6s ease-out both}
@keyframes acerca{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ---------- entrada por sección (lo oculta mueve.js, nunca el CSS solo) ---------- */
.js .rev{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.js .rev.v{opacity:1;transform:none}
.js .rev-f img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js .rev-f.v img{transform:none}

/* ---------- celular: layout propio ---------- */
@media (max-width:760px),(max-aspect-ratio:4/5){
  :root{--cab:62px;--lado:16px;--r:18px}
  .cab{gap:10px}
  .cab.compacta{height:58px}
  .cab-logo img,.cab.compacta .cab-logo img{height:44px}
  .cab-nav{display:none}
  .cab .estado{font-size:12px;padding:6px 10px;margin-left:auto}
  .demo-tag{font-size:11px;padding:5px 8px}
  .menu-btn{display:grid;place-content:center;gap:6px;width:42px;height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.14);cursor:pointer}
  .menu-btn span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s}
  .menu-abierto .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-abierto .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .menu-abierto .cab-nav{display:flex;position:fixed;inset:0;z-index:-1;background:var(--navy);flex-direction:column;align-items:center;justify-content:center;gap:22px;margin:0}
  .menu-abierto .cab-nav a{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:38px}
  .menu-abierto{overflow:hidden}

  .hero::after{background:linear-gradient(0deg,rgba(9,13,42,.9) 0%,rgba(9,13,42,.55) 38%,rgba(9,13,42,0) 62%),linear-gradient(180deg,rgba(9,13,42,.5) 0%,rgba(9,13,42,0) 16%)}
  .hero-txt{left:16px;right:16px;width:auto;bottom:13svh}
  .t-g{font-size:clamp(38px,6.4svh,58px);margin-bottom:1.6svh}
  .t-b{font-size:clamp(15px,2.1svh,18px)}
  .botones{margin-top:2.6svh;gap:10px}
  .btn{height:48px;padding:0 20px;font-size:15px}
  .pasos{bottom:3.5svh;gap:8px}
  .paso{font-size:12px}

  .sec{padding:calc(var(--cab) + 1.6svh) 16px 2svh;gap:2svh;grid-template-columns:minmax(0,1fr)}
  .sec-tit{font-size:clamp(34px,5.6svh,50px);margin-bottom:1.2svh}
  .lead{font-size:clamp(14px,2svh,17px);margin-bottom:1.8svh}
  .panel{padding:2.8svh 18px}

  .hoy{grid-template-rows:37svh 1fr}
  .f-grande{inset:0 26% 0 0}
  .f-chica{width:44%;bottom:0;border-width:5px}
  .f-chica figcaption{font-size:12px;padding:6px 8px;left:6px;right:6px;bottom:6px}
  .hoy .panel{margin-top:7svh;justify-content:flex-start}
  .hoy .sec-tit,.donde .sec-tit{font-size:clamp(30px,4.6svh,42px)}
  .estado.grande{font-size:14px;padding:7px 12px;margin-bottom:1.6svh}
  .hoy .chips li{font-size:13px;padding:6px 11px;flex:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-18px;padding-right:18px}
  .chips::-webkit-scrollbar{display:none}
  .chips li{flex:none}
  .hoy .lead{margin-bottom:1.4svh}
  .aviso{font-size:13.5px}
  .asoma{width:clamp(100px,13.5svh,140px);left:18px}
  .aviso{margin-top:2svh}

  .helado{grid-template-columns:minmax(0,1fr);grid-template-rows:47svh auto 1fr;grid-template-areas:'foto' 'res' 'txt';row-gap:1.6svh}
  .helado-foto img{object-position:50% 88%}
  .helado .resena{margin:0;padding:10px 12px;align-items:center}
  .helado .r-txt{font-size:14px;line-height:1.35}
  .helado .r-meta{margin:0 0 3px}
  .helado .sabores{display:none}
  .t-sabores{display:block;border:0;padding:0;margin:0 0 1.2svh}
  .t-sabores .ticker-in{animation-duration:30s}
  .t-sabores span{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:clamp(22px,3.2svh,28px);text-transform:uppercase;padding:0 .6em}
  .t-sabores span::after{color:var(--navy);margin-left:1.2em}
  .t-precios{margin-bottom:0;padding:.9svh 0}
  .t-precios span{font-size:14px}
  .helado-txt{justify-content:flex-start}
  .sabores{margin-bottom:1.6svh}
  .sabores li{font-size:clamp(18px,2.7svh,24px)}
  .precios{margin-bottom:1.8svh;gap:4px 16px}
  .resena{padding:12px 14px;grid-template-columns:44px 1fr;gap:12px}
  .resena img{width:44px;height:44px}

  .golosinas{grid-template-rows:40svh minmax(0,1fr)}
  .g-der{gap:2svh;grid-template-rows:auto minmax(0,1fr)}
  .g-txt{padding-top:0}
  .g-tira{gap:8px}

  .caliente{grid-template-rows:25svh 1fr}
  .c-fotos{order:-1;gap:8px}
  .c-fotos figcaption{font-size:12px;left:8px;bottom:8px;padding:5px 9px}
  .c-txt{justify-content:flex-start}
  .menu{columns:1}
  .menu li{padding:.5svh 0;font-size:clamp(13px,1.8svh,16px)}
  .menu .m-x{display:none}

  .chocolate{grid-template-rows:30svh 1fr}
  .ch-fotos{gap:8px}
  .ch-txt{justify-content:flex-start}
  .lista li{font-size:clamp(18px,2.8svh,26px);padding:.8svh 0}

  .resenas{align-content:start;padding-top:calc(var(--cab) + 4svh)}
  .r-vacias{grid-template-columns:1fr;gap:10px}
  .r-card{height:auto;padding:14px;grid-template-columns:40px 1fr;gap:8px}
  .r-card i{width:40px;height:40px}

  .donde{grid-template-rows:16svh 1fr auto;row-gap:1.2svh}
  .donde .panel{margin-top:0}
  .donde .asoma{display:none}
  .datos{margin-bottom:1.6svh}
  .datos div{grid-template-columns:82px 1fr;padding:.6svh 0;gap:8px}
  .datos dd{font-size:13.5px}
  .donde .lead{font-size:14px;margin-bottom:1.2svh}
  .datos dt{font-size:12px}
  .donde .botones{margin-top:0;gap:8px}
  .donde .btn{height:42px;padding:0 16px;font-size:14px}
  .btn.pronto{font-size:13px}
  .pie{flex-direction:column;gap:2px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}