/* ============================================================
   Codeplus — hoja de estilo del sitio informativo
   Los valores de color, tipografía, espacio y radio provienen
   del sistema de diseño de la marca.
   ============================================================ */

:root, :root[data-theme="light"] {
  /* Marca Codeplus — valores medidos sobre el PDF de marca */
  --rojo: #f30322;          --rojo-fuerte: #c40019;   --rojo-suave: #fdecef;
  --negro: #000000;         --ink: #111113;           --ink-muted: #55565b;
  --ink-subtle: #6b6c72;
  --surface-000: #ffffff;   --surface-100: #f7f7f8;   --surface-200: #ededee;
  --surface-accent: #fdecef; --surface-deep: #111113; --surface-shell: #1c1c1f;
  --ink-on-deep: #ffffff;   --ink-muted-on-deep: #b8b9bd;  --ink-on-brand: #ffffff;
  --border: #e2e2e4;        --border-strong: #8b8c92;  --focus-ring: #c40019;
  --success: #128a52;       --success-soft: #e2f4ec;  --success-ink: #0b6b3f;
  --warning: #9a6300;       --warning-soft: #fbf0dc;  --warning-ink: #7d5000;
  --danger: #c40019;        --danger-soft: #fdecef;   --danger-ink: #a50015;
  --info: #f30322;          --info-soft: #fdecef;
  --chart-1: #f30322; --chart-2: #111113; --chart-3: #8b8c92;
  --chart-4: #c40019; --chart-5: #cfcfd3; --chart-6: #6b6c72;
  /* Rojo de relleno: el único que lleva texto blanco encima (6,25:1). */
  --brand-fill: #c40019;   --rojo-en-negro: #ff5e73;
  --shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --shadow-raised: 0 2px 6px rgba(0,0,0,.09), 0 16px 40px rgba(0,0,0,.11);
}
:root[data-theme="dark"] {
  --rojo: #ff4d63;          --rojo-fuerte: #ff8090;   --rojo-suave: #3a0f16;
  --negro: #ffffff;         --ink: #f2f2f3;           --ink-muted: #b0b1b6;
  --ink-subtle: #93949a;
  --surface-000: #1a1a1d;   --surface-100: #100f11;      --surface-200: #26262a;
  --surface-accent: #3a0f16; --surface-deep: #0a0a0b; --surface-shell: #131315;
  --ink-on-deep: #f7f7f8;   --ink-muted-on-deep: #a9aaae; --ink-on-brand: #15050a;
  --border: #303035;        --border-strong: #6e6f76;  --focus-ring: #ff8090;
  --success: #3ec98a;       --success-soft: #0f2f20;  --success-ink: #8fe6bb;
  --warning: #e0a83c;       --warning-soft: #33260e;  --warning-ink: #f0c579;
  --danger: #ff6b7d;        --danger-soft: #3a0f16;   --danger-ink: #ffa3ae;
  --info: #ff4d63;          --info-soft: #3a0f16;
  --chart-1: #ff4d63; --chart-2: #f2f2f3; --chart-3: #93949a;
  --chart-4: #ff8090; --chart-5: #4a4a51; --chart-6: #b0b1b6;
  --brand-fill: #c40019;   --rojo-en-negro: #ff5e73;
  --shadow-card: 0 1px 2px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.5);
  --shadow-raised: 0 2px 6px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rojo: #ff4d63;          --rojo-fuerte: #ff8090;   --rojo-suave: #3a0f16;
    --negro: #ffffff;         --ink: #f2f2f3;           --ink-muted: #b0b1b6;
    --ink-subtle: #93949a;
    --surface-000: #1a1a1d;   --surface-100: #100f11;      --surface-200: #26262a;
    --surface-accent: #3a0f16; --surface-deep: #0a0a0b; --surface-shell: #131315;
    --ink-on-deep: #f7f7f8;   --ink-muted-on-deep: #a9aaae; --ink-on-brand: #15050a;
    --border: #303035;        --border-strong: #6e6f76;  --focus-ring: #ff8090;
    --success: #3ec98a;       --success-soft: #0f2f20;  --success-ink: #8fe6bb;
    --warning: #e0a83c;       --warning-soft: #33260e;  --warning-ink: #f0c579;
    --danger: #ff6b7d;        --danger-soft: #3a0f16;   --danger-ink: #ffa3ae;
    --info: #ff4d63;          --info-soft: #3a0f16;
    --chart-1: #ff4d63; --chart-2: #f2f2f3; --chart-3: #93949a;
    --chart-4: #ff8090; --chart-5: #4a4a51; --chart-6: #b0b1b6;
    --brand-fill: #c40019;   --rojo-en-negro: #ff5e73;
  --shadow-card: 0 1px 2px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.5);
    --shadow-raised: 0 2px 6px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.55);
  }

}

