/* ============================================================
   ENSO MEDIA — Home horizontal
   Recorrido lateral: la página avanza de izquierda a derecha.
   Hoja independiente: no depende de base.css ni de style.css,
   porque aquí el color es dual (oscuro / claro).
   ============================================================ */

@font-face {
  font-family: "Oceania";
  src: url("../assets/fonts/Oceania-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Titling";
  src: url("../assets/fonts/Ubuntu-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   Tokens
   Los nombres son semánticos (fondo / tinta / marca) justo para
   que el tema claro sea un solo bloque de sobrescritura y no una
   cacería de #000 por toda la hoja.
   ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  --marca: #ebdb00;         /* Amarillo Enso */
  --naranja: #f3b000;
  --marca-tinta: #ebdb00;   /* el amarillo cuando hace de TEXTO */
  --blanco: #ffffff;
  --negro: #000000;
  --wa: #25d366;            /* verde de WhatsApp: marca ajena, no nuestra */

  --fondo: #050505;
  --fondo-2: #0d0d0c;
  --fondo-3: #161614;
  /* Base opaca de los paneles oscuros: no cambia con el tema, por eso
     vive fuera de los pares claro/oscuro. Estaba escrito a mano en
     cuatro hojas distintas. */
  --negro-panel: #050505;
  --error: #ff9a8b;
  --sobre-marca: #0b0b0a;
  --wa-tinta: #05300f;
  --velo: 0 0 0;            /* rgb del velo sobre fotografía */

  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.68);
  --tinta-tenue: rgba(255, 255, 255, 0.55);
  --linea: rgba(255, 255, 255, 0.14);
  --linea-fuerte: rgba(255, 255, 255, 0.3);

  --vidrio: rgba(10, 10, 9, 0.72);
  --foto-brillo: 1;

  --display: "Ubuntu Titling", "Ubuntu", system-ui, sans-serif;
  --texto-font: "Oceania", "Ubuntu", system-ui, sans-serif;

  /* Tipografía: la misma escala que el home vertical, para que las
     dos versiones se lean como el mismo sitio. */
  --fs-hero: clamp(2.4rem, 5vw, 5.6rem);
  --fs-h2: clamp(1.8rem, 3.2vw, 3.3rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.85rem);
  --fs-lead: clamp(1rem, 1.25vw, 1.28rem);
  --fs-body: clamp(0.95rem, 1vw, 1.05rem);
  --fs-micro: clamp(0.66rem, 0.74vw, 0.76rem);

  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-2xl: 4rem;

  --flow-sm: clamp(1rem, 1.6vw, 1.5rem);
  --flow-md: clamp(1.5rem, 2.4vw, 2rem);
  --flow-lg: clamp(2rem, 3.6vw, 3rem);
  --flow-xl: clamp(3rem, 5vw, 4rem);

  /* Multiplicador de los desfases verticales del recorrido lateral.
     Cada margen o relleno escalonado se escribe contra esta variable, así
     que apagarlos en una pantalla nueva es cambiar UN número. Antes cada
     desfase había que acordarse de resetearlo abajo, y tres se quedaron
     encendidos en móvil. */
  --desfase: 1;

  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --radio-sm: 8px;
  --radio: 16px;

  --z-elevado: 10;
  --z-flotante: 30;
  --z-menu: 40;
  --z-header: 50;
  --z-preloader: 80;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tema="claro"] {
  color-scheme: light;

  /* Sobre papel el amarillo de marca es ilegible como texto (1.3:1).
     Se conserva como RELLENO y baja a una versión tostada como TINTA. */
  --marca-tinta: #6b5c00;
  --blanco: #ffffff;

  --fondo: #f3f2ee;
  --fondo-2: #e8e6df;
  --fondo-3: #dedbd1;
  --velo: 243 242 238;

  --tinta: #0b0b0a;
  --tinta-suave: rgba(11, 11, 10, 0.74);
  --tinta-tenue: rgba(11, 11, 10, 0.62);
  --linea: rgba(11, 11, 10, 0.16);
  --linea-fuerte: rgba(11, 11, 10, 0.34);

  --vidrio: rgba(243, 242, 238, 0.78);
  --foto-brillo: 0.96;
}

*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto-font);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: rgba(235, 219, 0, 0.3); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6);
}

[data-tema="claro"] :focus-visible { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85); }

.salto {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-preloader);
  padding: var(--space-xs) var(--space-md);
  border-radius: 100px;
  background: var(--marca);
  color: var(--negro);
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease);
}

.salto:focus-visible { transform: translateY(0); }

/* Sólo para lectores de pantalla: fuera de la vista, dentro del árbol
   de accesibilidad. Sin width/height en cero, que algunos lectores saltan. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Tipografía de marca
   ============================================================ */

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
  -webkit-user-select: none;
  user-select: none;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--marca-tinta);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.eyebrow::before {
  content: "";
  width: var(--space-md);
  height: 2px;
  background: currentColor;
  flex: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--tinta-suave);
  max-width: 54ch;
}

/* ============================================================
   Botones
   ============================================================ */

.btn {
  --bg: var(--marca);
  --fg: var(--negro);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  min-height: 46px;
  border-radius: 100px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.btn span { position: relative; z-index: var(--z-elevado); }

.btn svg {
  position: relative;
  z-index: var(--z-elevado);
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.5s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tinta);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--fondo); }
.btn:hover svg { transform: translate(3px, -3px); }

.btn--fantasma {
  --bg: transparent;
  --fg: var(--tinta);
  border: 1px solid var(--linea-fuerte);
}

.btn--fantasma::after { background: var(--marca); }
.btn--fantasma:hover { color: var(--negro); border-color: var(--marca); }

.btn--wa { --bg: transparent; --fg: var(--tinta); border: 1px solid var(--linea-fuerte); }
.btn--wa::after { background: var(--wa); }
.btn--wa:hover { color: var(--negro); border-color: var(--wa); }

.link-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: var(--space-2xs);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--linea-fuerte);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.link-flecha svg { transition: transform 0.35s var(--ease); }
.link-flecha:hover { color: var(--marca-tinta); border-color: var(--marca-tinta); }
.link-flecha:hover svg { transform: translateX(4px); }

/* ============================================================
   Preloader
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-md);
  background: var(--fondo);
}

.preloader__mark { width: 88px; height: 84px; fill: var(--marca); opacity: 0.92; }
.preloader__frase {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.preloader__barra { width: min(240px, 46vw); height: 2px; background: var(--linea); overflow: hidden; }
.preloader__barra i { display: block; height: 100%; width: 0; background: var(--marca); }

/* Header y navegador flotan por encima del contenido: sobre el hero
   y el cierre —que siempre son fotografía en penumbra— se invierten,
   aunque el resto del sitio esté en tema claro. */
