/**
 * diagnostico.css — Estilos de las landings de /diagnostico/
 *
 * Solo lo específico de estas páginas. La barra de navegación, el pie, los
 * botones y las variables de color y tipografía vienen de /styles.css, que
 * estas páginas cargan antes que esta hoja.
 *
 * Prefijo dg- (diagnóstico) en todas las clases para que no colisionen con
 * las de la home ni con las del manifiesto.
 *
 * REGLAS DE ESTA HOJA — no se saltan al editarla:
 *
 *   1. No redefine :root ni declara variables nuevas
 *   2. No redefine ningún componente de styles.css: .btn-primary,
 *      .btn-ghost, #navbar, footer, .nav-*, .footer-*
 *   3. Ningún color literal. Todo color sale de var(--…). Si hace falta
 *      un tono que no existe, se pide, no se inventa aquí
 *   4. Ni un !important
 *
 * Las tres primeras existen por la misma razón: styles.css es la fuente
 * de la verdad del sistema visual. Un literal o una redefinición aquí
 * crea una segunda, y a partir de ahí cambiar la marca deja de ser
 * cambiar un sitio.
 *
 * Directrices aplicadas (docs/internal/design-guidelines.md):
 *   Bebas Neue en titulares · Instrument Serif itálica en cuerpo ·
 *   JetBrains Mono en etiquetas · var(--orange) como único acento y
 *   escaso · cero border-radius, sin sombras, sin gradientes.
 */

/* ── HERO ──────────────────────────────────────────────────────────────
   El padding superior deja sitio a #navbar, que es fija y no ocupa hueco
   en el flujo. Mismo criterio que .m-hero del manifiesto. */
.dg-hero {
  padding: 160px 3rem 5rem;
  max-width: 1140px;
  margin: 0 auto;
  border-bottom: 1px solid var(--gray-ultra);
}

/* El eyebrow va a ancho completo y ya no cabe siempre en una línea: los
   de las dos landings son frases enteras desde el copy de 2026-08. Con
   'align-items: center' el filete se colocaba a media altura del bloque
   entero, o sea flotando entre las dos líneas. Se ancla a la primera con
   flex-start más medio interlineado de margen. */
.dg-eyebrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dg-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 0.7em;
}

/* ── ANCHO COMPLETO, SIN TOPE DE MEDIDA ──
   Aquí había un max-width de 15ch, puesto cuando el titular del hub eran
   los 35 caracteres de "DOS DIAGNÓSTICOS. LA MISMA PREGUNTA." Con el copy
   de 2026-08 son 73, y Bebas es condensada —su 'ch' es estrecho—, así que
   ese tope partía el titular en seis líneas y dejaba media página en
   blanco a la derecha. No era una rejilla de dos columnas: era esto.

   Un titular no es prosa y no necesita medida de línea: se lee de un
   golpe. Los párrafos sí la conservan, más abajo.

   El mínimo del clamp baja de 3.2 a 2.8rem porque los tres titulares son
   ahora largos: al soltar el ancho, en un móvil de 375px el de 73
   caracteres pasaba de cinco líneas a seis. */
.dg-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: 2.5rem;
}

.dg-title em {
  color: var(--orange);
  font-style: normal;
}

/* La entradilla sí conserva medida, pero sube de 58ch a 72ch: 58 era una
   columna estrecha al lado de un titular que ahora ocupa todo el ancho, y
   72 sigue dentro del rango legible. A ancho completo del contenedor
   serían 124 caracteres por línea, que es donde el ojo pierde el renglón
   al volver. */
.dg-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--serif-on-light);
  max-width: 72ch;
}

/* La entradilla del hub son dos párrafos y el segundo necesita aire. */
.dg-lead + .dg-lead {
  margin-top: 1.5rem;
}

/* ── CUERPO ── */
.dg-body {
  max-width: 1140px;
  margin: 0 auto;
  padding: 5rem 3rem 8rem;
}

.dg-section {
  margin-bottom: 5rem;
}

