/* =====================================================================
   home.css - lo especifico de la home H2b. Depende de wpr.css (tokens,
   tipografia y componentes). Se carga solo en is_front_page().

   Regla: nada de CSS inline por elemento en la plantilla. Todo lo que en el
   handoff iba en `style="..."` de una sola seccion vive aca.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.home-hero__title {
  max-width: 940px;
  margin: 0 auto;
}
/* M6 (f27): 820 en vez de 720. El hero apilaba cuatro medidas distintas
   (940 / 720 / 820 / 1040) sin que ningun par compartiera borde. Con la bajada
   a 820 comparte riel con el analizador y el hero baja a tres medidas. */
.home-hero__lead {
  max-width: 820px;
  margin: 28px auto 0;
}
.home-hero__analyzer { margin-top: 40px; }

/* Waffle de 100 celdas (B4): reemplaza la barra tricolor. Cada celda es 1%
   del universo medido, mismos tokens de color del semaforo, sin degradados
   ni animacion. Ref.: _tmp/mejoras-graficos-2026-09-01/index.html#b-ronda2. */
.home-dist {
  width: var(--content-max);
  max-width: 100%;
  /* B8 (f27): el gap analizador-waffle era fijo en 56px y a 390 superaba el
     padding de la seccion (48px), o sea separaba mas por dentro que por fuera.
     Ahora escala igual que el padding. */
  margin: clamp(40px, 3.9vw, 56px) auto 0;
  text-align: left;
}
.home-dist__head {
  font-size: 15px;
  color: var(--gray-600);
  margin-bottom: 20px;
}
/* M8 (f27): parte espacial. La letra chica corria a 1040 (unos 145 caracteres
   por linea, el bloque de 12px mas largo de la home). A 820 queda en la medida
   del analizador y baja a unos 115 caracteres. */
.home-dist__foot {
  margin-top: 30px;
  max-width: 820px;
}

/* Dos SVG: 25 columnas por 4 filas en 1040 (chart-desktop), 20 por 5 en 390
   (chart-mobile), porque bajo 13px la celda deja de ser contable. Selector
   svg.clase para igualar la especificidad de ".chart svg" (wpr.css) y ganar
   por orden de carga (home.css se encola despues), mismo criterio que
   home-ev__chart-mobile. */
svg.home-dist__chart-mobile { display: none; }

/* A3 (f27): el grafico de barras del estudio tiene viewBox 700 y a 390 se
   renderiza en 342, o sea escala 0,49: sus rotulos de 12px caian a 5,9px
   efectivos. Version alterna con viewBox del ancho real (342) y barras
   horizontales, que es lo unico que deja caber diez rotulos de tramo legibles
   en esa medida. Mismo patron de conmutacion que el waffle y la curva. */
svg.home-study__chart-mobile { display: none; }

/* ---------------------------------------------------------------------
   Que pasa cuando la pagina tarda
   --------------------------------------------------------------------- */
.home-consequences__title { max-width: 860px; }

