/* ============================================================
   diagnostico-fiscal.css — reglas propias de /diagnostico-fiscal/
   (11/08/2026, 4ta pasada: calibracion de fondos y composicion).

   Se enlaza SOLO desde /diagnostico-fiscal/, despues de
   ez-design-system-v2.purged.css. Todo va scoped bajo
   .ez-diagnostico-page: no define utilidades globales ni toca
   ninguna otra pagina.

   ------------------------------------------------------------
   QUE SE CORRIGE EN ESTA PASADA

   La pasada anterior dejo el contenido y la parte tecnica bien,
   pero resolvia TODA la pagina con el mismo recurso: una raya.
   Enumeradas en el DOM a 1440px habia 30 marcas horizontales:
   5 subrayados de H2, 3 arriba de las columnas de "que recibis",
   2 filetes de cierre de seccion, 5 guiones de lista, la linea del
   proceso, 2 arriba de las columnas de "alcance", 3 arriba de las
   FAQ, 3 bajo las cifras de la franja de confianza, el borde
   inferior de la franja, el borde superior del CTA, el acento del
   H2 del CTA, el guion del eyebrow del hero, el divisor del hero y
   el borde inferior de la miga de pan. Cada uno era defendible;
   juntos daban una planilla.

   Quedan CUATRO, contadas con el mismo metodo:
     - el divisor del hero (el unico extenso del cuerpo);
     - el acento corto bajo el H2 del CTA, que dibuja el sistema
       (`.ez-cta-light h2::after`) y es el unico subrayado
       decorativo que queda;
     - el guion de 48px del eyebrow del hero, que es parte del hero
       aprobado y el encargo pidio conservar;
     - el borde inferior de la miga de pan, que NO se toca a
       proposito: es chrome compartido por las 37 paginas del sitio
       y anularlo solo aca las desalinearia. Queda anotado en la
       entrega para que se decida a nivel sistema, no aca.

   La jerarquia pasa a construirse con lo que manda
   docs/diseno/TARGET_DESIGN_SYSTEM.md — "espacio antes que bordes",
   "editorial antes que modular", "columnas y lineas verticales
   inspiradas en registros contables":

     - composicion asimetrica 30/70 en tres secciones y encabezado
       corrido en las otras dos, para que no haya dos secciones que
       se lean igual;
     - acentos VERTICALES dorados (la barra de 3px de cada
       entregable, la del panel de condiciones) en vez de filetes
       horizontales;
     - paneles resueltos por fondo y padding, sin borde ni sombra.

   ------------------------------------------------------------
   QUE SE CORRIGE EN LA 4TA PASADA: EL PIJAMA

   La 3ra pasada saco las rayas pero las reemplazo por otra
   regularidad: un fondo distinto por seccion, a todo el ancho,
   alternando blanco y azul palido seis veces seguidas. Visto de
   lejos la pagina era un pijama de franjas horizontales.

   El sistema nuevo tiene UNA base y DOS superficies:

     --ez-base (#f7fafc)  el papel del cuerpo editorial. Corre
                          continuo por "que recibis", "cuando
                          conviene", "alcance", la FAQ y el cierre.
     --ez-mist (#eaf1f6)  el azul niebla. Es la superficie INTERNA
                          (panel de entregables, hoja de decision,
                          panel de condiciones, fichas de la FAQ) y
                          UNA sola vez ocupa el ancho completo, en
                          "como funciona", que es el capitulo de la
                          pagina.
     --ez-deep (#dce7f1)  un punto mas profundo que la niebla. Solo
                          en el pie de la hoja de decision, para que
                          la salida alternativa se lea como pie de
                          esa pieza y no como un bloque suelto.

   O sea: la diferencia entre secciones contiguas ya no la hace el
   color del fondo —lo hacen la composicion, la superficie interna
   y el aire—. El unico corte cromatico intencional del cuerpo es
   la franja de "como funciona", y "alcance y honorario" sale de
   ella con una transicion ancha (`--tras-capitulo`) en vez de un
   corte inmediato.

   ------------------------------------------------------------
   Lo que NO se usa a proposito:
   - .ez-reveal: pone opacity 0 y solo la devuelve el JS. El
     encargo exige contenido visible aunque el JS falle.
   - .ez-faq-item / details: la FAQ son tres preguntas visibles,
     sin acordeon y sin el signo "+" del summary.
   - `.ez-eyebrow` del sistema para los rotulos de seccion: es una
     pildora (borde + fondo + radio). Cinco pildoras seguidas es el
     anti-patron "exceso de pildoras" del documento de direccion.
     Los rotulos de cuerpo usan `.ez-ed-eyebrow`, texto pelado.
   ============================================================ */

