/* ==========================================================
   V8 · Unificada — estilo V2 (vitrina con movimiento) + subsitios por unidad.
   Colores de marca: ../shared/css/tokens.css. El acento de TODA la página es
   --c-accent (registrado con @property para poder animarlo).

   FONDO (pedido del cliente: V2 se sentía muy oscuro). Herramienta temporal de demo: js/fondo.js
   (en <head>, sin parpadeo) calcula todos los tokens desde un solo color; js/paleta.js es el panel
   de la izquierda (colores predefinidos + color propio, en vivo). data-fondo="claro" en <html> pone
   las secciones de lectura (.tono-claro) en claro. Cuando se elija el color final: fijarlo aquí en
   :root y borrar fondo.js + paleta.js.
   ========================================================== */
@property --c-accent { syntax: '<color>'; inherits: true; initial-value: #0956F5; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  /* Rental usa el MISMO color que Operación Minera (pedido 08-10). Para volver al amarillo propio, borrar esta línea. */
  --c-rental: var(--c-om);
  /* Tema "marino" (recomendado): azul marino de la familia SL, ~15:1 con texto blanco */
  --base: #0B1D3F;
  --bg: var(--base);
  --bg-2: #122A55;
  --shade: #08162F;
  --sl-accent: var(--c-primary);
  --sl-on-accent: var(--c-white);
  /* Mapa claro (diseñador 13-10): continente #F4EFE5, agua #7BD0FF. fondo.js los fija y calcula los textos encima (--map-ink*). */
  --map-bg: #F4EFE5; --map-land: #F4EFE5; --map-water: #7BD0FF;
  --map-ink: #0956F5; --map-ink-2: rgba(11,29,63,.74); --map-ink-3: rgba(11,29,63,.58); --map-label: #0B1D3F; --map-rule: rgba(11,29,63,.16);
  --bar-h: 0px;  /* la barra de unidades se quitó (08-10); se deja en 0 para no tocar los cálculos */
  --fg: var(--c-white);
  --fg-2: color-mix(in srgb, var(--c-white) 76%, transparent);
  --fg-3: color-mix(in srgb, var(--c-white) 56%, transparent);
  --rule: color-mix(in srgb, var(--c-white) 14%, transparent);
  --ai-mix: 72%;   /* cuánto acento lleva el acento-texto (fondo.js lo baja en fondos luminosos) */
  --accent-ink: color-mix(in srgb, var(--c-accent) var(--ai-mix), var(--c-white));  /* acento legible como texto sobre fondo oscuro */
  --on-accent: var(--c-white);   /* texto sobre el acento: blanco con el azul, tinta con los colores claros */
  --header-h: 4.25rem;   /* 68px; en rem para escalar en pantallas grandes */
  --gutter: clamp(1rem, 4vw, 3rem);
  --wrap: 80rem;         /* 1280px */
}
/* Los demás fondos los calcula js/fondo.js a partir de UN color (variables en línea sobre <html>):
   --base, --bg-2, --shade, --fg-2/--fg-3 (opacidad mínima para AA), --rule, --sl-accent, --ai-mix y --map-*.
   Lo de arriba (marino) es solo el respaldo sin JS. */
[data-unidad="ec"] { --u: var(--c-ec); }
[data-unidad="log"] { --u: var(--c-log); }
[data-unidad="om"] { --u: var(--c-om); }
[data-unidad="rental"] { --u: var(--c-rental); }
/* Claro: hero, mapa, unidades y showroom siguen en marino; las secciones de lectura
   (.tono-claro) pasan a fondo claro con texto marino. Los colores claros de unidad
   nunca van como texto aquí: --accent-ink los oscurece mezclándolos con marino. */
