/* ============================================================
   MOVIMIENTO + MOTIVO DE MARCA "RAYOS CONVERGENTES"
   Derivado directo de platilla_de_colores.jpg:
   franjas que nacen de un punto → "muchas necesidades,
   un solo punto de convergencia tecnológica".
   ============================================================ */

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--white);
  padding-block: clamp(1.5rem, .75rem + 2vw, 2.5rem) clamp(1.5rem, .75rem + 2vw, 2.5rem);
  isolation: isolate;
}
.hero__inner {
  display: grid; gap: var(--sp-9);
  /* La columna del titular se ensancha: 5rem debe entrar con holgura
     suficiente para aguantar una tipografía de respaldo más ancha. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: stretch;
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .35rem .8rem .35rem .5rem; border-radius: var(--r-pill);
  background: var(--white); border: var(--border);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-micro); font-weight: var(--weight-semi);
  color: var(--ink-muted); margin-bottom: var(--sp-5);
  text-align: left; line-height: 1.4;
}
/* El titular declara sus tres líneas con <span> en bloque: el número de
   líneas deja de depender del ancho disponible y es siempre tres. El tamaño
   se ata al ancho del contenedor (no del viewport) para que la proporción
   texto/caja sea constante y ninguna línea se parta en dos. */
/* El panel de la derecha se estira al alto de la fila; la columna del titular
   también, así que su contenido tiene que centrarse dentro de ella o queda
   pegado arriba y las dos columnas dejan de alinearse. */
.hero__texto {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}

.hero__title {
  /* 12.35cqw = 5rem exactos con la caja de escritorio (648 px). Por debajo
     escala con el contenedor, así la proporción texto/caja no cambia.
     El factor se calibró cuando la línea más larga era «Somos un frente» y
     llenaba la columna. Ahora la más larga es «de confianza», que ocupa el
     70 %: el titular cabe con holgura de sobra y NO hay que subir el factor
     para recuperarla. Ese 30 % libre es donde vive el panal (ver
     assets/js/panal.js); agrandar la letra se lo comería. */
  font-size: min(5rem, 12.35cqw);
  line-height: .98;
  letter-spacing: var(--tracking-display);
  text-wrap: nowrap;          /* cada línea es un bloque; no debe replegarse */
}
.hero__linea { display: block; }
.hero__linea--navy { color: var(--navy-700); }
.hero__title .accent { color: var(--accent); }

/* Sin soporte de unidades de contenedor, se cae a una escala por viewport
   con el mismo comportamiento. */
@supports not (width: 1cqw) {
  .hero__title { font-size: clamp(2rem, 5.5vw, 5rem); }
}
.hero__title .underline {
  position: relative; white-space: nowrap;
}
.hero__title .underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em;
  background: var(--accent); opacity: .22; border-radius: 2px; z-index: -1;
}
.hero__lead {
  margin-top: var(--sp-5); font-size: var(--fs-lead);
  color: var(--ink-muted); max-width: 54ch;
}
.hero__actions { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.hero__proof { margin-top: var(--sp-8); }
.hero__proof:empty { margin-top: 0; }

/* ── RAYOS CONVERGENTES ─────────────────────────────────
   El otro motivo de la marca —franjas que nacen de un punto—, el mismo de
   `platilla_de_colores.jpg`. Estuvo en el hero y se retiró: sobre blanco
   dejaba cantos duros y competía con la nitidez del titular. Su sitio es un
   bloque cerrado y oscuro, que es donde vive el original.

   Va en el flanco derecho, fuera de la columna de texto. Un fondo que cruza el
   texto le baja el contraste, y aquí es blanco sobre navy a 12.9:1: un margen
   que no hay por qué gastar en un adorno. */
.rayos {
  position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: 0; bottom: 0;
  /* El flanco libre más estrecho que deja el texto centrado de las secciones de
     cierre es el 20.1 %, a 1024 px. Ocuparlo entero dejaba **un píxel** de
     holgura: el ancho se queda en el 17 % para que sobren treinta y pico y el
     motivo no dependa de que la copia no crezca nunca. */
  width: 17%;
}
/* La sección de contacto de la portada es una rejilla de dos columnas: el texto
   sobre navy acaba en el 43 % y a la derecha va una tarjeta blanca opaca. Hay
   flanco de sobra, y lo que la tarjeta tape simplemente no se ve —tapar no baja
   el contraste de nada. */
.rayos--ancho { width: 52%; }
/* `isolation` acota el z-index negativo al bloque: sin ella, el hijo a −1 se
   iría por detrás del fondo de la sección y no se vería nada. */
.section--invert { position: relative; isolation: isolate; overflow: hidden; }
.section--invert > .container { position: relative; }

/* Por debajo de 1024 px las dos secciones se estrechan y el texto se come el
   flanco: a 820 px queda un 10 % en las de cierre y un 5 % en contacto, donde
   además la rejilla se apila. No hay dónde ponerlos sin pasar por debajo del
   texto, y este texto es blanco sobre navy a 12.9:1 —y su bajada a 7.4:1—: un
   margen que no se gasta en un adorno. Medido: una franja blanca al 9 % y una
   carmesí al 20 % dejarían la bajada en 5.15:1. Cumple AA, pero es peor de lo
   que este sitio se exige a sí mismo. */
@media (max-width: 1023px) { .rayos { display: none; } }

/* La animación solo escala. La heredada del motivo antiguo animaba también la
   opacidad —`0%,100% { opacity: 1 }`— y eso **pisaba** la opacidad de cada
   franja: una animación gana a un atributo de presentación, así que el motivo
   salía a plena saturación en vez de como la textura tenue que debe ser. */
.rayos__haz {
  transform-origin: 73% 0%;
  animation: haz-respira 12s var(--ease-in-out) infinite;
}
.rayos__haz:nth-child(2n) { animation-delay: -4s; }
.rayos__haz:nth-child(3n) { animation-delay: -8s; }
@media (prefers-reduced-motion: reduce) { .rayos__haz { animation: none; } }

/* ── PANEL VISUAL DEL HERO ──────────────────────────────── */
.hero-panel {
  position: relative; border-radius: var(--r-xl);
  background: var(--navy-700); color: var(--white);
  padding: var(--sp-6); box-shadow: var(--sh-lg);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
.hero-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: var(--sp-4);
}
.hero-panel__title { font-size: var(--fs-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--navy-200); }
.hero-panel__row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--r-sm);
  transition: background var(--dur-base);
}
.hero-panel__row:hover { background: rgba(255,255,255,.07); }
.hero-panel__row + .hero-panel__row { margin-top: var(--sp-1); }
.hero-panel__bar {
  flex: 1 1 48px; min-width: 48px; height: 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); overflow: hidden;
}
@media (max-width: 520px) {
  /* Con la etiqueta a dos líneas la barra se comprimía a cero: se retira */
  .hero-panel__bar { display: none; }
  .hero-panel__label { min-width: 0; flex: 1; }
}
.hero-panel__bar > i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent-on-dark);
  width: var(--v, 50%);
  animation: bar-grow var(--dur-scene) var(--ease-out) both;
}
.hero-panel__label { font-size: var(--fs-sm); min-width: 11ch; color: var(--white); }
.hero-panel__val { font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--navy-200); min-width: 4ch; text-align: right; }

