/* ============================================================
   dlg.css — estilos propios de descifrandolaguerra.es
   ------------------------------------------------------------
   Se carga con el setting `site_extra_css` del core, después de
   styles.css y theme.css, para poder apoyarse en sus variables.

   Los estilos del muro de pago NO están aquí: son del core
   (assets/css/content.css), porque el muro es funcionalidad de
   Brisa y la hereda cualquier sitio.
   ============================================================ */

/* ============================================================
   1. Sistema de diseño — tokens
   ------------------------------------------------------------
   Fuente: Figma «DLG (Descifrando La Guerra)», página `v2 - Rediseño`.
   Nodos 4760:3134 y 4811:1768 (color) y 4760:2392 (texto), leídos por
   la API REST el 7 de septiembre de 2026. No son valores a ojo.

   POR QUÉ VIVEN AQUÍ Y NO EN EL TEMA DEL CORE: el tema de Brisa tiene
   7 colores planos y 2 tipografías; esto son 33 tonos, 12 semánticos y
   20 estilos de texto. Brisa se distribuye en ZIP a otros sitios y no
   debe cargar con la escala de DLG. Ver TODO.md § Apariencia.

   OJO — ESTOS VALORES NO SIGUEN AL PANEL. Si alguien cambia el acento
   en Ajustes, los componentes .dlg-* no le hacen caso: un sistema de
   diseño no se edita por ajuste suelto. Pero para que el core y esto
   no se contradigan, `theme_color_accent` debería valer #D52928, que
   es el rojo del Figma. Hoy vale #d52828.
   ============================================================ */

:root {

  /* ── Rampas ────────────────────────────────────────────────
     Las tres del Figma, íntegras. En un componente se usan los
     tokens semánticos de abajo, no la rampa: ir directo a un paso
     concreto es saltarse el sistema y es lo que hay que evitar. */

  --dlg-red-50:  #FFDED5;
  --dlg-red-100: #FFC0B7;
  --dlg-red-200: #FFA095;
  --dlg-red-300: #F77E74;
  --dlg-red-400: #E45B53;
  --dlg-red-500: #D52928;   /* rojo de marca */
  --dlg-red-600: #BB0000;
  --dlg-red-700: #990000;
  --dlg-red-800: #730000;
  --dlg-red-900: #4C0000;
  --dlg-red-950: #290000;

  --dlg-grey-50:  #F5F5F6;
  --dlg-grey-100: #DADADA;
  --dlg-grey-200: #BFBFC0;
  --dlg-grey-300: #A5A5A6;
  --dlg-grey-400: #8C8C8C;
  --dlg-grey-500: #737374;
  --dlg-grey-600: #5C5C5C;
  --dlg-grey-700: #454546;
  --dlg-grey-800: #303030;
  --dlg-grey-900: #1C1C1C;
  --dlg-grey-950: #030303;

  /* El verde lo introduce el rediseño: NO existe en el sitio actual.
     Solo se usa hoy el paso 50, como fondo de bloque (--dlg-layer). */
  --dlg-green-50:  #F3F7F5;
  --dlg-green-100: #DAE8E2;
  --dlg-green-200: #C7D8D0;
  --dlg-green-300: #B4C8BE;
  --dlg-green-400: #92A89E;
  --dlg-green-500: #708A7E;
  --dlg-green-600: #506C5F;
  --dlg-green-700: #345043;
  --dlg-green-800: #1B3429;
  --dlg-green-900: #051A12;
  --dlg-green-950: #000502;

  /* ── Semánticos ────────────────────────────────────────────
     Los 12 estilos que el Figma declara sobre las rampas. Esto es
     lo que se usa en los componentes. */

  --dlg-main:               var(--dlg-red-500);
  --dlg-main-hover:         var(--dlg-red-700);
  --dlg-main-disabled:      var(--dlg-red-50);

  --dlg-secondary:          var(--dlg-grey-900);
  --dlg-secondary-hover:    var(--dlg-grey-700);
  --dlg-secondary-disabled: var(--dlg-grey-200);

  --dlg-border:             var(--dlg-grey-400);
  --dlg-contrast:           #FFFFFF;

  /* `layer` es el fondo de bloque. Sale del verde, no del gris: es un
     blanco roto con temperatura fría, no un gris neutro. La etiqueta
     del Figma dice «color/red/50», pero el estilo resuelve a #F3F7F5,
     que es green-50. Manda el estilo, no la etiqueta. */
  --dlg-layer:              var(--dlg-green-50);

  --dlg-warning:            #BF6A02;
  --dlg-success:            #287907;

  --dlg-gradient: linear-gradient(90deg, var(--dlg-red-800), var(--dlg-red-500));

  /* ── Derivados ─────────────────────────────────────────────
     NO están entre los 12 semánticos del Figma: la guía no declara
     colores de texto ni de filete. Se derivan de la rampa de grises
     para no volver a hardcodear hexes por el fichero. Si algún día el
     Figma los declara, estos cuatro son los que hay que reconciliar. */

  --dlg-text:   var(--dlg-grey-900);   /* texto principal */
  --dlg-text-2: var(--dlg-grey-700);   /* secundario: entradilla, pie */
  --dlg-text-3: var(--dlg-grey-500);   /* tenue: fechas, notas */
  --dlg-rule:   var(--dlg-grey-100);   /* filetes y bordes suaves */

  /* ── Tipografía ────────────────────────────────────────────
     Dos familias, y cada una tiene su sitio. La serif NO es la del
     cuerpo: el cuerpo es Raleway a 150%. Noto Serif es el recurso de
     acento — titulares de apoyo, navegación y categorías. */

  --dlg-font-sans:  'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dlg-font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;

  /* Titulares Raleway — Heading/Basic/Level 1…6 */
  --dlg-h1: 2.5rem;    --dlg-h1-lh: 1.175;
  --dlg-h2: 2rem;      --dlg-h2-lh: 1.188;
  --dlg-h3: 1.375rem;  --dlg-h3-lh: 1.182;
  --dlg-h4: 1.25rem;   --dlg-h4-lh: 1.15;
  --dlg-h5: 1rem;      --dlg-h5-lh: 1.188;
  --dlg-h6: 0.875rem;  --dlg-h6-lh: 1.143;

  /* Titulares Noto Serif — Heading/Hint/Level 1…3 */
  --dlg-hint1: 2.5rem; --dlg-hint1-lh: 1.35;
  --dlg-hint2: 2rem;   --dlg-hint2-lh: 1.375;
  --dlg-hint3: 1.75rem;--dlg-hint3-lh: 1.357;

  /* Cuerpo Raleway — Paragraph/{Regular,Bold}/{Large…Mini}, todo a 150% */
  --dlg-p-lg: 1.25rem;
  --dlg-p-md: 1rem;
  --dlg-p-sm: 0.75rem;
  --dlg-p-xs: 0.625rem;
  --dlg-p-lh: 1.5;

  /* Other/Navigation, Other/Category, Other/Button */
  --dlg-nav:  1.25rem;   --dlg-nav-lh:  1.35;
  --dlg-cat:  0.625rem;  --dlg-cat-lh:  1.4;
  --dlg-btn:  0.875rem;  --dlg-btn-lh:  1.143;
}