[data-fondo="claro"] .tono-claro {
  /* Las secciones claras tienen sus propios colores en el panel "Diseño" (grupo "Secciones claras"):
     fondo --d-claro, títulos --d-claro-titulo, textos --d-claro-texto, botones y bordes --d-claro-linea.
     Por defecto (diseñador 13-10): títulos, botones y bordes en azul SL #0956F5. */
  --bg: var(--d-claro, #F3F6FB); --bg-2: #FFFFFF; --fg: #0B1D3F;
  --fg-2: var(--d-claro-texto, color-mix(in srgb, #0B1D3F 80%, transparent));
  --fg-3: var(--d-claro-texto, color-mix(in srgb, #0B1D3F 64%, transparent));
  --rule: color-mix(in srgb, #0B1D3F 14%, transparent);
  --c-accent: var(--d-claro-linea, #0956F5);
  --on-accent: #FFFFFF;
  --accent-ink: color-mix(in srgb, #0B1D3F 62%, #FFFFFF);
  background: var(--bg); color: var(--fg);
}
[data-fondo="claro"] .circular { --c-accent: var(--c-ec); }
[data-fondo="claro"] .tono-claro :is(h2, h3):not(.contact__form *) { color: var(--d-claro-titulo, #0956F5); }
[data-fondo="claro"] .tono-claro .lead { color: var(--d-claro-texto, #0B1D3F); }
/* Botones de las secciones claras: borde y texto azul; al pasar, relleno azul con texto blanco (diseñador 13-10). */
html[data-fondo="claro"] .tono-claro a.btn:is(.btn--accent, .btn--ghost) { background: transparent; color: var(--d-claro-linea, #0956F5); border: 1.5px solid var(--d-claro-linea, #0956F5); box-shadow: none; }
html[data-fondo="claro"] .tono-claro a.btn:is(.btn--accent, .btn--ghost)::before { background: var(--d-claro-linea, #0956F5); }
html[data-fondo="claro"] .tono-claro a.btn:is(.btn--accent, .btn--ghost):hover { color: #FFFFFF; }
[data-fondo="claro"] .tono-claro .card, [data-fondo="claro"] .tono-claro .pillar, [data-fondo="claro"] .tono-claro .milestones__list li { box-shadow: 0 10px 30px rgba(11,29,63,.07); }
html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; background: var(--bg); }
/* Pantallas grandes (diseñador con 2880 × 1800, 13-10): sobre 1920 px de ancho todo escala en proporción
   (1rem = 16px a 1920 px, 24px a 2880 px), así se ve igual que en un monitor Full HD en vez de quedar
   chico y con espacios vacíos. Bajo 1920 px no cambia nada. */
@media (min-width: 1921px) { html { font-size: max(100%, .8333vw); } }
body { margin: 0; background: var(--bg); color: var(--fg); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.65; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent-ink); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.02; font-weight: 600; }
h1, h2, h3, h4, .t-title { text-transform: uppercase; }   /* Oswald siempre en mayúsculas (indicación del diseñador 08-10) */
p { margin: 0 0 1em; }
strong { font-weight: 600; }
address { font-style: normal; }
figure { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 10000; background: var(--c-white); color: var(--c-ink); padding: .5rem 1rem; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; }

.kicker { display: flex; align-items: center; gap: .7em; margin: 0 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); }
.kicker::before { content: ""; width: 2.25rem; height: 2px; background: var(--c-accent); }
.lead { font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); line-height: 1.45; font-weight: 300; color: var(--fg); }
.chapter-head { position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Número del capítulo en trazo, a continuación de la primera línea del título (diseñador 13-10):
   <h2><span class="ch-l1">Línea 1<span class="chapter-head__num">0N</span></span><br>línea 2</h2> */
.ch-l1 { position: relative; display: inline-block; }
.chapter-head__num { position: absolute; left: 100%; bottom: -.02em; margin-left: .08em; font: 600 2.1em/.8 var(--ff-title); text-transform: uppercase; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--num-c, var(--c-accent)) 70%, transparent); pointer-events: none; user-select: none; }
[data-fondo="claro"] .tono-claro .chapter-head__num { --num-c: var(--d-claro-titulo, #0956F5); }
@media (max-width: 699px) {   /* sin espacio a la derecha: detrás del título, arriba a la derecha */
  .ch-l1 { position: static; }
  .chapter-head { width: auto; }
  .chapter-head__num { left: auto; right: 0; bottom: auto; top: -.45em; margin: 0; z-index: -1; font-size: 1.8em; }
}
.chapter-head h2 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5.4rem); }
.chapter-head__dek { margin: 1.25rem 0 0; font-size: 1.15rem; color: var(--fg-2); max-width: 44rem; }

/* Botones con microinteracción */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 1.5rem; border-radius: 999px; font: 600 .95rem/1 var(--ff-text); text-decoration: none; border: 1.5px solid transparent; overflow: hidden; isolation: isolate; transition: color .3s var(--ease), border-color .3s, transform .3s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); background: var(--c-white); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--c-accent); color: var(--on-accent); }
.btn--accent:hover { color: var(--c-ink); }
.btn--ghost { border-color: color-mix(in srgb, var(--fg) 50%, transparent); color: var(--fg); }
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover { color: var(--bg); border-color: var(--fg); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 900; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--rule); }
.site-header__in { height: var(--header-h); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.brand { flex: none; margin-right: auto; }
.brand img { width: 120px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .65rem; border-radius: 999px; color: var(--fg-2); font-size: .85rem; font-weight: 600; text-decoration: none; transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--fg); background: var(--rule); }
.nav a[aria-current="true"] { color: var(--on-accent); background: var(--c-accent); }

/* Desplegable "Unidades": acceso directo a cada subsitio. Escritorio: panel flotante que abre
   con hover (puntero fino), clic o teclado. Móvil (menú hamburguesa): lista siempre abierta. */
.nav__drop { position: relative; }
.nav__drop-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0 .65rem; border: 0; border-radius: 999px; background: none; color: var(--fg-2); font: 600 .85rem/1 var(--ff-text); cursor: pointer; transition: color .2s, background-color .2s; }
.nav__drop-btn svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav__drop-btn:hover, .nav__drop-btn[aria-expanded="true"] { color: var(--fg); background: var(--rule); }
.nav__drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__drop-btn.is-current { color: var(--on-accent); background: var(--c-accent); }
.nav .nav__sub { display: none; flex-direction: column; gap: .15rem; }
.nav .nav__sub a { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 0; padding: .7rem .8rem; border-radius: 12px; color: var(--fg); font-size: .92rem; white-space: normal; }
.nav .nav__sub a:hover, .nav .nav__sub a:focus-visible { background: color-mix(in srgb, var(--uc, var(--fg)) 14%, transparent); }
.nav .nav__sub a[aria-current="page"] { background: color-mix(in srgb, var(--uc, var(--fg)) 22%, transparent); }   /* subsitios: la unidad en la que se está */
.nav__sub-n { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--uc); color: var(--c-ink); font: 600 .85rem/1 var(--ff-title); text-transform: uppercase; }
.nav__sub-t { display: flex; flex-direction: column; gap: .15rem; line-height: 1.2; }
.nav__sub-t small { font-weight: 400; font-size: .76rem; color: var(--fg-3); }
.nav__sub-all { margin-top: .25rem; padding-top: .35rem; border-top: 1px solid var(--rule); }
.nav .nav__sub-all a { justify-content: space-between; color: var(--fg-2); font-size: .85rem; }
@media (min-width: 1181px) {
  .nav .nav__sub { position: absolute; top: calc(100% + .6rem); left: 50%; width: 22rem; padding: .5rem; transform: translateX(-50%); border-radius: 18px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 24px 60px rgba(0,0,0,.4); z-index: 10; }
  .nav .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }  /* puente para que el hover no se corte */
  .nav__drop.is-open .nav__sub { display: flex; }
}
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .nav__drop:hover .nav__sub { display: flex; }
  .nav__drop:hover .nav__drop-btn svg { transform: rotate(180deg); }
}
@media (max-width: 1180px) {
  .nav__drop-btn { width: 100%; min-height: 48px; font-size: 1.05rem; cursor: default; }
  .nav__drop-btn svg { display: none; }
  .nav .nav__sub { display: flex; padding: 0 0 .5rem .5rem; }
}
.site-header__cta { min-height: 42px; padding: 0 1.1rem; font-size: .85rem; }
.nav-toggle { display: none; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress span { display: block; height: 100%; background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 1180px) {
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--rule); background: none; cursor: pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 2px; background: var(--fg); position: relative; transition: transform .3s var(--ease), background-color .2s; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { position: absolute; inset: 100% 0 auto; max-height: calc(100svh - var(--header-h) - var(--bar-h)); overflow-y: auto; display: none; padding: 1rem var(--gutter) 1.5rem; background: var(--bg); border-bottom: 1px solid var(--rule); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { width: 100%; min-height: 48px; font-size: 1.05rem; }
}
@media (max-width: 479px) { .site-header__cta { display: none; } }

/* ---------- Hero: cuatro columnas de unidades ----------
   El JS (v2.js) interpola --w (0 cerrada · 1 abierta) en cada columna y su flex-grow.
   Solo se animan opacidad y transform: el contenido tiene ancho fijo y no se reacomoda. */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--shade); }
.hero__cols { position: absolute; inset: 0; display: flex; }
.hcol { --w: 0; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; border-right: 1px solid rgba(255,255,255,.1); contain: paint; }
.hcol:last-child { border-right: 0; }
.hcol.is-open { --w: 1; }
.hcol > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - .12 * var(--w))); will-change: transform; }
.hcol__shade { position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--shade) 96%, transparent) 4%, color-mix(in srgb, var(--shade) 25%, transparent) 55%, color-mix(in srgb, var(--shade) 60%, transparent) 100%); }
.hcol__shade::after { content: ""; position: absolute; inset: 0; background: var(--shade); mix-blend-mode: saturation; opacity: calc(.9 * (1 - var(--w))); }
.hcol__shade::before { content: ""; position: absolute; inset: 0; background: var(--shade); opacity: calc(.55 * (1 - var(--w))); }
.hcol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--u); transform-origin: left; transform: scaleX(calc(.22 + .78 * var(--w))); }
/* Etiqueta compacta (cerrada) y contenido completo (abierta), con anchos fijos */
.hcol__label, .hcol__in { position: absolute; left: 0; bottom: 0; padding: clamp(1.25rem, 2.2vw, 2.5rem) clamp(1.25rem, 2.2vw, 2.5rem) clamp(4rem, 8vh, 5.5rem); will-change: opacity, transform; }
.hcol__label { width: 100%; opacity: calc(1 - var(--w) * 1.6); transform: translateY(calc(var(--w) * 14px)); }
.hcol__label span, .hcol__n { display: block; font: 500 .8rem/1 var(--ff-title); text-transform: uppercase; letter-spacing: .14em; color: var(--u); margin-bottom: .6rem; }
.hcol__label strong { display: block; font: 600 clamp(1.1rem, .8rem + 1vw, 1.9rem)/1.02 var(--ff-title); text-transform: uppercase; max-width: 9ch; }
.hcol__in { width: min(46vw, 40rem); opacity: calc(var(--w) * 1.8 - .8); transform: translateY(calc((1 - var(--w)) * 24px)); pointer-events: none; }
.hcol.is-open .hcol__in { pointer-events: auto; }
.hcol__name { font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); line-height: .98; margin-bottom: 1rem; }
.hcol__in p { max-width: 34rem; margin: 0; font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.88); }
.hcol__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; min-height: 46px; padding: 0 1.3rem; border-radius: 999px; background: var(--u); color: var(--c-ink); font-weight: 600; font-size: .92rem; text-decoration: none; transition: gap .25s var(--ease); }
.hcol__go:hover { gap: .9rem; }
/* Guiño a Rental dentro de Operación Minera (13-10): enlace secundario al showroom */
.hcol__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-top: 1.25rem; }
.hcol__acts .hcol__go { margin-top: 0; }
.hcol__more { color: #fff; font-weight: 600; font-size: .92rem; text-decoration: underline; text-decoration-color: var(--u); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hcol__more:hover { color: var(--u); }
.hcol__more:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hcol:focus-within { outline: none; }
.hcol__go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Titular sobre las columnas */
.hero__body { position: absolute; z-index: 2; left: clamp(1rem, 5vw, 7rem); right: clamp(1rem, 5vw, 7rem); top: calc(var(--header-h) + var(--bar-h) + clamp(1.5rem, 5vh, 4rem)); pointer-events: none; }
.hero__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1.1rem; }
.hero__title { font-size: clamp(2.5rem, min(1rem + 6vw, 9.5svh), 8rem); line-height: .9; letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0,0,0,.45); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line__in { display: inline-block; }
.hero__accent { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--c-white); }
.hero__scroll { position: absolute; z-index: 2; right: 1.25rem; top: 50%; display: flex; align-items: center; gap: .75rem; color: var(--fg-3); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-rl; }
.hero__scroll i { width: 1px; height: 64px; background: linear-gradient(var(--c-accent), transparent); }
@media (prefers-reduced-motion: no-preference) { .hero__scroll i { animation: drip 2.2s var(--ease) infinite; transform-origin: top; } @keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } }

