/* ═══════════════════════════════════════════════════════════
   ICM CONSULTING — ESTILOS PRINCIPALES
   Sesión 01: Preloader + Hero
   ═══════════════════════════════════════════════════════════ */

/* 1. TOKENS
   ─────────────────────────────────────────────────────────── */
:root {
  /* Paleta canónica */
  --bg-oscuro:  #0E141D;
  --navy-negro: #141D29;
  --navy:       #163252;
  --blanco:     #FFFFFF;
  --ambar:      #FFA90E;
  --caoba:      #27191C;

  /* Unidad de escala proporcional ("zoom" del diseño en desktops grandes).
     A 1366px de ancho, 100vw/1366 = 1px exacto → todo queda idéntico al
     diseño aprobado (la base es intocable). Por ENCIMA crece proporcional
     al ancho, tope 1.4× (~1900px). Por DEBAJO escala hacia abajo (zoom fiel,
     sin reflow) hasta el piso 0.75px = 1024/1366: a 1025px el diseño llena
     exacto el ancho sin desbordar. A ≤1024 entra el reflow de tablet/móvil,
     que RESETEA --u a 1px (ver `@media (max-width:1024px)`) para usar la
     unidad original con la que se construyó ese reflow. Así el escalado solo
     afecta 1025–1366; base y reflow quedan idénticos al pixel. Cada medida
     que deba escalar se expresa como calc(N * var(--u)). */
  --u: clamp(0.75px, calc(100vw / 1366), 1.4px);

  /* Grid (valores reales del diseño, no redondeados a escala 8px) */
  --margen:     calc(114 * var(--u));

  /* Escala de espaciado (base 8px) */
  --sp-1:  calc(8  * var(--u));
  --sp-2:  calc(16 * var(--u));
  --sp-3:  calc(24 * var(--u));
  --sp-4:  calc(32 * var(--u));
  --sp-6:  calc(48 * var(--u));
  --sp-8:  calc(64 * var(--u));
  --sp-12: calc(96 * var(--u));

  /* Z-index */
  --z-preloader: 200;
  --z-header:     50;
}

/* 2. RESET
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-oscuro);
  color: var(--blanco);
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a        { text-decoration: none; color: inherit; }
ul, ol   { list-style: none; }
button   { border: none; background: none; cursor: pointer; color: inherit; }

/* 3. PRELOADER
   ─────────────────────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  /* Fondo interior levemente más claro que las barras */
  background-color: var(--navy-negro);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity  0.45s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.45s linear;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Marco oscuro: 4 barras posicionadas en los bordes
   (mismo concepto que prototipo01: c-loader-intro__bar)     */
.preloader__bar {
  position: absolute;
  background-color: var(--bg-oscuro); /* más oscuro que el interior */
  z-index: 1;
}

.preloader__bar--top    { top: 0;    left: 0; right:  0; height: clamp(56px, 7vh, 80px); }
.preloader__bar--bottom { bottom: 0; left: 0; right:  0; height: clamp(56px, 7vh, 80px); }
.preloader__bar--left   { top: 0; bottom: 0; left: 0;   width:  clamp(64px, 6vw, 90px); }
.preloader__bar--right  { top: 0; bottom: 0; right: 0;  width:  clamp(64px, 6vw, 90px); }

/* Grupo: SVG animado + SVG CONSULTING  */
.preloader__logo-group {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Contenedor del SVG animado — ancho exacto igual al del logo en el brief */
.preloader__logo {
  width: calc(96 * var(--u));
  color: var(--blanco);
}

/* Paths inicialmente invisibles; GSAP los anima */
.preloader__logo path {
  opacity: 0;
}

/* El triángulo ámbar del logo */
.preloader__logo #icm-M-base {
  fill: var(--ambar);
}

/* SVG CONSULTING — mismo ancho que el isotipo para respetar proporciones del logo */
.preloader__consulting {
  width: calc(96 * var(--u));
  display: block;
  opacity: 0; /* GSAP lo anima */
}

/* Textura de grano sobre el preloader */
.preloader__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url('../media/images/grain-pattern.png');
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* Reduced motion: mostrar logo y CONSULTING de inmediato */
@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader__logo path    { opacity: 1 !important; transform: none !important; }
  .preloader__consulting   { opacity: 0.75 !important; transform: none !important; }
}

/* Navegación interna (no recarga): el preloader NO reproduce el logo;
   queda como velo oscuro PLANO (tampoco barras) que cubre el primer frame y
   se desvanece enseguida (transición tenue; preloader.js gobierna el timing). */
.skip-preloader .preloader__logo-group,
.skip-preloader .preloader__bar { display: none; }

/* Velo de llegada = la MISMA foto (la del menú, ya cacheada por el canvas PIXI;
   es el mismo retrato que el hero en versión ligera): así la transición es
   imagen→imagen y NO se ve el "flash"/fondo navy entre la imagen ampliada del
   menú y la foto del hero. El --arrival-img lo fija el script del <head> antes
   del primer paint; el velo se desvanece cuando el hero ya está decodificado. */
.skip-preloader .preloader {
  background-image: var(--arrival-img, none);
  background-size: cover;
  background-position: center;
}

/* Llegada desde el velo de salida (nav del header): el marco de barras NO
   aparece — el preloader del destino es un cobertor plano, continuo con el
   velo, y solo anima el logo (réplica del `site-transition` de Varagon:
   «cintas sí, bordes no»). La clase la pone el script inline del <head>
   ANTES del primer paint; el flag lo limpia preloader.js. */
.from-veil .preloader__bar { display: none; }

/* Velo de SALIDA (réplica del .c-loader de Varagon): al navegar desde la nav
   del header, el preloader reaparece como cobertor plano — sin logo ni
   barras — y funde a oscuro (transición de opacity ya definida en .preloader)
   antes de dar paso al preloader completo de la página destino. */
.preloader.is-veil .preloader__logo-group,
.preloader.is-veil .preloader__bar { display: none; }

/* 4. HEADER
   ─────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(48 * var(--u)) var(--margen) 0;
  transition:
    opacity   0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* El header solo vive en el slide 0 (hero). Al avanzar se retira hacia
   arriba y cede su lugar al burger. */
.header.is-hidden {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

.header__logo {
  flex-shrink: 0;
}

.header__logo img {
  height: calc(36 * var(--u));
  width: auto;
}

.header__nav__list {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
}

.header__nav__link {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanco);
  opacity: 0.6;
  transition: opacity 0.25s ease;
  position: relative;
  padding-bottom: 2px;
  /* Refuerzo de contraste sobre zonas claras de la foto del hero */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.header__nav__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ambar);
  transition: width 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.header__nav__link:hover {
  opacity: 1;
}

.header__nav__link:hover::after,
.header__nav__link.is-active::after {
  width: 100%;
}

.header__nav__link.is-active {
  opacity: 1;
}

/* 5. HERO
   ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--bg-oscuro);
}

/* — Scrim superior sutil: asegura legibilidad del logo y la nav cuando la
   foto tiene zonas claras (vidrio) en la franja superior. Muy tenue para no
   ensuciar el hero; se desvanece a transparente antes del centro. — */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(170 * var(--u));
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(14, 20, 29, 0.50),
    rgba(14, 20, 29, 0) 100%);
}

/* Inicio: sin velo superior — la foto conserva todos sus colores (se acepta
   el menor contraste del menú; el acento de luz lo da la barra diagonal). Los
   demás heroes (foto tenue sobre oscuro) sí conservan el velo. */
.hero:not([class*="-hero"])::before { content: none; }
.nos-hero::before { content: none; }

/* — Fondo fotográfico — */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  opacity: 1;                    /* foto a color pleno (sin velo) */
}

/* — Único overlay: barra diagonal blanca al 10% (barra.svg, 471×600).
   Realza el espacio diagonal sin tapar el color de la foto. El alto calza el
   hero y el ancho queda proporcional; --bx (hero-lines.js) la desliza muy
   sutilmente con el mouse, en registro con el paralaje de las líneas. */
.hero__band {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --bx: 0%;
  opacity: 0.05;
  background-image: url('../media/images/barra.svg');
  background-repeat: no-repeat;
  background-size: auto 100%;
  /* Borde izquierdo de la barra a x=155 en la base 1366×600 (y=0). Como
     --u = 100vw/1366, calc(155*--u) vale 155px a 1366 y escala con toda la
     composición hasta el tope ×1.4 (~1912px). Tablet/móvil: override en vw. */
  background-position: calc(155 * var(--u)) 0;
  transform: translateX(var(--bx));
  will-change: transform;
}

/* — Textura de grano — */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url('../media/images/grain-big-pattern.png');
  background-size: 300px 300px;
  background-repeat: repeat;
  mix-blend-mode: screen;
}

/* — Líneas animadas (canvas WebGL transparente) — van POR ENCIMA de la foto y
   la banda, bajo el scrim y el titular. */
.hero__lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero__lines canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Triángulo del logo: oculto en este hero (look banda diagonal + líneas). */
.hero__triangle { display: none; }

/* (Velo oscuro inferior-izquierdo retirado por decisión de diseño: la imagen
   se muestra limpia. La legibilidad del titular se apoya en una sombra sutil
   del texto, no en una capa sobre la imagen — ver .hero__title.) */

/* — Triángulo del logo (overlay central) — */
.hero__triangle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.hero__triangle img {
  height: 100%;
  width: auto;
  display: block;
}

/* — Contenido principal — */
.hero__content {
  position: absolute;
  bottom: var(--sp-12);
  left: var(--margen);
  z-index: 5;
}

.hero__title {
  font-family: "argent-cf", Georgia, serif;
  font-weight: 100;
  font-size: calc(48 * var(--u));
  line-height: 1.18;
  color: var(--blanco);
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Sombra muy sutil: legibilidad sobre zonas claras de la foto sin overlay. */
  text-shadow: 0 1px 20px rgba(14, 20, 29, 0.45);
}

.hero__title em {
  font-style: italic;
  font-weight: 100;
  color: var(--ambar);
}

/* Máscara de clip: el texto emerge desde abajo sin opacidad */
.hero__title__line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em; /* margen para descenders de Argent CF */
}

.hero__title__line {
  display: block;
  /* GSAP controla el transform; sin opacity (el clip ya lo oculta) */
}

/* — Heroes con foto SIN banda (Nosotros / Soluciones; mismo trato que el de
   la landing SISCONT): la foto respira más que en Inicio (no hay banda en
   registro que aporte la nitidez) y un velo inferior asienta el titular.
   Las líneas WebGL van encima (k 2.6, como todo hero sin banda). — */
.nos-hero .hero__bg img { opacity: 1; object-position: center 38%; }
/* La foto (bgk.soluciones.hero.png, 16:9) no cubre 1366 de ancho: la fijamos a
   la derecha con alto 100% (ancho automático) y un velo oscuro a la izquierda
   disimula el hueco y asienta el titular. */
.sol-hero .hero__bg { display: flex; justify-content: flex-end; }
.sol-hero .hero__bg img {
  width: auto; height: 100%; max-width: none;
  object-fit: cover; object-position: right center; opacity: 1;
}
.sol-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 4; pointer-events: none;
  background: linear-gradient(90deg,
    var(--bg-oscuro) 0%,
    rgba(14, 20, 29, 0.92) 28%,
    rgba(14, 20, 29, 0.45) 50%,
    rgba(14, 20, 29, 0) 72%);
}

/* — Marquesina del hero de Soluciones: títulos de las soluciones en bucle
   (derecha → izquierda), franja oscura + texto blanco pequeño. — */
.sol-hero__marquee {
  position: absolute;
  left: var(--margen); right: 50%;
  bottom: calc(20 * var(--u));
  z-index: 5; overflow: hidden;
  background: rgba(14, 20, 29, 0.40);
  padding: calc(8 * var(--u)) 0;
  /* extremos difuminados (máscara de gradiente, sin SVG externo) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.sol-hero__marquee__track {
  display: flex; align-items: center; width: max-content;
  animation: sol-marquee 38s linear infinite;
}
/* Al pasar el cursor por la marquesina, se detiene */
.sol-hero__marquee:hover .sol-hero__marquee__track { animation-play-state: paused; }
.sol-hero__mq-item {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 500;
  font-size: calc(11 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blanco); white-space: nowrap; padding: 0 calc(18 * var(--u));
  background: none; border: 0; cursor: pointer; line-height: inherit;
  transition: color 0.25s ease;
}
.sol-hero__mq-item:hover { color: var(--ambar); }
.sol-hero__mq-sep {
  color: var(--ambar); font-size: calc(6 * var(--u)); line-height: 1;
  transform: translateY(calc(-1 * var(--u)));
}
@keyframes sol-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sol-hero__marquee__track { animation: none; }
}

/* — Línea decorativa horizontal inferior — */
.hero__bottom-line {
  position: absolute;
  bottom: var(--sp-8);
  left: var(--margen);
  right: calc(var(--margen) + 72 * var(--u));
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 5;
  transform-origin: left center;
}

/* — Indicador de sección (bottom right) — */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-6);
  right: var(--margen);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
}

.hero__scroll__dot {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--ambar);
  flex-shrink: 0;
}

.hero__scroll__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* — Riel derecho persistente (solo Inicio), al nivel del slider: aparece en
   TODAS las secciones, como los dots. WhatsApp (círculo ámbar) + segmentos
   verticales sobre el mismo eje vertical de la columna de dots (centro a 76u
   del borde derecho). El color de las líneas se adapta al tema del slide
   activo. Hover del círculo: réplica del c-btn-scroll de Varagon (escala +
   halo que se expande + relleno blanco + ícono navy). — */
.home__wa {
  position: absolute;
  /* Eje de los dots (centro a 76u del borde derecho); centro vertical sobre la
     línea inferior del hero (65u del fondo). Círculo 45u → right 53.5u, bottom 42.5u. */
  bottom: calc(42.5 * var(--u));
  right: calc(53.5 * var(--u));
  z-index: 31;
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  border-radius: 50%;
  background: var(--ambar);
  color: var(--blanco);                 /* color del ícono (currentColor) */
  display: grid;
  place-items: center;
  transform: scale(1) translateZ(0);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.4s ease;
}
/* Relleno blanco que crece en hover (ámbar → blanco) */
.home__wa::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blanco);
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}
.home__wa:hover { transform: scale(1.28) translateZ(0); color: var(--navy); }
.home__wa:hover::before { transform: scale(1); }