/* Figuras humanas y objetos: constantes en los dos temas.
   Una persona no se invierte al cambiar de modo; el fondo sí. */
:root {
  --fig-piel-1: #f0c9a8; --fig-piel-2: #d9a077; --fig-piel-3: #a9714c; --fig-piel-4: #77492e;
  --fig-pelo-1: #2a2118; --fig-pelo-2: #4a3526; --fig-pelo-3: #17120e;
  --fig-pantalon: #2f4463; --fig-zapato: #1e2a3a; --fig-vidrio: #bcd8f2;
  --fig-llanta: #2b3648;  --fig-poste: #7b8ba0;  --fig-tronco: #6b5140;
  --fig-reflectante: #f2f7ff; --fig-dispositivo: #1e2a3a; --fig-ropa-1: #e0663f;
}
:root {
  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --wrap: 1140px;
  /* Alias hacia los nombres que usa el resto de la hoja */
  --brand-ink: var(--ink); --brand-navy: var(--surface-deep);
  --brand-blue: var(--rojo-fuerte); --brand-blue-strong: var(--rojo);
  --brand-accent: var(--rojo);
}

/* ============================================================
   CAPA EDITORIAL
   Sin sombras, sin tarjetas flotantes, sin esquinas redondeadas
   salvo donde la marca las usa: el disco de icono y la píldora.
   La jerarquía la hacen el tamaño del tipo, el filete rojo, el
   aire y la fotografía a sangre.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
/* `clip` en vez de `hidden`: evita la barra horizontal que provoca el sangrado
   con unidades vw sin crear un contenedor de scroll que rompa el sticky. */
body {
  margin: 0; background: var(--surface-000); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: var(--rojo-fuerte); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--brand-fill); color: #fff; padding: var(--s3) var(--s5); font-weight: 600;
}
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s8); }
.wrap--angosto { max-width: 820px; }

/* ---------- tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; }
h1, .t-xl {
  font-size: clamp(38px, 5.6vw, 76px); line-height: 1.0;
  font-weight: 800; letter-spacing: -0.038em;
}
h2, .t-l {
  font-size: clamp(28px, 3.9vw, 50px); line-height: 1.05;
  font-weight: 800; letter-spacing: -0.032em;
}
h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-muted); max-width: 44ch; }
.hl { color: var(--rojo); }

/* Antetítulo entre llaves: el gesto del logotipo hecho marcador. */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: .55em;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--s5);
}
.eyebrow::before { content: "{"; color: var(--rojo); font-size: 1.5em; line-height: 0; font-weight: 800; }
.eyebrow::after  { content: "}"; color: var(--rojo); font-size: 1.5em; line-height: 0; font-weight: 800; }

/* La regla roja: el recurso que más se repite en la marca. */
.regla { display: block; width: 44px; height: 3px; background: var(--rojo); border: 0; margin: 0 0 var(--s6); }

