:root{
  --fondo:#0B2352; --azul:#2050A0; --azul-2:#163A7C; --crema:#F4EEE1; --papel:#FBF8F1; --tinta:#0B1B3C; --suave:#44506B;
  --accion:#C93418; --accion-2:#A82A12; --rotulo-claro:#2050A0;
  --curva:cubic-bezier(.22,.9,.3,1); --wrap:1180px; --barra:76px;
  --r1:12px; --r2:20px; --r3:30px;
}
@media (min-width:1400px){:root{--wrap:1100px}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:var(--barra)}
body{font:400 17px/1.6 Inter,system-ui,sans-serif;color:var(--crema);background:var(--fondo);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:'Bricolage Grotesque',Inter,sans-serif;line-height:1.02;letter-spacing:-.03em}
h1{font-size:clamp(3rem,8.4vw,6.6rem);font-weight:800}
h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;margin-bottom:14px}
h3{font-size:1.6rem;font-weight:700}
a{color:inherit}
.envoltura{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.envoltura--angosta{width:min(760px,100% - 40px)}
.centro{text-align:center}
.rotulo{font:700 .78rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#9CC0FF;margin-bottom:18px}
.rotulo--claro{color:var(--rotulo-claro)}
.bajada{max-width:620px;font-size:1.08rem;color:inherit;opacity:.86;margin-bottom:8px}
.centro .bajada{margin-inline:auto}

/* botones: una sola forma */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:2px solid transparent;font:700 .98rem/1 'Bricolage Grotesque',sans-serif;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .35s var(--curva),background .35s var(--curva),color .35s var(--curva),border-color .35s var(--curva)}
.boton:hover{transform:translateY(-2px)}
.boton:focus-visible,summary:focus-visible,.ficha__cab:focus-visible,.galeria:focus-visible{outline:3px solid #9CC0FF;outline-offset:3px}
.boton--accion{background:var(--accion);color:#fff}
.boton--accion:hover{background:var(--accion-2)}
.boton--borde{border-color:rgba(244,238,225,.75);color:var(--crema)}
.boton--borde:hover{background:var(--crema);color:var(--fondo)}
.boton--suave{background:rgba(32,80,160,.12);color:var(--azul);min-width:52px;padding:0 20px}
.brilla::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:brillo 2.6s linear infinite;pointer-events:none}
@keyframes brillo{to{left:130%}}

/* barra: sólida desde el primer cuadro */
.barra{position:fixed;inset:0 0 auto 0;height:var(--barra);z-index:50;display:flex;align-items:center;gap:28px;padding:0 max(20px,calc((100% - var(--wrap))/2));background:var(--fondo)}
.barra__logo img{height:44px;width:auto}
.barra__menu{display:flex;gap:26px;margin-left:auto}
.barra__menu a{font-weight:500;font-size:.95rem;text-decoration:none;opacity:.88}
.barra__menu a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.barra__cta{min-height:42px}

/* portada */
.portada{min-height:100svh;padding:var(--barra) max(20px,calc((100% - var(--wrap))/2)) 0;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;background:radial-gradient(60% 60% at 85% 20%,rgba(32,80,160,.55),transparent 70%),var(--fondo)}
.portada__texto{padding:48px 0}
.portada__bajada{font-size:1.22rem;max-width:520px;margin:24px 0 34px;opacity:.92}
.portada__botones{display:flex;flex-wrap:wrap;gap:14px}
.portada__foto{height:min(78svh,720px);border-radius:var(--r3);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.portada__foto img{width:100%;height:100%;object-fit:cover}

.seccion{padding:clamp(72px,10vw,128px) 0}
.claro{background:var(--papel);color:var(--tinta)}
.crema{background:var(--crema);color:var(--tinta)}
.oscuro{background:#08193D}
.azul{background:var(--azul-2)}

/* galería: carrusel con el dedo */
.galeria{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px max(20px,calc((100% - var(--wrap))/2)) 8px;scrollbar-width:none}
.galeria::-webkit-scrollbar{display:none}
.galeria figure{flex:0 0 auto;height:min(58vh,480px);aspect-ratio:4/5;border-radius:var(--r2);overflow:hidden;scroll-snap-align:center;background:var(--crema)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--curva)}
.galeria figure:hover img{transform:scale(1.05)}
.galeria__mando{display:flex;gap:10px;margin-top:22px}

/* fichas: lista en escritorio, acordeón en el celular */
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ficha{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r2);padding:28px}
.ficha__cab{all:unset;display:flex;justify-content:space-between;align-items:center;width:100%;cursor:default;font:700 1.35rem/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.ficha__mas{display:none}
.ficha__cuerpo{margin-top:12px;opacity:.88;font-size:.98rem}

/* cartas */
.cartas{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px;text-align:left}
.carta{display:flex;flex-direction:column;gap:8px;padding:34px;background:#fff;border-radius:var(--r3);text-decoration:none;box-shadow:0 14px 40px rgba(11,35,82,.1);transition:transform .4s var(--curva),box-shadow .4s var(--curva)}
.carta:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(11,35,82,.18)}
.carta__sede{font:800 1.9rem/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:var(--azul)}
.carta__dir{color:var(--suave);margin-bottom:22px}
.carta .boton{align-self:flex-start;margin-top:auto}

/* dos columnas */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.dos__fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dos__fotos img,.dos__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r2)}
.dos__fotos img:nth-child(2){margin-top:48px}
.dos__foto img{border-radius:var(--r3);box-shadow:0 30px 70px rgba(0,0,0,.3)}
.dos--sede .sede__dir{margin:0 0 14px;font-size:1.15rem;opacity:.92}
.dos--sede .horas{margin:24px 0 30px;max-width:420px}
.dos--sede .horas div{padding:12px 0}

/* carta online */
.pestanas{display:flex;gap:10px;margin:34px 0 8px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:none;min-height:44px;padding:0 22px;border-radius:999px;border:2px solid var(--azul);background:transparent;color:var(--azul);font:700 .95rem/1 'Bricolage Grotesque',sans-serif;cursor:pointer;transition:background .3s var(--curva),color .3s var(--curva)}
.pestanas button:hover{background:rgba(32,80,160,.1)}
.pestanas button[aria-selected=true]{background:var(--azul);color:#fff}
.pestanas button:focus-visible{outline:3px solid var(--accion);outline-offset:3px}
.carta-vivo{column-count:2;column-gap:clamp(32px,5vw,72px);margin-top:28px}
.bloque{break-inside:avoid;margin-bottom:38px}
.bloque h3{font-size:1.25rem;color:var(--azul);padding-bottom:10px;border-bottom:2px solid var(--azul);margin-bottom:6px}
.bloque ul{list-style:none;padding:0}
.bloque li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(11,27,60,.12)}
.plato{display:flex;flex-direction:column;gap:2px;min-width:0}
.plato__n{font:700 1.02rem/1.25 'Bricolage Grotesque',sans-serif;color:var(--tinta)}
.plato__d{font-size:.9rem;line-height:1.45;color:var(--suave)}
.plato__p{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tinta)}

