/* ============================================================
   COINSSALUD — capa de movimiento y héroe inmersivo.
   Se carga después de main.css. Depende de tokens.css.
   ============================================================ */

/* ── Héroe inmersivo ─────────────────────────────────────────
   Fondo profundo para que el campo de partículas tenga dónde brillar.
   El mezclado aditivo del WebGL necesita oscuridad; sobre blanco se pierde. */
.hero--flow {
  position: relative;
  isolation: isolate;
  /* Ya no ocupa la pantalla entera: a 100svh el visitante tenía que
     hacer scroll a ciegas para ver que había algo debajo. */
  min-height: 82svh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(120% 90% at 72% 42%, #123159 0%, #0B1B33 42%, #060D1A 100%);
  overflow: hidden;
  padding-block: var(--sp-8);
}

.hero--flow .hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;              /* por debajo del velo: ver nota en ::before */
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1200ms var(--e-in);
}
.hero--flow .hero__canvas.is-on { opacity: 1; }

/* Velo que protege la legibilidad del titular sin apagar el campo.
   Va en z-index -1 y el canvas en -2: con el mismo valor, el ::before
   se pinta primero (es el primer hijo) y el canvas le quedaba encima. */
.hero--flow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El corte a 58 % es deliberado: más allá se traga la banda luminosa
     del anillo y el campo desaparece. Verificado a 1280 / 1440 / 1600 px. */
  background: linear-gradient(96deg,
    rgba(6, 13, 26, .96) 0%,
    rgba(6, 13, 26, .90) 26%,
    rgba(6, 13, 26, .40) 44%,
    rgba(6, 13, 26, 0) 58%);
  pointer-events: none;
}

/* Grano fino: quita la sensación de degradado plano de banco de imágenes */
.hero--flow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__eyebrow {
  font-family: var(--ff-data);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin: 0 0 var(--sp-5);
}

/* En la portada el orden se invierte respecto al resto del sitio: manda
   el nombre de la empresa, no el titular. La razón social es larga, así
   que al crecer se le baja el interletrado (a .16em una línea de 70
   caracteres se desparrama) y se le pone medida propia para que corte
   donde debe. */
.hero--flow .hero__eyebrow {
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: .09em;
  line-height: 1.35;
  max-width: 26ch;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.hero--flow .hero__title {
  color: #fff;
  /* Antes clamp(2.4rem, 6.2vw, 5.2rem): ocupaba el héroe entero y dejaba
     al nombre de la empresa como una nota al pie. */
  font-size: clamp(1.85rem, 4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 19ch;
  margin: 0;
  color: rgba(255, 255, 255, .92);
}

/* Palabras enmascaradas: cada una sube desde detrás de su propia línea.
   El selector es genérico a propósito: `splitLines()` envuelve en <i>, y si
   la regla no alcanza a un titular, ese titular sale en CURSIVA. Pasó con
   las cabeceras interiores, que usan `data-split` y no `data-anim="mask"`. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.w > i {
  display: inline-block;
  font-style: normal;
  will-change: transform;
}

.hero__rule {
  width: 132px;
  height: 3px;
  background: linear-gradient(90deg, #2FA84F, #5BC46B 60%, transparent);
  margin: var(--sp-6) 0 var(--sp-5);
  transform-origin: left center;
  border: 0;
}

.hero--flow .hero__sub {
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  max-width: 52ch;
  margin: 0;
}

.hero--flow .hero__actions { margin-top: var(--sp-7); }

.hero--flow .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}
.hero--flow .btn--ghost:hover {
  background: rgba(255, 255, 255, .09);
  border-color: #fff;
}

.hero--flow .stats {
  border-top-color: rgba(255, 255, 255, .16);
  margin-top: var(--sp-8);
}
.hero--flow .stats__num { color: #fff; }
.hero--flow .stats__label { color: rgba(255, 255, 255, .55); }

/* Indicador de desplazamiento */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-6);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.hero__scroll span {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
  animation: hint 2.4s var(--e-std) infinite;
}
@keyframes hint {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .3; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ── Barra de progreso de lectura ────────────────────────────── */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  will-change: transform;
}

/* ── Estados iniciales de la coreografía ─────────────────────
   Solo con JS confirmado: sin él nada se oculta jamás. */
.js [data-anim]:not([data-anim="mask"]):not([data-anim="count"]) > * { opacity: 0; }

/* ── Tarjetas con relieve al puntero ─────────────────────────── */
.card--lift {
  transition: transform var(--d-comp) var(--e-std),
              border-color var(--d-comp) var(--e-std),
              box-shadow var(--d-comp) var(--e-std);
  will-change: transform;
}
.card--lift:hover {
  transform: translateY(-6px);
  border-color: var(--c-accent);
  box-shadow: 0 18px 40px rgba(16, 27, 45, .10);
}

/* ── Botón magnético ─────────────────────────────────────────── */
[data-magnetic] { will-change: transform; }

/* ── Sección oscura de cierre con el mismo lenguaje ──────────── */
.band-dark--deep {
  background: radial-gradient(90% 140% at 30% 0%, #123159 0%, #0B1B33 55%, #060D1A 100%);
}

/* ── Respeto absoluto a reduced-motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim] > * { opacity: 1 !important; transform: none !important; }
    .w > i { transform: none !important; }
  .hero__rule { transform: none !important; }
  .hero__scroll span { animation: none; }
  .hero--flow .hero__canvas { display: none; }
  .card--lift:hover { transform: none; }
}

/* ── Móvil: el campo se apaga, la jerarquía manda ───────────── */
@media (max-width: 767px) {
  .hero--flow { min-height: auto; padding-block: var(--sp-8); }
  .hero--flow .hero__canvas { display: none; }
  .hero__scroll { display: none; }
  .hero--flow::before {
    background: linear-gradient(180deg, rgba(6, 13, 26, .9), rgba(6, 13, 26, .96));
  }
}

/* ═══════════════════════════════════════════════════════════════
   CAPA 2 — páginas interiores con el mismo lenguaje
   ═══════════════════════════════════════════════════════════════ */

/* ── Velo de transición entre páginas ───────────────────────────
   REGLA CRÍTICA: el velo se retira con una animación CSS pura, sin
   intervención de JavaScript. Si dependiera del JS y este fallara,
   el visitante vería un rectángulo negro en lugar del sitio.
   El JS solo lo vuelve a subir al salir de la página. */
.veil {
  position: fixed; inset: 0; z-index: 400;
  background: #060D1A;
  pointer-events: none;            /* jamás intercepta clics */
  opacity: 0;
  visibility: hidden;
}
/* Solo con JS vivo hay entrada; y aun así, la salida es puro CSS. */
.js .veil {
  opacity: 1;
  visibility: visible;
  animation: veil-out 560ms var(--e-in) forwards;
}
@keyframes veil-out {
  to { opacity: 0; visibility: hidden; }
}
/* Al abandonar la página, el JS repinta el velo. */
.js .veil.is-leaving {
  animation: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--e-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .veil { animation: none; opacity: 0; visibility: hidden; }
  .js .veil.is-leaving { display: none; }
}

/* ── Cabecera interior profunda ───────────────────────────────── */
.page-head--deep {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 130% at 78% 10%, #123159 0%, #0B1B33 48%, #060D1A 100%);
  border-bottom: 0;
  padding-block: var(--sp-9) var(--sp-8);
}
.page-head--deep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-head--deep .page-head__title { color: #fff; letter-spacing: -.03em; }
.page-head--deep .page-head__lede { color: rgba(255,255,255,.76); max-width: 56ch; }
.page-head--deep .breadcrumb,
.page-head--deep .breadcrumb a { color: rgba(255,255,255,.5); }
.page-head--deep .breadcrumb a:hover { color: #fff; }

/* Arco del concepto Retorno, trazado al entrar.
   El ancho va atado a la altura de la cabecera: el SVG es cuadrado y
   `overflow:hidden` recortaba todo salvo una franja central. */
.page-head--deep { min-height: 340px; display: grid; align-items: center; }
.page-head__arc {
  position: absolute; right: 4%; top: 50%; translate: 0 -50%;
  width: clamp(180px, 24vw, 300px); height: auto; z-index: -1;
  opacity: .55; pointer-events: none;
}
.page-head__arc path { fill: none; stroke-linecap: round; }

/* ── Tarjeta con foco que sigue al puntero ────────────────────── */
.card--spot { position: relative; overflow: hidden; }
.card--spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--d-comp) var(--e-std);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(47, 168, 79, .13), transparent 68%);
}
.card--spot:hover::before { opacity: 1; }

/* ── Inclinación ─────────────────────────────────────────────── */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 420ms var(--e-std), box-shadow var(--d-comp) var(--e-std);
}
[data-tilt]:hover { box-shadow: 0 24px 56px rgba(16, 27, 45, .14); }

/* ── Muro de aliados ─────────────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: var(--sp-8);
  width: max-content;
  animation: desfile 52s linear infinite;
}
@keyframes desfile { to { transform: translateX(-50%); } }

.aliado {
  display: grid; align-content: center; justify-items: center; gap: var(--sp-3);
  width: 268px; min-height: 176px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
  color: var(--c-title);
  font-size: .82rem; font-weight: var(--fw-semi); line-height: 1.35;
  text-align: center;
  opacity: .92;
  transition: filter var(--d-comp) var(--e-std),
              opacity var(--d-comp) var(--e-std),
              border-color var(--d-comp) var(--e-std);
}
.aliado:hover, .aliado:focus-within { opacity: 1; border-color: var(--c-accent); }
/* El logo ocupa una franja fija: así todas las fichas alinean el nombre
   a la misma altura, aunque los logos tengan proporciones distintas.

   La placa clara no es decorativa: los logos de las instituciones son
   arte OSCURO sobre fondo transparente (se les quitó el blanco a mano),
   así que sobre el azul profundo del tema se volvían invisibles. La
   ficha sigue siendo oscura; solo el logo se apoya en su placa, que es
   además como se presenta un logo ajeno en cualquier marca. */
