/* Sistema premium "Escarcha" (diseno/propuesta-premium.md, Web Diseño 9 oct). Fuente: diseno/maqueta-premium-inicio.html. Páginas que lo usan: config.json → premium_paginas */

/* ===== Sistema "Escarcha" · propuesta-premium.md. Paleta = guía v3 (mismos nombres que sitio/estaticos/estilos.css) ===== */
:root{
--fondo:#FFFFFF;--fondo-2:#E9F7F6;--fondo-oso:#6AC8D0;
--texto:#0B2427;--texto-suave:#2A4447;--acento-texto:#05776E;
--turquesa:#08BEAF;--amarillo:#FFDE59;--whatsapp:#25D366;
--linea:rgba(8,190,175,.35);--sombra:0 8px 24px rgba(11,36,39,.10);--sombra-2:0 18px 40px rgba(11,36,39,.16);
/* escala tipográfica (celular → escritorio) */
--t-display:clamp(64px,9.2vw,132px);--t-h2:clamp(40px,4.6vw,64px);--t-h3:clamp(28px,2.4vw,34px);
--t-cuerpo:clamp(16px,1.25vw,18px);--t-chico:14px;--t-legal:13px;--t-eti:12px;
/* espaciado base 8 */
--e1:8px;--e2:16px;--e3:24px;--e4:32px;--e6:48px;--e8:64px;--e12:96px;--e16:128px;
--seccion:clamp(64px,8.5vw,128px);--margen:20px;--ancho:1120px;
--r-foto:24px;--r-card:20px;--r-btn:999px;
--ease-sale:cubic-bezier(.22,1,.36,1);--ease-hover:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--texto);font:400 var(--t-cuerpo)/1.55 Inter,system-ui,sans-serif;padding-bottom:88px;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
h1,h2,.bebas{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.92}
h2{font-size:var(--t-h2);color:var(--acento-texto)}
h3{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:var(--t-h3);line-height:1;letter-spacing:.02em}
.eti{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-eti);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto)}
.eti:before{content:"";width:18px;height:2px;background:var(--turquesa)}
.intro{color:var(--texto-suave);max-width:560px;margin-top:var(--e2)}
section{padding:var(--seccion) 0}
.alt{background:var(--fondo-2)}.alt h2{color:var(--texto)}
.cab{display:flex;flex-direction:column;gap:var(--e1);margin-bottom:var(--e4)}
.pend{display:inline-block;background:repeating-linear-gradient(45deg,#d9eeec 0 8px,#eef8f7 8px 16px);color:var(--texto-suave);font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px}

/* ----- Botones ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-btn);font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:transform .12s ease-out,box-shadow .25s var(--ease-hover),background-color .25s}
.btn .fl{transition:transform .2s ease-out}
.btn:hover .fl{transform:translateX(4px)}.btn:active{transform:scale(.97)}
.btn-1{background:var(--amarillo);color:var(--texto);box-shadow:0 6px 0 #E6C232}
.btn-1:hover{box-shadow:0 8px 0 #E6C232,0 14px 28px rgba(11,36,39,.14)}
.btn-2{border-color:var(--acento-texto);color:var(--acento-texto);background:var(--fondo)}
.alt .btn-2,.sobre-oso .btn-2{border-color:var(--texto);color:var(--texto);background:transparent}
.btn-wa{background:var(--whatsapp);color:var(--texto)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--texto);outline-offset:3px}

/* ----- Encabezado ----- */
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linea);backdrop-filter:saturate(1.4) blur(8px)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo img{height:34px;width:auto;border-radius:8px}
nav.principal{display:none;gap:28px;font-size:15px;font-weight:600}
nav.principal a{text-decoration:none;position:relative;padding:6px 0}
nav.principal a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--turquesa);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-hover)}
nav.principal a:hover:after,nav.principal a[aria-current]:after{transform:scaleX(1)}
nav.principal a[aria-current]{color:var(--acento-texto)}
.burger{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0}
.burger i{width:24px;height:14px;border-top:2.5px solid var(--texto);border-bottom:2.5px solid var(--texto)}
.h-cta{display:none}