/* ---------- cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--surface-000); border-bottom: 1px solid var(--border); }
.site-header__bar { display: flex; align-items: center; gap: var(--s6); min-height: 76px; }
.brand { order: 0; display: flex; align-items: center; gap: var(--s3); text-decoration: none; min-width: 0; }
.brand__mark { width: 42px; height: auto; }
.brand__name { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--rojo); line-height: 1; }
.brand__name b { color: var(--ink); font-weight: 800; }
.brand__tag { display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 3px; }
.nav { order: 2; margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.nav a:not(.btn) { text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover { border-bottom-color: var(--rojo); }
.nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--rojo); font-weight: 700; }
.nav-toggle, .theme-toggle {
  border: 1px solid var(--border); background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: var(--s2) var(--s3);
}
.theme-toggle { order: 3; margin-left: var(--s4); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; }
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--rojo); color: var(--rojo-fuerte); }
.theme-toggle .icon-luna { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sol { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sol { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-luna { display: block; }
}
.nav-toggle { display: none; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s6); border: 2px solid transparent;
  font-family: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
  cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.btn--primary { background: var(--brand-fill); color: #fff; }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--surface-000); }
.btn--deep { background: var(--surface-000); color: var(--rojo-fuerte); }
.btn--deep:hover { background: var(--ink); color: var(--surface-000); }
.btn--sm { padding: var(--s2) var(--s4); font-size: 14px; }

/* ---------- fotografía a sangre, fundida hacia el papel ---------- */
.foto-bleed { position: relative; overflow: hidden; }
.foto-bleed img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El degradado del PDF: la imagen se disuelve en el papel por el lado del texto. */
.fundido-izq img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 14%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 14%, #000 42%);
}
.fundido-arriba img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 10%, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 10%, #000 30%);
}
:root[data-theme="dark"] .foto-bleed img { filter: brightness(.82) contrast(1.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foto-bleed img { filter: brightness(.82) contrast(1.05); }
}

/* ---------- portada y cabecera de módulo ---------- */
.hero { position: relative; padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 8vw, 120px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s12); align-items: center; }
/* Sangrado exacto hasta el borde: el margen negativo es el canal que queda
   fuera del contenedor centrado más su relleno lateral. Calcularlo desde el
   50% de la columna —el truco habitual— aquí se pasa de largo, porque el
   bloque contenedor es la columna de la rejilla, no el contenedor centrado. */
.hero__foto {
  position: relative; height: clamp(360px, 48vw, 620px);
  margin-right: calc(-1 * (max(0px, (100vw - 1240px) / 2) + var(--s8)));
}
.hero .lead { margin-top: var(--s6); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s8); }

/* ---------- banda negra de claims ---------- */
.claims { background: var(--surface-deep); color: var(--ink-on-deep); }
.claims__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); padding: var(--s10) 0; }
.claims__item { font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.claims__item::before { content: ""; display: block; width: 28px; height: 3px; background: var(--rojo); margin-bottom: var(--s4); }

/* Sobre fondo negro el rojo de marca no alcanza contraste: se redefine el
   token dentro del ámbito y todo lo que herede queda corregido de una vez. */
.section--negro, .claims, .footer { --rojo: var(--rojo-en-negro); --rojo-fuerte: var(--rojo-en-negro); }

/* ---------- secciones ---------- */
.section { padding: clamp(56px, 8vw, 128px) 0; }
.section--linea { border-top: 1px solid var(--border); }
.section--negro { background: var(--surface-deep); color: var(--ink-on-deep); }
.section--negro h2, .section--negro h3 { color: var(--ink-on-deep); }
.section--negro .lead, .section--negro p { color: var(--ink-muted-on-deep); }
.section--negro .eyebrow { color: var(--ink-muted-on-deep); }
.section__head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section__head > :first-child { grid-column: 1; }
.section__head :is(h1, h2) { grid-column: 1; max-width: 18ch; }
.section__head .lead { grid-column: 2; grid-row: 2; max-width: 44ch; padding-bottom: .4em; }
.section__head--ancho :is(h1, h2) { max-width: 22ch; }
@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; gap: var(--s6); }
  .section__head .lead { grid-column: 1; grid-row: auto; padding-bottom: 0; }
}