.aliado__marca {
  display: grid; place-items: center;
  width: 100%; height: 96px;
  background: var(--c-chip);
  border-radius: var(--r-1);
  padding: var(--sp-3);
}
.aliado img { max-width: 190px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.aliado__nombre {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3;
  color: var(--c-title); text-align: center; text-wrap: balance;
}
/* Sin archivo de logo, la ficha tipográfica es el estado normal, no un error */
.aliado--texto .aliado__nombre { font-family: var(--ff-display); font-size: 1rem; letter-spacing: -.01em; }
.aliado__lugar {
  display: block; margin-top: 3px;
  font-family: var(--ff-data); font-size: 9.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted);
}

/* ── Índice lateral ──────────────────────────────────────────── */
.toc { position: sticky; top: calc(var(--header-h, 73px) + var(--sp-5)); align-self: start; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-line); }
.toc a {
  display: block; padding: var(--sp-2) var(--sp-4);
  margin-left: -2px; border-left: 2px solid transparent;
  color: var(--c-muted); text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--d-micro) var(--e-std), border-color var(--d-micro) var(--e-std);
}
.toc a:hover { color: var(--c-ink); }
.toc a.is-active { color: var(--c-title); border-left-color: var(--c-accent); font-weight: var(--fw-semi); }

.servicio__layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-8); }

/* ── Acordeón ────────────────────────────────────────────────── */
.acc details { border-bottom: var(--bw) solid var(--c-line); }
.acc summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-weight: var(--fw-semi); color: var(--c-title);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; transition: rotate var(--d-comp) var(--e-std);
}
.acc details[open] summary::after { rotate: -135deg; }
.acc__body { overflow: hidden; }
.acc__body > * { padding-bottom: var(--sp-5); color: var(--c-muted); }

/* ── Campos con etiqueta flotante ────────────────────────────── */
.form__control:focus-visible { border-color: var(--c-accent); }
.form__control.has-value { border-color: var(--c-navy-100); }

/* ── Divisor con arco ────────────────────────────────────────── */
.divisor { display: grid; place-items: center; padding-block: var(--sp-7); }
.divisor svg { width: 84px; height: auto; opacity: .45; }
.divisor path { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  [data-parallax] { transform: none !important; }
  [data-tilt]:hover { transform: none !important; }
  .card--spot::before { display: none; }
  .veil { display: none; }
}

@media (max-width: 900px) {
  .servicio__layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; border-left: 0; gap: var(--sp-2); }
  .toc a { border: var(--bw) solid var(--c-line); border-radius: var(--r-pill); padding: 6px 14px; margin: 0; }
  .toc a.is-active { border-color: var(--c-accent); }
  .page-head__arc { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CAPA 3 — componentes de las páginas interiores
   ═══════════════════════════════════════════════════════════════ */

.cards--2 { grid-template-columns: repeat(2, 1fr); }


/* ── Perfiles del equipo ─────────────────────────────────────── */
.perfiles { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.perfil {
  padding: var(--sp-3) var(--sp-5); border: var(--bw) solid var(--c-line);
  border-radius: var(--r-pill); background: var(--c-surface);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-title);
  transition: border-color var(--d-comp) var(--e-std), transform var(--d-comp) var(--e-std);
}
.perfil:hover { border-color: var(--c-accent); transform: translateY(-2px); }

/* ── Instituciones ───────────────────────────────────────────── */
.instituciones {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4); list-style: none; margin: var(--sp-7) 0 0; padding: 0;
}
.institucion {
  position: relative; overflow: hidden;
  padding: var(--sp-5); background: var(--c-surface);
  border: var(--bw) solid var(--c-line); border-radius: var(--r-2);
  border-left: 3px solid var(--c-accent);
  transition: transform var(--d-comp) var(--e-std), box-shadow var(--d-comp) var(--e-std);
}
.institucion:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16,27,45,.09); }
.section--alt .institucion { background: var(--c-paper); }
.institucion__nombre { font-size: 1.02rem; font-family: var(--ff-display); font-weight: var(--fw-semi); color: var(--c-title); margin: 0; }
.institucion__lugar {
  margin: var(--sp-2) 0 0; font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.institucion__servicios { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* ── Cobertura ───────────────────────────────────────────────── */
.cobertura { display: grid; gap: var(--sp-5); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.cobertura__item { padding-left: var(--sp-5); border-left: 2px solid var(--c-accent); }
.cobertura__depto { font-size: var(--fs-h4); color: var(--c-title); margin: 0; }
.cobertura__ciudades { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* ── Barras de proporción ────────────────────────────────────── */
.barras { list-style: none; margin: var(--sp-6) 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-4); }
/* Tres columnas: etiqueta · pista · cifra. La cifra ocupa su propia
   columna en lugar de flotar sobre la pista en posición absoluta. */
.barra { display: grid; grid-template-columns: minmax(180px, 32%) 1fr 48px; gap: var(--sp-4); align-items: center; }
.barra__etiqueta { font-size: var(--fs-sm); color: var(--c-ink); }
.barra__pista { height: 10px; border-radius: var(--r-pill); background: var(--c-navy-100); overflow: hidden; }
.barra__valor {
  display: block; height: 100%; width: var(--w, 0%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-navy), var(--c-green));
  transform-origin: left center;
}

/* ── Sectores ────────────────────────────────────────────────── */
.sector { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-8); align-items: start; }
.sector__dolor {
  margin: var(--sp-4) 0 0; padding-left: var(--sp-4);
  border-left: 3px solid var(--c-accent);
  font-size: 1.05rem; color: var(--c-ink); font-weight: var(--fw-semi);
}
.sector__servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sector__servicios li {
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface);
  border: var(--bw) solid var(--c-line); border-radius: var(--r-1);
  font-size: var(--fs-sm); color: var(--c-title); font-weight: var(--fw-med);
}
.section--alt .sector__servicios li { background: var(--c-paper); }

/* ── Lista de servicios (hub) ────────────────────────────────── */
.servicios-lista { list-style: none; margin: 0; padding: 0; }
.servicio-fila {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 68px 1fr 40px; gap: var(--sp-5);
  align-items: start; padding: var(--sp-6) var(--sp-4);
  border-bottom: var(--bw) solid var(--c-line);
  transition: background-color var(--d-comp) var(--e-std);
}
.servicio-fila:first-child { border-top: var(--bw) solid var(--c-line); }
.servicio-fila:hover { background: var(--c-surface); }
.servicio-fila__num { font-family: var(--ff-data); font-size: 1.4rem; color: var(--c-muted); }
.servicio-fila:hover .servicio-fila__num { color: var(--c-accent); }
.servicio-fila__titulo { font-size: var(--fs-h3); margin: 0; color: var(--c-title); }
.servicio-fila__titulo a { color: inherit; text-decoration: none; }
.servicio-fila__titulo a::after { content: ""; position: absolute; inset: 0; }
.servicio-fila__resumen { margin: var(--sp-2) 0 0; color: var(--c-ink); }
.servicio-fila__problema { margin: var(--sp-3) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.servicio-fila__flecha {
  font-size: 1.4rem; color: var(--c-muted); align-self: center;
  transition: transform var(--d-comp) var(--e-std), color var(--d-comp) var(--e-std);
}
.servicio-fila:hover .servicio-fila__flecha { transform: translateX(6px); color: var(--c-accent); }

/* ── Insumos ─────────────────────────────────────────────────── */
.insumos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4); list-style: none; margin: var(--sp-7) 0 0; padding: 0;
}
.insumo {
  position: relative; overflow: hidden;
  padding: var(--sp-5); background: var(--c-surface);
  border: var(--bw) solid var(--c-line); border-radius: var(--r-2);
  transition: border-color var(--d-comp) var(--e-std), transform var(--d-comp) var(--e-std);
}
.insumo:hover { border-color: var(--c-accent); transform: translateY(-3px); }
.section--alt .insumo { background: var(--c-paper); }
.insumo__nombre { font-size: 1rem; color: var(--c-title); margin: 0; font-family: var(--ff-display); }
.insumo__detalle { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.insumo__pres, .insumo__reg {
  margin: var(--sp-2) 0 0; font-family: var(--ff-data);
  font-size: var(--fs-xs); color: var(--c-muted);
}
.insumo__reg { color: var(--c-accent-ink); }

/* ── Pasos numerados ─────────────────────────────────────────── */
.pasos { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.paso { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4); align-items: start; }
.paso__num { font-family: var(--ff-data); font-size: 1.35rem; color: var(--c-accent-ink); }
.paso__titulo { font-size: var(--fs-h4); color: var(--c-title); margin: 0; }
.paso__texto { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* ── Recursos ────────────────────────────────────────────────── */
.recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.recurso-fila {
  position: relative; overflow: hidden;
  padding: var(--sp-6); background: var(--c-surface);
  border: var(--bw) solid var(--c-line); border-radius: var(--r-2);
  transition: border-color var(--d-comp) var(--e-std);
}
.recurso-fila:hover { border-color: var(--c-accent); }
.recurso-fila__norma {
  margin: 0 0 var(--sp-2); font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-ink);
}
.recurso-fila__titulo { font-size: var(--fs-h3); margin: 0; color: var(--c-title); }
.recurso-fila__titulo a { color: inherit; text-decoration: none; }
.recurso-fila__titulo a::after { content: ""; position: absolute; inset: 0; }
.recurso-fila__resumen { margin: var(--sp-3) 0 0; color: var(--c-muted); }
.recurso-fila__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-4) 0 0; }
.recurso-fila__meta span { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--c-muted); }