/* Halo que se expande y se desvanece (como el __big-bg de Varagon) */
.home__wa__halo {
  position: absolute;
  width: 300%;
  height: 300%;
  border-radius: 50%;
  background: var(--ambar);
  opacity: 0.10;
  visibility: hidden;
  transform: scale(0.3) translateZ(0);
  pointer-events: none;
  z-index: -1;
}
.home__wa:hover .home__wa__halo {
  opacity: 0;
  visibility: visible;
  transform: scale(1) translateZ(0);
  transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
}

.home__wa__ico {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  line-height: 0;
}
/* El glifo de FA (448×512) conserva su proporción: fijamos el alto. */
.home__wa__ico svg { height: calc(22 * var(--u)); width: auto; display: block; }

/* — Segmentos verticales del riel, sobre el eje de los dots (76u). Color
   adaptado al tema del slide activo (claro → navy), como los dots. — */
.home__wa-line {
  position: absolute;
  right: calc(76 * var(--u) - 0.5px);   /* 1px centrado en el eje (76u) */
  width: 1px;
  z-index: 30;
  background: var(--blanco);
  opacity: 0.6;
}
.home.theme-light .home__wa-line { background: var(--navy); }
/* Segmento superior: del borde superior hasta encima de los dots (dots top ≈ y192) */
.home__wa-line--top {
  top: 0;
  height: calc(145 * var(--u));
  transform-origin: center top;
}
/* Sobre el círculo: segmento corto (hueco de 18u con el círculo) */
.home__wa-line--up {
  bottom: calc(105.5 * var(--u));
  height: calc(26 * var(--u));
  transform-origin: center bottom;      /* crece hacia arriba desde el círculo */
}
/* Bajo el círculo: del hueco (~24.5u) al borde inferior */
.home__wa-line--down {
  bottom: 0;
  height: calc(24.5 * var(--u));
  transform-origin: center top;         /* crece hacia abajo desde el círculo */
}

/* — Franjas horizontales en los extremos, a la altura del dot activo. Réplica
   del track de Varagon: al hacer hover en los dots (.is-zoomed, excepto en el
   hero) entran con un wipe (scaleX) desde cada borde, junto con el "achicar"
   del marco. La posición vertical (--sy) la sigue home.js al dot activo. — */
.home__hstrip {
  position: absolute;
  top: 50%;
  height: calc(44 * var(--u));
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(calc(-50% + var(--sy, 0px)));
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Del ancho de la barra del marco (84u): la franja vive DENTRO del margen del
   "achicar" (no invade el contenido). Se lee por contraste de color (navy
   sobre el marco navy-negro). */
.home__hstrip--left  { left: 0;  width: calc(84 * var(--u)); }
.home__hstrip--right { right: 0; width: calc(84 * var(--u)); }
.home__hstrip__fill {
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.435, 0.01, 0.135, 1);
}
.home__hstrip--left  .home__hstrip__fill { transform-origin: left center; }
.home__hstrip--right .home__hstrip__fill { transform-origin: right center; }
.home.is-zoomed .home__hstrip__fill { transform: scaleX(1); }

/* Táctil/tablet: el riel y las franjas se ocultan; el WhatsApp se mantiene como
   CTA flotante (círculo fijo abajo-derecha), igual que en cualquier sitio móvil. */
@media (max-width: 1024px) {
  .home__wa-line, .home__hstrip { display: none; }
  /* Centrado verticalmente sobre la línea inferior del hero (--sp-8 del fondo):
     centro del círculo (45/2=22.5) sobre la línea. */
  .home__wa { position: fixed; right: var(--margen); bottom: calc(var(--sp-8) - 22px); z-index: 140; }
  /* Sección 4 (home-04): se mantiene abajo para no tapar el párrafo al pie. */
  .home.home--wa-low .home__wa { bottom: var(--margen); }
}

/* 6. SECCIÓN 02 — TU EMPRESA NECESITA MÁS QUE UNA LICENCIA
   ─────────────────────────────────────────────────────────── */

.home-02 {
  display: flex;
  background-color: var(--blanco);
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--navy);
}

/* — Columna izquierda — */
.home-02__content {
  flex: 0 0 68%;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: var(--margen);
  padding-right: var(--sp-8);
}

.home-02__logo {
  position: absolute;
  top: calc(48 * var(--u));
  left: var(--margen);
}

.home-02__logo img {
  width: calc(96 * var(--u));
  height: auto;
}

/* — Bloque de contenido (centrado verticalmente) — */
/* El bloque va indentado respecto al margen de página (el logo sí ancla al
   margen): inset editorial que reproduce el aire izquierdo del diseño. */
.home-02__block {
  max-width: calc(574 * var(--u));
  margin-left: calc(118 * var(--u));
}

/* — Eyebrow — */
.home-02__eyebrow {
  display: flex;
  align-items: baseline;
  gap: calc(56 * var(--u));
  margin-bottom: var(--sp-4);
}

.home-02__eyebrow__num,
.home-02__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  color: var(--navy);
}

/* — H2 — */
.home-02__title {
  font-family: "argent-cf", Georgia, serif;
  font-weight: 300;
  font-size: calc(48 * var(--u));
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

.home-02__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ambar);
}

/* Máscara de clip — mismo patrón que el hero */
.s2-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.s2-line {
  display: block;
}

/* — Párrafo de cuerpo — */
.home-02__text {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy);
  max-width: calc(471 * var(--u));
  opacity: 0.7;
}

/* — Columna derecha: imagen — */
.home-02__image {
  flex: 0 0 32%;
  position: relative;
  overflow: hidden;
}

.home-02__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 6b. SECCIÓN 03 — UN SOLO EQUIPO
   ─────────────────────────────────────────────────────────── */

.home-03 {
  position: relative;
  background-color: var(--bg-oscuro);
  color: var(--blanco);
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

/* — Fondo completo — */
.home-03__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.home-03__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
}

/* Overlay: oscurece sobre todo la derecha, donde va el texto */
.home-03__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(14, 20, 29, 0.35) 0%,
      rgba(14, 20, 29, 0.55) 42%,
      rgba(14, 20, 29, 0.86) 78%,
      rgba(14, 20, 29, 0.92) 100%);
}

.home-03__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url('../media/images/grain-big-pattern.png');
  background-size: 300px 300px;
  background-repeat: repeat;
  mix-blend-mode: screen;
}

/* Logo blanco sobre la foto */
.home-03__logo {
  position: absolute;
  top: calc(48 * var(--u));
  left: var(--margen);
  z-index: 6;
}
.home-03__logo img { width: calc(96 * var(--u)); height: auto; }

/* Rótulo de sección — misma posición que el de la sección 2 (232, 147) */
.home-03__eyebrow {
  position: absolute;
  top: calc(147 * var(--u));
  left: calc(232 * var(--u));
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: calc(56 * var(--u));
}
.home-03__eyebrow__num,
.home-03__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

/* — Contenido a la derecha — */
.home-03__content {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  right: var(--margen);
  left: 50%;
  display: flex;
  align-items: center;
}

.home-03__block {
  max-width: calc(560 * var(--u));
}

/* Título */
.home-03__title {
  font-family: "argent-cf", Georgia, serif;
  font-weight: 300;
  font-size: calc(48 * var(--u));
  line-height: 1.14;
  color: var(--blanco);
  margin-bottom: var(--sp-4);
}

.s3-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}
.s3-line { display: block; }

/* Bajada (ámbar itálica) */
.home-03__subtitle {
  font-family: "argent-cf", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: calc(24 * var(--u));
  line-height: 1.35;
  color: var(--ambar);
  max-width: calc(520 * var(--u));
  margin-bottom: var(--sp-8);
}

/* Cifras */
.home-03__stats {
  display: flex;
  gap: calc(64 * var(--u));
}

.home-03__stat {
  text-align: center;
  max-width: calc(168 * var(--u));
}

.home-03__stat__num {
  display: block;
  font-family: "argent-cf", Georgia, serif;
  font-weight: 400;
  font-size: calc(76 * var(--u));
  line-height: 1;
  color: var(--blanco);
}

.home-03__stat__label {
  display: block;
  margin-top: calc(6 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 300;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

/* 6c. SECCIÓN 04 — SOLUCIONES
   ─────────────────────────────────────────────────────────── */
.home-04 {
  position: relative;
  background-color: var(--blanco);
  color: var(--navy);
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

/* Edificio a la izquierda, a 25% de opacidad (la imagen completa, altura 100%) */
.home-04__bg {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: 1;
  opacity: 0.25;
  pointer-events: none;
}
.home-04__bg img {
  height: 100%;
  width: auto;
  display: block;
}

.home-04__logo {
  position: absolute;
  top: calc(48 * var(--u));
  left: var(--margen);
  z-index: 6;
}
.home-04__logo img { width: calc(96 * var(--u)); height: auto; }

.home-04__content {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0 var(--margen);
}

.home-04__cols {
  display: flex;
  align-items: flex-start;
  gap: calc(66 * var(--u));
  padding-top: calc(147 * var(--u));
}

.home-04__col { flex: 0 0 auto; }
/* Columna izquierda: contenido alineado con la etiqueta del rótulo (x≈304, la
   "S" de "Sin proveedores fragmentados"); el título baja para quedar bajo el
   rótulo. La derecha queda empujada a la derecha en consecuencia. */
.home-04__col--left { width: calc(460 * var(--u)); padding-left: calc(190 * var(--u)); padding-top: calc(46 * var(--u)); }
.home-04__col--right { width: calc(360 * var(--u)); }

/* Eyebrow — misma posición y estilo que el de la sección 2 (232, 147) */
.home-04__eyebrow {
  position: absolute;
  top: calc(147 * var(--u));
  left: calc(232 * var(--u));
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: calc(56 * var(--u));
}
.home-04__eyebrow__num,
.home-04__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  color: var(--navy);
}

/* Título */
.home-04__title {
  font-family: "argent-cf", Georgia, serif;
  font-weight: 300;
  font-size: calc(48 * var(--u));
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}
.s4-line-wrap { display: block; overflow: hidden; padding-bottom: 0.1em; }
.s4-line { display: block; }

/* Lista de soluciones */
.home-04__item {
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--u));
  padding: calc(15 * var(--u)) 0;
  border-bottom: 1px solid rgba(22, 50, 82, 0.16);
}
.home-04__item__num {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u));
  font-weight: 500;
  color: var(--navy);
  opacity: 0.55;
  min-width: calc(36 * var(--u));
}
.home-04__item__text {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(15 * var(--u));
  font-weight: 400;
  color: var(--navy);
}

/* Párrafo de cierre */
.home-04__para {
  margin-top: var(--sp-6);
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(15 * var(--u));
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.72;
  max-width: calc(380 * var(--u));
}

/* En desktops más altos que el diseño base (>1366px) la columna de Soluciones
   se centra verticalmente, como las secciones 03 y 05 (el rótulo permanece
   arriba). El offset se anula a 1366×600 (queda en 0 por el max()), así que esa
   vista —y mobile/tablet, fuera de este min-width— no se tocan. El bloque va de
   ~147 a ~527 dentro de la sección (alto ~380), todo escalado por --u. */
@media (min-width: 1367px) {
  .home-04__cols {
    transform: translateY(max(0px, calc((100svh - 380 * var(--u)) / 2 - 147 * var(--u))));
  }
}

/* 6d. SECCIÓN 05 — CAFÉ CON SISCONT
   ─────────────────────────────────────────────────────────── */
.home-05 {
  position: relative;
  background-color: var(--caoba);
  color: var(--blanco);
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.home-05__bg { position: absolute; inset: 0; z-index: 1; }
.home-05__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay cálido (tinte caoba), más denso a la derecha (texto) */
.home-05__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(39, 25, 28, 0.12) 0%,
      rgba(39, 25, 28, 0.34) 52%,
      rgba(39, 25, 28, 0.62) 100%);
}

.home-05__logo {
  position: absolute;
  top: calc(48 * var(--u));
  left: var(--margen);
  z-index: 6;
}
.home-05__logo img { width: calc(96 * var(--u)); height: auto; }

/* Rótulo de sección — misma posición que el de la sección 2 (232, 147) */
.home-05__eyebrow {
  position: absolute;
  top: calc(147 * var(--u));
  left: calc(232 * var(--u));
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: calc(56 * var(--u));
}
.home-05__eyebrow__num,
.home-05__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

.home-05__content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Inset derecho: el bloque queda hacia el centro-derecha (como el diseño). */
  padding: 0 calc(246 * var(--u)) 0 var(--margen);
}

/* El bloque tiene el ancho del título: ése es el "marco" de toda la columna.
   ~220px fuerza la bajada a 3 líneas con el mismo corte del diseño
   ("compartir ideas y soluciones" juntas en la línea central). */
.home-05__block {
  width: calc(220 * var(--u));
  text-align: right;
}

/* Título artístico (CAFÉ con SISCONT) */
.home-05__title { margin-bottom: var(--sp-3); }
.home-05__title img { width: 100%; height: auto; display: block; }

/* Divisor con ícono de taza (abarca el ancho del título) */
.home-05__divider {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-bottom: var(--sp-4);
}
.home-05__divider__line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.30); }
.home-05__divider__icon { color: var(--blanco); flex-shrink: 0; }
.home-05__divider__icon svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: block; }

/* Bajada (3 líneas, alineada a la derecha) */
.home-05__subtitle {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 300;
  line-height: 1.55;
  color: var(--blanco);
  margin-bottom: var(--sp-6);
}
.home-05__subtitle em { font-style: normal; color: var(--ambar); }

/* Frecuencia + logo SISCONT Servicios (alineados a la derecha) */
.home-05__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
.home-05__freq {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  color: var(--blanco);
}
.home-05__freq__day {
  font-family: "argent-cf", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ambar);
}
.home-05__freq__icon { color: var(--ambar); flex-shrink: 0; }
.home-05__freq__icon svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; }
.home-05__siscont { width: calc(132 * var(--u)); height: auto; }

/* Footer de créditos */
.home-05__footer {
  position: absolute;
  z-index: 6;
  bottom: calc(26 * var(--u));
  left: var(--margen);
  right: var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(14 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(12 * var(--u));
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}
.home-05__footer__credit {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}
.home-05__footer__credit:hover { color: var(--blanco); }
.home-05__footer__icon { display: inline-flex; }
.home-05__footer__icon svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); display: block; }

/* 7. HOME — SLIDER VERTICAL (fullpage)
   ───────────────────────────────────────────────────────────
   .home es la ventana (100vh, overflow hidden). El .home__track
   apila todas las slides y se desplaza con translateY vía GSAP.
   Cada slide ocupa exactamente la altura del viewport.            */