/* ---------- índice de soluciones: filas, no tarjetas ---------- */
.indice { border-top: 1px solid var(--border); }
.indice__fila {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) 2rem;
  gap: var(--s6); align-items: baseline;
  padding: var(--s6) 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .12s ease, padding .12s ease;
}
.indice__fila:hover { background: var(--surface-100); padding-left: var(--s4); padding-right: var(--s4); }
.indice__num { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--rojo-fuerte); letter-spacing: .02em; }
.indice__nombre { font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.indice__prom { font-size: 15px; color: var(--ink-muted); line-height: 1.45; }
.indice__flecha { font-size: 22px; color: var(--rojo-fuerte); justify-self: end; line-height: 1; }
.indice__fila:hover .indice__nombre { color: var(--rojo-fuerte); }

/* ---------- lista numerada con discos rojos ---------- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s8); counter-reset: paso; }
.paso { position: relative; }
.paso::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--brand-fill); color: #fff;
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  margin-bottom: var(--s5);
}
.paso h3 { margin-bottom: var(--s2); }
.paso p { font-size: 15px; color: var(--ink-muted); }
.section--negro .paso p { color: var(--ink-muted-on-deep); }

/* ---------- capacidades: dos columnas de líneas ---------- */
.caps-grid { columns: 2; column-gap: var(--s12); }
.caps-bloque { break-inside: avoid; margin-bottom: var(--s10); }
.caps-bloque h3 { margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 2px solid var(--rojo); display: inline-block; }
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.caps li { font-size: 16px; color: var(--ink-muted); padding-left: var(--s6); position: relative; }
.caps li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: var(--rojo); }

/* ---------- dos columnas de texto con filete ---------- */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.bloque-texto { }
.bloque-texto h3 { margin-bottom: var(--s4); }
.bloque-texto p { color: var(--ink-muted); font-size: 16px; }
.lista-problema { list-style: none; margin: 0; padding: 0; }
.lista-problema li { padding: var(--s5) 0; border-top: 1px solid var(--border); font-size: 17px; line-height: 1.45; }
.lista-problema li:last-child { border-bottom: 1px solid var(--border); }

/* ---------- banda de foto a sangre con puntos de dato ---------- */
.banda { position: relative; }
.banda__foto { height: clamp(300px, 42vw, 560px); }
.banda__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s8); padding: var(--s8) 0 0; }
.dato h4 { color: var(--rojo-fuerte); font-size: 17px; margin-bottom: 2px; }
.dato p { font-size: 15px; color: var(--ink-muted); }
.section--negro .dato p, .section--negro .dato h4 + p { color: var(--ink-muted-on-deep); }

/* ---------- la línea «Ejemplo:» ---------- */
.ejemplo {
  display: flex; align-items: flex-start; gap: var(--s5);
  padding: var(--s6) 0; border-top: 3px solid var(--rojo);
  font-size: clamp(17px, 2vw, 22px); line-height: 1.35;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em;
}
.ejemplo b { color: var(--rojo); font-weight: 800; }
.ejemplo--banda { background: var(--rojo-suave); border-top: 0; padding: var(--s6) var(--s8); }

/* ---------- lista de sectores / relacionados ---------- */
.lista-simple { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.lista-simple li { border-bottom: 1px solid var(--border); }
.lista-simple a, .lista-simple > li > div { display: flex; align-items: baseline; gap: var(--s5); padding: var(--s5) 0; text-decoration: none; color: inherit; }
.lista-simple strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; flex: 0 0 auto; min-width: 12rem; }
.lista-simple span { font-size: 15px; color: var(--ink-muted); }
.lista-simple a:hover strong { color: var(--rojo-fuerte); }