/* ── Ficha de norma ──────────────────────────────────────────── */
.ficha-norma {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5); margin: 0 0 var(--sp-7);
  padding: var(--sp-5); background: var(--c-navy-100); border-radius: var(--r-2);
}
.ficha-norma dt {
  font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.ficha-norma dd { margin: var(--sp-2) 0 0; color: var(--c-title); font-weight: var(--fw-semi); font-size: var(--fs-sm); }

/* ── Panel de cifras ─────────────────────────────────────────── */
.stats--panel {
  border-top: 0; margin-top: 0; padding: var(--sp-6);
  background: var(--c-surface); border: var(--bw) solid var(--c-line); border-radius: var(--r-2);
  justify-content: space-around;
}

@media (prefers-reduced-motion: reduce) {
  .institucion:hover, .insumo:hover, .perfil:hover { transform: none; }
  .servicio-fila:hover .servicio-fila__flecha { transform: none; }
}

@media (max-width: 900px) {
  .cards--2, .sector { grid-template-columns: 1fr; }
  .servicio-fila { grid-template-columns: 44px 1fr; }
  .servicio-fila__flecha { display: none; }
  /* En móvil la etiqueta pasa a su propia línea y la pista comparte
     fila con la cifra: dos filas, no tres columnas apretadas. */
  .barra { grid-template-columns: 1fr 48px; gap: var(--sp-2) var(--sp-3); }
  .barra__etiqueta { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════
   CAPA 4 — carrusel y acabado
   ═══════════════════════════════════════════════════════════════ */

/* ── Carrusel ────────────────────────────────────────────────── */
.carrusel { position: relative; }
.carrusel__cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.carrusel__mandos { display: flex; align-items: center; gap: var(--sp-3); }
.carrusel__btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: var(--bw) solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-title); cursor: pointer;
  transition: border-color var(--d-micro) var(--e-std),
              background-color var(--d-micro) var(--e-std),
              transform var(--d-micro) var(--e-std);
}
.carrusel__btn:hover { border-color: var(--c-accent); transform: scale(1.06); }
.carrusel__btn[aria-disabled="true"] { opacity: .34; transform: none; }
.carrusel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carrusel__cuenta {
  font-family: var(--ff-data); font-size: var(--fs-xs);
  color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 52px;
}

.carrusel__pista {
  display: flex; gap: var(--sp-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  cursor: grab;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carrusel__pista:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-off); }
.carrusel__pista > * {
  scroll-snap-align: start;
  flex: 0 0 clamp(250px, 30%, 360px);
}

.carrusel__barra {
  height: 3px; margin-top: var(--sp-5);
  background: var(--c-line); border-radius: var(--r-pill); overflow: hidden;
}
.carrusel__barra span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--c-navy), var(--c-green));
  transform-origin: left center; transform: scaleX(.06);
  transition: transform 160ms linear;
}


/* ── Cursor acompañante ──────────────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 500;
  width: 18px; height: 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-accent);
  pointer-events: none;
  transition: width 220ms var(--e-std), height 220ms var(--e-std),
              background-color 220ms var(--e-std), opacity 220ms var(--e-std),
              border-color 220ms var(--e-std);
  mix-blend-mode: difference;
}
.cursor.is-active { width: 48px; height: 48px; background: rgba(47,168,79,.16); }
.cursor.is-down { width: 20px; height: 20px; }
.cursor.is-out { opacity: 0; }

/* ── Ancla con desplazamiento suave ──────────────────────────── */
:target { scroll-margin-top: calc(var(--header-h, 73px) + var(--sp-5)); }
[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .carrusel__pista { scroll-behavior: auto; }
  .carrusel__barra span { transition: none; }
}

@media (max-width: 767px) {
  .cursor { display: none; }
  .carrusel__pista > * { flex-basis: 82%; }
}

.card__text--tenue { color: var(--c-muted); opacity: .75; font-size: var(--fs-xs); }
.carrusel__pista .card { display: flex; flex-direction: column; }
.carrusel__pista .servicio-fila__num { font-size: 1.1rem; color: var(--c-muted); margin-bottom: var(--sp-3); }
.carrusel__pista .card:hover .servicio-fila__num { color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════════════
   CAPA 5 — profundidad
   El sitio se veía plano porque todo vivía en un mismo plano: fondos
   lisos, tarjetas de un solo tono y un borde de 1 px. Aquí se separan
   los planos con luz, no con decoración.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fondos con luz ambiente ─────────────────────────────────────
   Un relleno liso no tiene dirección. Un degradado radial muy suave
   insinúa de dónde viene la luz y da hondura sin dibujar nada. */
.section {
  position: relative;
  background-image:
    radial-gradient(120% 80% at 78% 0%, rgba(23, 53, 107, .045), transparent 62%);
}
.section--alt {
  background-image:
    radial-gradient(110% 70% at 18% 0%, rgba(47, 168, 79, .05), transparent 58%),
    radial-gradient(90% 60% at 92% 100%, rgba(23, 53, 107, .05), transparent 60%);
}

/* ── Superficies con material ────────────────────────────────────
   Degradado vertical mínimo + reflejo en el borde superior. Es la
   diferencia entre una caja pintada y una superficie iluminada.

   El degradado era blanco al 90 %: pensado para tarjetas blancas, donde
   apenas se notaba. Sobre el fondo oscuro lavaba de blanco el 42 %
   superior de CADA tarjeta y se comía el texto que va justo ahí. Ahora
   es un velo de luz de un 6 %: mismo efecto de superficie iluminada,
   sin tapar nada. */
.card,
.institucion,
.insumo,
.recurso-fila,
.aliado,
.stats--panel,
.sector__servicios li {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--sh-1), var(--brillo);
  transition: box-shadow var(--d-comp) var(--e-std),
              transform var(--d-comp) var(--e-std),
              border-color var(--d-comp) var(--e-std);
}
/* Al levantarse, la tarjeta además se enciende: sobre oscuro una sombra
   sola no basta para leer la elevación — el halo de acento sí. */
.card--lift:hover,
.card--link:hover,
.institucion:hover,
.insumo:hover,
.recurso-fila:hover {
  box-shadow: var(--sh-4), var(--sh-glow), var(--brillo);
  transform: translateY(-5px);
}

/* ── Superficies sobre oscuro ────────────────────────────────────
   Aquí el reflejo superior es obligatorio: sin él, una caja clara
   sobre fondo oscuro parece un recorte pegado. */
.hero--flow .stats,
.constelacion .btn--ghost {
  box-shadow: var(--brillo-osc);
}

/* ── Bandas con volumen ──────────────────────────────────────────
   La banda de acento era un rectángulo verde liso. Ahora tiene foco
   de luz, y arriba y abajo un filo que la separa de lo que la rodea. */
.band-accent {
  position: relative;
  /* El acento vivo entra como foco de luz sobre el fondo profundo: da la
     viveza que antes daba el plano entero, sin aplastar el texto. Va con
     `color-mix` sobre --c-accent, no con un verde fijo, para que en la
     línea de insumos el halo salga azul como la banda y no verde. */
  background-image:
    radial-gradient(85% 150% at 20% -25%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 62%),
    radial-gradient(70% 120% at 92% 120%, rgba(0, 0, 0, .30), transparent 62%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-accent-ink) 45%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .30),
    0 22px 60px -28px color-mix(in srgb, var(--c-accent) 45%, transparent);
}
.band-dark--deep,
.constelacion,
.page-head--deep {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ── Costura entre secciones ─────────────────────────────────────
   El corte seco entre claro y oscuro es lo que más aplana. Un velo
   de dos píxeles funde el encuentro. */
/* Este velo de 90 px se escribió para la alternancia claro/oscuro que el
   sitio ya no tiene: sobre fondo oscuro es un negro sobre negro que no se
   ve. Peor, al llevar DOS clases le ganaba en especificidad al filo de
   1 px de `.section--alt::before`, así que ese filo no llegaba a pintarse
   nunca en la portada. Se deja solo el posicionamiento, que la CAPA 6
   necesita, y el dibujo lo pone el filo. */
.section + .section--alt::before,
.section--alt + .section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
}

/* ── Cabecera flotante ───────────────────────────────────────────
   Al desplazarse, la cabecera deja de estar al ras y se despega. */
.site-header {
  transition: box-shadow var(--d-comp) var(--e-std),
              background-color var(--d-comp) var(--e-std);
}
.site-header.is-stuck {
  box-shadow: var(--sh-3);
  /* Era blanca al 92 %: al desplazarse, la cabecera del tema oscuro se
     volvía una barra blanca con su propio texto claro encima. */
  background: rgba(7, 15, 30, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* ── Cifras sobre placa ──────────────────────────────────────────
   El panel de cifras se levanta y se sale del bloque: un elemento
   que cruza el límite de dos secciones crea profundidad real. */
.stats--panel {
  box-shadow: var(--sh-4), var(--brillo);
  position: relative;
  z-index: 2;
}

/* ── Botones con cuerpo ──────────────────────────────────────────
   Un botón plano es lo primero que delata un sitio sin acabado. */
.btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 1px 2px rgba(16, 27, 45, .16),
    0 8px 20px -8px rgba(47, 168, 79, .60);
}
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 2px 4px rgba(16, 27, 45, .18),
    0 14px 30px -10px rgba(47, 168, 79, .70);
}
.btn--primary:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); }

.carrusel__btn { box-shadow: var(--sh-1), var(--brillo); }
.carrusel__btn:hover { box-shadow: var(--sh-3), var(--brillo); }

/* ── Campos hundidos ─────────────────────────────────────────────
   Los controles de entrada se hunden; los de acción sobresalen. Esa
   oposición es la que hace legible una interfaz sin explicarla. */
.form__control {
  box-shadow: inset 0 1px 2px rgba(16, 27, 45, .06);
  background-image: linear-gradient(180deg, rgba(16, 27, 45, .02), transparent 12%);
}
.form__control:focus-visible {
  box-shadow: inset 0 1px 2px rgba(16, 27, 45, .05),
              0 0 0 4px rgba(47, 168, 79, .14);
}

@media (prefers-reduced-motion: reduce) {
  .card--lift:hover, .card--link:hover,
  .institucion:hover, .insumo:hover, .recurso-fila:hover { transform: none; }
}

/* ── Filas de servicio con superficie ────────────────────────────
   Eran divisiones sobre fondo liso: la página más importante del
   sitio después de la portada, y la más plana de todas. Ahora cada
   fila es una superficie que se levanta al pasar por encima. */