/* ── Clases de la escala tipográfica ─────────────────────────
   Una por estilo del Figma, con el mismo nombre, para que una
   plantilla sea comprobable contra el diseño de un vistazo.
   No son utilidades sueltas: son el sistema, y no hay más. */

.dlg-h1 { font-family: var(--dlg-font-sans); font-weight: 400; font-size: var(--dlg-h1); line-height: var(--dlg-h1-lh); }
.dlg-h2 { font-family: var(--dlg-font-sans); font-weight: 400; font-size: var(--dlg-h2); line-height: var(--dlg-h2-lh); }
.dlg-h3 { font-family: var(--dlg-font-sans); font-weight: 400; font-size: var(--dlg-h3); line-height: var(--dlg-h3-lh); }
.dlg-h4 { font-family: var(--dlg-font-sans); font-weight: 400; font-size: var(--dlg-h4); line-height: var(--dlg-h4-lh); }
.dlg-h5 { font-family: var(--dlg-font-sans); font-weight: 400; font-size: var(--dlg-h5); line-height: var(--dlg-h5-lh); }
.dlg-h6 { font-family: var(--dlg-font-sans); font-weight: 400; font-size: var(--dlg-h6); line-height: var(--dlg-h6-lh); }

.dlg-hint1 { font-family: var(--dlg-font-serif); font-weight: 400; font-size: var(--dlg-hint1); line-height: var(--dlg-hint1-lh); }
.dlg-hint2 { font-family: var(--dlg-font-serif); font-weight: 400; font-size: var(--dlg-hint2); line-height: var(--dlg-hint2-lh); }
.dlg-hint3 { font-family: var(--dlg-font-serif); font-weight: 400; font-size: var(--dlg-hint3); line-height: var(--dlg-hint3-lh); }

.dlg-p-lg { font-family: var(--dlg-font-sans); font-size: var(--dlg-p-lg); line-height: var(--dlg-p-lh); }
.dlg-p-md { font-family: var(--dlg-font-sans); font-size: var(--dlg-p-md); line-height: var(--dlg-p-lh); }
.dlg-p-sm { font-family: var(--dlg-font-sans); font-size: var(--dlg-p-sm); line-height: var(--dlg-p-lh); }
.dlg-p-xs { font-family: var(--dlg-font-sans); font-size: var(--dlg-p-xs); line-height: var(--dlg-p-lh); }
.dlg-p-lg--bold, .dlg-p-md--bold, .dlg-p-sm--bold, .dlg-p-xs--bold { font-weight: 700; }

.dlg-nav-text { font-family: var(--dlg-font-serif); font-weight: 400; font-size: var(--dlg-nav); line-height: var(--dlg-nav-lh); }
.dlg-cat-text { font-family: var(--dlg-font-serif); font-weight: 400; font-size: var(--dlg-cat); line-height: var(--dlg-cat-lh); text-transform: uppercase; letter-spacing: .08em; }
.dlg-btn-text { font-family: var(--dlg-font-sans); font-weight: 700; font-size: var(--dlg-btn); line-height: var(--dlg-btn-lh); }

/* ============================================================
   2. Componentes
   ============================================================ */

/* ── Cabecera de pieza ────────────────────────────────────── */

.dlg-header {
  margin: 0 0 1.75rem;
}

.dlg-header__kicker,
.dlg-header__terms {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dlg-main);
}

.dlg-header__kicker a,
.dlg-header__terms a { color: inherit; text-decoration: none; }
.dlg-header__kicker a:hover,
.dlg-header__terms a:hover { text-decoration: underline; }

.dlg-header__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.dlg-header__subtitle {
  margin: 0 0 .75rem;
  font-size: 1.1875rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--dlg-text-2);
}

.dlg-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-size: .9375rem;
  color: var(--dlg-text-3);
}

.dlg-header--archive { border-bottom: 2px solid var(--dlg-secondary); padding-bottom: 1rem; }