/* Bloque de icono + parrafo */
.home-note {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.home-note__icon { flex: none; }
/* f28 (02-sep-2026): .home-note--first se retira con la nota del celular ("En
   celular la espera se hace mas larga..."), podada del copy. Era su unico uso.
   Queda .home-note--last, la nota del buscador. */
/* A1 (f27): el bloque tiene tres hijos (icono, parrafo y pie) y con flex el
   pie se repartia el ancho como tercera columna: 186,5px a 1440 y 87,9px a
   390, contra los pies del resto de la home que van bajo su bloque a ancho
   completo. Con grilla de dos columnas el pie baja a la segunda. */
.home-note--last {
  margin-top: clamp(44px, 5vw, 72px);
  max-width: 920px;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 22px;
  align-items: start;
}
.home-note--last .wpr-foot {
  grid-column: 2;
  margin-top: var(--space-4);
}

/* f28 (02-sep-2026): las tres tarjetas blancas apiladas (.home-curve-card, la
   elevada del +123% en .home-bounce-card y las capsulas .home-pills) se retiran
   con la V3a aprobada. Todo lo que decian vive ahora en la banda navy de abajo
   y en la linea de datos que la sigue. Sus SVG alternos se van con ellas.

   ---------------------------------------------------------------------
   Banda de evidencia (f28, V3a aprobada)

   Una sola superficie navy a sangre dentro de una seccion blanca: el +123% es
   el unico protagonista y la curva de conversion baja a trazo de apoyo (sin
   area, sin trama, sin rotulos de valor). La banda sangra a todo el ancho de
   la ventana y su contenido corre por .wpr-container, o sea que queda a plomo
   con el H2 y con la linea de datos: mismo riel de 1040 (--content-max) que el
   resto de la home.

   En escritorio son dos columnas (cifra a la izquierda, curva a la derecha) mas
   una fila de fuentes al pie. Bajo 1025 la banda pasa a columna unica con el
   orden de lectura movil aprobado: los tres envoltorios se disuelven con
   display:contents y el orden lo fija `order` pieza por pieza, para no repetir
   ningun texto en el DOM.
   --------------------------------------------------------------------- */
.home-ev {
  background: var(--navy-900);
  margin-top: clamp(34px, 1.52rem + 2.47vw, 52px);
}
.home-ev__in {
  padding-top: clamp(36px, 1.45rem + 3.29vw, 60px);
  padding-bottom: clamp(34px, 1.72rem + 1.64vw, 46px);
}
.home-ev__grid {
  display: grid;
  /* 470 es el ancho para el que esta dibujado el trazo de apoyo y el que deja
     514 a la izquierda sobre el riel de 1040, o sea la maqueta aprobada. Bajo
     1120 el contenedor deja de medir 1040 pero la cifra sigue creciendo con el
     viewport, asi que la columna de la curva cede en la misma proporcion
     (470/1120 = 42vw) para que el +123% no se coma el gutter: a 1025 mide 422
     contra 458 de columna. minmax(0,1fr): la cifra va en nowrap y sin esto su
     ancho minimo empujaria la grilla mas alla del contenedor. */
  grid-template-columns: minmax(0, 1fr) clamp(400px, 42vw, 470px);
  column-gap: 56px;
  align-items: center;
}
/* La cifra no entra en la escala .wpr-num--* : va de 74 (390) a 132 (>=1120),
   sobre los 56-120 de --120. La recta pasa por los dos extremos aprobados en
   la maqueta y topa justo donde el contenido deja de crecer (1120). */
.home-ev__big {
  font-size: clamp(4.625rem, 2.69rem + 7.95vw, 8.25rem);
  letter-spacing: var(--ls-120);
  color: var(--white);
  white-space: nowrap;
}
.home-ev__claim {
  margin-top: 16px;
  max-width: 460px;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);   /* 17 a 20 */
  line-height: 1.6;
  color: var(--white);
  text-wrap: pretty;
}
.home-ev__btext {
  margin-top: 14px;
  max-width: 460px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-400);
  text-wrap: pretty;
}
/* El reloj solo aparece en la pila: en escritorio la banda ya tiene un unico
   foco y el icono competiria con la cifra. */
.home-ev__icon { display: none; }
/* Sigue siendo el h3 de la curva (mismo texto y mismo rol en el esquema de
   encabezados), pero en escritorio se lee como pie de apoyo al costado del
   trazo, no como titular. */
.home-ev__sup-title {
  max-width: 440px;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--gray-400);
  text-wrap: pretty;
}
.home-ev__chart { margin-top: 14px; }
/* Mismo patron de conmutacion que el waffle y el grafico del estudio: el SVG
   de 470 no baja legible a 342, asi que a 480 entra el alterno con viewBox del
   ancho real. Selector svg.clase para igualar la especificidad de ".chart svg"
   (wpr.css) y ganar por orden de carga. */
svg.home-ev__chart-mobile { display: none; }
.home-ev__sup-note {
  margin-top: 8px;
  font-size: var(--fs-foot-1);   /* 13 */
  line-height: 1.55;
  color: var(--gray-400);
}
.home-ev__srcs {
  grid-column: 1 / -1;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
/* 11px: son dos pies en fila bajo un filete, no el pie unico de un bloque. */
.home-ev__src {
  font-size: 11px;
  color: var(--gray-400);
}

/* Datos menores de Deloitte, ya fuera de la banda: cifra y rotulo en una linea
   sobria separada por filetes, sin capsulas ni barras. */
.home-data {
  margin-top: clamp(28px, 1.35rem + 1.64vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.home-data__item,
.home-data__cap {
  padding-left: 26px;
  border-left: 1px solid var(--gray-200);
}
.home-data__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 26px;
}
.home-data__item:first-child {
  padding-left: 0;
  border-left: none;
}
.home-data__num {
  font-size: 22px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-40);
  color: var(--navy-900);
}
.home-data__label {
  font-size: var(--fs-body);
  color: var(--gray-600);
}
.home-data__cap {
  font-size: var(--fs-text-3);
  color: var(--text-caption);
}
.home-data__foot {
  margin-top: 14px;
  max-width: 920px;
}

/* ---------------------------------------------------------------------
   Estudio Chile (panel navy)
   --------------------------------------------------------------------- */
.home-study__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: var(--content-max);
  margin-top: 22px;
}
.home-study__intro p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--gray-400);
  text-wrap: pretty;
}
.home-study__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  margin-top: 48px;
  max-width: var(--content-max);
  align-items: center;
}
.home-study__big {
  color: var(--score-good);
}
.home-study__big-label {
  margin-top: 18px;
  font-size: var(--fs-text-1);
  line-height: 1.6;
  color: var(--white);
  text-wrap: pretty;
}
.home-study__foot {
  margin-top: 28px;
  max-width: var(--content-max);
}
.home-study__link {
  margin-top: 32px;
  font-size: var(--fs-body);
}