/* ---------- llamada final ---------- */
.cta { background: var(--brand-fill); color: #fff; }
.cta__inner { padding: clamp(56px, 8vw, 112px) 0; display: grid; gap: var(--s8); }
.cta h2 { color: #fff; max-width: 18ch; }
.cta p { color: rgba(255,255,255,.88); max-width: 46ch; font-size: 19px; }
.cta__acciones { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ---------- pie ---------- */
.footer { background: var(--surface-deep); color: var(--ink-muted-on-deep); padding: clamp(48px, 6vw, 88px) 0 var(--s8); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s8); }
.footer h4 { color: var(--ink-on-deep); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s5); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.footer a { color: var(--ink-muted-on-deep); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--rojo); }
.footer .brand__name b { color: var(--ink-on-deep); }
.footer .brand__tag { color: var(--ink-muted-on-deep); }
.footer__brand p { font-size: 15px; margin-top: var(--s5); max-width: 32ch; color: var(--ink-muted-on-deep); }
.footer__bottom { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid rgba(255,255,255,.14); display: flex; gap: var(--s6); flex-wrap: wrap; font-size: 14px; }

/* ---------- arcos de conexión ---------- */
.arcos { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.arcos path { fill: none; stroke: var(--rojo); stroke-width: 1.5; opacity: .75; }
.arcos circle { fill: var(--rojo); }

/* ---------- cifras ---------- */
.cifra { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; line-height: .92; color: var(--rojo); white-space: nowrap; }
.cifra--xl { font-size: clamp(64px, 11vw, 148px); }
.cifra__pie { font-size: 15px; color: var(--ink-muted); max-width: 32ch; margin-top: var(--s5); }
.kpi-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s8); border-top: 1px solid var(--border); }
.kpi { padding: var(--s6) 0 0; }
.kpi__nombre { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.kpi__valor { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.035em; color: var(--rojo); line-height: 1; margin: var(--s3) 0; white-space: nowrap; }
.kpi__desc { display: block; font-size: 14px; color: var(--ink-muted); }
.meter { display: block; width: 100%; height: 6px; margin-bottom: var(--s3); }

/* ---------- gráficas y tabla ---------- */
.grafica { padding: var(--s6) 0; border-top: 1px solid var(--border); }
.grafica h3 { margin-bottom: var(--s1); }
.grafica__sub { font-size: 13px; color: var(--ink-subtle); margin-bottom: var(--s5); }
.g { display: block; width: 100%; height: auto; }
.g path[fill]:hover { opacity: .78; }
.datos { margin-top: var(--s10); }
.datos > summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--rojo-fuerte); padding: var(--s4) 0; list-style: none; }
.datos > summary::-webkit-details-marker { display: none; }
.datos > summary::before { content: "{ "; }
.datos > summary::after { content: " }"; }
.tabla-scroll { overflow-x: auto; }
.cp-table-datos { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 15px; margin-top: var(--s4); }
.cp-table-datos caption { text-align: left; font-size: 14px; color: var(--ink-muted); padding-bottom: var(--s4); }
.cp-table-datos th, .cp-table-datos td { padding: var(--s3) var(--s4); text-align: right; border-bottom: 1px solid var(--border); }
.cp-table-datos thead th, .cp-table-datos tbody th { text-align: left; }
.cp-table-datos thead th { color: var(--ink-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--rojo); }
.cp-table-datos tbody tr:last-child { font-weight: 700; }
.fuente { margin-top: var(--s8); font-size: 14px; color: var(--ink-subtle); max-width: 72ch; }
.crumbs { font-size: 14px; color: var(--ink-muted); margin-bottom: var(--s6); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--rojo-fuerte); }
.art-note { margin-top: var(--s4); font-size: 13px; color: var(--ink-subtle); }

/* ============================================================
   Piezas añadidas con el PDF actualizado (30 diapositivas)
   ============================================================ */

/* Subrayado rojo de título, repetido en varias láminas. */
.con-regla {
  display: inline-block; padding-bottom: var(--s3);
  border-bottom: 2px solid var(--rojo); margin-bottom: var(--s4);
}

/* La frase que remata cada lámina, sobre filete rojo. */
.cierre {
  margin-top: clamp(32px, 4vw, 56px); padding-top: var(--s6);
  border-top: 3px solid var(--rojo);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(19px, 2.2vw, 28px); line-height: 1.25; max-width: 30ch;
}
.section--negro .cierre { color: var(--ink-on-deep); }