/* Móvil: columnas apiladas y abiertas, sin fijar la sección.
   Escritorio sin movimiento (Windows con "Efectos de animación" apagados) mantiene las cuatro
   columnas: hover/clic las abre al instante y la sección no se fija (v2.js). */
@media (max-width: 1023px) {
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero__body { order: -1; position: relative; left: auto; right: auto; top: auto; padding: calc(var(--header-h) + var(--bar-h) + 2rem) var(--gutter) 1.5rem; }
  .hcol__label, .hcol__in { padding-bottom: clamp(1.25rem, 4vw, 2rem); }
  .hero__cols { position: relative; flex-direction: column; }
  .hcol { --w: 1 !important; flex: none !important; height: clamp(18rem, 56svh, 26rem); border-right: 0; border-top: 1px solid rgba(255,255,255,.1); cursor: default; }
  .hcol__label { display: none; }
  .hcol__in { width: 100%; pointer-events: auto; }
  .hero__scroll { display: none; }
}

/* Cifras (bajo el hero) */
.stats { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid var(--rule); }
.stats__grid { display: grid; gap: 2.5rem 4rem; align-items: end; }
.hero__lead { max-width: 40rem; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--fg-2); margin-bottom: 1.75rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; }
.hero__stats > div { border-top: 1px solid var(--rule); padding-top: .9rem; }
.hero__stats dt { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.hero__stats dd { margin: .3rem 0 0; font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem)/1.05 var(--ff-title); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hero__stats .count { white-space: nowrap; }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Nosotros ---------- */
.about__grid { display: grid; gap: 1rem 5rem; }
.about__text p:not(.lead) { color: var(--fg-2); max-width: 62ch; }
.about__cta { margin-top: 2.5rem; }   /* 15-10: un solo botón a sobre-nosotros/ (reemplaza las etiquetas .about__words) */
@media (min-width: 1024px) { .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Unidades (capítulos) ---------- */
.units { position: relative; background: var(--bg); }   /* fondo plano, como la maqueta del diseñador (15-10) */
.units .kicker { color: var(--fg); }   /* texto blanco, línea del color de la unidad */
.units .chapter-head__num { --num-c: var(--c-white); }
.units__head { position: relative; padding-top: clamp(4rem, 8vw, 6rem); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.units__head .chapter-head { margin-bottom: 0; }
.units__head h2 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5.4rem); }
.units__dots { display: none; }
.unit { padding-block: clamp(2.5rem, 6vw, 4rem); }
.unit + .unit { border-top: 1px solid var(--rule); }
.unit__grid { display: grid; gap: 2rem 4rem; align-items: center; }
.unit[data-unit="ec"] { --uc: var(--c-ec); } .unit[data-unit="log"] { --uc: var(--c-log); } .unit[data-unit="om"] { --uc: var(--c-om); }
.unit__n { margin: 0 0 .5rem; font: 600 1.05rem/1 var(--ff-title); text-transform: uppercase; letter-spacing: .12em; color: var(--fg); }
.unit h3 { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); text-transform: uppercase; margin-bottom: 1.25rem; }
.unit__text > p { color: var(--fg-2); font-size: 1.05rem; }
.unit__tags { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* Solo línea con el color de la unidad, sin fondo tenue (diseñador 13-10) */
.unit__tags li { padding: .45em 1em; border-radius: 999px; font-size: .9rem; font-weight: 400; background: none; border: 1.5px solid var(--uc, var(--c-accent)); }
.unit__links { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }   /* OM: los dos enlaces lado a lado (maqueta 15-10) */
.unit__link { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; font-size: 1.1rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--uc, var(--c-accent)); color: var(--fg); }
.unit__media { border-radius: 8.4% / 11.2%; overflow: hidden; aspect-ratio: 4 / 3; }   /* esquinas en proporción a la foto y sin sombra, como la maqueta (15-10) */
.unit__media img { width: 100%; height: 100%; object-fit: cover; }
.unit__media--product { position: relative; overflow: visible; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; padding-block: 2rem; }
.unit__media--product::before { content: ""; position: absolute; inset: -10% -5%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 38%, transparent), transparent); pointer-events: none; }
.is-pinned .unit__media--product { max-height: none; }
.unit__media--product img { width: 100%; height: auto; max-height: min(52vh, 28rem); object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0,0,0,.5)); }
@media (min-width: 1024px) { .unit__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 4vw, 4rem); } }   /* texto ~57 %, foto ~37 % del ancho, como la maqueta (15-10) */

