/* ============================================================
   ENSO MEDIA — Nosotros
   Hoja de secciones. El motor (recorrido, header, puntos, tema,
   foco, botones, tipografía) vive en horizontal.css; aquí sólo
   está lo propio de esta página.

   Sobre el "dorado" del brief: el Manual de Identidad 2026 no
   tiene oro. Lo que aparece en las láminas es la gama cálida de
   marca —Amarillo Enso #EBDB00, Amarillo luminoso #FDD600 y
   Naranja cálido #F3B000— así que los degradados se construyen
   con esos tres y no con un dorado ajeno al sistema.
   ============================================================ */

/* ------------------------------------------------------------
   Panel claro: la sección de pilares invierte el fondo respecto
   al resto de la página, como pide el brief. En tema claro se
   invierte al revés, para que el contraste relativo se conserve.
   ------------------------------------------------------------ */
.panel--claro {
  --fondo: #f3f2ee;
  --fondo-2: #e8e6df;
  --fondo-3: #dedbd1;
  --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;
  background: var(--fondo);
  color: var(--tinta);
}

[data-tema="claro"] .panel--claro {
  --fondo: #0a0a09;
  --fondo-2: #131311;
  --fondo-3: #1b1b18;
  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.72);
  --tinta-tenue: rgba(255, 255, 255, 0.6);
  --linea: rgba(255, 255, 255, 0.14);
  --linea-fuerte: rgba(255, 255, 255, 0.3);
  --marca-tinta: #ebdb00;
}

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

.nos-hero .hero__titulo { max-width: 13ch; }

/* Los años de fondo son textura: se leen como trama, no como dato */
.anos {
  position: absolute;
  inset: auto 0 12%;
  z-index: 1;
  display: flex;
  gap: var(--flow-lg);
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blanco);
  opacity: 0.055;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   2 · Origen — línea de tiempo tipográfica
   ============================================================ */

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

/* La fotografía es fondo, no ilustración: da profundidad al panel,
   que antes era una plancha lisa. El velo usa el token de tema, así
   que en claro tapa con crema y en oscuro con negro. */
/* Base opaca bajo la fotografía: es lazy y hasta que carga, el panel
   dejaba pasar el fondo de la página a través del velo. */
.origen { background: var(--fondo); }

.origen__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.origen__media img {
  /* La regla base para img, video y svg limita max-width al 100 % y
     recorta este 130 %, dejando un 15 % de panel sin fotografía en el
     borde derecho. Tercera vez que aparece esta trampa en el proyecto. */
  max-width: none;
  width: 130%;
  height: 100%;
  margin-left: -15%;
  object-fit: cover;
  /* Desenfocada a propósito: aquí la fotografía es atmósfera, no
     ilustración. Nítida competía con los cinco bloques de texto. */
  filter: grayscale(1) contrast(1.15) brightness(0.42) blur(7px);
  transform: scale(1.06);
  will-change: transform;
}
[data-tema="claro"] .origen__media img { filter: grayscale(1) contrast(1.04) brightness(1.02) blur(7px); }

.origen__velo {
  position: absolute;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.97) 0%, rgb(var(--velo) / 0.9) 40%, rgb(var(--velo) / 0.78) 100%),
    radial-gradient(120% 100% at 10% 50%, rgb(var(--velo) / 0.7) 0%, rgb(var(--velo) / 0) 65%);
}

/* Trama de puntos de marca: el mismo recurso gráfico del mapa de
   cobertura, para que las dos secciones "de fondo" hablen igual. */
.origen__velo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--marca);
  opacity: 0.07;
  mask-image: radial-gradient(70% 60% at 62% 50%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 60% at 62% 50%, #000 0%, transparent 72%);
}

.origen__intro { position: relative; z-index: 2; flex: none; width: min(28ch, 23vw); }

/* La estructura la sostiene el año: número grande, filete y texto. */
.cronologia { position: relative; z-index: 2; flex: none; }

/* El riel va ARRIBA de los años y los puntos se sientan encima. Cruzando
   los números a media altura, como estaba, parecía un tachado. */
.cronologia__riel {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: var(--linea-fuerte);
}

/* El hilo amarillo es lo que se dibuja al desplazarse. */
.cronologia__hilo {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--marca);
  transform-origin: left center;
  box-shadow: 0 0 12px rgb(235 219 0 / 0.5);
}

.linea-tiempo {
  position: relative;
  display: flex;
  align-items: flex-start;
  list-style: none;
}

/* 300 px, no 186: los textos del documento son párrafos, no una línea.
   En la columna estrecha salían a veinte renglones. */
.hito {
  position: relative;
  flex: none;
  width: min(330px, 23vw);
  padding: var(--flow-lg) var(--flow-md) 0 0;
}

/* La mitad baja del panel era papel en blanco: la línea de tiempo
   contaba cinco fechas y debajo no pasaba nada. Cada hito lleva ahora su
   fotografía, y el gris se va retirando conforme avanzan los años —2009
   casi en blanco y negro, 2026 a todo color. La época se ve, no se lee. */
.hito__foto {
  margin: var(--space-lg) var(--space-sm) 0 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-3);
}

.hito__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--foto-brillo)) grayscale(var(--gris, 0));
  transition: filter 0.6s var(--ease);
}

/* Alturas alternas: cinco rectángulos idénticos en fila habrían sido una
   rejilla más, no un ritmo. */
/* Grandes. Al meter los párrafos del documento la fotografía se había
   encogido hasta 119 px «por si acaso», y sobraban 278 px de panel por
   debajo: cinco tiras que no dejaban ver ni el año que ilustran. Se
   miden contra el alto útil, así que en pantalla baja siguen cabiendo. */