.servicios-lista { display: grid; gap: var(--sp-3); }
.servicio-fila {
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--sh-1), var(--brillo);
  padding: var(--sp-6);
}
.servicio-fila:first-child { border-top: var(--bw) solid var(--c-line); }
.servicio-fila:hover {
  box-shadow: var(--sh-4), var(--brillo);
  transform: translateY(-4px);
  border-color: var(--c-accent);
  background: var(--c-surface);
}

/* ── Bloques de contenido con relieve ────────────────────────────
   Los bloques de las páginas de servicio y el acordeón también
   vivían al ras del fondo. */
.servicio__bloque {
  position: relative;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-line);
  transition: border-color var(--d-comp) var(--e-std);
}
.servicio__bloque:hover { border-left-color: var(--c-accent); }

.acc details {
  background: var(--c-surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-2);
  margin-bottom: var(--sp-3);
  padding-inline: var(--sp-5);
  box-shadow: var(--sh-1), var(--brillo);
}
.acc details[open] { box-shadow: var(--sh-3), var(--brillo); border-color: var(--c-accent); }

/* ── Índice lateral elevado ─────────────────────────────────── */
.toc {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: var(--sh-2), var(--brillo);
}
.toc ol { border-left-color: var(--c-line); }

/* ── Perfiles con cuerpo ─────────────────────────────────────── */
.perfil { box-shadow: var(--sh-1), var(--brillo); }
.perfil:hover { box-shadow: var(--sh-3), var(--brillo); }

@media (prefers-reduced-motion: reduce) {
  .servicio-fila:hover { transform: none; }
}

/* ── Barras de proporción ────────────────────────────────────────
   Se ocultan ÚNICAMENTE con `.js`: sin JavaScript la barra se ve
   completa, porque una barra a cero desinforma. */
.barra__valor { transform: scaleX(1); }
.js .barra__valor {
  transform: scaleX(0);
  transition: transform 1000ms var(--e-in);
}
.js .barra__valor.is-in { transform: scaleX(1); }

/* La cifra se enciende con la misma clase que llena la barra: una sola
   condición, no dos. La columna que ocupa está en `.barra`, arriba —
   no aquí, porque una regla suelta al final del archivo pisaría la
   variante móvil de la media query. */
.barra__cifra {
  font-family: var(--ff-data); font-size: var(--fs-sm);
  color: var(--c-title); font-variant-numeric: tabular-nums;
  text-align: right; font-weight: var(--fw-semi);
  opacity: 0; transition: opacity 420ms var(--e-in);
}
.barra__cifra.is-in { opacity: 1; }
/* Sin JS la cifra se ve siempre: un dato oculto no informa. */
html:not(.js) .barra__cifra { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .barra__valor { transform: scaleX(1); transition: none; }
  .js .barra__cifra { opacity: 1; transition: none; }
}

/* ── Cómo trabajamos: la secuencia como circuito ──────────────────
   Sustituye a la escena horizontal, que en escritorio no llegaba a
   desplazarse y quedaba como cuatro tarjetas planas sin jerarquía.
   Ahora hay un riel que se llena, un paso activo y un diagrama por
   etapa. Sin JavaScript los cuatro se ven completos y legibles. */