.dg-section:last-child {
  margin-bottom: 0;
}

/* Mismo anclaje del filete que .dg-eyebrow, por lo mismo: en un móvil
   estrecho "Cuál de los dos debes hacer" pasa a dos líneas. */
.dg-section-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dg-section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 0.7em;
}

.dg-section h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: 2rem;
}

.dg-section h2 em {
  color: var(--orange);
  font-style: normal;
}

/* ── DESVIACIÓN DELIBERADA DE LA ESCALA TIPOGRÁFICA ──
   design-guidelines.md fija Instrument Serif a 1.1rem en cuerpo, que es
   la medida correcta para un párrafo de apoyo bajo un titular enorme.

   Aquí el cuerpo no apoya: explica. Estas dos landings son lo único que
   se lee antes de decidir si merece la pena invertir cinco minutos en un
   cuestionario, y a 1.1rem en un móvil se ojea en vez de leerse. Sube a
   1.25rem, igual que las páginas legales suben a 1.2 por lo mismo.

   La medida en 'ch' crece con el cuerpo, así que la columna mantiene sus
   caracteres por línea a cualquier tamaño. Sube de 62 a 72 por lo mismo
   que la entradilla: 62 dejaba un tercio del contenedor vacío. Es el tope
   del rango cómodo, y aquí sí hay un tope — esto es prosa corrida.

   El ':not([class])' es el mismo caso que en .dg-card p, y hacía falta
   aquí ADEMÁS de allí: las tarjetas están dentro de una .dg-section, así
   que había dos selectores de elemento pisando lo mismo. '.dg-section p'
   tiene clase + elemento y gana a .dg-card-meta, .dg-card-num y .dg-nota,
   que solo tienen clase — los tres salían en Instrument Serif itálica a
   1.25rem en vez de en mono. Esta regla es para la prosa de la sección, y
   la prosa no lleva clase. */
.dg-section p:not([class]) {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--serif-on-light);
  margin-bottom: 1.5rem;
  max-width: 72ch;
}

/* ── REJILLA DE TARJETAS DEL HUB ──────────────────────────────────────
   Dos columnas iguales en escritorio, una sola por debajo del breakpoint
   de 900px que usa todo el sitio. El gap de 1px sobre fondo gris dibuja
   el filete de separación sin necesidad de borders que se dupliquen. */
.dg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-ultra);
  border: 1px solid var(--gray-ultra);
}

.dg-card {
  background: var(--white);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dg-card-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

.dg-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--black);
}

/* El ':not([class])' NO es cosmético. Este selector era '.dg-card p' a
   secas, y con dos partes (clase + elemento) gana en especificidad a
   '.dg-card-meta' y a '.dg-card-num', que solo tienen una. Resultado: las
   metas y el número de las tarjetas salían en Instrument Serif itálica a
   1.1rem en vez de en JetBrains Mono a 0.65rem, aunque su clase dijera lo
   contrario y estuviera escrita después. La del hero se veía bien solo
   porque no está dentro de ninguna .dg-card.

   Lo correcto es que el selector de elemento no pise a las clases, no
   subirles la especificidad a ellas: eso solo aplaza la misma pelea al
   siguiente párrafo con clase que se añada aquí. */
.dg-card p:not([class]) {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--serif-on-light);
  margin: 0;
  flex-grow: 1;
}

.dg-card-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gray-light);
  line-height: 1.6;
}

/* El botón se pega abajo para que las dos tarjetas alineen su CTA aunque
   los textos tengan distinta longitud. */
.dg-card-cta {
  margin-top: 1.75rem;
}