.home {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.home__track {
  position: relative;
  width: 100%;
}

.home__slide {
  position: relative;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  will-change: transform;
}

/* Modo estático (reduced-motion en desktop o tablet/mobile): scroll nativo */
.home.is-static {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.home.is-static .home__track { transform: none !important; }
/* En desktop con reduced-motion las slides conservan su altura completa */
@media (min-width: 1025px) {
  .home.is-static .home__slide { height: 100vh; min-height: 600px; }
}

/* — Marco de apertura por sección ("c-home__section__bar" del prototipo01) —
   ───────────────────────────────────────────────────────────────────────
   Cada slide (salvo el hero) tiene 4 barras oscuras en sus bordes. Por
   defecto están CERRADAS (scale 1). Cuando la sección recibe .is-active, se
   RETRAEN hacia su borde (scale 0): es el efecto de "apertura" de la sección
   en cada transición. Al hacer hover en los dots (.is-zoomed) vuelven a
   cerrarse ("achicar"). Easing y tiempos calcados del prototipo01.            */
.home__slide__frame {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.home__slide__bar {
  position: absolute;
  background: var(--navy-negro);   /* marco más oscuro → contrasta con la franja navy */
}

.home__slide__bar--x {
  left: 0; right: 0;
  height: calc(56 * var(--u));
  transform: scaleY(1);
  transition: transform 1s cubic-bezier(0.435, 0.01, 0.135, 1);
}
.home__slide__bar--top    { top: 0;    transform-origin: center top; }
.home__slide__bar--bottom { bottom: 0; transform-origin: center bottom; }

.home__slide__bar--y {
  top: 0; bottom: 0;
  width: calc(84 * var(--u));
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.435, 0.01, 0.135, 1);
}
.home__slide__bar--left  { left: 0;  transform-origin: left center; }
.home__slide__bar--right { right: 0; transform-origin: right center; }

/* Apertura (estado estable y reapertura tras hover): barras retraídas, ágil. */
.home__slide.is-active .home__slide__bar--x {
  transform: scaleY(0);
  transition: transform 0.9s cubic-bezier(0.435, 0.01, 0.135, 1);
}
.home__slide.is-active .home__slide__bar--y {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.435, 0.01, 0.135, 1);
}

/* Apertura dramática SOLO en la transición de entrada de sección: el delay
   (0.5s) deja que la sección llegue aún enmarcada antes de abrirse, para que
   el gesto "marco cerrado → abierto" se lea con claridad. La clase la pone y
   retira home.js durante la transición. */
.home__slide.is-revealing.is-active .home__slide__bar--x {
  transition: transform 1.5s cubic-bezier(0.435, 0.01, 0.135, 1) 0.5s;
}
.home__slide.is-revealing.is-active .home__slide__bar--y {
  transition: transform 1.5s cubic-bezier(0.435, 0.01, 0.135, 1) 0.5s;
}

/* Hover en los dots → "achicar": el marco de la sección activa se cierra */
.home.is-zoomed .home__slide.is-active .home__slide__bar--x {
  transform: scaleY(1);
  transition: transform 0.9s cubic-bezier(0.435, 0.01, 0.135, 1);
}
.home.is-zoomed .home__slide.is-active .home__slide__bar--y {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.435, 0.01, 0.135, 1);
}

/* Estático (mobile / reduced-motion): marcos abiertos, sin animación */
.home.is-static .home__slide__bar--x { transform: scaleY(0); }
.home.is-static .home__slide__bar--y { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .home__slide__bar { transition: none !important; }
}

/* — Dots de navegación (lado derecho) — */
.home__dots {
  position: absolute;
  top: 50%;
  right: calc(64 * var(--u));
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0;                /* GSAP lo revela tras el preloader */
}

.home__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  cursor: pointer;
}

/* Punto */
.home__dot::before {
  content: '';
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  transform: scale(1);
  transition:
    opacity   0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home__dot:hover::before {
  opacity: 0.8;
}

.home__dot.is-active::before {
  opacity: 1;
  transform: scale(1.6);
  background: var(--ambar);
}

/* Etiqueta numérica (aparece en hover de la zona de dots), a la DERECHA del punto */
.home__dot__label {
  position: absolute;
  left: calc(100% + 6 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  letter-spacing: 0.14em;
  color: currentColor;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
}

.home__dots:hover .home__dot__label,
.home__dot.is-active .home__dot__label {
  opacity: 0.7;
  transform: translateX(0);
}

/* Tema: el color de los dots se adapta al fondo del slide activo */
.home__dots { color: var(--blanco); }
.home.theme-light .home__dots { color: var(--navy); }
/* Al "achicar", la barra oscura queda detrás de los dots: vuelven a blanco */
.home.is-zoomed .home__dots { color: var(--blanco); }

/* 8. BURGER — Botón de menú
   ───────────────────────────────────────────────────────────
   Oculto en el slide 0; aparece (con el header retirado) a partir
   del slide 1. Las 3 barras se transforman en una X al abrir.     */
.burger {
  position: fixed;
  top: calc(44 * var(--u));
  right: var(--margen);
  z-index: 160;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition:
    opacity   0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    color     0.4s ease;
}

/* Visible a partir del slide 1 (o siempre en mobile) */
.burger.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tema según el slide activo (JS conmuta .is-light) */
.burger.is-light { color: var(--navy); }

/* Cuando el menú está abierto el burger siempre es blanco (sobre foto) */
.burger.is-open { color: var(--blanco) !important; }

.burger__box {
  position: relative;
  width: calc(26 * var(--u));
  height: calc(14 * var(--u));
}

.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition:
    transform 0.45s cubic-bezier(0.68, -0.3, 0.27, 1.3),
    opacity   0.3s ease;
}

.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger__line:nth-child(3) { bottom: 0; }

/* Estado X */
.burger.is-open .burger__line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.burger.is-open .burger__line:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
.burger.is-open .burger__line:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* 9. MENU — Overlay de navegación
   ───────────────────────────────────────────────────────────
   El carrusel diagonal de ventanas/fotos es un canvas PIXI v4 (nav-pixi.js),
   réplica del menú de Varagon. El menú aparece de inmediato (sin wipe) y es el
   CANVAS el que anima la apertura (rotación 0→17° + zoom). El texto entra con
   stagger (GSAP, en home.js).                                                  */
.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

/* — Carrusel diagonal en canvas (PIXI) —
   .menu__media     → ventana fija (clip al viewport)
   .menu__renderer  → contenedor donde nav-pixi.js inserta su <canvas>;
                      el JS del renderer fija el transform de escala/centrado.  */
.menu__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  /* Renderer (carrusel) funde al abrir, como Varagon (.c-nav__renderer) */
  opacity: 0;
  transition: opacity 1.5s ease;
}
.menu.is-open .menu__media { opacity: 1; }

.menu__renderer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.menu__renderer canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/* Overlay oscuro (legibilidad de los enlaces); el original usa ~0.85 plano */
/* Velo (= .c-nav__overlay de Varagon): color #141d29 sólido; la OPACIDAD del
   elemento funde a 0.85 al abrir. Texto blanco legible sobre el oscuro. */
.menu__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #141d29;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.menu.is-open .menu__scrim { opacity: 0.85; }

/* Grano de película (= .c-nav__grain de Varagon): mismo asset, a opacidad plena
   y tamaño natural (sin blend-mode). Funde al abrir. Bajo el texto/logo (z3). */
.menu__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-image: url('../media/images/grain-big-pattern.png');
  background-repeat: repeat;
  transition: opacity 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu.is-open .menu__grain { opacity: 1; }

/* — Logo del menú — */
.menu__logo {
  position: absolute;
  top: calc(48 * var(--u));
  left: var(--margen);
  z-index: 3;
}
.menu__logo img { height: calc(36 * var(--u)); width: auto; }

/* — Lista de enlaces — */
.menu__nav {
  position: absolute;
  top: 50%;
  /* Al centro-izquierda (no pegado al borde), como Varagon */
  left: calc(240 * var(--u));
  transform: translateY(-50%);
  z-index: 3;
}

/* Entrada escalonada de los enlaces (= .c-nav__list__item de Varagon):
   cada ítem sube (translateY 45px→0) + funde, con delays en cascada. */
.menu__item {
  overflow: visible;
  opacity: 0;
  transform: translateY(45px) translateZ(0);
  will-change: opacity, transform;
  transition:
    opacity 0.65s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu.is-open .menu__item { opacity: 1; transform: translateZ(0); }
.menu.is-open .menu__item:nth-child(1) { transition-delay: 0.95s; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: 0.85s; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: 0.75s; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: 0.65s; }
.menu.is-open .menu__item:nth-child(5) { transition-delay: 0.55s; }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: calc(28 * var(--u));
  padding: calc(10 * var(--u)) 0;
  color: var(--blanco);
}

.menu__link__index {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ambar);
  opacity: 0.75;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: calc(30 * var(--u));
}

/* Máscara de clip por enlace (reveal de abajo hacia arriba) */
.menu__link__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.menu__link__text {
  display: block;
  font-family: "argent-cf", Georgia, serif;
  font-weight: 300;
  font-size: calc(40 * var(--u));
  line-height: 1.06;
  letter-spacing: -0.01em;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color     0.4s ease;
}

.menu__link:hover .menu__link__index { opacity: 1; transform: translateX(6px); }
.menu__link:hover .menu__link__text {
  transform: translateX(18px);
  font-style: italic;
  color: var(--blanco);
}

/* 9b. PÁGINA NOSOTROS — SECCIÓN 02 (El nexo)
   ───────────────────────────────────────────────────────────
   Imagen a la izquierda + bloque editorial a la derecha (eyebrow, título,
   cuerpo y cita). Mismo escalado proporcional (--u) que el resto. */
.nos-02 {
  position: relative;
  display: flex;
  background-color: var(--blanco);
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--navy);
}

/* — Imagen (izquierda) — */
.nos-02__image {
  flex: 0 0 calc(400 * var(--u));
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.nos-02__image img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.nos-02__ph {
  position: absolute;
  inset: 0;
  background: #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nos-02__ph span {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.04em;
  color: #8a8f96;
}

/* — Logo (sobre la imagen) — */
.nos-02__logo {
  position: absolute;
  top: calc(48 * var(--u));
  left: var(--margen);
  z-index: 6;
}
.nos-02__logo img { width: calc(96 * var(--u)); height: auto; }

/* — Contenido (derecha) — */
.nos-02__content {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: calc(90 * var(--u));
  padding-right: var(--margen);
}
.nos-02__block { max-width: calc(620 * var(--u)); }

/* Eyebrow */
.nos-02__eyebrow {
  display: flex;
  align-items: baseline;
  gap: calc(56 * var(--u));
  margin-bottom: var(--sp-4);
}
.nos-02__eyebrow__num,
.nos-02__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  color: var(--navy);
}

/* Título */
.nos-02__title {
  font-family: "argent-cf", Georgia, serif;
  font-weight: 300;
  font-size: calc(48 * var(--u));
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}
.nos-02__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ambar);
}

/* Cuerpo */
.nos-02__text {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.72;
  max-width: calc(500 * var(--u));
  margin-bottom: var(--sp-6);
}

/* Cita */
.nos-02__quote {
  border-left: 2px solid var(--ambar);
  padding-left: calc(20 * var(--u));
  max-width: calc(480 * var(--u));
}
.nos-02__quote p {
  font-family: "argent-cf", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: calc(19 * var(--u));
  line-height: 1.4;
  color: var(--navy);
  margin-bottom: var(--sp-2);
}
.nos-02__cite {
  display: block;
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-style: normal;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.02em;
  color: rgba(22, 50, 82, 0.6);
}

/* 9c. NOSOTROS — SECCIÓN 03 (Trayectoria · cifras)
   ─────────────────────────────────────────────────────────── */
.nos-03 {
  position: relative;
  background-color: var(--bg-oscuro);
  color: var(--blanco);
  height: 100vh; min-height: 600px; overflow: hidden;
}
.nos-03__bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.nos-03__bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.20;
}
.nos-03__logo { position: absolute; top: calc(48 * var(--u)); left: var(--margen); z-index: 6; }
.nos-03__logo img { width: calc(96 * var(--u)); height: auto; }

.nos-03__eyebrow {
  position: absolute; top: calc(150 * var(--u)); left: calc(207 * var(--u)); z-index: 6;
  display: flex; align-items: baseline; gap: calc(76 * var(--u));
}
.nos-03__eyebrow__num, .nos-03__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

.nos-03__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-start;
  padding: calc(205 * var(--u)) var(--margen) 0 calc(283 * var(--u));
}
.nos-03__left  { flex: 0 0 calc(360 * var(--u)); }
.nos-03__right { flex: 1; padding-left: calc(96 * var(--u)); }

.nos-03__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(48 * var(--u)); line-height: 1.12; color: var(--blanco);
  margin-bottom: var(--sp-4);
}
.nos-03__title em { font-style: italic; font-weight: 300; color: var(--ambar); }
.nos-03__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(16 * var(--u)); line-height: 1.6; color: rgba(255, 255, 255, 0.7);
  max-width: calc(340 * var(--u));
}

.nos-03__stats { display: flex; gap: calc(56 * var(--u)); margin-bottom: var(--sp-6); }
.nos-03__stat__num {
  display: block; font-family: "argent-cf", Georgia, serif; font-weight: 400;
  font-size: calc(100 * var(--u)); line-height: 1; color: var(--blanco);
}
.nos-03__stat__label {
  display: block;
  font-family: "argent-cf", Georgia, serif; font-style: italic; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.35; color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
/* — Círculo de carga alrededor de los números — */
.nos-03__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nos-03__stat__wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(220 * var(--u));
  height: calc(220 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.nos-03__stat__ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: calc(220 * var(--u));
  height: calc(220 * var(--u));
  pointer-events: none;
}
.nos-03__stat__ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.5;
}
.nos-03__stat__ring__fill {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 628.3;   /* 2π × 100 */
  stroke-dashoffset: 628.3;
}
@keyframes nos-ring {
  to { stroke-dashoffset: 0; }
}
.home__slide.is-active .nos-03__stat__ring__fill {
  animation: nos-ring 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}
.home__slide.is-active .nos-03__stat:nth-child(2) .nos-03__stat__ring__fill {
  animation-delay: 1.0s;
}
@media (prefers-reduced-motion: reduce) {
  .nos-03__stat__ring__fill { stroke-dashoffset: 0; }
}