.proceso {
  position: relative;
  padding-block: var(--sp-9);
  background: radial-gradient(120% 100% at 18% 0%, #123159 0%, #0B1B33 48%, #060D1A 100%);
  overflow: hidden;
}
/* Grano fino: quita el aspecto de degradado plano. */
.proceso::after {
  content: ""; position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.proceso > .wrap { position: relative; z-index: 1; }
.proceso__intro h2 { font-family: var(--ff-titular); font-weight: var(--fw-semi); color: #fff; font-size: var(--fs-h2); }
.proceso__intro p { color: rgba(255,255,255,.72); margin-top: var(--sp-3); max-width: 56ch; }

.proceso__ruta {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
/*
 * Todo lo de abajo va con el prefijo `.proceso__ruta`: `.paso`,
 * `.paso__titulo`, `.paso__texto`, `.paso__num`... son nombres genéricos
 * que la lista mucho más simple de "Cómo cotizamos" (insumos-medicos.php)
 * también usa, sobre fondo claro. Sin este espacio de nombres, el texto
 * blanco pensado para el fondo oscuro de aquí ganaba la cascada en las
 * dos páginas y dejaba "Cómo cotizamos" invisible — blanco sobre blanco.
 */
.proceso__ruta .paso { position: relative; display: grid; }

.proceso__ruta .paso__btn {
  display: grid; gap: var(--sp-4);
  grid-template-rows: auto auto auto 1fr auto;   /* el texto absorbe la holgura */
  height: 100%;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
  padding: 0 var(--sp-5) var(--sp-6) 0;
}
.proceso__ruta .paso:last-child .paso__btn { padding-right: 0; }
.proceso__ruta .paso__btn:focus-visible { outline: 2px solid var(--c-green); outline-offset: 6px; border-radius: var(--r-2); }

/* ── El riel: una línea continua con un nodo por paso ── */
.proceso__ruta .paso__riel { position: relative; display: block; height: 2px; background: rgba(255,255,255,.12); }
.proceso__ruta .paso__riel-lleno {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-green), #5BC46B);
  transition: transform 620ms var(--e-in);
}
.proceso__ruta .paso__nodo {
  position: absolute; left: 0; top: 50%; translate: -50% -50%;
  width: 11px; height: 11px; border-radius: 50%;
  background: #0B1B33; border: 2px solid rgba(255,255,255,.28);
  transition: border-color 380ms var(--e-in), box-shadow 380ms var(--e-in), scale 380ms var(--e-out-back);
}

/* ── Cabecera: número y título ── */
.proceso__ruta .paso__cab { display: flex; align-items: baseline; gap: var(--sp-3); }
.proceso__ruta .paso__num {
  font-family: var(--ff-data); font-size: var(--fs-sm); letter-spacing: .06em;
  color: rgba(255,255,255,.52); transition: color 320ms var(--e-in);
}
.proceso__ruta .paso__titulo {
  color: rgba(255,255,255,.80); font-size: var(--fs-h3); font-weight: var(--fw-semi);
  letter-spacing: -.02em; transition: color 320ms var(--e-in);
}

/* ── El diagrama de cada etapa ── */
.proceso__ruta .paso__figura {
  display: block; width: 172px; max-width: 100%;
  aspect-ratio: 86 / 60;
  border-radius: var(--r-2);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  padding: var(--sp-3);
  transition: background 380ms var(--e-in), border-color 380ms var(--e-in), transform 420ms var(--e-out-back);
}
.proceso__ruta .paso__figura svg { width: 100%; height: 100%; display: block; overflow: visible; }
.proceso__ruta .paso__figura .p-l    { fill: rgba(255,255,255,.28); transition: fill 420ms var(--e-in); }
.proceso__ruta .paso__figura .p-m    { fill: rgba(255,255,255,.30); transition: fill 420ms var(--e-in); }
.proceso__ruta .paso__figura .p-s,
.proceso__ruta .paso__figura .p-s-r  { stroke: rgba(255,255,255,.22); stroke-width: 2; fill: none; transition: stroke 420ms var(--e-in); }
.proceso__ruta .paso__figura .p-p,
.proceso__ruta .paso__figura .p-p-r  { fill: rgba(255,255,255,.34); transition: fill 420ms var(--e-in), width 640ms var(--e-in); }

.proceso__ruta .paso__texto { color: rgba(255,255,255,.66); font-size: var(--fs-sm); line-height: 1.6; transition: color 320ms var(--e-in); }

.proceso__ruta .paso__dato {
  justify-self: start;
  font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.66); white-space: nowrap;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.12);
  transition: color 320ms var(--e-in), border-color 320ms var(--e-in), background 320ms var(--e-in);
}

/* ── Paso activo ── */
.proceso__ruta .paso.is-activo .paso__riel-lleno { transform: scaleX(1); }
.proceso__ruta .paso.is-activo .paso__nodo { border-color: var(--c-green); scale: 1.25; box-shadow: 0 0 0 6px rgba(47,168,79,.16); }
.proceso__ruta .paso.is-activo .paso__num { color: #5BC46B; }
.proceso__ruta .paso.is-activo .paso__titulo { color: #fff; }
.proceso__ruta .paso.is-activo .paso__texto { color: rgba(255,255,255,.82); }
.proceso__ruta .paso.is-activo .paso__figura {
  background: rgba(47,168,79,.08);
  border-color: rgba(91,196,107,.35);
  transform: translateY(-4px);
}
.proceso__ruta .paso.is-activo .paso__figura .p-l   { fill: rgba(255,255,255,.34); }
.proceso__ruta .paso.is-activo .paso__figura .p-m   { fill: #5BC46B; }
.proceso__ruta .paso.is-activo .paso__figura .p-s,
.proceso__ruta .paso.is-activo .paso__figura .p-s-r { stroke: rgba(91,196,107,.55); }
.proceso__ruta .paso.is-activo .paso__figura .p-p   { fill: #5BC46B; }
.proceso__ruta .paso.is-activo .paso__figura .p-p-r { fill: #5BC46B; width: 52px; }
.proceso__ruta .paso.is-activo .paso__dato {
  color: #5BC46B; border-color: rgba(91,196,107,.45); background: rgba(47,168,79,.10);
}

/* Los pasos ya recorridos dejan el riel lleno: se lee el avance. */
.proceso__ruta .paso.is-hecho .paso__riel-lleno { transform: scaleX(1); }
.proceso__ruta .paso.is-hecho .paso__nodo { border-color: rgba(91,196,107,.55); }

.proceso__ruta .paso__btn:hover .paso__figura { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.proceso__ruta .paso__btn:hover .paso__titulo { color: #fff; }

/* ── Sin JavaScript: todo visible y sin estados a medias ── */
html:not(.js) .proceso__ruta .paso__riel-lleno { transform: scaleX(1); }
html:not(.js) .proceso__ruta .paso__nodo { border-color: var(--c-green); }
html:not(.js) .proceso__ruta .paso__num { color: #5BC46B; }
html:not(.js) .proceso__ruta .paso__titulo { color: #fff; }
html:not(.js) .proceso__ruta .paso__texto { color: rgba(255,255,255,.82); }

@media (max-width: 900px) {
  .proceso__ruta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
}
@media (max-width: 560px) {
  /* En vertical el riel pasa a ser una guía a la izquierda. */
  .proceso__ruta { grid-template-columns: 1fr; row-gap: 0; }
  .proceso__ruta .paso__btn { grid-template-columns: 2px 1fr; column-gap: var(--sp-5); padding: 0 0 var(--sp-7) 0; }
  .proceso__ruta .paso__riel { grid-row: 1 / -1; height: 100%; width: 2px; }
  .proceso__ruta .paso__riel-lleno { transform-origin: center top; transform: scaleY(0); }
  .proceso__ruta .paso.is-activo .paso__riel-lleno,
  .proceso__ruta .paso.is-hecho .paso__riel-lleno,
  html:not(.js) .proceso__ruta .paso__riel-lleno { transform: scaleY(1); }
  .proceso__ruta .paso__nodo { left: 50%; top: 0; translate: -50% 0; }
  .proceso__ruta .paso__figura { max-width: 148px; }
}

@media (prefers-reduced-motion: reduce) {
  .proceso__ruta .paso__riel-lleno, .proceso__ruta .paso__nodo, .proceso__ruta .paso__figura, .proceso__ruta .paso__num,
  .proceso__ruta .paso__titulo, .proceso__ruta .paso__texto, .proceso__ruta .paso__dato, .proceso__ruta .paso__figura * { transition: none; }
  .proceso__ruta .paso.is-activo .paso__figura { transform: none; }
  .proceso__ruta .paso__btn:hover .paso__figura { transform: none; }
}

/* ── Banda de honorarios: el argumento, también como dato ──────────
   La banda ocupaba todo el ancho con el texto a la izquierda y la mitad
   derecha vacía. El panel de condiciones llena ese espacio con lo que
   más pesa comercialmente, y de paso lo vuelve consultable de un vistazo. */
.band-accent__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-8); align-items: center;
}
.band-accent__cuerpo .band-accent__text { max-width: 52ch; }

.condiciones {
  /* Era blanco al 10 %: sobre la banda verde ACLARABA el fondo justo
     debajo de texto blanco, y ni con blanco puro se llegaba a 4.5:1
     (medido sobre píxeles reales: 2.84:1 en el rótulo). En negro el
     mismo panel hunde el fondo y todo el bloque pasa holgado. */
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-2);
  padding: var(--sp-6) var(--sp-7);
  backdrop-filter: blur(2px);
}
.condiciones__rotulo {
  font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin: 0 0 var(--sp-4);
}
.condiciones__lista { margin: 0; }
.condiciones__fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-5); padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.condiciones__fila dt { color: rgba(255,255,255,.82); font-size: var(--fs-sm); margin: 0; }
.condiciones__fila dd { margin: 0; color: #fff; font-weight: var(--fw-semi); text-align: right; }
/* La cifra que sostiene todo el argumento: se lee antes que el párrafo. */
.condiciones__fila--eje { border-top: 0; align-items: center; }
.condiciones__cifra {
  font-family: var(--ff-data); font-variant-numeric: lining-nums slashed-zero;
  font-size: clamp(2.4rem, 4.6vw, 3.2rem);
  line-height: .92; letter-spacing: -.04em; color: #fff;
}
.condiciones__pie {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: var(--fs-xs); color: rgba(255,255,255,.76);
}

/* ── Catálogo de insumos en lugar de la foto que no existe ───────── */
.catalogo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
}
.catalogo__item a {
  display: grid; gap: 6px; height: 100%;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-2);
  box-shadow: var(--sh-1), var(--brillo);
  text-decoration: none; color: var(--c-title);
  transition: box-shadow var(--d-comp) var(--e-std),
              transform var(--d-comp) var(--e-std),
              border-color var(--d-comp) var(--e-std);
}
.catalogo__item a:hover,
.catalogo__item a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--c-accent);
  box-shadow: var(--sh-3), var(--brillo);
}
.catalogo__nombre { font-weight: var(--fw-semi); font-size: var(--fs-sm); line-height: 1.35; }
.catalogo__conteo {
  font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}

@media (max-width: 900px) {
  .band-accent__inner { grid-template-columns: 1fr; }
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .catalogo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo__item a:hover, .catalogo__item a:focus-visible { transform: none; }
}

/* ── Instituciones por tipo ────────────────────────────────────────
   Reemplaza la nube 3D que giraba: era decorativa y no se entendía.
   Aquí cada grupo lleva su rótulo y su número, y los puntos —uno por
   institución— dejan ver de un vistazo el peso de cada tipo. */
.constelacion {
  position: relative;
  padding-block: var(--sp-9);
  background: radial-gradient(120% 90% at 78% 8%, #123159 0%, #0B1B33 46%, #060D1A 100%);
  overflow: hidden;
}
/* El contenido real siempre por encima de los arcos decorativos. */
.constelacion > .wrap { position: relative; z-index: 1; }

.constelacion__intro { position: relative; isolation: isolate; max-width: 62ch; }
.constelacion__titulo { font-family: var(--ff-titular); font-weight: var(--fw-semi); color: #fff; font-size: var(--fs-h2); margin-top: var(--sp-3); }
.constelacion__lede { color: rgba(255,255,255,.72); margin-top: var(--sp-4); }

/* El canvas local que había aquí se retiró: se añadió cuando la
   constelación era la única sección con campo, y al llegar el campo
   continuo de toda la página (CAPA 7) quedó como un anillo diminuto
   junto al titular que desentonaba con el resto. Ahora esta sección
   recibe el mismo campo que todas las demás. */

/* ── Proporción de instituciones — el titular visual ─────────────
   Reemplaza los arcos decorativos: eran geometría verificada pero sin
   relación con el contenido, y el veredicto fue que no aportaban nada.
   Esta barra ES el contenido — "49 en 6 tipos" hecho visible en vez de
   solo enunciado — en el mismo orden y color (--seg-1..6) que las
   tarjetas de abajo. Mismo mecanismo que `.barra`: el ancho real vive
   en `--w` desde el primer render (PHP), `.js` es lo único que lo
   arranca en cero para animarlo; sin JS la proporción ya es correcta. */
.proporcion {
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  gap: var(--sp-6); margin-top: var(--sp-7);
}
.proporcion__total { display: flex; flex-direction: column; gap: 2px; }
.proporcion__total .stats__num { font-size: 2.75rem; color: #fff; line-height: 1; }
.proporcion__total-label {
  font-family: var(--ff-data); font-size: var(--fs-xs);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.proporcion__cuerpo { display: grid; gap: var(--sp-2); }

.proporcion__pista {
  display: flex; gap: 2px; width: 100%; height: 30px;
  border-radius: var(--r-1); overflow: hidden;
  background: rgba(255,255,255,.05);
}
.proporcion__seg {
  --tono: #5BC46B;
  flex: 0 0 var(--w, 16.6%);
  background: var(--tono);
  transform: scaleX(1);
  transform-origin: left center;
}
.js .proporcion__seg {
  transform: scaleX(0);
  transition: transform 900ms var(--e-in);
}
.js .proporcion__seg.is-in { transform: scaleX(1); }

/* Cifras alineadas bajo la barra: misma partición (--w, gap) que la
   pista, así que cada número cae exactamente bajo su tramo. */
.proporcion__leyenda { display: flex; gap: 2px; width: 100%; }
.proporcion__leyenda-item {
  --tono: #5BC46B;
  flex: 0 0 var(--w, 16.6%);
  text-align: center;
  font-family: var(--ff-data); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semi);
  color: var(--tono);
  /* Mismo patrón exacto que .barra__cifra: oculta por defecto SOLO
     porque hay JS capaz de revelarla; sin `.js` en <html> la cifra
     nunca depende de que un observer llegue a dispararse. */
  opacity: 0; transition: opacity 420ms var(--e-in);
}
.proporcion__leyenda-item.is-in { opacity: 1; }
html:not(.js) .proporcion__leyenda-item { opacity: 1; }

@media (max-width: 640px) {
  .proporcion { grid-template-columns: 1fr; gap: var(--sp-4); }
  .proporcion__total { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  /* `.js` puede estar puesto sin que motion.js llegue a importarse (app.js
     corta la carga con reduced-motion). Sin este bloque la barra se
     quedaría aplastada e invisible para siempre. */
  .js .proporcion__seg { transform: scaleX(1); transition: none; }
  .js .proporcion__leyenda-item { opacity: 1; transition: none; }
}

/* Bonus de escritorio, sin coste de layout: pasar el puntero por un
   tramo de la barra resalta la tarjeta real que describe, más abajo.
   Los índices coinciden porque `.proporcion__seg` y `.segmento` nacen
   del mismo bucle PHP, en el mismo orden. */
@media (hover: hover) {
  .wrap:has(.proporcion__seg:nth-child(1):hover) .segmento:nth-child(1),
  .wrap:has(.proporcion__seg:nth-child(2):hover) .segmento:nth-child(2),
  .wrap:has(.proporcion__seg:nth-child(3):hover) .segmento:nth-child(3),
  .wrap:has(.proporcion__seg:nth-child(4):hover) .segmento:nth-child(4),
  .wrap:has(.proporcion__seg:nth-child(5):hover) .segmento:nth-child(5),
  .wrap:has(.proporcion__seg:nth-child(6):hover) .segmento:nth-child(6) {
    border-color: var(--tono);
    background: rgba(255,255,255,.055);
  }
}

.segmentos {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5);
}
.segmento {
  --tono: #5BC46B;
  position: relative;
  padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-2);
  background: rgba(255,255,255,.035);
  transition: border-color var(--d-comp) var(--e-std), background var(--d-comp) var(--e-std);
}
.segmento::before {
  content: ""; position: absolute; left: var(--sp-6); right: var(--sp-6); top: 0;
  height: 2px; background: var(--tono); border-radius: 0 0 2px 2px;
}
.segmento:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.055); }

.segmento__cifra {
  font-family: var(--ff-data); font-variant-numeric: lining-nums slashed-zero;
  font-size: 2.3rem; line-height: 1;
  letter-spacing: -.04em; color: var(--tono); margin: 0;
}
.segmento__nombre {
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  line-height: 1.35; margin: var(--sp-3) 0 var(--sp-5); text-wrap: balance;
}

/* Un punto por institución: el tamaño del racimo ES el dato. */
.segmento__puntos { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.punto span {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--tono); opacity: .55;
  transition: opacity var(--d-comp) var(--e-std), scale var(--d-comp) var(--e-out-back);
}
.punto span:hover { opacity: 1; scale: 1.5; cursor: help; }
.segmento:hover .punto span { opacity: .8; }

/* Los nombres son el contenido; los puntos solo lo representan. */
.segmento__nombres {
  list-style: none; margin: 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid rgba(255,255,255,.11);
  display: grid; gap: 5px;
}
.segmento__nombres li {
  font-size: var(--fs-xs); line-height: 1.45;
  color: rgba(255,255,255,.60);
}
.segmento__mas {
  margin: var(--sp-3) 0 0; font-size: var(--fs-xs);
  color: var(--tono); text-decoration: none; font-weight: var(--fw-semi);
}
.segmento__mas:hover { text-decoration: underline; }

.constelacion__pie { margin-top: var(--sp-7); }

@media (max-width: 1000px) { .segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .segmentos { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .segmento, .punto span { transition: none; }
  .punto span:hover { scale: 1; }
}

/* ── WhatsApp como canal explícito ────────────────────────────────
   El verde es el de la marca, no el de WhatsApp: el botón pertenece
   al sitio, no parece un widget pegado de fuera.

   El botón vive dentro de <address class="prose">, y `.prose a` (una
   clase + un elemento) tiene más especificidad que `.btn--wa` sola (una
   clase): el texto salía verde sobre fondo verde, invisible. Se fuerza
   con un selector inequívocamente más específico, no con !important. */
.contacto__datos .btn--wa,
.btn--wa {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
  background: var(--c-green-600); color: #fff; border-color: var(--c-green-600);
}
.contacto__datos .btn--wa:hover, .contacto__datos .btn--wa:focus-visible,
.btn--wa:hover, .btn--wa:focus-visible { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.btn--wa svg { flex: none; fill: currentColor; }

/* ── Acordeón de sectores ──────────────────────────────────────────
   Reutiliza el acordeón de FAQ (.acc, ya probado), pero la cabecera de
   cada panel es un nombre de sector, no una pregunta: necesita más peso
   tipográfico y un número que ordene la lista.
   Es un <ul>/<li> (semánticamente correcto: es una lista de sectores),
   así que hay que resetear la viñeta nativa o queda un punto suelto
   fuera de cada tarjeta. */
.sectores-acc { list-style: none; margin: 0; padding: 0; }
.sectores-acc > li { margin: 0; }
.sectores-acc summary {
  padding: var(--sp-6) var(--sp-2);
  gap: var(--sp-5);
}
.sectores-acc__num {
  font-family: var(--ff-data); font-size: var(--fs-sm);
  color: var(--c-accent-ink); flex: none;
}
.sectores-acc__nombre {
  font-family: var(--ff-titular); font-weight: var(--fw-semi);
  font-size: var(--fs-h4); color: var(--c-title);
  letter-spacing: -.01em;
}
.sectores-acc .acc__body { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.sectores-acc .sector { margin-top: var(--sp-2); }

@media (max-width: 560px) {
  .sectores-acc__nombre { font-size: 1.1rem; }
}

/* ── Página de contacto ─────────────────────────────────────────────
   No tenía NINGUNA regla propia: ni layout de dos columnas, ni tarjeta
   para los datos, ni selector visual. Todo se apilaba en una sola
   columna de texto plano, sin jerarquía. */
.contacto {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--sp-9); align-items: start;
}
.contacto__datos {
  padding: var(--sp-6); border-radius: var(--r-2);
  background: var(--c-paper);
  border: var(--bw) solid var(--c-line);
}
.contacto__datos address p { margin: var(--sp-4) 0 0; }
.contacto__datos address p:first-child { margin-top: var(--sp-4); }

@media (max-width: 900px) {
  .contacto { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* ── Selector de tipo de solicitud ────────────────────────────────
   Entradas radio reales con apariencia de tarjeta: sin JavaScript se
   navegan igual (son un grupo nativo, flechas incluidas), y de paso
   las 8 líneas de servicio quedan visibles en vez de escondidas
   dentro de un <select>. */
.tipo-picker {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-2);
}
.tipo-picker__op {
  position: relative; cursor: pointer;
  display: flex; align-items: center;
  min-height: 44px; padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line); border-radius: var(--r-1);
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-title);
  transition: border-color var(--d-micro) var(--e-std),
              background var(--d-micro) var(--e-std),
              box-shadow var(--d-micro) var(--e-std);
}
.tipo-picker__op input {
  position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;
}
.tipo-picker__op:has(input:checked) {
  border-color: var(--c-accent); background: var(--c-green-100);
  box-shadow: 0 0 0 1px var(--c-accent) inset;
  font-weight: var(--fw-semi);
}
.tipo-picker__op:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-off); }
.tipo-picker__op:hover { border-color: var(--c-accent); }

@media (max-width: 560px) {
  .tipo-picker { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CAPA 5 — realce del tema oscuro
   El sitio ya no alterna claro/oscuro: es oscuro entero. Sin el
   contraste de secciones blancas, la separación entre bloques y la
   respuesta al puntero tienen que venir de la luz, no del papel.
   ═══════════════════════════════════════════════════════════════ */

/* Las secciones alternas ya no se distinguen por ser blancas, sino por
   estar un plano más arriba y tener su propia luz de ambiente. */
.section--alt {
  position: relative;
  background-image:
    radial-gradient(90% 120% at 12% 0%, rgba(47, 168, 79, .07), transparent 62%),
    radial-gradient(80% 120% at 92% 100%, rgba(62, 159, 214, .07), transparent 62%);
}
/* Filo de luz en el borde superior: es lo que separa una sección de la
   siguiente cuando las dos son oscuras. */
.section--alt::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 196, 107, .38) 22%, rgba(62, 159, 214, .30) 68%, transparent);
  pointer-events: none;
}

.page-head {
  position: relative;
  background-image: radial-gradient(80% 130% at 78% 0%, rgba(47, 168, 79, .09), transparent 60%);
}

/* El botón principal deja de ser un rectángulo plano: se enciende. */
.btn--primary {
  box-shadow: 0 8px 24px -10px rgba(47, 168, 79, .70), var(--brillo-osc);
}
.btn--primary:hover {
  box-shadow: 0 12px 32px -8px rgba(47, 168, 79, .85), var(--brillo-osc);
}
.btn--ghost:hover { border-color: var(--c-accent-ink); color: #fff; }

/* La cabecera pegajosa: al despegarse se oscurece y se difumina, en vez
   de quedarse como una barra opaca del mismo color que el contenido. */
.site-header {
  background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--c-paper) 86%, transparent);
  box-shadow: var(--sh-3);
}
/* El enlace activo se marca con el acento encendido, no con un gris. */
.site-nav__list a { transition: color var(--d-micro) var(--e-std); }
.site-nav__list a:hover { color: var(--c-accent-ink); }

