/* =====================================================================
   wpr.css - hoja global del theme WP Rapido (rediseno f19).
   Carga en TODAS las plantillas, siempre primero.

   Orden del archivo:
     1. @font-face (Inter autoalojada)
     2. Tokens del design system (:root, copia literal de tokens.css)
     3. Base y reset
     4. Layout (contenedor, secciones)
     5. Tipografia
     6. Componentes
     7. Estructura del sitio (banda superior, header, footer)

   Fuente de verdad de medidas: _harness/Site/_handoff-design/ESPECIFICACION-H2B.md
   y Dev/design/design-system/DESIGN-SYSTEM.md (seccion MEDIDAS DE LOS COMPONENTES).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Inter autoalojada. Sin Google Fonts.
   --------------------------------------------------------------------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Fallback con metric override: mientras Inter no esta lista (swap), este
   alias fuerza Arial local pero con la caja (ancho/alto de linea) calibrada
   para calzar con Inter, asi el reflow al hacer swap queda en 0-2px.
   Valores calibrados empiricamente en el banco local contra el hero de la
   home (f25-cls). No tocar sin remedir. */
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 400 800; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; }

/* ---------------------------------------------------------------------
   2. Tokens. Copia del bloque :root de Dev/design/design-system/tokens.css.
      Sin el @import de Google Fonts y sin renombrar ningun token.
   --------------------------------------------------------------------- */
:root {
  /* Brand / accent: azul electrico */
  --blue-500: #4f6ef7;
  --blue-600: #3b5de7;
  --navy-900: #1e2a4a;

  /* Neutrals */
  --gray-50:  #f9fafb;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-900: #111827;
  --white:    #ffffff;

  /* Performance-score scale (Lighthouse-aligned) */
  --score-good: #0cce6b;
  --score-avg:  #ffa400;
  --score-poor: #ff4e42;

  /* Semantic aliases */
  --color-accent:        var(--blue-500);
  --color-accent-hover:  var(--blue-600);
  --color-accent-contrast: var(--white);

  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-card:    var(--white);
  --surface-invert:  var(--navy-900);

  --border-subtle:   var(--gray-200);
  --border-strong:   var(--gray-400);

  --text-strong:     var(--gray-900);
  --text-body:       var(--gray-600);
  --text-muted:      var(--gray-400);
  --text-on-invert:  var(--gray-50);
  --text-on-accent:  var(--white);

  --focus-ring:      var(--blue-500);

  /* Agregados H2b */
  --surface-accent-soft: #f0f3ff;
  --text-caption:        #6b7280;

  /* Tipografia */
  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-base: var(--font-sans);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --fs-display: 3.5rem;
  --fs-h1:      2.5rem;
  --fs-h2:      2rem;
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-lg:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.6;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-caps:    0.06em;
  --ls-caps-wide: 0.1em;
  --ls-caps-xwide: 0.12em;

  --fs-display-1: 5.5rem;
  --fs-display-2: 4.5rem;
  --fs-display-3: 3.5rem;
  --fs-display-4: 2.75rem;

  --fs-title-1: 2.25rem;
  --fs-title-2: 1.75rem;
  --fs-title-3: 1.375rem;

  --fs-text-1: 1.125rem;
  --fs-text-2: 1.0625rem;
  --fs-text-3: 0.9375rem;

  --fs-foot-1: 0.8125rem;
  --fs-foot-2: 0.75rem;

  --ls-120: -0.045em;
  --ls-96:  -0.04em;
  --ls-56:  -0.03em;
  --ls-40:  -0.025em;
  --ls-32:  -0.02em;
  --ls-19:  -0.01em;

  --numeric-tabular: tabular-nums;

  /* Spacing (grilla base 4px) */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  --container-max: 1120px;
  --container-pad: 1.5rem;
  --container-pad-wide: 40px;
  --content-max: 1040px;

  /* Radios */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.08);
  --shadow-accent: 0 6px 20px rgba(79, 110, 247, 0.28);

  --shadow-elevated: 0 12px 40px rgba(30, 42, 74, .08);
  --shadow-field: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.05);

  --ring-focus: 0 0 0 3px rgba(79, 110, 247, 0.35);
}

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gray-600);
  background: var(--gray-50);
  font-variant-numeric: var(--numeric-tabular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }

a {
  color: var(--blue-500);
  text-decoration: none;
}
a:hover {
  color: var(--blue-600);
  text-decoration: underline;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

.wpr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------- */
.wpr-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad-wide);
  padding-right: var(--container-pad-wide);
}

.wpr-content {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* El contenido de las secciones no centradas se alinea a la izquierda del
   contenedor: max-width sin margin auto. */
.wpr-content--left { max-width: var(--content-max); }

.wpr-section {
  padding-top: clamp(48px, 6.5vw, 80px);
  padding-bottom: clamp(52px, 7vw, 88px);
}
/* Seccion larga (Que pasa cuando la pagina tarda): 104 / 120 en desktop */
.wpr-section--tall {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(60px, 9vw, 120px);
}
.wpr-section--subtle { background: var(--gray-50); }
.wpr-section--white {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.wpr-section--white-top {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
/* Panel navy: fondo y texto claro. B2 (f27): sin ritmo vertical propio. Los
   88/96 se diferenciaban en 8px del 80/88 de .wpr-section, invisible en
   pantalla y una tercera escala que recordar. Quedan dos: normal y --tall. */
.wpr-section--navy {
  background: var(--navy-900);
  color: var(--gray-50);
}
.wpr-section--navy .wpr-h2,
.wpr-section--navy .wpr-h2--navy { color: var(--white); }

.wpr-center { text-align: center; }

/* ---------------------------------------------------------------------
   5. Tipografia
   --------------------------------------------------------------------- */
.wpr-h1 {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);   /* 36 a 56 */
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-56);
  color: var(--gray-900);
  text-wrap: pretty;
}
.wpr-h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.4vw, 2rem);   /* 24 a 32 */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-32);
  color: var(--gray-900);
  text-wrap: pretty;
}
.wpr-h2--lg {
  font-size: clamp(1.75rem, 1.4rem + 2vw, 2.5rem);   /* 28 a 40 */
  line-height: 1.15;
  letter-spacing: var(--ls-40);
  color: var(--navy-900);
}
/* B1 (f27): el modificador solo cambia el color. Antes subia la escala 2px
   sobre .wpr-h2 (26-34 contra 24-32), diferencia que no se lee como escalon de
   jerarquia y obligaba a mantener una escala mas. Siempre se usa junto a
   .wpr-h2, asi que hereda su font-size. */
.wpr-h2--navy {
  color: var(--white);
}
.wpr-h3 {
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: var(--ls-19);
  color: var(--gray-900);
}
.wpr-h3--lg {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);  /* 22 a 26 */
  line-height: 1.4;
  letter-spacing: var(--ls-32);
  color: var(--navy-900);
  text-wrap: pretty;
}
.wpr-lead {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);   /* 17 a 20 */
  line-height: 1.65;
  color: var(--gray-600);
  text-wrap: pretty;
}
.wpr-p {
  font-size: var(--fs-text-2);   /* 17 */
  line-height: 1.7;
  color: var(--gray-600);
  text-wrap: pretty;
}
.wpr-p--18 { font-size: var(--fs-text-1); }   /* 18 */
.wpr-p--16 { font-size: var(--fs-body); }     /* 16 */
.wpr-small {
  font-size: var(--fs-text-3);   /* 15 */
  line-height: 1.65;
  color: var(--gray-600);
}
.wpr-eyebrow {
  font-size: var(--fs-foot-2);   /* 12 */
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-xwide);
  /* #9ca3af a 12px daba 2,54:1 sobre blanco. --text-caption (#6b7280) da
     4,83:1 sobre blanco y 4,63:1 sobre --surface-subtle: AA en los dos. */
  color: var(--text-caption);
  line-height: 1.4;
}
.wpr-eyebrow--wide { letter-spacing: var(--ls-caps-wide); }
/* Rotulo de 12px que el DS quiere en sentence case (no es un titulo corto tipo
   "Ruta 1" ni un encabezado de columna). Solo apaga las mayusculas. */