.hito:nth-child(odd) .hito__foto  { height: clamp(170px, calc(var(--util) * 0.34), 300px); }
.hito:nth-child(even) .hito__foto { height: clamp(150px, calc(var(--util) * 0.29), 260px); margin-top: calc(var(--space-md) + 28px); }

/* Pantalla ancha pero baja —una portátil a 960x700— es el único caso en
   que el suelo del clamp manda y la columna se pasaba 35 px del panel.
   Ahí la fotografía manda menos que caber. */
@media (min-width: 900px) and (max-height: 760px) {
  .hito:nth-child(odd) .hito__foto  { height: clamp(120px, calc(var(--util) * 0.30), 300px); }
  .hito:nth-child(even) .hito__foto { height: clamp(106px, calc(var(--util) * 0.25), 260px); margin-top: calc(var(--space-sm) + 18px); }
}

.hito:nth-child(1) .hito__foto img { --gris: 0.9; }
.hito:nth-child(2) .hito__foto img { --gris: 0.66; }
.hito:nth-child(3) .hito__foto img { --gris: 0.42; }
.hito:nth-child(4) .hito__foto img { --gris: 0.2; }
.hito--hoy .hito__foto img { --gris: 0; }

/* Sólo el hito de hoy lleva el filete de marca: es el único presente */
.hito--hoy .hito__foto { position: relative; }
.hito--hoy .hito__foto::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38%;
  height: 3px;
  background: var(--marca);
}

.hito b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.2vw, 2.3rem);
  line-height: 1;
  color: var(--tinta-tenue);
  transition: color 0.5s var(--ease);
}

.hito::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fondo);
  border: 2px solid var(--linea-fuerte);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}

/* Al pasar el hilo el hito "se enciende": el punto se llena y el año
   sube de tinta. Es la señal de que la línea avanza contigo. */
.hito.is-vivo b { color: var(--tinta); }
.hito.is-vivo::after {
  background: var(--marca);
  border-color: var(--marca);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgb(235 219 0 / 0.16);
}

.hito h3 {
  font-family: var(--display);
  font-size: 0.98rem;
  line-height: 1.2;
  margin: var(--space-md) 0 var(--space-2xs);
}

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

/* El último hito es el presente: se marca, no se decora */
.hito--hoy b { color: var(--marca-tinta); }
.hito--hoy.is-vivo b { color: var(--marca-tinta); }
.hito--hoy::after { background: var(--marca); border-color: var(--marca); }

/* ============================================================
   3 · Por qué Enso — el contraste "antes y hoy" + las cinco razones
   ============================================================ */

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

/* El panel fusionado trae su intro y su lista desde las hojas de otro
   panel (.porque__intro y .razones viven en horizontal.css) y las
   decoraciones de Evolución son ::before/::after en z-index 0: sin
   subir el contenido, el resplandor se les pintaba encima. */
.evolucion > .porque__intro,
.evolucion > .razones { position: relative; z-index: 2; }

/* El panel era una plancha negra con dos fotos pequeñas flotando.
   El mismo recurso del mapa y del origen —resplandor y trama de
   puntos— le da fondo sin meter una tercera fotografía. */
.evolucion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(56% 64% at 62% 50%, rgb(235 219 0 / 0.14) 0%, rgb(235 219 0 / 0) 66%);
}

.evolucion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--marca);
  opacity: 0.13;
  mask-image: radial-gradient(62% 66% at 60% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(62% 66% at 60% 50%, #000 0%, transparent 74%);
}

.evolucion__intro { position: relative; z-index: 2; flex: none; width: min(28ch, 24vw); }

.contraste { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--flow-sm); }

.contraste__lado { flex: none; width: min(26.5vw, 400px); display: grid; gap: var(--space-md); }

.contraste__etiqueta {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.contraste__lado--hoy .contraste__etiqueta { color: var(--marca-tinta); }

/* Las fotos se miden contra el alto real del panel (--util), no con
   una proporción fija: así ocupan el espacio que antes quedaba vacío
   arriba y abajo. */
.contraste__marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  height: clamp(240px, calc(var(--util) * 0.6), 460px);
  background: var(--fondo-3);
}

/* El pasado se ve en gris; el presente, a todo color. La
   diferencia entre las dos etapas la cuenta la foto, no un
   rótulo que diga "antes" y "después". */
.contraste__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.82)) saturate(0.12);
  transition: filter 0.6s var(--ease);
}

.contraste__lado--hoy .contraste__marco img { filter: brightness(var(--foto-brillo)) saturate(1.04); }

/* La capa gris se superpone a la de color y se retira por la derecha.
   Sin JS se queda escondida y la foto de hoy se ve a color, que es lo
   que debe verse. */
.contraste__gris {
  position: absolute;
  inset: 0;
  filter: brightness(calc(var(--foto-brillo) * 0.8)) saturate(0.1) !important;
  clip-path: inset(0 0 0 100%);
}

.contraste__lado figcaption { font-size: 0.92rem; color: var(--tinta-suave); }

/* El puente ya no es sólo una flecha suelta: es un hilo que se traza
   de una etapa a la otra y termina en el nodo. */
.contraste__puente {
  flex: none;
  position: relative;
  align-self: center;
  width: clamp(48px, 6vw, 120px);
  height: 46px;
  display: grid;
  place-items: center;
}

.contraste__hilo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--marca) 0 4px, transparent 4px 9px);
  transform: scaleX(0);
  transform-origin: left center;
}

.contraste__flecha {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo);
  color: var(--marca-tinta);
}

.contraste__flecha svg { width: 20px; height: 20px; }

/* ============================================================
   4 · Propósito — misión, visión y filosofía en un solo panel
   ============================================================ */

.credo, .filosofia { align-items: center; }

/* El panel reaprovecha el fondo de Filosofía —metraje velado y el
   trazo— y encima pone la intro y las tres declaraciones en fila. */