/* Un solo bloque define "claro sobre fotografía en penumbra". Antes
   estos seis valores estaban escritos tres veces; cambiar el gris del
   texto obligaba a cazarlos por toda la hoja. */
.hero,
.cierre,
.sobre-oscuro .header,
.sobre-oscuro .puntos,
.con-video .video-btn {
  --tinta: var(--blanco);
  --tinta-suave: rgba(255, 255, 255, 0.72);
  --tinta-tenue: rgba(255, 255, 255, 0.6);
  --linea: rgba(255, 255, 255, 0.16);
  --linea-fuerte: rgba(255, 255, 255, 0.32);
  --marca-tinta: var(--marca);
  --vidrio: rgba(10, 10, 9, 0.72);
  --fondo: #050505;
}

/* Y al revés: sobre un panel claro dentro de una página oscura, el
   header y los puntos tienen que pasar a tinta negra o desaparecen. */
.sobre-claro .header,
.sobre-claro .puntos {
  --tinta: #0b0b0a;
  --tinta-suave: rgba(11, 11, 10, 0.74);
  --tinta-tenue: rgba(11, 11, 10, 0.62);
  --linea: rgba(11, 11, 10, 0.16);
  --linea-fuerte: rgba(11, 11, 10, 0.34);
  --marca-tinta: #6b5c00;
  --vidrio: rgba(243, 242, 238, 0.78);
  --fondo: #f3f2ee;
  color: var(--tinta);
}

[data-tema="claro"].sobre-claro .header,
[data-tema="claro"].sobre-claro .puntos {
  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.72);
  --tinta-tenue: rgba(255, 255, 255, 0.6);
  --linea: rgba(255, 255, 255, 0.16);
  --linea-fuerte: rgba(255, 255, 255, 0.32);
  --marca-tinta: #ebdb00;
  --vidrio: rgba(10, 10, 9, 0.72);
  --fondo: var(--negro-panel);
  color: var(--tinta);
}

.sobre-claro .header__anillo { fill: #6b5c00; }
[data-tema="claro"].sobre-claro .header__anillo { fill: #ebdb00; }
.sobre-claro .punto::before { filter: brightness(0.62) saturate(1.3); }
[data-tema="claro"].sobre-claro .punto::before { filter: none; }

/* En tema claro los aros amarillos se pierden sobre el papel:
   se oscurecen sin salirse de la gama de marca. */
[data-tema="claro"] .punto::before { filter: brightness(0.62) saturate(1.3); }
[data-tema="claro"].sobre-oscuro .punto::before { filter: none; }

/* ============================================================
   Header
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding: var(--space-md) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--flow-md);
  pointer-events: none;
}

.header > * { pointer-events: auto; }

.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  flex: none;
}

.header__anillo { width: 30px; height: 28px; fill: var(--marca); }
.header__palabra { width: 74px; height: 40px; fill: var(--tinta); transition: fill 0.5s var(--ease); }

/* La etiqueta de sección: cambia sola conforme avanza el recorrido */
.header__seccion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  overflow: hidden;
  white-space: nowrap;
}

.header__seccion::before {
  content: "";
  width: 1px;
  height: 22px;
  background: var(--linea-fuerte);
  flex: none;
}

.header__seccion b { font-weight: 700; display: inline-block; }

/* La etiqueta de sección es un lujo de pantalla ancha: abajo de 1400 px
   compite con la navegación y parte el botón de cotización en dos
   renglones. Los puntos de abajo ya dicen dónde estás. */
@media (max-width: 1399px) {
  .header__seccion { display: none; }
}

.header__nav {
  margin-inline-start: auto;
  display: none;
  gap: var(--flow-sm);
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 44px de alto de caja aunque el texto mida 12: el subrayado se pinta
   con un pseudo, no con el borde, para que no se despegue del texto. */
.header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-suave);
  transition: color 0.3s var(--ease);
}

.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 1px;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.header__nav a:hover,
.header__nav a.is-activo { color: var(--tinta); }
.header__nav a:hover::after,
.header__nav a.is-activo::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   Servicios: siete líneas que no caben en la barra, así que van en
   un desplegable. Botón real, no un :hover: con hover puro el
   submenú es inalcanzable con teclado y en pantalla táctil.
   ------------------------------------------------------------ */
.nav-grupo { position: relative; }

.nav-grupo__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color 0.3s var(--ease);
}

/* La página en la que estás, marcada de verdad: el aria-current ya
   estaba puesto para el lector de pantalla, pero a la vista no se
   notaba nada. */
.header__nav a[aria-current="page"] { color: var(--tinta); }
.header__nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-grupo__btn[aria-current="page"] { color: var(--tinta); }

.nav-grupo__btn[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 17px;
  bottom: 12px;
  height: 1px;
  background: var(--marca);
}

.nav-grupo__btn svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }
.nav-grupo__btn:hover,
.nav-grupo__btn[aria-expanded="true"] { color: var(--tinta); }
.nav-grupo__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-header);
  display: grid;
  min-width: 232px;
  padding: var(--space-2xs);
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--vidrio);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.submenu[hidden] { display: none; }

/* El botón "Servicios" abre el desplegable pero no lleva a ningún
   lado. Sin esta primera línea no había forma de llegar a la página
   madre desde la barra. */
.submenu .submenu__madre {
  border-bottom: 1px solid var(--linea);
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
  margin-bottom: var(--space-2xs);
  color: var(--marca-tinta);
}

.submenu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--space-sm);
  border-radius: var(--radio-sm);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.submenu a:hover { color: var(--tinta); background: var(--linea); }