.wpr-eyebrow--sentence { text-transform: none; letter-spacing: 0.01em; }
.wpr-foot {
  font-size: var(--fs-foot-2);   /* 12 */
  line-height: 1.65;
  color: var(--text-caption);
}
/* Sobre navy la relacion se invierte: #6b7280 sobre #1e2a4a da 2,92:1 y el gris
   claro da 5,57:1. Ahi se queda --gray-400. */
.wpr-section--navy .wpr-eyebrow,
.wpr-section--navy .wpr-foot,
.panel-navy .wpr-eyebrow,
.panel-navy .wpr-foot {
  color: var(--gray-400);
}
.wpr-num {
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--navy-900);
}
.wpr-num--120 { font-size: clamp(3.5rem, 8.4vw, 7.5rem); letter-spacing: var(--ls-120); }
.wpr-num--96  { font-size: clamp(3.5rem, 6.7vw, 6rem);   letter-spacing: var(--ls-96); }
.wpr-num--56  { font-size: clamp(2rem, 3.9vw, 3.5rem);   letter-spacing: var(--ls-56); }
.wpr-num--48  { font-size: clamp(1.75rem, 3.35vw, 3rem); letter-spacing: var(--ls-56); font-weight: var(--fw-bold); }
.wpr-num--40  { font-size: clamp(1.625rem, 2.8vw, 2.5rem); letter-spacing: var(--ls-56); }

.wpr-muted { color: var(--gray-400); }
.wpr-strong-ink { color: var(--gray-900); }
.wpr-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------
   6. Componentes
   --------------------------------------------------------------------- */

/* Boton primario. Sin sombra: en H2b ningun boton lleva box-shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue-500);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease-out, color .18s ease-out;
}
.btn:hover {
  background: var(--blue-600);
  color: var(--white);
  text-decoration: none;
}
.btn--hero   { height: 52px; padding: 0 24px; font-size: var(--fs-body); }
.btn--header { height: 40px; padding: 0 20px; font-size: var(--fs-text-3); }
.btn[disabled] { opacity: .7; cursor: default; }

/* Enlace de texto (rol secundario) */
.text-link {
  color: var(--blue-500);
  text-decoration: none;
}
.text-link:hover {
  color: var(--blue-600);
  text-decoration: underline;
}
.text-link--strong { font-weight: var(--fw-semibold); }
/* Sobre navy. El azul de acento (#4f6ef7) sobre #1e2a4a da 3,3:1 de contraste,
   bajo el minimo de texto: el enlace invertido sube a un azul claro (6,0:1). */
.text-link--invert { color: #8fa4ff; }
.text-link--invert:hover { color: #b7c4ff; }

/* Tarjeta blanca de borde fino */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
}
/* B3 (f27): cuatro variantes con cuatro paddings que diferian entre si en 2px.
   Se llevan a dos medidas de la escala del sistema: 28/28/32 para las tarjetas
   de texto y 32/40/32 para las de grafico. */
.card--metric { padding: 28px 28px 32px; }
.card--route  { padding: 28px 28px 32px; display: flex; flex-direction: column; }
.card--chart  { padding: 32px 40px 32px; }
.card--chart-tight { padding: 32px 40px 32px; }

/* Tarjeta blanca elevada, sin borde */
.card--elevated {
  border: none;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-elevated);
  padding: clamp(28px, 3.9vw, 56px) clamp(22px, 3.35vw, 48px) clamp(28px, 3.35vw, 48px);
  max-width: var(--content-max);
}
/* Tarjeta con filete de acento a la izquierda. Antes vivia tres veces con tres
   nombres: .svc-ladder, .mig-note y .est-key. */