/* Tira de cuatro fotos con su paso: «del reporte a la atención». */
.tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.tira figure { margin: 0; min-width: 0; }
.tira__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-200); }
.tira__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tira figcaption { margin-top: var(--s5); padding-top: var(--s5); border-top: 3px solid var(--rojo); }
.tira__paso {
  display: block; font-family: var(--font-display); font-size: 19px;
  font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.tira__paso b { color: var(--rojo); font-weight: 800; margin-right: .35em; }
.tira figcaption p { font-size: 15px; color: var(--ink-muted); margin-top: 2px; }
:root[data-theme="dark"] .tira__img img { filter: brightness(.86) contrast(1.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tira__img img { filter: brightness(.86) contrast(1.04); }
}

/* Página de consultoría: filas alternadas de foto y texto. */
.consul { display: grid; gap: clamp(48px, 7vw, 104px); }
.consul__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.consul__fila--inv { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.consul__fila--inv .consul__foto { order: 2; }
.consul__foto { aspect-ratio: 5 / 4; }
.consul__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.consul__texto .lead { max-width: 38ch; }
.consul__texto > p:last-child { max-width: 52ch; font-size: 16px; }

/* Cuadrantes de la lámina «cómo fortalecer el gobierno abierto». */
.cuadrantes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.cuadrante { border: 1px solid var(--border); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; }
.section--negro .cuadrante { border-color: rgba(255,255,255,.2); }
.section--negro .cuadrante .caps li { color: var(--ink-muted-on-deep); }
.cuadrante__obj {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--border); font-size: 15px;
}
.section--negro .cuadrante__obj { border-top-color: rgba(255,255,255,.2); color: var(--ink-muted-on-deep); }
.cuadrante__obj b { color: var(--rojo); }

/* Ruta de mejora continua y chips de indicadores. */
.ruta-caja { margin-top: var(--s10); padding-top: var(--s6); border-top: 3px solid var(--rojo); }
.ruta-caja__tit {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: 19px; margin-bottom: var(--s5);
}
.section--negro .ruta-caja__tit { color: var(--ink-on-deep); }
.ruta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); list-style: none; margin: 0; padding: 0; }
.ruta li { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.section--negro .ruta li { color: var(--ink-on-deep); }
.ruta li + li::before { content: "\2192"; color: var(--rojo); font-weight: 800; margin-right: var(--s5); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.chips li { border: 1px solid var(--border-strong); padding: var(--s2) var(--s5); font-size: 14px; font-weight: 600; }
.section--negro .chips li { border-color: rgba(255,255,255,.3); color: var(--ink-on-deep); }

/* Aviso de lectura: el descargo que acompaña a las cifras. */
.aviso {
  display: flex; gap: var(--s5); align-items: flex-start;
  margin-top: clamp(32px, 4vw, 56px); padding: var(--s6);
  background: var(--surface-100); border-left: 3px solid var(--rojo);
  font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 76ch;
}
.aviso strong { color: var(--ink); }
.aviso__ico {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--brand-fill); color: #fff; display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1;
}
.fuente a { color: var(--rojo-fuerte); }

@media (max-width: 1000px) {
  .consul__fila, .consul__fila--inv { grid-template-columns: 1fr; gap: var(--s8); }
  .consul__fila--inv .consul__foto { order: 0; }
}
@media (max-width: 900px) {
  .tira { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .cuadrantes { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tira { grid-template-columns: 1fr; }
}

/* ============================================================
   Formulario de contacto
   ============================================================ */
.section--corta { padding: clamp(40px, 5vw, 80px) 0 clamp(24px, 3vw, 40px); }

.form-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 88px); align-items: start;
}
.form-aside { position: sticky; top: 104px; }
.form-aside h2 { margin-bottom: var(--s6); }
.pasos-lista { list-style: none; margin: 0; padding: 0; counter-reset: fa; }
.pasos-lista li {
  counter-increment: fa; position: relative; padding: var(--s5) 0 var(--s5) 44px;
  border-top: 1px solid var(--border); font-size: 15px; color: var(--ink-muted);
}
.pasos-lista li:last-child { border-bottom: 1px solid var(--border); }
.pasos-lista li b { color: var(--ink); }
.pasos-lista li::before {
  content: counter(fa); position: absolute; left: 0; top: var(--s5);
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--brand-fill); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
}
.form-aside__alt { margin-top: var(--s8); font-size: 15px; color: var(--ink-muted); }
.form-aside__alt a { font-weight: 700; }
.form-aside__nota { margin-top: var(--s6); font-size: 14px; color: var(--ink-subtle); max-width: 34ch; }