/* Campos de formulario sobre oscuro: el foco se ve como luz. */
.form__control {
  transition: border-color var(--d-comp) var(--e-std), box-shadow var(--d-comp) var(--e-std);
}
.form__control:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(47, 168, 79, .16);
}

/* Sin JavaScript el sitio se sigue viendo entero; esto es solo brillo. */
@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--primary:hover { box-shadow: var(--brillo-osc); }
}

/* ── Banda clara ─────────────────────────────────────────────────
   El sitio es oscuro; esta es la excepción deliberada. Los logos de
   las instituciones son arte oscuro sobre transparente: sobre el azul
   profundo había que darle a cada uno una placa blanca, que es un
   parche. Sobre claro se presentan como en cualquier otra parte.

   No se pinta componente por componente: se reasignan los TOKENS en el
   ámbito de la sección, y todo lo de dentro (tarjetas, títulos, texto
   secundario, enlaces, bordes) se adapta solo. Es el mismo mecanismo
   que usa el tema oscuro, invertido — por eso no hace falta perseguir
   un selector por cada elemento, que es justo como se cuela un texto
   invisible. */
.section--claro {
  --c-paper:      #F5F7FA;
  --c-surface:    #FFFFFF;
  --c-title:      #17356B;
  --c-ink:        #101B2D;
  --c-muted:      #5A6B80;
  --c-line:       #DDE3EA;
  --c-accent-ink: #217838;   /* 5.51:1 sobre blanco */
  --brillo:       inset 0 1px 0 rgba(255, 255, 255, .55);
  /* Las sombras vuelven a tinte azul de marca: las de negro puro del
     tema oscuro sobre blanco se ven sucias. */
  --sh-1: 0 1px 2px rgba(16, 27, 45, .06), 0 2px 6px rgba(16, 27, 45, .05);
  --sh-4: 0 8px 16px rgba(16, 27, 45, .08), 0 24px 56px rgba(16, 27, 45, .12);

  position: relative;
  background: var(--c-paper);
  color: var(--c-ink);
  border-block: var(--bw) solid var(--c-line);
}
/* Ya no hace falta la placa: la ficha entera es blanca. */
.section--claro .aliado__marca { background: none; padding: 0; }
/* El velo de luz de las superficies está calculado para oscuro; sobre
   blanco solo ensucia el borde superior de la ficha. */
.section--claro .aliado { background-image: none; }