.card--accent {
  border-left: 3px solid var(--blue-500);
  padding: 28px 30px 30px;
}

/* Tarjeta metrica */
.metric-card__num {
  font-size: clamp(1.75rem, 3.35vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-56);
  color: var(--navy-900);
}
.metric-card__text {
  margin-top: 16px;
  font-size: var(--fs-text-3);
  line-height: 1.6;
  color: var(--gray-600);
}

/* f28 (02-sep-2026): .data-pill (la capsula de dato con icono, con M5 de f27)
   se retira. Su unico uso eran los dos datos de Deloitte en la home, que la V3a
   baja a una linea sobria de numero mas rotulo (.home-data en home.css). Ningun
   otro template la referencia. */

/* Grillas */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Fila de acciones: boton principal mas enlace de texto. Es el mismo patron en
   hero y en cierre de las siete familias. --center la centra. */
.wpr-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.wpr-actions--center { justify-content: center; }

/* FAQ: filas siempre abiertas */
.faq-rows {
  display: flex;
  flex-direction: column;
  max-width: var(--content-max);
}
.faq-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  padding: 26px 0;
  border-top: 1px solid var(--gray-200);
}
.faq-row:last-child { border-bottom: 1px solid var(--gray-200); }
/* f28: en /preguntas-frecuentes/ las filas cuelgan directo del H1, sin la bajada
   que en las otras plantillas separa titulo y filas. */
.faq-rows--page { margin-top: 40px; }
.faq-row__q {
  font-size: var(--fs-text-2);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--gray-900);
}
.faq-row__a {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--gray-600);
}

/* Campo del analizador */
.analyzer {
  width: 820px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-field);
  /* B4 (f27): un solo padding para las dos apariciones del analizador. Antes
     el del hero iba 32/40/30 y el de cierre 36/40/32, y es el mismo
     componente en dos lugares de la misma pagina. */
  padding: 36px clamp(20px, 2.8vw, 40px) 32px;
  box-sizing: border-box;
  text-align: left;
}
.analyzer__lead {
  margin: 0;
  font-size: var(--fs-text-2);
  line-height: 1.7;
  color: var(--gray-600);
  text-wrap: pretty;
}
.analyzer__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.analyzer--inline .analyzer__row { margin-top: 26px; }
.analyzer__input {
  width: 640px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 18px;
  font-size: var(--fs-body);
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  outline: none;
}
.analyzer__input::placeholder { color: var(--gray-400); }
.analyzer__input:focus-visible { box-shadow: var(--ring-focus); border-color: var(--blue-500); }
.analyzer__btn { flex: 1; }
/* B4 (f27): pie a 14px en las dos apariciones (antes 13 en el hero). */
.analyzer__foot {
  margin: 16px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-caption);
}

/* Panel navy de cierre. Va como tarjeta dentro de una seccion clara: a ancho
   completo se fundiria con el footer, que tambien es navy. Antes estaba dos
   veces, como .case-cta y como .blog-cta. */
.panel-navy {
  max-width: var(--content-max);
  padding: 44px clamp(24px, 3.4vw, 48px) 46px;
  background: var(--navy-900);
  border-radius: var(--radius-xl);
  color: var(--gray-50);
}
.panel-navy__title { color: var(--white); }
.panel-navy__text {
  margin-top: 16px;
  max-width: 720px;
  font-size: var(--fs-text-2);
  line-height: 1.7;
  color: var(--gray-200);
}
.panel-navy .wpr-actions { margin-top: 28px; }
.panel-navy.wpr-center .panel-navy__text { margin-left: auto; margin-right: auto; }
/* Nota al pie dentro del panel: mismo rol que .wpr-foot pero sobre navy. */
.panel-navy__foot {
  margin-top: 24px;
  font-size: var(--fs-text-3);
  line-height: 1.6;
  color: var(--gray-400);
}