/* ----- Portada: el oso protagonista ----- */
.hero-p{padding:var(--e2) 0 var(--e8);position:relative;overflow:hidden}
.hero-p .wrap{display:grid;gap:var(--e4)}
/* escena: panel --fondo-oso con anillos de "escarcha"; la cabeza del oso sale por arriba del panel */
.escena{position:relative;height:380px;margin-top:40px;border-radius:32px;isolation:isolate;--anillo:rgba(255,255,255,.5);background:radial-gradient(circle at 50% 62%,transparent 0 150px,var(--anillo) 151px 152.5px,transparent 154px 230px,rgba(255,255,255,.3) 231px 232.5px,transparent 234px),var(--fondo-oso)}
.oso-p{position:absolute;left:50%;bottom:0;width:330px;aspect-ratio:720/900;transform:translateX(-50%)}
.oso-p img{position:absolute;inset:0;width:100%;height:100%}
.oso-p .cabeza{transform-origin:48.9% 48.3%;will-change:transform}
.oso-p .cuerpo{will-change:transform}
.escena .sticker{position:absolute;border-radius:18px;overflow:hidden;border:4px solid #fff;box-shadow:var(--sombra-2);z-index:2}
.sticker img{width:100%;height:100%;object-fit:cover}
.st-1{width:88px;height:114px;left:-6px;top:36px;transform:rotate(-7deg)}
.st-2{width:80px;height:104px;right:-6px;top:118px;transform:rotate(6deg)}
.pista{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#fff;color:var(--texto);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;box-shadow:var(--sombra);white-space:nowrap;z-index:3}
.hero-p h1{font-size:var(--t-display);margin:var(--e2) 0 0}
.hero-p h1 .ln{display:block;overflow:hidden;padding:.12em 0 .04em;margin-top:-.12em}
.hero-p h1 .ln>span{display:inline-block}
.hero-p h1 mark{background:linear-gradient(transparent 62%,var(--amarillo) 62%,var(--amarillo) 94%,transparent 94%);color:inherit;padding:0 .04em}
.hero-p .linea{font-size:clamp(18px,1.5vw,21px);color:var(--texto-suave);margin-top:var(--e2);max-width:470px}
.hero-p .botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--e3)}
.hero-p .botones .btn{flex:1 1 100%}
.horas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--linea);font-size:var(--t-chico);color:var(--texto-suave)}
.horas b{display:block;color:var(--texto);font-size:15px}

/* ----- Cinta (marquesina) ----- */
.cinta{background:var(--amarillo);overflow:hidden;border-block:2px solid var(--texto);transform:rotate(-1.2deg);margin:0 -10px}
.cinta .pista-c{display:flex;width:max-content;animation:cinta 28s linear infinite}
.cinta:hover .pista-c{animation-play-state:paused}
.cinta p{font:400 30px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.04em;padding:14px 0;white-space:nowrap;display:flex}
.cinta p span:after{content:"✳";color:var(--acento-texto);margin:0 22px;font-family:Inter;font-size:20px;vertical-align:4px}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ----- Tarjetas ----- */
.card{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-card);box-shadow:var(--sombra);overflow:hidden;transition:transform .25s var(--ease-hover),box-shadow .25s var(--ease-hover)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra-2)}
.foto{overflow:hidden;border-radius:var(--r-foto);position:relative;background:var(--fondo-2)}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-hover)}
.card:hover .foto img,.foto:hover img{transform:scale(1.04)}
.foto:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}

/* Sucursales */
.sucs{display:grid;gap:var(--e3)}
.suc .foto{border-radius:0;height:300px}
.suc .chip{position:absolute;left:16px;top:16px;background:#fff;color:var(--texto);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;z-index:2}
.suc .in{padding:var(--e3)}
.suc h3{font-size:40px}
.suc p{color:var(--texto-suave);font-size:15px;margin-top:6px}
.suc .hora{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linea);margin-top:var(--e2);padding-top:var(--e2);font-size:15px}
.suc .hora b{font-weight:700}
.mas{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--acento-texto);text-decoration:none;margin-top:var(--e2)}
.mas .fl{transition:transform .2s ease-out}.mas:hover .fl{transform:translateX(4px)}

/* Cifras */
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.cifra{background:#fff;border-radius:var(--r-card);padding:var(--e3) var(--e2);border:2px solid var(--turquesa)}
.cifra .n{font:400 clamp(56px,6vw,84px)/.9 'Bebas Neue',Impact,sans-serif;color:var(--texto)}
.cifra .n-tx{font-size:clamp(40px,4.2vw,64px)}
.cifra p{font-size:var(--t-chico);color:var(--texto-suave);margin-top:6px}

/* Promo */
.promo{position:relative;background:var(--amarillo);border-radius:32px;padding:var(--e4) var(--e3);overflow:hidden;display:grid;gap:var(--e3);box-shadow:var(--sombra)}
.promo .izq{display:grid;gap:var(--e2);justify-items:start}
.promo .tag{display:inline-block;background:var(--texto);color:var(--amarillo);font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:999px;justify-self:start}
.promo h3{font-size:30px;padding-right:96px}
.promo .gran{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 12px;font-family:'Bebas Neue',Impact,sans-serif;line-height:.8}
.promo .gran .dos{font-size:clamp(120px,14vw,200px)}
.promo .gran .que{font-size:clamp(34px,3.6vw,52px);line-height:.95;padding-bottom:.25em}
.promo .gran .precio{font-size:clamp(96px,10vw,150px);flex-basis:100%}
.promo p{font-weight:600;max-width:520px}
.promo .oso-rojo{width:96px;height:96px;border-radius:20px;border:3px solid #fff;object-fit:cover;box-shadow:var(--sombra);position:absolute;right:18px;top:18px;transform:rotate(5deg)}
.promo .mas{color:var(--texto);text-decoration:underline;text-underline-offset:4px}

/* Pasos */
.pasos{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:var(--e2);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--e2);margin:0 calc(var(--margen)*-1);padding-inline:var(--margen);scrollbar-width:none;list-style:none;counter-reset:p}
.pasos li{scroll-snap-align:start}
.pasos .foto{height:380px}
.pasos .num{position:absolute;left:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--amarillo);color:var(--texto);font:400 28px/44px 'Bebas Neue',Impact,sans-serif;text-align:center}
.pasos h3{margin-top:var(--e2);font-size:28px}
.pasos p{font-size:var(--t-chico);color:var(--texto-suave)}