.dlg-sep { color: var(--dlg-rule); }

/* ── Etiqueta de exclusivo ────────────────────────────────── */

.dlg-badge {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .2em .6em;
  border-radius: 3px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dlg-badge--exclusive {
  background: var(--dlg-main);
  color: #fff;
}

/* El candado de una sesión de pago. Marca sin gritar: el catálogo del
   seminario tiene que leerse como un índice, no como un muro. */
.dlg-lock {
  margin-left: .4em;
  color: var(--dlg-main);
  font-weight: 700;
}

/* ── Cuerpo ───────────────────────────────────────────────── */

.dlg-article {
  max-width: 44rem;
  margin: 0 auto;
}

.dlg-article .content-body,
.dlg-article .content-teaser {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.dlg-article .content-body > * + * { margin-top: 1.25em; }
.dlg-article .content-body h2 { margin-top: 2em; font-size: 1.5rem; line-height: 1.25; }
.dlg-article .content-body h3 { margin-top: 1.75em; font-size: 1.25rem; }
.dlg-article .content-body blockquote {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--dlg-main);
  color: var(--dlg-text-2);
}
.dlg-article .content-body img { max-width: 100%; height: auto; }

.dlg-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--dlg-text-2);
}

.dlg-note { font-size: .9375rem; color: var(--dlg-text-3); }

.dlg-figure { margin: 0 0 1.75rem; }
.dlg-figure img { width: 100%; height: auto; display: block; border-radius: 4px; }

.dlg-article__footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--dlg-rule); }

/* ── Términos ─────────────────────────────────────────────── */

.dlg-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }

.dlg-tags a {
  padding: .25em .7em;
  border: 1px solid var(--dlg-rule);
  border-radius: 999px;
  font-size: .8125rem;
  text-decoration: none;
  color: var(--dlg-text-2);
}
.dlg-tags a:hover { border-color: var(--dlg-main); color: var(--dlg-main); }
.dlg-tags--region a { border-style: dashed; }

/* ── Rejilla y tarjetas ───────────────────────────────────── */

.dlg-grid {
  display: grid;
  gap: 2rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  margin: 2rem 0;
}

.dlg-grid--compact { gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.dlg-card { display: flex; flex-direction: column; gap: .75rem; }

.dlg-card__media { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 9; }
.dlg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dlg-card__kicker {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dlg-main);
}

.dlg-card__title { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.dlg-card__title a { color: inherit; text-decoration: none; }
.dlg-card__title a:hover { color: var(--dlg-main); }

.dlg-card__excerpt {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--dlg-text-2);
}

.dlg-card__date { font-size: .8125rem; color: var(--dlg-text-3); }

.dlg-empty { padding: 2rem 0; color: var(--dlg-text-3); }
.dlg-count { margin: .5rem 0 0; font-size: .875rem; color: var(--dlg-text-3); }

.dlg-section-title {
  margin: 3rem 0 0;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--dlg-secondary);
  font-size: 1.125rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.dlg-related { max-width: 62rem; margin: 0 auto; }

/* ── Seminarios ───────────────────────────────────────────── */

.dlg-buybox {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--dlg-secondary);
  border-radius: 6px;
}