.ez-diagnostico-page {
  --ez-base: #f7fafc;   /* papel continuo del cuerpo editorial */
  --ez-mist: #eaf1f6;   /* azul niebla: superficie interna y el unico capitulo */
  --ez-deep: #dce7f1;   /* un punto mas profundo: pie de la hoja de decision */
  --ez-hair: #dbe4ee;   /* divisor vertical, mas suave que --gray-200 */

  /* Mismo eje que /servicios/. Hasta ~1538px se comporta como
     1200px; por encima acompana la pantalla hasta 1440. Se declara
     sobre el <main> para que lo hereden TODOS los contenedores del
     sistema (miga de pan, hero, franja, secciones y CTA), que ya
     leen `var(--max-w)`. */
  --max-w: clamp(1200px, 78vw, 1440px);
}

/* ------------------------------------------------------------
   HERO — sin cambios de estructura
   ------------------------------------------------------------
   El hero de base centra todo en 720px. Aca se abre al eje de la
   pagina y se compone en dos renglones: el titular ocupa el ancho
   y, debajo del divisor, la bajada y los botones se reparten la
   linea. Es el unico filete horizontal extenso que queda en pie.

   El alto minimo de 550px del hero NO se toca: el sistema lo fija
   para que la franja de confianza arranque en el mismo pixel en
   /sobre-estudio/ y /ubicaciones/.
   ------------------------------------------------------------ */
.ez-diagnostico-page .ez-page-hero__inner {
  width: min(1120px, calc(100% - var(--side) * 2));
  max-width: none;
  text-align: left;
}

.ez-diagnostico-page .ez-page-hero .ez-eyebrow {
  text-align: left;
  margin-bottom: var(--sp-5);
}

.ez-diagnostico-page .ez-page-hero .ez-eyebrow::after {
  margin: var(--sp-3) 0 0;
}

.ez-diagnostico-page .ez-page-hero h1 {
  margin-inline: 0;
  margin-bottom: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
}

.ez-diagnostico-page .ez-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* `center` y no `end`: con la bajada en dos renglones y los
     botones en uno, alinear por la base dejaba el bloque de texto
     colgado medio renglon mas arriba del eje de los botones. */
  align-items: center;
  gap: var(--sp-8) var(--sp-10);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ez-diagnostico-page .ez-page-hero__sub {
  margin: 0;
  max-width: 54ch;
  text-align: left;
}

.ez-diagnostico-page .ez-page-hero__actions {
  margin: 0;
  justify-content: flex-start;
}

/* Boton principal sobre fondo oscuro y sobre fondo claro: dorado
   con texto azul profundo. En navy sobre navy quedaba a 1,3:1 del
   fondo y solo se distinguia por el borde. Sin sombra: la
   direccion no lleva sombras pesadas. */
.ez-diagnostico-page .ez-page-hero .ez-btn--primary,
.ez-diagnostico-page .ez-closing-cta .ez-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #061d36;
  box-shadow: none;
}

.ez-diagnostico-page .ez-page-hero .ez-btn--primary:hover,
.ez-diagnostico-page .ez-closing-cta .ez-btn--primary:hover {
  background: #d6ba78;
  border-color: #d6ba78;
  color: #061d36;
}

/* A 1024 el titular se reviso y se deja como esta: con `max-width:
   20ch` entra en dos renglones parejos ("Diagnostico fiscal para" /
   "decidir con claridad."). Se probo bajarlo a 16ch y empeora — lo
   parte en tres renglones cortos contra un hueco grande a la
   derecha —, asi que la medida no se toca. */

@media (max-width: 900px) {
  .ez-diagnostico-page .ez-hero-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-6);
  }
}