/* Retrato circular. --48 en la banda de garantia de la home, --240 en Quien esta
   detras. --96 queda sin uso desde f28 (02-sep-2026), se conserva como escala. */
.portrait {
  flex: none;
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-pill);
}
.portrait--48  { width: 48px;  height: 48px; }
.portrait--96  { width: 96px;  height: 96px; }
.portrait--240 { width: 240px; height: 240px; }

/* Tabla de datos sobria. Cabecera de 12 en mayusculas #9ca3af, filas separadas
   por un filete #e5e7eb y cifras tabulares a la derecha con .num.
   .wpr-table--nums alinea a la derecha todas las columnas menos la primera. */
.wpr-tablewrap {
  max-width: var(--content-max);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow-x: auto;
}
.wpr-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.wpr-table th,
.wpr-table td {
  text-align: left;
  padding: 14px 20px;
  font-size: var(--fs-text-3);
  line-height: 1.55;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.wpr-table thead th {
  background: var(--gray-50);
  color: var(--text-caption);
  font-size: var(--fs-foot-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-wide);
}
.wpr-table tbody th {
  font-weight: var(--fw-semibold);
  color: var(--gray-900);
}
.wpr-table tbody tr:last-child th,
.wpr-table tbody tr:last-child td { border-bottom: none; }
.wpr-table strong { color: var(--gray-900); font-weight: var(--fw-bold); }
.wpr-table .num,
.wpr-table--nums th + th,
.wpr-table--nums td + td {
  text-align: right;
  font-variant-numeric: var(--numeric-tabular);
}

/* Graficos */
.chart { max-width: var(--content-max); }
.chart svg { display: block; width: 100%; height: auto; }
/* Grafico ancho que no cabe legible en pantalla chica: en vez de encogerlo
   hasta que la cifra sea ilegible, se desplaza dentro de su caja. El scroll
   solo aparece cuando el ancho util baja de los 640 del SVG, o sea a partir de
   unos 688px de viewport. */
.chart--scroll { max-width: 100%; }
/* A3 (f27): el grafico compacto antes/despues tiene viewBox 600 y en 390 se
   renderiza en 296-342px, o sea escala 0,49: sus rotulos de 13-15px caian a
   6,4px efectivos. Mismo tratamiento que .home-dist__chart-mobile y
   .home-ev__chart-mobile: SVG alterno con viewBox del ancho real. */
svg.chart-compact__mobile { display: none; }
.chart-foot {
  margin-top: 20px;
  font-size: var(--fs-foot-2);
  line-height: 1.65;
  /* Siempre acompana a .wpr-foot: mismo rol, mismo gris AA. */
  color: var(--text-caption);
}

/* ---------------------------------------------------------------------
   7. Estructura del sitio
   --------------------------------------------------------------------- */

/* Banda superior */
.topbar { background: var(--navy-900); }
.topbar__inner {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__text {
  font-size: var(--fs-foot-1);
  line-height: 1.3;
  color: var(--white);
}
.topbar__link {
  font-size: var(--fs-foot-1);
  font-weight: var(--fw-semibold);
  color: var(--white);
  white-space: nowrap;
}
.topbar__link:hover { color: var(--white); text-decoration: underline; }

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.site-header__inner {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  font-size: 19px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-32);
  color: var(--navy-900);
  text-decoration: none;
}
.site-header__brand:hover { color: var(--navy-900); text-decoration: none; }
.site-header__brand img {
  display: block;
  height: 22px;
  width: auto;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header__link {
  font-size: var(--fs-text-3);
  color: var(--gray-600);
  text-decoration: none;
}
.site-header__link:hover { color: var(--blue-500); text-decoration: none; }
.site-header__link[aria-current="page"] {
  color: var(--gray-900);
  font-weight: var(--fw-semibold);
}
.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.site-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.site-header__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger.active span:nth-child(2) { opacity: 0; }
.site-header__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* landing.js agrega esta clase al pasar los 10px de scroll */
.header--scrolled { box-shadow: 0 1px 3px rgba(17, 24, 39, .06); }

/* Footer */
.site-footer {
  background: var(--navy-900);
  color: var(--gray-200);
}
.site-footer__inner {
  padding-top: 72px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.site-footer__title {
  font-size: var(--fs-foot-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-xwide);
  color: var(--gray-400);
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.site-footer__links a {
  font-size: var(--fs-text-3);
  line-height: 1.3;
  color: var(--gray-200);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--white); text-decoration: underline; }
.site-footer__note {
  font-size: var(--fs-text-3);
  line-height: 1.3;
  color: var(--gray-400);
}
.site-footer__bottom {
  padding-top: 24px;
  padding-bottom: 56px;
  border-top: 1px solid rgba(229, 231, 235, 0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer__bottom span {
  font-size: var(--fs-foot-1);
  line-height: 1.3;
  color: var(--gray-400);
}

/* ---------------------------------------------------------------------
   8. Responsive
   H2b esta trazada a 1440px fijos. Los cortes se definieron aca:
   1024 = grillas de 3 a 2, 900 = hamburguesa y footer a 2, 768 = FAQ y
   grillas de 2 a 1, 640 = analizador apilado, 480 = todo a 1 columna.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .faq-row { grid-template-columns: 280px 1fr; gap: 32px; }
}

/* M9 (f27): en el tramo de dos columnas, una .grid-3 con un numero impar de
   tarjetas deja la ultima sola y una celda vacia a su derecha (348x152 en
   Google Ads, 348x200 en casos, 348x249 en rutas). Si el ultimo hijo es impar,
   ocupa el ancho completo. Con numero par la regla no hace nada.
   El tramo de dos columnas de este theme es 641-1024, no 900 como proponia el
   informe: mismo criterio, acotado al breakpoint real de .grid-3. */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .site-header__burger { display: flex; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px var(--container-pad-wide) 24px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 12px 24px rgba(17, 24, 39, .07);
  }
  .site-header__nav.open { display: flex; }
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

@media (max-width: 768px) {
  .wpr-container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .grid-2 { grid-template-columns: 1fr; }
  .faq-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .site-header__nav { padding-left: 24px; padding-right: 24px; }
  .card--chart, .card--chart-tight { padding: 24px 22px 22px; }
  .card--accent { padding: 24px 22px 26px; }
  .panel-navy { padding: 30px 24px 32px; }
  /* Pista visual: la barra de desplazamiento queda siempre a la vista bajo el
     grafico, para que se lea que hay contenido a la derecha. */
  .chart--scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--gray-200);
  }
  .chart--scroll::-webkit-scrollbar { height: 6px; }
  .chart--scroll::-webkit-scrollbar-track { background: var(--gray-200); border-radius: var(--radius-pill); }
  .chart--scroll::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: var(--radius-pill); }
  .chart--scroll svg { min-width: 640px; }
}

@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .portrait--240 { width: 180px; height: 180px; }
  /* B4: mismo padding para las dos apariciones tambien en movil. */
  .analyzer { padding: 26px 20px 24px; }
  .analyzer__row { flex-wrap: wrap; }
  .analyzer__input { width: 100%; flex: 1 1 100%; }
  .analyzer__btn { flex: 1 1 100%; }
  .topbar__inner {
    height: auto;
    flex-wrap: wrap;
    /* B6 (f27): con 6px el enlace se leia como cuarta linea del parrafo. */
    gap: var(--space-3);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topbar__text, .topbar__link { font-size: var(--fs-foot-2); }
  .site-footer__bottom { padding-bottom: 40px; }
}

@media (max-width: 560px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  /* A3: version de viewBox 300 del grafico compacto antes/despues. */
  svg.chart-compact__desktop { display: none; }
  svg.chart-compact__mobile { display: block; }
  .wpr-table th, .wpr-table td { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}