.header__acciones {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.header__nav + .header__acciones { margin-inline-start: var(--flow-sm); }

/* Interruptor de tema */
.tema {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  border: 1px solid var(--linea);
  background: var(--vidrio);
  backdrop-filter: blur(14px);
  color: var(--tinta);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.tema:hover { border-color: var(--marca); color: var(--marca-tinta); }
.tema svg { width: 19px; height: 19px; }
.tema .luna { display: none; }
[data-tema="claro"] .tema .sol { display: none; }
[data-tema="claro"] .tema .luna { display: block; }

.header__cta { display: none; }
.header__cta span { white-space: nowrap; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0 var(--space-md);
  border-radius: 100px;
  border: 1px solid var(--linea);
  background: var(--vidrio);
  backdrop-filter: blur(14px);
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.burger { display: grid; gap: 4px; width: 16px; }
.burger i { display: block; height: 2px; background: currentColor; transition: transform 0.35s var(--ease); }

@media (min-width: 1120px) {
  .header__nav { display: flex; }
  .header__cta { display: inline-flex; }
  .menu-btn { display: none; }
}

/* ============================================================
   Menú (solo abajo de 1120px)
   ============================================================ */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  /* Con trece enlaces ya no se puede centrar: el primero quedaba debajo
     del header. Empieza abajo del header y, si hiciera falta, rueda. */
  align-content: start;
  gap: var(--space-lg);
  padding: calc(var(--gutter) + 4.5rem) var(--gutter) var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fondo-2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.menu.is-abierto { visibility: visible; opacity: 1; }

.menu__lista { display: grid; gap: var(--space-2xs); }

.menu__lista a {
  font-family: var(--display);
  font-size: clamp(1.35rem, 5.2vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Al bajar el cuerpo para que cupieran trece enlaces, la caja táctil
     cayó a 40 px. El mínimo se fija aparte del tamaño de letra. */
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: var(--space-2xs) 0;
  color: var(--tinta);
  transition: color 0.3s var(--ease);
}

.menu__lista a:hover { color: var(--marca-tinta); }

/* En el overlay los siete servicios van sangrados bajo su título:
   sin la sangría se leían como siete secciones más del mismo nivel. */
.menu__grupo { display: grid; gap: var(--space-2xs); }

.menu__sub {
  display: grid;
  gap: 0;
  padding-left: var(--space-md);
  border-left: 1px solid var(--linea);
}

.menu__sub a {
  font-family: var(--texto-font);
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: var(--space-2xs) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--tinta-suave);
}
.menu__pie { color: var(--tinta-tenue); font-size: 0.9rem; }

/* ============================================================
   El escenario y la pista
   ============================================================ */

.escenario {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.pista {
  display: flex;
  align-items: stretch;
  height: 100svh;
  will-change: transform;
}

/* El ancho lo dicta el contenido, no un número inventado: así ningún
   panel corta una tarjeta por la mitad ni deja un hueco muerto. */
.panel {
  position: relative;
  flex: none;
  width: max-content;
  min-width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
  /* Arriba deja pasar el header; abajo, la píldora de puntos.
     El relleno inferior usa max(), no clamp(): con clamp se encogía con
     la altura justo cuando la píldora seguía midiendo lo mismo, y a
     720 px la píldora acababa encima del texto.

     --util es el alto que de verdad queda para el contenido. Todo lo que
     antes se medía en vh sueltos ahora se mide contra esto, que es lo
     único que no miente cuando la pantalla es baja. */
  --pad-t: clamp(5.5rem, 10vh, 7.5rem);
  --pad-b: max(7rem, 10vh);
  --util: calc(100svh - var(--pad-t) - var(--pad-b));
  padding: var(--pad-t) var(--gutter) var(--pad-b);
  overflow: hidden;
}

.panel--alterno { background: var(--fondo-2); }

/* Número de panel al fondo: da sensación de recorrido, como los
   kilómetros de una carretera. */
.panel__folio {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--space-2xl) + 0.5rem);
  font-family: var(--display);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: 1;
  color: var(--tinta);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   1 · Hero
   ============================================================ */

/* El hero y el cierre se quedan en oscuro aunque el sitio esté en
   claro: son fotografía de espectáculo, luz de escenario sobre
   negro. Aclararlos los vuelve una postal lavada. */
.hero,
.cierre { --velo: 0 0 0; }

.hero,
.cierre,
.sobre-oscuro .header,
.sobre-oscuro .puntos { color: var(--blanco); }

.hero {
  padding-block: clamp(6rem, 11vh, 8rem) clamp(7rem, 13vh, 9rem);
  align-items: center;
}

/* Todo panel con fotografía o vídeo de fondo pinta una base opaca. El
   vídeo carga en diferido y la foto es lazy: mientras no están, el panel
   era transparente y por debajo del velo semitransparente se colaba el
   fondo de la página. En la transición se veía como una franja clara —el
   "espacio" que parecía un bug. */
.panel[data-oscuro] { background: var(--negro-panel); }

/* Más ancha que el panel: el desplazamiento la mueve sin dejar
   franjas negras en los bordes. */
.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14%;
  width: 128%;
  z-index: 0;
}

/* El <img> es la red de seguridad: si el vídeo no puede cargarse
   —o el empaquetado lo sustituye por su póster— la imagen tiene que
   cubrir igual, no salir a tamaño natural encima del titular. */
.hero__media video,
.hero__media img,
.cierre__media video,
.cierre__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--foto-brillo));
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.92) 0%, rgb(var(--velo) / 0.72) 42%, rgb(var(--velo) / 0.35) 100%),
    linear-gradient(0deg, rgb(var(--velo) / 0.85) 0%, rgb(var(--velo) / 0) 55%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(58ch, 52vw);
}

.hero__titulo {
  font-size: var(--fs-hero);
  margin: var(--flow-sm) 0 var(--flow-md);
  max-width: 15ch;
}

.hero__titulo em { font-style: normal; color: var(--marca); }

.hero__sub {
  color: var(--tinta-suave);
  font-size: var(--fs-lead);
  max-width: 46ch;
  margin-bottom: var(--flow-md);
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Antes había aquí una tira de tres métricas con número grande y
   etiqueta chica: la plantilla de "hero metrics" que sale en cualquier
   sitio generado. Los nombres propios prueban lo mismo y no se parecen
   a nada. */
.hero__prueba {
  position: relative;
  z-index: 2;
  margin-top: var(--flow-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  max-width: 44ch;
}

.hero__prueba span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--texto-font);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--tinta-tenue);
}

/* Pista de "desliza" horizontal */
.cue {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--space-2xl) + 1.4rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.cue i {
  width: 54px;
  height: 1px;
  background: var(--linea-fuerte);
  position: relative;
  overflow: hidden;
}

.cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marca);
  transform: translateX(-100%);
  animation: cue 2.1s var(--ease) infinite;
}

@keyframes cue {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ============================================================
   2 · Esencia
   ============================================================ */

.esencia { gap: var(--flow-xl); align-items: center; }

.esencia__texto { max-width: 44ch; flex: none; width: min(44ch, 40vw); }
.esencia__texto h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }
.esencia__texto p + p { margin-top: var(--space-sm); }
.esencia__texto p { color: var(--tinta-suave); }
.esencia__texto .link-flecha { margin-top: var(--flow-md); }