/* ------------------------------------------------------------
   FRANJA DE CONFIANZA — transicion, no seccion
   ------------------------------------------------------------
   El componente viene con `repeat(4, 1fr)`: con tres items dejaba
   una columna vacia. Ademas se le sacan dos filetes que aca no
   hacen falta: el borde inferior de la franja (abajo empieza un
   fondo azul palido, el cambio de color ya separa) y la raya
   dorada bajo cada cifra, que eran tres rayas mas en el primer
   pantallazo de la pagina. Los separadores VERTICALES entre datos
   se conservan: son la unica estructura que necesita. */
.ez-diagnostico-page .ez-pricing-trust {
  background: var(--white);
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--gray-100);
}

.ez-diagnostico-page .ez-pricing-trust__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* `min-height: 0`: el componente le fija 88px a cada dato y, como
   el texto ocupa 60, el separador vertical sobresalia 28px por
   debajo del ultimo renglon y la franja quedaba hueca. */
.ez-diagnostico-page .ez-pricing-trust__list > li {
  min-height: 88px;
}

.ez-diagnostico-page .ez-pricing-trust__list strong {
  font: 800 1.7rem/1 var(--font-heading);
  margin-bottom: var(--sp-2);
}

.ez-diagnostico-page .ez-pricing-trust__list strong::after {
  display: block;
}

.ez-diagnostico-page .ez-pricing-trust__list span {
  font-size: 0.9rem;
}

/* Movil: tres filas iguales separadas SOLO por aire. La version
   anterior las separaba con un filete horizontal cada una — tres
   rayas mas — y la de antes dejaba el tercer dato centrado debajo
   de dos, leyendose como un sobrante. */
@media (max-width: 760px) {
  .ez-diagnostico-page .ez-pricing-trust {
    padding: var(--sp-7) 0;
  }
  .ez-diagnostico-page .ez-pricing-trust__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .ez-diagnostico-page .ez-pricing-trust__list > li {
    min-height: 0;
    padding: 0;
    border-left: 0;
  }
  .ez-diagnostico-page .ez-pricing-trust__list strong {
    font-size: 1.2rem;
    margin-bottom: var(--sp-1, 0.25rem);
  }
}

/* ------------------------------------------------------------
   SECCION EDITORIAL — carcasa comun
   ------------------------------------------------------------
   Ninguna seccion se distingue de la anterior por un borde NI por
   cambiar el color del papel: se distinguen por como estan
   compuestas y por que superficie interna usan. */
.ez-diagnostico-page .ez-ed {
  padding: var(--sp-12) 0;
  background: var(--ez-base);
}

/* El unico corte cromatico del cuerpo. Se le da mas aire vertical
   que al resto para que se lea como capitulo y no como una franja
   mas de la secuencia. */
.ez-diagnostico-page .ez-ed--mist {
  padding: var(--sp-16) 0;
  background: var(--ez-mist);
}

/* Salida del capitulo. La seccion que sigue a la franja vuelve a la
   base con el doble de aire arriba: la transicion es un espacio
   ancho, no un corte de color pegado al contenido. */
.ez-diagnostico-page .ez-ed--tras-capitulo {
  padding-top: var(--sp-16);
}

/* Superficie interna de azul niebla. Es lo que reemplaza al cambio
   de fondo por seccion: el panel de entregables, la hoja de
   decision, el panel de condiciones y las fichas de la FAQ salen
   todos de aca. */
.ez-diagnostico-page .ez-ed-surface {
  padding: var(--sp-8) var(--sp-10);
  background: var(--ez-mist);
  border-radius: 3px;
}

.ez-diagnostico-page .ez-ed__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  margin-inline: auto;
}

/* Rotulo de seccion. Gris tinta y no dorado: dorado chico sobre
   fondo claro no llega a AA y ademas el dorado en esta pagina
   queda reservado para los acentos verticales y el boton. */
.ez-diagnostico-page .ez-ed-eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--gray-600);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-diagnostico-page .ez-ed__head h2 {
  color: var(--navy);
  font-size: clamp(1.95rem, 2.6vw, 2.35rem);
  line-height: 1.16;
  margin: 0;
}