/* Modo fijado (solo escritorio con movimiento) */
.is-pinned .units__pin { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.is-pinned .units__head { padding-top: calc(var(--header-h) + 1.5rem); }
.is-pinned .units__head { align-items: flex-start; }
.is-pinned .units__dots { margin-top: clamp(2.5rem, .6rem + 2.8vw, 2.85rem) !important; }   /* a la altura de la 1.ª línea del título */
.is-pinned .units__head h2 { font-size: clamp(2.4rem, min(.5rem + 4.6vw, 10.5svh), 4.2rem); }   /* título grande (maqueta 15-10); tope en rem: crece con el ancho del contenido */
.is-pinned .units__head .kicker { margin-bottom: .6rem; }
.is-pinned .units__dots { display: flex; list-style: none; margin: 0; padding: 0; gap: .5rem; }
.is-pinned .units__dots li { width: 3.5rem; height: 3px; background: color-mix(in srgb, var(--c-accent) 40%, transparent); border-radius: 3px; overflow: hidden; }
.is-pinned .units__dots li::after { content: ""; display: block; height: 100%; background: var(--c-accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.is-pinned .units__stage { position: relative; flex: 1; }
.is-pinned .unit { position: absolute; inset: 0; display: flex; align-items: flex-start; padding-block: clamp(1.5rem, 9vh - 1rem, 7rem) 0; border: 0; }   /* a una distancia fija del título, no centrado en el alto (maqueta 15-10) */
.is-pinned .unit__media { max-height: min(56vh, 30rem); }
.is-pinned .unit h3 { font-size: clamp(2rem, .4rem + 3.1vw, 2.9rem); margin-bottom: 1rem; }   /* "Logística Integral e Ingeniería" en una línea */
.is-pinned .unit__tags { margin: 1rem 0; }
.is-pinned .units__stage { margin-top: 1rem; }

/* ---------- Territorio (mapa) ---------- */
.territory { position: relative; }
/* Presencia: cabecera clara con foto (diseñador 13-10) */
.territory__intro { padding-block: clamp(4.5rem, 10vw, 7rem); }
[data-fondo="claro"] .territory__intro { --bg: var(--d-claro, #FFFFFF); background: #FFFFFF; }
.territory__head { display: grid; gap: 2rem 4rem; align-items: center; }
.territory__head .chapter-head { margin-bottom: 0; }
.territory__head h2 { font-size: clamp(2.4rem, 1.2rem + 4vw, 4.6rem); }
.territory__media { border-radius: 20px; overflow: hidden; aspect-ratio: 1; max-width: 22rem; box-shadow: 0 24px 60px rgba(11,29,63,.18); }
.territory__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .territory__head { grid-template-columns: minmax(0, 1fr) auto; } .territory__media { width: clamp(16rem, 24vw, 22rem); } }
/* Sobre el mapa los colores salen del mapa, no del fondo del sitio (fondo.js: --map-ink*, claro u oscuro) */
.territory__grid { --fg: var(--map-label); --fg-2: var(--map-ink-2); --fg-3: var(--map-ink-3); --rule: var(--map-rule); --accent-ink: var(--map-ink-2); }
.territory__grid { position: relative; display: grid; }
.map-wrap { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); z-index: 1; }
.map, .map-wrap .map.maplibregl-map { position: absolute; inset: 0; background: var(--map-bg); }  /* maplibre-gl.css fuerza position: relative */
.map__fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: var(--fg-2); pointer-events: none; }
.map.is-ready + .map__fallback { display: none; }
.map__legend { position: absolute; left: .75rem; top: .75rem; z-index: 2; margin: 0; font-size: .68rem; color: var(--fg-3); pointer-events: none; }
.map__legend-ref { display: inline-block; margin-right: .5rem; padding: .15em .6em; border-radius: 999px; background: color-mix(in srgb, var(--c-om) 22%, var(--map-bg)); border: 1px dashed var(--c-om); color: var(--fg); }
.steps { list-style: none; margin: 0; padding: 0 var(--gutter) 40vh; position: relative; z-index: 2; }
.step { max-width: 26rem; margin: 0 0 70vh; padding: 1.5rem; border-radius: 18px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--rule); box-shadow: 0 20px 60px rgba(0,0,0,.35); transition: border-color .4s, transform .4s var(--ease); }
.step:first-child { margin-top: 20vh; }
.step.is-active { border-color: var(--c-accent); }
.step__n { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.step h3 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: .75rem; color: var(--map-ink); }
.step p { color: var(--fg-2); font-size: .98rem; }
.step .step__n { color: var(--map-ink-3); }
.step__note { font-size: .82rem !important; color: var(--fg-3) !important; margin: 1rem 0 0; }
.site { display: grid; gap: .2rem; font-size: .88rem; }
.site strong { font-family: var(--ff-title); font-weight: 500; text-transform: uppercase; font-size: 1.05rem; line-height: 1.15; margin-bottom: .35rem; }
.site a { display: inline-block; padding-block: .2rem; font-weight: 600; color: inherit; }
.route-stages { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; counter-reset: rs; }
.route-stages li { counter-increment: rs; position: relative; padding: .75rem .9rem .75rem 2.8rem; border-radius: 12px; border: 1px solid var(--rule); font-size: .9rem; color: var(--fg-2); transition: border-color .3s, background-color .3s; }
.route-stages li::before { content: counter(rs); position: absolute; left: .85rem; top: .8rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem/1 var(--ff-title); text-transform: uppercase; background: var(--rule); color: var(--fg); transition: background-color .3s; }
.route-stages strong { display: block; color: var(--fg); }
.route-stages li.is-on { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.route-stages li.is-on::before { background: var(--c-accent); color: var(--on-accent); }
@media (min-width: 1024px) {
  .territory__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
  .map-wrap { grid-column: 1 / -1; grid-row: 1; }
  .steps { grid-column: 2; grid-row: 1; padding-right: var(--gutter); padding-left: 0; }
  /* Velo del color del continente a la derecha: limpia nombres y calles bajo el texto en cualquier zoom */
  .map-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 54%, color-mix(in srgb, var(--map-bg) 82%, transparent) 68%, color-mix(in srgb, var(--map-bg) 88%, transparent)); }
  /* Texto sin caja y más grande sobre la zona limpia del mapa (lado de Argentina), diseñador 13-10 */
  .step { max-width: 32rem; padding: 0; background: none; backdrop-filter: none; border: 0; box-shadow: none; }
  .step h3 { font-size: clamp(2.4rem, 1.2rem + 2.4vw, 4rem); margin-bottom: 1rem; }
  .step p { font-size: 1.1rem; }
  .step .step__n { font-size: .8rem; }
}
@media (max-width: 1023px) {
  .map-wrap { height: 56svh; }
  .steps { padding-bottom: 30svh; }
  .step { margin-inline: auto; margin-bottom: 62svh; padding: 1.25rem; background: color-mix(in srgb, var(--map-bg) 92%, transparent); box-shadow: 0 20px 60px rgba(0,0,0,.18); }
  .step:first-child { margin-top: 8svh; }
  .step h3 { font-size: 1.3rem; }
}