.dlg-buybox__price { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.dlg-buybox__note { margin: .35rem 0 1rem; font-size: .9375rem; color: var(--dlg-text-2); }
.dlg-buybox__actions { margin: 0; display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }

/* ── Planes de suscripción ────────────────────────────────────
   Estilos mínimos, como el resto de la Fase D: esto es HTML semántico a la espera
   del diseño real de DLG, no una propuesta visual. */

.dlg-subscribe { max-width: 62rem; margin: 0 auto; }

.dlg-plans {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.dlg-plan {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
  border: 2px solid var(--dlg-secondary);
  border-radius: 6px;
}

.dlg-plan__name { margin: 0; font-size: 1.25rem; }
.dlg-plan__tier { margin: 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dlg-text-2); }
.dlg-plan__price { margin: .5rem 0 1rem; font-size: 1.125rem; }
.dlg-plan__price strong { font-size: 1.75rem; }
.dlg-plan__buy { margin-top: auto; }

/* Plan sin enlazar con Stripe: se ve, pero no se puede contratar todavía. */
.dlg-plan__pending {
  margin: auto 0 0;
  font-size: .9375rem;
  color: var(--dlg-text-2);
  font-style: italic;
}

/* El error de la pasarela: lo escribe checkout.js junto al botón que falló. */
.checkout-error {
  margin: .625rem 0 0;
  font-size: .9375rem;
  color: var(--color-error, #a4262c);
}

.checkout-error:empty { display: none; }

.dlg-sessions { max-width: 44rem; margin: 0 auto; }
.dlg-sessions__list { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.dlg-session {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--dlg-rule);
}

.dlg-session__num {
  flex: 0 0 2rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dlg-rule);
  font-variant-numeric: tabular-nums;
}

.dlg-session__title { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.dlg-session__title a { color: inherit; text-decoration: none; }
.dlg-session__title a:hover { color: var(--dlg-main); }
.dlg-session__excerpt { margin: .25rem 0 0; font-size: .9375rem; color: var(--dlg-text-2); }

/* ── Vídeo y mapa embebidos ───────────────────────────────── */

.dlg-video, .dlg-map { margin: 0 0 1.75rem; }
.dlg-video iframe, .dlg-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 4px;
}
.dlg-map iframe { aspect-ratio: 4 / 3; }
.dlg-video__wrap { margin: 0 0 1.5rem; }

/* ── Fichas ───────────────────────────────────────────────── */

.dlg-article--persona .dlg-figure img { max-width: 12rem; border-radius: 50%; }

.dlg-datalist {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  margin: 0 0 1.5rem;
  font-size: .9375rem;
}
.dlg-datalist dt { font-weight: 600; color: var(--dlg-text-2); }
.dlg-datalist dd { margin: 0; }

.dlg-social { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9375rem; }
.dlg-buy { margin: 0 0 1.75rem; }

/* ── Acceso del lector (/acceder/) ─────────────────────────── */

.dlg-auth { max-width: 30rem; margin: 0 auto; }

.dlg-auth__panel { margin: 2rem 0; }

.dlg-auth__form { display: grid; gap: .5rem; }

.dlg-auth__label { font-size: .9375rem; font-weight: 600; }

.dlg-auth__input {
  padding: .75rem .9rem;
  border: 1px solid var(--dlg-rule);
  border-radius: 4px;
  font: inherit;
  font-size: 1rem;   /* < 16px hace que iOS haga zoom al enfocar */
}
.dlg-auth__input:focus {
  outline: 2px solid var(--dlg-main);
  outline-offset: 1px;
  border-color: var(--dlg-main);
}

.dlg-auth__form .btn { margin-top: .5rem; }

.dlg-auth__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.dlg-auth__logout { font-size: .9375rem; color: var(--dlg-text-2); }

.dlg-auth__message {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-left: 3px solid var(--dlg-rule);
  background: var(--dlg-grey-50);
  font-size: .9375rem;
}
.dlg-auth__message[data-kind="ok"]    { border-left-color: #2e7d32; }
.dlg-auth__message[data-kind="error"] { border-left-color: var(--dlg-main); }

/* ── Portada ─────────────────────────────────────────────────
   Bloques de `dlg-portada.php`, calcados de `Home V1` (nodo
   260:1559). Todo el color y la tipografía salen de los tokens
   de arriba: aquí no debería aparecer ni un hex. */

.dlg-home { display: flex; flex-direction: column; gap: 3.5rem; }

/* Antetítulo de categoría: es el Other/Category del Figma. */
.dlg-kicker {
  display: inline-block;
  font-family: var(--dlg-font-serif);
  font-size: var(--dlg-cat);
  line-height: var(--dlg-cat-lh);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dlg-main);
  text-decoration: none;
  margin-bottom: .35rem;
}
.dlg-kicker:hover { text-decoration: underline; }

/* Rótulo de sección: filete rojo arriba, como en el diseño. */
.dlg-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--dlg-main);
  padding-top: .75rem;
  margin-bottom: 1.5rem;
}
.dlg-section__title {
  margin: 0;
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint3);
  line-height: var(--dlg-hint3-lh);
  color: var(--dlg-text);
}
.dlg-section__more {
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-btn);
  color: var(--dlg-main);
  text-decoration: none;
  white-space: nowrap;
}
.dlg-section__more::after { content: " \2192"; }
.dlg-section__more:hover { text-decoration: underline; }

/* Destacado principal + columna de breves. */
.dlg-home__lead { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .dlg-home__lead { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
}

.dlg-hero { position: relative; display: flex; flex-direction: column; }
.dlg-hero__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--dlg-grey-100); }
.dlg-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sobre la foto, con velo, como en la maqueta. Si no hay foto el
   velo sobraría, así que el bloque cae a fondo sólido. */
.dlg-hero__body {
  background: var(--dlg-secondary);
  color: var(--dlg-contrast);
  padding: 1.5rem;
}
@media (min-width: 48rem) {
  .dlg-hero__media + .dlg-hero__body {
    position: absolute;
    inset: auto 0 0 0;
    /* Es --dlg-secondary (#1C1C1C) al 92%; va en rgba porque un degradado
       necesita el canal alfa y el token es opaco. */
    background: linear-gradient(transparent, rgba(28, 28, 28, .92) 45%);
    padding: 4rem 1.75rem 1.75rem;
  }
}
.dlg-hero__title {
  margin: 0 0 .5rem;
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-h2);
  line-height: var(--dlg-h2-lh);
}
.dlg-hero__title a { color: inherit; text-decoration: none; }
.dlg-hero__title a:hover { text-decoration: underline; }
.dlg-hero__excerpt {
  margin: 0 0 .5rem;
  font-size: var(--dlg-p-md);
  line-height: var(--dlg-p-lh);
  color: var(--dlg-grey-200);
}
.dlg-hero__date { font-size: var(--dlg-p-sm); color: var(--dlg-grey-300); }

/* Breves: solo antetítulo y titular. */
.dlg-home__aside, .dlg-briefs { display: grid; gap: 1.25rem; }
.dlg-briefs { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.dlg-brief { border-top: 1px solid var(--dlg-rule); padding-top: .75rem; }
.dlg-brief__title {
  margin: 0;
  font-family: var(--dlg-font-sans);
  font-weight: 400;
  font-size: var(--dlg-h5);
  line-height: var(--dlg-h5-lh);
}
.dlg-brief__title a { color: var(--dlg-text); text-decoration: none; }
.dlg-brief__title a:hover { color: var(--dlg-main); }

/* Llamada a la suscripción. */
.dlg-cta {
  background: var(--dlg-gradient);
  color: var(--dlg-contrast);
  padding: 2.5rem 1.75rem;
  text-align: center;
}
.dlg-cta__title {
  margin: 0 0 .5rem;
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint3);
  line-height: var(--dlg-hint3-lh);
}
.dlg-cta__text {
  margin: 0 auto 1.25rem;
  max-width: 46rem;
  font-size: var(--dlg-p-md);
  line-height: var(--dlg-p-lh);
}
.dlg-cta .btn { background: var(--dlg-contrast); color: var(--dlg-main); border-color: var(--dlg-contrast); }
.dlg-cta .btn:hover { background: var(--dlg-red-50); }