/* El subrayado dorado de cada H2 se elimina. Era el filete que mas
   se repetia —uno por seccion, cinco en total— y el que hacia leer
   la pagina como un informe con apartados numerados. */
.ez-diagnostico-page .ez-ed__head h2::after {
  content: none;
}

/* Nota secundaria del encabezado (solo en "que recibis"). Sin
   filete arriba: se separa por cuerpo, color y aire. */
.ez-diagnostico-page .ez-ed-note {
  margin: 0;
  max-width: 34ch;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   COMPOSICION ASIMETRICA — encabezado al costado
   ------------------------------------------------------------
   La usan "que recibis", "cuando conviene" y "alcance y honorario".
   Es lo que rompe la formula "titulo centrado arriba + grilla
   abajo" que tenian las seis secciones. El encabezado se lleva
   ~30% y el contenido ~70%. */
.ez-diagnostico-page .ez-ed-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--sp-6) var(--sp-16);
  align-items: start;
}

/* Colocacion explicita en vez de dejar que la grilla ubique sola:
   la nota de alcance tiene que caer BAJO el H2 (columna izquierda,
   segunda fila) mientras el contenido ocupa la columna derecha
   entera. Sin esto la nota se iria a la fila 2 de la derecha. */
.ez-diagnostico-page .ez-ed-layout > .ez-ed__head { grid-area: 1 / 1; }
.ez-diagnostico-page .ez-ed-layout > .ez-ed-note { grid-area: 2 / 1; }
.ez-diagnostico-page .ez-ed-layout > .ez-ed-cols,
.ez-diagnostico-page .ez-ed-layout > .ez-ed-body { grid-area: 1 / 2 / -1 / 3; }

/* A 1024 la columna del encabezado queda en 304px: el titulo entra
   pero deja media pantalla vacia debajo. Por eso el corte es a
   1100 y no a 1000. Apilado, la nota pasa al final: matiza los
   entregables, asi que leerla antes que ellos no tiene sentido. */
@media (max-width: 1100px) {
  .ez-diagnostico-page .ez-ed-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--sp-8);
  }
  .ez-diagnostico-page .ez-ed-layout > .ez-ed__head,
  .ez-diagnostico-page .ez-ed-layout > .ez-ed-note,
  .ez-diagnostico-page .ez-ed-layout > .ez-ed-cols,
  .ez-diagnostico-page .ez-ed-layout > .ez-ed-body {
    grid-area: auto;
  }
  .ez-diagnostico-page .ez-ed-layout > .ez-ed__head { order: 1; }
  .ez-diagnostico-page .ez-ed-layout > .ez-ed-cols,
  .ez-diagnostico-page .ez-ed-layout > .ez-ed-body { order: 2; }
  .ez-diagnostico-page .ez-ed-layout > .ez-ed-note { order: 3; }
  .ez-diagnostico-page .ez-ed-note {
    max-width: 60ch;
    margin-top: 0;
  }
}

/* En las secciones de encabezado corrido (proceso y FAQ) el head es
   un bloque suelto y necesita su propio aire abajo. El `:not()` es
   necesario: en las secciones asimetricas el head TAMBIEN es hijo
   directo del inner, y ahi el aire lo da el `gap` de la grilla. */
.ez-diagnostico-page .ez-ed__inner:not(.ez-ed-layout) > .ez-ed__head {
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}

/* ------------------------------------------------------------
   ENTREGABLES — acento vertical, no filete horizontal
   ------------------------------------------------------------
   Antes eran tres columnas de ~250px con un filete dorado arriba
   de cada una y un cierre gris abajo de las tres. Ahora van
   apiladas dentro de la columna ancha: el renglon respira, la
   seccion queda asimetrica y el unico adorno es una barra dorada
   de 3px al costado del titulo. Apiladas y no en tres columnas
   PORQUE en tres columnas cada descripcion quedaba en 32
   caracteres por renglon, y porque mas abajo ya hay dos grillas
   de tres (proceso y FAQ): tres grillas iguales seguidas es lo que
   el documento de direccion pide evitar. */
.ez-diagnostico-page .ez-ed-cols {
  display: grid;
  gap: var(--sp-8);
}