.nos-03__note {
  font-family: "argent-cf", Georgia, serif; font-style: italic; font-weight: 300;
  font-size: calc(22 * var(--u)); color: rgba(255, 255, 255, 0.85);
  text-align: center; margin-bottom: calc(16 * var(--u));
}

/* 9d. NOSOTROS — SECCIÓN 04 (Cómo trabajamos · texto izq + foto der)
   ─────────────────────────────────────────────────────────── */
.nos-04 {
  position: relative; display: flex;
  background-color: var(--blanco); color: var(--navy);
  height: 100vh; min-height: 600px; overflow: hidden;
}
.nos-04__logo { position: absolute; top: calc(48 * var(--u)); left: var(--margen); z-index: 6; }
.nos-04__logo img { width: calc(96 * var(--u)); height: auto; }

.nos-04__eyebrow {
  position: absolute; top: calc(150 * var(--u)); left: calc(207 * var(--u)); z-index: 6;
  display: flex; align-items: baseline; gap: calc(76 * var(--u));
}
.nos-04__eyebrow__num, .nos-04__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; color: var(--navy);
}

.nos-04__content {
  flex: 0 0 68%; position: relative; display: flex; align-items: flex-start;
  padding: calc(195 * var(--u)) var(--sp-8) 0 calc(283 * var(--u));
}
.nos-04__block { max-width: calc(470 * var(--u)); }
.nos-04__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(48 * var(--u)); line-height: 1.1; color: var(--navy);
  margin-bottom: var(--sp-4);
}
.nos-04__title em { font-style: italic; font-weight: 300; color: var(--ambar); }
.nos-04__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(16 * var(--u)); line-height: 1.6; color: var(--navy);
  opacity: 0.72; max-width: calc(460 * var(--u));
}
.nos-04__image { flex: 0 0 32%; position: relative; overflow: hidden; }
.nos-04__image img { width: 100%; height: 100%; object-fit: cover; }
.nos-04__ph {
  position: absolute; inset: 0; background: #D9D9D9;
  display: flex; align-items: center; justify-content: center;
}
.nos-04__ph span {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u)); letter-spacing: 0.04em; color: #8a8f96;
}

/* 9e. NOSOTROS — SECCIÓN 05 (Comunicación · cierre, foto a sangre)
   ─────────────────────────────────────────────────────────── */
.nos-05 {
  position: relative; background-color: #D9D9D9; color: var(--navy);
  height: 100vh; min-height: 600px; overflow: hidden;
}
.nos-05__bg { position: absolute; inset: 0; z-index: 1; }
.nos-05__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* Velo oscuro inferior: garantiza lectura del texto blanco */
.nos-05__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 20, 29, 0.45) 0%,
    rgba(14, 20, 29, 0.55) 100%);
}
.nos-05__ph {
  position: absolute; inset: 0; background: #D9D9D9;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: calc(150 * var(--u));
}
.nos-05__ph span {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u)); letter-spacing: 0.04em; color: #8a8f96;
}
.nos-05__logo { position: absolute; top: calc(48 * var(--u)); left: var(--margen); z-index: 6; }
.nos-05__logo img { width: calc(96 * var(--u)); height: auto; }

.nos-05__content {
  position: absolute;
  top: calc(100 * var(--u)); bottom: calc(64 * var(--u));
  left: 0; right: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--margen);
}
.nos-05__eyebrow {
  align-self: flex-start;
  display: flex; align-items: baseline; gap: calc(56 * var(--u));
  margin-bottom: calc(24 * var(--u));
}
.nos-05__eyebrow__num, .nos-05__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; color: var(--blanco);
}
.nos-05__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(56 * var(--u)); line-height: 1.1; color: var(--blanco);
  margin-bottom: calc(20 * var(--u));
}
.nos-05__title em { font-style: italic; font-weight: 300; color: var(--ambar); }
.nos-05__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(16 * var(--u)); line-height: 1.6; color: var(--blanco);
  opacity: 0.78; max-width: calc(470 * var(--u)); margin-bottom: calc(28 * var(--u));
}
.nos-05__cta {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(13 * var(--u));
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); background: var(--ambar);
  padding: calc(14 * var(--u)) calc(36 * var(--u));
  transition: background 0.3s ease, color 0.3s ease;
}
.nos-05__cta:hover { background: var(--blanco); color: var(--navy); }
.nos-05__footer {
  position: absolute; z-index: 6; bottom: calc(26 * var(--u));
  left: var(--margen); right: var(--margen);
  display: flex; align-items: center; justify-content: space-between;
  padding-top: calc(14 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(12 * var(--u)); font-weight: 300; color: rgba(255, 255, 255, 0.7);
}
.nos-05__footer__credit {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease;
}
.nos-05__footer__credit:hover { color: var(--blanco); }
.nos-05__footer__icon { display: inline-flex; }
.nos-05__footer__icon svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); display: block; }

/* 9f. POP-UP DE CONTACTO
   ───────────────────────────────────────────────────────────
   Modal corporativo: aside oscuro (mensaje + datos) + formulario claro
   (inputs subrayados). Sin radios; strokes sutiles; acento ámbar. */
.contact {
  position: fixed; inset: 0; z-index: 300;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}
.contact.is-open { visibility: visible; transition: visibility 0s; }

.contact__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 18, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.5s ease;
}
.contact.is-open .contact__backdrop { opacity: 1; }

/* — Panel: cajón que entra de derecha a izquierda, azul más claro de la paleta — */
.contact__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: calc(468 * var(--u)); max-width: 100%;
  background: var(--navy-negro); color: var(--blanco);
  padding: calc(38 * var(--u)) calc(52 * var(--u)) calc(30 * var(--u));
  display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact.is-open .contact__panel { transform: translateX(0); }

/* Textura de grano (misma del menú) sobre el fondo navy-negro. */
.contact__panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../media/images/grain-big-pattern.png');
  background-repeat: repeat; opacity: 0.55;
}
.contact__panel > * { position: relative; z-index: 1; }

.contact__logo { width: calc(108 * var(--u)); height: auto; display: block; }

.contact__head { margin-top: calc(24 * var(--u)); }
.contact__eyebrow {
  display: block;
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ambar);
  margin-bottom: calc(12 * var(--u));
}
.contact__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(34 * var(--u)); line-height: 1.1; color: var(--blanco);
  margin-bottom: calc(10 * var(--u));
}
.contact__title em { font-style: italic; font-weight: 300; color: var(--ambar); }
.contact__lead {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(16 * var(--u)); line-height: 1.45; color: rgba(255, 255, 255, 0.70);
  max-width: none;
}

/* — Datos ordenados, sin cuadros ni líneas: filas con ícono + etiqueta/valor — */
.contact__list {
  list-style: none; margin: calc(22 * var(--u)) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
}
.contact__item {
  display: flex; align-items: center; gap: calc(15 * var(--u));
  padding: calc(8 * var(--u)) 0;
}
.contact__item__ic {
  flex: 0 0 auto; width: calc(22 * var(--u)); height: calc(22 * var(--u));
  color: var(--ambar); line-height: 0;
}
.contact__item__ic svg { width: 100%; height: 100%; display: block; }
.contact__item__body { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.contact__item__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.contact__item__value {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(16 * var(--u)); color: var(--blanco); transition: color 0.25s ease;
}
a.contact__item__value:hover { color: var(--ambar); }


/* — Botón cerrar — */
.contact__close {
  position: absolute; top: calc(20 * var(--u)); right: calc(20 * var(--u)); z-index: 3;
  width: calc(42 * var(--u)); height: calc(42 * var(--u));
  display: flex; align-items: center; justify-content: center;
  color: var(--blanco); background: transparent; border: none; cursor: pointer;
  transition: color 0.25s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.contact__close:hover { color: var(--ambar); transform: rotate(90deg); }
.contact__close svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); display: block; }

/* — Reduced-motion: sin slide — */
@media (prefers-reduced-motion: reduce) {
  .contact, .contact__backdrop, .contact__panel { transition: none; }
}

/* — Móvil: el cajón ocupa todo el ancho — */
@media (max-width: 640px) {
  .contact__panel { width: 100%; padding: 88px 35px 40px; }
  .contact__title { font-size: 34px; }
  .contact__lead { max-width: none; }
}

/* 9g. SOLUCIONES — secciones 02 (Productos), 03 (Servicios), 04 (Cierre)
   ───────────────────────────────────────────────────────────
   Reusa el sistema (eyebrow, --u, slider). Comparte el patrón de eyebrow
   absoluto y el escalado proporcional con Nosotros. */

/* Eyebrow común de Soluciones — va en el flujo del contenido, encima del título
   (evita el solape del rótulo absoluto con el titular). */
.sol-02__eyebrow, .sol-03__eyebrow, .sol-04__eyebrow {
  display: flex; align-items: baseline; gap: calc(56 * var(--u));
  margin-bottom: calc(22 * var(--u));
}
.sol-02__eyebrow__num, .sol-02__eyebrow__label,
.sol-03__eyebrow__num, .sol-03__eyebrow__label,
.sol-04__eyebrow__num, .sol-04__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: 0.02em;
}
.sol-02__eyebrow__num, .sol-02__eyebrow__label { color: var(--navy); }
.sol-03__eyebrow__num, .sol-03__eyebrow__label,
.sol-04__eyebrow__num, .sol-04__eyebrow__label { color: rgba(255,255,255,0.82); }
.sol-02__logo, .sol-03__logo, .sol-04__logo {
  position: absolute; top: calc(48 * var(--u)); left: var(--margen); z-index: 6;
}
.sol-02__logo img, .sol-03__logo img, .sol-04__logo img { width: calc(96 * var(--u)); height: auto; }

/* ── 03·04·05 · Servicios por categoría (tarjetas con imagen) ──────── */
.sol-svc-sec { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.sol-svc-sec[data-theme="dark"]  { background: var(--bg-oscuro); color: var(--blanco); }
.sol-svc-sec[data-theme="light"] { background: var(--blanco); color: var(--navy); }
.sol-svc__brand { position: absolute; top: calc(48 * var(--u)); left: var(--margen); z-index: 6; }
.sol-svc__brand img { width: calc(96 * var(--u)); height: auto; }
.sol-svc__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(100 * var(--u)) calc(151 * var(--u)) calc(44 * var(--u)) calc(207 * var(--u));
}
.sol-svc__intro { max-width: calc(720 * var(--u)); margin-bottom: calc(22 * var(--u)); }
.sol-svc__eyebrow { display: flex; align-items: baseline; gap: calc(56 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.sol-svc__eyebrow__num, .sol-svc__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: 0.02em;
}
.sol-svc-sec[data-theme="dark"]  .sol-svc__eyebrow__num,
.sol-svc-sec[data-theme="dark"]  .sol-svc__eyebrow__label { color: rgba(255,255,255,0.82); }
.sol-svc-sec[data-theme="light"] .sol-svc__eyebrow__num,
.sol-svc-sec[data-theme="light"] .sol-svc__eyebrow__label { color: var(--navy); }
.sol-svc__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(36 * var(--u)); line-height: 1.12; margin-bottom: calc(10 * var(--u));
}
.sol-svc__title em { font-style: italic; color: var(--ambar); }
.sol-svc__lead {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.5; max-width: calc(640 * var(--u));
}
.sol-svc-sec[data-theme="dark"]  .sol-svc__lead { color: rgba(255,255,255,0.7); }
.sol-svc-sec[data-theme="light"] .sol-svc__lead { color: var(--navy); opacity: 0.72; }
.sol-svc-grid { display: grid; gap: calc(26 * var(--u)); }
.sol-svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sol-svc-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: calc(760 * var(--u)); }
.sol-svc-card { display: flex; flex-direction: column; }
.sol-svc-card__img { position: relative; overflow: hidden; margin-bottom: calc(14 * var(--u)); }
.sol-svc-grid--3 .sol-svc-card__img { height: calc(116 * var(--u)); }
.sol-svc-grid--2 .sol-svc-card__img { height: calc(132 * var(--u)); }
.sol-svc-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.sol-svc-card:hover .sol-svc-card__img img { transform: scale(1.05); }
.sol-svc-card__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 400;
  font-size: calc(20 * var(--u)); line-height: 1.15; margin-bottom: calc(7 * var(--u));
}
.sol-svc-card__desc {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(14 * var(--u)); line-height: 1.5; flex: 1;
}
.sol-svc-sec[data-theme="dark"]  .sol-svc-card__desc { color: rgba(255,255,255,0.66); }
.sol-svc-sec[data-theme="light"] .sol-svc-card__desc { color: var(--navy); opacity: 0.72; }
.sol-svc-card__cta {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(13 * var(--u));
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar);
  transition: gap 0.3s ease;
}
.sol-svc-card__cta:hover { gap: calc(14 * var(--u)); }
.sol-svc__foot {
  margin-top: calc(22 * var(--u)); max-width: calc(820 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(14 * var(--u)); line-height: 1.5; color: var(--navy); opacity: 0.8;
}
.sol-svc__foot em { font-style: normal; color: var(--ambar); font-weight: 500; }
.sol-svc__foot a { color: var(--ambar); font-weight: 500; white-space: nowrap; }

/* ── Servicios · layout EDITORIAL ──────────────────────────────
   2×2: las dos fotos se juntan al centro (arriba-izq + abajo-der,
   tocándose en el punto medio) y el texto va en los dos huecos en
   blanco (arriba-der + abajo-izq). Entrada con fade lateral. */
.sol-ed-sec {
  position: relative; height: 100vh; min-height: 600px; overflow: hidden;
  background: var(--blanco); color: var(--navy);
}
.sol-ed__brand { position: absolute; top: calc(48 * var(--u)); left: var(--margen); z-index: 6; }
.sol-ed__brand img { width: calc(96 * var(--u)); height: auto; }
.sol-ed__eyebrow {
  position: absolute; top: calc(52 * var(--u)); left: calc(207 * var(--u)); z-index: 6;
  display: flex; align-items: baseline; gap: calc(56 * var(--u));
}
.sol-ed__eyebrow__num, .sol-ed__eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: 0.02em; color: var(--navy);
}
.sol-ed__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: calc(96 * var(--u)) calc(151 * var(--u)) calc(56 * var(--u)) calc(207 * var(--u));
}
.sol-ed__pair { position: relative; width: calc(960 * var(--u)); height: calc(404 * var(--u)); }
/* Fotos: mitades que se tocan en el centro (diagonal) */
.sol-ed__photo {
  position: absolute; width: calc(478 * var(--u)); height: calc(200 * var(--u)); overflow: hidden;
}
.sol-ed__photo--a { top: 0; left: 0; }
.sol-ed__photo--b { bottom: 0; right: 0; }
.sol-ed__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(100%) brightness(1.03) contrast(0.96);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.sol-ed__photo:hover img { transform: scale(1.04); }
/* Fundido suave a blanco hacia el hueco de texto adyacente */
.sol-ed__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.sol-ed__photo--a::after { background: linear-gradient(105deg, rgba(255,255,255,0) 60%, var(--blanco) 100%); }
.sol-ed__photo--b::after { background: linear-gradient(285deg, rgba(255,255,255,0) 60%, var(--blanco) 100%); }
/* Texto en los huecos en blanco (cuadrantes opuestos), centrado vertical */
.sol-ed__text {
  position: absolute; width: calc(452 * var(--u)); height: calc(200 * var(--u));
  display: flex; flex-direction: column; justify-content: center; z-index: 2;
}
.sol-ed__text--a { top: 0; right: 0; align-items: flex-start; }
.sol-ed__text--b { bottom: 0; left: 0; align-items: flex-end; text-align: right; }
.sol-ed__text__name {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(34 * var(--u)); line-height: 1.08; color: var(--navy);
}
.sol-ed__text__name em { font-style: italic; color: var(--ambar); }
.sol-ed__text__desc {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(14 * var(--u)); line-height: 1.5; color: var(--navy); opacity: 0.7;
  max-width: calc(360 * var(--u)); margin-top: calc(10 * var(--u));
}
.sol-ed__text__rule { width: calc(28 * var(--u)); height: 1px; background: rgba(22,50,82,0.35); margin: calc(14 * var(--u)) 0; }
.sol-ed__text__cta {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(13 * var(--u));
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar);
  transition: gap 0.3s ease;
}
.sol-ed__text__cta:hover { gap: calc(14 * var(--u)); }
/* Secciones alternas (4 y 6): inversión vertical — la solución de abajo sube
   y la de arriba baja; las fotos quedan en la diagonal opuesta (parecido, no
   idéntico, al pasar de la sección anterior). */