/* Coberturas: banda ancha con el texto sobre la imagen. */
.dlg-banners { display: flex; flex-direction: column; gap: 1.25rem; }
.dlg-banner { position: relative; overflow: hidden; background: var(--dlg-secondary); }
.dlg-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 1; opacity: .55; }
.dlg-banner__body { padding: 1.5rem; color: var(--dlg-contrast); }
.dlg-banner__img + .dlg-banner__body { position: absolute; inset: auto 0 0 0; }
.dlg-banner__title {
  margin: 0 0 .35rem;
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-h4);
  line-height: var(--dlg-h4-lh);
}
.dlg-banner__title a { color: inherit; text-decoration: none; }
.dlg-banner__title a:hover { text-decoration: underline; }
.dlg-banner__excerpt { margin: 0; font-size: var(--dlg-p-sm); line-height: var(--dlg-p-lh); color: var(--dlg-grey-100); }

/* Regiones. En el Figma cada una lleva su mapa; aquí van en texto
   hasta que se decida de dónde sale esa imagen. */
.dlg-regions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.dlg-region {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: 1rem;
  background: var(--dlg-layer);
  border: 1px solid var(--dlg-rule);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.dlg-region:hover { border-color: var(--dlg-main); background: var(--dlg-contrast); }
.dlg-region__name {
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-btn);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dlg-main);
  text-align: center;
}

/* Libro destacado. */
.dlg-book {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: 2.5rem 1.75rem;
  background: var(--dlg-layer);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .dlg-book { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.dlg-book__media { display: block; justify-self: center; max-width: 15rem; }
.dlg-book__cover { width: 100%; height: auto; display: block; }
.dlg-book__title {
  margin: 0 0 .5rem;
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint2);
  line-height: var(--dlg-hint2-lh);
}
.dlg-book__title a { color: var(--dlg-text); text-decoration: none; }
.dlg-book__title a:hover { color: var(--dlg-main); }
.dlg-book__subtitle { margin: 0 0 1.25rem; font-size: var(--dlg-p-md); line-height: var(--dlg-p-lh); color: var(--dlg-text-2); }

.dlg-empty { color: var(--dlg-text-3); font-size: var(--dlg-p-md); }

/* ── Chrome: cabecera, menú y pie ────────────────────────────
   Sustituyen a los del core vía `site/templates/nav.php` y
   `footer.php`. El core estiliza `nav` y `footer` POR ELEMENTO
   —y su `nav` es `position: fixed`—, así que aquí hay que
   deshacerlo: el chrome de DLG son dos filas estáticas. */

.dlg-topbar {
  background: var(--dlg-contrast);
  border-bottom: 1px solid var(--dlg-rule);
}
.dlg-topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.dlg-topbar__left  { justify-self: start; }
.dlg-topbar__right { justify-self: end; display: flex; align-items: center; gap: .75rem; }
.dlg-topbar__logo  { display: inline-flex; }
.dlg-topbar__logo .nav-logo__img { height: 44px; width: auto; display: block; }

.dlg-topbar__cta,
.dlg-topbar__login {
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-btn);
  line-height: var(--dlg-btn-lh);
  text-decoration: none;
  padding: .5rem .9rem;
  white-space: nowrap;
}
.dlg-topbar__cta { background: var(--dlg-main); color: var(--dlg-contrast); }
.dlg-topbar__cta:hover { background: var(--dlg-main-hover); }
.dlg-topbar__login { color: var(--dlg-text); }
.dlg-topbar__login:hover { color: var(--dlg-main); }

.dlg-social { display: flex; align-items: center; gap: .6rem; }
.dlg-social__link { color: var(--dlg-text); display: inline-flex; }
.dlg-social__link:hover { color: var(--dlg-main); }

/* El core deja `nav` fijo y con blur. Aquí no: el chrome de DLG
   ocupa dos filas y la segunda tiene que fluir con la página. */
nav.dlg-nav {
  position: static;
  padding: 0;
  background: var(--dlg-contrast);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--dlg-rule);
  display: block;
}
.dlg-nav__list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.dlg-nav__item { position: relative; }
.dlg-nav__item > a,
.dlg-nav__label {
  display: inline-block;
  padding: .85rem 0;
  font-family: var(--dlg-font-serif);
  font-size: var(--dlg-nav);
  line-height: var(--dlg-nav-lh);
  color: var(--dlg-text);
  text-decoration: none;
  cursor: pointer;
}
.dlg-nav__item > a:hover,
.dlg-nav__item:hover > .dlg-nav__label { color: var(--dlg-main); }
.dlg-nav__item--sub > .dlg-nav__label::after { content: " \25BE"; font-size: .7em; }

/* Desplegable. Sin JS: se abre con hover y con foco dentro, para
   que también funcione con teclado. */