/* Tres placas fotográficas a distintas alturas y velocidades: la
   profundidad se lee sola cuando cada una se mueve a su ritmo. */
.placas { display: flex; align-items: center; gap: var(--flow-md); }

.placa {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--fondo-3);
}

.placa img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--foto-brillo)); }

.placa--a { width: min(30vw, 420px); aspect-ratio: 4 / 5; }
.placa--b { width: min(26vw, 360px); aspect-ratio: 1 / 1; margin-top: calc(-14vh * var(--desfase)); }
.placa--c { width: min(22vw, 300px); aspect-ratio: 4 / 5; margin-top: calc(12vh * var(--desfase)); }

.placa__pie {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ============================================================
   3 · Servicios
   ============================================================ */

.servicios { gap: var(--flow-lg); align-items: center; }

.servicios__intro { flex: none; width: min(34ch, 30vw); }
.servicios__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

.mosaico {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(330px, 30vw);
  gap: var(--space-md);
  height: min(var(--util), 500px);
}

.servicio {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--fondo-3);
  isolation: isolate;
}

.servicio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.7)) saturate(0.9);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

.servicio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.72) 34%,
                              rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0.24) 100%);
}

.servicio:hover img { transform: scale(1.06); filter: brightness(calc(var(--foto-brillo) * 0.95)) saturate(1.05); }

.servicio__cuerpo {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-md);
  color: var(--blanco);
}

.servicio__num {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--marca);
}

.servicio h3 { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.02em; }
.servicio p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.76); margin-top: var(--space-2xs); }
.servicio .link-flecha { color: var(--blanco); margin-top: var(--space-xs); }

/* La tarjeta alta rompe la retícula de seis iguales */
.servicio--alto { grid-row: span 2; }

/* ============================================================
   4 · Por qué Enso
   ============================================================ */

.porque { gap: var(--flow-xl); align-items: center; }
.porque__intro { flex: none; width: min(30ch, 26vw); }
.porque__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* La foto ancla: una sola imagen grande sostiene las cinco razones.
   Antes eran cinco miniaturas dentro de cinco tarjetas iguales —la
   rejilla de tarjetas idénticas que este proyecto tiene prohibida. */
.ancla {
  position: relative;
  flex: none;
  width: min(32vw, 430px);
  height: min(calc(var(--util) * 0.72), 480px);
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--fondo-3);
}

.ancla img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--foto-brillo)); }

.ancla figcaption {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Cinco entradas de texto separadas por un filete, no por un contenedor.
   La regla vertical es de 1px: un filete editorial, no una franja de color. */
.razones { display: flex; align-items: stretch; list-style: none; }

.razon {
  flex: none;
  width: min(268px, 21vw);
  padding: 0 var(--flow-md);
  border-left: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
}

.razon:first-child { border-left: 0; padding-left: 0; }

/* Alturas alternas: la fila deja de leerse como una tabla */
.razon:nth-child(even) { padding-top: calc(14vh * var(--desfase)); }
.razon:nth-child(3n) { padding-top: calc(4vh * var(--desfase)); }

.razon__indice {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1;
  color: var(--marca-tinta);
  opacity: 0.9;
  margin-bottom: var(--flow-sm);
}

.razon h3 {
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2xs);
}

.razon p { font-size: 0.94rem; color: var(--tinta-suave); }

/* ============================================================
   5 · Proyectos
   ============================================================ */

.proyectos { gap: var(--flow-lg); align-items: center; }
.proyectos__intro { flex: none; width: min(30ch, 26vw); }
.proyectos__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

.galeria { display: flex; align-items: center; gap: var(--flow-md); }

.proyecto { flex: none; width: min(38vw, 560px); display: grid; gap: var(--space-md); }
.proyecto--chico { width: min(26vw, 380px); margin-top: calc(6vh * var(--desfase)); }
.proyecto--medio { width: min(31vw, 460px); margin-top: calc(-6vh * var(--desfase)); }

.proyecto__marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  aspect-ratio: 4 / 3;
  /* Sin fondo propio: la foto va a 124 % y con paralaje, y cualquier
     franja que quedara al descubierto se veía como un bloque claro
     pegado al borde de la ficha. */
  background: transparent;
}

.proyecto--chico .proyecto__marco { aspect-ratio: 4 / 5; }

/* La imagen es más ancha que el marco: al desplazarse en sentido
   contrario a la pista, la foto respira dentro de su ventana. */
.proyecto__marco img,
.proyecto__marco video {
  position: absolute;
  top: 0;
  left: -12%;
  width: 124%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--foto-brillo));
}

.proyecto__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.proyecto__meta span {
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  border: 1px solid var(--linea);
  color: var(--tinta-tenue);
}

.proyecto__meta .es-premio { border-color: var(--marca); color: var(--marca-tinta); }

.proyecto h3 { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--space-2xs); }
.proyecto p { font-size: 0.94rem; color: var(--tinta-suave); margin-top: var(--space-2xs); }

.proyectos__cierre { flex: none; width: min(26ch, 22vw); display: grid; gap: var(--flow-sm); }

/* ============================================================
   6 · Marcas
   ============================================================ */

.marcas { gap: var(--flow-lg); align-items: center; }
.marcas__intro { flex: none; width: min(32ch, 28vw); }
.marcas__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* Tres columnas que se desplazan en sentidos alternos */
.rejilla-logos { display: flex; gap: var(--flow-sm); height: min(var(--util), 640px); overflow: hidden; }
.rejilla-logos__col { display: grid; gap: var(--space-md); align-content: start; }

/* Sin caja: 34 rectángulos redondeados no aportaban nada que el aire
   no resuelva, y sumaban al cuarto panel consecutivo con la misma forma. */
.marca-logo {
  width: clamp(130px, 12vw, 178px);
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  padding: var(--space-sm);
}

.marca-logo img {
  width: 100%;
  height: auto;
  opacity: 0.72;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

/* Los logos vienen en blanco: sobre papel hay que invertirlos */
[data-tema="claro"] .marca-logo img { filter: invert(1); opacity: 0.66; }

.marca-logo:hover img { opacity: 1; }

.testimonios { flex: none; width: min(34ch, 28vw); display: grid; gap: var(--flow-md); }

.testimonio p { font-size: 1.05rem; line-height: 1.5; color: var(--tinta); }
.testimonio footer {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--tinta-tenue);
}
.testimonio footer i { width: 22px; height: 1px; background: var(--marca); flex: none; }