/* sifón que viaja */
.sifon{position:fixed;left:0;top:0;width:256px;height:726px;z-index:45;pointer-events:none;will-change:transform,opacity;opacity:0}
.sifon svg{display:block;width:100%;height:100%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.34))}
.soda{position:fixed;inset:0;width:100%;height:100%;z-index:44;pointer-events:none}

/* vaso que se llena */
.vaso{position:relative;width:110px;height:165px;flex:none;--lv:calc(var(--base,0) + var(--nivel,0) * (1 - var(--base,0)))}
.vaso svg{display:block;overflow:visible}
.vaso__liq{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--lv,0));transition:transform .8s var(--curva)}
.vaso__espuma{transform:translateY(calc((1 - var(--lv,0)) * 138px));opacity:calc(var(--nivel,0) * 5);transition:transform .8s var(--curva)}
.vaso__boca{position:absolute;left:50%;top:4px;width:2px;height:2px}

/* mapa */
.mapa{position:relative;margin-top:36px;border-radius:var(--r3);overflow:hidden;box-shadow:0 30px 70px rgba(11,35,82,.18);background:#ebe7de}
.mapa__lienzo,.mapa iframe{display:block;width:100%;height:min(62vh,520px);border:0}
.mapa__tarjeta{position:absolute;z-index:800;left:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:320px;padding:22px 24px;border-radius:var(--r2);background:var(--fondo);color:var(--crema);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.mapa__tarjeta strong{font:800 1.5rem/1 'Bricolage Grotesque',sans-serif}
.mapa__tarjeta span{opacity:.88;margin-bottom:6px}
.boton--borde-oscuro{border-color:rgba(244,238,225,.6);color:var(--crema)}
.boton--borde-oscuro:hover{background:var(--crema);color:var(--fondo)}
@media (max-width:900px){.mapa__tarjeta{position:static;max-width:none;border-radius:0}.mapa__lienzo,.mapa iframe{height:360px}}

/* palabra mojada por el chorro */
.soda-palabra{position:relative;display:inline-block;z-index:0}
.soda-palabra::before{content:"";position:absolute;inset:6% -6% 2% -6%;z-index:-1;border-radius:14px;background:linear-gradient(100deg,#8FD6F7,#37B4EC);transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--curva)}
.soda-palabra.mojada::before{transform:scaleX(1)}

/* sedes */
.sedes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.sede{display:flex;flex-direction:column;background:var(--fondo);border-radius:var(--r3);padding:34px}
.sede__dir{opacity:.85;margin:6px 0 22px}
.horas{display:grid;gap:0;margin-bottom:28px}
.horas div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.horas dt{opacity:.88}.horas dd{font-weight:600}
.sede .boton{align-self:flex-start;margin-top:auto}

/* preguntas */
details{border-bottom:1px solid rgba(11,27,60,.16)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 1.15rem/1.2 'Bricolage Grotesque',sans-serif}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(32,80,160,.12);color:var(--azul);font-size:1.3rem;transition:transform .35s var(--curva),background .35s}
details[open] summary::after{transform:rotate(45deg);background:var(--azul);color:#fff}
details p{padding:0 0 24px;color:var(--suave);max-width:60ch}

/* pie */
.pie{background:#071A40;padding:64px 0 calc(64px + env(safe-area-inset-bottom))}
.pie__fila{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1fr;gap:32px;align-items:start}
.pie__logo img{height:60px;width:auto}
.pie__col{display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.pie__col strong{font-family:'Bricolage Grotesque',sans-serif}
.pie__col span{opacity:.8}
.pie__red{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.pie a:hover{text-decoration:underline;text-underline-offset:5px}

/* pildora móvil */
.pildora{display:none}

/* intro */
.telon{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 45%,#16408A,var(--fondo) 70%);transition:opacity .6s var(--curva),visibility .6s;overflow:hidden}
.telon__marca{position:relative;width:min(360px,64vw)}
.telon__marca img{width:100%;clip-path:inset(0 100% 0 0);animation:barrido 1s .25s var(--curva) forwards}
.telon__marca::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);mix-blend-mode:overlay;transform:translateX(-110%);animation:destello 1s 1.15s var(--curva) forwards}
@keyframes barrido{to{clip-path:inset(0 0 0 0)}}
@keyframes destello{to{transform:translateX(110%)}}
.telon__burbujas i{position:absolute;bottom:-20px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(244,238,225,.5);animation:sube 2.2s ease-in infinite}
.telon__burbujas i:nth-child(1){left:12%;animation-delay:.1s}.telon__burbujas i:nth-child(2){left:26%;width:16px;height:16px;animation-delay:.6s}
.telon__burbujas i:nth-child(3){left:41%;animation-delay:.3s}.telon__burbujas i:nth-child(4){left:57%;width:14px;height:14px;animation-delay:.9s}
.telon__burbujas i:nth-child(5){left:70%;animation-delay:.2s}.telon__burbujas i:nth-child(6){left:83%;width:18px;height:18px;animation-delay:.7s}
.telon__burbujas i:nth-child(7){left:92%;animation-delay:1.1s}
@keyframes sube{to{transform:translateY(-110vh)}}
.telon.fuera{opacity:0;visibility:hidden}

@media (max-width:900px){
  :root{--barra:68px}
  .barra__menu,.barra__cta{display:none}
  .barra__logo img{height:38px}
  .portada{grid-template-columns:1fr;gap:0;padding-top:var(--barra);min-height:0}
  .portada__foto{order:-1;height:auto;aspect-ratio:16/10;margin:0 -20px;border-radius:0}
  .portada__foto img{object-position:50% 40%}
  .portada__texto{padding:32px 0 56px}
  .fichas{grid-template-columns:1fr;gap:10px}
  .ficha{padding:0}
  .ficha__cab{cursor:pointer;padding:20px 22px;font-size:1.15rem}
  .ficha__mas{display:block;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);position:relative;flex:none;transition:transform .35s var(--curva)}
  .ficha__mas::before,.ficha__mas::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
  .ficha__mas::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--curva)}
  .ficha__cab[aria-expanded=true] .ficha__mas::after{transform:translate(-50%,-50%) rotate(0)}
  .ficha__cuerpo{display:none;margin:0;padding:0 22px 22px}
  .ficha__cab[aria-expanded=true]+.ficha__cuerpo{display:block}
  .dos{grid-template-columns:1fr}
  .carta-vivo{column-count:1}
  .dos__fotos img:nth-child(2){margin-top:24px}
  .pie__fila{grid-template-columns:1fr 1fr}.pie__logo{grid-column:1/-1}
  .galeria figure{height:min(52vh,420px)}
  .pildora{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--fondo);transform:translateY(110%);transition:transform .4s var(--curva)}
  .pildora.visible{transform:none}
  .pie{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .telon{display:none}
}

/* pin del mapa */
.pin-sifon{background:none;border:0}
.pin-sifon svg{position:relative;display:block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3))}
.pin__onda{position:absolute;left:50%;bottom:-8px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:3px solid #37B4EC;opacity:0;pointer-events:none}
.pin-sifon.chorreado .pin__onda{animation:onda 1.3s var(--curva) 3}
@keyframes onda{0%{transform:scale(.4);opacity:.95}100%{transform:scale(7);opacity:0}}
@media (max-width:900px){#sifon-seccion .dos__texto{order:-1}}

/* mapa propio */
.mapa__lienzo{position:relative;overflow:hidden;background:#ebe7de;isolation:isolate}
.mapa__lienzo.cargando::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,#ebe7de 30%,#f6f3ec 50%,#ebe7de 70%);background-size:220% 100%;animation:mpbrillo 1.3s linear infinite}
@keyframes mpbrillo{to{background-position:-120% 0}}
.mp__capas{position:absolute;inset:0;z-index:1}
.mp__capa{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0;will-change:transform}
.mp__capa img{position:absolute;width:256px;height:256px;max-width:none;opacity:0;transition:opacity .4s;user-select:none;pointer-events:none}
.mp__capa img.ok{opacity:1}
.mapa__lienzo .pin-sifon{position:absolute;left:50%;top:50%;width:44px;height:56px;margin:-56px 0 0 -22px;z-index:3;pointer-events:none}
.mp__attr{position:absolute;right:0;bottom:0;z-index:4;padding:3px 8px;font:500 11px/1.4 Inter,sans-serif;background:rgba(255,255,255,.8);color:#33415c;border-radius:8px 0 0 0;text-decoration:none}



/* «Lo que pasa en Sifón»: cada tarjeta se forma con la soda que le cae */
#hacemos .ficha.gt{position:relative;overflow:hidden;opacity:clamp(0,calc(var(--f,1) * 9),1)}
#hacemos .ficha.gt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--f,1) * 100%);background:linear-gradient(#6CCBF7,#2A8FD0);opacity:clamp(0,calc((.9 - var(--f,1)) / .25),1);pointer-events:none;border-radius:inherit}
#hacemos .ficha.gt>*{opacity:clamp(0,calc((var(--f,1) - .8) * 5),1)}
/* mapa: ondas de agua que se abren desde el pin cuando cae el chorro */
.mp__ola{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none}
.mp__ola i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:3px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(47,160,230,.55);opacity:0}
.mapa__lienzo.chorreado .mp__ola i{animation:mpola 1.5s ease-out infinite}
.mapa__lienzo.chorreado .mp__ola i:nth-child(2){animation-delay:.5s}
.mapa__lienzo.chorreado .mp__ola i:nth-child(3){animation-delay:1s}
@keyframes mpola{0%{transform:scale(.3);opacity:1}100%{transform:scale(13);opacity:0}}
.mapa__lienzo.chorreado .mp__capas{animation:mpmoja .9s ease-out 1}
@keyframes mpmoja{0%{filter:none}30%{filter:brightness(1.08) saturate(1.25) hue-rotate(-6deg)}100%{filter:none}}
.mapa__lienzo .pin-sifon.chorreado svg{animation:mprebote .5s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes mprebote{0%{transform:translateY(0)}40%{transform:translateY(-10px) scale(1.08)}100%{transform:none}}

/* celulares: las tarjetas no pueden ensanchar la grilla */
.fichas{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.fichas{grid-template-columns:minmax(0,1fr)}.ficha{min-width:0}}
.ficha__cab{min-width:0;gap:12px}
.ficha__nombre{min-width:0;overflow-wrap:anywhere}

.ficha__cab{box-sizing:border-box}

/* preguntas como charla */
.chat{display:grid;gap:26px;margin-top:34px}
.chat__par{display:grid;gap:12px}
.chat__q{margin:0;justify-self:end;max-width:min(560px,88%);background:var(--fondo);color:var(--crema);padding:15px 22px;border-radius:24px 24px 6px 24px;font:600 1.02rem/1.4 Inter,sans-serif;letter-spacing:-.01em;box-shadow:0 8px 22px rgba(11,35,82,.18)}
.chat__a{display:flex;gap:12px;align-items:flex-end;max-width:min(640px,94%)}
.chat__av{flex:none;width:42px;height:42px;border-radius:50%;background:var(--azul-2);display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(11,35,82,.2);overflow:hidden}
.chat__av img{width:78%;height:auto}
.chat__b{margin:0;background:#fff;border:1px solid rgba(11,27,60,.1);padding:15px 22px;border-radius:24px 24px 24px 6px;box-shadow:0 8px 22px rgba(11,35,82,.08);color:var(--suave);font-size:1.02rem;line-height:1.55}
.chat-js .chat__q,.chat-js .chat__a{opacity:0;transform:translateY(16px)}
.chat-js .chat__q.vista,.chat-js .chat__a.vista{opacity:1;transform:none;transition:opacity .35s var(--curva),transform .35s var(--curva)}
@media (max-width:760px){.chat{gap:20px}.chat__q{padding:12px 17px;font-size:.96rem;max-width:92%}.chat__av{width:34px;height:34px}.chat__b{padding:12px 17px;font-size:.96rem}.chat__a{gap:9px;max-width:100%}}
@media (prefers-reduced-motion:reduce){.chat-js .chat__q,.chat-js .chat__a{opacity:1!important;transform:none!important}}
/* instagram en la barra */
.barra__ig{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--crema);border:1.5px solid rgba(244,238,225,.35);transition:background .3s var(--curva),transform .3s var(--curva)}
.barra__ig:hover{background:rgba(244,238,225,.14);transform:translateY(-2px)}
.barra__ig:focus-visible{outline:3px solid #9CC0FF;outline-offset:3px}
@media (max-width:900px){.barra__ig{display:grid!important;margin-left:auto}}

/* visor de la galería: sólo la foto y el contador */
.galeria figure{cursor:zoom-in}
.visor{position:fixed;inset:0;z-index:9999;background:rgba(4,12,32,.98);display:flex;align-items:center;justify-content:center;touch-action:none}
.visor[hidden]{display:none}
.visor__img{max-width:92vw;max-height:80vh;max-height:80svh;border-radius:14px;object-fit:contain;transition:transform .15s}
.visor__x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font:400 34px/1 var(--f-t,inherit);cursor:pointer;display:grid;place-items:center;padding:0 0 4px}
.visor__f{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0 0 4px}
.visor__f--a{left:12px}.visor__f--s{right:12px}
.visor__n{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#fff;font-size:15px;margin:0;letter-spacing:.08em}
.visor-abierto{overflow:hidden}
@media(max-width:760px){.visor__f{display:none}}

/* «En la mesa»: receta en tres pasos */
.dos__fotos--una{display:block}
.dos__fotos--una img{aspect-ratio:4/5;max-height:560px;margin:0 auto}
.receta{display:flex;align-items:flex-end;gap:clamp(20px,4vw,48px);margin-top:26px}
.pasos{list-style:none;padding:0;margin:0;display:grid;gap:16px;flex:1;min-width:0}
.pasos li{display:flex;gap:14px;align-items:center;opacity:.38;transition:opacity .5s var(--curva)}
.pasos li.on{opacity:1}
.pasos b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid #ffffff66;font:700 .95rem/1 Inter,sans-serif;transition:background .5s,border-color .5s,color .5s}
.pasos li[data-p="1"].on b{background:#D2563A;border-color:#D2563A}
.pasos li[data-p="2"].on b{background:#7FD3F5;border-color:#7FD3F5;color:#071A40}
.pasos span{font-size:1.05rem;line-height:1.3}
.vaso__naranja{opacity:0;transform:translateY(-14px);transition:opacity .5s .1s,transform .6s .1s var(--curva)}
@media (max-width:520px){.receta{flex-direction:column;align-items:flex-start}.vaso{align-self:flex-end}}

/* galería clavada: la sección es alta y su contenido queda fijo mientras las fotos corren */
.lugar--clavado{padding:0}
.lugar__pegado{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--barra,76px) + 12px) 0 28px;overflow:hidden;box-sizing:border-box}
.lugar--clavado .galeria{overflow:hidden;scroll-snap-type:none;padding-top:28px}
.lugar--clavado .galeria figure{height:min(50vh,460px);scroll-snap-align:none}
.lugar--clavado .galeria__mando{display:none}
.lugar--clavado .bajada{margin-bottom:0}

/* «En la mesa» clavada: la receta avanza con el scroll */
.mesa--clavada{padding:0}
.mesa__pegado{box-sizing:border-box}
.mesa--clavada .mesa__pegado{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--barra,76px) + 16px) 0 28px;overflow:hidden}
.vaso__hielo{opacity:0;transform:translateY(-24px);transition:opacity .5s,transform .7s var(--curva)}
.vaso.paso2 .vaso__hielo{opacity:1;transform:translateY(calc((var(--base,0) - var(--lv,0)) * 104px))}
/* naranja: aparece con el paso 3 */
.vaso.paso3 .vaso__naranja{opacity:1;transform:translateY(calc((var(--base,0) - var(--lv,0)) * 100px))}
.pasos li[data-p="2"].on b{background:#BFE9FB;border-color:#BFE9FB;color:#071A40}
.pasos li[data-p="3"].on b{background:#F4A340;border-color:#F4A340;color:#071A40}
.pasos li[data-p="4"].on b{background:#7FD3F5;border-color:#7FD3F5;color:#071A40}
@media (max-width:900px){
  .mesa--clavada .dos__fotos--una img{aspect-ratio:auto;height:clamp(120px,22vh,200px);width:100%;object-fit:cover;object-position:50% 55%}
  .mesa--clavada #sifon-seccion .bajada,.mesa--clavada .dos__texto .bajada{display:none}
  .mesa--clavada .dos{gap:16px}
  .receta{flex-direction:row;align-items:flex-end;margin-top:14px}
  .pasos{gap:10px}.pasos span{font-size:.98rem}
  .vaso{width:100px;height:150px}.vaso svg{width:100%;height:100%}
  .mesa--clavada .dos__texto h2{max-width:60%}   /* el sifón sirve en la columna derecha, que queda libre */
  .mesa--clavada .dos__texto .rotulo{max-width:60%}
}