.ez-diagnostico-page .ez-ed-col {
  position: relative;
  padding-left: var(--sp-6);
}

.ez-diagnostico-page .ez-ed-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 3px;
  height: 28px;
  background: var(--gold);
}

.ez-diagnostico-page .ez-ed-col h3 {
  margin: 0 0 var(--sp-2);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-diagnostico-page .ez-ed-col p {
  margin: 0;
  max-width: 58ch;
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   HOJA DE DECISION — una pieza, no cinco vinetas sueltas
   ------------------------------------------------------------
   El problema que corrige: el titulo quedaba a la izquierda sobre
   el fondo, los cinco criterios flotaban a la derecha con un punto
   dorado y "otro camino" era un rectangulo agregado abajo. Tres
   objetos sin relacion entre si.

   Ahora es UNA hoja de azul niebla: adentro, el encabezado a la
   izquierda, los criterios como celdas a la derecha y la salida
   alternativa como pie de la misma hoja, en un azul mas profundo.
   Los cinco criterios comparten un unico renglon editorial en
   escritorio: ninguno queda aislado como remate accidental.
   ------------------------------------------------------------ */
.ez-diagnostico-page .ez-ed-sheet {
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--ez-hair);
  border-radius: 3px;
  overflow: hidden;
}

/* `center` y no `start`: dentro de una superficie cerrada, el hueco
   que deja un encabezado de dos renglones contra cinco criterios se
   lee como panel a medio llenar. Centrado, el rotulo queda enfrente
   del bloque de criterios y la hoja se lee como una sola pieza. */
.ez-diagnostico-page .ez-ed-sheet__intro {
  display: flex;
  align-items: center;
  padding: var(--sp-10);
  background: var(--navy);
}

.ez-diagnostico-page .ez-ed-sheet__intro .ez-ed-eyebrow {
  color: #d9c083;
}

.ez-diagnostico-page .ez-ed-sheet__intro .ez-ed__head h2 {
  max-width: 13ch;
  color: var(--white);
}

.ez-diagnostico-page .ez-ed-sheet__main {
  padding: var(--sp-8);
  background: var(--white);
}

.ez-diagnostico-page .ez-ed-criteria {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sangria comun: los cinco textos arrancan en el mismo eje, tanto
   los de dos renglones como el que ocupa el ancho. */
.ez-diagnostico-page .ez-ed-criteria li {
  position: relative;
  padding-left: var(--sp-8);
  color: var(--gray-600);
  font-size: 0.975rem;
  line-height: 1.5;
}

/* El ancla: disco claro sobre la niebla. Reemplaza al punto dorado
   suelto, que a media pantalla parecia una vineta caida. */
.ez-diagnostico-page .ez-ed-criteria li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4f8fb;
}

/* El check, dibujado con dos bordes girados 45 grados: sin icono,
   sin SVG y sin fuente de simbolos. Es decoracion — el criterio se
   entiende igual sin el —, por eso puede ir en dorado. */
.ez-diagnostico-page .ez-ed-criteria li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.5em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   PIE DE LA HOJA — la salida alternativa
   ------------------------------------------------------------
   Un punto mas profundo que la hoja, a todo su ancho interno y en
   un solo renglon en escritorio. Se lee como "si no es esto, es
   por aca", no como un sexto criterio ni como un aviso aparte. */
.ez-diagnostico-page .ez-ed-sheet__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--ez-mist);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
}

.ez-diagnostico-page .ez-ed-sheet__foot .ez-ed-eyebrow {
  flex: none;
  margin-bottom: 0;
}

.ez-diagnostico-page .ez-ed-sheet__foot p {
  margin: 0;
  max-width: none;
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.6;
}

/* `align-self: center` y no la linea base del pie: cuando el texto
   entra en dos renglones (768-1100px) una flecha alineada a la
   primera base quedaba colgada arriba a la derecha. */
@media (max-width: 1100px) {
  .ez-diagnostico-page .ez-ed-sheet {
    grid-template-columns: 1fr;
  }
  .ez-diagnostico-page .ez-ed-sheet__intro,
  .ez-diagnostico-page .ez-ed-sheet__main { padding: var(--sp-8); }
  .ez-diagnostico-page .ez-ed-sheet__intro .ez-ed__head h2 { max-width: 18ch; }
}