/* ============================================================
   7 · Proceso
   ============================================================ */

.proceso { gap: var(--flow-lg); align-items: center; }
.proceso__intro { flex: none; width: min(30ch, 26vw); }
.proceso__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* Geometría del riel.
   Las seis tarjetas miden lo mismo a propósito: con altura fija, el
   punto de conexión cae SIEMPRE sobre el hilo. Con altura libre cada
   tarjeta lo dejaba en un sitio distinto. */
.ruta {
  /* Dos filas de tarjetas más el aire de cada lado tienen que caber en
     --util; si no caben, la altura de la tarjeta cede primero. */
  --paso-aire: 30px;
  --paso-h: min(226px, calc((var(--util) - var(--paso-aire) * 2) / 2));
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--flow-md);
  /* Sin relleno propio: el aire de los puntos ya separa el hilo del
     borde, y sumar padding aquí rompía la cuenta de --util. */
  padding-block: 0;
}

/* El hilo que une los seis pasos, dibujado con el scroll */
.ruta__hilo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--linea);
}

.ruta__hilo i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--marca), var(--naranja));
  transform-origin: left center;
  transform: scaleX(0);
}

/* Sin caja: el hilo es la estructura. Seis tarjetas de la misma altura
   con el mismo borde eran el cuarto panel seguido con forma de
   rectángulo redondeado; la altura fija se queda porque de ella depende
   que el punto caiga exactamente sobre el hilo, pero ya no se ve. */
.paso {
  position: relative;
  flex: none;
  width: min(268px, 21vw);
  height: var(--paso-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: 0 var(--flow-md);
}

/* El texto se recuesta contra el hilo y el numeral se va al extremo
   opuesto: arriba del hilo, texto abajo; debajo del hilo, texto arriba. */
.paso:nth-of-type(even) { flex-direction: column-reverse; }

/* of-type, no child: el hilo es el primer hijo de .ruta y correría
   la cuenta un lugar, dejando los seis pasos del mismo lado. */
.paso:nth-of-type(odd) { margin-bottom: calc(var(--paso-h) + var(--paso-aire) * 2); }
.paso:nth-of-type(even) { margin-top: calc(var(--paso-h) + var(--paso-aire) * 2); }

/* El punto sobre el hilo y la patita que lo une con la tarjeta */
.paso::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--fondo);
  border: 2px solid var(--marca);
  z-index: 2;
}

.panel--alterno .paso::before { background: var(--fondo-2); }

.paso::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: var(--paso-aire);
  background: var(--linea-fuerte);
}

.paso:nth-of-type(odd)::before { bottom: calc(var(--paso-aire) * -1); transform: translateY(50%); }
.paso:nth-of-type(even)::before { top: calc(var(--paso-aire) * -1); transform: translateY(-50%); }
.paso:nth-of-type(odd)::after { bottom: calc(var(--paso-aire) * -1); }
.paso:nth-of-type(even)::after { top: calc(var(--paso-aire) * -1); }

/* Cada paso llevaba su mitad de pista en blanco: el numeral arriba y
   media pantalla de papel abajo. La fotografía ocupa ese hueco —del
   tamaño de la propia tarjeta, no una miniatura— y va absoluta para no
   tocar la cuenta de --paso-h de la que depende que el punto caiga
   sobre el hilo. */
.paso__foto {
  position: absolute;
  left: 0;
  right: var(--flow-md);
  height: var(--paso-h);
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-3);
}

.paso:nth-of-type(odd) .paso__foto  { top: calc(100% + var(--paso-aire) * 2); }
.paso:nth-of-type(even) .paso__foto { bottom: calc(100% + var(--paso-aire) * 2); }

.paso__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--foto-brillo)) saturate(0.94);
}

/* Un filete de marca en la esquina que mira al hilo, igual que en las
   fichas de proyecto: hilvana la fotografía con la línea del tiempo. */
.paso__foto::after {
  content: "";
  position: absolute;
  left: 0;
  width: 34%;
  height: 3px;
  background: var(--marca);
}

.paso:nth-of-type(odd) .paso__foto::after  { top: 0; }
.paso:nth-of-type(even) .paso__foto::after { bottom: 0; }

.paso__num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--marca-tinta);
  opacity: 0.85;
}
.paso h3 { font-family: var(--display); font-size: 1.12rem; line-height: 1.15; margin-bottom: var(--space-2xs); }
.paso p { font-size: 0.9rem; color: var(--tinta-suave); }

/* ============================================================
   8 · Presencia
   ============================================================ */

.presencia { gap: var(--space-lg); align-items: center; }
.presencia__intro { flex: none; width: min(27ch, 19.5vw); }
.presencia__intro h2 {
  /* Más contenido: el titular ocupaba seis renglones y la columna
     entera medía 728 px contra 698 disponibles. */
  font-size: clamp(1.4rem, 2.2vw, 2.3rem);
  margin: var(--space-md) 0 var(--space-md);
}

.presencia__intro .lead { font-size: 0.95rem; }

/* La ficha de dirección, compacta */
.presencia .matriz { margin-top: var(--space-md); padding: var(--space-2xs) var(--space-sm); }
.presencia .matriz__pin { width: 34px; height: 34px; }
.presencia .matriz__pin svg { width: 16px; height: 16px; }
.presencia .matriz__dir { font-size: 0.82rem; line-height: 1.4; }

.mapa { flex: none; width: min(36.5vw, 580px); position: relative; }

/* Por encima de 1700 px sobra sitio de sobra: el mapa crece y con él
   el grosor real de rutas y contorno, que a 580 px quedaban en un hilo. */
@media (min-width: 1700px) {
  .mapa { width: min(34vw, 720px); }
}
.mapa svg { width: 100%; height: auto; overflow: visible; }

/* El contorno tiene que LEERSE: con 0.055 de relleno la silueta
   desaparecía y sólo quedaba la luz, que era justo el problema. */