/* Mapa: marcadores y popups (MapLibre) */
.mk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-om); border: 3px solid var(--c-white); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 60%, transparent); cursor: pointer; padding: 0; }
.mk:focus-visible { outline: 3px solid var(--c-white); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .mk { animation: ping 2.2s var(--ease) infinite; } @keyframes ping { 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } }
.mk-label { font: 600 .85rem/1 var(--ff-title); letter-spacing: .06em; text-transform: uppercase; color: var(--map-label); text-shadow: 0 0 3px var(--map-bg), 0 0 6px var(--map-bg), 0 0 10px var(--map-bg); pointer-events: none; white-space: nowrap; }
.truck { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--on-accent); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.truck svg { width: 22px; height: 22px; }
.route-tag { padding: .35em .75em; border-radius: 999px; background: var(--map-bg); border: 1.5px solid var(--c-accent); color: var(--map-label); font-size: .75rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); }
.route-tag.is-on { opacity: 1; transform: none; }
/* Globo de la oficina: tarjeta azul SL con texto blanco (diseñador 13-10) */
.maplibregl-popup-content { background: var(--c-primary) !important; color: #FFFFFF; border: 0; border-radius: 14px !important; padding: 1rem 2.2rem 1rem 1rem !important; box-shadow: 0 20px 60px rgba(0,0,0,.5) !important; font: 400 .9rem/1.5 var(--ff-text); }
.maplibregl-popup-content .site { margin: 0; padding: 0; background: none; }
.maplibregl-popup-content .site span { color: rgba(255,255,255,.88); }
.maplibregl-popup-tip { border-top-color: var(--c-primary) !important; border-bottom-color: var(--c-primary) !important; }
.maplibregl-popup-close-button { color: #FFFFFF; font-size: 1.3rem; width: 32px; height: 32px; }
.maplibregl-ctrl-attrib { font-size: .65rem; }
/* El scroll de la página manda: sin el aviso "Ctrl + scroll" / "dos dedos" de cooperativeGestures */
.maplibregl-cooperative-gesture-screen { display: none !important; }
.map__hint { color: var(--fg-2); }
@media (pointer: coarse) { .map__hint { display: none; } }

/* ---------- Línea de tiempo ---------- */
.timeline { position: relative; background: linear-gradient(180deg, var(--bg), var(--bg-2)); padding-block: clamp(4.5rem, 10vw, 8rem); }
.timeline__head h2 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5.4rem); }
.timeline__head .chapter-head { margin-bottom: 2.5rem; }
.timeline__track { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; gap: 3rem; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
.era { position: relative; display: grid; gap: 1.25rem; padding-left: 1.5rem; border-left: 2px solid var(--rule); }
.era::before { content: ""; position: absolute; left: -7px; top: .6rem; width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 25%, transparent); }
.era__year { margin: 0; font: 600 clamp(2.8rem, 1.6rem + 5vw, 6rem)/.9 var(--ff-title); text-transform: uppercase; white-space: nowrap; color: var(--d-titulo, var(--fg)); }   /* llenos, no trazo (diseñador 13-10) */
.era h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); text-transform: uppercase; margin-bottom: .75rem; }
.era__body p { color: var(--fg-2); max-width: 52ch; }
.era__media { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; max-width: 34rem; }
.era__media img { width: 100%; height: 100%; object-fit: cover; }
.timeline__bar { display: none; }