.sol-ed-sec--alt .sol-ed__photo--a { top: auto; bottom: 0; }
.sol-ed-sec--alt .sol-ed__photo--b { top: 0; bottom: auto; }
.sol-ed-sec--alt .sol-ed__text--a  { top: auto; bottom: 0; }
.sol-ed-sec--alt .sol-ed__text--b  { top: 0; bottom: auto; }
.sol-ed-sec--alt .sol-ed__photo--a::after { background: linear-gradient(75deg, rgba(255,255,255,0) 60%, var(--blanco) 100%); }
.sol-ed-sec--alt .sol-ed__photo--b::after { background: linear-gradient(255deg, rgba(255,255,255,0) 60%, var(--blanco) 100%); }

/* Entrada: fade lateral de las fotos (tras llegar el slide) + texto */
@keyframes sol-ed-in-left  { from { opacity: 0; transform: translateX(calc(-54 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes sol-ed-in-right { from { opacity: 0; transform: translateX(calc(54 * var(--u))); }  to { opacity: 1; transform: none; } }
@keyframes sol-ed-in-up    { from { opacity: 0; transform: translateY(calc(16 * var(--u))); }  to { opacity: 1; transform: none; } }
.home__slide.is-active .sol-ed__photo--a { animation: sol-ed-in-left 0.9s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.7s; }
.home__slide.is-active .sol-ed__photo--b { animation: sol-ed-in-right 0.9s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.85s; }
.home__slide.is-active .sol-ed__text--a { animation: sol-ed-in-up 0.6s ease both; animation-delay: 1.1s; }
.home__slide.is-active .sol-ed__text--b { animation: sol-ed-in-up 0.6s ease both; animation-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
  .home__slide.is-active .sol-ed__photo--a,
  .home__slide.is-active .sol-ed__photo--b,
  .home__slide.is-active .sol-ed__text--a,
  .home__slide.is-active .sol-ed__text--b { animation: none; }
}

/* — 02 · Productos (claro) — */
.sol-02 {
  position: relative; background-color: var(--blanco); color: var(--navy);
  height: 100vh; min-height: 600px; overflow: hidden;
}
.sol-02__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(150 * var(--u)) calc(151 * var(--u)) calc(44 * var(--u)) calc(207 * var(--u));
}
/* Intro en dos columnas: rótulo+título a la izquierda, bajada a la derecha
   (paralela) — libera alto vertical para subir las tarjetas. */
.sol-02__intro {
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: calc(44 * var(--u)); margin-bottom: calc(24 * var(--u));
}
.sol-02__intro__head { flex: 0 0 auto; }
.sol-02__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(40 * var(--u)); line-height: 1.12; color: var(--navy);
  margin-bottom: 0;
}
.sol-02__title em { font-style: italic; color: var(--ambar); }
.sol-02__lead {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.6; color: var(--navy); opacity: 0.7;
  flex: 0 1 calc(440 * var(--u)); max-width: calc(440 * var(--u)); margin-bottom: calc(4 * var(--u));
}
.sol-02__cards { display: flex; gap: calc(22 * var(--u)); }
/* Cabecera de tarjeta: nombre a la izquierda, isotipo a la derecha (misma altura) */
.sol-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(12 * var(--u)); margin-bottom: calc(10 * var(--u));
}
.sol-card__ic { flex: 0 0 auto; line-height: 0; }
.sol-card__ic svg,
.sol-card__ic img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: block; border-radius: calc(9 * var(--u)); object-fit: contain; }
.sol-card__ic--cloud svg { border-radius: 0; }
.sol-card {
  flex: 1; display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid rgba(22,50,82,0.14);
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  transition: background 0.35s ease, color 0.35s ease, border-color 0.3s ease,
              transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
/* Hover en TODAS las tarjetas (inicialmente blancas): fondo navy #163252 */
.sol-card:hover {
  transform: translateY(calc(-6 * var(--u)));
  background: var(--navy); border-color: transparent;
}
.sol-card:hover .sol-card__name,
.sol-card:hover .sol-card__desc { color: var(--blanco); }
.sol-card__badge {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(11 * var(--u));
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: calc(10 * var(--u));
}
.sol-card__name {
  font-family: "argent-cf", Georgia, serif; font-weight: 400;
  font-size: calc(26 * var(--u)); line-height: 1.1; margin-bottom: 0;
  transition: color 0.35s ease;
}
.sol-card__desc {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(14 * var(--u)); line-height: 1.55; opacity: 0.78; flex: 1;
  transition: color 0.35s ease;
}
.sol-card__cta {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(13 * var(--u));
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar);
  transition: gap 0.3s ease;
}
.sol-card__cta:hover { gap: calc(14 * var(--u)); }

/* (La antigua §03 interactiva —lista + detalle— se retiró: los servicios
   ahora viven en 3 slides de categoría con tarjetas; ver .sol-svc-sec.) */

/* — 04 · Cierre / Cotización (oscuro) —
   Fondo: retícula de ventanas iluminadas muy atenuada; el velo se abre
   hacia la derecha (el bloque de texto vive a la izquierda). */
.sol-04 {
  position: relative; background-color: var(--bg-oscuro); color: var(--blanco);
  height: 100vh; min-height: 600px; overflow: hidden;
}
.sol-04__bg { position: absolute; inset: 0; z-index: 1; }
.sol-04__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0.35; }
.sol-04__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14, 20, 29, 0.95) 30%, rgba(14, 20, 29, 0.5) 100%);
}
.sol-04__content {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center;
  padding: 0 calc(151 * var(--u)) 0 calc(207 * var(--u));
}
.sol-04__block { max-width: calc(620 * var(--u)); }
.sol-04__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(48 * var(--u)); line-height: 1.12; color: var(--blanco);
  margin-bottom: calc(20 * var(--u));
}
.sol-04__title em { font-style: italic; color: var(--ambar); }
.sol-04__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(16 * var(--u)); line-height: 1.6; color: rgba(255,255,255,0.72);
  max-width: calc(520 * var(--u)); margin-bottom: calc(34 * var(--u));
}
.sol-04__cta {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(13 * var(--u));
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); background: var(--ambar);
  padding: calc(16 * var(--u)) calc(36 * var(--u)); border: none; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.sol-04__cta:hover { background: var(--blanco); color: var(--navy); }
.sol-04 .nos-05__footer { color: rgba(255,255,255,0.55); border-top-color: rgba(255,255,255,0.16); }