.dlg-nav__sub {
  position: absolute;
  top: 100%; left: 0;
  z-index: 90;
  min-width: 12rem;
  margin: 0; padding: .5rem 0;
  list-style: none;
  background: var(--dlg-contrast);
  border: 1px solid var(--dlg-rule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
}
.dlg-nav__item--sub:hover > .dlg-nav__sub,
.dlg-nav__item--sub:focus-within > .dlg-nav__sub { opacity: 1; visibility: visible; }
.dlg-nav__sub a {
  display: block;
  padding: .45rem 1rem;
  font-family: var(--dlg-font-sans);
  font-size: var(--dlg-p-md);
  color: var(--dlg-text);
  text-decoration: none;
}
.dlg-nav__sub a:hover { background: var(--dlg-layer); color: var(--dlg-main); }
.dlg-nav__toggle { display: none; }

/* Pie. */
footer.dlg-footer {
  background: var(--dlg-secondary);
  color: var(--dlg-grey-200);
  padding: 3.5rem 1.5rem 1.5rem;
}
.dlg-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .dlg-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}
.dlg-footer__heading {
  margin: 0 0 .75rem;
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-h4);
  line-height: var(--dlg-h4-lh);
  color: var(--dlg-main);
}
.dlg-footer__about {
  margin: 0 0 1rem;
  font-size: var(--dlg-p-sm);
  line-height: var(--dlg-p-lh);
  max-width: 40ch;
}
.dlg-footer__legal,
.dlg-footer__links { list-style: none; margin: 0; padding: 0; }
.dlg-footer__legal { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: .75rem; }
.dlg-footer__links li { margin-bottom: .4rem; }
.dlg-footer__legal a,
.dlg-footer__links a,
.dlg-footer__contact a {
  color: var(--dlg-grey-200);
  font-size: var(--dlg-p-sm);
  text-decoration: none;
}
.dlg-footer__legal a:hover,
.dlg-footer__links a:hover { color: var(--dlg-contrast); }
.dlg-footer__contact { margin: 0; font-size: var(--dlg-p-sm); }
.dlg-footer__contact a { color: var(--dlg-main); }
.dlg-footer .dlg-social__link { color: var(--dlg-grey-200); }
.dlg-footer .dlg-social__link:hover { color: var(--dlg-contrast); }
.dlg-footer__copy {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dlg-grey-800);
  font-size: var(--dlg-p-sm);
  color: var(--dlg-grey-400);
}

@media (max-width: 47.99rem) {
  .dlg-topbar__inner { grid-template-columns: 1fr auto; row-gap: .75rem; }
  .dlg-topbar__left { grid-column: 1 / -1; order: 3; justify-self: center; }
  .dlg-nav__list { gap: 1rem; overflow-x: auto; flex-wrap: nowrap; }
  .dlg-nav__sub { position: static; opacity: 1; visibility: visible; border: 0; box-shadow: none; padding: 0; }
  .dlg-nav__item--sub > .dlg-nav__label::after { content: ""; }
}

/* ── Página de artículo ──────────────────────────────────────
   Una sola maqueta para las dos caras: lo único que cambia es
   que la noticia intercala su tira de relacionadas. Ver
   `dlg-articulo.php`. */

.dlg-article-page { position: relative; }

/* Barra de compartir. En pantalla ancha va al margen izquierdo
   y se queda pegada; en móvil, en fila sobre el artículo. */
.dlg-share { display: flex; gap: .5rem; margin: 0 0 1.25rem; }
.dlg-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--dlg-layer);
  border: 1px solid var(--dlg-rule);
  color: var(--dlg-text-2);
}
.dlg-share__link:hover { background: var(--dlg-main); border-color: var(--dlg-main); color: var(--dlg-contrast); }

/* Lista de guardados en «Mi cuenta». */
.dlg-fav-list { list-style: none; margin: 0; padding: 0; }
.dlg-fav-list__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--dlg-rule);
}
.dlg-fav-list__item a { color: var(--dlg-text-1); text-decoration: none; }
.dlg-fav-list__item a:hover { color: var(--dlg-main); }
.dlg-fav-list__date { color: var(--dlg-text-3); white-space: nowrap; font-size: .875rem; }

/* Guardar en favoritos. Comparte caja con los enlaces de compartir para que la barra no
   cambie de forma al aparecer: el botón llega oculto y lo enciende `favoritos.js`. */
.dlg-share__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  padding: 0;
  background: var(--dlg-layer);
  border: 1px solid var(--dlg-rule);
  color: var(--dlg-text-2);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.dlg-share__fav:hover { background: var(--dlg-main); border-color: var(--dlg-main); color: var(--dlg-contrast); }
.dlg-share__fav[disabled] { opacity: .5; cursor: progress; }
.dlg-share__fav.is-guardado { background: var(--dlg-main); border-color: var(--dlg-main); color: var(--dlg-contrast); }
/* El texto es para lectores de pantalla: en la barra solo cabe el icono. */
.dlg-share__fav-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (min-width: 75rem) {
  .dlg-share {
    position: absolute;
    top: 0; left: -3.5rem;
    flex-direction: column;
    margin: 0;
  }
}

.dlg-figure__caption {
  margin-top: .5rem;
  font-family: var(--dlg-font-sans);
  font-size: var(--dlg-p-sm);
  line-height: var(--dlg-p-lh);
  color: var(--dlg-text-3);
}

/* «Ampliar»: una franja, no una rejilla. */
.dlg-ampliar {
  margin: 2rem 0;
  padding: .85rem 1.1rem;
  background: var(--dlg-layer);
  border-left: 3px solid var(--dlg-main);
  font-size: var(--dlg-p-md);
  line-height: var(--dlg-p-lh);
}
.dlg-ampliar__label { font-weight: 700; color: var(--dlg-text-2); }
.dlg-ampliar a { color: var(--dlg-main); font-weight: 700; text-decoration: none; }
.dlg-ampliar a:hover { text-decoration: underline; }