.mapa__pais {
  fill: var(--tinta);
  fill-opacity: 0.09;
  stroke: var(--linea-fuerte);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* La trama de puntos, recortada al país (ver mapaBase) */
.mapa__trama { fill: var(--marca); opacity: 0.2; }

/* El halo se queda cerca de su punto: con r=26 el de Mérida se salía
   de la península y volvía a leerse como mancha sobre el mar. */
.pin__halo { fill: var(--marca); opacity: 0.11; r: 17; }
.pin__punto { fill: var(--marca); }

.pin__label {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.06em;
  fill: var(--tinta);
}

.pin__sub {
  font-family: var(--texto-font);
  font-size: 13px;
  letter-spacing: 0.16em;
  fill: var(--tinta-tenue);
}

/* La luz y la trama del mapa ya no viven aquí: se dibujan dentro del
   SVG recortadas al contorno de México (ver mapaBase en horizontal.js).
   Como rectángulos de CSS se veían como una mancha amarilla que se
   salía por la costa. */
.mapa--casa svg { position: relative; z-index: 1; }

/* Las rutas de la matriz a cada bodega */
.mapa__ruta {
  fill: none;
  stroke: var(--marca);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.95;
}

/* El trazo oscuro que va debajo: separa la ruta del país iluminado */
.mapa__ruta-base {
  fill: none;
  stroke: var(--negro-panel);
  stroke-width: 6.4;
  stroke-linecap: round;
  opacity: 0.3;
}

[data-tema="claro"] .mapa__ruta-base { stroke: var(--blanco); opacity: 0.55; }

[data-tema="claro"] .mapa__ruta { stroke: var(--marca-tinta); opacity: 0.85; }
[data-tema="claro"] .mapa__brillo { opacity: 0.6; }
[data-tema="claro"] .mapa__trama { opacity: 0.3; }

.ciudades { flex: none; width: min(22ch, 17vw); list-style: none; display: grid; gap: var(--space-2xs); }

/* La matriz se distingue del resto: es la única oficina */
.ciudades__matriz { border-bottom-color: var(--marca-tinta) !important; }
.ciudades__matriz em { color: var(--marca-tinta) !important; }

/* --- La dirección, como ficha ------------------------------- */
.matriz {
  margin-top: var(--flow-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--fondo-3);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.matriz:hover { border-color: var(--marca); transform: translateX(3px); }

.matriz__pin {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--marca-tinta);
  color: var(--marca-tinta);
}

.matriz__pin svg { width: 19px; height: 19px; }

.matriz__cuerpo { display: grid; gap: 2px; }

.matriz__cuerpo b {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.matriz__dir { font-size: 0.9rem; line-height: 1.35; color: var(--tinta); }

.matriz__ir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--tinta-tenue);
}

.matriz:hover .matriz__ir { color: var(--marca-tinta); }

.ciudades li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--linea);
  font-family: var(--display);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

.ciudades em { font-family: var(--texto-font); font-style: normal; font-size: 0.76rem; color: var(--tinta-tenue); letter-spacing: 0.08em; text-transform: uppercase; }

.cifra { margin-top: var(--flow-md); }
.cifra b { display: block; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; color: var(--marca-tinta); }
.cifra span { font-size: 0.84rem; color: var(--tinta-tenue); }

/* ============================================================
   9 · Cierre
   ============================================================ */

.cierre { padding-block: 0; }

.cierre__media { position: absolute; top: 0; bottom: 0; left: -12%; width: 124%; z-index: 0; }
.cierre__media video,
.cierre__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(var(--foto-brillo) * 0.5)); }

.cierre__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgb(var(--velo) / 0.94) 0%, rgb(var(--velo) / 0.7) 55%, rgb(var(--velo) / 0.5) 100%);
}

.cierre__anillo {
  position: absolute;
  right: -6vw;
  top: 50%;
  z-index: 1;
  width: min(52vh, 460px);
  height: auto;
  translate: 0 -50%;
  fill: var(--marca);
  opacity: 0.1;
}

.cierre__inner { position: relative; z-index: 2; width: min(56ch, 46vw); }
.cierre__inner h2 { font-size: clamp(2rem, 3.8vw, 3.8rem); margin: var(--flow-sm) 0 var(--flow-md); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--flow-md); }

.cierre__datos {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(30ch, 24vw);
  display: grid;
  gap: var(--flow-md);
  align-self: center;
  margin-inline-start: var(--flow-xl);
}

.cierre__bloque h3 {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marca-tinta);
  margin-bottom: var(--space-2xs);
}

.cierre__bloque p { color: var(--tinta-suave); font-size: 0.94rem; }
.cierre__bloque a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-suave);
  font-size: 0.94rem;
}
.cierre__bloque a:hover { color: var(--tinta); }

.cierre__legal { font-size: 0.78rem; color: var(--tinta-tenue); border-top: 1px solid var(--linea); padding-top: var(--space-sm); }

/* ============================================================
   Navegador de puntos
   ============================================================ */

.puntos {
  position: fixed;
  left: 50%;
  bottom: var(--space-md);
  z-index: var(--z-flotante);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.4rem;
  border-radius: 100px;
  border: 1px solid var(--linea);
  background: var(--vidrio);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}

.puntos__flecha {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  color: var(--tinta-suave);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.puntos__flecha:hover:not(:disabled) { color: var(--tinta); background: var(--linea); }
.puntos__flecha:disabled { opacity: 0.3; cursor: default; }
.puntos__flecha svg { width: 15px; height: 15px; }

.puntos__lista { display: flex; align-items: center; gap: 2px; }

/* El punto: 34px de caja táctil, 12px de círculo visible.
   La caja grande es lo que hace que se pueda picar en un teléfono. */
.punto {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 100px;
}

.punto::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--tono);
  background: transparent;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.punto:hover::before { background: var(--tono); transform: scale(1.15); }
.punto.is-activo::before { background: var(--tono); transform: scale(1.25); }

/* La etiqueta del punto aparece al pasar encima: sin ella, ocho
   círculos de colores no le dicen nada a nadie. */
.punto__nombre {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  background: var(--tinta);
  color: var(--fondo);
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), translate 0.25s var(--ease);
}

.punto:hover .punto__nombre,
.punto:focus-visible .punto__nombre { opacity: 1; translate: -50% -3px; }

/* ============================================================
   Control del video de fondo
   WCAG 2.2.2: movimiento automático de más de cinco segundos necesita
   un mecanismo para detenerlo. Sólo aparece cuando hay video debajo.
   ============================================================ */

.video-btn[hidden] { display: none; }

.video-btn {
  position: fixed;
  left: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0 var(--space-md) 0 var(--space-sm);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 9, 0.72);
  backdrop-filter: blur(14px);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

/* Sólo en los paneles que de verdad llevan video: en los demás el
   botón prometía pausar algo que no se estaba moviendo. */
.con-video .video-btn { opacity: 1; visibility: visible; transform: translateY(0); }

.video-btn svg { width: 15px; height: 15px; flex: none; }
.video-btn .play { display: none; }
.video-btn.is-pausado .pausa { display: none; }
.video-btn.is-pausado .play { display: block; }
.video-btn:hover { border-color: var(--marca); color: var(--marca); }

