/* Estilos propios de la portada. Antes vivían en un bloque <style> dentro de
   index.html; están aquí para que la política de contenido pueda prohibir
   'unsafe-inline' en style-src. Migrados al sistema v2: radio 0, tipografías de
   marca, sin Poppins ni SF Mono. */

/* ── Hero con fotografía ─────────────────────────────────────────────────── */
/* Velo asimétrico: oscuro donde vive el texto (izquierda), y cada vez más
   transparente hacia la derecha, para que la fotografía vuelva a notarse en
   vez de perderse bajo un velo parejo. Un segundo degradado, de abajo hacia
   arriba, cuida el contraste de los botones sin oscurecer toda la escena. */
.hero {
  background-image:
    linear-gradient(112deg, rgba(15,19,24,0.92) 0%, rgba(15,19,24,0.82) 34%, rgba(15,19,24,0.44) 64%, rgba(15,19,24,0.16) 100%),
    linear-gradient(0deg, rgba(9,12,16,0.55) 0%, rgba(9,12,16,0) 42%),
    url(/assets/img/home-01.webp);
  background-size: cover;
  background-position: center 38%;
}
@media (max-width: 900px) {
  /* En móvil el texto ocupa todo el ancho: no hay franja de foto que cuidar,
     así que el velo vuelve a ser parejo para no perder legibilidad. También
     es la oportunidad de servir una foto más chica (800px de ancho en vez de
     1264px): en la franja donde ya no se ve el detalle de la derecha no vale
     la pena pagar el peso completo. Ver preload condicionado por "media" en
     el <head> de index.html / en/index.html, que sigue exactamente este
     mismo corte de 900px para que el navegador precargue la imagen correcta. */
  .hero { background-image: linear-gradient(180deg, rgba(15,19,24,0.90) 0%, rgba(15,19,24,0.87) 100%),
    url(/assets/img/home-01-mobile.webp); }
}
/* El header es sticky y mide ~83px (logo 44px + 1.15rem de relleno arriba y
   abajo + el borde). El hero descuenta esa altura para que header + hero
   ocupen exactamente una pantalla: todo el contenido, cifras incluidas,
   entra sin scroll al cargar la página, en vez de asomar la cifra hasta la
   mitad y cortar el resto abajo. */
.hero { --header-h: 83px; min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center; }
.hero-inner { padding-top: 3.2rem; padding-bottom: 3.2rem; width: 100%; }
.hero-content { max-width: 660px; }
.hero h1 { max-width: 19ch; margin: 1rem 0 1.1rem;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.hero .sub { margin-bottom: 1.7rem; }

/* ── Cifras integradas ───────────────────────────────────────────────────── */
/* Antes vivían en una tarjeta flotante con fondo y blur, que tapaba media
   fotografía. Ahora son una fila ligera bajo los CTA, con el mismo
   resplandor dorado que ya tienen los botones: la foto queda libre a la
   derecha del bloque de texto y la cifra insignia (11 años) no depende de
   una caja para notarse. */
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.8rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.16); }
.hero-stat { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,0.22); }
.hero-stat:first-child { padding-left: 0; border-left: 0; }
.hero-stat .n {
  display: block; font-family: "Archivo VF", sans-serif;
  font-variation-settings: "wght" 800, "wdth" 106;
  color: var(--gold-500);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1;
  text-shadow: 0 0 24px rgba(252,192,0,0.55), 0 0 6px rgba(252,192,0,0.4);
  transition: text-shadow var(--dur-short) var(--ease);
}
.hero-stat:hover .n { text-shadow: 0 0 30px rgba(252,192,0,0.75), 0 0 8px rgba(252,192,0,0.55); }
/* 14ch, no 10ch: con 10ch "Semanas por diagnóstico" partía en tres
   renglones ("Semanas" / "por" / "diagnóstico") mientras las otras dos
   etiquetas quedaban en dos. 14ch deja a las tres en dos renglones parejos
   ("Semanas por" / "diagnóstico"), sin tocar las otras dos etiquetas, que
   ya cabían en dos con cualquiera de los dos anchos. */
.hero-stat .l {
  display: block; margin-top: 0.4rem; max-width: 14ch;
  font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-200); line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) { .hero-stat .n { transition: none; } }