.is-hscroll .timeline { padding-block: 0; }
.is-hscroll .timeline__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--header-h); }
.is-hscroll .timeline__head h2 { font-size: clamp(2rem, 1rem + 3vw, 3.6rem); }
.is-hscroll .timeline__head .chapter-head { margin-bottom: 1.5rem; }
.is-hscroll .timeline__viewport { overflow: visible; }
.is-hscroll .timeline__track { display: flex; gap: 0; width: max-content; max-width: none; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right: 20vw; will-change: transform; }
.is-hscroll .era { width: min(78vw, 64rem); flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.5rem 3rem; padding: 0 4rem 0 2rem; border-left: 0; border-top: 2px solid var(--rule); padding-top: 2.5rem; }
.is-hscroll .era::before { left: 2rem; top: -7px; }
.is-hscroll .era__year { grid-column: 1 / -1; }
.is-hscroll .era__media { align-self: start; }
.is-hscroll .timeline__bar { display: block; margin-top: 2rem; height: 3px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.is-hscroll .timeline__bar span { display: block; height: 100%; background: var(--c-accent); transform-origin: left; transform: scaleX(var(--t, 0)); }

/* ---------- Resto de capítulos (se enriquecen en la siguiente etapa) ---------- */
.cycle { list-style: none; margin: 0 0 3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: c; }
.cycle li { counter-increment: c; padding: .6em 1.1em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-ec) 60%, transparent); font-weight: 600; }
.cycle li::before { content: counter(c) " · "; color: var(--c-ec); }
.cards { display: grid; gap: 1.5rem; }
.card { background: var(--bg-2); border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card h3 { font-size: 1.5rem; text-transform: uppercase; margin: 1.25rem 1.25rem .5rem; }
.card p { margin: 0 1.25rem 1.5rem; color: var(--fg-2); }
@media (min-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
.doc-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-top: 2rem; min-height: 44px; font-weight: 600; }
.doc-link small { color: var(--fg-3); font-weight: 400; }
.safety { text-align: center; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c-primary) 30%, transparent), transparent 70%); }
.safety .kicker { justify-content: center; }
.safety__num { margin: 0; font: 600 clamp(4rem, 17vw, 16rem)/.9 var(--ff-title); text-transform: uppercase; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.safety h2 { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); max-width: 26ch; margin: 1rem auto; }
.safety__src { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.safety__text { max-width: 56ch; margin-inline: auto; color: var(--fg-2); }
.safety { overflow: hidden; isolation: isolate; min-height: 100vh; display: flex; align-items: center; }
.safety__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 40%), color-mix(in srgb, var(--c-primary) 30%, transparent), transparent 60%); transition: background .1s; }
.safety__num.is-odo { display: inline-flex; justify-content: center; line-height: 1; height: 1em; overflow: hidden; }
.odo__col { display: inline-block; position: relative; height: 1em; overflow: hidden; clip-path: inset(0); contain: paint; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.safety__num.is-done .odo__col { -webkit-mask-image: none; mask-image: none; }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { display: block; height: 1em; line-height: 1; }
.odo__sep { display: inline-block; }
/* Sin brillo al terminar (13-10): cada dígito va en una columna recortada, así que el text-shadow salía
   cortado en rectángulos claros ("sombras blancas" que vio el usuario). */
.safety__num.is-done .odo__sep { color: var(--accent-ink); }
.safety__keys { list-style: none; margin: 2.5rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 56rem; }
.safety__keys li { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.2rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-3); font-weight: 600; transition: color .4s, border-color .4s, background-color .4s, transform .4s var(--ease), box-shadow .4s; }
.safety__keys li span { font: 600 .8rem/1 var(--ff-title); text-transform: uppercase; color: var(--fg-3); transition: color .4s; }
.safety__keys li.is-on { color: var(--fg); border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 18%, transparent); transform: translateY(-3px); box-shadow: 0 10px 30px color-mix(in srgb, var(--c-accent) 25%, transparent); }
.safety__keys li.is-on span { color: var(--accent-ink); }
.showroom__soon { padding: 2rem; border-radius: 18px; border: 1px dashed var(--rule); color: var(--fg-2); }
.milestones__list { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; gap: 1rem; }
.milestones__list li { padding: 1.25rem 1.5rem; border-radius: 16px; background: var(--bg-2); border-left: 3px solid var(--c-accent); color: var(--fg-2); }
.milestones__list strong { color: var(--fg); }
@media (min-width: 900px) { .milestones__list { grid-template-columns: 1fr 1fr; } }
/* Logos de clientes (15-10): tarjetas blancas del mismo tamaño; 3 filas y "Ver todos" (lo activa v8.js) */
.clients__title { margin: 0 0 1.25rem; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.clients__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.clients__grid li { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: .4rem .6rem; background: #FFFFFF; border: 1px solid rgba(11,29,63,.1); border-radius: 14px; }
.clients__grid img { width: 100%; height: 100%; object-fit: contain; }
.clients.is-collapsed .clients__grid li:nth-child(n+13) { display: none; }   /* móvil: 6 filas de 2 */
.clients__more { margin-top: 1.25rem; min-height: 44px; padding: .6em 1.4em; border-radius: 999px; font: 600 .95rem/1 var(--ff-text, inherit); background: none; color: var(--d-claro-linea, var(--c-accent)); border: 1.5px solid currentColor; cursor: pointer; }
.clients__more:hover { background: var(--d-claro-linea, var(--c-accent)); color: #FFFFFF; border-color: var(--d-claro-linea, var(--c-accent)); }
@media (min-width: 640px) { .clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .clients.is-collapsed .clients__grid li:nth-child(n+13) { display: grid; } .clients.is-collapsed .clients__grid li:nth-child(n+17) { display: none; } }
@media (min-width: 1024px) { .clients__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } .clients.is-collapsed .clients__grid li:nth-child(n+17) { display: grid; } .clients.is-collapsed .clients__grid li:nth-child(n+19) { display: none; } }
.pillars__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pillar { padding: 2rem 1.5rem; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--rule); }
.pillar h3 { font-size: 1.9rem; text-transform: uppercase; margin-bottom: .75rem; color: var(--accent-ink); }
.pillar p { margin: 0; color: var(--fg-2); font-size: .95rem; }
@media (min-width: 700px) { .pillars__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pillars__list { grid-template-columns: repeat(4, 1fr); } }
.news .sl-news__item { background: var(--bg-2); border-radius: 18px; overflow: hidden; padding-bottom: 1.25rem; border-top: 0; }
.news .sl-news__item > :not(.sl-news__media) { margin-inline: 1.1rem; }
.news .sl-news__badge { margin-top: .75rem; }
.news .sl-news__date, .news .sl-news__excerpt { color: var(--fg-2); }
.news .sl-news__title, .sl-news__title { text-transform: none; font-family: var(--ff-text); font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.news .sl-news__all, .news .sl-news__fallback a { border-radius: 999px; background: var(--c-accent); color: var(--on-accent); }
.news .sl-news__fallback { background: var(--bg-2); }
.news .sl-news__media { overflow: hidden; }
.news .sl-news__img { transition: transform .8s var(--ease); }
.news .sl-news__item:hover .sl-news__img { transform: scale(1.08); }
.news .chapter-head { margin-bottom: 2rem; }
.news-rail { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--side, 1rem); cursor: grab; overscroll-behavior-x: contain; }
.news-rail::-webkit-scrollbar { display: none; }
.news-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.news-rail .sl-news__list { display: flex !important; gap: var(--gap, 20px); width: max-content; padding: 1rem var(--side, 1rem) 1.5rem; }
.news-rail .sl-news__list > li { position: relative; flex: none; width: var(--cw, 280px); scroll-snap-align: start; transform: scale(.93); filter: saturate(.3); transition: transform .5s var(--ease), filter .5s; }
.news-rail .sl-news__list > li::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: color-mix(in srgb, var(--bg) 70%, transparent); pointer-events: none; transition: opacity .5s var(--ease); }
.news-rail .sl-news__list > li.is-active { transform: none; filter: none; }
.news-rail .sl-news__list > li.is-active::after { opacity: 0; }
.news-rail .sl-news__list > li:not(.is-active) { cursor: pointer; }
.news-rail .sl-news__list > li:not(.is-active):hover::after { opacity: .6; }
.news-rail img { -webkit-user-drag: none; pointer-events: none; }
.news-rail .sl-news__fallback { margin-inline: var(--side, 1rem); }
.news-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.news-arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--rule); background: none; color: var(--fg); font-size: 1.2rem; cursor: pointer; transition: background-color .2s, border-color .2s, opacity .2s; }
.news-arrow:hover:not(:disabled) { background: var(--c-accent); border-color: var(--c-accent); color: var(--on-accent); }
.news-arrow:disabled { opacity: .3; cursor: default; }
.news-bar { flex: 1; min-width: 10rem; appearance: none; -webkit-appearance: none; height: 44px; background: transparent; cursor: pointer; --fill: 0%; }
.news-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent) var(--fill), var(--rule) var(--fill)); }
.news-bar::-moz-range-track { height: 4px; border-radius: 4px; background: var(--rule); }
.news-bar::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--c-accent); }
.news-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 14px; margin-top: -5px; border-radius: 14px; background: var(--c-white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.news-bar::-moz-range-thumb { width: 56px; height: 14px; border: 0; border-radius: 14px; background: var(--c-white); }
.news-bar:focus-visible { outline: none; }
.news-bar:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-ink); }
.news-all { font-weight: 600; font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 767px) { .news-all { width: 100%; } }
.news .sl-news__item.is-skeleton { --sl-news-color: var(--rule); }
.news .sl-news__sk { background: linear-gradient(90deg, var(--rule) 25%, var(--bg-2) 50%, var(--rule) 75%); background-size: 200% 100%; }
.faq__grid { display: grid; gap: 1rem 4rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--ff-title); text-transform: uppercase; color: var(--accent-ink); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-2); margin: 0 0 1.25rem; }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.contact { background: var(--bg-2); }
.contact__grid { display: grid; gap: 2.5rem 4rem; }
.contact h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.4rem); margin-bottom: 1.25rem; }
.contact__grid > div > p { color: var(--fg-2); }
.contact__direct { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contact__direct span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.contact__direct a { font: 500 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.2 var(--ff-title); text-transform: uppercase; color: var(--fg); text-decoration: none; word-break: break-word; }
.contact__form { background: var(--c-white); color: var(--c-ink); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.contact__form a { color: var(--c-primary); }
.contact__form :focus-visible { outline-color: var(--c-primary); }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 3.5rem 1.5rem; font-size: .92rem; color: var(--fg-2); }
.site-footer__grid { display: grid; gap: 2.5rem; }
.site-footer__logo { width: 160px; margin-bottom: 1rem; }
.site-footer__title { font-family: var(--ff-text); font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--fg); margin-bottom: 1rem; }
.site-footer__list, .social { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: inherit; display: inline-block; padding-block: .3rem; }
.site-footer a:hover { color: var(--fg); }
.site-footer address { margin-bottom: 1rem; }
.site-footer address strong { color: var(--fg); }
.social { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; padding-bottom: 4rem; border-top: 1px solid var(--rule); font-size: .8rem; }
.site-footer__bottom p { margin: 0; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.3fr repeat(4, 1fr); } }
.more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.more-links .doc-link { margin-top: 0; }