/* Galería */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.galeria .foto{height:220px}
.galeria .g1,.galeria .g4{grid-column:span 2;height:300px}.galeria .g4{height:240px}

/* Oso conoce */
.conoce{background:var(--fondo-oso);border-radius:32px;display:grid;grid-template-columns:1.1fr 1fr;align-items:end;overflow:hidden}
.conoce .tx{padding:var(--e4) 0 var(--e4) var(--e3);align-self:center}
.conoce h2{color:var(--texto);font-size:clamp(36px,4.4vw,64px)}
.conoce p{font-size:15px;font-weight:600;margin-top:var(--e1);color:var(--texto)}
.conoce img{height:300px;width:100%;object-fit:cover;object-position:center top}

/* Eventos privados */
.priv{display:grid;gap:var(--e4);align-items:center}
.priv .foto{height:360px}
.priv ul{list-style:none;margin:var(--e3) 0;display:grid;gap:10px}
.priv li{display:flex;gap:12px;font-weight:600}
.priv li:before{content:"";flex:0 0 10px;height:10px;margin-top:8px;border-radius:50%;background:var(--turquesa)}

/* Instagram */
.ig{text-align:center}.ig h2{font-size:clamp(48px,8vw,120px);color:var(--acento-texto)}
.ig .intro{margin-inline:auto}.ig .btn{margin-top:var(--e3)}

footer{background:var(--fondo-2);padding:var(--e8) 0 var(--e6);font-size:var(--t-chico);color:var(--texto-suave)}
footer .cols{display:grid;gap:var(--e3)}
footer b{color:var(--texto);display:block;margin-bottom:4px}
footer .legal{font-size:var(--t-legal);margin-top:var(--e4);padding-top:var(--e2);border-top:1px solid var(--linea)}
.wa{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;min-height:56px;border-radius:16px;box-shadow:0 10px 24px rgba(11,36,39,.22);transition:transform .3s var(--ease-sale),opacity .3s}
.wa.oculto{transform:translateY(120%);opacity:0}

/* ===== Escritorio ===== */
@media (min-width:900px){
  :root{--margen:40px}
  body{padding-bottom:0}
  nav.principal{display:flex}.burger{display:none}.h-cta{display:inline-flex;min-height:44px;padding:0 18px;font-size:15px}
  header.top .wrap{height:76px}.logo img{height:40px}
  .hero-p{padding:var(--e6) 0 var(--e12)}
  .hero-p .wrap{grid-template-columns:1.05fr 1fr;align-items:center;gap:var(--e6)}
  .hero-p .tx{order:1}.escena{order:2;height:500px;margin-top:70px;border-radius:40px;background:radial-gradient(circle at 50% 62%,transparent 0 210px,var(--anillo) 211px 212.5px,transparent 214px 320px,rgba(255,255,255,.3) 321px 322.5px,transparent 324px),var(--fondo-oso)}
  .oso-p{width:440px}
  .st-1{width:150px;height:196px;left:-56px;top:60px}.st-2{width:128px;height:166px;right:-40px;top:250px}
  .hero-p .botones .btn{flex:0 0 auto}
  .pista{display:none}
  .cinta p{font-size:40px}
  .sucs{grid-template-columns:1fr 1fr}.suc .foto{height:420px}
  .cifras{grid-template-columns:repeat(4,1fr)}
  .promo{grid-template-columns:1.3fr 1fr;align-items:center;padding:var(--e8);border-radius:40px}
  .promo h3{padding-right:0;font-size:36px}
  .promo .oso-rojo{position:static;width:100%;max-width:340px;height:auto;aspect-ratio:1;justify-self:center;border-width:6px;border-radius:32px;transform:rotate(4deg)}
  .pasos{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}
  .pasos li:nth-child(2){margin-top:64px}.pasos li:nth-child(3){margin-top:128px}
  .pasos .foto{height:460px}
  .galeria{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:260px 260px}
  .galeria .foto{height:100%;min-height:0}.galeria .g1{grid-column:auto;grid-row:span 2;height:auto}.galeria .g4{grid-column:span 2}
  .conoce{grid-template-columns:1fr 1fr;border-radius:40px}.conoce .tx{padding:var(--e8)}.conoce img{height:520px}
  .priv{grid-template-columns:1fr 1fr;gap:var(--e8)}.priv .foto{height:520px}
  footer .cols{grid-template-columns:1.2fr 1.2fr 1fr}
  .wa{display:none}
}