/* En móvil angosto (~390px) el gap de 1.8rem y el padding-left de 1.5rem de
   escritorio dejaban a las tres cifras sin espacio en una sola fila. Se
   aprieta gap y padding-left, y las tres columnas se reparten el ancho por
   igual (flex: 1 1 0), lo que ya por sí solo mantiene a los tres bloques
   en una sola fila pareja.
   La corrección anterior bajaba además la etiqueta de 14ch a 10ch, y eso
   partía "Semanas por diagnóstico" en tres renglones cortos ("Semanas" /
   "por" / "diagnóstico") en vez de dos, quedando más alto que las otras
   dos etiquetas (hallazgo de Dirección General, 20-sep-2026, sobre una
   captura de la vista móvil). 13ch es el punto correcto: cabe "Semanas
   por" en un renglón y "diagnóstico" en el siguiente, igualando la altura
   con "Años de experiencia" y "Sectores atendidos", que ya cabían en dos
   renglones con cualquiera de los dos anchos y no cambian de forma. */
@media (max-width: 480px) {
  .hero-stats { flex-wrap: nowrap; gap: 0.7rem; }
  .hero-stat { padding-left: 0.7rem; flex: 1 1 0; min-width: 0; }
  .hero-stat .n { font-size: 1.5rem; }
  .hero-stat .l { max-width: 13ch; font-size: 0.66rem; }
}
@media (max-width: 900px) {
  /* Sin franja de foto que cuidar, el hero vuelve a su alto natural: forzarlo
     a una pantalla completa en móvil dejaría aire vacío o cifras apretadas. */
  .hero { min-height: 0; display: block; }
}

/* ── Banda de confianza ──────────────────────────────────────────────────── */
/* Antes los ocho logos vivían en una cuadrícula de columnas iguales: como
   cada logo trae su propia proporción (uno casi cuadrado, otro casi el
   doble de ancho que alto), las columnas de igual ancho los dejaban de
   tamaños muy distintos entre sí y sin una línea base común, lo que se leía
   como una fila desalineada. trust-box es el mismo componente que ya usa
   /compass/ para esto: fila flexible que envuelve sola, con una altura de
   celda fija (56px) donde cada logo se centra sin importar su proporción.
   La estructura es la que ya está probada.
   Revertido 19-sep-2026: esta página forzaba la tarjeta clara (var(--paper))
   sobre el fondo oscuro de la sección, justo el efecto de "cinta pegada
   encima" que se corrigió en base.css para las otras 8 páginas que usan
   trust-box. Ya no se sobreescribe: hereda el panel traslúcido de base.css. */

/* El renglón de sectores es una lista aparte, no una leyenda de los logos:
   antes quedaba pegado justo debajo de la cuadrícula y, sin más separación
   ni texto propio, parecía una etiqueta rota para cada logo (ocho logos,
   siete chips, ninguno alineado con el otro). Un eyebrow propio y más
   espacio dejan claro que son dos pruebas distintas: quién ya confía, y en
   qué sectores. */
.sectors .sector-sub { margin: 2.6rem 0 1.1rem; }

/* ── "El método COMPASS": vía horizontal de cuatro nodos ─────────────────
   Fusionado 19-sep-2026 desde la maqueta aprobada por Cesar. Usa el sistema
   de nodos de la marca (cap. 21) en vez de tarjetas con borde superior
   (rechazadas por sentirse a plantilla genérica). Track y contenido
   comparten la misma retícula de 4 columnas, así que el nodo de cada fase
   queda centrado sobre su texto sin calcular pixeles a mano. */
.method-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3.5rem;
  align-items: center;
}
.method-teaser-text .sec-head { margin-bottom: 1.8rem; }
.method-teaser-text .btn { margin-top: 0; }

.method-spine { display: flex; flex-direction: column; }
.ms-track-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: 9px;
  margin-bottom: 1.3rem;
}
.ms-track-row::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 50%;
  height: 1px;
  background: rgba(252, 192, 0, 0.32);
  transform: translateY(-50%);
}
.ms-node {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold-500);
}
.ms-content-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.ms-step { text-align: left; }
.ms-n {
  display: block;
  font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace;
  font-variation-settings: "wght" 600;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--gold-500);
}
.ms-step h3 {
  color: var(--white);
  font-size: 0.94rem;
  font-variation-settings: "wght" 650, "wdth" 98;
  margin: 0.4rem 0 0.45rem;
}
.ms-step p { color: var(--ink-200); font-size: 0.83rem; line-height: 1.55; margin: 0; }