.proposito { gap: var(--flow-lg); }
.proposito__intro {
  position: relative;
  z-index: 3;
  flex: none;
  width: min(30ch, 25vw);
  display: grid;
  gap: var(--space-sm);
  align-content: center;
  justify-items: start;
}

/* Tres declaraciones separadas por un filete de 1px, no por tres
   tarjetas iguales: la rejilla de tarjetas idénticas está prohibida
   en este proyecto y aquí lo que importa es leer las tres seguidas. */
.credos {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  list-style: none;
}

/* Alineadas por arriba, no centradas. Los tres textos miden distinto y
   centrados arrancaban a tres alturas: los rótulos amarillos salían
   escalonados y el conjunto se leía descuadrado. */
.credo-b {
  flex: none;
  width: min(32ch, 24vw);
  padding: var(--space-sm) var(--flow-md);
  border-left: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-xs);
}

/* Un guion de marca sobre cada rótulo: punto de partida común para las
   tres y ritmo de tres sin convertirlas en tres tarjetas iguales. */
.credo-b__eti { position: relative; padding-top: var(--space-sm); }

.credo-b__eti::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--marca);
}

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

.credo-b h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.credo-b h3 em { font-style: normal; color: var(--marca-tinta); }
.credo-b p { font-size: 0.94rem; color: var(--tinta-suave); }

/* Estos paneles declaran data-oscuro: son oscuros en los dos temas. Si no
   se fijan los tokens, en tema claro el velo tapaba con crema mientras el
   header ya se había puesto blanco —texto blanco sobre crema, ilegible. */
.credo[data-oscuro], .filosofia[data-oscuro] {
  --velo: 0 0 0;
  /* base opaca: ver la nota de horizontal.css */
  background: var(--negro-panel);
  --fondo: #050505;
  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.72);
  --tinta-tenue: rgba(255, 255, 255, 0.6);
  --linea: rgba(255, 255, 255, 0.14);
  --linea-fuerte: rgba(255, 255, 255, 0.3);
  --marca-tinta: var(--marca);
  color: var(--blanco);
}

/* La caja recorta, la foto desborda: si desborda la caja, su recorte y
   el del velo se redondean distinto y asoma la línea blanca vertical. */
.credo__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.panel .credo__media > img,
.panel .credo__media > video { position: absolute; top: 0; left: -10%; max-width: none; width: 120%; height: 100%; }
.credo__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42) saturate(0.9); }

.credo__velo {
  position: absolute;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.92) 0%, rgb(var(--velo) / 0.62) 55%, rgb(var(--velo) / 0.4) 100%);
}

.credo__inner, .filosofia__inner { position: relative; z-index: 2; width: min(52ch, 44vw); }

/* La visión es la frase más larga de la página: con el cuerpo del resto
   de declaraciones se salía del panel en pantallas grandes. */
.credo--vision .credo__inner { width: min(58ch, 50vw); }

/* La frase de la visión es la más larga del sitio y ocupa media
   pantalla: el velo tapa más a la izquierda y deja respirar la
   fotografía en el tercio derecho, que era el hueco vacío. */
.credo__velo--vision {
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.95) 0%, rgb(var(--velo) / 0.9) 42%, rgb(var(--velo) / 0.6) 100%),
    linear-gradient(0deg, rgb(var(--velo) / 0.5) 0%, rgb(var(--velo) / 0) 46%);
}

.credo--vision .credo__media img { filter: brightness(0.5) saturate(0.62) grayscale(0.35); }
.credo--vision .credo__titulo { font-size: clamp(1.9rem, 3.5vw, 3.6rem); }

/* La declaración es la sección: tamaño de hero, no de encabezado */
.credo__titulo {
  font-size: clamp(2.3rem, 5vw, 5.4rem);
  margin: var(--flow-md) 0 var(--flow-md);
}

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

.credo__filete {
  display: block;
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, var(--marca), var(--naranja));
  margin-bottom: var(--flow-md);
}

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

.credo__cuerpo + .credo__cuerpo { margin-top: var(--space-md); }

.credo__pie {
  display: block;
  margin-top: var(--flow-md);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* --- Filosofía: el trazo manda y el texto acompaña --- */

/* Metraje real bajo el trazo. Muy velado y desaturado: es profundidad,
   no un vídeo que haya que mirar. */
.filosofia__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.filosofia__media video,
.filosofia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.92) contrast(1.1) brightness(0.34);
}

.filosofia__velo {
  position: absolute;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.72) 0%, rgb(var(--velo) / 0.86) 48%, rgb(var(--velo) / 0.95) 100%),
    radial-gradient(70% 80% at 34% 50%, rgb(var(--velo) / 0) 0%, rgb(var(--velo) / 0.55) 78%);
}

.filosofia__velo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--marca);
  opacity: 0.11;
  mask-image: radial-gradient(58% 70% at 34% 50%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(58% 70% at 34% 50%, #000 0%, transparent 76%);
}

.filosofia__trazo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(96vh, 780px);
  height: auto;
  translate: -30% -50%;
  fill: var(--blanco);
  opacity: 0.085;
  pointer-events: none;
}

.filosofia__inner { z-index: 3; width: min(46ch, 38vw); margin-inline-start: auto; }
.filosofia__titulo { font-size: clamp(1.9rem, 3.6vw, 3.8rem); margin: var(--flow-sm) 0 var(--flow-md); }

/* ============================================================
   7 · Pilares — la cadena ISCTC
   ============================================================ */

.pilares { gap: var(--flow-md); align-items: center; }
.pilares__intro { flex: none; width: min(24ch, 19vw); }

/* Una fotografía cierra el panel por la derecha: los cinco pilares
   dejan de flotar sobre un fondo liso y se apoyan en trabajo real. */