/* ---------------------------------------------------------------------
   Google Ads
   --------------------------------------------------------------------- */
/* B5 (f27): 760 en vez de 860. Era la unica medida de cuerpo larga de la home
   que corria a 105 caracteres por linea; 760 la deja igual que la de casos. */
.home-ads__lead {
  margin-top: 24px;
  max-width: 760px;
}
.home-ads__lead + .home-ads__lead { margin-top: 18px; }
.home-ads__cards {
  margin-top: 40px;
  max-width: var(--content-max);
}
/* M2 (f27): "15 segundos" no cabe en una linea en la tarjeta de 276,7px y
   descolgaba 48px la bajada de la tarjeta central. Reservar dos lineas para la
   cifra (line-height:1, asi que 2em = dos lineas exactas) alinea las tres.
   Acotado al tramo de tres columnas: bajo 1025px la grilla cae a dos o una
   columna, el clamp baja la cifra a 28px, cabe en una linea en las tres y
   reservar la segunda solo agregaria aire muerto. */
@media (min-width: 1025px) {
  .home-ads__cards .metric-card__num { min-height: 2em; }
}
.home-ads__foot {
  margin-top: 20px;
  max-width: var(--content-max);
}
.home-ads__link {
  margin-top: 26px;
  font-size: var(--fs-body);
}

/* ---------------------------------------------------------------------
   Casos
   --------------------------------------------------------------------- */
.home-cases__lead {
  margin-top: 24px;
  max-width: 760px;
}
/* f28 (02-sep-2026): .home-cases__chart, .home-cases__lcp y .home-cases__lcp-chart
   se retiran con los dos graficos que la portada dejo de mostrar (M4 de f27 vivia
   aca). Eran envoltorios propios de la home: el CSS de los graficos en si (.chart,
   .chart-compact__*) vive en wpr.css y lo siguen usando /casos/ y las fichas. */
.home-cases__grid {
  margin-top: 40px;
  max-width: var(--content-max);
}
.home-case__desc { margin-top: 14px; }
.home-case__result {
  margin-top: 10px;
  font-size: var(--fs-text-3);
  line-height: 1.6;
  font-weight: var(--fw-medium);
  color: var(--gray-900);
}
/* M3 (f27): las tres fichas miden lo mismo porque la grilla las estira, pero
   el enlace de la primera caia 48,7px mas abajo que los otros dos. Mismo
   mecanismo que ya usa .home-route__link en la seccion de rutas. */
.home-cases__grid .card--metric {
  display: flex;
  flex-direction: column;
}
.home-case__link {
  margin-top: auto;
  padding-top: 18px;
  font-size: var(--fs-text-3);
}
/* f28: el pie de la seccion queda solo con el enlace al indice. */
.home-cases__foot {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
  max-width: var(--content-max);
}

/* ---------------------------------------------------------------------
   Rutas
   --------------------------------------------------------------------- */
.home-routes__lead { margin-top: 24px; }
/* A2 (f27): cinco tarjetas en una grilla de tres columnas dejaban una celda
   vacia de 330,7x248,7 a 1440 y de 348x248,7 a 768, que el ojo lee como
   contenido que no cargo. Grilla de seis columnas: las tres primeras ocupan
   dos (mismo ancho que hoy) y las dos ultimas ocupan tres, asi la fila 2 llena
   el ancho. Las rutas ya no usan los breakpoints de .grid-3, asi que este
   bloque cubre los tres tramos (1024 y 640 son los cortes de .grid-3). */
.home-routes__grid {
  margin-top: 40px;
  max-width: var(--content-max);
  grid-template-columns: repeat(6, 1fr);
}
.home-routes__grid > * { grid-column: span 2; }
.home-routes__grid > *:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1024px) {
  .home-routes__grid { grid-template-columns: repeat(2, 1fr); }
  .home-routes__grid > *,
  .home-routes__grid > *:nth-child(n+4) { grid-column: auto; }
  .home-routes__grid > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .home-routes__grid { grid-template-columns: 1fr; }
  .home-routes__grid > *:last-child { grid-column: auto; }
}
.home-route__title { margin-top: 12px; }
.home-route__text {
  margin-top: 14px;
  font-size: var(--fs-text-3);
  line-height: 1.65;
  color: var(--gray-600);
}
.home-route__link {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: var(--fs-text-3);
  word-break: break-word;
}

/* ---------------------------------------------------------------------
   Garantia
   --------------------------------------------------------------------- */