/* La llamada del artículo es la de la portada, más contenida. */
.dlg-cta--inline { margin: 3rem 0; padding: 2rem 1.5rem; }

/* `dlgRelated()` usa este rótulo desde antes que existiera el de
   la portada. Se igualan aquí para que las dos familias de
   bloques se lean igual, en vez de tocar el helper y arrastrar a
   cobertura, seminario y newsletter. */
.dlg-section-title {
  margin: 0 0 1.5rem;
  padding-top: .75rem;
  border-top: 2px solid var(--dlg-main);
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint3);
  line-height: var(--dlg-hint3-lh);
  color: var(--dlg-text);
}
.dlg-related { margin-top: 3rem; }

/* ── Mi cuenta ───────────────────────────────────────────────
   Shell estático: lo rellena mi-cuenta.js. Lo que se ve antes
   de que responda la API son los estados vacíos de aquí. */

.dlg-account { max-width: 52rem; }
.dlg-account__alt { margin-left: .75rem; font-size: var(--dlg-p-md); color: var(--dlg-main); }

.dlg-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--dlg-rule);
  margin-bottom: 2rem;
}
.dlg-tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: .65rem .1rem;
  cursor: pointer;
  font-family: var(--dlg-font-sans);
  font-size: var(--dlg-p-md);
  color: var(--dlg-text-2);
}
.dlg-tabs__tab:hover { color: var(--dlg-main); }
.dlg-tabs__tab[aria-selected="true"] {
  color: var(--dlg-main);
  border-bottom-color: var(--dlg-main);
  font-weight: 700;
}

.dlg-fields { margin: 0 0 1.5rem; }
.dlg-field {
  display: grid;
  gap: .15rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--dlg-rule);
}
@media (min-width: 36rem) { .dlg-field { grid-template-columns: 12rem 1fr; } }
.dlg-field dt {
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-p-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dlg-text-3);
}
.dlg-field dd { margin: 0; font-size: var(--dlg-p-md); color: var(--dlg-text); }

/* Una tabla ancha empuja la pantalla fuera de la ventana si su
   contenedor no puede encoger: `main` es elemento de rejilla y
   `min-width: auto` lo impide. El overflow de aquí no salva nada
   sin ese `min-width: 0`. */
.dlg-table-wrap { overflow-x: auto; min-width: 0; }
.dlg-table { width: 100%; border-collapse: collapse; font-size: var(--dlg-p-md); }
.dlg-table th, .dlg-table td { padding: .7rem .75rem; text-align: left; white-space: nowrap; }
.dlg-table thead th {
  border-bottom: 2px solid var(--dlg-main);
  font-family: var(--dlg-font-sans);
  font-size: var(--dlg-p-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dlg-text-3);
}
.dlg-table tbody tr { border-bottom: 1px solid var(--dlg-rule); }
.dlg-table tbody tr:nth-child(odd) { background: var(--dlg-grey-50); }
.dlg-table__row--muted { color: var(--dlg-text-3); }

.dlg-linkish {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--dlg-main); cursor: pointer; text-decoration: underline;
}

/* `main` cede ante una tabla ancha si no se le dice que puede
   encoger. Verificado en producción, no es teórico. */
main { min-width: 0; }

/* ── Personas: equipo y colaboradores ────────────────────────
   Fichas de `/equipo/` (nodo 260:3496). La foto va en cuadrado
   y el nombre en serif, como el diseño. */

.dlg-people { display: flex; flex-direction: column; gap: 2.5rem; }

.dlg-person { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .dlg-person { grid-template-columns: 11rem minmax(0, 1fr); }
}
.dlg-person__media { display: block; }
.dlg-person__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--dlg-grey-100);
}
.dlg-person__photo--empty { background: var(--dlg-layer); border: 1px solid var(--dlg-rule); }
.dlg-person__name {
  margin: .15rem 0 .5rem;
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint3);
  line-height: var(--dlg-hint3-lh);
}
.dlg-person__name a { color: var(--dlg-text); text-decoration: none; }
.dlg-person__name a:hover { color: var(--dlg-main); }
.dlg-person__bio {
  margin: 0 0 .6rem;
  font-size: var(--dlg-p-md);
  line-height: var(--dlg-p-lh);
  color: var(--dlg-text-2);
}
.dlg-person__contact { margin: 0; font-size: var(--dlg-p-sm); color: var(--dlg-text-3); }
.dlg-person__contact a { color: var(--dlg-main); text-decoration: none; }
.dlg-person__contact a:hover { text-decoration: underline; }

/* Colaboradores: en corto, tres columnas. */
.dlg-colabs {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.dlg-colab__name {
  display: block;
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-p-md);
  color: var(--dlg-main);
  text-decoration: none;
}
.dlg-colab__name:hover { text-decoration: underline; }
.dlg-colab .dlg-person__contact { margin-top: .1rem; }

.dlg-updated {
  margin: -.75rem 0 1.5rem;
  font-size: var(--dlg-p-sm);
  color: var(--dlg-text-3);
}

/* ── Ficha de libro ──────────────────────────────────────────
   La portada es vertical y va al lado del texto, no encima:
   por eso no usa la figura ancha de artículo. */

