/* ============================================================
   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;
}

/* Etiqueta de sección: píldora con borde, no bloque sólido —
   el amarillo pesa demasiado repetido seis veces. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.4rem var(--space-md);
  border: 1px solid var(--marca-tinta);
  border-radius: 100px;
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   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 {
  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;
  inset: 0;
  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); }
.origen__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* 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;
}

.hito {
  position: relative;
  flex: none;
  width: min(186px, 12.9vw);
  padding: var(--flow-lg) var(--flow-sm) 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. */
.hito:nth-child(odd) .hito__foto  { height: clamp(118px, calc(var(--util) * 0.23), 170px); }
.hito:nth-child(even) .hito__foto { height: clamp(98px, calc(var(--util) * 0.185), 138px); margin-top: calc(var(--space-lg) + 40px); }

.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 · Evolución — antes y hoy
   ============================================================ */

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

/* 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); }
.evolucion__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

.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-6 · Qué creemos — misión, visión, filosofía
   ============================================================ */

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

/* 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);
}

.credo__media { position: absolute; top: 0; bottom: 0; left: -10%; width: 120%; z-index: 0; }
.credo__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42) saturate(0.9); }

.credo__velo {
  position: absolute;
  inset: 0;
  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;
  inset: 0;
  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); }
.pilares__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* 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); }
.valores__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* 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;
  inset: 0;
  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 h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }
.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,
  .pilares__intro,
  .valores__intro,
  .principios__intro,
  .credo__inner,
  .filosofia__inner,
  .helice { width: 100%; max-width: none; margin-inline-start: 0; }

  .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.
     Basta con la primera para abrir el capítulo. */
  .credo--vision .pill,
  .filosofia .pill,
  .pilares .pill,
  .valores .pill,
  .principios .pill { display: none; }

  .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; }
}