:root{
 --ink:#0f2747;--navy:#0C417E;--royal:#055497;--cyan:#0496c0;--cyan2:#05B0DE;--mut:#5a739a;
 --srf:rgba(6,20,36,.8);--brd:rgba(255,255,255,.14);--brdT:rgba(255,255,255,.22);
 --lite:#f2f8fc;--lmut:rgba(222,236,248,.72);
 --vh:100svh;
 --ease:cubic-bezier(.19,1,.22,1);
 /* ===== sistema de VIDRIO (glassmorphism): base translucida + capa de luz cenital + borde especular ===== */
 --glass-blur:blur(18px) saturate(1.7);
 --glass-blur-lite:blur(13px) saturate(1.55);
 --glass-sheen:linear-gradient(158deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,0) 72%);
 --glass-edge:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -14px 34px -18px rgba(4,14,30,.7);
 --glass-lift:0 18px 44px -22px rgba(0,10,26,.66);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#071626}
#track{display:none}
body{font-family:'Inter',system-ui,sans-serif;color:var(--lite)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.02}
.ital{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:0}
.slide h2 .ital{font-family:'Sora',sans-serif;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:inherit} /* ESTANDAR tipografico (8-jul): titulos de seccion 100% Sora; la italica editorial vive SOLO en el hero */
::selection{background:var(--cyan2);color:#fff}

/* ===== escenario ===== */
#stage{position:fixed;inset:0;height:var(--vh)}
.slide{position:absolute;inset:0;height:var(--vh);visibility:hidden;opacity:0;overflow:hidden}
.slide .inner{position:absolute;inset:0}
.ph{position:absolute;inset:0;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);will-change:transform}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,14,26,.74),rgba(4,14,26,.2) 46%,rgba(4,14,26,.5))}
#s2 .scrim{background:linear-gradient(90deg,rgba(4,14,26,.55),rgba(4,14,26,.15) 60%)}
.wrap{position:absolute;inset:0;max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.ey{display:inline-flex;align-items:center;gap:10px;font:700 11px/1.35 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#5fd0ec;margin-bottom:clamp(16px,2.6vw,28px);text-wrap:balance}
.ey::before{content:"";width:28px;height:1px;background:#5fd0ec}
.rl{display:block;overflow:hidden}.rl>i{display:block;font-style:normal}
.btn{display:inline-flex;align-items:center;gap:11px;font:700 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;min-height:44px;position:relative;padding:6px 2px;background:none;border:none;box-shadow:none;transition:color .25s}
.btn .ar{transition:transform .3s var(--ease);font-size:15px}.btn:hover .ar{transform:translateX(5px)}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;transform-origin:left;transition:transform .35s var(--ease)}
.btn-p{color:#5fd6f4}
.btn-p::after{background:linear-gradient(90deg,#05B0DE,rgba(5,176,222,.15))}
.btn-p:hover{color:#8ae4fb}
.btn-g{color:rgba(238,247,253,.9)}
.btn-g::after{background:rgba(255,255,255,.3)}
.btn-g:hover{color:#fff}
.btn:hover::after{transform:scaleX(.55)}

/* ===== chrome ===== */
.chrome{position:fixed;z-index:90}
.c-brand{top:max(clamp(16px,2.9vw,28px),env(safe-area-inset-top));left:max(clamp(20px,4vw,44px),env(safe-area-inset-left));right:auto;display:flex;align-items:center;gap:10px;opacity:0;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.c-brand img{transition:transform .4s var(--ease)}.c-brand:hover img{transform:scale(1.06)}
.c-tr{top:clamp(16px,3vw,26px);right:clamp(20px,4vw,44px);left:auto;display:flex;align-items:center;gap:20px;z-index:97} /* 97: por encima de la mbar (96) para que el menu desplegable nunca quede debajo */
.c-tr nav{display:flex;gap:22px}.c-tr nav a{font:600 13.5px/1 'Inter',system-ui,sans-serif;color:#e8f4fb;opacity:.9;position:relative;cursor:pointer}
.c-tr nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--cyan2);transition:right .35s var(--ease)}.c-tr nav a:hover::after{right:0}
.sndbtn{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);background-image:var(--glass-sheen);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);box-shadow:var(--glass-edge),var(--glass-lift);color:#eaf6fd;display:grid;place-items:center;cursor:pointer;flex:none;transition:background-color .25s,border-color .25s,box-shadow .25s}
.sndbtn:hover{background-color:rgba(255,255,255,.16);border-color:rgba(94,214,242,.55);box-shadow:var(--glass-edge),var(--glass-lift),0 0 0 3px rgba(5,176,222,.14)}
.sndbtn svg{width:17px;height:17px}
.sndbtn .s-off{display:none;color:rgba(220,238,250,.7)}
.sndbtn.off .s-on{display:none}
.sndbtn.off .s-off{display:block}
.sndbtn .s-eq{position:absolute;right:-2px;bottom:-2px;display:none;align-items:flex-end;gap:1.5px;height:9px;padding:2px;border-radius:4px;background:rgba(6,18,34,.9)}
.sndbtn.playing .s-eq{display:flex}
.sndbtn .s-eq i{width:2px;height:100%;background:var(--cyan2);border-radius:1px;transform-origin:bottom;animation:eqb .9s ease-in-out infinite}
.sndbtn .s-eq i:nth-child(2){animation-delay:.3s}
.sndbtn .s-eq i:nth-child(3){animation-delay:.6s}
@keyframes eqb{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.langsel{position:relative}
.langsel-btn{display:grid;place-items:center;width:38px;height:38px;background:rgba(255,255,255,.09);background-image:var(--glass-sheen);border:1px solid rgba(255,255,255,.22);border-radius:50%;font:700 11.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.04em;color:#eaf6fd;padding:0;-webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);box-shadow:var(--glass-edge),var(--glass-lift);cursor:pointer;transition:border-color .25s,background-color .25s}
.langsel-btn>svg:first-child,.langsel-btn .lcar{display:none!important}
.langsel-btn:hover{border-color:rgba(94,214,242,.5);background-color:rgba(255,255,255,.15)}
.langsel-btn>svg:first-child{width:15px;height:15px;color:#5fd0ec}.langsel-btn .lcar{width:10px;height:10px;opacity:.7;transition:transform .2s}.langsel-btn[aria-expanded=true] .lcar{transform:rotate(180deg)}
.langsel-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:180px;background:rgba(9,23,40,.55);background-image:var(--glass-sheen);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:var(--glass-edge),0 26px 54px -22px rgba(0,8,22,.72);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s}
.langsel.open .langsel-menu{opacity:1;visibility:visible;transform:none}
.langsel-menu .lh2{font:700 9.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(210,230,245,.55);padding:9px 12px 7px}
.langopt{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-radius:10px;padding:10px 12px;font:600 14px/1 'Inter',system-ui,sans-serif;color:#eaf4fb;text-align:left;cursor:pointer}
.langopt:hover{background:rgba(255,255,255,.07)}.langopt .lflag{width:24px;height:auto;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.langopt .ck{margin-left:auto;width:16px;height:16px;color:#5fd0ec;opacity:0}.langopt[aria-current=true] .ck{opacity:1}
/* ===== menu superior de secciones + contactos (26-ago, pedido de Lalo: llegar a cualquier
   seccion o contactar SIN deslizar; en movil ademas repone los links del nav que no caben) ===== */
.consel{position:relative}
.consel-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:238px;max-height:min(72vh,540px);overflow:auto;background:rgba(9,23,40,.55);background-image:var(--glass-sheen);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:var(--glass-edge),0 26px 54px -22px rgba(0,8,22,.72);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:6}
.consel.open .consel-menu{opacity:1;visibility:visible;transform:none}
.consel-menu .lh2{font:700 9.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(210,230,245,.55);padding:9px 12px 7px}
.conopt{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-radius:10px;padding:10px 12px;font:600 14px/1 'Inter',system-ui,sans-serif;color:#eaf4fb;text-align:left;cursor:pointer;text-decoration:none}
.conopt:hover{background:rgba(255,255,255,.07)}
.conopt svg{width:16px;height:16px;flex:none;color:#5fd0ec}
.conopt em{margin-left:auto;padding-left:14px;font:600 11px/1 'Inter',system-ui,sans-serif;font-style:normal;letter-spacing:.02em;color:rgba(190,220,240,.6);white-space:nowrap}
.co-urg svg{color:#ff9d92}
.co-wa svg{color:#5ee38a}
body.day .consel-menu{background-color:rgba(248,252,255,.72);border-color:rgba(13,43,71,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 54px -22px rgba(20,50,80,.35)}
body.day .consel-menu .lh2{color:rgba(13,43,71,.55)}
body.day .conopt{color:#123a5c}
body.day .conopt:hover{background:rgba(13,43,71,.06)}
body.day .conopt em{color:rgba(18,58,92,.55)}
.svcsel{position:relative;display:inline-flex}
.svcsel-btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:600 13.5px/1 'Inter',system-ui,sans-serif;color:#e8f4fb;opacity:.9;cursor:pointer}
.svcsel-btn:hover{opacity:1}
.svcsel-btn .lcar{width:9px;height:9px;opacity:.75;transition:transform .2s}
.svcsel-btn[aria-expanded=true] .lcar{transform:rotate(180deg)}
.svcsel-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:264px;background:rgba(9,23,40,.55);background-image:var(--glass-sheen);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:var(--glass-edge),0 26px 54px -22px rgba(0,8,22,.72);padding:6px;opacity:0;visibility:hidden;transition:.2s;z-index:5}
.svcsel.open .svcsel-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.svcsel-menu .lh2{font:700 9.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(210,230,245,.55);padding:9px 12px 7px}
.svcopt{display:block;width:100%;background:none;border:0;border-radius:10px;padding:10px 12px;font:600 13.5px/1.3 'Inter',system-ui,sans-serif;color:#eaf4fb;text-align:left;cursor:pointer}
.svcopt:hover{background:rgba(255,255,255,.07)}
body.day .svcsel-btn{color:#123a5c;opacity:.92}
body.day .svcsel-menu{background-color:rgba(248,252,255,.72);border-color:rgba(13,43,71,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 54px -22px rgba(20,50,80,.35)}
body.day .svcsel-menu .lh2{color:rgba(13,43,71,.55)}
body.day .svcopt{color:#0d2b47}
body.day .svcopt:hover{background:rgba(13,43,71,.06)}
@media(max-width:920px){.svcsel-menu{left:0;transform:translateY(-6px);right:auto}.svcsel.open .svcsel-menu{transform:none}}
/* instruccion INTEGRADA al contenido de cada seccion (nivel de lectura, no flotador) */
.ghint{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:none;align-self:center;margin-top:clamp(14px,2vw,22px);font:700 9.5px/1.5 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(146,216,242,.66);text-align:center}
.ghint::before,.ghint::after{content:"";height:1px;flex:1;max-width:64px;background:linear-gradient(90deg,transparent,rgba(94,214,242,.45));opacity:.9}
.ghint::after{background:linear-gradient(270deg,transparent,rgba(94,214,242,.45))}
/* navegacion explicita de resenas: flechas GRANDES bajo la pila (ese espacio estaba muerto) */
.rvnav{display:flex;align-items:center;justify-content:center;gap:clamp(22px,4vw,44px);margin-top:clamp(12px,2.2vh,26px)}
.rvbtn{background:var(--glass-sheen),rgba(8,22,40,.6);-webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);border:1px solid rgba(255,255,255,.2);border-radius:14px;box-shadow:var(--glass-edge),0 14px 34px -16px rgba(0,6,16,.6);padding:0;margin:0;display:grid;place-items:center;width:clamp(56px,7vw,72px);height:clamp(46px,5.6vh,54px);color:#cfeefb;cursor:pointer;outline:none;transition:border-color .3s,color .3s,background-color .3s}
.rvbtn svg{width:22px;height:22px;display:block;transition:transform .25s var(--ease)}
.rvbtn:hover{border-color:rgba(95,214,244,.6);color:#8ae4fb}
.rvbtn.rvnext:hover svg{transform:translateX(3px)}
.rvbtn.rvprev:hover svg{transform:translateX(-3px)}
.rvbtn:focus-visible{border-color:var(--cyan2);box-shadow:0 0 0 3px rgba(5,176,222,.28)}
.rvbtn:disabled{opacity:.26;cursor:default}
.rvbtn:disabled svg{transform:none!important}
.rvcount{font:700 12.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:rgba(198,220,238,.66);display:flex;align-items:baseline;gap:6px;min-width:60px;justify-content:center}
.rvcount b{font-family:'Sora',system-ui,sans-serif;font-size:17px;font-weight:700;color:#fff}
.rvsep{opacity:.7}
body.day .rvbtn{background:linear-gradient(158deg,rgba(255,255,255,.85),rgba(255,255,255,.55) 46%),rgba(250,253,255,.95);border-color:rgba(13,43,71,.18);color:#0b3f66;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 30px -18px rgba(25,55,90,.4)}
body.day .rvbtn:hover{border-color:rgba(4,135,184,.55);color:#04729c}
body.day .rvcount{color:rgba(13,43,71,.62)}
body.day .rvcount b{color:#0d2b47}
@media(max-width:920px){
 #s5 .rscroll{margin-bottom:0} /* id gana a la regla movil posterior: el hueco elastico pasa DEBAJO de las flechas */
 #s5 .rvnav{margin-top:14px;margin-bottom:auto;gap:26px}
 .rvbtn{width:60px;height:48px}
}
/* boton "ver fotos del area" en la tarjeta de servicio activa (el caption vive sobre scrim oscuro en ambos modos) */
.sacc-tx{pointer-events:none} /* el caption invisible de tarjetas inactivas no debe atrapar clicks */
.sacc.on .sacc-tx{pointer-events:auto}
.sgal{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:none;border:none;padding:2px 0 4px;font:700 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5fd6f4;cursor:pointer;border-bottom:1.5px solid rgba(5,176,222,.55);outline:none}
.sgal .ar{font-size:13px;line-height:1;transition:transform .25s var(--ease)}
.sgal:hover .ar{transform:translateX(3px)}
.sgal:focus-visible{border-bottom-color:#fff}
/* visor de fotos reales por area (a color) */
/* ⚠️ GUARDRAIL (26-ago, reporte del doctor — NO TOCAR sin releer esto primero):
   iOS Safari IGNORA user-scalable=no/maximum-scale=1 del meta viewport desde iOS 10 — 3 intentos
   previos fallaron por atacar ESE meta tag. La causa real es el double-tap-zoom NATIVO de Safari:
   dos toques rapidos (el gesto de "avanzar de foto") hacen zoom de pagina; en un sitio fixed sin
   scroll no hay forma de salir. El fix real es esta linea: touch-action:manipulation SI la
   respeta el navegador y apaga el double-tap-zoom en TODO el sitio, conservando pan/pinch de
   accesibilidad. Si alguna vez vuelve el reporte "se hace zoom y no se puede quitar": el
   sospechoso #1 es que esta linea se haya borrado o que un elemento nuevo (foto/video futuro)
   traiga su propio touch-action que la pise — NUNCA volver a intentar arreglarlo en el meta
   viewport (linea 5), ya se probo y no funciona. */
html,body{touch-action:manipulation}
#galbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;touch-action:none} /* none: DENTRO del visor ningun gesto es del navegador (ni double-tap ni pinch de pagina); el zoom de foto lo maneja el propio visor y siempre se puede deshacer */
#galbox[hidden]{display:none}
.gb-back{position:absolute;inset:0;background:rgba(3,10,20,.93)}
@media(min-width:921px){.gb-back{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}} /* el blur del fondo SOLO desktop: en iPhone desenfocar el deck 3D completo al abrir el visor trababa todo (reporte Lalo 21-ago); el fondo al 93% de opacidad cubre igual */
.gb-fig{position:relative;z-index:2;margin:0;width:min(86vw,1180px);max-height:72vh;display:flex;align-items:center;justify-content:center} /* width FIJA (era max-width): con shrink-to-fit el primer layout de la imagen saltaba de tamano */
.gb-fig img{max-width:100%;max-height:72vh;display:block;border-radius:14px;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);-webkit-user-drag:none;-webkit-user-select:none;user-select:none} /* sin drag nativo de imagen: peleaba con el paneo del zoom en Safari mouse */
.gb-x{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px);z-index:4;width:52px;height:44px}
.gb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
.gb-prev{left:clamp(10px,3vw,36px)}.gb-next{right:clamp(10px,3vw,36px)}
.gb-foot{position:absolute;bottom:clamp(16px,4vh,34px);left:0;right:0;z-index:3;display:flex;align-items:baseline;justify-content:center;gap:16px}
.gb-lab{font:700 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8ae4fb;border-bottom:1.5px solid rgba(5,176,222,.5);padding-bottom:4px}
.gb-count{font:700 12px/1 'Inter',system-ui,sans-serif;color:rgba(230,242,250,.75)}.gb-count b{font-family:'Sora',system-ui,sans-serif;font-size:15px;color:#fff}
body.day #galbox .rvbtn{background:var(--glass-sheen),rgba(8,22,40,.6);border-color:rgba(255,255,255,.2);color:#cfeefb} /* el visor es oscuro en ambos modos: las fotos protagonizan */
@media(max-width:920px){
 .gb-fig{width:94vw;max-height:58vh}.gb-fig img{max-height:58vh}
 .gb-nav{top:auto;bottom:clamp(64px,10vh,96px);transform:none}
 .gb-prev{left:16vw}.gb-next{right:16vw}
 .gb-foot{bottom:18px}
}
.c-count{position:fixed;bottom:clamp(18px,4vw,32px);left:clamp(20px,4vw,44px);z-index:90;font:700 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:rgba(230,242,250,.7);display:flex;align-items:baseline;gap:7px;transition:opacity .3s}
body.gal-open .c-count{opacity:0;pointer-events:none} /* con el visor abierto el "05/09 SERVICIOS" se transparentaba fantasma bajo la etiqueta de la galeria */
@media(max-height:600px){.c-count{display:none}} /* pantallas cortas (320x568): chocaba con los logos de aseguradoras del hero */
.c-count .cur{font-family:'Sora',system-ui,sans-serif;font-size:15px;color:#fff}.c-count .plabel{margin-left:10px;font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5fd0ec}
.rail{position:fixed;right:clamp(16px,2.6vw,34px);top:50%;transform:translateY(-50%);z-index:92;display:flex;flex-direction:column;gap:6px}
.rail button{display:flex;align-items:center;justify-content:flex-end;gap:9px;background:none;border:0;padding:9px;cursor:pointer;min-width:44px;min-height:22px}
.rail .rlb{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,242,250,.75);opacity:0;transform:translateX(6px);transition:.25s var(--ease);white-space:nowrap}
.rail .rd{width:6px;height:6px;border-radius:50%;background:rgba(235,245,252,.4);box-shadow:0 0 0 3px transparent;transition:.3s var(--ease);flex:none}
.rail button:hover .rlb{opacity:1;transform:none}
.rail button.on .rd{background:var(--cyan2);box-shadow:0 0 0 3.5px rgba(5,176,222,.22);transform:scale(1.25)}
.rail button.on .rlb{opacity:1;transform:none;color:#fff}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:96;display:none;grid-template-columns:1fr 1fr 1fr;background:rgba(6,18,32,.94);border-top:1px solid var(--brd)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px calc(9px + env(safe-area-inset-bottom));font:700 11px/1 'Inter',system-ui,sans-serif}
.mbar .m-urg{background:#C8362A;color:#fff}.mbar .m-age{background:var(--navy);color:#fff}.mbar .m-wa{background:var(--cyan2);color:#fff}.mbar svg{width:19px;height:19px}

/* ===== overlays de transicion ===== */
#curtain{position:fixed;inset:0;z-index:70;display:none;grid-template-columns:1fr 1fr 1fr;pointer-events:none}
#curtain span{background:linear-gradient(180deg,#31448f,#1b2a66);transform:scaleY(0)}
#blinds{position:fixed;inset:0;z-index:70;display:none;grid-template-columns:repeat(10,1fr);pointer-events:none}
#blinds span{background:#071626;transform:scaleX(0)}
#shade{position:fixed;inset:0;z-index:70;background:radial-gradient(circle at 50% 60%,#1a0f1e,#070812);opacity:0;pointer-events:none}
.grain{position:fixed;inset:-60%;width:220%;height:220%;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");animation:grn .84s steps(8) infinite}
@media(max-width:920px){.grain{display:none}} /* AUDITORIA 21-ago, hallazgo #1: textura de ~2500x5100px reales (DPR3) con mix-blend-mode:overlay re-mezclandose contra TODO 9.5 veces/seg, en las 9 slides, siempre — el mayor costo fijo del jank movil */
@keyframes grn{0%{transform:translate(0,0)}25%{transform:translate(1.6%,-2%)}50%{transform:translate(2%,1.2%)}75%{transform:translate(1.2%,2%)}100%{transform:translate(0,0)}}
.vig{position:fixed;inset:0;z-index:61;pointer-events:none;background:radial-gradient(ellipse 112% 84% at 50% 46%,transparent 52%,rgba(3,12,24,.4) 100%)}

/* ===== S0 HERO (editorial + pared del logo) ===== */
#s0{background:linear-gradient(180deg,#0a1c32 0%,#060f1e 100%)}
#s4 .ph video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#s4 .ph video::-webkit-media-controls,#s4 .ph video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* --- HERO EXPANSION: de afuera (exterior) hacia adentro (interior) --- */
#s0 .hx-ext{position:absolute;inset:0;z-index:0}
#s0 .hx-ext::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 48% at 84% 96%,rgba(3,10,20,.5),transparent 70%)} /* los coches del estacionamiento no compiten con el lockup */
#s0 .hx-ext img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.92}
#s0 .hx-ext::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,30,.66) 0%,rgba(6,15,30,.26) 34%,rgba(6,15,30,.5) 78%,rgba(6,15,30,.92) 100%),radial-gradient(120% 90% at 50% 40%,transparent 42%,rgba(6,15,30,.5) 100%)}
#s0 .hx-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44vw;height:54vh;border-radius:20px;overflow:hidden;z-index:1;box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.16)} /* will-change de width/height retirado: no son compositables, solo reservaba memoria */
#s0 .hx-frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--glassop,1);background:linear-gradient(118deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 22%,transparent 40%)} /* reflejo de vidrio: la ventana se lee como apertura, no como imagen pegada */
#s0 .hx-frame img{width:100%;height:100%;object-fit:cover;object-position:74% 44%}
#s0 .hx-veil{position:absolute;inset:0;opacity:.5;background:linear-gradient(90deg,rgba(5,13,26,.94) 0%,rgba(5,13,26,.62) 40%,rgba(5,13,26,.12) 72%),linear-gradient(180deg,rgba(5,13,26,.35),rgba(5,13,26,0) 30%,rgba(6,15,30,.82) 84%,#060f1e 100%)}
#s0 .hx-title{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center;padding:0 6vw;background:radial-gradient(ellipse 64% 34% at 50% 50%,rgba(3,9,18,.55) 0%,rgba(3,9,18,.28) 50%,transparent 76%)}
#s0 .hx-title img{width:clamp(200px,32vw,400px);height:auto;filter:drop-shadow(0 3px 26px rgba(3,10,22,.65));will-change:transform,opacity}
#s0 .hx-title .ht-mark{width:clamp(50px,7.5vw,80px);margin-bottom:11px} /* el sello de la Virgen corona el wordmark: el lockup REAL de la marca, no solo letras */
#s0 .hx-hint{position:absolute;left:50%;bottom:clamp(24px,5vh,52px);transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(226,240,250,.82);font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;will-change:opacity}
#s0 .hx-hint .ms{width:22px;height:34px;border:1.5px solid rgba(226,240,250,.78);border-radius:12px;position:relative}
#s0 .hx-hint .ms::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:var(--cyan2);transform:translateX(-50%);animation:scr 1.6s infinite}
#s0 .wrap{z-index:5}
.grad{background:linear-gradient(115deg,#fff 10%,#9be4fa 55%,#5fd0ec 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.insrow{margin-top:clamp(26px,3.4vw,42px);max-width:560px}
.insrow h3{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(205,228,244,.5);margin-bottom:14px}
.insmask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.instrack{display:flex;align-items:center;gap:44px;width:max-content;padding:0 22px;animation:mq 13s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.inslogo{display:block;width:auto;filter:brightness(0) invert(1);opacity:.72;transition:opacity .3s}
.inslogo:hover{opacity:1}
#s4 .ph{background:radial-gradient(ellipse at 50% 42%,rgba(47,180,240,.1),transparent 72%)}
#s1 .inner{perspective:1100px}
#seam{position:fixed;left:0;right:0;top:0;height:30vh;z-index:70;display:none;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,20,0),rgba(3,10,20,.6) 46%,rgba(3,10,20,.6) 54%,rgba(3,10,20,0)),linear-gradient(180deg,transparent 49.6%,rgba(94,214,242,.4) 50%,transparent 50.4%)}
#bloom{position:fixed;inset:0;z-index:70;display:none;pointer-events:none;background:radial-gradient(circle at 50% 44%,#f4fcff 0%,#cfeefb 36%,#9edcf5 64%,#7dccf0 100%);opacity:0}
#beam{position:fixed;inset:0;z-index:70;display:none;pointer-events:none;overflow:hidden}
#beam i{position:absolute;top:-12%;bottom:-12%;left:0;width:16vw;transform:skewX(-6deg);background:linear-gradient(90deg,rgba(47,212,255,0),rgba(160,230,255,.5) 38%,#ecfcff 50%,rgba(160,230,255,.5) 62%,rgba(47,212,255,0));filter:blur(5px)}
#warp{position:fixed;z-index:69;width:46vmax;height:46vmax;display:none;pointer-events:none;margin:0}
#warp svg{width:100%;height:100%;overflow:visible;display:block}
#flashx{position:fixed;inset:0;z-index:69;display:none;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,46%),#f0fbff 0%,rgba(205,240,252,.97) 42%,rgba(148,213,240,.95) 100%);opacity:0}
#s0 h1{font-size:clamp(38px,6.8vw,92px);font-weight:600;color:#f4f9fd;max-width:16ch;text-shadow:0 2px 26px rgba(3,10,22,.5)}
#s0 h1 .ital{color:#6fd6f2}
#s0 .sub{margin:clamp(22px,3vw,34px) 0 0;font:400 clamp(16px,1.4vw,19px)/1.6 'Inter',system-ui,sans-serif;color:rgba(232,243,250,.85);max-width:44ch}
#s0 .acts{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(26px,3.4vw,38px) 0 0}
#s0 .cue{position:absolute;left:50%;bottom:clamp(18px,4vh,30px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(230,242,250,.65);font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase}
#s0 .cue .ms{width:22px;height:34px;border:1.5px solid rgba(230,242,250,.5);border-radius:12px;position:relative}
#s0 .cue .ms::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:var(--cyan2);transform:translateX(-50%);animation:scr 1.6s infinite}
@keyframes scr{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
@keyframes ldpulse{0%,100%{opacity:.42}50%{opacity:.85}}

/* ===== S1 CERCA (mapa nocturno) ===== */
#s1{background:radial-gradient(ellipse 120% 100% at 68% 38%,#123a56 0%,#0d2c44 48%,#051524 100%)}
#s1 .mapbox{position:absolute;right:clamp(2%,6vw,9%);top:50%;transform:translateY(-50%);width:min(52vw,700px);aspect-ratio:1024/866}
#s1 .mapbox img{width:100%;height:100%;object-fit:contain;display:block}
#s1 .mapbox canvas{position:absolute;inset:0;width:100%;height:100%}
#s1 .beam{position:absolute;left:43.7%;top:-40%;width:7%;height:99%;background:linear-gradient(180deg,rgba(140,225,255,0),rgba(140,225,255,.13) 34%,rgba(140,225,255,.13) 46%,rgba(140,225,255,0));animation:beam 4s ease-in-out infinite} /* sin filter:blur(6px): el gradiente ya es suave y el blur mantenia una capa de filtro animandose infinita */
@keyframes beam{0%,100%{opacity:.55}50%{opacity:1}}
#s1 .wrap{justify-content:center}
#s1 h2{font-size:clamp(26px,3.6vw,44px);color:#f4f9fd;max-width:15ch}

#s1 .lead{margin-top:12px;font:400 clamp(14px,1.3vw,17px)/1.6 'Inter',system-ui,sans-serif;color:var(--lmut);max-width:40ch}

/* ===== S1 SUR DE TEXAS: board de tiempos + WhatsApp ===== */
#s1 .usbox{margin-top:clamp(20px,2.6vw,30px);max-width:40ch}
#s1 .usb-div{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,1.8vw,20px);font:700 9.5px/1.5 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(146,216,242,.66)}
#s1 .usb-div::before,#s1 .usb-div::after{content:"";height:1px;flex:1;max-width:36px;background:linear-gradient(90deg,transparent,rgba(94,214,242,.45))}
#s1 .usb-div::after{background:linear-gradient(270deg,transparent,rgba(94,214,242,.45))}
#s1 .usng{grid-template-columns:repeat(2,1fr);gap:16px 22px;margin-top:0}
#s1 .usng .nc{border-left:1px solid rgba(255,255,255,.09);padding-left:16px}
#s1 .usng .nc:nth-child(2n+1){border-left:none;padding-left:0}
#s1 .usng .n{font-size:clamp(22px,2.4vw,28px)}
#s1 .usb-note{margin-top:clamp(16px,2vw,22px);font:400 13px/1.55 'Inter',system-ui,sans-serif;color:var(--lmut);max-width:40ch}
#s1 .usb-cta{margin-top:12px}
body.day #s1 .usb-div{color:rgba(4,114,156,.8)}
body.day #s1 .usb-div::before,body.day #s1 .usb-div::after{background:linear-gradient(90deg,transparent,rgba(4,135,184,.5))}
body.day #s1 .usb-div::after{background:linear-gradient(270deg,transparent,rgba(4,135,184,.5))}
body.day #s1 .usb-note{color:rgba(15,41,68,.74)}

/* ===== S2 NUMEROS ===== */
#s2 .panel{background:var(--glass-sheen),rgba(6,20,36,.62);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);border:1px solid rgba(255,255,255,.16);box-shadow:var(--glass-edge),0 44px 96px -44px rgba(0,8,20,.8);border-radius:24px;padding:clamp(28px,3.4vw,48px);max-width:640px}
#s2 h2{font-size:clamp(26px,3.6vw,44px);color:#f4f9fd}
#s2 .nl{margin-top:12px;font:400 clamp(14px,1.3vw,17px)/1.6 'Inter',system-ui,sans-serif;color:var(--lmut);max-width:52ch}
.ng{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px);margin-top:clamp(24px,2.6vw,38px)}
.nc{position:relative;padding-top:14px}
.nc::before{content:"";position:absolute;top:0;left:0;width:28px;height:2.5px;background:var(--cyan2);border-radius:2px}
.nc .n{font:700 clamp(30px,3.6vw,46px)/1 'Sora',system-ui,sans-serif;color:#fff}.nc .n i{font-style:normal;color:#2ec6e8}
.nc .l{margin-top:8px;font:500 12.5px/1.45 'Inter',system-ui,sans-serif;color:rgba(208,228,244,.6)}

/* ===== S3 SERVICIOS ===== */
#s3{background:radial-gradient(ellipse 120% 90% at 72% 8%,#0d2b47 0%,#081c30 52%,#060f1e 100%)}
#s3 .col{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(22px,5vw,64px)}
#s3 h2{font-size:clamp(24px,3.2vw,40px);color:#f2f8fc;max-width:22ch}
.svacc{display:flex;gap:10px;margin-top:clamp(18px,2.4vw,30px);height:clamp(300px,46vh,440px);max-width:1100px}
.sacc{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);flex:1;min-width:0;cursor:pointer;transition:flex-grow .75s var(--ease);box-shadow:0 24px 60px -24px rgba(0,6,16,.75),inset 0 1px 0 rgba(255,255,255,.1)}
.sacc.on{flex-grow:18} /* subido de 7: con 14 tarjetas (antes 6) el activo necesita mas peso relativo para no quedar angosto (pedido 5-ago-2026, mas clinicas) */
.sacc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sacc.on img{transform:scale(1.03)}
.scrim2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,32,.16),rgba(5,15,28,.48) 46%,rgba(4,11,22,.93) 100%)}
.sacc .si{position:absolute;top:13px;left:50%;transform:translateX(-50%);color:#2ec6e8;display:inline-flex;transition:.45s var(--ease)}
.sacc .si svg{width:17px;height:17px}
.sacc.on .si{left:16px;transform:none}
.sacc-vt{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);writing-mode:vertical-rl;font:600 12.5px/1 'Sora',system-ui,sans-serif;color:rgba(238,247,253,.9);white-space:nowrap;transition:opacity .3s;max-height:76%;overflow:hidden;text-overflow:ellipsis} /* ellipsis: los nombres largos (Clinica de Traumatologia de Alta Especialidad) se cortaban a media palabra */
.sacc.on .sacc-vt{opacity:0}
body.day .sacc-vt{text-shadow:0 1px 3px rgba(4,12,22,.85),0 0 14px rgba(4,12,22,.6)} /* en dia las fotos claras dejaban ilegible la etiqueta vertical blanca */
body.day #s4 .ey{color:#8ae4fb;text-shadow:0 1px 4px rgba(4,16,30,.85),0 0 16px rgba(4,16,30,.6)} /* el kicker de oncologia monta sobre la foto navy: en dia se lavaba */
.sacc-tx{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;opacity:0;transform:translateY(12px);transition:.5s var(--ease) .22s}
.sacc.on .sacc-tx{opacity:1;transform:none}
.sacc-tx h3{font:600 16px/1.15 'Sora',system-ui,sans-serif;color:#f2f8fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sacc-tx p{font:400 11.5px/1.42 'Inter',system-ui,sans-serif;color:rgba(222,238,250,.72);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== S4 ONCO ===== */
#s4{background:radial-gradient(ellipse 130% 110% at 30% 14%,#0d2b47 0%,#081a30 52%,#050d1b 100%)}
#s4 .ph{inset:auto;left:8%;top:10%;width:48%;height:56%;border-radius:18px;box-shadow:0 50px 120px -40px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1)}
#s4 .oh{position:absolute;left:8%;bottom:9%;max-width:600px} /* 520 se quedaba corto para el ingles largo (partia en 3 lineas y se metia bajo la imagen — pedido de Lalo 18-ago) */
#s4 h2{font-size:clamp(24px,3.2vw,40px);color:#f9f1ec}
#s4 .ol{margin-top:10px;font:400 clamp(13.5px,1.25vw,16px)/1.55 'Inter',system-ui,sans-serif;color:rgba(249,240,235,.78);max-width:46ch}
#s4 .steps.fan{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:34%;display:grid;grid-template-areas:'stack';place-items:center;min-height:340px}
.ostep{background:var(--srf);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--brd);border-radius:16px;padding:15px 17px;position:relative;box-shadow:0 30px 70px -30px rgba(0,6,16,.8),inset 0 1px 0 var(--brdT)}
.fan .ostep{grid-area:stack;width:100%;cursor:pointer;overflow:hidden;transform-origin:50% 50%;transition:transform .6s var(--ease),filter .6s var(--ease),opacity .6s}
.fan .ostep p{white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 68%,transparent);mask-image:linear-gradient(90deg,#000 68%,transparent)}
.fan .ostep:nth-child(1){--d:0;transform:skewY(-7deg) translate(-14%,-118%);z-index:1}
.fan .ostep:nth-child(2){--d:1;transform:skewY(-7deg) translate(-5%,-40%);z-index:2}
.fan .ostep:nth-child(3){--d:2;transform:skewY(-7deg) translate(5%,40%);z-index:3}
.fan .ostep:nth-child(4){--d:3;transform:skewY(-7deg) translate(14%,118%);z-index:4}
.fan .ostep:nth-child(1),.fan .ostep:nth-child(2){filter:grayscale(1) brightness(.62)}
.fan .ostep:nth-child(3){filter:grayscale(.5) brightness(.82)}
@media(hover:hover){.fan:hover .ostep{filter:none}
 .fan .ostep:hover{transform:skewY(0) translate(0,0) scale(1.06)!important;z-index:20;filter:none!important}}
.fan .ostep.pick{transform:skewY(0) translate(0,0) scale(1.05)!important;z-index:20!important;filter:none!important}
.ostep .os{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:#2ec6e8}
.oh2{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.oh2 .oi{color:#2ec6e8;display:inline-flex;opacity:.95}
.oh2 .oi svg{width:20px;height:20px}
.oh2 .os{margin:0}
.ostep h4{font:600 14.5px/1.15 'Sora',system-ui,sans-serif;color:#f4f9fd;margin:7px 0 4px}
.ostep p{font:400 11.5px/1.45 'Inter',system-ui,sans-serif;color:rgba(224,238,250,.6)}
.ostep.new::after{content:"2026";position:absolute;top:10px;right:10px;font:800 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:#5fd6f4;border-bottom:1.5px solid var(--cyan2);padding:0 0 3px}
#s4.live .fan .ostep{animation:fanin .7s var(--ease) backwards;animation-delay:calc(var(--d,0)*.09s + .12s)}
@keyframes fanin{from{opacity:0;transform:skewY(-7deg) translate(0,0) scale(.88)}}

/* ===== S5 RESEÑAS ===== */
#s5 .ph img{filter:saturate(.85) brightness(.8);object-position:50% 62%}
#s5 .scrim{background:linear-gradient(to top,rgba(6,14,24,.82),rgba(6,14,24,.42))}
#s5 .rh{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;justify-content:space-between;max-width:1020px;margin:0 auto;width:100%}
#s5 h2{font-size:clamp(24px,3.2vw,40px);color:#f2f8fc}
.rrate{display:flex;align-items:center;gap:12px}
.rrate .num{font:700 36px/1 'Sora',system-ui,sans-serif;color:#fff}
.rrate .gg{width:22px;height:22px}.rrate .stars svg{width:14px;height:14px;color:#FBBC04}.rrate .rs{font:500 12px/1.4 'Inter',system-ui,sans-serif;color:rgba(210,230,245,.7);margin-left:6px} /* margin: estrellas y "Basado en..." viven anidados en el mismo span, el gap del flex no los separa */
.rscroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:20px 2px 8px;scrollbar-width:none;max-width:1020px;margin:0 auto;width:100%;touch-action:pan-x;overscroll-behavior-x:contain}
.rscroll::-webkit-scrollbar{display:none}
.rcard{scroll-snap-align:start;flex:0 0 clamp(260px,30vw,320px);background:var(--glass-sheen),rgba(8,22,40,.985);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--glass-edge),var(--glass-lift)} /* backdrop-filter ELIMINADO (auditoria): con fondo al 98.5% de opacidad el blur era invisible y se pagaba blur+readback por tarjeta animada por frame */
.rcard .rst svg{width:14px;height:14px;color:#FBBC04}
.rcard .rtx{font:400 13.5px/1.55 'Inter',system-ui,sans-serif;color:rgba(242,248,253,.92)}
.rcard .rfoot{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.rcard .rav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 'Sora',system-ui,sans-serif;color:#fff;flex:none}
.rcard .rn{font:700 12.5px/1.2 'Inter',system-ui,sans-serif;color:#fff}.rcard .rd{font:500 11px/1.3 'Inter',system-ui,sans-serif;color:rgba(198,220,238,.58)}

/* ===== S6 CONTACTO ===== */
#s6{background:#081626}
#s6 .ph{left:52%}
#s6 .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#081626,rgba(8,22,38,.3) 35%,rgba(8,22,38,0))}
#s6 .col{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,5vw,64px)}
.cgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4.5vw,64px);align-items:center;width:100%}
#s6 h2{font-size:clamp(30px,4.4vw,62px);color:#f4f9fd;max-width:14ch}
#s6 .cacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
#s6 .cinfo{margin-top:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:9px;font:500 14px/1.5 'Inter',system-ui,sans-serif;color:rgba(215,232,246,.75)}
#s6 .cinfo b{color:#fff}
#s6 .foot{margin-top:clamp(22px,3vw,36px);font:500 11.5px/1.5 'Inter',system-ui,sans-serif;color:rgba(180,205,228,.45)}

/* ===== fallback (reduced-motion / sin GSAP) ===== */
body.fb{overflow:auto}
body.fb #stage{position:static;height:auto;touch-action:auto}
body.fb #track{display:none}
body.fb .slide{position:relative;visibility:visible;opacity:1;height:auto;min-height:100svh}
body.fb .rl>i{transform:none}body.fb .an{opacity:1}

@media(max-width:920px){
 .c-tr nav{display:none}.rail{display:none}
 .c-tr{gap:12px} /* 4 botones redondos (menu nuevo 26-ago + dia + sonido + idioma) respiran junto al logo en 390px */
 /* menu de contactos movil: anclado right:0 al boton se cortaba por el borde izquierdo (-18px ES,
    -88px en 320px). fixed de borde a borde bajo la barra + fondo casi solido (el backdrop-filter
    movil esta degradado por perf y el hero se transparentaba nitido a traves del panel). */
 .consel-menu{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 62px);min-width:0;background-color:rgba(7,19,34,.93)}
 body.day .consel-menu{background-color:rgba(248,252,255,.96)}
 html[lang=en] #s0 .btn{letter-spacing:.09em;font-size:12px} /* EN: "BOOK AN APPOINTMENT" apilaba los 2 CTAs del hero en 390px */
 /* mbar retirada por decision de Angel: la pagina es la experiencia (los CTAs viven en el contenido) */
 /* movil (18-ago): el mapa pasa a FONDO suave anclado abajo — antes iba centrado en top:76% y el CTA
    de WhatsApp + la guia caian ENCIMA de los chips de ciudades (textos encimados en 390x660).
    Los tiempos duros ya viven en la reticula de arriba; el mapa refuerza, no compite. */
 #s1 .mapbox{position:absolute;right:auto;left:50%;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(80vw,420px);opacity:.42;pointer-events:none;z-index:0}
 #s1 .wrap{justify-content:flex-start;padding-top:calc(clamp(18px,3vw,30px) + 58px);position:relative;z-index:1}
 #s1 h2{font-size:clamp(23px,6.4vw,30px);max-width:none}
 #s1 .lead{font-size:13px;max-width:none;margin-top:9px}
 #s1 .ey{margin-bottom:10px}
 #s1 .wrap{justify-content:flex-start;padding-top:calc(60px + env(safe-area-inset-top))}
 #s1 .usbox{margin-top:14px;max-width:none}
 #s1 .usb-div{margin-bottom:10px}
 #s1 .usng{gap:10px 14px}
 #s1 .usng .n{font-size:19px}
 #s1 .usb-note{display:none}
 #s1 .usb-cta{margin-top:8px}
 #s3 .col{justify-content:flex-start;padding:calc(60px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
 #s3 h2{font-size:22px;max-width:none;letter-spacing:-.015em}
 #s3 .ey{margin-bottom:10px}
 .svacc{gap:7px;flex:1 1 auto;height:auto;min-height:300px;max-height:580px;margin-top:clamp(18px,3.5svh,36px);margin-bottom:auto;max-width:none;overflow-x:hidden} /* UNICA regla de layout movil del acordeon: fluye del texto y llena hasta el contador */
 /* FILMSTRIP movil (18-ago): con 14 servicios el reparto flex dejaba tiras de ~9px (ilegibles, intocables).
    Ancho FIJO por tira + fila mas ancha que la pantalla; svCenter() (JS) centra el activo con scrollTo.
    overflow-x HIDDEN a proposito: el recorrido es por gesto horizontal (hstep/ruleta) o tap, NUNCA scroll
    nativo — pan-x nativo + hstep atendiendo el mismo gesto seria doble manejo. Si cambias el 42/gap 7/64vw,
    actualiza svCenter() que los replica. */
 .sacc{border-radius:14px;flex:0 0 42px;transition:flex-basis .42s var(--ease)} /* .75->.42: flex-basis es animacion de LAYOUT (cara en movil); mas corta = menos jank y paso mas crisp */
 .sacc.on{flex-basis:min(64vw,250px)}
 .sacc .si{top:11px}
 .sacc .si svg{width:14px;height:14px}
 .sacc.on .si{left:12px}
 .sacc-vt{font-size:10.5px;bottom:13px}
 .sacc-tx{padding:11px 12px}
 .sacc-tx h3{font-size:13.5px;white-space:normal}
 .sacc-tx p{font-size:10px;line-height:1.35;margin-top:3px;-webkit-line-clamp:3}
 #s4 .ph{left:5%;top:9%;width:60%;height:34%}
  #s4 .oh{left:5%;bottom:auto;top:47%;max-width:90%}
 #s4 .steps.fan{position:relative;inset:auto;right:auto;left:auto;top:auto;transform:none;width:auto;min-height:0;height:clamp(180px,25vh,210px);margin:24px 20px calc(62px + env(safe-area-inset-bottom))}
 .ostep p{display:none}
 .fan .ostep{width:min(76vw,306px);padding:10px 14px}
 .fan .ostep:nth-child(1){transform:skewY(-6deg) translate(-16%,-118%)}
 .fan .ostep:nth-child(2){transform:skewY(-6deg) translate(-5.5%,-39%)}
 .fan .ostep:nth-child(3){transform:skewY(-6deg) translate(5.5%,39%)}
 .fan .ostep:nth-child(4){transform:skewY(-6deg) translate(16%,118%)}
 .fan .ostep h4{margin:4px 0 0;font-size:13.5px}
 .fan .ostep .oh2{margin-bottom:5px}
 #s6 .ph{left:0;top:0;height:34%}
 #s6 .ph::after{background:linear-gradient(to top,#081626,rgba(8,22,38,.25))}
 #s6 .col{width:100%;top:30%;justify-content:flex-start}
 .ng{grid-template-columns:1fr 1fr;gap:18px}
 #s2 .panel{max-width:none;margin:0}
 #s0 h1{font-size:clamp(34px,9vw,52px)}
}
/* ===== VIDA LIMPIA (Renata pass) ===== */
.slide.live .ey::before{transform-origin:left;animation:eyline .9s var(--ease) both .15s}
@keyframes eyline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rail button.on .rd{animation:dotb 2.6s ease-in-out infinite}
@keyframes dotb{50%{box-shadow:0 0 0 6px rgba(5,176,222,.14)}}
#s0 .mote{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(220,242,255,.8);filter:blur(1px);opacity:0;animation:mote 11s linear infinite}
@media(max-width:920px){#s0 .mote{display:none}} /* particulas decorativas fuera en movil: 9 animaciones infinitas con blur componiendo de fondo todo el tiempo */
@keyframes mote{0%{transform:translateY(30px);opacity:0}12%{opacity:.16}82%{opacity:.12}100%{transform:translateY(-46vh);opacity:0}}
@keyframes floaty{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.02) translateY(-7px)}}
.rcard{transition:transform .35s var(--ease),border-color .35s}
.rcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26)}
/* precision: radios y ritmo sellados */
#s2 .panel{border-radius:20px}
#s3 .sg{border-radius:20px}
.ostep{border-radius:14px}
.rcard{border-radius:14px}
#s4 .ph{border-radius:18px}
.srow .sd{max-width:52ch}
#s0 h1{text-wrap:balance}
#s2 h2,#s3 h2,#s4 h2,#s5 h2,#s6 h2{text-wrap:balance}
/* pase quisquilloso móvil */
@media(max-width:920px){
 #s0 .wrap{justify-content:flex-start;padding-top:calc(88px + env(safe-area-inset-top));padding-bottom:calc(52px + env(safe-area-inset-bottom))}
 #s0 .ey{margin-top:auto}
 #s0 .sub{margin-top:13px}
 #s0 .insrow{margin-top:auto}
 #s0 h1{font-size:clamp(28px,8vw,40px)}
 #s0 .sub{font-size:13.5px;max-width:42ch}
 #s0 .ey{font-size:9.5px;letter-spacing:.16em;margin-bottom:13px}
 #s0 .cue{display:none}
 #s0 .acts{margin-top:14px;gap:8px 30px}
 .insrow{margin-top:22px;max-width:none}
 .inslogo{height:22px !important}
 .instrack{gap:32px}
 #s0 .hx-frame img{object-position:66% 40%}
 #s0 .hx-hint{bottom:calc(52px + env(safe-area-inset-bottom))}
 #s0 .hx-title img{width:min(76vw,330px)}
 #s0 .hx-title .ht-mark{width:min(18vw,72px);margin-bottom:9px}
 #s2 .panel{padding:24px 20px}
 .ng{gap:16px 14px}
 .nc .l{font-size:11.5px}
 .srow .sd{padding-right:10px}
 #s4{background:radial-gradient(ellipse 130% 90% at 30% 6%,#0d2b47 0%,#081a30 46%,#050d1b 100%)}
 #s4 .ph{position:relative;inset:auto;left:0;top:0;width:100%;height:25vh;border-radius:0;border:none;box-shadow:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%)}
 #s4 .ph::after{display:none}
 #s4 .oh{position:relative;left:0;top:auto;bottom:auto;max-width:none;padding:16px 18px 0}
 #s4 .ol{font-size:11.5px;line-height:1.4;max-width:none}
   #s4 .oh{margin-top:2px}
 #s4 .steps{position:relative;inset:auto;transform:none;width:auto;margin:14px 18px calc(72px + env(safe-area-inset-bottom));gap:10px}
 .ostep{padding:13px 14px}
 .ostep h4{font-size:14px}
 .c-count{bottom:calc(18px + env(safe-area-inset-bottom))}
 /* la guia vive en el CARRIL del contador (chrome reservado): contador a la izq, guia a la der */
 .ghint{font-size:9.5px;margin-top:7px;letter-spacing:.15em}
}
/* pase estetico: logo oficial, alineaciones, auras */
:root{--brand:#31448f}
.ng .nc{border-left:1px solid rgba(255,255,255,.09);padding-left:18px}
.ng .nc:nth-child(3n+1){border-left:none;padding-left:0}
@media(max-width:920px){.ng .nc{border-left:none;padding-left:0}.ng .nc::before{width:22px}.aura{display:none}}
/* auras ambientales por slide (profundidad, no decoracion) */
.aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
#s0 .aura{left:-8%;bottom:-12%;width:56vmin;height:56vmin;background:rgba(5,176,222,.14)}
#s2 .aura{left:2%;top:12%;width:52vmin;height:52vmin;background:rgba(49,68,143,.22)}
#s4 .aura{right:-6%;bottom:-10%;width:60vmin;height:60vmin;background:rgba(47,150,220,.12)}
#s5 .aura{left:30%;bottom:-14%;width:64vmin;height:64vmin;background:rgba(5,176,222,.10)}
#sh .aura{display:none} /* sin estilo propio renderizaba un rectangulo fantasma de bordes duros arriba-izquierda (auditoria 26-ago) */
#s6 .aura{left:-6%;top:-8%;width:50vmin;height:50vmin;background:rgba(49,68,143,.2)}
.langsel-btn>svg:first-child{color:#8fa3e8}
/* proteccion permanente del chrome superior */
.topshade{position:fixed;left:0;right:0;top:0;height:110px;z-index:62;pointer-events:none;background:linear-gradient(to bottom,rgba(4,13,24,.58),rgba(4,13,24,.22) 60%,transparent)}
/* ===== MOVIL: deck apilado igual que desktop (las transiciones VIVEN aqui) ===== */
@media (max-width:920px){
 #stage{position:fixed;inset:0;height:var(--vh);overflow:hidden}
 .slide{height:var(--vh)}
}
/* reseñas móvil: horizontal puro y fluido; vertical pasa al deck */
@media (max-width:920px){
 .rscroll{touch-action:pan-x;scroll-snap-type:none;overscroll-behavior-x:contain}
 .rcard{transition:none}
}
/* transicion scroll-linked movil: velo por slide */
.veil2{position:absolute;inset:0;z-index:40;pointer-events:none;background:linear-gradient(180deg,#060f1e,#04101e);opacity:0}
/* mini-hints de interaccion (discretos, se desvanecen al primer uso) */
.hintp{position:absolute;z-index:45;display:flex;flex-direction:column;align-items:center;gap:7px;font:700 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:rgba(214,236,250,.5);pointer-events:none;transition:opacity .6s;white-space:nowrap}
.hintp svg{width:14px;height:14px;color:rgba(160,220,245,.7);animation:hup 1.8s ease-in-out infinite}
@keyframes hup{0%,100%{transform:translateY(3px);opacity:.35}50%{transform:translateY(-3px);opacity:.9}}
.hintp.off{opacity:0}
@media(min-width:921px){.hintp{display:none}}
/* ===== resenas: pila de cartas scroll-driven (patron 21st.dev, brand SM) ===== */
.rscroll{display:block;position:relative;overflow:visible;height:clamp(300px,46vh,430px);max-width:480px;margin:14px auto 0;padding:0;scroll-snap-type:none;touch-action:auto}
.rcard{position:absolute;left:50%;top:0;width:min(88vw,440px);margin-left:max(-44vw,-220px);transition:none;box-shadow:var(--glass-edge),0 34px 90px -24px rgba(0,6,16,.72)}
.rcard:hover{transform:none;border-color:var(--brd)}
@media(max-width:920px){.rscroll{height:min(48svh,430px);margin-top:clamp(16px,3svh,34px);margin-bottom:auto}
 #s5 .wrap{justify-content:flex-start!important;padding-top:calc(60px + env(safe-area-inset-top))}}
/* ===== ORBITAL de oncologia (RadialOrbitalTimeline, brand) ===== */
#s4 .steps.fan,.fan .ostep{display:none}
.orbit{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:44%;height:82%;display:grid;place-items:center;touch-action:none}
.orb-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;--r:150px}
.orb-ring{position:absolute;left:50%;top:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border:1px solid rgba(120,200,245,.16);border-radius:50%}
.orb-ring::after{content:"";position:absolute;inset:-14px;border:1px dashed rgba(120,200,245,.08);border-radius:50%}
.orb-core{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#7fe6ff,#0a92c4 55%,#065a86);display:grid;place-items:center;box-shadow:0 0 34px -4px rgba(47,190,240,.6);z-index:3}
.orb-core b{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.orb-core i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(140,220,255,.5);animation:orbping 2.6s ease-out infinite}
.orb-core i:nth-child(2){animation-delay:1.3s}
@keyframes orbping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.onode{position:absolute;left:50%;top:50%;background:none;border:none;padding:0;cursor:pointer;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;transition:opacity .5s}
.on-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(8,24,42,.9);border:1.5px solid rgba(120,200,245,.45);color:#8fe0ff;box-shadow:0 8px 22px -8px rgba(0,8,20,.8);transition:transform .35s var(--ease),background .35s,border-color .35s,box-shadow .35s}
.on-dot svg{width:20px;height:20px}
.onode.new .on-dot::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--cyan2);box-shadow:0 0 0 3px rgba(5,176,222,.25)}
.on-lbl{font:700 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;color:rgba(226,242,252,.82);white-space:nowrap;text-shadow:0 1px 6px rgba(3,10,22,.8)}
.onode.on .on-dot{transform:scale(1.28);background:var(--cyan2);border-color:#bfeeff;color:#04121f;box-shadow:0 0 30px -4px rgba(5,176,222,.7)}
.onode.on .on-lbl{opacity:0}
.onode.dim{opacity:.32}
.orb-detail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);width:min(74%,260px);background:rgba(6,18,34,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--brd);border-radius:16px;padding:15px 17px;box-shadow:0 30px 70px -28px rgba(0,6,16,.85),inset 0 1px 0 var(--brdT);opacity:0;visibility:hidden;transition:.4s var(--ease);z-index:12;pointer-events:none}
.orbit.open .orb-detail{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.orb-detail .od-badge{display:none;font:800 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:#5fd6f4;border-bottom:1.5px solid var(--cyan2);padding:0 0 3px;margin-bottom:9px;width:max-content}
.orbit.open.is-new .orb-detail .od-badge{display:inline-block}
.orb-detail .od-title{font:600 16px/1.15 'Sora',system-ui,sans-serif;color:#f4f9fd}
.orb-detail .od-desc{font:400 12px/1.5 'Inter',system-ui,sans-serif;color:rgba(224,238,250,.72);margin-top:7px}
.orbit.open .orb-core,.orbit.open .orb-ring{opacity:.25;transition:opacity .4s}
@media(max-width:920px){
 .orbit{position:relative;inset:auto;right:auto;top:auto;transform:none;width:auto;height:clamp(238px,38vh,300px);margin:0 16px calc(46px + env(safe-area-inset-bottom))}
 .orb-stage{--r:98px}
 .orb-core{width:50px;height:50px}
 .on-dot{width:46px;height:46px}
 .orb-detail{width:min(80%,240px)}
}

/* ===== SH · NUESTRA HISTORIA ===== */
#sh{background:radial-gradient(ellipse 120% 100% at 24% 22%,#10314f 0%,#0a2038 50%,#060f1e 100%)}
#sh .wrap{justify-content:center}

#sh h2{font-size:clamp(26px,3.6vw,44px);color:#f4f9fd}
.hs-lead{margin-top:14px;font:400 clamp(14px,1.3vw,17px)/1.65 'Inter',system-ui,sans-serif;color:var(--lmut);max-width:56ch}
/* galeria circular 3D de la historia: gira con el dedo (inercia) y en crucero sola */
.hgal{--hcw:236px;--hch:296px;position:relative;margin-top:clamp(20px,2.6vw,36px);height:clamp(310px,40vh,430px);max-width:1080px;width:100%;perspective:1500px;touch-action:pan-y;isolation:isolate;contain:paint} /* isolation+contain: el propio perspective 3D de la galeria a veces se escapa del overflow:hidden del .slide padre durante la transicion trShelf (Historia<->Hospital) — esto fuerza al navegador a recortarla en su propio contexto de composicion */
.hgal-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.hcard{position:absolute;left:50%;top:50%;width:var(--hcw);height:var(--hch);margin:calc(var(--hch)/-2) 0 0 calc(var(--hcw)/-2);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 22px 50px -22px rgba(0,8,20,.65);background:#081c33;pointer-events:none}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hcard .hov{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(0deg,rgba(4,15,30,.95) 0%,rgba(4,15,30,.6) 55%,transparent);}
.hcard .hy{display:block;font:700 clamp(20px,2vw,26px)/1 'Sora',system-ui,sans-serif;color:#7fe0fa;text-shadow:0 1px 14px rgba(5,176,222,.45)}
.hcard .ht{display:block;margin-top:6px;font:500 11.5px/1.45 'Inter',system-ui,sans-serif;color:rgba(230,243,252,.88)}
.hghint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:9px;pointer-events:none;color:rgba(146,216,242,.72);opacity:.9;transition:opacity .6s}
.hghint span{font:700 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(146,216,242,.66)}
.hghint svg:first-child{animation:hgL 2.4s ease-in-out infinite}
.hghint svg:last-child{animation:hgR 2.4s ease-in-out infinite}
@keyframes hgL{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes hgR{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.hgal.used .hghint{opacity:0}
@media(prefers-reduced-motion:reduce){.hghint svg{animation:none!important}}
/* ===== SE · ESPECIALIDADES ===== */
#se{background:radial-gradient(ellipse 130% 100% at 76% 18%,#0e2c49 0%,#081c31 52%,#060f1e 100%)}
#se .wrap{justify-content:center}
#se h2{font-size:clamp(24px,3.2vw,40px);color:#f2f8fc}
.es-lead{margin-top:10px;font:400 clamp(13px,1.2vw,16px)/1.6 'Inter',system-ui,sans-serif;color:var(--lmut)}
/* --- CARRUSEL de especialidades: rueda vertical de chips + tarjetas fotograficas --- */
.spcar{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,3vw,40px);margin-top:clamp(16px,2.2vw,26px);max-width:1040px;align-items:stretch}
.spwheel{position:relative;border-radius:26px;overflow:hidden;background:var(--glass-sheen),rgba(10,48,92,.42);-webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);border:1px solid rgba(255,255,255,.15);box-shadow:var(--glass-edge),var(--glass-lift);min-height:420px}
.spwheel::before,.spwheel::after{content:"";position:absolute;left:0;right:0;height:64px;z-index:5;pointer-events:none}
.spwheel::before{top:0;background:linear-gradient(180deg,rgba(9,34,62,.92),transparent)}
.spwheel::after{bottom:0;background:linear-gradient(0deg,rgba(9,34,62,.92),transparent)}
.spchips{position:absolute;inset:0;display:grid;place-items:center}
.sphint{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;color:rgba(146,216,242,.72);opacity:.9;transition:opacity .6s}
.sphint span{font:700 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl;color:rgba(146,216,242,.66)}
.sphint svg:first-child{animation:sphUp 2.4s ease-in-out infinite}
.sphint svg:last-child{animation:sphDn 2.4s ease-in-out infinite}
@keyframes sphUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes sphDn{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.spwheel.used .sphint{opacity:0}
@media(prefers-reduced-motion:reduce){.sphint svg{animation:none!important}}
body.day .sphint{color:rgba(11,73,116,.55)}
body.day .sphint span{color:rgba(11,73,116,.5)}
.spchip{position:absolute;display:inline-flex;align-items:center;padding:10px 6px;border:none;background:none;color:rgba(235,246,253,.48);font:600 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .5s,color .45s,font-size .45s;will-change:transform,opacity}
.spchip span{position:relative;padding-bottom:7px}
.spchip span::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:linear-gradient(90deg,var(--cyan2),rgba(5,176,222,.15));transition:right .5s var(--ease)}

.spchip:hover{color:#fff}
.spchip.on{color:#fff;font-size:15px;letter-spacing:.14em}
.spchip.on span::after{right:0}
.spstage{position:relative;min-height:380px;display:grid;place-items:center}
.spcard{position:absolute;width:min(100%,340px);aspect-ratio:4/5;max-height:100%;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 70px -28px rgba(0,8,20,.7);transition:transform .7s cubic-bezier(.3,1.15,.45,1),opacity .55s;will-change:transform,opacity;pointer-events:none}
.spcard img{width:100%;height:100%;object-fit:cover;transition:filter .6s;display:block}
.spcard .spov{position:absolute;inset:auto 0 0 0;padding:56px 18px 16px;background:linear-gradient(to top,rgba(3,10,20,.9),rgba(3,10,20,.35) 62%,transparent);display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .45s .12s}
.spcard .spbadge{display:flex;align-items:center;gap:8px;align-self:flex-start;font:700 9.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#eaf6fd;text-shadow:0 1px 8px rgba(0,6,14,.8)}
.spcard .spbadge::before{content:"";width:18px;height:1.5px;background:var(--cyan2);flex:none}
.spcard .spdes{font:500 14.5px/1.4 'Inter',system-ui,sans-serif;color:#f2f8fc;text-shadow:0 1px 8px rgba(0,6,14,.6)}
.spcard .spwa{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:6px;padding:2px 0 8px;border:none;background:none;position:relative;color:#7fe0fa;font:700 11.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 8px rgba(0,6,14,.7);transition:color .25s}
.spcard .spwa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#05B0DE,rgba(5,176,222,.15))}
.spcard .spwa:hover{color:#b9f0ff}
.spcard.pos-active{transform:none;opacity:1;z-index:6;pointer-events:auto}
.spcard.pos-active img{filter:none}
.spcard.pos-active .spov{opacity:1}
.spcard.pos-prev{transform:translateX(-16%) scale(.85) rotate(-3deg);opacity:.35;z-index:4}
.spcard.pos-next{transform:translateX(16%) scale(.85) rotate(3deg);opacity:.35;z-index:4}
.spcard.pos-prev img,.spcard.pos-next img{filter:grayscale(1) blur(2px) brightness(.72)}
.spcard.pos-hidden{transform:scale(.7);opacity:0;z-index:1}
/* dia */
body.day .spwheel{background:linear-gradient(158deg,rgba(255,255,255,.6),rgba(255,255,255,.25) 46%),rgba(140,196,232,.45);border-color:rgba(13,43,71,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -20px rgba(25,55,90,.4)}
body.day .spwheel::before{background:linear-gradient(180deg,rgba(214,233,247,.95),transparent)}
body.day .spwheel::after{background:linear-gradient(0deg,rgba(214,233,247,.95),transparent)}
body.day .spchip{color:rgba(13,43,71,.5)}
body.day .spchip:hover{color:#0d2b47}
body.day .spchip.on{color:#0d2b47}
body.day .spchip span::after{background:linear-gradient(90deg,#0487b8,rgba(4,135,184,.2))}
body.day .spcard{border-color:rgba(13,43,71,.18)}
/* ===== FORMULARIO CONTACTO ===== */
/* --- tarjetas de accion (jerarquia: WhatsApp primero) --- */
.cacts{display:flex;flex-direction:column;gap:11px;margin-top:clamp(20px,2.6vw,30px);max-width:420px}
.acard{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:15px;background:var(--glass-sheen),rgba(6,20,36,.5);-webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);border:1px solid rgba(255,255,255,.15);box-shadow:var(--glass-edge),var(--glass-lift);transition:border-color .25s,transform .25s,background-color .25s}
.acard:hover{transform:translateY(-2px);border-color:rgba(94,214,242,.5)}
.acard .ai{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#7fe0fa}
.acard .ai svg{width:20px;height:20px}
.acard .at{display:flex;flex-direction:column;gap:2px;min-width:0}
.acard .at b{font:700 13.5px/1.2 'Inter',system-ui,sans-serif;color:#f2f8fc}
.acard .at small{font:500 11px/1.3 'Inter',system-ui,sans-serif;color:rgba(210,230,245,.6)}
.acard .ar{margin-left:auto;color:#5fd6f4;font-size:16px;transition:transform .25s}
.acard:hover .ar{transform:translateX(3px)}
.acard-p{border-color:rgba(5,176,222,.45);background:var(--glass-sheen),rgba(5,176,222,.13)}
.acard-p .ai{background:rgba(5,176,222,.2);border-color:rgba(94,214,242,.45);color:#9fecff}
/* --- tarjeta del formulario (vidrio sobre la foto en desktop) --- */
.fcard{padding:clamp(18px,2.2vw,26px);border-radius:20px;background:var(--glass-sheen),rgba(5,16,30,.66);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.16);box-shadow:var(--glass-edge),0 34px 80px -34px rgba(0,8,20,.7)}
.cf-h{font:600 14.5px/1.3 'Sora',system-ui,sans-serif;color:#eaf6fd;margin-bottom:14px}
.cform{max-width:520px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cf-grid .cf-row:nth-child(3){grid-column:1/-1}
.cf-row{position:relative}
.cf-row input,.cf-row select{width:100%;min-height:40px;padding:14px 2px 8px;border:none;border-bottom:1.5px solid rgba(255,255,255,.22);border-radius:0;background:transparent;color:#f2f8fc;font:500 14px/1.2 'Inter',system-ui,sans-serif;outline:none;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.cf-row select{padding-top:10px;color:rgba(242,248,253,.92);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235fd0ec' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 4px center}
.cf-row select option{color:#0d2b47;background:#fff}
.cf-row input:focus,.cf-row select:focus{border-bottom-color:var(--cyan2)}
.cf-row label{position:absolute;left:2px;top:50%;transform:translateY(-38%);font:500 13px/1 'Inter',system-ui,sans-serif;color:rgba(210,230,245,.5);pointer-events:none;transition:.22s}
.cf-row input:focus+label,.cf-row input:not(:placeholder-shown)+label{top:8px;transform:none;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#5fd0ec}
.cf-send{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:14px 0 15px;border:none;background:none;position:relative;color:#7fe0fa;font:700 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;cursor:pointer;transition:color .25s;min-height:44px} /* area tactil >=44px: es el submit de la pagina de conversion, no puede ser el elemento mas debil */
.cf-send::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#05B0DE,rgba(5,176,222,.15))}
.cf-send:hover{color:#b9f0ff}
.cf-note{margin-top:10px;font:400 10.5px/1.5 'Inter',system-ui,sans-serif;color:rgba(198,220,238,.5);max-width:52ch}
.cf-note a,#s6 .foot a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(146,216,242,.5)}
.cthanks h3{font:600 clamp(20px,2.4vw,26px)/1.2 'Sora',system-ui,sans-serif;color:#f4f9fd}
.cthanks p{margin-top:8px;font:400 14px/1.6 'Inter',system-ui,sans-serif;color:var(--lmut);max-width:44ch}
@media(max-width:920px){
 .hgal{--hch:clamp(216px,32svh,300px);--hcw:calc(var(--hch)*.78);height:auto;flex:1 1 auto;min-height:252px;max-height:404px;margin-top:clamp(14px,3svh,30px);margin-bottom:auto;max-width:none;perspective:1150px} /* UNICA regla movil */
 #sh .wrap{justify-content:flex-start;padding-top:calc(60px + env(safe-area-inset-top))}
 #sh h2{font-size:22px}
 .hs-lead{font-size:13px;margin-top:10px}
 .hgal{min-height:238px}
 .hcard .hy{font-size:16.5px}
 .hcard .ht{font-size:10.5px}
 .hcard .hov{padding:12px 13px 11px}
 .spcar{grid-template-columns:1fr;grid-template-rows:auto minmax(264px,1fr);gap:6px;flex:1 1 auto;min-height:0;max-height:640px;margin-top:clamp(12px,2.5svh,26px);margin-bottom:auto;max-width:none} /* UNICA regla movil */
 .spwheel{min-height:172px;border-radius:18px}
 #se .wrap{justify-content:flex-start;padding-top:calc(60px + env(safe-area-inset-top));padding-bottom:calc(48px + env(safe-area-inset-bottom))}
 #sh .wrap{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
 .spcard{width:auto;height:min(100%,470px);transition:transform .45s cubic-bezier(.3,1.1,.45,1),opacity .35s} /* height-driven en movil: la tarjeta LLENA el escenario (aspect-ratio+max-height no crece en WebKit) · transicion mas corta: el cruce de .7s en cel lento dejaba dos tarjetas fantasma encimadas (video 21-ago) */
 .spcard.pos-prev img,.spcard.pos-next img{filter:grayscale(1) brightness(.72)} /* sin blur en movil: blur(2px) sobre foto en transicion jankeaba el carrusel */
 #se h2{font-size:21px}
 #se .ey{margin-bottom:8px}
 .spwheel::before,.spwheel::after{height:44px}
 .spchip{padding:9px 16px;font-size:11px}
 .spchip.splong.on{font-size:11px;letter-spacing:.06em} /* nombres largos (Cardiologia/Angiologia Clinica e Intervencionista): a 15px desbordaban la rueda en 390px */
 .spstage{min-height:264px}
 .spcard{width:min(58vw,226px)}
 .spcard .spov{padding:44px 14px 12px}
 .spcard .spdes{font-size:12.5px}
 .spcard .spwa{font-size:10px;letter-spacing:.14em}
 /* movil: intercalar el FORM entre las acciones y los datos (display:contents + order) */
 .cgrid{display:flex;flex-direction:column;gap:0;align-items:stretch}
 .cleft,.cright{display:contents}
 #s6 .ey{order:1}#s6 h2{order:2}#s6 .ghint{order:3}
 .cacts{order:4;margin-top:10px;gap:8px;max-width:none}
 .cright .cform,.cright .cthanks{order:5}
 #s6 .cinfo{order:6}
 #s6 .foot{order:7}
 .acard{padding:9px 11px;border-radius:12px}
 .acard .ai{width:30px;height:30px;border-radius:9px}
 .acard .ai svg{width:17px;height:17px}
 .acard .at b{font-size:12.5px}.acard .at small{font-size:9.5px}
 .fcard{padding:10px 12px;border-radius:15px;margin-top:6px}
 .cf-h{font-size:11.5px;margin-bottom:6px}
 .cf-grid{grid-template-columns:1fr;gap:6px}
 .cf-row input,.cf-row select{min-height:32px;font-size:13px}
 .cf-send{margin-top:6px;padding:2px 0 6px}
 .acard .at small{display:none}
 .acard{padding:8px 11px}
 .cf-note{margin-top:4px;font-size:8.5px}
 #s6 .cinfo{margin-top:4px;flex-direction:row;flex-wrap:wrap;gap:2px 14px;font-size:11px}
 #s6 .foot{margin-top:3px;font-size:9px;line-height:1.35}
 /* contacto compacto en movil: todo el paquete (CTAs + form + datos + legal) cabe en un viewport */
 #s6 .ph{display:none} /* en movil la seccion es tipografica: la franjita de foto no aportaba */
 #s6 .col{top:0;padding-top:calc(60px + env(safe-area-inset-top));padding-bottom:calc(46px + env(safe-area-inset-bottom))} /* el legal del pie rozaba el contador 09/09 en 390x660 */
 #s6 h2{font-size:clamp(19px,5vw,22px);max-width:none} /* sin el 14ch del desktop: aqui forzaba 3 lineas y el legal acababa bajo el contador */
 .cthanks h3{margin-top:12px}
}
/* ============================================================
   MODO DIA (celeste) — la misma pagina bañada en cielo claro.
   El intro/recepcion permanece navy (identidad de la llegada).
   ============================================================ */
body.day{background:#cfe4f4}
/* --- fondos de seccion: cielo --- */
body.day #s0{background:linear-gradient(180deg,#dcecf8 0%,#c3dcef 100%)}
body.day #s1{background:radial-gradient(ellipse 120% 100% at 68% 38%,#eef7fd 0%,#cfe6f6 48%,#a9cde5 100%)}
body.day #s3{background:radial-gradient(ellipse 120% 90% at 72% 8%,#eef7fd 0%,#d6e9f7 52%,#bcd8ec 100%)}
body.day #s4{background:radial-gradient(ellipse 130% 110% at 30% 14%,#e8f3fb 0%,#cfe4f4 52%,#b3d2e9 100%)}
body.day #s6{background:#d9eaf7}
/* --- tipografia: tinta navy sobre cielo --- */
body.day h1,body.day h2,body.day h3{color:#0d2b47}
body.day .ey{color:#036d96}body.day .ey::before{background:#0496c0}
body.day #s1 h2,body.day #s2 h2,body.day #s5 h2,body.day #s6 h2{color:#0d2b47}
body.day #s1 .lead,body.day #s2 .nl,body.day #s0 .sub{color:rgba(15,41,68,.74)}
body.day .nc .n{color:#0d2b47}body.day .nc .n i{color:#0487b8}body.day .nc .l{color:rgba(15,41,68,.62)}
body.day .rrate .num{color:#0d2b47}body.day .rrate .rs{color:rgba(15,41,68,.66)}
body.day .ostep h4{color:#0d2b47}body.day .ostep p{color:rgba(15,41,68,.66)}
body.day .oh2 .oi{color:#0487b8}
/* --- chrome sobre cielo --- */
body.day .c-tr nav a{color:#123a5c;opacity:.92}
body.day .c-count{color:rgba(13,43,71,.72)}body.day .c-count .cur{color:#0d2b47}
body.day .ghint{color:rgba(4,114,156,.8)}body.day .ghint::before{background:linear-gradient(90deg,transparent,rgba(4,135,184,.5))}body.day .ghint::after{background:linear-gradient(270deg,transparent,rgba(4,135,184,.5))}
body.day .rail button .rd{background:rgba(13,43,71,.3)}
body.day .rail .rlb{color:rgba(13,43,71,.75)}body.day .rail button.on .rlb{color:#0d2b47}
body.day .sndbtn,body.day .langsel-btn{background-color:rgba(255,255,255,.44);border-color:rgba(13,43,71,.2);color:#0d2b47;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 30px -14px rgba(20,50,80,.35)}
body.day .langsel-menu{background-color:rgba(248,252,255,.72);border-color:rgba(13,43,71,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 54px -22px rgba(20,50,80,.35)}
body.day .langsel-menu .lh2{color:rgba(13,43,71,.55)}
body.day .langopt{color:#0d2b47}
/* --- vidrio dia: hielo blanco --- */
body.day #s2 .panel{background:linear-gradient(158deg,rgba(255,255,255,.7),rgba(255,255,255,.3) 46%,rgba(255,255,255,.12) 74%),rgba(244,250,255,.55);border-color:rgba(13,43,71,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 44px 96px -44px rgba(25,55,90,.4)}
body.day .rcard{background:linear-gradient(158deg,rgba(255,255,255,.85),rgba(255,255,255,.55) 46%),rgba(250,253,255,.97);border-color:rgba(13,43,71,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 50px -20px rgba(25,55,90,.4)}
body.day .rcard .rtx{color:rgba(13,36,60,.9)}body.day .rcard .rn{color:#0d2b47}body.day .rcard .rd{color:rgba(15,41,68,.6)}
body.day .rcard .rfoot{border-top-color:rgba(13,43,71,.12)}
/* --- fotos: se abren a la luz + velos celestes en vez de penumbra --- */
body.day .hx-ext img,body.day .hx-frame img,body.day .sacc img{filter:brightness(1.07) saturate(1.02)}
body.day #s2 .ph img,body.day #s5 .ph img,body.day #s6 .ph img{filter:brightness(1.55) saturate(.6) contrast(.92)} /* los fondos duotono navy se lavan fuerte en dia: el chrome navy vuelve a leerse */
body.day .c-tr nav a,body.day .c-count{text-shadow:0 1px 10px rgba(255,255,255,.8),0 0 22px rgba(255,255,255,.5)} /* halo claro: nav y pager legibles aunque caigan sobre zona oscura de foto */
body.day #s0 .hx-ext::after{background:linear-gradient(180deg,rgba(226,240,251,.3) 0%,rgba(226,240,251,.04) 30%,rgba(226,240,251,.12) 72%,rgba(216,234,248,.88) 100%)}
/* velo DIRECCIONAL editorial: el texto vive sobre celeste casi solido a la IZQ; la foto respira a la DER */
body.day #s0 .hx-veil{opacity:.94;background:linear-gradient(96deg,#e2f0fa 0%,rgba(226,240,251,.94) 34%,rgba(226,240,251,.55) 58%,rgba(226,240,251,.06) 86%),linear-gradient(180deg,rgba(226,240,251,.25),rgba(226,240,251,0) 26%,rgba(220,236,249,.55) 82%,#d8eaf8 100%)}
body.day .scrim{background:linear-gradient(to bottom,rgba(222,238,250,.82),rgba(222,238,250,0) 22%),linear-gradient(to top,rgba(222,238,250,.78),rgba(222,238,250,.46) 46%,rgba(222,238,250,.6))} /* banda clara arriba: la nav navy vive ahi */
body.day #s2 .scrim{background:linear-gradient(to bottom,rgba(222,238,250,.85),rgba(222,238,250,0) 24%),linear-gradient(90deg,rgba(226,240,251,.72),rgba(226,240,251,.28) 60%)}
body.day .ph img{filter:brightness(1.42) saturate(.72)} /* las fotos duotono navy se lavan a tono medio en dia: el chrome navy (nav, pager, rail) vuelve a leerse encima */
body.day .rail .rlb{text-shadow:0 1px 8px rgba(255,255,255,.85)}
body.day .rail button .rd{background:rgba(13,43,71,.5);box-shadow:0 0 0 2px rgba(255,255,255,.4)} /* dots del rail visibles sobre foto en dia */
/* scrim2 (pie de los strips de servicios) SE QUEDA oscuro en dia: los captions blancos viven sobre el */
body.day #s5 .scrim{background:linear-gradient(to bottom,rgba(226,240,251,.82),rgba(226,240,251,0) 22%),linear-gradient(to top,rgba(226,240,251,.86),rgba(226,240,251,.5))}
body.day #s6 .ph::after{background:linear-gradient(90deg,#d9eaf7,rgba(217,234,247,.32) 35%,rgba(217,234,247,0))}
body.day #s0 .hx-hint{color:rgba(13,43,71,.75)}body.day #s0 .hx-hint .ms{border-color:rgba(13,43,71,.45)}
/* --- orbital sobre cielo --- */
body.day .orb-ring{border-color:rgba(6,80,120,.28)}body.day .orb-ring::after{border-color:rgba(6,80,120,.14)}
body.day .on-lbl{color:#0d2b47;text-shadow:0 1px 6px rgba(255,255,255,.7)}
body.day .orb-detail{background:rgba(242,249,254,.96);border-color:rgba(13,43,71,.16);box-shadow:0 26px 60px -26px rgba(25,55,90,.5),inset 0 1px 0 rgba(255,255,255,.95)} /* panel claro en dia: el texto navy era invisible sobre el navy nocturno */
body.day .orb-detail .od-title{color:#0d2b47}body.day .orb-detail .od-desc{color:rgba(15,41,68,.7)}
body.day #s4 .ph{box-shadow:0 40px 100px -40px rgba(25,55,90,.5);border-color:rgba(13,43,71,.12)}
body.day #s4 .ph video{opacity:.92;filter:saturate(1.05) brightness(1.42)} /* iba a .62/1.08 (case sin cambio vs el original oscuro) mientras el resto de fotos aclara a brightness(1.42) en dia — la celula quedaba perdida (pedido de Lalo 18-ago) */
body.day #s4{background:radial-gradient(ellipse 130% 110% at 30% 14%,#dcebf7 0%,#cde3f3 55%,#b6d4ea 100%)} /* sin "nube" blanca central */
/* --- servicios --- */
body.day .sacc{border-color:rgba(13,43,71,.14);box-shadow:0 24px 60px -24px rgba(25,55,90,.45),inset 0 1px 0 rgba(255,255,255,.35)}
/* --- hero wordmark: sombra reforzada para vivir sobre foto abierta --- */
body.day #s0 .hx-title img{filter:drop-shadow(0 3px 22px rgba(6,18,34,.9)) drop-shadow(0 1px 6px rgba(6,18,34,.75))}
body.day #s0 .hx-frame{box-shadow:0 44px 110px -34px rgba(25,55,90,.55)}
/* --- correcciones de contraste dia (loop de discernimiento) --- */
body.day #s0 h1{color:#0d2b47;text-shadow:0 2px 22px rgba(255,255,255,.6)}
body.day #s0 h1 .ital{color:#0479a6}
body.day #s3 h2{color:#0d2b47}
body.day #s4 h2{color:#0d2b47}
body.day #s4 .ol{color:rgba(15,41,68,.76)}
body.day .btn-p{color:#04729c}body.day .btn-p:hover{color:#035d80}
body.day .btn-g{color:rgba(13,43,71,.85)}body.day .btn-g::after{background:rgba(13,43,71,.35)}body.day .btn-g:hover{color:#0d2b47}
body.day .c-count .plabel{color:#04729c}
body.day .insrow h3{color:rgba(15,41,68,.55)}
body.day .insrow img{filter:brightness(0) invert(.2);opacity:.55} /* siluetas tinta uniformes */
body.day #s6 .cinfo{color:rgba(15,41,68,.76)}body.day #s6 .cinfo b{color:#0d2b47}
body.day #s6 .foot{color:rgba(15,41,68,.45)}
body.day .sacc img{filter:brightness(1.06) saturate(1.0)}
body.day .sacc-tx h3{color:#f2f8fc} /* el caption vive sobre su scrim oscuro, en ambos modos */
body.day .rcard{background:linear-gradient(158deg,rgba(255,255,255,.85),rgba(255,255,255,.55) 46%),rgba(252,254,255,.99)}
/* --- slides nuevos en dia --- */
body.day #sh{background:radial-gradient(ellipse 120% 100% at 24% 22%,#eef7fd 0%,#d3e7f6 50%,#b6d4ea 100%)}
body.day #sh h2{color:#0d2b47}
body.day .hs-lead{color:rgba(15,41,68,.76)}
body.day .hcard{border-color:rgba(13,43,71,.2);box-shadow:0 18px 40px -20px rgba(25,55,90,.45)}
body.day .hghint{color:rgba(11,73,116,.55)}body.day .hghint span{color:rgba(11,73,116,.5)}
body.day #se{background:radial-gradient(ellipse 130% 100% at 76% 18%,#e9f4fb 0%,#d0e5f4 52%,#b3d2e9 100%)}
body.day #se h2{color:#0d2b47}body.day .es-lead{color:rgba(15,41,68,.72)}
body.day .sp{background:rgba(255,255,255,.5);border-color:rgba(13,43,71,.15);color:#0d2b47}
body.day .sp:hover{border-color:rgba(4,150,192,.55);background:rgba(255,255,255,.75)}
body.day .acard{background:linear-gradient(158deg,rgba(255,255,255,.75),rgba(255,255,255,.4) 46%),rgba(248,252,255,.5);border-color:rgba(13,43,71,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 36px -18px rgba(25,55,90,.35)}
body.day .acard .ai{background:rgba(4,150,192,.1);border-color:rgba(13,43,71,.15);color:#0487b8}
body.day .acard .at b{color:#0d2b47}body.day .acard .at small{color:rgba(15,41,68,.6)}
body.day .acard .ar{color:#04729c}
body.day .acard-p{border-color:rgba(4,150,192,.45);background:linear-gradient(158deg,rgba(255,255,255,.8),rgba(255,255,255,.5) 46%),rgba(190,232,247,.55)}
body.day .fcard{background:linear-gradient(158deg,rgba(255,255,255,.72),rgba(255,255,255,.38) 46%),rgba(244,250,255,.5);border-color:rgba(13,43,71,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 30px 70px -30px rgba(25,55,90,.4)}
body.day .cf-h{color:#0d2b47}
body.day .cf-row input,body.day .cf-row select{background:transparent;border-bottom-color:rgba(13,43,71,.3);color:#0d2b47}
body.day .cf-row input:focus,body.day .cf-row select:focus{border-bottom-color:#0487b8}
body.day .cf-row label{color:rgba(15,41,68,.55)}
body.day .cf-send{color:#04729c}body.day .cf-send:hover{color:#035d80}
body.day .cf-send::after{background:linear-gradient(90deg,#0487b8,rgba(4,135,184,.2))}
body.day .cf-note{color:rgba(15,41,68,.5)}
body.day .cthanks h3{color:#0d2b47}body.day .cthanks p{color:rgba(15,41,68,.74)}
/* --- fusiones foto-cielo en movil (sin cortes duros) --- */
@media(max-width:920px){
 /* s0 movil: el velo protege VERTICALMENTE la franja del texto (el wordmark de la pared queda como textura) */
 body.day #s0 .hx-veil{background:linear-gradient(180deg,rgba(226,240,251,.34) 0%,rgba(226,240,251,.86) 27%,rgba(228,241,252,.93) 45%,rgba(228,241,252,.93) 74%,rgba(216,234,248,.88) 100%)}
 body.day #s4 .ph{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 96%)}
 body.day #s6 .ph{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
 body.day #s6 .ph::after{background:linear-gradient(180deg,rgba(217,234,247,0) 40%,rgba(217,234,247,.45) 80%,#d9eaf7 100%)}
}
/* --- boton dia/noche (gemelo del de sonido) --- */
.daybtn .d-moon{display:none}
body.day .daybtn .d-sun{display:none}
body.day .daybtn .d-moon{display:block}
/* ===== VIDRIO BARATO EN MOVIL (auditoria 21-ago): backdrop-filter es el costo #1 de iOS cuando
   algo se anima encima o debajo; en cel se APAGA y se compensa con fondos mas densos.
   El sheen (gradiente) se conserva; el glass real vive en desktop. Va AL FINAL para ganar cascada. */
@media(max-width:920px){
 #s2 .panel,.ostep,.fcard,.spwheel,.acard,.orb-detail,.sndbtn,.langsel-btn{-webkit-backdrop-filter:none;backdrop-filter:none}
 #s2 .panel{background:var(--glass-sheen),rgba(6,20,36,.92)}
 .ostep{background:var(--glass-sheen),rgba(6,20,36,.94)}
 .fcard{background:var(--glass-sheen),rgba(5,16,30,.94)}
 .spwheel{background:var(--glass-sheen),rgba(10,48,92,.88)}
 .acard{background:var(--glass-sheen),rgba(6,20,36,.92)}
 .sndbtn,.langsel-btn{background-color:rgba(13,32,54,.6)}
 body.day #s2 .panel{background:linear-gradient(158deg,rgba(255,255,255,.92),rgba(255,255,255,.74) 46%),rgba(244,250,255,.96)}
 body.day .fcard{background:linear-gradient(158deg,rgba(255,255,255,.92),rgba(255,255,255,.7) 46%),rgba(244,250,255,.96)}
 body.day .acard{background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,.62) 46%),rgba(248,252,255,.94)}
 body.day .sndbtn,body.day .langsel-btn{background-color:rgba(255,255,255,.75)}
 /* targets tactiles (auditoria): "Ver fotos" media 20px de alto, el minimo iOS es 44 */
 .sgal{position:relative}
 .sgal::after{content:"";position:absolute;inset:-14px -10px} /* expande el area de toque sin mover el layout */
 .cf-row input,.cf-row select{min-height:40px}
 .spchip{padding:13px 16px;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s,color .3s,font-size .3s} /* paso de rueda .65s->.3s: es la interaccion mas repetida de la slide */
}
/* ===== BARRA DE ACCIONES MOVIL — SOLO EN LA PORTADA (26-ago-2026, pedido de Lalo) =====
   Urgencias / Agendar / WhatsApp. Vuelve la .mbar que se habia retirado, pero acotada al hero:
   entra con la portada y se va al pasar a la slide 2. El toggle vive en slideState() y el swap
   ocurre BAJO COBERTURA de la transicion, asi que no se ve aparecer/desaparecer.
   Se anima con transform+opacity (no display) para que sea gratis en GPU. */
@media(max-width:920px){
 .mbar{display:grid;opacity:0;pointer-events:none;transform:translateY(110%);transition:opacity .45s var(--ease),transform .45s var(--ease)}
 body.hero-live .mbar{opacity:1;pointer-events:auto;transform:none}
 /* el pager y el "desliza para entrar" suben por encima de la barra (~52px + safe area) */
 body.hero-live .c-count{bottom:calc(66px + env(safe-area-inset-bottom))}
 body.hero-live #s0 .hx-hint{bottom:calc(100px + env(safe-area-inset-bottom))}
 /* hero expandido: la franja de seguros se ancla al fondo del area UTIL (arriba del pager y la
    barra, no encimada con ellos) y se centra como cinturon de confianza (26-ago, reporte de Lalo:
    "abajo se ve todo amontonado") */
 body.hero-live #s0 .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 #s0 .insrow{margin-top:auto;padding-top:16px}
 #s0 .insrow h3{text-align:center}
}