/* ══════════════════════════════════════════════════════════════
   SOLUCIONES — RESPONSIVE (≤1024 tablet/móvil; ≤640 afina)
   Base 1366 intacta. --u ya está en 1px aquí (reset global ≤1024).
   El slider sigue por swipe → cada sección cabe en ~100svh, con aire.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero: foto a cubrir la pantalla (en móvil el ancho auto dejaba ver solo un
     borde); el velo izq. sigue dando legibilidad al titular. */
  .sol-hero .hero__bg { display: block; }
  .sol-hero .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
  /* Marquesina: de borde-a-borde dentro de los márgenes (ya no right:50%) */
  .sol-hero__marquee { left: var(--margen); right: var(--margen); bottom: calc(16 * var(--u)); }

  /* Productos: intro apilada + tarjetas en columna (anclado arriba, despeja el logo) */
  .sol-02__content { justify-content: flex-start; padding: calc(88 * var(--u)) var(--margen) calc(40 * var(--u)); }
  .sol-02__intro { flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .sol-02__lead { flex: none; max-width: none; }
  .sol-02__cards { flex-direction: column; gap: calc(12 * var(--u)); }

  /* Servicios editoriales: de la composición absoluta 2×2 a flujo apilado
     (foto + texto por servicio). Sin degradado lateral (era para el solape). */
  .sol-ed__content { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: calc(90 * var(--u)) var(--margen) calc(48 * var(--u)); }
  .sol-ed__pair { position: static; width: 100%; max-width: calc(560 * var(--u)); margin: 0 auto; height: auto; display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
  .sol-ed__photo, .sol-ed__text { position: static; width: 100%; height: auto; }
  .sol-ed__photo { height: 24svh; max-height: calc(180 * var(--u)); }
  .sol-ed__photo::after { display: none; }
  .sol-ed__photo--a { order: 1; } .sol-ed__text--a { order: 2; }
  .sol-ed__photo--b { order: 3; } .sol-ed__text--b { order: 4; }
  .sol-ed__text { display: block; }
  .sol-ed__text--b { text-align: left; }
  .sol-ed__text--b .sol-ed__text__desc, .sol-ed__text--b .sol-ed__text__rule { margin-left: 0; }
  .sol-ed__text__desc { max-width: none; }
  /* En reflow las dos versiones (normal y --alt) se apilan igual */
  .sol-ed-sec--alt .sol-ed__photo--a { top: auto; bottom: auto; }
  .sol-ed-sec--alt .sol-ed__photo--b { top: auto; bottom: auto; }
  .sol-ed-sec--alt .sol-ed__text--a  { top: auto; bottom: auto; }
  .sol-ed-sec--alt .sol-ed__text--b  { top: auto; bottom: auto; }

  /* Cierre: sin indent editorial */
  .sol-04__content { padding: 0 var(--margen); }
  .sol-04__block { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Tipografía móvil */
  .sol-02__title, .sol-ed__text__name { font-size: clamp(25px, 7vw, 30px); }
  .sol-04__title { font-size: clamp(28px, 7.5vw, 38px); }
  /* Productos: compactar para caber en una pantalla, con aire */
  .sol-02__lead { font-size: calc(13 * var(--u)); line-height: 1.4; }
  .sol-02__intro { margin-bottom: calc(14 * var(--u)); }
  .sol-card { padding: calc(14 * var(--u)) calc(18 * var(--u)); }
  .sol-card__head { margin-bottom: calc(8 * var(--u)); }
  .sol-card__desc { font-size: calc(13 * var(--u)); line-height: 1.4; }
  /* Editoriales: fotos algo más bajas + cuerpo compacto */
  .sol-ed__photo { height: 21svh; max-height: calc(168 * var(--u)); }
  .sol-ed__text__desc { font-size: calc(13 * var(--u)); line-height: 1.4; }
  .sol-hero__marquee { left: var(--margen); right: var(--margen); }
}

/* ══════════════════════════════════════════════════════════════
   SOLUCIONES — SCROLL CLÁSICO EN MÓVIL (≤640)
   Por la extensión del contenido, en móvil Soluciones abandona el slider de
   swipe y usa scroll nativo (JS: isSliderEnabled() = false → .home.is-static).
   El HERO (#sol-hero) y el CIERRE (#sol-04) siguen a pantalla completa
   (100svh, contenido absoluto); las secciones 2–6 pasan a ALTURA NATURAL con
   el contenido en flujo, mejor distribuido y con aire. Desktop/tablet intactos.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Secciones 2–6: altura natural (anula el min-height:100svh del modo estático) */
  .home.is-static #sol-02,
  .home.is-static #sol-03a, .home.is-static #sol-03b,
  .home.is-static #sol-03c, .home.is-static #sol-03d { height: auto; min-height: 0; }

  /* Contenido en flujo (no absoluto) para que la sección tome su alto real */
  .home.is-static #sol-02 .sol-02__content,
  .home.is-static .sol-ed__content { position: static; inset: auto; }

  /* Scroll continuo (2–6 = un solo flujo): se retira el logo repetido de cada
     sección —el burger fijo basta— y se unifica el espaciado vertical para que
     no se noten "divisiones" al scrolear. El logo del cierre (#sol-04) se queda. */
  .home.is-static #sol-02 .sol-02__logo,
  .home.is-static .sol-ed__brand { display: none; }

  /* Productos: tarjetas con aire; espaciado coherente con el resto del flujo */
  .home.is-static .sol-02__content { justify-content: flex-start; padding: 32px var(--margen) 24px; }
  .home.is-static .sol-02__cards { gap: 16px; }

  /* Editoriales: cada servicio (foto + texto) como bloque limpio; mismo ritmo */
  .home.is-static .sol-ed__content { padding: 24px var(--margen); }
  .home.is-static .sol-ed__pair { gap: 24px; max-width: none; }
  .home.is-static .sol-ed__photo { height: auto; max-height: none; aspect-ratio: 16 / 10; }
}

/* 10. RESPONSIVE — FULLPAGE EN TÁCTIL
   ═══════════════════════════════════════════════════════════
   IMPORTANTE: el layout base (desktop 1366×600) NO se toca. El slider fullpage
   sigue ACTIVO en tablet y móvil —navegación por swipe, con marco navy y reveals,
   como Varagon—; solo cae a scroll estático con prefers-reduced-motion o alturas
   ínfimas. Aquí cada sección se recompone como UNA pantalla (100svh) alta y
   estrecha. Sin dots: solo gesto. */

/* ── TABLET + MÓVIL (≤1024px) ── */
@media (max-width: 1024px) {
  /* Reset de --u a 1px: el escalado <1366 es solo para laptop (1025–1366); en
     tablet/móvil el reflow usa la unidad original con la que se construyó.
     --margen incluye los 11px del inset del ícono del burger, para que el
     padding IZQUIERDO de todo el contenido coincida con el hueco DERECHO del
     burger (su ícono). El botón del burger se retrae 11px para que su ícono
     siga exactamente donde estaba (no se mueve el lado derecho). */
  :root { --u: 1px; --margen: 59px; }

  .header__nav { display: none; }      /* la navegación pasa al burger */
  /* El burger queda siempre accesible (también en el hero); su botón se retrae
     11px (ancho 48 − ícono 26 = 11 de inset) para no mover el ícono. */
  .burger { opacity: 1; transform: none; pointer-events: auto; right: calc(var(--margen) - 11px); }

  /* Fullpage activo: ventana y slides a altura dinámica (svh) para que la barra
     del navegador no recorte; min-height:0 anula el 600px del desktop. */
  .home,
  .home__slide,
  .hero { height: 100svh; min-height: 0; }
  .home__dots { display: none; }       /* solo swipe, sin indicador lateral */

  /* Fallback estático (reduced-motion): apilar y permitir crecer */
  .home.is-static .home__slide { height: auto; min-height: 100svh; }

  /* Marco de transición más fino en pantallas estrechas */
  .home__slide__bar--x { height: 40px; }
  .home__slide__bar--y { width: 52px; }

  /* Menú: enlaces al tamaño del titular de tablet */
  .menu__link__text { font-size: clamp(32px, 5.2vw, 44px); }

  /* — HERO — */
  .hero__title { font-size: clamp(32px, 5.4vw, 46px); }
  .hero__content { bottom: 112px; }   /* separado de la línea inferior */
  .hero__bottom-line { right: calc(var(--margen) + 48px); }
  /* Barra diagonal: ≤1366 --u se ancla a 1px, así que la posicionamos
     proporcional al ancho (155/1366 = 11.35%) para que acompañe al viewport. */
  .hero__band { background-position: 11.35vw 0; }

  /* — SECCIÓN 02: imagen a fondo con velo claro; bloque de texto encima — */
  .home-02 { display: block; position: relative; }
  .home-02__image {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  }
  .home-02__image img { object-position: center; }
  /* Velo claro: el texto navy se lee sobre la foto */
  .home-02::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 44%,
      rgba(255,255,255,0.66) 78%, rgba(255,255,255,0.42) 100%);
  }
  .home-02__content {
    position: relative; z-index: 3;
    width: 100%; min-height: 100svh;
    align-items: center;
    padding: 0 var(--margen);
  }
  .home-02__block { margin-left: 0; max-width: 520px; }
  .home-02__eyebrow { gap: 28px; margin-bottom: var(--sp-3); }
  .home-02__title { font-size: clamp(30px, 5.2vw, 44px); }
  .home-02__text { max-width: 460px; }

  /* — SECCIÓN 03: fondo completo, contenido + cifras anclados abajo — */
  .home-03__eyebrow { top: 21svh; left: var(--margen); gap: 24px; }
  .home-03__content {
    left: var(--margen); right: var(--margen); top: auto; bottom: 80px;
    align-items: flex-start;
  }
  .home-03__block { max-width: 600px; }
  .home-03__title { font-size: clamp(30px, 5.2vw, 44px); }
  .home-03__subtitle { font-size: clamp(19px, 3vw, 24px); max-width: 480px; margin-bottom: var(--sp-6); }
  .home-03__stats { gap: 48px; }
  .home-03__overlay {
    background: linear-gradient(0deg,
      rgba(14,20,29,0.92) 0%, rgba(14,20,29,0.58) 46%, rgba(14,20,29,0.42) 100%);
  }

  /* — SECCIÓN 04: comprimida a una pantalla, lista de una columna — */
  .home-04__bg { opacity: 0.10; }
  .home-04__eyebrow { top: 21svh; left: var(--margen); gap: 24px; }
  .home-04__content {
    display: flex; flex-direction: column; justify-content: center;
    padding: 120px var(--margen) 40px;
  }
  .home-04__cols { flex-direction: column; gap: 0; padding-top: 0; }
  .home-04__col--left,
  .home-04__col--right { width: 100%; max-width: 560px; padding-left: 0; padding-top: 0; }
  .home-04__title { font-size: clamp(30px, 5.2vw, 42px); margin-bottom: var(--sp-3); }
  .home-04__item { padding: 12px 0; }
  .home-04__para { margin-top: var(--sp-4); max-width: 520px; }

  /* — SECCIÓN 05: bloque a la derecha, centrado verticalmente — */
  .home-05__eyebrow { top: 21svh; left: var(--margen); gap: 24px; }
  .home-05__content {
    justify-content: flex-end; align-items: center;
    padding: 150px calc(var(--margen) + 14px) 96px var(--margen);
  }
  .home-05__block { width: 300px; max-width: 76vw; text-align: right; }
  /* El título es un <img> display:block; margin-left:auto lo lleva al borde
     derecho del bloque (text-align no afecta a un bloque). */
  .home-05__title img { width: 260px; max-width: 68vw; margin-left: auto; }
  .home-05__divider { margin-bottom: var(--sp-3); }
  .home-05__subtitle { text-align: right; }
  .home-05__meta { align-items: flex-end; }
  /* Degradado vertical: claro arriba (donde va "CAFÉ con" en caoba, que necesita
     fondo claro para verse) y oscuro abajo (donde van los textos blancos). */
  .home-05__bg img { object-position: 30% center; }
  .home-05__overlay {
    background: linear-gradient(0deg,
      rgba(39,25,28,0.9) 0%, rgba(39,25,28,0.66) 26%,
      rgba(39,25,28,0.3) 56%, rgba(39,25,28,0.08) 80%, rgba(39,25,28,0.04) 100%);
  }
  .home-05__footer { bottom: 24px; }

  /* ════════ NOSOTROS (responsive) ════════ */

  /* NOS-02: foto a fondo con velo claro + texto encima (como home-02) */
  .nos-02 { display: block; position: relative; }
  .nos-02__image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  .nos-02::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 44%,
      rgba(255,255,255,0.74) 78%, rgba(255,255,255,0.55) 100%);
  }
  /* Anclado arriba con aire respecto al logo (antes centrado → el rótulo quedaba
     pegado al logo). */
  .nos-02__content {
    position: relative; z-index: 3; flex: none; width: 100%; min-height: 100svh;
    display: flex; align-items: flex-start; padding: 16svh var(--margen) 56px;
  }
  .nos-02__block { max-width: 540px; }
  .nos-02__eyebrow { gap: 28px; margin-bottom: var(--sp-3); }
  .nos-02__title { font-size: clamp(30px, 5.2vw, 44px); }
  .nos-02__text { max-width: 500px; }

  /* NOS-03: una columna — texto arriba, cifras debajo */
  /* La sección no necesita rótulo en táctil (se retira; en 1366 se conserva). */
  .nos-03__eyebrow { display: none; }
  .nos-03__content {
    flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 26svh var(--margen) 48px;
  }
  .nos-03__left  { flex: none; width: 100%; max-width: 600px; margin-bottom: var(--sp-6); }
  .nos-03__right { flex: none; width: 100%; padding-left: 0; }
  .nos-03__title { font-size: clamp(30px, 5.2vw, 44px); }
  .nos-03__text  { max-width: 540px; }
  /* Los anillos eran 220u (dos = 488px): desbordaban y empujaban las cifras y
     etiquetas fuera de pantalla. Se reducen para caber lado a lado con aire. */
  .nos-03__stats { gap: 28px; margin-bottom: var(--sp-4); justify-content: flex-start; flex-wrap: nowrap; }
  .nos-03__stat__wrap, .nos-03__stat__ring { width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
  .nos-03__stat__num { font-size: clamp(46px, 11vw, 62px); }
  .nos-03__stat__label { font-size: 13px; }
  .nos-03__note  { font-size: clamp(18px, 3.4vw, 22px); }

  /* NOS-04: foto a fondo con velo claro + texto encima */
  .nos-04 { display: block; position: relative; }
  .nos-04__image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  /* Velo más transparente: deja ver la foto de fondo conservando legibilidad
     del texto navy (un poco más denso en la franja central del texto). */
  .nos-04::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.66) 42%,
      rgba(255,255,255,0.5) 76%, rgba(255,255,255,0.3) 100%);
  }
  .nos-04__eyebrow { top: 21svh; left: var(--margen); gap: 24px; }
  .nos-04__content {
    position: relative; z-index: 3; flex: none; width: 100%; min-height: 100svh;
    display: flex; align-items: center; padding: 0 var(--margen);
  }
  .nos-04__block { max-width: 540px; }
  .nos-04__title { font-size: clamp(30px, 5.2vw, 44px); }
  .nos-04__text { max-width: 500px; }

  /* NOS-05: foto a sangre, contenido centrado arriba */
  .nos-05__content { top: 15svh; padding: 0 var(--margen); }
  .nos-05__eyebrow { gap: 24px; margin-bottom: var(--sp-6); }
  .nos-05__title { font-size: clamp(34px, 6vw, 52px); }
  .nos-05__text { max-width: 480px; }
  .nos-05__ph { padding-bottom: 16svh; }
}

/* ── MÓVIL (≤640px): afinado de tipografía, espaciados y márgenes ── */
@media (max-width: 640px) {
  /* 35 = 24 (margen móvil) + 11 (inset del ícono del burger): el padding
     izquierdo de todo el contenido = hueco derecho del burger. */
  :root { --margen: 35px; }

  .header__logo img { height: 30px; }
  .home-02__logo img,
  .home-03__logo img,
  .home-04__logo img,
  .home-05__logo img,
  .menu__logo img { width: 84px; }

  /* Rótulos: gap menor, un poco más arriba */
  .home-03__eyebrow,
  .home-04__eyebrow,
  .home-05__eyebrow { top: 22svh; gap: 16px; }
  .home-03__eyebrow__num, .home-03__eyebrow__label,
  .home-04__eyebrow__num, .home-04__eyebrow__label,
  .home-05__eyebrow__num, .home-05__eyebrow__label { font-size: 12px; }

  /* HERO */
  .hero__title { font-size: clamp(27px, 8vw, 36px); }
  /* Título un poco más arriba (left = --margen, que ya incluye el inset del burger). */
  .hero__content { bottom: 150px; }
  /* Foto encuadrada al fondo azul oscuro (la fachada navy de la foto está a la
     izquierda) en vez del centro claro de vidrio. */
  .hero:not([class*="-hero"]) .hero__bg img { object-position: left top; }

  /* SECCIÓN 02 */
  .home-02__title { font-size: clamp(28px, 8vw, 38px); }
  .home-02__eyebrow { gap: 20px; }
  .home-02__text { font-size: 15px; }

  /* SECCIÓN 03 */
  .home-03__title { font-size: clamp(27px, 8vw, 36px); }
  .home-03__subtitle { font-size: clamp(18px, 5.4vw, 22px); margin-bottom: var(--sp-4); }
  .home-03__stats { gap: 32px; }
  .home-03__stat { max-width: 150px; }
  .home-03__stat__num { font-size: 56px; }
  .home-03__stat__label { font-size: 13px; }

  /* SECCIÓN 04 */
  .home-04__content { padding: 104px var(--margen) 32px; }
  .home-04__title { font-size: clamp(28px, 8.4vw, 38px); }
  .home-04__item { padding: 10px 0; }
  .home-04__item__text { font-size: 14px; }
  .home-04__para { font-size: 14px; margin-top: var(--sp-3); }

  /* SECCIÓN 05 */
  .home-05__content { padding: 100px 40px 88px var(--margen); }
  .home-05__block { width: 260px; }
  .home-05__title img { width: 220px; }
  .home-05__subtitle { font-size: 15px; }
  .home-05__footer { font-size: 11px; bottom: 20px; }

  /* NOSOTROS móvil */
  .nos-02__logo img, .nos-03__logo img,
  .nos-04__logo img, .nos-05__logo img { width: 84px; }
  .nos-03__eyebrow, .nos-04__eyebrow { top: 22svh; gap: 16px; }
  .nos-03__eyebrow__num, .nos-03__eyebrow__label,
  .nos-04__eyebrow__num, .nos-04__eyebrow__label,
  .nos-05__eyebrow__num, .nos-05__eyebrow__label { font-size: 12px; }
  .nos-02__title, .nos-03__title, .nos-04__title { font-size: clamp(27px, 8vw, 36px); }
  .nos-02__text, .nos-03__text, .nos-04__text { font-size: 15px; }
  .nos-02__quote p { font-size: clamp(17px, 4.6vw, 20px); }
  /* Título (2 frases) en 2 líneas para que el rótulo no quede atrapado: se
     une la 1ª frase ocultando su <br> y se ajusta el cuerpo para que
     «La permanencia no se promete.» entre en una línea; «Se demuestra.» en la 2ª. */
  .nos-03__title { font-size: clamp(21px, 5.9vw, 26px); line-height: 1.2; }
  .nos-03__title br:first-of-type { display: none; }
  /* Anillos aún más compactos en teléfono (caben dos al lado con aire). */
  .nos-03__stats { gap: 22px; }
  .nos-03__stat__wrap, .nos-03__stat__ring { width: 132px; height: 132px; }
  .nos-03__stat__num { font-size: clamp(40px, 11vw, 50px); }
  .nos-03__stat__label { font-size: 12px; }
  .nos-03__note { font-size: clamp(17px, 4.6vw, 20px); }
  .nos-05__title { font-size: clamp(30px, 8.5vw, 44px); }
  /* Hero: foto anclada al extremo superior-derecho, hacia abajo. Como el
     encuadre ya no deja una zona oscura bajo el titular, se añade un velo
     inferior para que el título blanco siga legible. */
  .nos-hero .hero__bg img { object-position: right top; }
  .nos-hero .hero__bg::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(14,20,29,0.9) 0%, rgba(14,20,29,0.55) 22%, rgba(14,20,29,0) 50%);
  }
  .nos-05__text { font-size: 15px; }

  /* MENÚ: enlaces al tamaño del titular móvil; y la nav se ancla al margen
     izquierdo (en desktop está a 240px = centro-izquierda, que en móvil empujaba
     los enlaces fuera de pantalla por la derecha). Alineada con el logo del menú. */
  .menu__link__text { font-size: clamp(28px, 8vw, 38px); }
  .menu__nav { left: var(--margen); }
}