/* ============================================================
   WhatsApp flotante
   ============================================================ */

.wa-flotante {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-flotante);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  background: var(--wa);
  color: var(--wa-tinta);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s var(--ease);
}

.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 26px; height: 26px; }

/* ============================================================
   Estados iniciales de animación
   ============================================================ */

.js [data-fade] { opacity: 0; transform: translateY(26px); }
.js [data-anim] .linea-inner,
.js [data-anim] .palabra-inner { display: inline-block; }

/* ============================================================
   Pantallas bajas (portátiles de 1366×768 y similares)
   Todas las medidas verticales del recorrido salen de vh, así que se
   encogen a la vez. Abajo de 820 px de alto se apagan los desfases y el
   riel del proceso pasa a una sola fila.
   ============================================================ */

@media (min-width: 900px) and (max-height: 820px) {
  /* La mitad del desfase: se nota el escalonado, no empuja nada fuera */
  :root { --desfase: 0.3; }

  /* Los proyectos encogen y el marco deja de mandar: su alto sale de
     --util para que el texto de abajo siempre quepa. */
  .proyecto { width: min(30vw, 430px); }
  .proyecto--chico { width: min(21vw, 300px); }
  .proyecto--medio { width: min(25vw, 360px); }

  .proyecto__marco,
  .proyecto--chico .proyecto__marco {
    aspect-ratio: auto;
    height: calc(var(--util) * 0.48);
  }

  .hero__titulo { font-size: clamp(2.2rem, 4.2vw, 4.2rem); }

  .hero { padding-block: clamp(5rem, 9vh, 7rem) clamp(5.5rem, 10vh, 8rem); }
  .hero__prueba { margin-top: var(--flow-md); }
}

/* ============================================================
   Móvil y tablet: el recorrido se endereza
   Abajo de 900px el scroll horizontal pelea con el gesto natural
   del pulgar. La misma historia, apilada.
   ============================================================ */