@media (max-width: 800px) {
  .ez-diagnostico-page .ez-ed-criteria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-6);
  }
}

@media (max-width: 700px) {
  .ez-diagnostico-page .ez-ed-criteria {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  /* Apilado, el pie deja de ser un renglon: el rotulo va arriba, el
     texto debajo y la flecha se retira (no hay a donde apuntar en
     una sola columna). */
  .ez-diagnostico-page .ez-ed-sheet__foot {
    grid-template-columns: 1fr;
    padding: var(--sp-6);
  }
  .ez-diagnostico-page .ez-ed-sheet__foot .ez-ed-eyebrow {
    margin-bottom: var(--sp-2);
  }
}

/* ------------------------------------------------------------
   PROCESO — una pieza, tres columnas, cero lineas horizontales
   ------------------------------------------------------------
   Se eliminan la linea de tiempo completa, los tres nodos dorados
   y su version vertical de movil: era el recurso que mas hacia
   parecer la pagina un diagrama generico. Queda un unico panel
   blanco sobre el azul palido de la seccion, con dos divisores
   verticales muy suaves. El <ol> sigue aportando el orden y cada
   etapa lleva su etiqueta, asi que el sentido no dependia nunca de
   la linea. */
.ez-diagnostico-page .ez-ed-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: var(--sp-8) var(--sp-10);
  background: var(--white);
  border-radius: 3px;
  list-style: none;
}

.ez-diagnostico-page .ez-ed-step {
  padding-inline: var(--sp-7);
}

.ez-diagnostico-page .ez-ed-step:first-child { padding-left: 0; }
.ez-diagnostico-page .ez-ed-step:last-child { padding-right: 0; }

.ez-diagnostico-page .ez-ed-step + .ez-ed-step {
  border-left: 1px solid var(--ez-hair);
}

.ez-diagnostico-page .ez-ed-step__label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--gray-600);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-diagnostico-page .ez-ed-step h3 {
  margin: 0 0 var(--sp-2);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-diagnostico-page .ez-ed-step p {
  margin: 0;
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Apilado no hay columnas que separar: se van los divisores y las
   etapas se distinguen por aire y por su etiqueta. Ningun borde
   horizontal las reemplaza. */
@media (max-width: 900px) {
  .ez-diagnostico-page .ez-ed-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    padding: var(--sp-7);
  }
  .ez-diagnostico-page .ez-ed-step,
  .ez-diagnostico-page .ez-ed-step:first-child,
  .ez-diagnostico-page .ez-ed-step:last-child {
    padding-inline: 0;
  }
  .ez-diagnostico-page .ez-ed-step + .ez-ed-step {
    border-left: 0;
  }
}

/* ------------------------------------------------------------
   CONDICIONES — un panel, no una tabla de dos columnas
   ------------------------------------------------------------
   Antes: dos columnas, cada una con filete gris arriba, y otro
   filete abajo anunciando las matriculas. Ahora es un solo bloque
   sobre fondo azul palido con una barra dorada en el canto
   izquierdo; adentro, dos columnas sin ningun filete. */
.ez-diagnostico-page .ez-ed-terms {
  display: grid;
  grid-template-columns: minmax(290px, 0.48fr) minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--ez-hair);
  border-radius: 3px;
  overflow: hidden;
}

.ez-diagnostico-page .ez-ed-terms__intro {
  display: flex;
  align-items: center;
  padding: var(--sp-10);
  background: var(--ez-deep);
}

.ez-diagnostico-page .ez-ed-terms__intro .ez-ed__head h2 {
  max-width: 12ch;
}

.ez-diagnostico-page .ez-ed-terms__body {
  padding: var(--sp-10);
  background: var(--white);
}

.ez-diagnostico-page .ez-ed-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-10);
  align-items: start;
}

