/* STELLA web v2: tokens y base compartida. */
@font-face{font-family:'Raleway';font-weight:100 900;font-style:normal;font-display:swap;src:url(../media/fuentes/raleway-var.woff2) format('woff2')}
@font-face{font-family:'Brooklyn';font-weight:600;font-display:swap;src:url(../media/fuentes/brooklyn-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Brooklyn';font-weight:800;font-display:swap;src:url(../media/fuentes/brooklyn-Heavy.woff2) format('woff2')}

:root{
  --ink:#24262a; --ink2:#5b5e64; --mute:#6b6e74; /* --mute: texto pequeño sobre blanco o niebla, contraste ≥ 4.5:1 */
  --paper:#fff; --mist:#f3f6f9; --sky:#dfeaf4; --line:#e4e8ec;
  --gold:#C5A961; --gold-d:#a88d47; --gold-t:#856d36; /* --gold-t: dorado para texto pequeño sobre claro (≥ 4.5:1) */ --night:#14171b; --night2:#1d2126;
  --sans:'Raleway','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif; /* Raleway desde el 30 oct (según revisión) */
  --brand:'Brooklyn','Avenir Next',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px; --r-s:12px; --wrap:1200px; --gut:clamp(20px,5vw,48px);
  --sh:0 20px 60px -20px rgba(20,23,27,.25);
  --nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
/* Raleway trae números de estilo antiguo por defecto; se fuerzan los de altura uniforme (el shorthand font no reinicia esto) */
*,*::before,*::after{font-feature-settings:"lnum" 1}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* Títulos y contenedores que reciben foco por código (anuncio de vista): sin anillo, no son interactivos */
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
/* Salto al contenido: oculto hasta que recibe foco con el teclado */
.sr.saltar:focus{position:fixed!important;z-index:120;left:16px;top:16px;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;padding:12px 20px;border-radius:999px;background:#fff;color:var(--ink);font:500 15px/1 var(--sans);text-decoration:none;box-shadow:var(--sh)}

/* Tipografía */
.eyebrow{font:600 11.5px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-t);margin:0 0 18px}
.on-dark .eyebrow,.eyebrow.claro{color:var(--gold)}
.titulo{font:300 clamp(34px,6.2vw,76px)/1.04 var(--sans);letter-spacing:-.025em;margin:0 0 22px}
.titulo em,.sub em{font-style:normal;color:var(--gold-d)}
.on-dark .titulo em{color:var(--gold)}
.sub{font:300 clamp(24px,3.4vw,40px)/1.15 var(--sans);letter-spacing:-.02em;margin:0 0 16px}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--ink2);max-width:58ch;margin:0}
.on-dark .lead{color:rgba(255,255,255,.78)}
.nota{font-size:13px;line-height:1.5;color:var(--mute)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;font:500 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;transition:transform .5s var(--ease),background .4s,color .4s,border-color .4s}
.btn:hover{transform:translateY(-2px)}
.btn-oro{background:var(--gold);color:#17191c}
.btn-oro:hover{background:#d3b873}
.btn-claro{background:#fff;color:var(--ink)}
.btn-linea{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.btn-linea:hover{background:rgba(255,255,255,.16)}
.btn-tinta{background:var(--ink);color:#fff}
.btn .flecha{display:inline-block;transition:transform .6s var(--ease)}
.btn:hover .flecha{transform:translateX(4px)}

/* Enlace de acción con filete: mismo lenguaje que las pestañas de Residencias
   (línea fina + tramo dorado que crece). Reemplaza a las píldoras secundarias. */
.trazo{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:0 2px 1px;border:0;background:none;color:inherit;font:500 15px/1.2 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer}
.trazo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.28}
.trazo::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(.18);transform-origin:left;transition:transform .8s var(--ease);z-index:1}
.trazo:hover::before,.trazo:focus-visible::before{transform:none}
.trazo svg,.trazo .flecha{flex:none;width:14px;height:14px;transition:transform .6s var(--ease)}
.trazo .flecha{width:auto;height:auto}
.trazo:hover svg,.trazo:hover .flecha{transform:translateX(4px)}
.trazo.fuerte{font-size:16px;min-height:54px}
.trazo.fuerte::before{transform:scaleX(.42)}
.on-dark .trazo.fuerte,.trazo.fuerte.oro{color:#fff}
@media (prefers-reduced-motion:reduce){.trazo::before,.trazo svg,.trazo .flecha{transition:none}}

/* Secciones */
.seccion{padding:clamp(80px,12vw,160px) 0}
.seccion.niebla{background:var(--mist)}
.seccion.noche{background:var(--night);color:#fff}
.on-dark{color:#fff}

/* Revelado: nunca deja contenido invisible si falla JS */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv,.js .rv:not(.in){opacity:1;transform:none;transition:none}}

/* Navegación */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;transition:background .5s var(--ease),box-shadow .5s,color .5s;color:#fff}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;height:40px}
.nav-logo img{height:46px;width:auto}
.nav-logo .l-oscuro{display:none}
.nav.solida{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line);color:var(--ink)}
.nav.solida .l-claro{display:none}.nav.solida .l-oscuro{display:block}
.nav-links{display:none;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font:500 14px/1 var(--sans);text-decoration:none;opacity:.86;letter-spacing:.01em}
.nav-links a:hover{opacity:1;color:var(--gold)}
.nav-acc{display:flex;align-items:center;gap:10px}
.nav .trazo{min-height:40px;font-size:14px;gap:0}
.menu-btn{width:48px;height:48px;margin-right:-12px;border:0;background:transparent;display:grid;place-items:center}
.menu-btn span{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
@media (min-width:1100px){.nav-links{display:flex}.menu-btn{display:none}.nav.solida{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}}

/* Cajón de menú: hoja completa en teléfono, panel lateral en tableta. Sin desenfoques: relleno sólido. */
.nav-links a[aria-current]{opacity:1;color:var(--gold)}
.cajon-velo{position:fixed;inset:0;z-index:59;background:rgba(10,12,15,.55);opacity:0;transition:opacity .45s var(--ease)}
.cajon-velo.on{opacity:1}
.cajon{position:fixed;top:0;right:0;bottom:0;z-index:60;width:100%;background:var(--night);color:#fff;display:flex;flex-direction:column;gap:clamp(18px,3.4vh,30px);padding:max(14px,env(safe-area-inset-top)) var(--gut) max(22px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;touch-action:pan-y}
.cajon.abierto{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.cajon.arrastra{transition:none}
@media (min-width:600px){.cajon{width:min(440px,100%);box-shadow:-30px 0 80px -30px rgba(0,0,0,.6)}}
.cajon-top{display:flex;justify-content:space-between;align-items:center;min-height:52px}
.cajon-logo{height:40px;width:auto}
.cerrar{position:relative;width:48px;height:48px;margin-right:-12px;border:0;border-radius:50%;background:transparent;color:#fff}
.cerrar span::before,.cerrar span::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1.5px;margin:-.75px 0 0 -10px;background:currentColor;transform:rotate(45deg)}
.cerrar span::after{transform:rotate(-45deg)}
.cerrar:hover{color:var(--gold)}
.cajon-explorar{position:relative;display:flex;align-items:flex-end;min-height:clamp(150px,24vh,210px);border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;background:var(--night2);flex:none}
.cajon-explorar img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;transition:transform 1.2s var(--ease)}
.cajon-explorar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,19,0) 30%,rgba(14,16,19,.85))}
.cajon-explorar:hover img{transform:scale(1.04)}
.cajon-explorar-t{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding:18px 20px}
.cajon-explorar-t b{font:400 26px/1.1 var(--sans);letter-spacing:-.02em}
.cajon-explorar-t small{font-size:14px;color:rgba(255,255,255,.75)}
.cajon-explorar-f{position:absolute;z-index:1;right:18px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--gold)}
.cajon-explorar-f::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-5px 0 0 -7px;border-top:1.5px solid #17191c;border-right:1.5px solid #17191c;transform:rotate(45deg)}
.cajon-explorar[aria-current]{box-shadow:0 0 0 1px var(--gold)}
.cajon-nav ul{list-style:none;margin:0;padding:0}
.cajon-nav li{border-bottom:1px solid rgba(255,255,255,.1)}
.cajon-nav a{position:relative;display:flex;align-items:center;min-height:clamp(54px,7.4vh,66px);font:300 clamp(26px,7vw,34px)/1.1 var(--sans);letter-spacing:-.02em;text-decoration:none;color:rgba(255,255,255,.86);transition:color .3s,padding .5s var(--ease)}
.cajon-nav a:hover{color:#fff}
.cajon-nav a[aria-current]{color:var(--gold);padding-left:18px}
.cajon-nav a[aria-current]::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1.5px;background:var(--gold)}
.cajon-pie{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cajon-pie .trazo{color:#fff;min-width:200px}
.cajon-pie p{margin:0;font-size:13px;color:rgba(255,255,255,.5)}
@media (max-height:640px){.cajon-explorar{min-height:120px}.cajon-nav a{min-height:48px;font-size:24px}}
@media (prefers-reduced-motion:reduce){.cajon,.cajon-velo,.cajon-nav a{transition:none}}

/* Overlay explorador (contenedor; el estilo interno va en explorador.css) */
.overlay{position:fixed;inset:0;z-index:70;background:var(--night);color:#fff;visibility:hidden}
.overlay.abierto{visibility:visible;animation:overlay-in .35s ease-out}
@keyframes overlay-in{from{opacity:.001}}
html.overlay-on,html.overlay-on body{overflow:hidden}

/* Pie */
.pie{background:var(--night);color:rgba(255,255,255,.7);padding:64px 0 40px;font-size:14px}
.pie .wrap{display:grid;gap:28px}
.pie img{height:40px;width:auto}
.pie a{text-decoration:none}.pie a:hover{color:var(--gold)}

.pie-grid{grid-template-columns:1fr;gap:40px!important}
@media (min-width:900px){.pie-grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie-marca p{margin:14px 0 18px;max-width:30ch;color:rgba(255,255,255,.7)}
.pie-marca .trazo{color:#fff}
.pie-marca img{height:52px}
.pie-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-content:start}
.pie-links a{color:rgba(255,255,255,.8)}
.pie-respaldo div{display:flex;align-items:center;gap:26px}
.pie-equus{height:54px!important;filter:invert(1) brightness(1.4)}
.pie-iargo{height:26px!important}.pie-saybe{height:26px!important;width:auto}
/* 10 nov: EQUUS al centro y más grande; IARGO y Saybe a los lados, más pequeños */
.pie-logos{align-items:center}
.pie-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;color:rgba(255,255,255,.5)!important;max-width:none}

/* Explorador cerrado: nada de su contenido puede quedar visible (capas con visibility propia se filtraban) */
.overlay:not(.abierto),.overlay:not(.abierto) *{visibility:hidden!important;pointer-events:none!important}

/* Botón «Pausar videos»: uno por zona con video decorativo; todos comparten el mismo estado */
.ct-vid-pausa{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 13px/1 var(--sans);cursor:pointer;transition:background .3s,border-color .3s}
.ct-vid-pausa:hover{border-color:var(--ink2)}
.ct-vid-pausa:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ct-vid-pausa svg{width:14px;height:14px;flex:none}
.ct-vid-pausa .ico-pausa{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ct-vid-pausa .ico-play{fill:currentColor;display:none}
.ct-vid-pausa[aria-pressed="true"] .ico-pausa{display:none}
.ct-vid-pausa[aria-pressed="true"] .ico-play{display:inline}
.ct-vid-pausa--osc,.apertura-pausa{color:#fff;border-color:rgba(255,255,255,.35)}
.ct-vid-pausa--osc:hover,.apertura-pausa:hover{border-color:rgba(255,255,255,.7)}
.apertura-pausa{position:absolute;z-index:3;right:var(--gut);bottom:max(24px,env(safe-area-inset-bottom));background:rgba(20,23,27,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 30 oct: «Agendar cita» de la cabecera alineado con el menú y con su línea dorada en movimiento constante */
.nav-acc .trazo{min-height:0;padding:12px 2px 11px;font-size:14px;line-height:1;letter-spacing:.01em}
.nav-acc .trazo::before{width:22%;transform:none;animation:cta-barre 3.4s var(--ease) infinite alternate}
.nav-acc .trazo:hover::before,.nav-acc .trazo:focus-visible::before{width:100%;animation:none;transform:none}
@keyframes cta-barre{from{transform:translateX(0)}to{transform:translateX(354.5%)}}
@media (prefers-reduced-motion:reduce){.nav-acc .trazo::before{animation:none}}
/* Raleway es más ancha: títulos con líneas equilibradas para no dejar una palabra sola */
.titulo,.sub{text-wrap:balance}
/* 31 oct: con un visor o el menú abiertos, el fondo de la página es oscuro; así la barra flotante de Safari no deja ver una franja blanca abajo */
html.overlay-on,html.overlay-on body{background:#0e1013}

/* 10 nov: el recorrido 360 del Parque Celeste solo cubre una parte; se oculta hasta tenerlo completo.
   Para volver a mostrarlo, quitar esta regla (los botones siguen en contenido.js y plaza.js). */
[data-p360],.ct-p360{display:none!important}

/* 11 nov (auditoría móvil): objetivos táctiles de 44 px y menos vacío entre secciones */
.nav-acc .trazo{min-height:44px;display:inline-flex;align-items:center}
.pie-links{gap:0 24px}.pie-links a{display:inline-block;padding:11px 0}
@media (max-width:767px){.seccion{padding:56px 0}}
/* 11 nov: cabecera sólida opaca en teléfono/tableta (no se transparenta el texto de abajo) */
@media (max-width:1099px){.nav.solida{background:#fff}}