.pilares__foto {
  flex: none;
  width: min(20vw, 290px);
  display: grid;
  gap: var(--space-sm);
}

/* 0.58 de proporción destrozaba cualquier foto de 3:2. Más baja. */
.pilares__foto img {
  width: 100%;
  height: clamp(210px, calc(var(--util) * 0.44), 340px);
  object-fit: cover;
  border-radius: var(--radio);
  filter: brightness(var(--foto-brillo));
}

.pilares__foto figcaption {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* La geometría del riel sale de dos variables, no de números sueltos:
   el hilo tiene que arrancar en el CENTRO del primer círculo y morir en
   el CENTRO del último. Con porcentajes a ojo sobraba por la derecha y
   se metía dentro de los círculos. */
.cadena {
  --eslabon: min(106px, 8.1vw);
  --letra: min(74px, 5.8vw);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--flow-sm);
  list-style: none;
  padding-top: var(--space-md);
}

.cadena::before,
.cadena__avance {
  content: "";
  position: absolute;
  left: calc(var(--letra) / 2);
  right: calc(var(--eslabon) - var(--letra) / 2);
  top: calc(var(--space-md) + var(--letra) / 2);
  height: 2px;
  margin-top: -1px;
  /* Detrás de los eslabones: el hilo une los círculos, no los atraviesa */
  z-index: 0;
}

.cadena::before { background: var(--linea); }

.cadena__avance {
  background: linear-gradient(90deg, var(--marca), var(--naranja));
  transform-origin: left center;
  transform: scaleX(0);
}

.eslabon {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--eslabon);
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
  text-align: left;
}

.eslabon__letra {
  position: relative;
  z-index: 2;
  width: var(--letra);
  height: var(--letra);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--fondo);
  border: 2px solid var(--marca-tinta);
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1;
  color: var(--marca-tinta);
}

.eslabon h3 { font-family: var(--display); font-size: 1.02rem; line-height: 1.15; }
.eslabon p { font-size: 0.85rem; color: var(--tinta-suave); }

/* ============================================================
   8 · Valores
   ============================================================ */

.valores { gap: var(--flow-md); align-items: center; }

/* Sin fotografía de fondo: nocturna y desenfocada se leía como manchas.
   El panel gana cuerpo con resplandor y trama —el recurso que ya usan
   evolución, principios y cobertura— y la fotografía entra como bloque. */
.valores::before,
.valores::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.valores::before {
  background: radial-gradient(54% 58% at 58% 50%, rgb(253 214 0 / 0.11) 0%, rgb(253 214 0 / 0) 68%);
}

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

/* La fotografía cierra la fila, como en pilares: los cinco valores
   dejan de flotar y aterrizan en trabajo real. */
.valores__foto {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(22vw, 330px);
  display: grid;
  gap: var(--space-sm);
}

/* Un retrato de grupo no aguanta un recorte de 0.55 de proporción: se
   quedaban fuera las personas de los extremos. Más ancha y menos alta. */
.valores__foto img {
  width: 100%;
  height: clamp(260px, calc(var(--util) * 0.62), 430px);
  object-fit: cover;
  border-radius: var(--radio);
  filter: brightness(var(--foto-brillo));
}

.valores__foto figcaption {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.valores__intro { position: relative; z-index: 2; flex: none; width: min(19ch, 16vw); }

/* Los valores dejan de ser una rejilla de fichas y pasan a leerse como
   un índice editorial: la frase pequeña a la izquierda, un filete que
   cruza el ancho y la palabra en grande alineada a la derecha. Antes eran
   dos renglones de tres con un hueco en la esquina y cinco iconos
   sueltos flotando; ahora las cinco palabras forman una columna que se
   lee de un golpe. */
.valores__lista {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(45vw, 650px);
  list-style: none;
  display: grid;
  align-content: center;
}

.valor {
  display: grid;
  grid-template-columns: 2.4rem 26px minmax(0, auto) minmax(2rem, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  /* El bloque de cinco filas tiene que pesar lo mismo que la fotografía
     de al lado; con filas apretadas quedaba flotando en medio del panel. */
  padding-block: clamp(0.85rem, 2.7vh, 1.95rem);
  border-top: 1px solid var(--linea);
}

.valor:first-child { border-top: 0; }

.valor__num {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--marca-tinta);
  opacity: 0.8;
}

.valor__pre { font-size: 0.88rem; line-height: 1.35; color: var(--tinta-tenue); }

/* El filete estira lo que sobra: es lo que ata la frase con la palabra */
.valor__hilo {
  height: 1px;
  background: var(--linea);
  transition: background 0.45s var(--ease), transform 0.45s var(--ease);
  transform-origin: left center;
}

.valor h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.15vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

/* Encendido: por scroll (is-vivo, lo pone nosotros.js) o al pasar por
   encima. Sólo color y translate; nada que provoque reflow. */
.valor h3, .valor__icono, .valor__num, .valor__pre {
  transition: color 0.45s var(--ease), opacity 0.45s var(--ease), translate 0.45s var(--ease);
}

.valor.is-vivo .valor__hilo { background: var(--marca); }
.valor.is-vivo .valor__num { opacity: 1; }
.valor.is-vivo .valor__pre { color: var(--tinta-suave); }
.valor.is-vivo .valor__icono { opacity: 1; color: var(--marca); }

.valor:hover .valor__hilo { background: var(--marca); }
.valor:hover h3 { color: var(--marca-tinta); translate: -6px 0; }
.valor:hover .valor__icono { color: var(--marca); }

.valor__icono {
  width: 26px;
  height: 26px;
  color: var(--marca-tinta);
  opacity: 0.85;
}


/* ============================================================
   9 · Principios — la hélice
   ============================================================ */

.principios { gap: var(--flow-lg); align-items: center; background: var(--fondo-2); }

/* Base opaca + fotografía de fondo, igual que en Origen: el panel era la
   única sección de Nosotros sin una sola imagen. */
.principios__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.principios__media img {
  max-width: none;
  width: 124%;
  height: 100%;
  margin-left: -12%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.1) brightness(0.62) blur(4px);
}
[data-tema="claro"] .principios__media img { filter: grayscale(1) contrast(1.04) brightness(1.04) blur(6px); }