.ez-diagnostico-page .ez-ed-brief h3 {
  margin: 0 0 var(--sp-2);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-diagnostico-page .ez-ed-brief p {
  margin: 0;
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .ez-diagnostico-page .ez-ed-terms { grid-template-columns: 1fr; }
  .ez-diagnostico-page .ez-ed-terms__intro,
  .ez-diagnostico-page .ez-ed-terms__body { padding: var(--sp-7); }
  .ez-diagnostico-page .ez-ed-terms__intro .ez-ed__head h2 { max-width: none; }
  .ez-diagnostico-page .ez-ed-duo {
    grid-template-columns: 1fr;
  }
}

/* Firma institucional. Debajo del panel, sin divisor que la
   anuncie y en cuerpo menor: aporta respaldo, no compite con el
   titulo de la seccion. Los nombres van en el mismo gris que el
   resto y se distinguen solo por el peso — antes eran navy y
   pesaban mas que el H3 de al lado. */
/* El gris tiene que ser --gray-400 (#5f6f83) y no --gray-500
   (#6b7a8f): el segundo queda en 4,27:1 sobre blanco y axe lo marca
   como fallo serio de contraste a 0,9rem. #5f6f83 da 5,26:1 y sigue
   leyendose mas liviano que el cuerpo (--gray-600), que es lo que la
   firma necesita: respaldo, no protagonismo. */
.ez-diagnostico-page .ez-ed-sign {
  margin: var(--sp-8) calc(var(--sp-10) * -1) calc(var(--sp-10) * -1);
  padding: var(--sp-5) var(--sp-10);
  max-width: none;
  background: var(--ez-base);
  color: var(--gray-400);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ez-diagnostico-page .ez-ed-sign strong {
  color: inherit;
  font-weight: 600;
}

@media (max-width: 860px) {
  .ez-diagnostico-page .ez-ed-sign {
    margin: var(--sp-7) calc(var(--sp-7) * -1) calc(var(--sp-7) * -1);
    padding-inline: var(--sp-7);
  }
}

/* ------------------------------------------------------------
   FAQ — tres bloques, sin filete y sin borde
   ------------------------------------------------------------
   El filete gris arriba de cada pregunta se cambia por fondo
   blanco sobre el azul palido de la seccion. `grid-auto-rows: 1fr`
   iguala las tres alturas para que se lean como un conjunto y no
   como tres recortes de distinto largo. */
.ez-diagnostico-page .ez-closing-stage {
  padding: var(--sp-12) 0 var(--sp-16);
  background: var(--ez-base);
}

.ez-diagnostico-page .ez-closing-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  background: var(--white);
  border: 1px solid var(--ez-hair);
  border-radius: 3px;
  overflow: hidden;
}

.ez-diagnostico-page .ez-closing-faq {
  padding: var(--sp-10);
  background: var(--white);
}

.ez-diagnostico-page .ez-closing-faq > .ez-ed__head {
  max-width: 46ch;
  margin-bottom: var(--sp-7);
}

.ez-diagnostico-page .ez-ed-faq {
  display: block;
}

/* Niebla sobre la base, no blanco sobre palido: la seccion ya no
   cambia de fondo, asi que la ficha es la que aporta la superficie. */
.ez-diagnostico-page .ez-ed-faq__item {
  display: grid;
  grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.22fr);
  gap: var(--sp-5) var(--sp-8);
  padding: var(--sp-6) 0;
  background: transparent;
  border-top: 1px solid var(--ez-hair);
  border-radius: 0;
}

.ez-diagnostico-page .ez-ed-faq__item h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-diagnostico-page .ez-ed-faq__item p {
  margin: 0;
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .ez-diagnostico-page .ez-closing-stage__grid { grid-template-columns: 1fr; }
  .ez-diagnostico-page .ez-closing-faq { padding: var(--sp-8); }
  .ez-diagnostico-page .ez-ed-faq__item {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ------------------------------------------------------------
   CTA FINAL
   ------------------------------------------------------------
   Se le saca el borde superior dorado (la clase
   `ez-cta-light--border-top` ya no esta en el marcado): la seccion
   se separa por fondo y por aire, como todas las demas. Queda en
   pie el acento corto bajo el H2, que dibuja el sistema y es el
   unico subrayado decorativo del cuerpo de la pagina.

   El secundario va outline navy y no el verde de WhatsApp: sobre
   fondo claro, dorado lleno + verde lleno son dos primarios
   compitiendo. El destino sigue siendo el mismo enlace de wa.me. */
/* Mismo papel que la FAQ de arriba: el cierre no es otra franja,
   es el final del mismo cuerpo. */
.ez-diagnostico-page .ez-closing-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-10);
  background: var(--ez-deep);
}