/* El CTA del hero son DOS botones en fila; el de las tarjetas es uno solo
   seguido de su línea de meta, y ahí un flex horizontal los pondría lado a
   lado. Por eso esto va acotado a .dg-hero y no a .dg-card-cta a secas.

   El espacio se pone con gap en el contenedor y no con margin en
   .btn-primary: el botón es de styles.css —regla 2 de esta hoja— y lo usan
   también el formulario de la home, las tarjetas del hub y el informe, donde
   va solo y esa separación estorbaría. Y gap no deja hueco sobrante en los
   extremos, que es lo que desalinearía el bloque respecto al texto de arriba.

   'wrap' es lo que da el salto a móvil: por debajo de ~700px los dos
   botones no caben en una fila y se apilan, y entonces el mismo gap hace de
   separación vertical. Sin él se comprimirían en una sola línea ilegible. */
.dg-hero .dg-card-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* En el hero la línea de meta va SUELTA en el <header>, hermana del CTA y
   no hija suya: dentro sería un tercer elemento de la fila flex y se
   colocaría al lado del segundo botón. Como no es descendiente, la regla
   .dg-card-cta .dg-card-meta de más abajo no la alcanza, y .dg-card-meta no
   trae margen propio —en las tarjetas la separa el gap de .dg-card—, así
   que aquí hay que dárselo. Algo más que el 0.75rem de la tarjeta: los
   botones del hero son dos y pesan más.

   Y sube de cuerpo. 0.65rem es la medida correcta DENTRO de una tarjeta,
   donde el texto vecino es de 1.1rem; en el hero los vecinos son un titular
   de hasta 6.5rem y párrafos de 1.5rem, y la misma nota se lee como letra
   pequeña de contrato. Va a 1rem, que es el cuerpo mono que este hero ya
   usa en .dg-eyebrow: reutilizar ese escalón en vez de inventar un tercero.
   No compite con el eyebrow porque aquel es naranja y en versales. */
.dg-hero .dg-card-cta + .dg-card-meta {
  margin-top: 1.25rem;
  font-size: 1rem;
}

/* La línea de "Cinco minutos · Sin coste" bajo el botón de la tarjeta.
   Reutiliza .dg-card-meta y solo le separa del botón: es el mismo tipo de
   dato que la línea de preguntas y duración, y darle una clase propia
   sería una segunda escala de nota que mantener. */
.dg-card-cta .dg-card-meta {
  margin-top: 0.75rem;
}

/* Tarjeta atenuada: la del cuestionario que todavía no existe. No se
   apaga con opacity sobre toda la tarjeta porque el texto quedaría por
   debajo del contraste mínimo; se cambia el fondo y el color del título. */
.dg-card.is-proximamente {
  background: var(--gray-ultra);
}

.dg-card.is-proximamente h3 {
  color: var(--gray-mid);
}

/* ── DISTINTIVO DE ESTADO ── */
.dg-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--gray-mid);
  padding: 0.5rem 1rem;
  align-self: flex-start;
}

.dg-badge--orange {
  background: var(--orange);
}

/* ── LISTA NUMERADA (las cinco categorías del índice) ──────────────────
   DOS COLUMNAS, y es la única forma de llenar el ancho aquí sin estropear
   nada. A una columna a ancho completo cada categoría se leería a 124
   caracteres por línea; a 62ch se leía bien pero dejaba media sección en
   blanco. Partida en dos, cada columna cae en unos 58 caracteres — la
   misma medida cómoda de antes— y entre las dos ocupan todo el ancho.

   Cinco elementos en dos columnas dan 3 y 2: el borde inferior del último
   de cada columna queda a distinta altura. Es deliberado y no se
   compensa; forzar una quinta fila vacía para cuadrarlo sería maquetar
   contra el contenido. */
.dg-list {
  list-style: none;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  align-content: start;
}

/* Al mismo cuerpo que el párrafo: las cinco categorías son el contenido
   de la sección "qué mide", no una lista de apoyo. */
.dg-list li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--serif-on-light);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--gray-ultra);
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}

/* El filete superior del primer elemento desaparece con las dos columnas:
   solo lo tendría el primero de la izquierda, y esa asimetría se lee como
   un fallo. Ahora cada elemento cierra por abajo y la lista abre sin
   filete, que es simétrico en las dos columnas. */