.principios__velo {
  position: absolute;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.93) 0%, rgb(var(--velo) / 0.8) 38%, rgb(var(--velo) / 0.62) 100%),
    radial-gradient(110% 100% at 8% 50%, rgb(var(--velo) / 0.6) 0%, rgb(var(--velo) / 0) 62%);
}

/* Mismo recurso que evolución y cobertura: resplandor + trama de puntos,
   para que el ADN no quede colgado sobre una plancha lisa. */
.principios::before,
.principios::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.principios::before {
  background: radial-gradient(52% 60% at 62% 50%, rgb(243 176 0 / 0.13) 0%, rgb(243 176 0 / 0) 68%);
}

.principios::after {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--marca);
  opacity: 0.12;
  mask-image: radial-gradient(58% 64% at 62% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(58% 64% at 62% 50%, #000 0%, transparent 74%);
}
.principios__intro { position: relative; z-index: 2; flex: none; width: min(26ch, 22vw); }
.principios__intro strong { color: var(--tinta); font-weight: 400; }

.helice { position: relative; z-index: 2; flex: none; width: min(62vw, 880px); }

.helice__svg { width: 100%; height: min(46vh, 380px); overflow: visible; }

.helice__hebra { fill: none; stroke-width: 2; stroke-linecap: round; }
.helice__hebra--a { stroke: var(--marca); }
.helice__hebra--b { stroke: var(--naranja); opacity: 0.75; }

/* Sobre papel el amarillo de marca casi no se ve: las hebras usan la
   variante de tinta, igual que las rutas del mapa. */
[data-tema="claro"] .helice__hebra--a { stroke: var(--marca-tinta); }
[data-tema="claro"] .helice__hebra--b { stroke: #8a5f00; opacity: 0.8; }
.helice__travesanos line { stroke: var(--linea); stroke-width: 1; }

.helice__marca {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(30vh, 220px);
  height: auto;
  translate: -50% -50%;
  fill: var(--tinta);
  opacity: 0.04;
  pointer-events: none;
}

/* Los cinco nodos van sobre la hélice, alternando arriba y abajo */
.principios__lista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  pointer-events: none;
}

.principio {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 100px;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  pointer-events: auto;
}

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

/* La alternancia va por align-self, no por transform: GSAP escribe un
   transform en línea al hacer entrar la tarjeta y se comía el
   desplazamiento. */
.principio:nth-child(odd) { align-self: flex-start; margin-top: 12%; }
.principio:nth-child(even) { align-self: flex-end; margin-bottom: 12%; }

.principio span {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--marca-tinta);
}

.principio h3 { font-family: var(--display); font-size: 0.94rem; line-height: 1.1; white-space: nowrap; }

/* ============================================================
   Móvil — la misma historia, apilada
   ============================================================ */