.ez-diagnostico-page .ez-closing-cta::before {
  content: "";
  width: 42px;
  height: 3px;
  margin-bottom: var(--sp-6);
  background: var(--gold);
}

.ez-diagnostico-page .ez-closing-cta h2 {
  margin: 0 0 var(--sp-5);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.18;
}

.ez-diagnostico-page .ez-closing-cta > p {
  margin: 0 0 var(--sp-7);
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ez-diagnostico-page .ez-closing-cta__actions {
  display: grid;
  gap: var(--sp-3);
}

.ez-diagnostico-page .ez-closing-cta__actions .ez-btn {
  width: 100%;
  min-width: 0;
}

/* El outline del sistema se dibuja con --gray-200 (#cdd5e0), que
   contra blanco queda en 1,5:1 y apenas se ve. Aca el secundario
   es outline navy: el contorno pasa a 11,9:1 y el par se lee como
   un principal y un secundario. */
.ez-diagnostico-page .ez-closing-cta .ez-btn--outline {
  border-color: var(--navy);
  color: var(--navy);
}

.ez-diagnostico-page .ez-closing-cta .ez-btn--outline:hover {
  background: var(--navy);
  color: var(--white);
}

/* ------------------------------------------------------------
   ENLACES DE TEXTO — blanco tactil de 24px
   ------------------------------------------------------------
   Un <a> dentro de un parrafo mide el alto de la linea (19px) y
   queda por debajo del minimo utilizable. Misma receta que el
   sistema ya usa para la miga de pan. */
.ez-diagnostico-page .ez-ed a:not(.ez-btn) {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.ez-diagnostico-page .ez-ed a:not(.ez-btn):hover,
.ez-diagnostico-page .ez-ed a:not(.ez-btn):focus-visible {
  text-decoration-color: var(--navy);
}

/* ------------------------------------------------------------
   MOVIL — ritmo de seccion mas corto y cuerpo un punto menor
   ------------------------------------------------------------
   El cuerpo baja de 17px/1.6 a 16px/1.6: en una columna de 342px,
   17px con interlinea abierta se leia sobredimensionado. */
@media (max-width: 640px) {
  .ez-diagnostico-page .ez-ed {
    padding: var(--sp-10) 0;
  }
  /* Las superficies internas pierden un escalon de relleno: en 342px
     utiles, 40px de margen interno se comen el renglon de lectura. */
  .ez-diagnostico-page .ez-ed-surface,
  .ez-diagnostico-page .ez-ed-sheet__main {
    padding: var(--sp-6);
  }
  .ez-diagnostico-page .ez-ed-sheet__foot {
    padding: var(--sp-5) var(--sp-6);
  }
  .ez-diagnostico-page .ez-ed__inner:not(.ez-ed-layout) > .ez-ed__head {
    margin-bottom: var(--sp-7);
  }
  .ez-diagnostico-page .ez-ed-col p,
  .ez-diagnostico-page .ez-ed-criteria li,
  .ez-diagnostico-page .ez-ed-step p,
  .ez-diagnostico-page .ez-ed-brief p,
  .ez-diagnostico-page .ez-ed-faq__item p,
  .ez-diagnostico-page .ez-ed-sheet__foot p {
    font-size: 1rem;
  }
  .ez-diagnostico-page .ez-page-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    max-width: none;
  }
  .ez-diagnostico-page .ez-page-hero__actions .ez-btn,
  .ez-diagnostico-page .ez-closing-cta__actions .ez-btn {
    width: 100%;
    max-width: 340px;
  }
  .ez-diagnostico-page .ez-closing-stage {
    padding: var(--sp-8) 0 var(--sp-12);
  }
  .ez-diagnostico-page .ez-closing-faq,
  .ez-diagnostico-page .ez-closing-cta {
    padding: var(--sp-6);
  }
}