@media (max-width: 980px) {
  .method-teaser { grid-template-columns: 1fr; gap: 2.4rem; }
  /* En una sola columna, .method-teaser-text (encabezado + párrafo + botón)
     y .method-spine (vía + 4 pasos) quedaban uno arriba del otro en su
     orden de HTML: el botón "Conoce el método completo" caía justo entre
     el párrafo y la vía de pasos, sin relación visual con ninguno de los
     dos (hallazgo de Dirección General, 20-sep-2026, sobre una captura
     móvil). Con display:contents, .method-teaser-text deja de generar su
     propia caja y sus hijos (el encabezado y el botón) pasan a ser hijos
     directos de la rejilla, tal como .method-spine — así los tres se
     pueden reordenar con order sin tocar el HTML: encabezado, luego los
     4 pasos, y el botón al final, cerrando la sección en vez de partirla. */
  .method-teaser-text { display: contents; }
  .method-teaser-text .sec-head { order: 1; margin-bottom: 0; }
  .method-spine { order: 2; }
  .method-teaser-text .btn { order: 3; margin-top: 0.6rem; }
}
/* La vía horizontal de 4 nodos solo tiene sentido cuando los 4 pasos están
   en una sola fila: en cuanto el contenido reflowea a 2 columnas, la línea
   y sus nodos ya no corresponden a los pasos que están debajo (se ve como
   si solo conectara 2 de los 4). Por eso se oculta desde el mismo punto en
   el que .ms-content-row deja de ser una sola fila, no hasta 420px. */
@media (max-width: 640px) {
  .ms-track-row { display: none; }
  .ms-content-row { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  /* Sin la vía horizontal, cada bloque necesita algo que lo delimite. En vez
     de un borde superior de ancho completo (la tarjeta genérica que ya se
     descartó), cada número lleva encima un fragmento corto del mismo track:
     un nodo y un segmento de línea, como si la vía de arriba se hubiera
     partido en 4 tramos, uno por paso, en vez de convertirse en una tarjeta. */
  .ms-n::before {
    content: "";
    display: block;
    width: 30px;
    height: 6px;
    margin-bottom: 0.5rem;
    background-image:
      radial-gradient(circle 3px at 3px 3px, var(--gold-500) 3px, transparent 3.1px),
      linear-gradient(var(--gold-500), var(--gold-500));
    background-size: 6px 6px, 22px 2px;
    background-position: 0 0, 8px 2px;
    background-repeat: no-repeat;
  }
}
@media (max-width: 420px) {
  .ms-content-row { grid-template-columns: 1fr; }
}

/* ── "Por qué EGREGIE": panel de texto + columna vertical de razones ────── */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 3.5rem;
  align-items: start;
}
.why-grid .sec-head { margin-bottom: 1.4rem; }

.value-spine {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.value-spine::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.45rem; bottom: 0.45rem;
  width: 1px;
  background: var(--line);
}
.value-spine li { position: relative; padding: 0 0 1.9rem 2.1rem; }
.value-spine li:last-child { padding-bottom: 0; }
.vs-node {
  position: absolute;
  left: 0; top: 0.42rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold-800);
}
.vs-n {
  display: block;
  font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace;
  font-variation-settings: "wght" 600;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gold-800);
  margin-bottom: 0.4rem;
}
.value-spine h3 {
  font-size: 1.04rem;
  font-variation-settings: "wght" 650, "wdth" 100;
  color: var(--ink-900);
  margin: 0 0 0.4rem;
}
.value-spine p { margin: 0; color: var(--ink-500); font-size: 0.94rem; line-height: 1.55; }

@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Retraso escalonado del fundido de entrada (mismo patrón que .fit-list
   li en base.css). No es una pieza de movimiento nueva: es .reveal, ya
   normado, con el mismo escalonado que ya usa el resto del sitio. ────── */
.ms-content-row .ms-step:nth-child(2) { animation-delay: 70ms; }
.ms-content-row .ms-step:nth-child(3) { animation-delay: 140ms; }
.ms-content-row .ms-step:nth-child(4) { animation-delay: 210ms; }
.value-spine li:nth-child(2) { animation-delay: 90ms; }
.value-spine li:nth-child(3) { animation-delay: 180ms; }

/* ── "Quiénes somos": misma caja-enlace que .sector-note, en versión clara.
   Antes era un párrafo con un enlace adentro; ahora la caja entera es el
   enlace, con la misma flecha que se desliza al hover que ya usan
   .sector-note, .step-note y .method-note en el resto del sitio. ──────── */
a.exec-note.redirect {
  display: block;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease), background var(--dur-short) var(--ease);
}
a.exec-note.redirect strong {
  color: var(--gold-800);
  font-variation-settings: "opsz" 18, "wght" 650;
  white-space: nowrap;
}
a.exec-note.redirect:hover, a.exec-note.redirect:active {
  border-color: var(--gold-500);
  background: var(--ink-050);
}
a.exec-note.redirect::after {
  content: "";
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-left: 0.35em;
  vertical-align: -0.1em;
  background-color: var(--gold-800);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2016H24%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M18%2010L24%2016L18%2022%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2016H24%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M18%2010L24%2016L18%2022%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  transition: transform var(--dur-short) var(--ease);
}
a.exec-note.redirect:hover::after, a.exec-note.redirect:active::after {
  transform: translateX(3px);
}