/* ── MÓVIL PEQUEÑO Y BAJO (iPhone SE y similares) ──
   Solo teléfonos angostos Y de poca altura. La doble condición width+height
   excluye por completo el desktop 1366×600 (demasiado ancho) y los móviles
   altos (que ya se ven bien con el rótulo en svh). En tan poca altura el
   rótulo en svh chocaba con el contenido centrado: lo fijamos arriba y el
   contenido dejado fluir desde debajo. */
@media (max-width: 640px) and (max-height: 700px) {
  /* Solo la sección 04 necesita el rótulo fijo arriba: su contenido va
     centrado y, en tan poca altura, el título subía por encima del rótulo.
     Lo fijamos arriba y dejamos fluir el contenido desde debajo.
     Las secciones 03 y 05 conservan su rótulo en svh (cerca del contenido). */
  .home-04__eyebrow { top: 100px; }
  .home-04__content { justify-content: flex-start; padding-top: 132px; }

  /* Sección 05: el bloque centrado baja un poco para no pegarse al rótulo. */
  .home-05__content { padding-top: 150px; padding-bottom: 78px; }
}


/* ═══════════════════════════════════════════════════════════
   11. LANDING SISCONT (siscont.html) — página de scroll
   Misma gramática que Inicio/Nosotros/Soluciones: grid asimétrico
   (contenido indentado a 207px, margen derecho --margen), logo por
   sección, eyebrow núm+label (TT 14/400, gap 56), H2 Argent 40/48,
   hairlines y CTA ámbar uppercase. Hero oscuro con líneas → secciones
   claras navy/blanco → cierre oscuro (puente cromático ICM↔SISCONT).
   ─────────────────────────────────────────────────────────── */
.page-siscont { background: var(--bg-oscuro); }
html:has(body.page-siscont) { scroll-behavior: smooth; }
.sis { position: relative; }

/* Los reveals de entrada por slide los gobierna el motor genérico de home.js
   (atributos data-reveal), igual que el resto del sitio. */

/* — Marca fija (solo esta página): un único logo que acompaña el scroll.
   Página de scroll → las secciones no encajan en una pantalla, así que el
   logo por-sección del slider se sustituye por uno fijo en la posición
   canónica (top 48, left margen). Dos variantes apiladas (blanco/navy) con
   crossfade según el tema de la sección visible (lo conmuta siscont.js). — */
.page-siscont .header__logo { visibility: hidden; }   /* la marca fija lo reemplaza */
.sis-brand {
  position: fixed; top: calc(48 * var(--u)); left: var(--margen);
  z-index: 60;                       /* sobre el header (50), bajo menú (150) */
  display: block; width: calc(96 * var(--u));
}
.sis-brand img { width: 100%; height: auto; display: block; transition: opacity 0.45s ease; }
.sis-brand__dark { position: absolute; top: 0; left: 0; opacity: 0; }
.sis-brand.on-light .sis-brand__light { opacity: 0; }
.sis-brand.on-light .sis-brand__dark  { opacity: 1; }
/* El menú abierto lo cubre (z150); el modal de contacto (z300) también. */

/* — Eyebrow canónico (núm + label, baseline, gap 56) — */
.sis-eyebrow {
  display: flex; align-items: baseline; gap: calc(56 * var(--u));
  margin-bottom: calc(22 * var(--u));
}
.sis-eyebrow__num, .sis-eyebrow__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: 0.02em;
  color: var(--navy);
}
.sis-eyebrow--light .sis-eyebrow__num,
.sis-eyebrow--light .sis-eyebrow__label { color: rgba(255, 255, 255, 0.82); }

/* — Botones (patrón sol-04__cta: uppercase 13, ámbar → hover blanco) — */
.sis-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(10 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u)); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: calc(16 * var(--u)) calc(36 * var(--u));
  border: none; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sis-btn--primary { background: var(--ambar); color: var(--navy); }
.sis-btn--primary:hover { background: var(--blanco); color: var(--navy); }
/* El ghost solo aparece sobre superficies oscuras (panel navy, cierre) */
.sis-btn--ghost {
  background: transparent; color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: calc(15 * var(--u)) calc(34 * var(--u));
}
.sis-btn--ghost:hover { border-color: var(--ambar); color: var(--ambar); }
.sis-btn svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex-shrink: 0; }
.sis-btn--primary:hover svg { transform: translateX(calc(3 * var(--u))); }
.sis-btn svg { transition: transform 0.3s ease; }

/* — Enlace-CTA con flecha (patrón sol-card__cta: uppercase ámbar, gap crece) — */
.sis-link {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u)); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar);
  transition: gap 0.3s ease;
}
.sis-link:hover { gap: calc(14 * var(--u)); }

/* ── 01 · HERO ─────────────────────────────────────────────── */
/* Fondo fotográfico: skyline a la hora azul (navy + luces ámbar). Sin banda
   diagonal aquí → la foto respira más que en Inicio (0.55 vs 0.16) y las
   líneas WebGL van encima. Un velo inferior asienta el tagline y los CTA. */
.sis-hero .hero__bg img { opacity: 1; object-position: center 64%; }
/* Overlay oscuro con ventana diagonal (barra.svg como máscara):
   el overlay cubre el 100%; donde coincide con la barra la foto es visible. */
.sis-hero__band {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(14, 20, 29, 0.82);
  -webkit-mask:
    linear-gradient(#000, #000) no-repeat 0 0 / 100% 100%,
    url('../media/images/barra.svg') no-repeat calc(490 * var(--u)) 0 / auto 100%;
  -webkit-mask-composite: destination-out;
  mask:
    linear-gradient(#000, #000) no-repeat 0 0 / 100% 100%,
    url('../media/images/barra.svg') no-repeat calc(490 * var(--u)) 0 / auto 100%;
  mask-composite: exclude;
}
.sis-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 52%;
  z-index: 4; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 20, 29, 0.78), rgba(14, 20, 29, 0) 100%);
}
.sis-hero__content {
  bottom: calc(120 * var(--u));
  left: auto;
  right: calc(160 * var(--u));
  text-align: right;
}
.sis-hero__eyebrow {
  display: block;
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(12 * var(--u)); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: calc(20 * var(--u));
}
.sis-dl-row { display: flex; gap: calc(16 * var(--u)); margin-top: calc(40 * var(--u)); flex-wrap: wrap; justify-content: flex-end; }
.sis-dl {
  display: inline-flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--blanco);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.sis-dl__ic { color: var(--ambar); flex-shrink: 0; }
.sis-dl__ic svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); display: block; }
.sis-dl__t { display: flex; flex-direction: column; line-height: 1.2; }
.sis-dl__t small { font-family: "tt-commons-pro", system-ui, sans-serif; font-size: calc(10 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
.sis-dl__t strong { font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 600; font-size: calc(15 * var(--u)); }
.sis-dl:hover { border-color: var(--ambar); background: rgba(255, 169, 14, 0.08); transform: translateY(-2px); }

/* ── 02 · BANNER (flyer) — el arte de SISCONT, enmarcado en claro ── */
.sis-flyer {
  position: relative; overflow: hidden;
  background: var(--blanco);
  padding: calc(56 * var(--u)) var(--margen);
  display: flex; align-items: center; justify-content: center;
}
/* Fondo inclinado -14.3° al 40% (sobrescalado para cubrir las esquinas) */
.sis-flyer__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.sis-flyer__bg img {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.40; transform: translate(-50%, -50%) rotate(-14.3deg) scale(1.4);
}
.sis-flyer__inner {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; width: 100%; max-width: calc(920 * var(--u));
}
.sis-flyer__heading {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(40 * var(--u)); line-height: 1.12; color: var(--navy);
  text-align: center; margin: 0 0 calc(28 * var(--u));
}
.sis-flyer__heading em { font-style: italic; color: var(--ambar); }
.sis-flyer__frame {
  margin: 0;
  border: 1px solid rgba(22, 50, 82, 0.14);
  padding: calc(10 * var(--u));
  background: var(--blanco);
  width: 100%;
}
.sis-flyer__frame img { width: 100%; height: auto; max-height: calc(360 * var(--u)); object-fit: contain; display: block; }
.sis-flyer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(24 * var(--u)); width: 100%; margin-top: calc(20 * var(--u));
}
.sis-flyer__legend {
  margin: 0;
  font-family: "tt-commons-pro", system-ui, sans-serif; font-style: italic;
  font-size: calc(12 * var(--u)); color: rgba(22, 50, 82, 0.55);
}
/* CTA que apunta al botón ámbar — exclusivo de esta sección */
.sis-flyer__cta {
  display: inline-flex; align-items: center; gap: calc(16 * var(--u));
  flex-shrink: 0; text-decoration: none; color: var(--navy);
}
.sis-flyer__cta__label {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u)); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
}
.sis-flyer__cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border-radius: 50%; background: var(--ambar); color: var(--navy);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.sis-flyer__cta__btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sis-flyer__cta:hover .sis-flyer__cta__btn {
  transform: translateX(calc(4 * var(--u)));
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 169, 14, 0.18);
}

/* ── 03 · LICENCIA (oscuro; título centrado + 3 bloques) ───── */
.sis-lic {
  position: relative; background: var(--bg-oscuro); color: var(--blanco);
  padding: calc(72 * var(--u)) var(--margen);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.sis-lic__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sis-lic__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Velo plano al 75% sobre toda la imagen */
.sis-lic__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(14, 20, 29, 0.75);
}
/* Ventana diagonal (barra.svg recreada con clip-path, X=155): revela la
   foto de fondo a opacidad plena por encima del velo del 75%, sin SVG
   externo ni máscara — soporte universal. */
.sis-lic__band {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-clip-path: polygon(calc(626 * var(--u)) 0, calc(409.265 * var(--u)) 0, calc(155 * var(--u)) 100%, calc(391.138 * var(--u)) 100%);
  clip-path: polygon(calc(626 * var(--u)) 0, calc(409.265 * var(--u)) 0, calc(155 * var(--u)) 100%, calc(391.138 * var(--u)) 100%);
}
.sis-lic__band img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.4) saturate(1.1); }
.sis-lic__inner { display: block; position: relative; z-index: 3; }
.sis-lic__heading {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(40 * var(--u)); line-height: 1.12; color: var(--blanco);
  text-align: center; margin-bottom: calc(48 * var(--u));
}
/* 3 columnas editoriales: cada propuesta de valor ocupa un tercio */
.sis-lic__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 calc(48 * var(--u));
}
.sis-lic__heading em { font-style: italic; color: var(--ambar); }
.sis-vblock {
  padding: calc(30 * var(--u)) calc(20 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sis-vblock__ic {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ambar); margin-bottom: calc(18 * var(--u));
}
.sis-vblock__ic svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.sis-vblock__rotule {
  display: block;
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(11 * var(--u)); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: calc(10 * var(--u));
}
.sis-vblock__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300; font-style: italic;
  font-size: calc(22 * var(--u)); line-height: 1.2; color: var(--blanco);
  margin-bottom: calc(8 * var(--u));
}
.sis-vblock__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.6; color: var(--blanco);
  opacity: 0.7; max-width: calc(520 * var(--u));
}

.sis-lic__panel {
  background: var(--navy); color: var(--blanco);
  padding: calc(40 * var(--u)) calc(36 * var(--u));
  position: sticky; top: calc(40 * var(--u));
}
.sis-lic__sel {
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding-bottom: calc(24 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.sis-lic__step {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.3); color: var(--blanco);
  font-size: calc(22 * var(--u)); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.sis-lic__step:hover { border-color: var(--ambar); color: var(--ambar); }
.sis-lic__count { flex: 1; text-align: center; font-family: "argent-cf", Georgia, serif; font-weight: 400; font-size: calc(30 * var(--u)); }
.sis-lic__count__u { font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300; font-size: calc(14 * var(--u)); opacity: 0.7; }
.sis-lic__scope {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(11 * var(--u)); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6;
  margin: calc(26 * var(--u)) 0 calc(16 * var(--u));
}
.sis-lic__list { list-style: none; display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.sis-lic__list li {
  position: relative; padding-left: calc(22 * var(--u));
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.45;
}
.sis-lic__list li::before {
  content: ''; position: absolute; left: 0; top: calc(8 * var(--u));
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: var(--ambar);
}
.sis-lic__actions { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(30 * var(--u)); }
.sis-lic__micro {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-style: italic;
  font-size: calc(12 * var(--u)); line-height: 1.5; opacity: 0.6;
  margin-top: calc(16 * var(--u));
}

/* ── 04 · MÓDULOS (claro; patrón home-02: contenido izq + foto der a sangre)
   Foto: arquitectura corporativa en contrapicado diagonal, tono frío
   azul-acero con reflejo ámbar (misma colorimetría que bgk.home.hero). ── */
.sis-mods {
  position: relative; display: flex;
  background: var(--blanco); color: var(--navy);
  border-top: 1px solid rgba(22, 50, 82, 0.08);
  overflow: hidden;
}
.sis-mods__body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: calc(72 * var(--u)) calc(72 * var(--u)) calc(72 * var(--u)) calc(207 * var(--u));
}
.sis-mods__intro { max-width: calc(640 * var(--u)); margin-bottom: calc(48 * var(--u)); }
.sis-mods__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(40 * var(--u)); line-height: 1.12; color: var(--navy);
  margin-bottom: calc(14 * var(--u));
}
.sis-mods__title em { font-style: italic; color: var(--ambar); }
.sis-mods__lead {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.6; color: var(--navy); opacity: 0.7;
  max-width: calc(560 * var(--u));
}
/* 3 módulos en fila, contenido centrado (ícono + nº arriba) */
.sis-mods__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--u)); }
.sis-mod { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sis-mod__head {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  margin-bottom: calc(16 * var(--u));
}
.sis-mod__ic { color: var(--ambar); display: inline-flex; }
.sis-mod__ic svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); display: block; }
.sis-mod__num {
  font-family: "tt-commons-pro", system-ui, sans-serif;
  font-size: calc(13 * var(--u)); font-weight: 500; letter-spacing: 0.1em;
  color: rgba(22, 50, 82, 0.4);
}
.sis-mod__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300; font-style: italic;
  font-size: calc(21 * var(--u)); line-height: 1.2; color: var(--navy);
  margin-bottom: calc(10 * var(--u));
}
.sis-mod__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(14 * var(--u)); line-height: 1.55; color: var(--navy); opacity: 0.72;
}
.sis-mods__media { flex: 0 0 24%; position: relative; overflow: hidden; }
.sis-mods__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ── 05 · SERVICIOS CONTINUOS (oscuro; grilla hairline) ──────
   Fondo: equipo trabajando de noche bajo un velo navy denso (mismo trato
   que home-03: foto + overlay para legibilidad; la foto solo aporta clima). */