/* ===== Animaciones (solo con JS y sin reducción de movimiento) ===== */
.anim .rev{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-sale),transform .6s var(--ease-sale);transition-delay:calc(var(--i,0)*80ms)}
.anim .rev.visto{opacity:1;transform:none}
.anim .hero-p h1 .ln>span{transform:translateY(105%);transition:transform .7s var(--ease-sale)}
.anim .hero-p.listo h1 .ln>span{transform:none}
.anim .hero-p h1 .ln:nth-child(2)>span{transition-delay:90ms}.anim .hero-p h1 .ln:nth-child(3)>span{transition-delay:180ms}
.anim .escena{clip-path:inset(8% 8% 8% 8% round 40px);transition:clip-path .9s var(--ease-sale)}
.anim .hero-p.listo .escena{clip-path:inset(-30% -30% 0 -30% round 40px)}
.anim .galeria .foto{clip-path:inset(0 0 100% 0 round 24px);transition:clip-path .8s var(--ease-sale);transition-delay:calc(var(--i,0)*100ms)}
.anim .galeria.visto .foto{clip-path:inset(0 0 0 0 round 24px)}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev,.galeria .foto,.escena,.hero-p h1 .ln>span{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ---- Adaptación al sitio (encabezado, menú, pie, pendientes) ---- */
.saltar{position:absolute;left:-999px}.saltar:focus{left:8px;top:8px;background:var(--amarillo);color:var(--texto);padding:8px;z-index:40}
header.top .wrap{position:relative;gap:16px}
nav.principal{display:none}
nav.principal.abierto{display:flex;flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;background:#fff;padding:8px var(--margen) 16px;border-bottom:1px solid var(--linea);box-shadow:var(--sombra)}
nav.principal.abierto a{padding:14px 0;border-bottom:1px solid var(--linea)}
.p{display:inline-block;background:repeating-linear-gradient(45deg,#d9eeec 0 8px,#eef8f7 8px 16px);color:var(--texto-suave);font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px}
footer p{margin-bottom:6px}footer a{color:var(--acento-texto)}
.hero-p .tx{min-width:0}
.conoce .temporada{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto)}
.conoce .temporada:before{content:"";width:18px;height:2px;background:var(--texto)}
.pista.fuera{opacity:0;transition:opacity .3s}
.pista{display:none}@media (hover:none) and (pointer:coarse){.pista{display:block}}
@media (min-width:900px){nav.principal,nav.principal.abierto{display:flex;position:static;flex-direction:row;gap:28px;padding:0;border:0;box-shadow:none;background:none}nav.principal.abierto a{padding:6px 0;border:0}}
@media (prefers-reduced-motion:reduce){.pista{display:none}}
.wa{display:flex;align-items:center;justify-content:center;background:var(--whatsapp);color:var(--texto);font-weight:700;text-decoration:none}@media (min-width:900px){.wa{display:none}}
header.top .logo{order:1}nav.principal{order:2}.h-cta{order:3}.burger{order:4}
nav.principal a{white-space:nowrap}
.pista{top:auto;bottom:-46px}
.hero-p .escena{margin-bottom:44px}
@media (min-width:900px){.hero-p .escena{margin-bottom:0}nav.principal{margin-left:auto;gap:22px}}
.oso-p .cuerpo{clip-path:inset(0 round 0 0 30px 30px)}
.hero-p .pista{position:relative;left:auto;bottom:auto;top:auto;transform:none;justify-self:center;margin-top:calc(var(--e3)*-1)}.hero-p .escena{margin-bottom:0}
.oso-p{transform-origin:50% 100%;will-change:transform}

/* ===== Patrón de marca (diseno/patron, Web Diseño 9 oct) ===== */
/* Punto Frío · patrón de marca y formas de hielo · Web STUDIO, 9 oct 2026
   Las rutas url() son relativas a este archivo. Opacidad del patrón: 7% (blanco) y 8% en #05776E (--fondo-2), ya va dentro de cada SVG. */
:root{
  --patron:url(/img/patron/patron-marca.svg);
  --patron-2:url(/img/patron/patron-marca-fondo2.svg);
  --patron-tam:280px;
}

/* Patrón repetido. Sobre --fondo-2 (.alt) cambia solo al tono que sí se nota */
.con-patron{background-color:var(--fondo,#fff);background-image:var(--patron);background-repeat:repeat;background-size:var(--patron-tam) var(--patron-tam);background-position:0 0}
.con-patron .alt,.alt.con-patron,.con-patron footer{background-color:var(--fondo-2,#E9F7F6);background-image:var(--patron-2);background-repeat:repeat;background-size:var(--patron-tam) var(--patron-tam)}

/* Desplazamiento lento opcional: agregar .patron-lento junto a .con-patron */
@keyframes patron-desliza{to{background-position:var(--patron-tam) var(--patron-tam)}}
.con-patron.patron-lento{animation:patron-desliza 90s linear infinite}

/* Formas de hielo: el contenedor necesita .con-formas (crea capa propia para que z-index:-1 quede detrás del contenido y no detrás del body) */
.con-formas{position:relative;isolation:isolate;overflow:hidden}
.forma-hielo-1,.forma-hielo-2,.forma-hielo-3{position:absolute;z-index:-1;pointer-events:none;background:url(/img/patron/formas-hielo.svg) no-repeat 0 0/300% 100%;aspect-ratio:1}
/* formas-hielo.svg es una tira de 3 formas (520px c/u): se elige con background-position (más compatible que #vistas) */
.forma-hielo-1{background-position:0 0;width:clamp(320px,46vw,640px);top:-8%;right:-14%;transform:rotate(-8deg)}
.forma-hielo-2{background-position:50% 0;width:clamp(260px,34vw,480px);bottom:-10%;left:-12%;transform:rotate(12deg)}
.forma-hielo-3{background-position:100% 0;width:clamp(200px,24vw,340px);top:12%;left:-8%}

@media (prefers-reduced-motion:reduce){
  .con-patron,.con-patron.patron-lento{animation:none!important;background-position:0 0}
}

/* ===== Ideas tomadas de Sala de Despecho (9 oct): video de portada, bandas, galería deslizable, botones y encabezado ===== */
/* 1. Portada con video del bar; se funde con la página */
.hero-p{position:relative;isolation:isolate}
.hero-video{position:absolute;left:0;right:0;top:0;height:520px;z-index:-1;overflow:hidden;background:#0B2427}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-video:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,39,.35) 0%,rgba(11,36,39,0) 35%,rgba(255,255,255,.0) 55%,#fff 100%)}
.con-patron .hero-video:after{background:linear-gradient(180deg,rgba(11,36,39,.35) 0%,rgba(11,36,39,0) 35%,rgba(255,255,255,0) 55%,#fff 100%)}
.hero-p .escena{background:none;margin-top:96px}
.hero-p .escena:before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:70%;border-radius:50% 50% 32px 32px;background:radial-gradient(ellipse at 50% 70%,rgba(106,200,208,.95),rgba(106,200,208,.0) 70%);z-index:-1}
@media (min-width:900px){
  .hero-video{height:100%;}
  .hero-video:after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.35) 58%,rgba(255,255,255,0) 75%),linear-gradient(180deg,rgba(255,255,255,0) 70%,#fff 100%)}
  .con-patron .hero-video:after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.35) 58%,rgba(255,255,255,0) 75%),linear-gradient(180deg,rgba(255,255,255,0) 70%,#fff 100%)}
  .hero-p .escena{margin-top:70px}
}
/* 3. Bandas de color completas */
.banda-turquesa{background:var(--turquesa)!important;background-image:none!important}
.banda-turquesa h2,.banda-turquesa .eti,.banda-turquesa .intro{color:var(--texto)}.banda-turquesa .eti:before{background:var(--texto)}
.banda-turquesa .cifra{border-color:#fff}
.cinta{position:relative;z-index:2}
/* 5. Galería deslizable con visor */
.carrusel{position:relative}
.g-pista{display:grid;grid-auto-flow:column;grid-auto-columns:68%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0 calc(var(--margen)*-1);padding:4px var(--margen) 16px;scrollbar-width:none;scroll-behavior:smooth}
.g-pista::-webkit-scrollbar{display:none}
.g-pista li{scroll-snap-align:start}
.g-item{display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover}
.g-ctrl{display:none;gap:10px;justify-content:flex-end;margin-top:8px}
.g-ctrl button{width:48px;height:48px;border-radius:50%;border:2px solid var(--texto);background:#fff;font-size:20px;cursor:pointer;transition:transform .2s var(--ease-hover),background .2s}
.g-ctrl button:hover{transform:translateY(-3px);background:var(--amarillo)}
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh}
.visor::backdrop{background:rgba(11,36,39,.85)}
.visor img{display:block;max-width:100%;max-height:88vh;border-radius:20px;margin:auto}
.visor-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:26px;cursor:pointer}
@media (min-width:900px){.g-pista{grid-auto-columns:calc((100% - 36px)/4);margin:0;padding:4px 0 16px}.g-ctrl{display:flex}}
/* 6. Botones píldora que se elevan y encabezado que se encoge */
.btn:hover{transform:translateY(-3px)}.btn:active{transform:translateY(0) scale(.97)}
header.top .wrap{transition:height .25s var(--ease-hover)}header.top .logo img{transition:height .25s var(--ease-hover)}
header.top.chico .wrap{height:54px}header.top.chico .logo img{height:28px}header.top.chico{box-shadow:0 6px 18px rgba(11,36,39,.08)}
@media (min-width:900px){header.top.chico .wrap{height:60px}header.top.chico .logo img{height:32px}}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* Ajustes 9 oct 11:15: oso se desvanece hacia abajo (sin tarjeta), oso 25% más chico en celular, horarios en una línea */
.oso-p .cuerpo{clip-path:none}
.oso-p{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hero-p .escena:before{display:none}
@media (max-width:899px){.hero-p .escena{height:290px;margin-top:24px}.oso-p{width:248px}.hero-video{height:400px}.hero-p .pista{margin-top:4px}.hero-p .tx{margin-top:8px}}
.hero-p .horas div{white-space:nowrap}
@media (max-width:899px){.hero-p .escena{height:236px;margin-top:12px}.oso-p{width:200px}.hero-video{height:320px}.hero-p .escena .sticker{transform:scale(.8)}
.hero-p .pista{position:absolute;left:50%;top:268px;transform:translateX(-50%);margin:0;font-size:13px;padding:6px 12px;z-index:3}
.hero-p .tx{margin-top:0;padding-top:4px}.hero-p h1{font-size:clamp(46px,13vw,58px);line-height:.92;margin:6px 0 10px}.hero-p .tx>p{margin:0 0 14px}.hero-p .eti{font-size:11px}}

/* ===== Títulos neón y pósters (Web Diseño, 9 oct) ===== */
/* Punto Frío · títulos tipo letrero neón · Web STUDIO, 9 oct 2026
   Solo CSS. Inspirado en el letrero real de la barra (img/foto-barra-letrero.jpg): caja turquesa, letras amarillas y una fila de rayitas debajo.
   Contraste: el TEXTO REAL siempre es #0B2427 (16.21:1 sobre blanco, 12.23:1 sobre amarillo, 8.32:1 sobre --fondo-oso).
   El neón (halo + tubo de contorno desplazado) es decoración detrás de las letras: aunque el halo llegara al tono más fuerte
   (#08BEAF o #FFDE59), el texto seguiría en 6.94:1 o 12.23:1, así que pasa AA en cualquier punto.
   Uso: <h2 class="titulo-neon neon-turquesa" data-neon="Mismo texto">Mismo texto</h2> + <p class="neon-linea">Línea clara</p>
   data-neon debe repetir el texto exacto (lo dibuja el tubo). Para saltos de línea forzados usa &#10; en data-neon. */

.titulo-neon{
  --tubo:#08BEAF;                       /* color del tubo de contorno */
  --halo:rgba(8,190,175,.45);           /* resplandor principal */
  --halo-2:rgba(255,222,89,.55);        /* resplandor secundario (el otro color de marca) */
  --tubo-borde:rgba(5,119,110,.55);     /* filo del tubo para que se vea sobre blanco */
  --neon-sombra:0 0 .02em rgba(11,36,39,.35),0 0 .16em var(--halo),0 0 .42em var(--halo-2),0 0 .9em var(--halo);
  position:relative;isolation:isolate;
  color:#0B2427;
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:.02em;
  text-shadow:var(--neon-sombra);
  animation:neon-halo 1.5s linear 1 both;
}
/* Tubo: copia del texto solo en contorno, desplazada abajo-derecha, con su propio brillo */
.titulo-neon::before{
  content:attr(data-neon);
  content:attr(data-neon) / "";        /* texto alternativo vacío: el lector de pantalla no lo repite */
  position:absolute;inset:0;padding:inherit;box-sizing:border-box;z-index:-1;
  white-space:pre-line;pointer-events:none;
  color:transparent;text-shadow:none;
  -webkit-text-stroke:.03em var(--tubo);
  transform:translate(.065em,.06em);
  filter:drop-shadow(0 0 .5px var(--tubo-borde)) drop-shadow(0 0 .07em var(--tubo)) drop-shadow(0 0 .22em var(--halo));
  animation:neon-tubo 1.5s linear 1 both;
}
@supports not (-webkit-text-stroke:1px black){.titulo-neon::before{display:none}}

/* Variantes */
.neon-turquesa{--tubo:#08BEAF;--halo:rgba(8,190,175,.45);--halo-2:rgba(255,222,89,.45);--tubo-borde:rgba(5,119,110,.6)}
.neon-amarillo{--tubo:#FFDE59;--halo:rgba(255,222,89,.75);--halo-2:rgba(8,190,175,.3);--tubo-borde:rgba(184,146,15,.95)}

/* Opción "placa": letrero oscuro pequeño solo detrás del título (para fondos donde el halo no se nota: amarillo, --fondo-oso).
   Aquí el texto toma el color del tubo: amarillo sobre #0B2427 = 12.23:1, turquesa sobre #0B2427 = 6.94:1 (AA). */
.neon-placa{
  display:inline-block;padding:.2em .42em .1em;border-radius:.22em;
  background:linear-gradient(180deg,#123236,#0B2427);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),inset 0 0 0 .09em #0B2427,inset 0 0 0 calc(.09em + 1.5px) var(--halo),0 10px 26px rgba(11,36,39,.28);
  color:var(--tubo);
  --neon-sombra:0 0 .04em #fff,0 0 .14em var(--tubo),0 0 .4em var(--halo),0 0 .8em var(--halo);
}
.neon-placa::before{transform:translate(.05em,.05em);opacity:.55;-webkit-text-stroke:.02em #fff;filter:drop-shadow(0 0 .1em var(--tubo))}
.neon-placa.neon-amarillo{--halo:rgba(255,222,89,.6)}
.neon-placa.neon-turquesa{--halo:rgba(8,190,175,.65)}

/* Línea aclaratoria debajo, con las rayitas del letrero real */
.neon-linea{font-family:Inter,system-ui,sans-serif;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#2A4447;max-width:560px;margin-top:.9em}
.neon-linea::before{content:"";display:block;width:132px;height:12px;margin-bottom:.8em;
  background:repeating-linear-gradient(90deg,#08BEAF 0 3px,transparent 3px 9px);border-radius:2px;opacity:.9}

/* Encendido: un parpadeo leve, una sola vez */
@keyframes neon-halo{
  0%{text-shadow:0 0 0 transparent}
  10%{text-shadow:var(--neon-sombra)}
  13%{text-shadow:0 0 0 transparent}
  20%{text-shadow:var(--neon-sombra)}
  24%{text-shadow:0 0 0 transparent}
  32%,100%{text-shadow:var(--neon-sombra)}
}
@keyframes neon-tubo{
  0%{opacity:0}10%{opacity:.9}13%{opacity:.15}20%{opacity:1}24%{opacity:.25}32%,100%{opacity:1}
}
.neon-placa::before{animation-name:neon-tubo-placa}
@keyframes neon-tubo-placa{0%{opacity:0}10%{opacity:.5}13%{opacity:.1}20%{opacity:.55}24%{opacity:.15}32%,100%{opacity:.55}}

/* Si la página usa la entrada por scroll (.anim + .rev/.visto, igual que sitio/estaticos/premium.js),
   el parpadeo espera a que la sección entre en pantalla */
.anim .rev:not(.visto) .titulo-neon,.anim .rev:not(.visto) .titulo-neon::before,
.anim .rev.titulo-neon:not(.visto),.anim .rev.titulo-neon:not(.visto)::before,
.anim .hero:not(.listo) .titulo-neon,.anim .hero:not(.listo) .titulo-neon::before{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .titulo-neon,.titulo-neon::before{animation:none!important}
}

/* Punto Frío · sucursales como póster vertical · Web STUDIO, 9 oct 2026
   Referencia: los pósters por ciudad de saladedespecho.mx. Colores = guía v3.
   Contraste: el texto blanco va sobre la parte baja del degradado (#0B2427 al 92–96 %): con la foto más clara detrás da más de 10:1.
   El botón es amarillo #FFDE59 con texto #0B2427 (12.23:1). */

.posters{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin:0 calc(var(--margen,20px)*-1);padding:4px var(--margen,20px) 20px;scroll-padding-inline:var(--margen,20px);
  scrollbar-width:none;list-style:none}
.posters::-webkit-scrollbar{display:none}
.posters>*{scroll-snap-align:start}

.poster-sucursal{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/4;border-radius:24px;
  background:#0B2427;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 18px 40px rgba(11,36,39,.22);container-type:inline-size;
  outline:1px solid rgba(8,190,175,.35);outline-offset:-1px}
.poster-sucursal>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.poster-sucursal:hover>img,.poster-sucursal:focus-within>img{transform:scale(1.06)}
/* degradado abajo + viñeta suave arriba para la etiqueta */
.poster-sucursal::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,36,39,.96) 0%,rgba(11,36,39,.92) 30%,rgba(11,36,39,.55) 52%,rgba(11,36,39,0) 72%),
             linear-gradient(180deg,rgba(11,36,39,.35) 0%,rgba(11,36,39,0) 22%)}
/* filo interior blanco tipo marco de póster */
.poster-sucursal::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.28);border-radius:16px;pointer-events:none;z-index:1}

.poster-sucursal .p-eti{position:absolute;left:22px;top:22px;z-index:2;background:#FFDE59;color:#0B2427;
  font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.poster-sucursal .p-in{position:relative;z-index:2;padding:0 22px 24px}
.poster-sucursal .p-marca{font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#7FE3D9}
.poster-sucursal h3{font:400 clamp(48px,17cqi,124px)/.86 'Bebas Neue',Impact,sans-serif;letter-spacing:.01em;margin:.12em 0 .14em;color:#fff;
  text-shadow:0 0 .12em rgba(8,190,175,.55),0 2px 0 rgba(0,0,0,.25)}
.poster-sucursal .p-dir{font-size:14px;line-height:1.45;color:#fff;max-width:30ch}
.poster-sucursal .p-hora{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.25);font-size:14px;color:#fff}
.poster-sucursal .p-hora span{white-space:nowrap;font-weight:700}
.poster-sucursal .p-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;min-height:48px;padding:0 22px;white-space:nowrap;
  border-radius:999px;background:#FFDE59;color:#0B2427;font:700 15px/1 Inter,system-ui,sans-serif;text-decoration:none;
  box-shadow:0 6px 0 #E6C232;transition:transform .12s ease-out,box-shadow .25s}
.poster-sucursal .p-btn:hover{box-shadow:0 8px 0 #E6C232,0 14px 28px rgba(0,0,0,.3)}
.poster-sucursal .p-btn:active{transform:scale(.97)}
.poster-sucursal .p-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Celular: margen abajo para que el botón verde fijo de WhatsApp (56px + 12px) no tape el póster */
@media (max-width:899px){
  .posters{padding-bottom:calc(20px + var(--alto-wa-fijo,80px));scroll-margin-bottom:var(--alto-wa-fijo,80px)}
  .poster-sucursal{scroll-margin-bottom:var(--alto-wa-fijo,80px)}
}
@media (min-width:900px){
  .posters{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:28px;overflow:visible;margin:0;padding:0}
  .poster-sucursal .p-in{padding:0 40px 40px}
  .poster-sucursal .p-eti{left:32px;top:32px}
  .poster-sucursal .p-btn{min-height:52px;padding:0 26px;font-size:16px;margin-top:20px}
  .poster-sucursal .p-dir,.poster-sucursal .p-hora{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .poster-sucursal>img,.poster-sucursal .p-btn{transition:none}
  .poster-sucursal:hover>img,.poster-sucursal:focus-within>img{transform:none}
}

/* ===== v4: ajustes de integración (neón + pósters) ===== */
h2.titulo-neon{font-size:var(--t-h2);line-height:.95}
.cab .neon-linea{margin-top:.5em}
.hero-p h1.titulo-neon{line-height:.92;text-shadow:none;animation:none}
.hero-p h1 .titulo-neon{display:inline-block}
.hero-p h1 .ln{overflow:visible}
.anim .hero-p h1 .ln{overflow:hidden}
.anim .hero-p.listo h1 .ln{animation:v4-destapa 0s 1s forwards}
@keyframes v4-destapa{to{overflow:visible}}
.hero-p .neon-linea{font-size:clamp(18px,1.5vw,21px);max-width:470px}
.promo .titulo-neon{font-size:clamp(30px,3.4vw,44px);justify-self:start}
.promo .neon-linea{margin-top:0;color:var(--texto);font-weight:600}
.promo .neon-linea::before{background:repeating-linear-gradient(90deg,var(--texto) 0 3px,transparent 3px 9px)}
.conoce .titulo-neon{font-size:clamp(34px,4vw,56px)}
.conoce .neon-linea{color:var(--texto);font-weight:600}
.conoce .neon-linea::before{background:repeating-linear-gradient(90deg,var(--texto) 0 3px,transparent 3px 9px)}
.ig .titulo-neon{font-size:clamp(48px,7vw,104px)}
.ig .neon-linea{margin-inline:auto}.ig .neon-linea::before{margin-inline:auto}
.sucursales-v4 .cab{margin-bottom:var(--e6)}
@media (max-width:899px){.promo .titulo-neon{max-width:calc(100% - 104px)}}
@media (prefers-reduced-motion:reduce){.hero-p h1 .ln{overflow:visible!important}}

.banda-turquesa .neon-linea{color:var(--texto)}
.hero-p h1 .ln{white-space:nowrap}

/* 9 oct 6:30 pm: oso de una sola pieza (la imagen ya trae el desvanecido abajo) */
.oso-p{transform-origin:50% 70%;-webkit-mask-image:none;mask-image:none}
.oso-p .cuerpo{display:block;width:100%;height:auto}

/* Snack estrella: pepinos locos (9 oct) */
.snack{display:grid;gap:20px;background:var(--amarillo,#FFDE59);border-radius:28px;padding:18px;box-shadow:var(--sombra-2,0 10px 30px rgba(0,0,0,.12));align-items:center}
.snack-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;display:block}
.snack-eti{display:inline-block;background:#0B2427;color:#FFDE59;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.snack h2{margin:10px 0 8px}.snack p{color:#0B2427}
.snack-precio{font-family:"Bebas Neue",sans-serif;font-size:56px;line-height:1;margin:8px 0 14px}
.snack-mini .snack-precio{font-size:40px;margin-bottom:0}
@media (min-width:900px){.snack{grid-template-columns:1.1fr 1fr;padding:28px;gap:40px}.snack-mini{grid-template-columns:320px 1fr}}
.cifras{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.p-hora span{white-space:normal!important}.hero-p .horas div{white-space:normal}
/* 11 oct: el título de portada no debe cortarse en escritorio */
@media (min-width:900px){.hero-p h1{font-size:clamp(56px,5.6vw,96px)}}
html{overflow-x:clip}