@media (max-width: 899px) {
  /* Un solo interruptor apaga todos los escalonados del recorrido */
  :root { --desfase: 0; }

  .escenario, .pista, .panel { height: auto; }
  .escenario { overflow: visible; }
  .pista { display: block; }

  .panel {
    width: 100%;
    min-width: 0;
    min-height: auto;
    display: block;
    padding: var(--flow-xl) var(--gutter);
    /* Al saltar a una sección, el rótulo no se esconde bajo el header */
    scroll-margin-top: 6rem;
  }

  .hero, .cierre {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--flow-lg);
    padding-block: clamp(6.5rem, 15vh, 9rem) var(--flow-xl);
  }

  /* Todo lo que en el recorrido lateral tiene ancho de columna, aquí
     ocupa el renglón completo. */
  .esencia__texto,
  .servicios__intro,
  .porque__intro,
  .proyectos__intro,
  .marcas__intro,
  .proceso__intro,
  .presencia__intro,
  .proyectos__cierre,
  .testimonios,
  .ciudades,
  .mapa,
  .ancla,
  .cierre__inner,
  .cierre__datos { width: 100%; max-width: none; margin-inline-start: 0; }

  .hero__inner, .cierre__inner { width: 100%; }
  .hero__inner { max-width: none; }
  .cue { display: none; }
  .panel__folio { display: none; }
  .cierre__datos { gap: var(--flow-md); }

  /* El header viaja sobre la fotografía: necesita un velo propio */
  .header::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    height: 130%;
    background: linear-gradient(180deg, var(--fondo) 12%, transparent 100%);
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
  }

  /* --- Esencia --- */
  .placas { flex-wrap: wrap; margin-top: var(--flow-lg); gap: var(--space-sm); }
  .placa { width: calc(50% - var(--space-sm)); }
  .placa--a { width: 100%; aspect-ratio: 4 / 3; }

  /* --- Por qué Enso: la foto ancla recupera su ancho --- */
  .ancla { height: min(58vh, 420px); margin-top: var(--flow-lg); }
  .razones { display: block; margin-top: var(--flow-lg); }

  /* Los tres selectores repetidos no son adorno: :nth-child(even) y
     :nth-child(3n) pesan más que .razon y se comían el relleno. */
  .razon,
  .razon:nth-child(even),
  .razon:nth-child(3n) {
    width: 100%;
    padding: var(--flow-md) 0 0;
    border-left: 0;
    border-top: 1px solid var(--linea);
  }

  .razon:first-child { border-top: 0; padding-top: 0; }
  .razon__indice { margin-bottom: var(--space-2xs); }

  /* --- Servicios --- */
  .mosaico {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-columns: auto;
    height: auto;
    margin-top: var(--flow-lg);
  }

  .servicio { min-height: 300px; }
  .servicio--alto { grid-row: auto; }

  /* --- Proyectos --- */
  .galeria { flex-wrap: wrap; margin-top: var(--flow-lg); }
  .proyecto { width: 100%; }
  .proyecto__marco,
  .proyecto--chico .proyecto__marco { aspect-ratio: 4 / 3; height: auto; }

  /* Sin recorrido lateral no hay parallaje: la foto vuelve a su marco */
  .proyecto__marco img,
  .proyecto__marco video { left: 0; width: 100%; }
  .hero__media, .cierre__media { left: 0; width: 100%; }

  /* --- Clientes --- */
  .rejilla-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    height: auto;
    margin-block: var(--flow-lg);
  }
  .rejilla-logos__col { display: contents; }
  .marca-logo { width: 100%; }

  /* --- Proceso: sin riel, los seis pasos son una lista ---
     La altura fija y la dirección invertida existen para que el punto
     caiga sobre el hilo; sin hilo sólo dejaban el numeral a 300 px de su
     propio texto y, en los pares, debajo de él. */
  .ruta { display: block; margin-top: var(--flow-lg); }
  .ruta__hilo { display: none; }

  .paso__foto {
    position: static;
    height: clamp(150px, 34vw, 240px);
    margin-top: var(--space-md);
  }

  /* Los tres selectores otra vez: :nth-of-type pesa más que .paso y
     dejaba el margen de 286 px que separa las tarjetas del riel. */
  .paso,
  .paso:nth-of-type(odd),
  .paso:nth-of-type(even) {
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0 0 var(--flow-lg);
    padding: var(--flow-md) 0 0;
    border-top: 1px solid var(--linea);
  }

  .paso:first-of-type { border-top: 0; padding-top: 0; }
  .paso::before, .paso::after { display: none; }

  /* --- Cierre --- */
  .cierre__anillo { opacity: 0.06; right: -22vw; }

  .puntos { display: none; }

  /* ============================================================
     Segunda pasada de móvil: que se vea diseñado, no apilado
     ============================================================ */

  /* --- Tipografía. En una columna de 350 px, el titular del recorrido
     lateral se vuelve un muro de cuatro renglones gigantes. --- */
  :root {
    --fs-hero: clamp(2.2rem, 11vw, 3.1rem);
    --fs-h2: clamp(1.65rem, 7.6vw, 2.2rem);
    --fs-lead: 1.02rem;
  }

  /* balance reparte las líneas para que midan lo mismo; en una columna
     angosta eso abre huecos entre palabras. pretty sólo evita la palabra
     huérfana, que es lo único que hace falta aquí. */
  .display { text-wrap: pretty; }

  .eyebrow { letter-spacing: 0.2em; }
  .eyebrow::before { width: var(--space-sm); }

  /* --- Ritmo entre secciones: sin el fondo alterno del escritorio, los
     nueve paneles se leían como un solo bloque interminable. --- */
  .panel { padding-block: var(--flow-2xl); }
  .panel + .panel { border-top: 1px solid var(--linea); }
  .panel--alterno { background: var(--fondo-2); }

  /* --- Hero y cierre: el velo del recorrido lateral corre de izquierda
     a derecha. En vertical hay que taparlo de arriba abajo. --- */
  .hero__velo {
    background:
      linear-gradient(180deg, rgb(var(--velo) / 0.86) 0%, rgb(var(--velo) / 0.68) 32%,
                      rgb(var(--velo) / 0.8) 66%, rgb(var(--velo) / 0.95) 100%);
  }

  .cierre__velo {
    background: linear-gradient(180deg, rgb(var(--velo) / 0.8) 0%, rgb(var(--velo) / 0.9) 45%,
                                rgb(var(--velo) / 0.97) 100%);
  }

  .hero__acciones,
  .cierre__acciones { display: grid; gap: var(--space-sm); }
  .hero__acciones .btn,
  .cierre__acciones .btn { justify-content: center; }

  .hero__prueba { margin-top: var(--flow-md); }

  /* --- Servicios: la foto arriba, el texto abajo sobre fondo sólido.
     Con el texto encima de la fotografía cada tarjeta dependía de que el
     degradado tapara justo la zona correcta, y en formato ancho no lo
     hacía: el texto caía sobre las luces del escenario. --- */
  .mosaico { grid-template-columns: 1fr; gap: var(--flow-md); }

  .servicio {
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--fondo-2);
    border: 1px solid var(--linea);
  }

  .panel--alterno .servicio { background: var(--fondo-3); }

  .servicio img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    filter: brightness(var(--foto-brillo)) saturate(1);
  }

  .servicio::after { display: none; }

  .servicio__cuerpo {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-md);
    color: var(--tinta);
  }

  .servicio p { color: var(--tinta-suave); }
  .servicio .link-flecha { color: var(--tinta); justify-self: start; }

  /* --- Clientes: tres columnas y caja de alto fijo. Con dos columnas y
     alto libre, un logo cuadrado como BMW medía el triple que uno
     apaisado y la reja se veía descuadrada. --- */
  /* minmax(0, 1fr), no 1fr: una columna 1fr no baja del ancho mínimo de
     su contenido, y las tres sumaban 430 px en una pantalla de 350. */
  .rejilla-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md) var(--space-sm);
  }

  /* Alto fijo, no aspect-ratio: con aspect-ratio la caja se dimensiona
     por el contenido y una imagen alta (BMW, Huawei, W Hotels) crecía
     al triple que una apaisada. */
  .marca-logo {
    height: 84px;
    padding: var(--space-2xs);
    display: grid;
    place-items: center;
  }

  .marca-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .proyectos__cierre {
    margin-top: var(--flow-lg);
    padding-top: var(--flow-md);
    border-top: 1px solid var(--linea);
    gap: var(--flow-md);
  }

  .proyectos__cierre .btn { justify-self: start; }

  .testimonios { margin-top: var(--flow-lg); gap: var(--flow-lg); }
  .testimonio p { font-size: 1rem; }

  .mapa { margin-block: var(--flow-md); }
  .ciudades li { padding-block: var(--space-xs); }
  .cifra { margin-top: var(--flow-lg); }

  .cierre__datos { padding-top: var(--flow-md); border-top: 1px solid var(--linea); }
  .cierre__bloque a { min-height: 48px; }

  /* --- Controles flotantes --- */
  .wa-flotante { width: 56px; height: 56px; right: var(--space-sm); bottom: var(--space-sm); }
  .video-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-fade] { opacity: 1 !important; transform: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .cue i::after { display: none; }
}


/* ------------------------------------------------------------
   Teselas del revelado de fichas (recurso 53 adaptado). Nueve
   tapas del color del panel que se retiran en orden aleatorio.
   Se destruyen al terminar: no dejan nodos vivos.
   ------------------------------------------------------------ */
.teselas {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}

.teselas b { display: block; background: var(--fondo); }

.panel--alterno .teselas b { background: var(--fondo-2); }
.panel--claro .teselas b { background: var(--fondo); }


/* --- Fondo de marca: resplandor y trama --------------------------
   El panel era una plancha lisa. Mismo recurso del mapa y de Nosotros.
   El contenido sube a z-index 2 para quedar por encima. --- */
.proceso::before,
.proceso::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.proceso::before { background: radial-gradient(52% 60% at 60% 50%, rgb(235 219 0 / 0.10) 0%, rgb(235 219 0 / 0) 66%); }

.proceso::after {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--marca);
  opacity: 0.11;
  mask-image: radial-gradient(58% 62% at 60% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(58% 62% at 60% 50%, #000 0%, transparent 74%);
}

.proceso > *:not(.panel__folio) { position: relative; z-index: 2; }

@media (max-width: 899px) {
  .proceso::before, .proceso::after { display: none; }
}


/* ------------------------------------------------------------
   Persianas: siete lamas que descubren el metraje de portada y
   de cierre (efecto 05 del Vol.03). Se destruyen al terminar.
   ------------------------------------------------------------ */
.persianas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  pointer-events: none;
}

.persianas b { display: block; background: #050505; }

[data-tema="claro"] .persianas b { background: #f3f2ee; }

/* Las letras del remate llegan dispersas y se arman */
.caracter { display: inline-block; will-change: transform, filter; }