/* ---------- Elementos comunes (shared) ---------- */
body .sl-demo-badge { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left)); }
@media (max-width: 479px) { body .sl-demo-badge__variant { display: none; } }

/* Sin movimiento: todo visible y estático */


/* ---------- Showroom Rental (momento 8) ---------- */
.rental { --c-accent: var(--c-rental); --accent-ink: var(--d-acento, color-mix(in srgb, var(--c-rental) var(--ai-mix), var(--c-white))); --on-accent: var(--c-ink); }
.sr__filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.sr__chip { min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--fg-2); font: 600 .85rem/1 var(--ff-text); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.sr__chip span { margin-left: .35rem; color: var(--fg-3); font-weight: 400; }
.sr__chip:hover { border-color: var(--c-rental); color: var(--fg); }
.sr__chip[aria-pressed="true"] { background: var(--c-rental); border-color: var(--c-rental); color: var(--c-ink); }
.sr__chip[aria-pressed="true"] span { color: color-mix(in srgb, var(--c-ink) 65%, transparent); }
.sr__main { display: grid; gap: 1.5rem; }
.sr__stage { --mx: 50%; position: relative; min-height: clamp(22rem, 58vh, 36rem); display: grid; place-items: center; border-radius: 24px; overflow: hidden; perspective: 1100px; outline: none; touch-action: pan-y;
  background: radial-gradient(circle at var(--mx) 30%, color-mix(in srgb, var(--c-rental) 16%, transparent), transparent 55%), linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg) 92%, var(--c-rental))); border: 1px solid var(--rule); cursor: grab; }