/* El número sale de data-n en el marcado: así el CSS no depende del orden
   de los <li> y se puede reordenar la lista sin renumerar a mano. */
.dg-list li::before {
  content: attr(data-n);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  flex-shrink: 0;
  padding-top: 0.35rem;
}

/* Aquí vivía .dg-estado, el bloque negro de "próximamente" de la landing
   individual. Esa sección se retiró en la fase 5, cuando el cuestionario
   individual pasó a existir, y sus cuarenta líneas de estilo se quedaron
   sin un solo elemento que las usara. */

/* ── PIE DE ACCIONES ── */
.dg-cta-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3rem;
}

/* ── AVISO DE CONFIDENCIALIDAD ──────────────────────────────────────────
   Va bajo el CTA de empezar y, más breve, sobre el bloque de captura de
   email. Lo pinta el parcial diagnostico/_confidencialidad.php.

   A 0.8rem y no a los 0.65rem que la escala reserva para notas: esto no
   es una nota al pie, es información que decide si alguien contesta o
   se va. Mismo criterio que la desviación documentada en
   cuestionario.css. */
.dg-confidencial {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--gray-light);
  margin-top: 1.5rem;
  max-width: 52ch;
}

.dg-confidencial a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
}

.dg-confidencial a:hover {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* ── IMAGEN A UN LADO Y TEXTO AL OTRO ─────────────────────────────────
   La sección "Qué recibes" de las dos landings: el mockup del informe a
   la izquierda y el texto a la derecha.

   'align-items: center' y no 'start' porque el PNG lleva su sombra
   proyectada dentro del propio fichero: alineado arriba, el texto
   arrancaría a la altura del aire que hay sobre la portada y parecería
   descolgado.

   El texto queda en una columna de unos 460px, así que el max-width de
   72ch de .dg-section p no llega a aplicarse aquí: manda la columna. */
.dg-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

/* La imagen ocupa su columna y nunca la desborda. El height auto con los
   width/height del marcado reserva el hueco antes de que descargue, que
   es lo que evita el salto de maquetación al aparecer. */
.dg-media-img {
  margin: 0;
}

.dg-media-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* El último párrafo no separa: la sección ya trae su propio margen y
   sumar los dos descuadra el centrado vertical de las dos columnas. */
.dg-media-texto p:last-child {
  margin-bottom: 0;
}

/* ── NOTA EN MONO ──
   62ch de mono a 0.65rem son unos 390px: la nota bajo las tarjetas del
   hub caía en cuatro líneas dentro de un contenedor de 1044. A 100ch
   ronda los 620 y cabe en dos, que es lo que una nota debe ocupar. */
.dg-nota {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gray-light);
  line-height: 1.6;
  margin-top: 1.5rem;
  max-width: 100ch;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────
   900px es el breakpoint de todo el sitio (styles.css y el manifiesto).
   Cambiarlo solo aquí descolocaría la barra respecto al contenido. */
@media (max-width: 900px) {
  .dg-hero {
    padding: 120px 1.5rem 3.5rem;
  }

  .dg-body {
    padding: 3.5rem 1.5rem 5rem;
  }

  /* Las tarjetas del hub y las cinco categorías, las dos a una columna:
     por debajo de 900px media caña son unos 165px y ahí no cabe ni el
     nombre de la categoría. */
  .dg-grid,
  .dg-list,
  .dg-media {
    grid-template-columns: 1fr;
  }

  /* En vertical la imagen va DEBAJO del texto. Arriba empujaría el
     contenido de la sección media pantalla hacia abajo, y en un móvil lo
     que decide si se sigue leyendo es el texto, no el mockup. */
  .dg-media-img {
    order: 2;
  }

  .dg-card {
    padding: 2rem;
  }

  .dg-cta-row {
    gap: 0.75rem;
  }

  /* A pantalla estrecha los botones ocupan el ancho: dos CTA a media
     caña quedan por debajo del área táctil recomendada. */
  .dg-cta-row > * {
    width: 100%;
    text-align: center;
  }
}