/* ── PANAL ──────────────────────────────────────────────
   Malla hexagonal que ondula como una tela. Va en <canvas> porque el
   movimiento desplaza cada vértice, y eso en SVG no se puede escribir ni
   pintar barato (ver assets/js/panal.js).

   Fondo transparente y por detrás del texto. No lleva recorte: la malla mide
   las letras y se disuelve a su alrededor, así que se aparta sola de la copia
   que haya y de cualquier ancho. */
.panal {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100%;
}
/* Por debajo de 980 px el hero se apila y el titular ocupa la columna entera:
   la malla no tendría dónde ponerse sin quedar debajo del texto. */
@media (max-width: 980px) { .panal { display: none; } }

/* En las páginas interiores cubre la sección del titular. La sección necesita
   ser el marco de referencia; el contenido va por encima porque el lienzo está
   en z-index negativo y `isolation` acota ese negativo al bloque. */
.section--tight { position: relative; isolation: isolate; }

/* ── REVELADO AL SCROLL ─────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-scene) var(--ease-out),
              transform var(--dur-scene) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }


/* ── KEYFRAMES ──────────────────────────────────────────── */
@keyframes haz-respira {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.06); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@keyframes shimmer { to { background-position: -400% 0; } }
@keyframes bar-grow { from { width: 0; } }
@keyframes marquee  { to { transform: translateX(-50%); } }

/* ── RESPETO POR prefers-reduced-motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card:hover, .profile-card:hover { transform: none; }
}