/* ═══════════════════════════════════════════════════════════════
   CAPA 6 — MALLA DE AURORA
   Los cuatro gradientes que había eran el MISMO radial con el origen
   movido: repetido cuatro veces no daba variedad, daba plantilla. Y el
   resto de secciones eran color plano.

   Aquí cada bloque pinta dos lóbulos anclados en PÍXELES a sus costuras
   —uno que entra por el borde de arriba y otro que sale por el de
   abajo— y el color de salida de un bloque es el de entrada del
   siguiente: en cada costura las dos mitades forman un solo óvalo
   partido por la frontera, así que el corte entre secciones deja de
   leerse como un corte.

   POR QUÉ EN PÍXELES Y NO EN PORCENTAJE: en porcentaje, el gradiente se
   estira con la caja y el contraste de una sección pasaría a depender de
   cuántos servicios haya publicados ese día — no se podría verificar. En
   píxeles la costura mide lo mismo en una sección de 320 px y en una de
   2.600 px.

   EL FOSO: en `.section` una elipse oscura centrada devuelve la banda de
   lectura por DEBAJO del fondo base. No es decorativo — es lo que hace
   que meter luz no se coma las tarjetas: la separación tarjeta/fondo
   pasa de 2.72× a 4.12×.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Rampa VIVA — los --seg-1..6 en triplete para poder darles alfa. Es el
     único sitio donde el color de marca aparece saturado, y solo en los
     ~234 px de costura, que son padding y no llevan texto. */
  --au-v1: 91 196 107;  --au-v2: 63 190 140;  --au-v3: 53 180 174;
  --au-v4: 62 159 214;  --au-v5: 90 138 224;  --au-v6: 127 163 232;

  /* Rampa PROFUNDA — el mismo recorrido verde→azul, pero ya a la
     luminancia del fondo: tiñe sin aclarar. Por eso puede ir a alfa .5-.62
     sin mover el medidor de contraste. */
  --au-p1: 10 58 33;    --au-p2: 8 54 45;     --au-p3: 7 47 58;
  --au-p4: 11 43 79;    --au-p5: 20 45 96;    --au-p6: 30 52 105;

  /* Ternas ISOLÚMICAS para los bloques que ya tenían radial propio. Cada
     color mide EXACTAMENTE la luminancia del stop que sustituye
     (#123159 / #0B1B33 / #060D1A): mismo brillo, otro matiz. Por eso
     estos bloques cambian de color sin que su contraste se mueva. */
  --au-t1: #173534 0%, #0D1D1E 46%, #070E0F 100%;  /* verde      */
  --au-t3: #113442 0%, #0A1D26 46%, #050E13 100%;  /* turquesa   */
  --au-t4: #13334D 0%, #0B1C2C 46%, #060E16 100%;  /* azul       */
  --au-t5: #1B3153 0%, #0F1B2F 46%, #080D17 100%;  /* azul medio */
  --au-t6: #1E314D 0%, #111B2B 46%, #090D15 100%;  /* azul frío  */

  --au-off:  200px;                 /* lóbulo vivo: salida del centro */
  --au-r:    620px;
  --au-w:    min(1180px, 150vw);
  --au-toff: 90px;                  /* lóbulo de tinte */
  --au-tr:   680px;
  --au-tw:   135%;

  /* Estos valores por defecto TIENEN que existir: si falta uno, el
     background-image entero se invalida y la sección sale transparente. */
  --au-in:   var(--au-p2);  --au-out:  var(--au-p4);
  --au-vin:  var(--au-v2);  --au-vout: var(--au-v4);
  --au-x-in: 78%;           --au-x-out: 18%;
  --au-tinte: 0;  --au-brillo: 0;  --au-foso: 0;

  /* Grano atenuado DENTRO del propio SVG, así es una capa más del fondo y
     no un pseudoelemento por sección. No es textura decorativa: es la cura
     del BANDING — un degradado entre dos azules casi negros recorre 6-8
     valores de 8 bits y sale a franjas en pantallas corrientes. */
  --au-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.044'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");

  /* La pila. Una sola definición para todo el sitio: cada bloque solo
     cambia variables, nunca el orden. Arriba el grano, luego el foso
     (tiene que ganarle a los lóbulos en la banda de lectura), luego los
     brillos y al fondo los tintes. */
  --au-malla:
    var(--au-grano),
    radial-gradient(115% 56% at 50% 50%,
      rgb(2 7 16 / var(--au-foso)), rgb(2 7 16 / 0) 76%),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-in) calc(-1 * var(--au-off)),
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-out) calc(100% + var(--au-off)),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(var(--au-tw) var(--au-tr)
      at var(--au-x-in) calc(-1 * var(--au-toff)),
      rgb(var(--au-in) / var(--au-tinte)), rgb(var(--au-in) / 0) 72%),
    radial-gradient(var(--au-tw) var(--au-tr)
      at var(--au-x-out) calc(100% + var(--au-toff)),
      rgb(var(--au-out) / var(--au-tinte)), rgb(var(--au-out) / 0) 72%);
}

/* A 390 px un radio de 1180 px cubre el ancho entero y el titular se come
   la cola del brillo. Mismos alfas, lóbulos más cortos. */
@media (max-width: 767px) {
  :root {
    --au-off: 120px; --au-r: 400px; --au-w: 150vw;
    --au-toff: 60px; --au-tr: 440px;
  }
}

/* La malla NO vive en el body a propósito: un degradado a la altura del
   documento cambiaría de color según lo larga que sea la página. Al body
   le queda el suelo y el grano, que es lo que se ve en el rebote de
   scroll y bajo el pie en páginas cortas. */
body { background-image: var(--au-grano); }

/* ── El motor. Vale para todo el sitio, no depende del orden ──────── */

/* `.section` vive sobre --c-paper y suele llevar tarjetas --c-surface
   ENCIMA: es el único caso donde aclarar el fondo se comería la tarjeta,
   y por eso es el único que lleva foso. */
.section:not(.section--claro) {
  position: relative;
  --au-tinte: .62;
  --au-brillo: .075;
  --au-foso: .90;
  background-image: var(--au-malla);
}

/* `.section--alt` es al revés: su base ya es --c-surface y sus tarjetas
   son --c-paper, o sea MÁS oscuras. Aquí aclarar el fondo separa mejor,
   no peor — por eso va sin foso y es el bloque más luminoso del sistema.
   Corrige de paso algo que ya estaba mal: .servicio-fila, .toc y
   .acc details son #101E36 sobre un fondo #101E36, y hasta ahora solo
   los separaba un borde de 1 px.
   Se escribe `.section.section--alt` para ganarle en especificidad a
   `.section:not(.section--claro)`, que también son dos clases. */
.section.section--alt {
  --au-in: var(--au-p4);  --au-out: var(--au-p2);
  --au-vin: var(--au-v4); --au-vout: var(--au-v2);
  --au-x-in: 18%;         --au-x-out: 82%;
  --au-tinte: .50; --au-brillo: .07; --au-foso: 0;
  background-image: var(--au-malla);
}
/* El filo pasa a llevar los dos matices que se encuentran en esa costura,
   en vez de un verde y un azul fijos. */
.section.section--alt::before {
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--au-vin) / .42) 24%,
    rgb(var(--au-vout) / .34) 70%,
    transparent);
}

.page-head:not(.page-head--deep) {
  --au-in: var(--au-p1);  --au-out: var(--au-p4);
  --au-vin: var(--au-v1); --au-vout: var(--au-v4);
  --au-tinte: .50; --au-brillo: .07; --au-foso: 0;
  background-image: var(--au-malla);
}

/* ── Los bloques profundos ────────────────────────────────────────
   Cada uno cambia de MATIZ (terna isolúmica) y de dirección de luz. */

/* Héroe: el brillo vivo se queda arriba a la derecha y NO hay lóbulo
   inferior — abajo están las cifras, cuyo rótulo va a rgba(255,255,255,.55)
   y es el texto más frágil de la portada. Ese lóbulo lo pinta entero la
   sección de abajo. */
.hero--flow {
  --au-vin: var(--au-v2); --au-brillo: .07; --au-x-in: 86%;
  background-color: var(--c-paper);
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-in) calc(-1 * var(--au-off)),
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(120% 90% at 72% 42%, var(--au-t5));
}
.hero--flow::after { display: none; }   /* el grano ya va en la pila */

.constelacion {
  position: relative;
  --au-vin: var(--au-v5); --au-vout: var(--au-v6);
  --au-brillo: .07; --au-x-in: 22%; --au-x-out: 84%;
  background-color: var(--c-paper);
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-in) calc(-1 * var(--au-off)),
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-out) calc(100% + var(--au-off)),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(150% 70% at 88% 0%, var(--au-t6));
}

/* Único bloque con la luz LATERAL, en el eje del riel: acompaña la
   secuencia de pasos en vez de contradecirla. */
.proceso {
  --au-vin: var(--au-v4); --au-vout: var(--au-v2);
  --au-brillo: .06; --au-x-in: 12%; --au-x-out: 88%;
  background-color: var(--c-paper);
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-in) calc(-1 * var(--au-off)),
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-out) calc(100% + var(--au-off)),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(90% 130% at 6% 50%, var(--au-t3));
}
.proceso::after { display: none; }

/* Único bloque donde la luz SUBE DESDE ABAJO, y único que vuelve al
   verde: la página se cierra por donde empezó. */
.band-dark--deep {
  position: relative;
  --au-vin: var(--au-v2); --au-vout: var(--au-v1);
  --au-brillo: .075; --au-x-in: 24%; --au-x-out: 62%;
  background-color: var(--c-paper);
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-in) calc(-1 * var(--au-off)),
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-out) calc(100% + var(--au-off)),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(140% 110% at 50% 120%, var(--au-t1));
}

/* El brillo va a la derecha y abajo: arriba a la izquierda está la miga
   de pan, el texto más frágil de las páginas interiores. */