@media (max-width: 899px) {
  /* .credo--vision pesa más que .credo__inner y se saltaba el reset:
     la visión se leía en una columna de 195 px. */
  .credo--vision .credo__inner,
  .origen__intro,
  .evolucion__intro,
  .porque__intro,
  .proposito__intro,
  .credo-b,
  .pilares__intro,
  .valores__intro,
  .principios__intro,
  .credo__inner,
  .filosofia__inner,
  .helice { width: 100%; max-width: none; margin-inline-start: 0; }

  /* --- Propósito: las tres declaraciones se apilan y el filete pasa
         de vertical a horizontal, que es como se lee en columna. --- */
  .credos { flex-direction: column; margin-top: var(--flow-lg); }
  .credo-b {
    padding: var(--flow-md) 0;
    border-left: 0;
    border-top: 1px solid var(--linea);
  }
  .credo-b:first-child { border-top: 0; padding-top: 0; }
  .credo-b__eti { padding-top: 0; }
  .credo-b__eti::before { display: none; }

  .anos { display: none; }

  /* --- Origen: el hilo se pone de pie --- */
  .linea-tiempo { display: block; padding-top: var(--flow-lg); }
  .cronologia__riel { top: var(--flow-lg); bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .cronologia__hilo { transform-origin: center top; }

  /* Apilada, la fotografía se ve por arriba y el texto baja sobre velo
     casi opaco: es la única forma de que 5 hitos quepan legibles. */
  .origen__velo {
    background:
      linear-gradient(180deg, rgb(var(--velo) / 0.7) 0%, rgb(var(--velo) / 0.93) 26%, rgb(var(--velo) / 0.97) 100%);
  }
  .origen__velo::after { opacity: 0.05; mask-image: none; -webkit-mask-image: none; }
  .origen__media img { width: 100%; margin-left: 0; }

  .hito {
    width: 100%;
    padding: 0 0 var(--flow-lg) var(--flow-md);
  }

  .hito:last-child { padding-bottom: 0; }
  .hito::after { top: 0.5em; }
  .hito h3 { margin-top: var(--space-2xs); }

  /* --- Evolución: una encima de la otra, con la flecha girada --- */
  .contraste { flex-direction: column; align-items: stretch; margin-top: var(--flow-lg); }
  .contraste__lado { width: 100%; }
  .contraste__marco { height: auto; aspect-ratio: 4 / 3; }

  /* Apilado, el puente gira: el hilo baja y la flecha apunta abajo. */
  .contraste__puente { width: 100%; height: 104px; }
  .contraste__hilo {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
    background: repeating-linear-gradient(180deg, var(--marca) 0 4px, transparent 4px 9px);
  }
  .contraste__flecha { rotate: 90deg; justify-self: center; margin-inline: auto; }

  /* El resplandor y la trama son para el panel ancho de escritorio. */
  .evolucion::before, .evolucion::after,
  .principios::before, .principios::after { display: none; }

  .valores::before, .valores::after { display: none; }
  .valores__foto { width: 100%; margin-top: var(--flow-md); }
  .valores__foto img { height: auto; aspect-ratio: 16 / 10; }

  /* --- Fondos apilados: la foto arriba, el texto sobre velo casi opaco --- */
  .filosofia__media video, .filosofia__media img { width: 100%; margin-left: 0; }
  .filosofia__velo {
    background: linear-gradient(180deg, rgb(var(--velo) / 0.72) 0%, rgb(var(--velo) / 0.94) 24%, rgb(var(--velo) / 0.97) 100%);
  }
  .filosofia__velo::after { opacity: 0.05; mask-image: none; -webkit-mask-image: none; }

  /* La foto de pilares pasa a ser un bloque ancho al final de la lista. */
  .pilares__foto { width: 100%; margin-inline-start: 0; margin-top: var(--flow-md); }
  .pilares__foto img { height: auto; aspect-ratio: 16 / 10; }

  /* --- Qué creemos ---
     Misión, visión y filosofía son declaraciones, no párrafos. En
     escritorio ocupan un panel entero; apiladas se leían como un bloque
     más de la lista, así que aquí recuperan la pantalla completa. */
  .credo,
  .filosofia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78svh;
  }

  /* La misión es la única con fotografía detrás: ahí el aire de más sí
     tiene contenido que mirar. */
  .credo--mision { min-height: 92svh; }

  /* La píldora se repetía seis veces seguidas en un scroll continuo y
     se ocultaban las cinco de más. De aquellos seis paneles sólo queda
     Propósito, así que no repite nada: es el único rótulo que nombra la
     sección en teléfono, y por eso vuelve. Los otros cuatro selectores
     no correspondían ya a ningún panel publicado. */

  .credo--vision .credo__titulo,
  .filosofia .filosofia__titulo { margin-top: 0; }

  .credo__media { left: 0; width: 100%; }

  /* El texto va centrado, así que el velo cierra en el centro y se abre
     arriba y abajo: si no, el panel a pantalla completa se convertía en
     500 px de negro plano. */
  .credo__velo {
    background: linear-gradient(180deg, rgb(var(--velo) / 0.58) 0%, rgb(var(--velo) / 0.88) 28%,
                                rgb(var(--velo) / 0.9) 72%, rgb(var(--velo) / 0.6) 100%);
  }

  .credo__titulo { font-size: clamp(2rem, 9.2vw, 2.9rem); }
  .filosofia__titulo { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .filosofia__trazo { translate: -50% -50%; width: min(120vw, 620px); opacity: 0.07; }
  .filosofia__inner { margin-inline-start: 0; }

  /* --- Pilares: cinco eslabones apilados con la cadena vertical --- */
  .cadena { display: block; padding-top: 0; margin-top: var(--flow-lg); }
  .cadena::before, .cadena__avance { display: none; }

  .eslabon {
    width: 100%;
    grid-template-columns: 64px 1fr;
    align-items: start;
    column-gap: var(--space-md);
    padding-bottom: var(--flow-lg);
  }

  .eslabon__letra {
    grid-row: span 2;
    width: 64px;
    height: 64px;
    margin-bottom: 0;
    font-size: 1.5rem;
  }

  .eslabon { width: 100%; z-index: auto; }

  /* --- Valores: filete horizontal, no vertical --- */
  .valores__lista { display: block; margin-top: var(--flow-lg); }

  .valor,
  
  .valor:first-child { border-top: 0; padding-top: 0; }
  .valor:last-child { padding-bottom: var(--flow-md); }
  .valor__icono { grid-row: span 2; margin-bottom: 0; }

  /* --- Principios: la hélice se convierte en lista con hilo recto --- */
  .helice__svg, .helice__marca { display: none; }

  .principios__lista {
    position: relative;
    inset: auto;
    display: block;
    margin-top: var(--flow-lg);
    padding-left: var(--flow-md);
    border-left: 1px solid var(--linea);
  }

  .principio,
  .principio:nth-child(odd),
  .principio:nth-child(even) {
    transform: none;
    justify-items: start;
    justify-content: start;
    padding: 0;
    margin-bottom: var(--flow-md);
    border: 0;
    border-radius: 0;
    background: none;
  }

  .panel--alterno .principio { background: none; }

  .principio::before {
    content: "";
    position: absolute;
    left: calc(var(--flow-md) * -1 - 5px);
    top: 0.7em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--marca);
  }

  .principio h3 { font-size: 1.15rem; }
}


/* ============================================================
   Presencia internacional
   Columna propia junto a las sedes: son alianzas, no bodegas, y no
   tienen superficie ni punto en el mapa de México.
   ============================================================ */
.alianzas {
  flex: none;
  width: min(30ch, 22vw);
  display: grid;
  align-content: center;
  gap: var(--space-sm);
}

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

.alianzas__lista li {
  display: grid;
  gap: 2px;
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--linea);
}

.alianzas__lista li:last-child { border-bottom: 1px solid var(--linea); }
.alianzas__lista b { font-family: var(--display); font-size: 0.98rem; }
.alianzas__lista span { font-size: 0.78rem; color: var(--tinta-tenue); }

@media (max-width: 899px) {
  .alianzas { width: 100%; margin-top: var(--flow-md); }
}