.dlg-book-page { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 48rem) {
  .dlg-book-page { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.dlg-book-page__media { justify-self: center; max-width: 15rem; width: 100%; }
.dlg-book-page .dlg-book__cover { width: 100%; height: auto; display: block; }
.dlg-buy { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

.dlg-bookdata {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--dlg-layer);
}
.dlg-bookdata__title {
  margin: 0 0 .75rem;
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-h4);
  line-height: var(--dlg-h4-lh);
  color: var(--dlg-text);
}
.dlg-bookdata .dlg-field { border-bottom-color: var(--dlg-green-100); }
.dlg-bookdata .dlg-field:last-child { border-bottom: 0; }

/* ── Listados propios ────────────────────────────────────────
   Coberturas y libros tienen el suyo; los demás siguen con la
   rejilla genérica de `content-list`. */

/* Coberturas: banda más alta que en la portada, porque aquí la
   pieza es el objeto principal y no un bloque más. */
.dlg-banner--tall .dlg-banner__img { aspect-ratio: 21 / 9; }
@media (max-width: 47.99rem) {
  .dlg-banner--tall .dlg-banner__img { aspect-ratio: 16 / 9; }
}

.dlg-count { margin: .5rem 0 0; font-size: var(--dlg-p-sm); color: var(--dlg-text-3); }

/* Libros: manda la portada. */
.dlg-bookgrid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.dlg-bookcard__media { display: block; margin-bottom: .75rem; }
.dlg-bookcard__media img { width: 100%; height: auto; display: block; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.dlg-bookcard__nocover {
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--dlg-layer);
  border: 1px solid var(--dlg-rule);
}
.dlg-bookcard__title {
  margin: 0 0 .25rem;
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-h5);
  line-height: var(--dlg-h5-lh);
}
.dlg-bookcard__title a { color: var(--dlg-text); text-decoration: none; }
.dlg-bookcard__title a:hover { color: var(--dlg-main); }
.dlg-bookcard__sub { margin: 0; font-size: var(--dlg-p-sm); line-height: var(--dlg-p-lh); color: var(--dlg-text-3); }

/* Lateral. Solo lo lleva el listado de libros: es la única
   pantalla de v1 con columna. */
.dlg-withaside { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .dlg-withaside { grid-template-columns: minmax(0, 1fr) 16rem; }
}
.dlg-withaside__main { min-width: 0; }
.dlg-aside__block { margin-bottom: 2rem; }
.dlg-aside__title {
  margin: 0 0 .75rem;
  padding-top: .6rem;
  border-top: 2px solid var(--dlg-main);
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-h4);
  line-height: var(--dlg-h4-lh);
  color: var(--dlg-text);
}
.dlg-aside__list { list-style: none; margin: 0; padding: 0; }
.dlg-aside__list li { padding: .6rem 0; border-bottom: 1px solid var(--dlg-rule); }
.dlg-aside__list a {
  display: block;
  font-size: var(--dlg-p-md);
  line-height: 1.35;
  color: var(--dlg-text);
  text-decoration: none;
}
.dlg-aside__list a:hover { color: var(--dlg-main); }
.dlg-aside__date { display: block; margin-top: .15rem; font-size: var(--dlg-p-sm); color: var(--dlg-text-3); }

/* ── Conmutador de periodicidad ──────────────────────────────
   Mensual / Anual en la página de planes. Sin JS se ven todos
   los planes: peor página, pero nadie se queda sin suscribirse. */

.dlg-switch {
  display: inline-flex;
  border: 1px solid var(--dlg-rule);
  margin: 0 0 2rem;
}
.dlg-switch__opt {
  appearance: none;
  background: var(--dlg-contrast);
  border: 0;
  padding: .6rem 1.5rem;
  cursor: pointer;
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-btn);
  color: var(--dlg-text-2);
}
.dlg-switch__opt[aria-pressed="true"] { background: var(--dlg-main); color: var(--dlg-contrast); }
.dlg-switch__opt:not([aria-pressed="true"]):hover { color: var(--dlg-main); }

.dlg-subscribe__prose { margin: 3rem 0 0; }
.dlg-subscribe__prose h2 {
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint3);
  line-height: var(--dlg-hint3-lh);
  margin: 2rem 0 .5rem;
}

/* ── FAQ del core, vestidas de DLG ───────────────────────────
   El bloque lo genera `getFaqBlock()` con las clases del core
   (`faq-section`, `faq-item`, `<details>`), así que aquí solo se
   reviste: cambiarle el marcado obligaría a tocar el core y a
   que lo heredaran todos los sitios.

   OJO: no confundir con `.s-faq`, que es la sección componible
   —otro mecanismo distinto con el mismo nombre—. */

.faq-section { margin: 3.5rem 0 0; }
.faq-section .section-tag { display: none; }
.faq-section .section-title {
  margin: 0 0 1.5rem;
  padding-top: .75rem;
  border-top: 2px solid var(--dlg-main);
  font-family: var(--dlg-font-serif);
  font-weight: 400;
  font-size: var(--dlg-hint3);
  line-height: var(--dlg-hint3-lh);
  color: var(--dlg-text);
  text-transform: uppercase;
}
.faq-section .faq-item { border-bottom: 1px solid var(--dlg-rule); }
.faq-section .faq-item summary {
  cursor: pointer;
  padding: .9rem 0;
  font-family: var(--dlg-font-sans);
  font-weight: 700;
  font-size: var(--dlg-p-md);
  color: var(--dlg-text);
  list-style: none;
}
.faq-section .faq-item summary::-webkit-details-marker { display: none; }
.faq-section .faq-item summary::after { content: " +"; color: var(--dlg-main); float: right; }
.faq-section .faq-item[open] summary::after { content: " –"; }
.faq-section .faq-item summary:hover { color: var(--dlg-main); }
.faq-section .faq-item p {
  margin: 0 0 1rem;
  font-size: var(--dlg-p-md);
  line-height: var(--dlg-p-lh);
  color: var(--dlg-text-2);
}