.form fieldset { border: 0; padding: 0; margin: 0 0 clamp(32px, 4vw, 56px); min-width: 0; }
.form legend {
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; padding: 0 0 var(--s3);
  border-bottom: 2px solid var(--rojo); margin-bottom: var(--s6);
}
.campo { display: grid; gap: var(--s2); margin: 0 0 var(--s6); }
.campo label, .form legend + .campo label { font-size: 14px; font-weight: 700; color: var(--ink); }
.campo .req { color: var(--rojo-fuerte); text-decoration: none; border: 0; font-weight: 800; }
.campo .opc { font-weight: 500; color: var(--ink-subtle); }
.campo__ayuda { font-size: 14px; color: var(--ink-muted); }
.campo__ayuda--suelta { display: block; margin-bottom: var(--s5); max-width: 60ch; }

.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form select, .form textarea {
  font: inherit; font-size: 16px; width: 100%; box-sizing: border-box;
  padding: var(--s4); border: 1px solid var(--border-strong); border-radius: 0;
  background: var(--surface-000); color: var(--ink); line-height: 1.4;
}
.form textarea { resize: vertical; min-height: 9em; }
.form select { appearance: none; padding-right: var(--s10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.form :is(input, select, textarea):hover { border-color: var(--ink-muted); }

.campo--error :is(input, select, textarea) { border-color: var(--danger-ink); border-width: 2px; }
.campo__err { display: none; font-size: 14px; font-weight: 600; color: var(--danger-ink); }
.campo--error .campo__err, .consent.campo--error .campo__err { display: block; }
.campo__err::before { content: "↑ "; }

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3) var(--s8); }
.check { display: flex; align-items: flex-start; gap: var(--s3); font-size: 15px; cursor: pointer; line-height: 1.35; }
.check input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--brand-fill); cursor: pointer;
}
.check:hover span { color: var(--rojo-fuerte); }
.check--consent:hover span { color: inherit; }

.consent { margin-top: var(--s4); padding-top: var(--s6); border-top: 3px solid var(--rojo); }
.check--consent { align-items: flex-start; font-size: 14px; color: var(--ink-muted); max-width: 68ch; }
.check--consent b { color: var(--ink); }

.form__enviar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s8); }
.form__pie { font-size: 14px; color: var(--ink-subtle); }
.form__pie .req { color: var(--rojo-fuerte); font-weight: 800; }
.form button[disabled] { opacity: .6; cursor: progress; }

.form__estado {
  padding: var(--s5) var(--s6); margin: 0 0 var(--s8);
  border-left: 3px solid var(--rojo); background: var(--surface-100);
  font-size: 16px; line-height: 1.45;
}
.form__estado--ok { border-left-color: var(--success-ink); background: var(--success-soft); color: var(--success-ink); }
.form__estado--mal { border-left-color: var(--danger-ink); background: var(--danger-soft); color: var(--danger-ink); }

/* Trampa para robots: fuera de la vista y fuera del orden de tabulación. */
.trampa {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 1000px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-aside { position: static; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero__grid, .duo { grid-template-columns: 1fr; gap: var(--s10); }
  .hero__foto {
    margin-right: calc(-1 * (max(0px, (100vw - 1240px) / 2) + var(--s6)));
    margin-left: calc(-1 * (max(0px, (100vw - 1240px) / 2) + var(--s6)));
    height: clamp(280px, 60vw, 420px);
  }
  .fundido-izq img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 10%, #000 34%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 10%, #000 34%); }
  .caps-grid { columns: 1; }
  .claims__row { grid-template-columns: 1fr; gap: var(--s6); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .indice__fila { grid-template-columns: 3.5rem minmax(0,1fr) 1.5rem; }
  .indice__prom { display: none; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 var(--s6); }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-000); border-bottom: 1px solid var(--border); padding: var(--s4) var(--s6) var(--s6);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
  .nav .btn { margin-top: var(--s4); justify-content: center; }
  .nav-toggle { display: inline-flex; order: 2; margin-left: var(--s2); }
  .theme-toggle { order: 1; margin-left: auto; }
  .nav { order: 4; margin-left: 0; }
  .site-header__bar { position: relative; min-height: 64px; gap: var(--s3); }
  .pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 var(--s5); }
  .brand__tag { display: none; }
  .brand__mark { width: 34px; }
  .pasos { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .lista-simple a, .lista-simple > li > div { flex-direction: column; gap: var(--s2); }
  .lista-simple strong { min-width: 0; }
}
@media print { .site-header, .cta, .nav-toggle, .theme-toggle { display: none; } }