/* f28 (02-sep-2026): la banda de dos columnas (garantia + bajada de quien esta
   detras) se reduce a una sola columna con la garantia en dos frases y el enlace
   a /quien-esta-detras/. Con esto cae la grilla asimetrica de A4 (f27) y la
   subgrilla de 96px que colocaba el retrato en la fila del H2. */
.home-guarantee__text {
  margin-top: 24px;
  max-width: 760px;
}
/* El retrato baja a 48 y se pone en linea con el enlace: la fila del link ya
   media ~26px, asi que el costo real de mantener la cara son 22px. */
.home-about__link {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  font-size: var(--fs-body);
}

/* ---------------------------------------------------------------------
   Parte midiendo
   --------------------------------------------------------------------- */
.home-measure__analyzer { margin-top: 32px; }

/* ---------------------------------------------------------------------
   Cierre: enlace a preguntas frecuentes
   --------------------------------------------------------------------- */
/* f28 (02-sep-2026): la FAQ desplegada se fue a /preguntas-frecuentes/. Queda una
   banda de una linea, con el ritmo vertical recortado a la mitad de .wpr-section:
   una sola linea no justifica los 80/88 de una seccion de contenido. */
.home-faqlink {
  padding-top: clamp(28px, 3vw, 36px);
  padding-bottom: clamp(28px, 3vw, 36px);
}
.home-faqlink__line { font-size: var(--fs-body); }

/* ---------------------------------------------------------------------
   Responsive de la home
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-study__grid { grid-template-columns: 1fr 220px; gap: 32px; }

  /* f28: la banda pasa a la pila movil aprobada. El corte es 1024 y no 900
     porque la columna izquierda tiene que seguir cabiendo la cifra en una
     linea: a 1025 mide 419px contra los ~395 que ocupa el +123% de 124px, y
     bajo eso el margen se acaba. */
  .home-ev__main,
  .home-ev__aside,
  .home-ev__srcs { display: contents; }
  .home-ev__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    align-items: start;
  }
  .home-ev__icon { display: block; order: 1; }
  /* La medida sube de 440/460 a 640: en la pila el texto ya no compite con la
     curva al lado, pero a 1024 sin tope correria a mas de 120 caracteres por
     linea. A 390 el tope es inerte (el ancho util son 342). */
  .home-ev__sup-title {
    order: 2;
    margin-top: 18px;
    max-width: 640px;
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);   /* 22 a 26 */
    font-weight: var(--fw-bold);
    line-height: 1.4;
    letter-spacing: var(--ls-32);
    color: var(--white);
  }
  .home-ev__sup-note {
    order: 3;
    margin-top: 10px;
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);   /* 17 a 20 */
    line-height: 1.65;
    color: var(--text-on-invert);
  }
  .home-ev__big { order: 4; margin-top: 26px; }
  .home-ev__claim { order: 5; max-width: 640px; }
  .home-ev__btext {
    order: 6;
    max-width: 640px;
    color: var(--text-on-invert);
  }
  .home-ev__src--google { order: 7; margin-top: 16px; }
  /* El trazo de apoyo esta dibujado para 470: estirado a 720 pasa a ser el
     objeto mas grande de la banda, justo lo contrario de lo que la V3a busca.
     Bajo 480 el SVG alterno entra con su propio ancho (342) y este tope no
     alcanza a actuar. */
  .home-ev__chart { order: 8; margin-top: 26px; max-width: 470px; }
  .home-ev__src--portent { order: 9; margin-top: 18px; }
  /* Sin filete ni fila: cada pie vuelve al tamano de pie del sistema. */
  .home-ev__src { font-size: var(--fs-foot-2); }

  .home-data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-data__item,
  .home-data__cap {
    padding: 0;
    border-left: none;
  }
}

@media (max-width: 900px) {
  /* f28: .home-guarantee sale de esta regla, ya no es grilla. */
  .home-study__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-study__intro { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 768px) {
  .home-note { gap: 14px; }
  /* A1: el gap del icono baja a 14, pero entre parrafo y pie manda el
     margin-top del pie, no el row-gap de la grilla. */
  .home-note--last { column-gap: 14px; row-gap: 0; }
  .home-cases__foot { gap: 12px; }
  /* M7 (f27): a 390 la bajada corre 8 lineas centradas, con cada linea
     arrancando en una x distinta. Titulo y analizador siguen centrados. */
  .home-hero__lead { text-align: left; }
}

@media (max-width: 480px) {
  .home-dist__head { font-size: 13px; margin-bottom: 16px; }
  svg.home-dist__chart-desktop { display: none; }
  svg.home-dist__chart-mobile { display: block; }
  svg.home-ev__chart-desktop { display: none; }
  svg.home-ev__chart-mobile { display: block; }
  svg.home-study__chart-desktop { display: none; }
  svg.home-study__chart-mobile { display: block; }
}