/* ============================================================
   Cobertura internacional — el mapa de América
   Sustituye a la lista .alianzas: el cliente mandó el diseño y pedía
   verlo, no leerlo. Bloque de marca —negro sobre amarillo— en los dos
   temas: no hereda la tinta de la página a propósito.
   ============================================================ */
.mapa-am {
  flex: none;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  align-content: center;
  background: var(--marca);
  color: #0a0a0a;
  border-radius: var(--radio-lg, 18px);
  /* El hueco lateral no es decorativo: es donde caben las fichas, que
     salen fuera de la silueta. Se estrechó al entrar México en el mismo
     mapa: el panel lleva tres columnas —texto, mapa y sedes— y con 11 vw
     de hueco la de sedes se quedaba fuera de pantalla. Las fichas caben
     porque ahora tienen ancho máximo y parten la línea. */
  padding: var(--space-sm) clamp(4.5rem, 7vw, 7rem);
  /* Unidad del bloque. Los hilos y los desvíos de las fichas se miden
     con ella y no en rem sueltos: en una portátil baja el mapa encoge un
     tercio y unos hilos de tamaño fijo sacaban dos fichas fuera de la
     caja amarilla. */
  --u: 2.2rem;
}

/* El titular no manda sobre el ancho del bloque: en una línea medía
   más que el mapa entero y estiraba la caja amarilla 250 px. */
.mapa-am__titulo { display: grid; gap: 2px; text-align: center; max-width: 26ch; justify-self: center; }
.mapa-am__titulo .eyebrow { color: rgba(10, 10, 10, 0.6); }
.mapa-am__titulo .eyebrow::before { background: rgba(10, 10, 10, 0.5); }
.mapa-am__titulo b {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.15;
}

.mapa-am__lienzo { position: relative; justify-self: center; }

.mapa-am__silueta {
  display: block;
  /* Vuelve a haber tres columnas en el panel —texto, mapa y sedes—, así
     que la silueta cede el alto que hace falta para que la de sedes
     entre en pantalla. Comprobado de 1280 a 1680 px. */
  height: min(48vh, 405px);
  width: auto;
  /* La regla global de imágenes limita al 100 % del contenedor y aquí
     el alto es quien manda: sin esto la silueta se aplastaba. */
  max-width: none;
}

.mapa-am__aliados { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }

/* Cada aliado es un ancla de tamaño cero en su coordenada real; el
   punto, el hilo y la ficha se cuelgan de ahí. */
.alia { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }

.alia__punto {
  position: absolute;
  left: 0; top: 0;
  width: 11px; height: 11px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 4px var(--marca), 0 0 0 5px rgba(10, 10, 10, 0.35);
}

.alia__hilo {
  position: absolute;
  top: 0;
  width: var(--largo, 2.6rem);
  border-top: 2px dotted rgba(10, 10, 10, 0.65);
  transform-origin: left center;
}

.alia__ficha {
  position: absolute;
  top: 0;
  translate: 0 -50%;
  /* `--dy` aparta la ficha en vertical sin mover el punto: Punta Cana y
     Colombia caen a 32 px una de otra y sus fichas miden 66.

     Va en el margen y no dentro del `translate` a propósito. GSAP anima
     estas fichas y, al hacerse cargo, lee el `translate` calculado y lo
     traslada a su propia matriz; un `calc()` no sabe leerlo y lo
     descarta en silencio —la ficha perdía también el -50% y se
     descolgaba media caja—. El margen no le interesa a GSAP. */
  margin-top: var(--dy, 0rem);
  display: grid;
  gap: 1px;
  padding: 0.42rem 0.7rem;
  background: #fff;
  border-radius: 8px;
  /* Ancho máximo en vez de una sola línea: «Alianza estratégica» hacía
     la ficha de Canadá tan ancha que se comía la de Punta Cana. Todas
     miden lo mismo y parten donde tengan que partir. */
  max-width: 7.5rem;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.18);
}

.alia__ficha b { font-family: var(--display); font-size: 0.9rem; line-height: 1.1; }
.alia__ficha em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}

.alia--dcha .alia__hilo { left: 0; }
.alia--dcha .alia__ficha { left: calc(var(--largo, 2.6rem) + 0.35rem); }

.alia--izq .alia__hilo { right: 0; transform-origin: right center; }
.alia--izq .alia__ficha { right: calc(var(--largo, 2.6rem) + 0.35rem); }

/* ---------- Las cinco sedes de México, sobre el mismo mapa ----------
   Aquí no caben fichas: a escala continental, Guadalajara y Ciudad de
   México están a un centímetro. Son puntos, y sólo se nombra el que
   está activo. Quien manda es la lista de al lado: pasar por una sede
   —o tocarla— enciende su punto y escribe su nombre. */
.mapa-am__sedes { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }

.sede-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.42);
  box-shadow: 0 0 0 2px var(--marca);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.sede-pin__nombre {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  translate: -50% 0;
  padding: 0.24rem 0.5rem;
  border-radius: 6px;
  background: #0a0a0a;
  color: var(--marca);
  font-family: var(--display);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.28s var(--ease), translate 0.28s var(--ease);
  pointer-events: none;
}

/* El punto activo crece por el anillo, no por `scale`: escalando la
   caja escalaría también su etiqueta y el texto saldría a 1,45 veces su
   cuerpo. */
.sede-pin.is-activa {
  background: #0a0a0a;
  box-shadow: 0 0 0 4px var(--marca), 0 0 0 5.5px rgba(10, 10, 10, 0.32);
}

.sede-pin.is-activa .sede-pin__nombre { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sede-pin, .sede-pin__nombre { transition: none; }
}