.sis-serv {
  position: relative; overflow: hidden;
  background: var(--bg-oscuro); color: var(--blanco);
  padding: calc(120 * var(--u)) var(--margen) calc(40 * var(--u)) calc(207 * var(--u));
  display: flex; flex-direction: column; justify-content: flex-start;
}
.sis-serv__bg { position: absolute; inset: 0; z-index: 0; }
.sis-serv__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0.42; }
.sis-serv__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(14, 20, 29, 0.74);
}
.sis-serv__inner { position: relative; z-index: 2; }
.sis-serv__intro { max-width: calc(820 * var(--u)); margin-bottom: calc(40 * var(--u)); }
.sis-serv__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(40 * var(--u)); line-height: 1.12; color: var(--blanco);
  margin-bottom: calc(14 * var(--u));
}
.sis-serv__title em { font-style: italic; color: var(--ambar); }
.sis-serv__lead {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(15 * var(--u)); line-height: 1.6; color: rgba(255, 255, 255, 0.66);
  max-width: none;
}
/* Celdas abiertas con hairline (mismo lenguaje editorial que sis-vblock / sis-bridge) */
.sis-serv__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: calc(64 * var(--u)); row-gap: 0;
}
.sis-sv {
  padding: calc(16 * var(--u)) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.sis-sv__ic { color: var(--ambar); display: block; margin-bottom: calc(11 * var(--u)); }
.sis-sv__ic svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); display: block; }
.sis-sv__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(21 * var(--u)); line-height: 1.2; color: var(--blanco);
  margin-bottom: calc(10 * var(--u));
}
.sis-sv__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(14 * var(--u)); line-height: 1.55; color: rgba(255, 255, 255, 0.66);
}

/* ── 06 · PUENTE A ICM (claro) ─────────────────────────────── */
.sis-bridge {
  position: relative; background: var(--blanco); color: var(--navy);
  padding: calc(60 * var(--u)) var(--margen);
  border-top: 1px solid rgba(22, 50, 82, 0.08);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
/* Imagen de fondo muy tenue: el blanco sigue siendo el lienzo */
.sis-bridge__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sis-bridge__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.06; }
.sis-bridge__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}
.sis-bridge__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(40 * var(--u)); line-height: 1.12; color: var(--navy);
  text-align: center; margin-bottom: calc(44 * var(--u));
}
.sis-bridge__title em { font-style: italic; color: var(--ambar); }
/* 4 círculos de valor conectados (Venn encadenado + nodos ámbar en cada intersección) */
.sis-bridge__venn { display: flex; justify-content: center; align-items: center; }
.sis-vc {
  position: relative; flex: 0 0 auto;
  width: calc(215 * var(--u)); height: calc(215 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(22, 50, 82, 0.28);
  background: rgba(22, 50, 82, 0.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 calc(34 * var(--u));
  margin-left: calc(-32 * var(--u));
  transition: background 0.35s ease, border-color 0.35s ease;
}
.sis-vc:first-child { margin-left: 0; }
.sis-vc:hover { background: rgba(255, 169, 14, 0.10); border-color: var(--ambar); z-index: 5; }
/* Nodo ámbar en el cruce real de los trazos (vesica): x≈16u desde el borde
   izq. del círculo, y≈56u por encima del centro (r≈107.5u, dist. centros 183u). */
.sis-vc + .sis-vc::before {
  content: ''; position: absolute;
  left: calc(16 * var(--u)); top: calc(50% - 56 * var(--u));
  width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%;
  background: var(--ambar); transform: translate(-50%, -50%);
}
.sis-vc__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(19 * var(--u)); line-height: 1.15; color: var(--navy);
  margin-bottom: calc(6 * var(--u)); position: relative; z-index: 1;
}
.sis-vc__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(12.5 * var(--u)); line-height: 1.4; color: var(--navy); opacity: 0.68;
  position: relative; z-index: 1;
}
.sis-bridge__cta { display: flex; justify-content: center; margin-top: calc(44 * var(--u)); }

/* Entrada: los 4 círculos llegan desde distintos lados, se intersectan y
   luego aparece el texto (se dispara al activarse el slide). */
@keyframes vc-from-left   { 0% { opacity: 0; transform: translateX(calc(-160 * var(--u))); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes vc-from-top    { 0% { opacity: 0; transform: translateY(calc(-160 * var(--u))); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes vc-from-bottom { 0% { opacity: 0; transform: translateY(calc(160 * var(--u))); }  100% { opacity: 1; transform: translateY(0); } }
@keyframes vc-from-right  { 0% { opacity: 0; transform: translateX(calc(160 * var(--u))); }  100% { opacity: 1; transform: translateX(0); } }
@keyframes vc-text-in     { 0% { opacity: 0; } 100% { opacity: 1; } }
/* El delay (~0.55s) deja que el slide termine de entrar (DURATION 1.0s, el
   contenido se revela a 0.45s) antes de que los círculos lleguen, para que la
   animación se vea ya con la sección a la vista y no durante el barrido. */
.home__slide.is-active .sis-vc {
  animation-duration: 0.95s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.home__slide.is-active .sis-vc:nth-child(1) { animation-name: vc-from-left;   animation-delay: 0.95s; }
.home__slide.is-active .sis-vc:nth-child(2) { animation-name: vc-from-top;    animation-delay: 1.08s; }
.home__slide.is-active .sis-vc:nth-child(3) { animation-name: vc-from-bottom; animation-delay: 1.02s; }
.home__slide.is-active .sis-vc:nth-child(4) { animation-name: vc-from-right;  animation-delay: 1.15s; }
.home__slide.is-active .sis-vc__title,
.home__slide.is-active .sis-vc__text {
  animation: vc-text-in 0.55s ease both; animation-delay: 2.1s;
}
@media (prefers-reduced-motion: reduce) {
  .home__slide.is-active .sis-vc,
  .home__slide.is-active .sis-vc__title,
  .home__slide.is-active .sis-vc__text { animation: none; }
  /* Modo scroll: sin animación de entrada, los círculos quedan visibles. */
  .sis-bridge .sis-vc { opacity: 1 !important; animation: none !important; }
}

/* ── 07 · CIERRE (oscuro; patrón sol-04: alineado a la izquierda) ──
   Fondo: skyline al anochecer (ventanas ámbar) muy atenuado + velo que se
   abre hacia la derecha — eco del hero, cierra el ciclo cromático. */
.sis-close {
  position: relative; overflow: hidden;
  background: var(--bg-oscuro); color: var(--blanco);
  padding: calc(64 * var(--u)) var(--margen) calc(104 * var(--u)) calc(207 * var(--u));
  display: flex; flex-direction: column; justify-content: center;
}
/* Footer anclado al borde inferior; el bloque de cierre se centra vertical */
.sis-close .nos-05__footer {
  position: absolute; left: calc(207 * var(--u)); right: var(--margen);
  bottom: calc(40 * var(--u)); z-index: 2;
}
.sis-close__bg { position: absolute; inset: 0; z-index: 0; }
.sis-close__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; opacity: 0.45; }
.sis-close__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14, 20, 29, 0.96) 28%, rgba(14, 20, 29, 0.55) 100%);
}
.sis-close .hero__grain { z-index: 1; }
.sis-close__inner { position: relative; z-index: 2; max-width: calc(620 * var(--u)); }
.sis-close__title {
  font-family: "argent-cf", Georgia, serif; font-weight: 300;
  font-size: calc(48 * var(--u)); line-height: 1.12; color: var(--blanco);
  margin-bottom: calc(20 * var(--u));
}
.sis-close__title em { font-style: italic; color: var(--ambar); }
.sis-close__text {
  font-family: "tt-commons-pro", system-ui, sans-serif; font-weight: 300;
  font-size: calc(16 * var(--u)); line-height: 1.6; color: rgba(255, 255, 255, 0.72);
  max-width: calc(520 * var(--u)); margin-bottom: calc(34 * var(--u));
}
.sis-close__actions { display: flex; gap: calc(16 * var(--u)); flex-wrap: wrap; }
/* Footer canónico (.nos-05__footer) dentro del cierre, sobre oscuro — mismo
   override que sol-04 */
.sis-close .nos-05__footer {
  color: rgba(255, 255, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* ── RESPONSIVE LANDING ────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-siscont .header { display: none; }
  .sis-brand { width: 84px; }
  /* El indent editorial de 207px colapsa al margen de página en scroll mode */
  .sis-flyer, .sis-lic, .sis-serv, .sis-bridge, .sis-close {
    padding: 76px var(--margen);
  }
  .sis-lic__cols { grid-template-columns: 1fr; gap: 0; }
  /* Módulos: la foto pasa a banda inferior (mismo trato que las fotos de
     columna del resto del sitio en táctil) */
  .sis-mods { flex-direction: column; padding: 0; }
  .sis-mods__body { flex: none; padding: 76px var(--margen); }
  .sis-mods__media { flex: none; height: 240px; }
  .sis-serv__grid { grid-template-columns: repeat(2, 1fr); }
  /* Flyer (sección 2): contenido CENTRADO verticalmente (el flex-start lo dejaba
     pegado al logo con un gran vacío abajo) y el pie (leyenda + CTA) APILADO y
     centrado, en vez del split izquierda/derecha del desktop. */
  .sis-flyer { align-items: center; }
  .sis-flyer__heading { font-size: clamp(28px, 7vw, 38px); margin-bottom: 22px; }
  .sis-flyer__foot { flex-direction: column; align-items: center; gap: 18px; margin-top: 26px; text-align: center; }
  .sis-flyer__cta { order: 1; }                              /* CTA primero (acción) */
  .sis-flyer__legend { order: 2; max-width: 300px; }        /* disclaimer debajo */
}
@media (max-width: 640px) {
  /* Hero CENTRADO (texto + botones) con aire, en vez del anclaje abajo-derecha
     del desktop, que en móvil se veía cortado y desalineado. */
  .sis-hero__content {
    top: 0; left: 0; right: 0; bottom: 0; text-align: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 104px var(--margen) 92px;
  }
  .sis-hero .hero__title { font-size: clamp(30px, 7vw, 40px); align-items: center; text-align: center; }
  /* Botones apilados, centrados y algo más compactos (mantienen el aire) */
  .sis-dl-row { flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: nowrap; }
  .sis-dl { width: 100%; max-width: 268px; justify-content: center; gap: 12px; padding: 12px 18px; }
  .sis-dl__t { text-align: left; }
  .sis-lic__heading, .sis-mods__title, .sis-serv__title, .sis-bridge__title { font-size: clamp(28px, 6.4vw, 36px); }
  .sis-close__title { font-size: clamp(30px, 7vw, 40px); }
  .sis-serv__grid { grid-template-columns: 1fr; }
  /* Sección 4 (módulos): las 3 tarjetas se apilan (estaban en 3 columnas
     comprimidas y se cortaban). */
  .sis-mods__list { grid-template-columns: 1fr; gap: 26px; }
  /* Sección 6 (puente): venn 2×2 — DOS por fila, solapados, con el punto ámbar
     en el cruce de cada par. La entrada se dispara por scroll (.is-inview). */
  .sis-bridge__venn { flex-wrap: wrap; justify-content: center; gap: 14px 0; max-width: 320px; margin: 0 auto; }
  .sis-vc { width: 158px; height: 158px; padding: 0 18px; }
  .sis-vc:nth-child(odd)  { margin-left: 0; }       /* inicia su fila */
  .sis-vc:nth-child(even) { margin-left: -32px; }   /* solapa al de su izquierda */
  .sis-vc__title { font-size: 15px; margin-bottom: 3px; }
  .sis-vc__text  { font-size: 11px; }
  .sis-vc + .sis-vc::before { display: none; }
  .sis-vc:nth-child(even)::before {                 /* punto ámbar en el cruce del par */
    content: ''; display: block; position: absolute;
    left: 16px; top: calc(50% - 47px);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ambar); transform: translate(-50%, -50%); z-index: 4;
  }
  /* Entrada por scroll: cada par llega de lados opuestos y se intersecta; luego
     aparece el texto. Pre-oculto para evitar parpadeo antes de animar. */
  .sis-bridge:not(.is-inview) .sis-vc { opacity: 0; }
  .sis-bridge.is-inview .sis-vc {
    animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-fill-mode: both;
  }
  .sis-bridge.is-inview .sis-vc:nth-child(1) { animation-name: vc-from-left;  animation-delay: 0.05s; }
  .sis-bridge.is-inview .sis-vc:nth-child(2) { animation-name: vc-from-right; animation-delay: 0.18s; }
  .sis-bridge.is-inview .sis-vc:nth-child(3) { animation-name: vc-from-left;  animation-delay: 0.30s; }
  .sis-bridge.is-inview .sis-vc:nth-child(4) { animation-name: vc-from-right; animation-delay: 0.42s; }
  .sis-bridge.is-inview .sis-vc__title,
  .sis-bridge.is-inview .sis-vc__text { animation: vc-text-in 0.5s ease both; animation-delay: 0.9s; }
  .sis-close__actions .sis-btn { width: 100%; }
  /* Footer (sección 7): el indent editorial de 207px del desktop NO se anulaba
     en móvil → empujaba el footer a una columna estrecha a la derecha (la leyenda
     se partía en 4 líneas y el crédito quedaba cortado). Se alinea al margen y se
     apila a la izquierda, dejando libre la esquina inferior derecha del WhatsApp. */
  .sis-close .nos-05__footer {
    left: var(--margen);
    flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u));
  }

  /* SISCONT en SCROLL (móvil): las secciones densas 3 (licencia), 4 (módulos) y
     5 (servicios) pasan a ALTURA NATURAL para que su contenido no se recorte y
     se recupere el espacio. Hero, flyer, puente y cierre siguen a 100svh. El
     chrome del logo (.sis-brand) y el burger ya los conmuta siscont.js por IO. */
  .home.is-static #sis-lic,
  .home.is-static #sis-mods,
  .home.is-static #sis-serv { height: auto; min-height: 0; }
}