/* ADN — Páginas y bloques del editor (§59)
   ---------------------------------------------------------------------------
   Da aspecto de marca a los bloques nativos de WordPress. Importa porque desde
   ahora hay páginas que **edita el cliente**: si los bloques del editor no se
   parecen al resto del tema, cada página nueva desentona sola.

   Se encola en todas las páginas (`is_page()`), no sólo en las landing: las
   legales, «Nosotros» y cualquier página futura se benefician igual.

   Convención: se estiliza el bloque nativo (.wp-block-*) y NO se pide al cliente
   que ponga clases. Toda regla que dependa de una clase escrita a mano acaba
   olvidada en la tercera página. */

/* ══ Rejilla de la landing ════════════════════════════════════════════════ */
/* Sólo en page-landing.php. `page.php` sigue con su .adn-wrap intacto. */
.adn-page--landing .adn-page-article { width: 100%; }

.adn-page--landing .adn-page-content {
  display: grid;
  grid-template-columns:
    minmax(var(--container-pad), 1fr)
    minmax(0, 68ch)
    minmax(var(--container-pad), 1fr);
}

/* Todo lo normal va a la columna del medio… */
.adn-page--landing .adn-page-content > * {
  grid-column: 2;
}

/* …y estos dos se saltan los carriles laterales.
   `justify-self: center` + `width: 100%` en vez de márgenes negativos con
   `100vw`: así nunca se cuenta la barra de scroll y no aparece scroll
   horizontal. */
.adn-page--landing .adn-page-content > .alignwide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: var(--container-max);
  justify-self: center;
}
.adn-page--landing .adn-page-content > .alignfull {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

/* El primer bloque de una landing pega con la cabecera: es el banner. */
.adn-page--landing .adn-page-content > .alignfull:first-child {
  margin-top: 0;
}

/* …pero el último NO debe pegarse al pie. Los botones de cierre quedaban
   tocando el footer oscuro, sin respiro entre el CTA y el bloque de enlaces.
   Va como padding del <main> y no como margen del último bloque: así vale sea
   cual sea el bloque con el que el cliente termine la página. */
.adn-page--landing {
  padding-bottom: var(--space-20);
}

/* ══ Banner (bloque Cubierta) ═════════════════════════════════════════════ */
.wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30rem;
  padding: var(--space-16) var(--container-pad);
  overflow: hidden;
}
@media (min-width: 768px) {
  .wp-block-cover { min-height: 34rem; }
}

.wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto disponible es de 900 px de ancho y el banner puede pasar de 1400.
     Un pelo de saturación y contraste disimula el reescalado; el velo hace el
     resto. Cuando llegue una foto grande, esto se puede quitar. */
  filter: saturate(1.05) contrast(1.04);
  z-index: 0;
}

/* El velo NO es decorativo: sostiene el contraste del texto blanco, igual que
   en el hero de la portada (§21). Aclararlo rompe la accesibilidad. */
.wp-block-cover .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}
.wp-block-cover .wp-block-cover__inner-container > * + * {
  margin-top: var(--space-5);
}

.wp-block-cover h1,
.wp-block-cover h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: #fff;
  margin: 0;
  /* Mismo tratamiento del hero: sombra corta y opaca que despega el glifo del
     fondo, más un halo difuso. Sin esto, sobre una zona clara de la foto el
     titular se pierde aunque el velo cumpla de media. */
  text-shadow:
    0 1px 2px rgba(6, 14, 28, .55),
    0 8px 32px rgba(6, 14, 28, .45);
}
.wp-block-cover p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(6, 14, 28, .5);
  margin: 0;
}
@media (min-width: 768px) {
  .wp-block-cover p { font-size: var(--text-xl); }
}

/* ══ Botones ══════════════════════════════════════════════════════════════ */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-block-buttons.is-content-justification-left { justify-content: flex-start; }

/* `.adn-prose a` subraya TODOS los enlaces del contenido —que es lo correcto
   dentro de un párrafo— y con eso ganaba a `.wp-block-button__link` por
   especificidad (0,1,1 contra 0,1,0): los botones salían subrayados. Se repite
   el selector con el prefijo para empatar el peso. */
.adn-prose .wp-block-button__link,
.wp-block-button__link {
  text-decoration: none;
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: 4px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Primario: relleno azul de marca. Es el único de los tres colores del manual
   que cumple contraste como relleno con texto blanco encima (§16). */
.wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* Secundario: contorno. Dentro del banner va en blanco; fuera, en tinta. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
}

.wp-block-button__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ══ Columnas ═════════════════════════════════════════════════════════════ */
.wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 782px) {
  .wp-block-columns { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .wp-block-columns.is-not-stacked-on-mobile { grid-auto-flow: column; }
}
.wp-block-column { min-width: 0; }
.wp-block-column > * + * { margin-top: var(--space-3); }

.wp-block-column h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
.wp-block-column p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-2);
  margin: 0;
}

/* ══ Grupos ═══════════════════════════════════════════════════════════════ */
/* 🔴 Este tema NO tiene theme.json, y por eso WordPress envuelve los hijos de
   un grupo en `.wp-block-group__inner-container`. Con theme.json no lo haría.
   Consecuencia: cualquier selector de hijo directo sobre un grupo NO llega al
   contenido — hay que contemplar las dos estructuras, o el día que se añada un
   theme.json se rompe al revés. `:where()` mantiene la especificidad en 0 para
   que el resto de reglas siga mandando. */
.wp-block-group > :where(.wp-block-group__inner-container) {
  display: contents;   /* el envoltorio deja de contar para la maquetación */
}

.adn-page--landing .adn-page-content > .wp-block-group {
  margin-top: var(--space-16);
}

/* Bloque de fondo suave. Se da como clase en el contenido (no por el selector
   de color del editor) para que siga la paleta del tema: si mañana cambia
   `--surface-2`, este bloque cambia con ella. Un hex elegido a mano en el editor
   se quedaría anclado al color viejo. */
.adn-bloque--suave {
  display: grid;          /* con `display: contents` en el envoltorio, los nietos
                             se maquetan aquí como si fueran hijos */
  gap: var(--space-8);
  padding: var(--space-12) var(--space-6);
  border-radius: 10px;
  background: var(--surface-2);
}
/* El filete de `.adn-prose h2` marca separación entre secciones; dentro de una
   caja con fondo propio sobra, y el margen superior también: lo da el padding. */
.adn-bloque--suave .wp-block-heading {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 768px) {
  .adn-bloque--suave { padding: var(--space-16); }
}

/* ══ Secciones de la landing ══════════════════════════════════════════════ */
/* Un grupo `alignwide` por sección, para que el encabezado y las columnas
   compartan borde izquierdo. Sin esto el <h2> se queda en la columna de lectura
   (centrada) y las columnas se van al ancho amplio: dos sangrías distintas en
   la misma sección, que se lee como un fallo. */
.adn-seccion {
  display: grid;
  gap: var(--space-6);
  padding-inline: var(--container-pad);
}
.adn-seccion > .wp-block-columns { margin-top: var(--space-4); }

/* ══ Separador ════════════════════════════════════════════════════════════ */
.wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--adn-hairline);
  margin-block: var(--space-12);
}

/* ══ Imagen ═══════════════════════════════════════════════════════════════ */
.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.wp-block-image figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--mute);
  text-align: center;
}

/* ══ Páginas normales (page.php) ══════════════════════════════════════════ */
/* Las legales y «Nosotros» heredan la tipografía de lectura del blog. */
.adn-page:not(.adn-page--landing) .adn-page-content {
  max-width: 68ch;
}