.sr__stage:focus-visible { box-shadow: 0 0 0 3px var(--c-rental); }
.sr__ghost { position: absolute; left: 0; right: 0; top: 8%; margin: 0; text-align: center; font: 600 clamp(4rem, 13vw, 12rem)/.9 var(--ff-title); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-rental) 45%, transparent); pointer-events: none; user-select: none; }
.sr__platform { position: absolute; left: 12%; right: 12%; bottom: 11%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-rental) 45%, transparent), transparent); filter: blur(4px); }
.sr__platform::after { content: ""; position: absolute; inset: 22% 8%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-rental) 55%, transparent); }
.sr__fig { position: relative; z-index: 1; width: min(88%, 44rem); margin: 3rem 0 2.5rem; transform-style: preserve-3d; will-change: transform; }
.sr__fig img { width: 100%; height: auto; max-height: 44vh; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0,0,0,.55)); pointer-events: none; -webkit-user-drag: none; }
.sr__nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1.5px solid var(--rule); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--fg); font-size: 1.2rem; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
.sr__nav:hover { background: var(--c-rental); color: var(--c-ink); border-color: var(--c-rental); }
.sr__nav:active { transform: scale(.94); }
.sr__nav--prev { left: 1rem; } .sr__nav--next { right: 1rem; }
.sr__count { position: absolute; left: 1.25rem; bottom: 1rem; margin: 0; font: 500 .9rem/1 var(--ff-title); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink); }
.sr__src { position: absolute; right: 1.25rem; bottom: 1rem; margin: 0; font-size: .7rem; color: var(--fg-3); }
.sr__panel { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 24px; background: var(--bg-2); border: 1px solid var(--rule); border-top: 4px solid var(--c-rental); }
.sr__type { margin: 0 0 .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.sr__name { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); text-transform: uppercase; margin-bottom: .3rem; }
.sr__year { color: var(--fg-3); font-size: .9rem; margin-bottom: 1.25rem; }
.sr__bars { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.sr__bar { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: baseline; }
.sr__bar-label { font-size: .82rem; color: var(--fg-2); }
.sr__bar strong { font: 600 1.05rem/1.2 var(--ff-title); text-transform: uppercase; }
.sr__bar i { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: var(--rule); overflow: hidden; }
.sr__bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c-rental) 60%, transparent), var(--c-rental)); transform-origin: left; transform: scaleX(var(--v, 0)); animation: sr-bar .9s var(--ease) both; }
@keyframes sr-bar { from { transform: scaleX(0); } }
.sr__specs { margin: 0 0 1.5rem; display: grid; }
.sr__specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--rule); font-size: .88rem; }
.sr__specs dt { color: var(--fg-3); }
.sr__specs dd { margin: 0; font-weight: 600; color: var(--fg); }
.sr__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.sr__pdf { font-size: .85rem; font-weight: 600; }
.sr__rail { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.sr__thumb { width: 100%; height: 100%; display: grid; gap: .2rem; align-content: start; padding: .6rem .7rem .8rem; border-radius: 16px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--c-white) 3%, transparent); color: var(--fg); text-align: left; font: inherit; cursor: pointer; transition: border-color .25s, background-color .25s, transform .25s var(--ease); }
.sr__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; margin-bottom: .3rem; transition: transform .4s var(--ease); }
.sr__thumb:hover { border-color: color-mix(in srgb, var(--c-rental) 60%, transparent); transform: translateY(-3px); }
.sr__thumb:hover img { transform: scale(1.08); }
.sr__thumb[aria-current="true"] { border-color: var(--c-rental); background: color-mix(in srgb, var(--c-rental) 14%, transparent); }
.sr__thumb-type { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.sr__thumb strong { font: 500 .95rem/1.15 var(--ff-title); text-transform: uppercase; }
.sr__note { margin: 1.25rem 0 0; font-size: .8rem; color: var(--fg-3); }
@media (min-width: 1024px) {
  .sr__main { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: stretch; }
  .sr__panel { max-height: min(78vh, 42rem); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 767px) {
  .sr__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .sr__chip { flex: none; }
  .sr__rail { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; }
  .sr__rail li { flex: none; width: 9rem; scroll-snap-align: start; }
  .sr__nav { width: 44px; height: 44px; margin-top: -22px; }
  .sr__src { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sr__bar b { animation: none; } }

/* ---------- Diseño en vivo (HERRAMIENTA TEMPORAL DE DEMO: js/fondo.js + js/paleta.js) ----------
   Variables --d-* que el panel "Diseño" pone en línea sobre <html>. Sin elección (Automático) no
   existen y todo usa el color de siempre. El formulario blanco y la banda de cifras de color ignoran
   títulos y textos (para no dejar blanco sobre blanco); las secciones .tono-claro del modo claro SÍ los usan. */
h1, h2, h3 { color: var(--d-titulo, inherit); }
/* Hero de la portada (diseñador 13-10): fondo del slider #333333 y títulos siempre en blanco
   (no los cambia la pestaña "Títulos" del panel). --shade tiñe los velos de las columnas. */
.hero { --shade: #333333; --d-titulo: #FFFFFF; color: #FFFFFF; }
.lead { color: var(--d-texto, var(--fg)); }
:root .hero__accent, :root .uhero h1 em { -webkit-text-stroke-color: var(--d-titulo, var(--c-white)); }
:root .btn--accent, :root .news .sl-news__all, :root .news .sl-news__fallback a { background: var(--d-btn, var(--c-accent)); color: var(--d-btn-tx, var(--on-accent)); }
:root .sl-form__submit, :root .contact .sl-form__submit { background: var(--d-btn, var(--c-accent)) !important; border-color: var(--d-btn, var(--c-accent)) !important; color: var(--d-btn-tx, var(--on-accent)) !important; }
.contact__form, .uband, .v8f { --d-titulo: initial; --d-texto: initial; }
/* Botones de contacto en contorno (pedido del diseñador: "texto y línea azul, hover azul lleno con texto
   blanco"). Se activa al elegir un color en la pestaña "Contacto" (data-contacto en <html>). */
html[data-contacto] :is(.site-header__cta, a.btn[href$="#contacto"]) { background: transparent; color: var(--d-contacto); box-shadow: inset 0 0 0 2px var(--d-contacto); }
html[data-contacto] :is(.site-header__cta, a.btn[href$="#contacto"])::before { background: var(--d-contacto); }
html[data-contacto] :is(.site-header__cta, a.btn[href$="#contacto"]):hover { color: var(--d-contacto-tx); }
html[data-contacto] :is(.sl-form__submit, .contact .sl-form__submit) { background: transparent !important; color: var(--d-contacto) !important; border: 2px solid var(--d-contacto) !important; transition: background-color .25s, color .25s; }
html[data-contacto] :is(.sl-form__submit, .contact .sl-form__submit):hover { background: var(--d-contacto) !important; color: var(--d-contacto-tx) !important; }


/* ==========================================================
   Hero con slides por unidad (aprobado 14-10, viene de slider-v2/; ver CLAUDE.md → "Sliders")
   ========================================================== */
/* Imágenes: las 3 del slide apiladas; la activa se funde encima (el zoom de la columna va en el contenedor) */
.hcol__media { position: absolute; inset: 0; transform: scale(calc(1.14 - .12 * var(--w))); will-change: transform; }
.hcol__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }
.hcol__media img.is-on { opacity: 1; }

/* Textos: los 3 slides en la misma celda, alineados abajo (el botón no salta) */
.slides { display: grid; }
.slide { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .15s, transform .7s var(--ease) .15s, visibility 0s; }
.hcol__n .hcol__unit { color: #fff; opacity: .8; }

/* Indicador: una barra por slide (la activa se llena en el tiempo del slide), contador y pausa */
.sdots { display: flex; align-items: center; gap: .4rem; margin-top: 1.5rem; }
.sdots > button:not(.sdots__play) { position: relative; width: 2.6rem; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.sdots > button i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; transition: height .2s; }
.sdots > button i::after { content: ""; position: absolute; inset: 0; background: var(--u); transform: scaleX(0); transform-origin: left; }
.sdots > button:hover i { background: rgba(255,255,255,.55); }
.sdots > button[aria-current="true"] i { height: 5px; margin-top: -2.5px; }
.sdots > button[aria-current="true"] i::after { transform: scaleX(1); }
.hcol.is-auto .sdots > button[aria-current="true"] i::after { animation: sfill var(--slide-ms, 5000ms) linear both; }
@keyframes sfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sdots > button:focus-visible, .sdots__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; }
.sdots__count { margin-left: .5rem; font: 500 .8rem/1 var(--ff-title); text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.sdots__count b { color: #fff; font-weight: 600; }
.sdots__play { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: .25rem; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.sdots__play:hover { border-color: var(--u); color: var(--u); }
.sdots__play svg { width: 12px; height: 12px; }
.sdots__play .ic-play { display: none; }
.sdots__play[aria-pressed="true"] .ic-play { display: inline; }
.sdots__play[aria-pressed="true"] .ic-pause { display: none; }

/* Columna cerrada: mini indicador bajo el nombre de la unidad */
.hcol__mini { display: flex; gap: 4px; margin-top: .8rem; }
.hcol__mini i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); transition: background .4s, width .4s var(--ease); }
.hcol__mini i.is-on { width: 24px; background: var(--u); }
@media (max-width: 1023.98px) { .sdots { margin-top: 1.1rem; } }

/* ==========================================================
   Colores definidos (14-10). Antes los calculaba js/fondo.js en cada visita (panel "Diseño" del demo);
   se fijaron aquí tal cual para no bloquear la primera pintura. Valores = los que fondo.js daba por defecto:
   portada azul SL #0956F5, subsitios marino #0B1D3F, secciones claras activadas (data-fondo="claro" en <html>).
   Para probar colores otra vez: los prototipos slider-v2/ y slider-v3/ todavía cargan fondo.js y el panel.
   ========================================================== */
:root {
  --base: #0956F5; --bg-2: #276AF6; --shade: #06389F;
  --fg-2: rgba(255,255,255,0.86); --fg-3: rgba(255,255,255,0.86); --rule: rgba(255,255,255,0.22);
  --sl-accent: #FFFFFF; --sl-on-accent: #0956F5; --ai-mix: 28%;
  --map-bg: #F4EFE5; --map-land: #F4EFE5; --map-water: #7BD0FF;
  --map-ink: #0956F5; --map-ink-2: rgba(11,29,63,.74); --map-ink-3: rgba(11,29,63,.72); --map-label: #0B1D3F; --map-rule: rgba(11,29,63,.16);
}
/* Subsitios (15-10, diseñador): el mismo azul de la portada, ya no el marino #0B1D3F. Antes:
   --base #0B1D3F; --bg-2 #1F2F4E; --shade #071329; --fg-2 .76; --fg-3 .56; --rule .14; --sl-accent var(--c-primary); --ai-mix 72%. */
html[data-unidad] {
  --base: #0956F5; --bg-2: #276AF6; --shade: #06389F;
  --fg-2: rgba(255,255,255,0.86); --fg-3: rgba(255,255,255,0.86); --rule: rgba(255,255,255,0.22);
  --sl-accent: #FFFFFF; --sl-on-accent: #0956F5; --ai-mix: 28%;
}

/* Lenis (scroll suave): copia de shared/vendor/lenis.css, incluida aquí para ahorrar una hoja que bloqueaba la carga (14-10) */
 html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* Hero: la columna inicial ya viene abierta desde el CSS (igual que la deja heroRender en v8.js), así las
   columnas no cambian de ancho cuando carga el JS (CLS 0,24 en escritorio antes del 14-10). */
@media (min-width: 1024px) { .hcol.is-open { flex-grow: 3.6; --w: 1; } }
/* ---------------------------------------------------------- WhatsApp flotante (14-10)
   Antes lo creaba shared/js/demo-badge.js; ahora es un enlace fijo en el HTML (un script menos). */
.sl-wa{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:9990;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#1DA851;color:#fff;box-shadow:0 6px 18px rgba(11,18,32,.25);transition:transform .2s var(--ease,ease)}
.sl-wa:hover{transform:scale(1.07)}
.sl-wa:focus-visible{outline:3px solid var(--c-ink,#0B1220);outline-offset:3px}
.sl-wa svg{width:30px;height:30px}
@media print{.sl-wa{display:none}}