.page-head--deep {
  --au-vout: var(--au-v3); --au-brillo: .06; --au-x-out: 20%;
  background-color: var(--c-paper);
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-out) calc(100% + var(--au-off)),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(120% 130% at 78% 10%, var(--au-t1));
}
[data-linea="insumos"] .page-head--deep {
  --au-vout: var(--au-v5);
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-out) calc(100% + var(--au-off)),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(120% 130% at 78% 10%, var(--au-t4));
}
.page-head--deep::after { display: none; }

/* La banda de acento conserva su foco de luz tal cual; solo se le añaden
   los dos puentes de costura, lejos del halo (que vive en 20% -25%). */
.band-accent {
  --au-vin: var(--au-v3); --au-vout: var(--au-v4); --au-brillo: .06;
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) 460px at 88% -150px,
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(var(--au-w) 460px at 12% calc(100% + 150px),
      rgb(var(--au-vout) / var(--au-brillo)), rgb(var(--au-vout) / 0) 70%),
    radial-gradient(85% 150% at 20% -25%,
      color-mix(in srgb, var(--c-accent) 42%, transparent), transparent 62%),
    radial-gradient(70% 120% at 92% 120%, rgba(0, 0, 0, .30), transparent 62%);
}

/* ── El recorrido de la portada ───────────────────────────────────
   Verde → verde-azul → turquesa → azul → [banda clara] → azul frío →
   turquesa → verde. Selectores estructurales: no hay que tocar el PHP. */

/* Lleva el lóbulo de la costura del héroe ENTERO (el héroe no pinta el
   suyo), por eso el brillo de entrada va más alto. */
.hero--flow + .section {
  --au-in: var(--au-p2);  --au-out: var(--au-p3);
  --au-vin: var(--au-v2); --au-vout: var(--au-v3);
  --au-x-in: 86%; --au-x-out: 20%;
  --au-brillo: .085;
}
.hero--flow + .section + .section--alt {
  --au-in: var(--au-p3);  --au-out: var(--au-p3);
  --au-vin: var(--au-v3); --au-vout: var(--au-v4);
  --au-x-in: 20%; --au-x-out: 78%;
}
/* En insumos el acento ya es azul: la malla acompaña ese giro. */
.section.split[data-linea="insumos"] {
  --au-in: var(--au-p4);  --au-out: var(--au-p5);
  --au-vin: var(--au-v4); --au-vout: var(--au-v5);
  --au-x-in: 82%; --au-x-out: 24%;
}
/* La atmósfera VUELVE tras el corte blanco, en el punto más frío del
   recorrido, y empieza a girar de vuelta hacia el verde. */
.section--claro + .section {
  --au-in: var(--au-p6);  --au-out: var(--au-p4);
  --au-vin: var(--au-v6); --au-vout: var(--au-v4);
  --au-x-in: 30%; --au-x-out: 76%;
  --au-brillo: .085;
}

/* ── La banda clara ───────────────────────────────────────────────
   Es una `.section`, así que el motor la habría pintado: se restablece a
   mano. Los dos filos son la única concesión: sin ellos el corte de
   oscuro a blanco y de vuelta parece un fallo de maquetación en lugar de
   una decisión. */
.section.section--claro { background-image: none; }
.section.section--claro::before,
.section.section--claro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  pointer-events: none;
}
.section.section--claro::before {
  top: 0;
  background: linear-gradient(90deg, transparent,
    rgb(var(--au-v6) / .55) 30%, rgb(var(--au-v5) / .40) 72%, transparent);
}
.section.section--claro::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent,
    rgb(var(--au-v4) / .40) 28%, rgb(var(--au-v6) / .55) 70%, transparent);
}

/* ── Salidas de emergencia ────────────────────────────────────────
   Nada de la malla se anima, así que reduced-motion no tiene qué apagar.
   Sí tiene sentido retirarla en contraste alto y colores forzados. */
@media (prefers-contrast: more) {
  .section, .section--alt, .page-head, .hero--flow, .constelacion,
  .proceso, .band-dark--deep, .page-head--deep {
    background-image: var(--au-grano);
  }
}
@media (forced-colors: active) {
  .section, .section--alt, .page-head, .hero--flow, .constelacion,
  .proceso, .band-dark--deep, .page-head--deep, .band-accent {
    background-image: none;
  }
}
/* El bloque de impresión reasigna tokens y fuerza los bloques oscuros a
   blanco, pero no limpiaba background-image: con la malla eso ya importa. */
@media print {
  body, .section, .section--alt, .page-head, .page-head--deep,
  .hero--flow, .constelacion, .proceso, .band-dark--deep, .band-accent {
    background-image: none !important;
  }
  .section--claro::before, .section--claro::after { display: none !important; }
}

/* El pie quedaba fuera del sistema: un rectángulo #0F2A55 plano y, tras
   el cierre en verde, el bloque MÁS claro de la página entera. Entra en la
   misma malla —lóbulo de entrada que engancha con el verde del cierre— y
   se hunde hacia abajo, que es donde termina el documento. */
.site-footer {
  position: relative;
  --au-vin: var(--au-v1); --au-brillo: .06; --au-x-in: 62%;
  background-color: #0A1830;
  background-image:
    var(--au-grano),
    radial-gradient(var(--au-w) var(--au-r)
      at var(--au-x-in) calc(-1 * var(--au-off)),
      rgb(var(--au-vin) / var(--au-brillo)), rgb(var(--au-vin) / 0) 70%),
    radial-gradient(120% 120% at 50% -30%, #14305A 0%, #0A1830 52%, #060E1C 100%);
}
/* Mismo filo que separa las demás costuras. */
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent,
    rgb(var(--au-v1) / .40) 26%, rgb(var(--au-v3) / .30) 70%, transparent);
}
@media print { .site-footer::before { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   CAPA 7 — CAMPO CONTINUO
   El campo de partículas del héroe deja de ser un objeto del héroe y
   pasa a estar detrás de TODA la página: un solo <canvas> fijo, y las
   secciones y tarjetas translúcidas haciendo de ventana.

   POR QUÉ UNO SOLO: el navegador solo mantiene 16 contextos WebGL vivos
   (medido en este mismo sitio: creando 64 sobreviven 16). /experiencia/
   tiene 49 tarjetas. Un canvas por tarjeta habría dejado dos de cada
   tres en negro, cada una con su propio bucle de render.

   POR QUÉ ES SEGURO PARA EL TEXTO: el peor caso absoluto —una partícula
   saturada a BLANCO justo detrás del texto más flojo (--c-muted)— deja
   el fondo en rgb(19,26,41) y el contraste en 7.15:1, muy por encima del
   4.5:1 exigido. El margen existe porque las bases ya son casi negras:
   aclararlas un 14 % no las acerca al texto. Verificado además
   muestreando píxeles reales del render, no solo con la fórmula.
   ═══════════════════════════════════════════════════════════════ */

/* El color base y el grano SUBEN al <html>, y el <body> se queda
   transparente. No es cosmético: un elemento con `z-index:-1` pinta en el
   paso de z-index negativos, que va ANTES de los fondos de los elementos
   de flujo — es decir, por debajo del fondo del <body>. Con el body opaco
   el canvas quedaba tapado y el campo no se veía en absoluto (medido:
   diferencia de 0 píxeles entre campo encendido y apagado). */
html {
  background-color: #070F1E;
  background-image: var(--au-grano);
}
body { background-color: transparent; background-image: none; }

.campo-global {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms var(--e-in);
}
.campo-global.is-on { opacity: .85; }

/* Sin puntero fino / en móvil el campo no se inicializa (mismo gate
   `wide` que el héroe): el canvas se retira del todo. */
@media (max-width: 767px) {
  .campo-global { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .campo-global { display: none; }
}

/* ── Las ventanas ────────────────────────────────────────────────
   Cada superficie baja su opacidad lo justo para dejar pasar el campo.
   No se tocan los tokens (--c-surface, --c-paper) a propósito: así
   `.section--claro`, que los reasigna para la banda blanca, sigue
   funcionando y queda opaca sin ninguna excepción escrita a mano. */

/* Fondos de sección. `color-mix` mantiene el color exacto ya calculado
   y solo le añade transparencia. */
.section:not(.section--claro),
.page-head,
.constelacion,
.proceso,
.band-dark--deep {
  background-color: color-mix(in srgb, var(--base, var(--c-paper)) 72%, transparent);
}
.section.section--alt {
  /* Un punto más opaca que el resto (82 % y no 72 %): es la única
     superficie del sistema SIN foso —sus tarjetas son más oscuras que
     ella, así que oscurecerle el centro las borraría— y por eso era la
     única donde el campo llegaba a aclarar el fondo lo suficiente para
     bajar el texto secundario a 4.04:1. Medido sobre píxeles reales. */
  background-color: color-mix(in srgb, var(--c-surface) 82%, transparent);
}

/* Tarjetas y paneles: un punto más opacos que la sección, para que se
   sigan leyendo como objeto por delante del campo y no como un agujero. */
.card,
.institucion,
.insumo,
.recurso-fila,
.servicio-fila,
.segmento,
.stats--panel,
.catalogo__item a,
.acc details,
.contacto__datos,
.toc,
.sector__servicios li,
.tipo-picker__op {
  background-color: color-mix(in srgb, var(--c-surface) 78%, transparent);
}
/* Las que van sobre la sección alterna usan el papel, no la superficie. */
.section--alt .card,
.section--alt .institucion,
.section--alt .insumo,
.section--alt .sector__servicios li {
  background-color: color-mix(in srgb, var(--c-paper) 78%, transparent);
}

/* La banda clara y todo lo que vive dentro se quedan opacos: es la única
   parte del sitio pensada para ir sobre blanco, y el campo por detrás
   solo la ensuciaría. */
.section--claro,
.section--claro .aliado {
  background-color: var(--c-surface);
}
.section--claro { background-color: var(--c-paper); }

/* La banda de acento tampoco: su verde es plano a propósito. */
.band-accent { background-color: var(--c-band); }

/* Sin JS el canvas nunca se enciende, así que estas superficies quedarían
   translúcidas sobre el fondo sólido del html — que es exactamente el
   color que tenían antes. No hace falta deshacer nada. */