/* Pantallas bajas: el mapa cede alto antes que las fichas de sede. */
@media (min-width: 900px) and (max-height: 820px) {
  .mapa-am { padding-inline: clamp(3.5rem, 5.5vw, 5.5rem); --u: 1.5rem; }
  .mapa-am__silueta { height: min(44vh, 330px); }

  /* Las fichas también: con el mapa a dos tercios, las de Canadá y
     Punta Cana quedaban a 67 px de distancia y miden 66. */
  .alia__ficha { padding: 0.3rem 0.5rem; max-width: 6.4rem; }
  .alia__ficha b { font-size: 0.8rem; }
  .alia__ficha em { font-size: 0.6rem; letter-spacing: 0.08em; }
}

/* En el recorrido lateral la lista sobra: el mapa ya la dice. */
.mapa-am__leyenda { display: none; }

@media (max-width: 899px) {
  .mapa-am { width: 100%; margin-top: var(--flow-md); padding-inline: var(--space-md); }
  .mapa-am__silueta { height: auto; width: 100%; max-width: 420px; margin-inline: auto; }
  /* Apilado no cabe una ficha al lado de cada punto —São Paulo y
     Canadá se salían del bloque—. El mapa se queda con los puntos y
     debajo va la lista. */
  .alia__hilo, .alia__ficha { display: none; }

  .mapa-am__leyenda {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs) var(--space-sm);
    margin-top: var(--space-sm);
    list-style: none;
    padding: 0;
  }
  .mapa-am__leyenda li {
    display: grid;
    gap: 1px;
    padding-top: var(--space-2xs);
    border-top: 1px solid rgba(10, 10, 10, 0.22);
  }
  .mapa-am__leyenda b { font-family: var(--display); font-size: 0.9rem; }
  .mapa-am__leyenda span { font-size: 0.72rem; color: rgba(10, 10, 10, 0.6); }

  /* Apiladas, las razones no tienen que alinear su fotografía con
     nada: `margin-top: auto` sólo sirve cuando están en fila. */
  #p-porque .razon__foto { margin-top: var(--space-sm); height: 44vw; padding-top: 0; }
}


/* ============================================================
   Por qué Enso — el arco de 360
   El cliente pidió movimiento y una referencia al servicio integral.
   Es la misma figura de la marca: un círculo trazado de una vez.
   ============================================================ */
.giro360 {
  position: relative;
  margin-top: var(--flow-md);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}

.giro360__disco { grid-row: 1; width: clamp(74px, 7vw, 96px); height: auto; display: block; }
.giro360__base {
  fill: none;
  stroke: var(--linea);
  stroke-width: 5;
}
.giro360__arco {
  fill: none;
  stroke: var(--marca);
  stroke-width: 5;
  stroke-linecap: round;
  /* Arranca arriba y gira en el sentido de las agujas. */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.giro360__cifra {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(74px, 7vw, 96px);
  translate: 0 -50%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--display);
  line-height: 1;
}
.giro360__cifra b { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-variant-numeric: tabular-nums; }
.giro360__cifra i { font-style: normal; font-size: 0.8em; }

.giro360__pie {
  display: grid;
  gap: 2px;
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.15;
}
.giro360__pie em {
  font-family: var(--texto-font);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--tinta-tenue);
}

/* El filete que separa cada razón se traza al llegar, en vez de estar
   puesto desde el principio. Sólo en el recorrido lateral: apilado el
   filete es horizontal y lo dibuja el borde superior. */
@media (min-width: 900px) {
  #p-porque .razon { position: relative; border-left-color: transparent; }
  #p-porque .razon::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--linea);
    transform: scaleY(var(--filete, 1));
    transform-origin: top center;
  }
  #p-porque .razon:first-child::before { display: none; }
}


/* ============================================================
   Cobertura — las listas
   El cliente mandó el contenido exacto: México con el papel de cada
   ciudad, la presencia internacional y la dirección de la matriz.
   ============================================================ */
/* Las dos listas van una al lado de la otra, no en columna: apiladas
   sumaban doce renglones y la columna se salía del panel por arriba y
   por abajo. La ficha de la matriz cruza las dos. */
.cob-datos {
  flex: none;
  width: min(56ch, 40vw);
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-content: center;
  gap: var(--flow-sm) var(--flow-md);
}

.cob-datos .cob-matriz { grid-column: 1 / -1; margin-top: var(--space-2xs); }

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

.cob-lista { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }

.cob-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--linea);
}

.cob-lista li:first-child { border-top: 0; }

.cob-lista b { font-family: var(--display); font-size: 0.98rem; line-height: 1.2; }

/* El punto medio separa ciudad y papel, como en el texto que mandaron. */
.cob-lista span { font-size: 0.78rem; color: var(--tinta-tenue); }
.cob-lista span::before { content: "· "; }

.cob-matriz {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.cob-matriz:hover { border-color: var(--marca); background: var(--fondo-2); }

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

.cob-matriz__cuerpo { display: grid; gap: 2px; }
.cob-matriz__cuerpo b {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}
.cob-matriz__cuerpo > span { font-size: 0.86rem; color: var(--tinta-suave); line-height: 1.45; }

.cob-matriz__ir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--tinta-tenue);
}

/* Pantallas bajas: la columna cede antes de que algo se corte. */
@media (min-width: 900px) and (max-height: 820px) {
  /* No se estrecha: con las dos listas en paralelo, por debajo de esto
     «Ciudad de México · Oficina matriz» parte en dos renglones y la
     columna se lee a jirones. */
  .cob-datos { width: min(58ch, 46vw); gap: var(--space-md); }
  .cob-lista li { padding-block: 3px; }
  .cob-lista b { font-size: 0.92rem; }
  .cob-matriz { padding: var(--space-xs); }
}

@media (max-width: 899px) {
  .cob-datos { width: 100%; margin-top: var(--flow-md); grid-template-columns: 1fr; }
}