/* ============================================================
   Tribuna de Andalucía — diseño editorial profesional.
   Identidad: slab serif (Bitter, eco del logo) + verde #5ea295.
   Referencias de jerarquía: eleconomista.es / canarias7.es.
   ============================================================ */
@font-face { font-family: 'Playfair'; src: url('/assets/fonts/playfair-var.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Bitter'; src: url('/assets/fonts/bitter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --brand: #16A396;        /* ÚNICO verde oficial de toda la web */
  --brand-dark: #16A396;   /* mismo verde: sin variaciones más oscuras */
  --deep: #0d2320;         /* verde tinta corporativo (topbar/footer/opinión) */
  --accent: #b8412e;       /* rojo editorial para "última hora" */
  --ink: #14181c;
  --body: #2c3339;
  --muted: #6b7680;
  --line: #e2ddd3;
  --paper: #faf8f3;        /* papel cálido, identidad de prensa */
  --bg-soft: #f4f1ea;
  --serif: 'Bitter', Georgia, 'Times New Roman', serif;
  --display: 'Playfair', 'Bitter', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --maxw: 1200px;
  --ad-label: #9aa3ab;     /* cintillo de publicidad: legible pero discreto */
  --ad-rule: #e8e4db;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--body); background: var(--paper); line-height: 1.6; font-size: 16.5px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- Topbar ---------- */
.topbar { background: var(--deep); color: #b9cec7; font-size: .78rem; border-bottom: 2px solid var(--brand); }
.topbar-in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 10px; }
.topbar-links { display: flex; gap: 18px; align-items: center; }
.topbar-tools { display: flex; gap: 14px; align-items: center; }
.topbar-tools .social { color: #b9cec7; } .topbar-tools .social:hover { color: #fff; }
.topbar-tools .social-svg { display: inline-flex; align-items: center; }
.topbar-links a { color: #b9cec7; font-weight: 600; }
.topbar-links a:hover { color: #fff; }
.topbar-links .social { font-size: .95rem; }

/* ---------- Mancheta: logo centrado, estilo cabecera clasica ---------- */
/* La cabecera respira más ancha que el cuerpo (1200px): fecha y edición PDF
   se van hacia los bordes en pantallas grandes, sin tanto blanco lateral. */
.topbar-in, .masthead-in, .nav-inner { max-width: 1480px; }
.masthead { background: var(--paper); padding: 30px 0 22px; }
.masthead-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.masthead-flank { font-size: .78rem; color: var(--muted); line-height: 1.5; display: flex; align-items: center; }
.masthead-flank.left { gap: 12px; }
.masthead-flank.right { justify-content: flex-end; text-align: right; }
.masthead-flank strong { display: block; color: var(--ink); font-weight: 700; }
.masthead-flank strong a { color: var(--brand-dark); }
.masthead-date { display: block; }
.logo { display: inline-flex; align-items: center; justify-content: center; }
.logo-v { display: none; }
/* max-height + max-width (ambos topes, sin alto fijo) para que el logo escale
   SIEMPRE proporcionalmente: en escritorio manda el alto (56px), en móvil manda
   el ancho (92vw) y el alto baja solo. Con height:56px fijo + max-width, al topar
   el ancho el logo se achataba (el apaisado de TdA es el que más lo sufría). */
.logo img { height: auto; width: auto; max-height: 56px; max-width: 92vw; }

/* ---------- Navegacion: doble filete de periodico ---------- */
.main-nav { background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.nav-inner { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.nav-list { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; max-width: 100%; }
.nav-list::-webkit-scrollbar { display: none; }
.nav-list a { display: block; padding: 13px 11px; color: var(--ink); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: color .15s, border-color .15s; }
.nav-list a:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }

/* Botón hamburguesa (solo móvil/tablet) + menú de secciones a pantalla completa. */
.nav-burger { display: none; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 4px; }
.nav-burger svg { display: block; }
.nav-overlay { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; animation: nav-fade .18s ease; }
/* display:flex gana al [hidden] del navegador (display:none): hay que reponerlo. */
.nav-overlay[hidden] { display: none; }
@keyframes nav-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-overlay-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 3px double var(--ink); position: sticky; top: 0; background: var(--paper); }
.nav-overlay-brand { display: inline-flex; align-items: center; }
.nav-overlay-brand img { height: 38px; width: auto; display: block; }
.nav-overlay-close { background: none; border: 0; color: var(--ink); cursor: pointer; padding: 4px; display: flex; }
.nav-overlay-list { display: flex; flex-direction: column; padding: 2px 0; }
.nav-overlay-list a { padding: 9px 22px; font-family: var(--serif); font-size: 1.08rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.nav-overlay-list a:hover { color: var(--brand); background: var(--bg-soft); }
.nav-overlay-list a.nav-home { display: inline-flex; align-items: center; color: var(--brand); padding-top: 11px; padding-bottom: 11px; }
.nav-overlay-foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 28px; border-top: 1px solid var(--line); }
.nav-overlay-links { display: flex; flex-wrap: wrap; gap: 20px; }
.nav-overlay-links a { color: var(--brand-dark); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .6px; }
.nav-overlay-social { display: flex; align-items: center; gap: 22px; }
.nav-overlay-social a { color: var(--ink); font-size: 1.3rem; display: inline-flex; align-items: center; }
.nav-overlay-social a:hover { color: var(--brand); }
[data-theme="dark"] .nav-overlay, [data-theme="dark"] .nav-overlay-bar { background: var(--surface); }
/* Escritorio: los 8 ítems caben de sobra en 1480px, así que el menú NO es un
   contenedor con scroll (evita el "scroll horizontal raro"). Solo cuando la
   ventana es estrecha y no caben, se habilita el scroll lateral silencioso. */
/* Móvil/tablet (≤1024px): cabecera compacta [☰ · logo vertical · PDF]. El menú
   horizontal de secciones pasa a la hamburguesa; el logo usa la versión vertical
   (la del sticky), más pequeña. La misma terna viaja en la barra sticky. */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .masthead { padding: 12px 0; }
  .masthead-in { grid-template-columns: auto 1fr auto; gap: 10px; }
  .masthead-flank.left { justify-content: flex-start; }
  .masthead-date { display: none; }
  .logo-h { display: none; }
  .logo-v { display: inline-flex; }
  .logo img { max-height: 42px; max-width: 62vw; }
}

/* Sticky: barra FIJA independiente con SOLO el logo centrado (fuera del flujo:
   no reajusta el scroll al aparecer/desaparecer). */
.sticky-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 54px; background: var(--paper); border-bottom: 3px double var(--ink); box-shadow: 0 2px 14px rgba(20,24,28,.1); display: flex; align-items: center; justify-content: center; transform: translateY(-100%); transition: transform .25s ease; will-change: transform; }
.sticky-bar.show { transform: translateY(0); }
.sticky-in { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sticky-logo { display: inline-flex; }
.sticky-logo img { height: 38px; width: auto; display: block; }
.sticky-pdf { display: none; align-items: center; }
.sticky-pdf img { height: 38px; width: auto; display: block; border-radius: 3px; }
.sticky-pdf span { font-weight: 800; font-size: .8rem; color: var(--brand-dark); }
@media (max-width: 720px) {
  /* La topbar desbordaba en móviles estrechos: buscador solo icono, redes al
     footer y menos separación entre servicios para que quepa sin apreturas. */
  .topbar-in { gap: 8px; }
  .topbar-links { gap: 14px; }
  .topbar-search-btn span { display: none; }
  .topbar-tools .social { display: none; }
}

/* Buscador en overlay */
.topbar-search-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: #b9cec7; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0; }
.topbar-search-btn svg { display: block; }
.topbar-search-btn:hover { color: #fff; }
.search-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(13,35,32,.92); display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; }
.search-overlay[hidden] { display: none; }
.search-overlay-form { display: flex; gap: 8px; align-items: center; width: min(680px, 92vw); position: relative; }
.search-overlay-form input { flex: 1; padding: 16px 20px; border: 0; border-bottom: 2px solid var(--brand); background: transparent; color: #fff; font-family: var(--display); font-size: 1.5rem; }
.search-overlay-form input:focus { outline: 0; }
.search-overlay-form input::placeholder { color: rgba(255,255,255,.4); }
.search-overlay-form button[type=submit] { background: var(--brand); color: #fff; border: 0; padding: 14px 24px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.search-close { position: absolute; top: -60px; right: 0; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }

/* Botón subir arriba */
.to-top[hidden] { display: none; }
.to-top { position: fixed; right: 18px; bottom: 78px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; border: 0; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28); opacity: .9; transition: background .2s, transform .2s; }
.to-top:hover { background: var(--brand-dark); transform: translateY(-2px); }

/* ---------- Última hora ---------- */
.breaking { background: var(--paper); border-bottom: 1px solid var(--line); }
.breaking-in { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: .9rem; }
.breaking-label { background: var(--accent); color: #fff; font-weight: 800; font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; flex-shrink: 0; }
.breaking a { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breaking a:hover { color: var(--brand-dark); }

/* ---------- Tipografía editorial ---------- */
h1, h2, h3, .card-title, .lead-title { font-family: var(--serif); color: var(--ink); }
.kicker { color: var(--brand-dark); font-family: var(--sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.kicker:hover { color: var(--accent); }
.meta { color: var(--muted); font-size: .74rem; margin: 0; text-transform: uppercase; letter-spacing: .3px; }
.byline { color: var(--ink); font-weight: 600; }

/* ---------- Apertura ---------- */
.opening { display: grid; gap: 26px; padding: 26px 0 8px; border-bottom: 1px solid var(--line); }
.lead-story { display: block; }
.lead-story .lead-img { display: block; overflow: hidden; }
.lead-story .lead-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .4s ease; }
.lead-story:hover .lead-img img { transform: scale(1.02); }
.lead-body { padding-top: 14px; }
.lead-body { padding-top: 0; }
.lead-title { font-family: var(--display); font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.07; margin: 8px 0 12px; font-weight: 800; letter-spacing: -.5px; }
.lead-title a:hover { color: var(--brand-dark); }
.lead-excerpt { font-family: var(--serif); font-size: 1.18rem; color: #3c464f; margin: 0 0 12px; line-height: 1.55; }
.opening-side { display: grid; gap: 0; align-content: start; }
.side-story { display: grid; grid-template-columns: 1fr 96px; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.side-story .card-img { order: 2; }
.side-story .card-body { order: 1; }
.side-story:last-child { border-bottom: 0; }
.side-story .card-img img { aspect-ratio: 1; object-fit: cover; }
.side-story .card-title { font-size: .98rem; line-height: 1.3; margin: 2px 0 6px; font-weight: 700; }
.side-story .kicker { font-size: .66rem; }
/* Destacados de segundo nivel: grandes (titular potente + entradilla), un
   paso por debajo del lead. Escala: lead > estos > laterales > actualidad. */
.opening-sub { display: grid; grid-template-columns: 1fr; gap: 28px 24px; padding: 24px 0 10px; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .opening-sub { grid-template-columns: repeat(3, 1fr); } }
.opening-sub .card-title { font-family: var(--display); font-size: 1.38rem; line-height: 1.14; letter-spacing: -.2px; margin: 6px 0 8px; font-weight: 800; }
.opening-sub .excerpt { font-size: .9rem; }

/* ---------- Tarjetas ---------- */
.card-title a:hover, .lead-title a:hover, .most-read a:hover { color: var(--brand-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--brand); }
.card .excerpt { color: var(--body); font-size: .88rem; margin: 4px 0 8px; line-height: 1.5; }
.card-img { overflow: hidden; display: block; }
.card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-img img, .lead-story:hover .lead-img img { transform: scale(1.03); }
.lead-img { overflow: hidden; display: block; }
.lead-img img { transition: transform .4s ease; }
.card.row { display: grid; grid-template-columns: minmax(110px, 230px) 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.card.row .card-title { font-size: 1.24rem; line-height: 1.22; margin: 3px 0 6px; font-weight: 800; }
/* Breve con miniatura a la derecha; sin foto, el texto ocupa todo (no se rompe). */
.card.mini { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.card.mini:last-child { border-bottom: 0; }
.card.mini .card-img { flex: 0 0 96px; order: 2; }
.card.mini .card-body { flex: 1; order: 1; min-width: 0; }
.card.mini .card-img img { aspect-ratio: 1; object-fit: cover; }
.card.mini .card-title { font-size: .95rem; line-height: 1.32; margin: 2px 0 4px; font-weight: 700; }
.card.mini .kicker { font-size: .64rem; }
.card.mini .meta { margin: 0; }
.card.section-lead .card-title { font-size: 1.45rem; line-height: 1.2; margin: 6px 0 8px; font-weight: 800; }

/* ---------- Bandas y bloques ---------- */
.band { display: grid; gap: 34px; margin: 8px 0 30px; }
.block-title { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; border-top: 4px solid var(--brand); border-bottom: 1px solid var(--line); padding: 9px 0 8px; margin: 34px 0 6px; font-family: var(--sans); }
.block-title a { color: var(--ink); }
.block-title.block-link a:hover { color: var(--brand-dark); }
.section-block { margin-bottom: 6px; }
.section-grid { display: grid; gap: 22px; padding-top: 14px; }
/* Columna derecha del bloque de sección: breves con miniatura apilados con su
   interlineado natural (padding + filete). Antes usaba justify-content:
   space-between y, con solo 4 piezas frente a un destacado alto, repartía
   huecos enormes entre noticias; ahora quedan juntas arriba. */
.section-rest { display: flex; flex-direction: column; }
.section-rest .card.mini:first-child { padding-top: 0; }
.section-rest .card.mini:last-child { border-bottom: 0; padding-bottom: 0; }
.grid-4 { display: grid; gap: 30px 26px; padding-top: 14px; }
/* Relacionadas: sin el margen por defecto del <h3> (abría un hueco grande
   foto↔titular) y con las piezas más separadas entre sí. */
.grid-4 .card-body { padding-top: 9px; }
.grid-4 .kicker { display: inline-block; margin-bottom: 3px; }
.grid-4 .card-title { font-size: 1.02rem; line-height: 1.28; margin: 0 0 6px; font-weight: 700; }
.grid-4 .meta { margin-top: 2px; }

/* "Actualidad", dos niveles: destacado a lo ancho + rejilla uniforme a 3 col. */
.actualidad { padding-top: 14px; }
.actualidad > .card.row { padding-top: 0; }
.actualidad-grid { display: grid; grid-template-columns: 1fr; gap: 24px 20px; margin-top: 18px; }
@media (min-width: 560px) { .actualidad-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .actualidad-grid { grid-template-columns: repeat(3, 1fr); } }
.actualidad-grid .card-title { font-size: .99rem; line-height: 1.3; margin: 4px 0 6px; font-weight: 700; }
/* 3er escalón: dúo de tarjetas grandes con entradilla. */
.actualidad-duo { display: grid; grid-template-columns: 1fr; gap: 24px 20px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .actualidad-duo { grid-template-columns: 1fr 1fr; } }
.actualidad-duo .card-title { font-size: 1.28rem; line-height: 1.2; margin: 5px 0 7px; font-weight: 800; }
/* 4º escalón: breves con miniatura, a dos columnas. */
.actualidad-minis { display: grid; grid-template-columns: 1fr; gap: 0 34px; margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (min-width: 700px) {
  .actualidad-minis { grid-template-columns: 1fr 1fr; }
  .actualidad-minis .card.mini:nth-last-child(-n+2) { border-bottom: 0; }
}
/* Cierre de la columna de Actualidad: módulo "Más noticias" con titulares a dos
   columnas (llena el ancho de la columna y acompaña la altura del sidebar). */
.more-news { margin-top: 30px; }
.more-news .block-title { margin-top: 0; }
.more-news-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 40px; }
@media (min-width: 700px) {
  .more-news-list { grid-template-columns: 1fr 1fr; }
  /* sin filete bajo la última pieza de cada columna */
  .more-news-list li:nth-last-child(-n+2) { border-bottom: 0; }
}
.more-news-list li { border-bottom: 1px solid var(--line); }
.more-news-list li:last-child { border-bottom: 0; }
.mn-link { display: block; padding: 12px 0 12px 14px; position: relative; }
.mn-link::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--brand); opacity: 0; transition: opacity .15s; }
.mn-link:hover::before { opacity: 1; }
.mn-kicker { display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-dark); margin-bottom: 3px; }
.mn-title { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.32; color: var(--ink); }
.mn-link:hover .mn-title { color: var(--brand-dark); }

/* Rail publicitario integrado como columna del bloque de sección (Layout A):
   el banner lateral queda DENTRO de la rejilla, junto al destacado y los breves,
   no suelto a lo ancho. Clase con prefijo mod-/section- (sin la palabra "ad"
   en el contenedor visible) para no ser ocultado por bloqueadores. */
.section-rail { align-self: stretch; min-width: 0; display: flex; flex-direction: column; }
.section-rail .mod-unit { width: 100%; max-width: 300px; margin: 0 auto; }
.section-rail .mod-unit img { width: 100%; height: auto; }
/* Titulares bajo el banner para rellenar el rail hasta la altura del destacado. */
.rail-links { list-style: none; margin: 16px 0 0; padding: 0; }
.rail-links li { border-top: 1px solid var(--line); }
.rail-links li:first-child { border-top: 0; }
.rail-links a { display: block; padding: 10px 0; }
.rail-links .rl-kicker { display: block; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-dark); margin-bottom: 2px; }
.rail-links .rl-title { font-family: var(--serif); font-weight: 700; font-size: .9rem; line-height: 1.28; color: var(--ink); }
.rail-links a:hover .rl-title { color: var(--brand-dark); }
/* Estado "relleno" (lo activa el balanceador JS): la columna reparte su
   contenido para llegar justo al alto del destacado, sin hueco al pie. */
/* Las columnas se apilan compactas desde arriba. Antes usaban
   `justify-content: space-between`, que repartía el sobrante en los huecos
   entre piezas: cuando quedaba solo una pieza, el sobrante entero (80-90 px)
   se iba al fondo y el bloque parecía roto. Ahora el sobrante lo absorbe la
   foto del destacado (.lead-grow), que es el único elemento elástico. */
.section-rest.is-filled, .section-rail.is-filled .rail-links { justify-content: flex-start; }
[data-fill-pool] > [hidden] { display: none; }
/* Destacado que crece: cuando el banner es más alto, la foto estira para que el
   destacado llegue a la misma altura y no quede hueco bajo el texto. */
.section-lead.lead-grow { display: flex; flex-direction: column; }
.section-lead.lead-grow .card-img { flex: 1 1 auto; min-height: 0; }
.section-lead.lead-grow .card-img img { height: 100%; width: 100%; object-fit: cover; }

/* Bloque de sección en formato tarjetas (layout B). */
.section-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 18px; padding-top: 14px; }
@media (min-width: 1000px) { .section-cards { grid-template-columns: repeat(4, 1fr); } }
/* Rejilla de 4: los titulares se recortan a 3 líneas. Con titulares libres el
   más largo (6 líneas) fijaba la altura de fila y los cortos quedaban con un
   hueco de 70 px hasta la fecha, que va anclada al fondo. */
.section-cards .card-title { font-size: 1.02rem; line-height: 1.3; margin: 4px 0 6px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Las tarjetas en rejilla se estiran a la altura de fila; empujamos la fecha al
   fondo (cuerpo flexible) para que las de titular corto no dejen hueco debajo.
   MISMA REGLA para las secciones interiores (.sec-cards): antes iban por su
   cuenta, sin recorte ni fecha anclada, y las tarjetas de una fila acababan a
   alturas distintas dejando huecos entre noticias. */
.section-cards .card, .actualidad-grid .card, .sec-cards .card { display: flex; flex-direction: column; }
.section-cards .card .card-body, .actualidad-grid .card .card-body,
.sec-cards .card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.section-cards .card .meta, .actualidad-grid .card .meta,
.sec-cards .card .meta { margin-top: auto; padding-top: 6px; }
/* Titular a 3 líneas y entradilla a 2, con la altura RESERVADA (min-height):
   así todas las tarjetas de la rejilla miden lo mismo y no queda hueco variable
   entre la entradilla y la fecha según lo largo que sea el titular. */
.sec-cards .card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(3 * 1.6em); }
.sec-cards .card .excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.5em); }

/* ---------- Sidebar ---------- */
/* Columna con separación uniforme, como .article-rail. Antes el margen solo
   lo llevaban los `section`, y los banners (que son div.mod-unit o .mod-stack)
   quedaban pegados al módulo siguiente. Los márgenes propios de los hijos se
   anulan para que mande el `gap` y no se sumen. */
.sidebar { display: flex; flex-direction: column; gap: 26px; }
.sidebar > section, .sidebar > .mod-stack, .sidebar > .mod-unit, .sidebar > .foro-side { margin-bottom: 0; }
.sidebar > .mod-unit { margin-left: auto; margin-right: auto; }

/* Faldón de prensa: caja cuadrada de filete fino con banda de cabecera en
   verde corporativo. Antes cada módulo iba por su cuenta ("Lo más leído" sin
   caja, PDF y boletín como fichas con DOS filetes verdes: el de la caja más el
   del .block-title global), y una primera versión con esquinas redondeadas y
   sombra no casaba con el resto del sitio, que es plano y cuadrado. Ahora los
   cuatro módulos comparten cáscara y cabecera en el lenguaje del periódico. */
.most-read-box, .pdf-promo, .newsletter-box, .rail-mostread {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 0 0 16px; overflow: hidden; box-shadow: none;
}
.most-read-box > .block-title, .pdf-promo > .block-title,
.newsletter-box > .block-title, .rail-mostread > .block-title {
  display: block; margin: 0; padding: 12px 16px 11px;
  border-top: 0; border-bottom: 0;
  background: var(--brand-dark); color: #fff;
  font-size: .8rem; letter-spacing: 1.3px;
}

.most-read { list-style: none; margin: 0; padding: 4px 16px 0; counter-reset: mr; }
.most-read li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.most-read li:last-child { border-bottom: 0; padding-bottom: 0; }
.most-read a { font-family: var(--serif); font-weight: 700; font-size: .95rem; line-height: 1.35; color: var(--ink); }
.most-read a:hover { color: var(--brand-dark); }
.mr-num { font-family: var(--display); font-size: 1.65rem; font-weight: 800; color: var(--brand-dark); line-height: 1; letter-spacing: -1px; }

/* CTA: en la columna lateral ocupa el ancho de la tarjeta (antes era un botón
   pequeño alineado a la izquierda que quedaba suelto bajo la portada). */
.btn-news { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-dark); color: #fff; font-family: var(--sans); font-weight: 700;
  font-size: .86rem; padding: 11px 20px; border-radius: 0;
  transition: background .16s ease; }
.btn-news:hover { background: var(--deep); }
.pdf-promo .btn-news, .newsletter-box .btn-news { display: flex; margin: 0 16px; }

.pdf-promo-cover { position: relative; display: block; margin: 14px 16px 12px; border-radius: 0;
  overflow: hidden; border: 1px solid var(--line); transition: border-color .16s ease; }
.pdf-promo-cover:hover { border-color: var(--brand-dark); }
.pdf-promo-cover img { width: 100%; display: block; }
/* La portada no se leía como enlace: al pasar por encima aparece la acción. */
.pdf-cover-cta { position: absolute; inset: auto 0 0 0; display: block; padding: 9px 10px;
  background: var(--brand-dark); color: #fff; font-family: var(--sans); font-weight: 800;
  font-size: .74rem; text-transform: uppercase; letter-spacing: 1.4px; text-align: center;
  transform: translateY(100%); transition: transform .18s ease; }
.pdf-promo-cover:hover .pdf-cover-cta, .pdf-promo-cover:focus-visible .pdf-cover-cta { transform: none; }
/* Fuera de la columna lateral (móvil/tablet) la tarjeta ocupa todo el ancho:
   se limita la portada para que no crezca a tamaño de póster. */
@media (max-width: 999px) { .pdf-promo-cover { max-width: 300px; margin-left: auto; margin-right: auto; } }
/* El número, como titular del módulo; debajo, qué es y qué pasa al pulsar.
   Antes solo había un "Junio de 2026" en gris suelto y un "Leer el PDF": no
   quedaba claro que fuera el periódico impreso de este mes. */
.pdf-title { font-family: var(--serif); font-weight: 800; font-size: 1.04rem;
  color: var(--ink); margin: 0 16px 2px; line-height: 1.25; }
.pdf-lead { color: var(--muted); margin: 0 16px 12px; line-height: 1.4; }

.newsletter-box p, .pdf-promo p { font-size: .88rem; }
.news-pitch { display: flex; align-items: flex-start; gap: 11px; margin: 14px 16px 15px; }
.news-pitch p { margin: 0; line-height: 1.45; color: var(--body); }
.news-ico { flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 0; color: var(--brand-dark);
  background: #eaf2f0; background: color-mix(in srgb, var(--brand) 20%, transparent); }

/* ---------- Artículo ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: transparent; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .1s linear; }
.article-shell { display: grid; gap: 30px; margin: 22px auto 34px; max-width: var(--maxw); align-items: start; }
@media (min-width: 1000px) { .article-shell { grid-template-columns: minmax(0, 1fr) 320px; } }
/* Hoja de lectura plana, sin tarjeta flotante: la sombra/filete/esquina
   redondeada daban aspecto de blog. Columna limpia sobre el papel. */
.single { background: #fff; padding: clamp(18px, 4vw, 48px) clamp(20px, 4vw, 56px); min-width: 0; }
/* Barra lateral NO sticky: los banners se van viendo al desplazarse hacia abajo. */
.article-rail { display: flex; flex-direction: column; gap: 26px; }
/* .rail-mostread comparte la cáscara de las tarjetas laterales (ver Sidebar). */
.breadcrumbs { font-size: .78rem; color: var(--muted); margin: 10px 0 4px; }
.breadcrumbs a { color: var(--brand-dark); font-weight: 600; }
.single h1 { font-family: var(--display); font-size: clamp(1.7rem, 4.5vw, 2.7rem); line-height: 1.1; margin: 10px 0 12px; font-weight: 800; letter-spacing: -.4px; }
.single .subtitle { font-family: var(--serif); font-size: 1.15rem; color: var(--body); margin: 0 0 8px; }
.single .standfirst { font-family: var(--serif); font-size: 1.22rem; color: var(--body); font-weight: 500; line-height: 1.5; margin: 4px 0 16px; }
.byline-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; margin: 14px 0; }
.byline-who { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.byline-who strong { display: block; color: var(--ink); font-size: .9rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 800; font-size: 1.15rem; flex-shrink: 0; }
.rt { white-space: nowrap; }
.share { display: flex; gap: 6px; }
.sh { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 4px; color: #fff; font-weight: 700; font-size: .8rem; padding: 0 10px; }
.sh.wa { background: #1fa855; } .sh.tw { background: #14181c; } .sh.fb { background: #1877f2; } .sh.in { background: #0a66c2; }
.sh:hover { opacity: .85; }
.featured { margin: 4px 0 20px; }
.featured img { border-radius: 2px; }
.featured figcaption, .body-content figcaption { color: var(--muted); font-size: .78rem; padding-top: 6px; }
.body-content { font-size: 1.09rem; line-height: 1.78; color: var(--body); text-align: justify; hyphens: auto; }
/* El usuario quiere el cuerpo justificado también en móvil. */
@media (max-width: 640px) { .body-content { text-align: justify; } }
.body-content p { margin: 0 0 1.25em; }
.body-content.lead > p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4em; font-weight: 800; float: left; line-height: .82; padding: 4px 10px 0 0; color: var(--brand-dark); }
.body-content h2, .body-content h3 { margin: 1.4em 0 .5em; line-height: 1.25; }
.body-content img { margin: 16px auto; }
.body-content iframe { max-width: 100%; }
.body-content blockquote { position: relative; border-left: 0; margin: 1.6em 0; padding: .4em 0 .4em 3.2rem; font-family: var(--serif); font-size: 1.18rem; font-style: italic; color: var(--ink); }
.body-content blockquote::before { content: '\201C'; position: absolute; left: 0; top: -.15em; font-family: var(--serif); font-size: 3.6rem; font-weight: 800; color: var(--brand); line-height: 1; }
.body-content a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.embed { margin: 18px 0; } .embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; }
.tags { margin-top: 22px; }
.tags a { display: inline-block; background: var(--bg-soft); border: 1px solid var(--line); padding: 4px 12px; margin: 0 6px 6px 0; border-radius: 14px; font-size: .78rem; font-weight: 600; color: var(--body); }
.tags a:hover { border-color: var(--brand); color: var(--brand-dark); }

/* Pie de artículo: separador + compartir, siempre al final de la pieza. */
.article-foot { margin: 34px 0 4px; padding-top: 18px; border-top: 2px solid var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.article-foot .foot-label { font-family: var(--sans); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.8px; color: var(--ink); }
.article-foot .share { gap: 8px; }

/* Móvil: hoja a pantalla completa (sin marco gris) y cabecera centrada. */
@media (max-width: 720px) {
  .article-shell { margin: 0 auto 24px; gap: 22px; }
  .single { margin: 0 -16px; padding: 22px 18px 30px; }
  .single-head { text-align: center; }
  .single-head .kicker { margin-left: auto; margin-right: auto; }
  .single h1 { letter-spacing: -.2px; }
  .article-foot { justify-content: center; gap: 12px; }
}
.related { max-width: var(--maxw); }

/* ---------- Archivo / búsqueda ---------- */
.archive-head { padding-top: 16px; }
.archive-head h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); border-left: 6px solid var(--brand); padding-left: 14px; margin: 8px 0; }
.archive-desc { color: var(--muted); max-width: 700px; }

/* Cabecera y rejilla de sección */
.section-head { padding: 18px 0 2px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
/* line-height explícito: heredaba el 1.6 del body y un titular de dos líneas
   a 2.9rem quedaba con un interlineado enorme. */
.section-title { font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; margin: 4px 0 8px; color: var(--brand-dark); }
.section-desc { color: var(--muted); max-width: 720px; margin: 0 0 10px; font-size: .98rem; }
.section-opening { padding-top: 18px; }
.sec-cards { display: grid; gap: 24px; padding-top: 6px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .sec-cards { grid-template-columns: repeat(2, 1fr); } }
.pager { margin: 24px 0 6px; }
.tda-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tda-pager-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.tda-pager-btn, .tda-pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; font-size: .9rem; font-weight: 600; color: var(--ink); background: #fff; }
.tda-pager-btn:hover, .tda-pager-num:hover { border-color: var(--brand); color: var(--brand-dark); }
.tda-pager-num.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.tda-pager-btn.is-disabled { color: #b7bfc5; background: #f5f6f7; cursor: default; }
.tda-pager-dots { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 38px; color: var(--muted); }
.search-form.big { display: flex; gap: 8px; margin: 18px 0; }
.search-form.big input { flex: 1; padding: 12px 16px; border: 2px solid var(--line); border-radius: 6px; font: inherit; }
.search-form.big button { background: var(--brand-dark); color: #fff; border: 0; padding: 12px 22px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.result-count { color: var(--muted); font-size: .9rem; }
.editions { list-style: none; padding: 14px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.editions a { display: block; background: var(--bg-soft); border: 1px solid var(--line); padding: 14px; border-radius: 6px; font-weight: 700; font-family: var(--serif); color: var(--ink); }
.editions a:hover { border-color: var(--brand); color: var(--brand-dark); }

/* ---------- Publicidad ---------- */
.mod-slot { display: block; text-align: center; margin: 18px 0; }
.mod-masthead-billboard { min-height: 90px; max-width: 728px; width: 100%; }
.mod-billboard-top, .mod-billboard-mid { min-height: 90px; }
.mod-sidebar-300 { min-height: 250px; }
.mod-in-article-top { min-height: 60px; margin: 10px 0 18px; }

/* ---------- Paginación ---------- */
nav[role="navigation"] { margin: 26px 0; font-size: .9rem; }

/* ---------- Footer ---------- */
/* Pie en el verde corporativo #16A396 con tinta oscura (legible). */
.site-footer { background: var(--brand); color: #063029; margin-top: 48px; padding: 44px 0 0; font-size: .88rem; }
.footer-grid { display: grid; gap: 30px; padding-bottom: 28px; }
.footer-brand img { filter: brightness(0) invert(1); opacity: .97; margin-bottom: 12px; }
.footer-brand p { color: #06342d; }
.site-footer h3 { color: #fff; font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #063029; font-weight: 600; } .site-footer a:hover { color: #fff; }
.footer-social { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.footer-social a { color: #fff; font-size: 1.3rem; display: inline-flex; align-items: center; opacity: .95; }
.footer-social a:hover { color: #fff; opacity: 1; }
.footer-news h3 { margin-bottom: 8px; }
.footer-news p { margin: 0 0 12px; }
.footer-news .btn-news { background: #fff; color: var(--brand); margin-top: 0; font-weight: 800; }
.footer-news .btn-news:hover { background: var(--deep); color: #fff; }
.footer-legal { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.32); padding-top: 16px; padding-bottom: 18px; font-size: .78rem; color: #fff; }
.footer-legal a { color: #fff; }
.footer-legal a:hover { text-decoration: underline; }
/* Móvil: pie centrado y sin la lista de secciones (ya está en el menú). */
@media (max-width: 899px) {
  .footer-grid { text-align: center; justify-items: center; gap: 22px; padding-bottom: 20px; }
  .footer-brand img { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }
  .site-footer nav[aria-label="Secciones"] { display: none; }
  .footer-news p { margin-bottom: 10px; }
  .footer-legal { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .opening { grid-template-columns: 1.9fr 1fr; }
  .opening-side { border-left: 1px solid var(--line); padding-left: 26px; align-content: space-between; }
  .opening-side .side-story:first-child { padding-top: 0; }
  .band-main { border-right: 1px solid var(--line); padding-right: 30px; }
  .band { grid-template-columns: 1fr 320px; }
  .section-grid { grid-template-columns: 1.6fr 1fr; }
  /* Con rail publicitario integrado: destacado + breves + banner (300px). */
  .section-grid.has-rail { grid-template-columns: 1.5fr 1fr 300px; }
  .section-rest { border-left: 1px solid var(--line); padding-left: 24px; }
  .section-rail { border-left: 1px solid var(--line); padding-left: 24px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
}
@media (max-width: 899px) {
  .masthead .mod-slot { display: none; }
}

/* Aviso de vista previa (borradores) */
.preview-banner { background: #b8412e; color: #fff; text-align: center; font-size: .8rem; font-weight: 700; padding: 8px 14px; letter-spacing: .4px; }

/* Botón WhatsApp + banner cookies */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; background: #1fa855; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.wa-float:hover { background: #17853f; color: #fff; }
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; background: var(--ink); color: #dbe3e8; border-radius: 8px; padding: 14px 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .85rem; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.cookie-banner[hidden] { display: none; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; }
.ck-btn { border: 0; border-radius: 5px; padding: 9px 16px; font-weight: 700; cursor: pointer; background: var(--brand); color: #fff; }
.ck-btn.sec { background: transparent; border: 1px solid #5c6b74; color: #dbe3e8; }
@media (min-width: 700px) { .cookie-banner { left: auto; max-width: 560px; } }

/* ---------- Página del boletín (/newsletter) ----------
   Usa la maqueta estándar del sitio (.band + .sidebar), así que aquí solo va
   lo propio: las ventajas en tres columnas y el formulario ancho. Antes el
   formulario iba en una ficha estrecha a un lado y no se entendía que era el
   contenido principal de la página. */
.news-points { list-style: none; display: grid; gap: 22px; margin: 26px 0 32px; padding: 0; }
@media (min-width: 700px) { .news-points { grid-template-columns: repeat(3, 1fr); } }
.news-points li { border-top: 3px solid var(--brand); padding-top: 16px; }
/* El envoltorio del icono NO lleva estilos de caja: el cuadro verde y el
   centrado son de .news-ico, el mismo icono que usa la ficha del boletín. */
.news-points .np-ico { display: block; margin-bottom: 12px; }
.news-points strong { display: block; font-family: var(--sans); font-size: .95rem;
  color: var(--ink); margin-bottom: 5px; }
/* Solo la descripción, que es hija DIRECTA del li. Antes esta regla decía
   `span:not(.np-ico)` y también alcanzaba a .news-ico: le pisaba el
   `display:flex` y el sobre se iba a la esquina del cuadro verde. */
.news-points li > span:not(.np-ico) { display: block; font-size: .88rem; line-height: 1.5; color: var(--body); }

.news-form-card { background: #fff; border: 1px solid var(--line); padding: 0 24px 26px; }
.news-form-card > .block-title { margin: 0 -24px 0; padding: 12px 24px 11px;
  background: var(--brand-dark); color: #fff; border: 0; font-size: .8rem; letter-spacing: 1.3px; }
.news-note { font-size: .92rem; color: var(--body); margin: 16px 0 20px; }

/* Rejilla del formulario: dos campos por fila en pantallas anchas. */
.news-form { display: grid; gap: 0 22px; }
@media (min-width: 620px) { .news-form { grid-template-columns: 1fr 1fr; } }
.news-form .nf-wide { grid-column: 1 / -1; }
.news-form .nf-foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 18px; }
.news-form .foro-submit { margin-top: 0; background: var(--brand-dark); }
.news-form .foro-submit:hover { background: var(--deep); }
.news-form .foro-check { margin: 0; }

[data-theme="dark"] .news-form-card { background: var(--surface); }
[data-theme="dark"] .news-form-card > .block-title { background: #23443f; }

/* ---------- Publicidad real ---------- */
/* Contenedor de una creatividad: se ajusta a su ancho y se centra. */
.mod-unit { width: fit-content; max-width: 100%; margin: 0 auto; }
.mod-unit img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
/* Cintillo "PUBLICIDAD" SIEMPRE arriba, con filetes a izquierda y derecha.
   Los filetes llevan base fija (flex-basis 16px) porque el contenedor es
   `width: fit-content`: con `flex: 1 1 auto` se quedaban en 0 px dentro de una
   caja ajustada al ancho de la imagen y el cintillo salía como un "PUBLICIDAD"
   suelto, sin filetes, distinto al del resto del sitio.
   Tono propio y más apagado que --muted: debe identificarse sin competir con
   el contenido editorial ni con la propia creatividad. */
.mod-label { display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  color: var(--ad-label); font-family: var(--sans); font-size: .56rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px; white-space: nowrap; }
.mod-label::before, .mod-label::after { content: ""; flex: 1 0 16px; height: 1px; background: var(--ad-rule); }
/* Anuncios intercalados en el cuerpo del articulo: centrados y con ancho fijo
   de 300px (asi las creatividades sobredimensionadas no rompen la columna). */
.single > .mod-unit { width: 300px; max-width: 100%; margin: 32px auto; }
.single > .mod-unit img { width: 100%; height: auto; }
/* Pila de anuncios de barra lateral: banners uno encima de otro. */
.mod-stack { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.only-desktop { display: none; }
@media (min-width: 1000px) { .only-desktop { display: block; } .only-mobile { display: none; } }
.mod-popup { position: fixed; inset: 0; z-index: 200; background: rgba(10,14,18,.65); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mod-popup-box { position: relative; max-width: min(480px, 92vw); }
.mod-popup-box img { max-height: 80vh; width: auto; max-width: 100%; border-radius: 6px; }
.mod-popup-close { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; font-size: 1.2rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.brand-rail { position: fixed; top: 120px; z-index: 40; }
.brand-rail img { max-width: 160px; height: auto; }
.rail-izq { left: 8px; } .rail-dcho { right: 8px; }

/* ---------- Te sugerimos ---------- */
.suggested-card { display: grid; gap: 22px; background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 8px 26px -10px rgba(47,107,96,.55); }
/* Variante compacta: incrustado al pie de la columna derecha de la apertura. */
.suggested-card.sc-side { display: block; padding: 0; margin-top: 16px; overflow: hidden; }
.sc-side .suggested-img img { border-radius: 0; }
.sc-side .suggested-body { padding: 12px 16px 14px; }
.sc-side .suggested-tag { margin-bottom: 6px; }
/* Foto más contenida (banda apaisada) para que el bloque no crezca de más. */
.sc-side .suggested-img img { aspect-ratio: 21 / 9; }
/* Título del sugerido lateral algo mayor que los breves pero sin heredar el
   hero grande (que usa clamp→2rem); subimos especificidad para fijarlo. */
.suggested-card.sc-side h3 { font-size: 1.05rem; line-height: 1.32; margin: 2px 0 0; font-family: var(--serif); font-weight: 700; }
.suggested-card .kicker { color: #e9faf5; }
.suggested-card h3 { font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.15; margin: 6px 0 10px; font-weight: 800; }
.suggested-card h3 a { color: #fff; }
.suggested-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.suggested-card .excerpt { color: #eafaf5; font-size: 1rem; }
.suggested-card .meta, .suggested-card .meta time, .suggested-card .byline { color: #cfeee6; }
.suggested-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.suggested-tag { display: inline-block; background: rgba(255,255,255,.18); color: #fff; font-family: var(--sans); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; padding: 4px 10px; border-radius: 3px; margin-bottom: 4px; }
@media (min-width: 768px) { .suggested-card { grid-template-columns: 1.1fr 1fr; align-items: center; } }
[data-theme="dark"] .suggested-card { background: #2a6a5e; }

/* ---------- Nueva economía (opinión) ---------- */
.opinion-strip { background: var(--deep); color: #e8efec; border-top: 4px solid var(--brand); margin: 26px -16px 10px; padding: 6px 16px 26px; }
.opinion-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.opinion-head .block-title { flex: 1; margin-bottom: 0; }
.opinion-nav { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 6px; }
.op-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, opacity .15s; }
.op-arrow:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); }
.op-arrow:disabled { opacity: .3; cursor: default; }
.opinion-track { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-top: 16px; }
.opinion-track::-webkit-scrollbar { display: none; }
.opinion-card { scroll-snap-align: start; text-align: center; padding: 0 8px; }
.op-photo img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 3px solid var(--brand); }
.op-photo-ph { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 12px; border: 3px solid var(--brand); background: rgba(255,255,255,.08); }
.op-photo-ph span { font-family: var(--serif); font-weight: 800; font-size: 2.6rem; color: #8fd8c8; }
.op-author { color: #8fd8c8; font-weight: 800; font-size: .85rem; letter-spacing: .2px; margin: 0 0 6px; }
.opinion-strip .block-title { border-top: 0; border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; }
.opinion-strip .block-title a { color: #fff; }
.opinion-strip .block-title small { color: #9db8af; }
.opinion-card h3 { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.08rem; line-height: 1.35; margin: 0; color: #fff; }
.opinion-card h3 a { color: #fff; }
.opinion-card h3 a:hover { color: #8fd8c8; }
@media (min-width: 620px) { .opinion-track { grid-auto-columns: calc((100% - 26px) / 2); } }
@media (min-width: 980px) { .opinion-track { grid-auto-columns: calc((100% - 3 * 26px) / 4); } .opinion-strip { margin: 22px 0 8px; border-radius: 8px; border: 1px solid var(--line); border-top: 3px solid var(--ink); } }

/* ============================================================
   EL QUIOSCO — /pdf (Fase 64). Expositor oscuro de la revista:
   hero con el número del mes en 3D y tipografía gigante,
   estantería horizontal deslizable y hemeroteca por años.
   ============================================================ */

/* --- Base técnica de portadas (compartida con PDF.js) --- */
.pdf-cover { display: block; position: relative; background: #e8e4da; border-radius: 3px; overflow: hidden; aspect-ratio: 727 / 932; }
.pdf-cover .pdf-canvas-wrap { display: block; width: 100%; height: 100%; }
.pdf-cover img, .pdf-cover canvas.pdf-cover-canvas { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); }
.pdf-cover:not(.cover-ready) .pdf-canvas-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, #e8e4da 30%, #f2efe8 50%, #e8e4da 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* Botones que reutiliza el lector /pdf/{slug} */
.btn-read { background: var(--brand-dark); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: 6px; font-size: .92rem; }
.btn-read:hover { background: var(--ink); color: #fff; }
.btn-dl { background: transparent; color: var(--ink); font-weight: 700; padding: 12px 20px; border-radius: 6px; border: 1px solid var(--line); font-size: .92rem; }
.btn-dl:hover { border-color: var(--brand); color: var(--brand-dark); }

/* --- Lienzo oscuro a sangre completa --- */
/* En páginas que terminan en el kiosco (a sangre, fondo oscuro), el margen
   superior del footer dejaba una franja de papel en blanco antes del pie. */
main:has(.kiosco) + .site-footer { margin-top: 0; }
.kiosco { padding-bottom: clamp(44px, 6vw, 76px); margin: 0 calc(50% - 50vw); color: #dfeae5;
  background:
    radial-gradient(60vw 40vw at 85% -6%, rgba(22,163,150,.16), transparent 60%),
    radial-gradient(50vw 36vw at -10% 30%, rgba(47,107,96,.14), transparent 60%),
    linear-gradient(180deg, #0b1613 0%, #0d201b 45%, #0c1a16 100%); }
.kiosco a { text-decoration: none; }
/* Portadas sobre fondo oscuro: sombra profunda + lomo, sin filos de papel blancos */
.kiosco .pdf-cover { box-shadow: 0 16px 34px -12px rgba(0,0,0,.7); }
.kiosco .pdf-cover::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 12%); pointer-events: none; }

/* ---------- HERO: el número del mes ---------- */
.kh { position: relative; overflow: hidden; padding: clamp(46px, 6vw, 84px) 20px clamp(64px, 6vw, 96px); }
.kh-bgword { position: absolute; top: clamp(-30px, -2vw, -10px); right: -1%; font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(7rem, 24vw, 21rem); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.055); letter-spacing: .01em; user-select: none; pointer-events: none; white-space: nowrap; }
.kh-in { position: relative; max-width: 1200px; margin: 0 auto; display: grid; gap: 52px; align-items: center; }
@media (min-width: 900px) { .kh-in { grid-template-columns: 1.08fr .92fr; } }
/* Hero con el lector embebido (última edición cargada automáticamente). */
.kh-hero-embed { padding-bottom: clamp(28px, 4vw, 44px); }
.kh-in-lite { position: relative; max-width: 1000px; margin: 0 auto 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.kh-hero-embed .kh-kicker { margin: 0 0 8px; }
.kh-hero-embed h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0; }
.kh-viewer { position: relative; }
@media (max-width: 640px) {
  .kh-in-lite { margin-bottom: 14px; align-items: flex-start; }
  .kh-hero-embed .kh-actions { width: 100%; }
  .kh-hero-embed .kh-read, .kh-hero-embed .kh-dl { flex: 1; justify-content: center; }
}
.kh-kicker { font-family: var(--sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2.4px; color: #7fd0be; margin: 0 0 16px; }
.kh-kicker span { opacity: .45; margin: 0 4px; }
.kh h1 { font-family: var(--display); font-size: clamp(3rem, 7.5vw, 5.4rem); font-weight: 800; line-height: .98; letter-spacing: -1px; color: #fff; margin: 0 0 18px; }
.kh h1 span { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--brand); }
.kh-lead { font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.15rem); color: #accbc1; line-height: 1.65; max-width: 46ch; margin: 0 0 18px; }
.kh-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #7e948b; margin: 0 0 28px; }
.kh-meta i { font-style: normal; opacity: .5; }
.kh-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kh-read { display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 1rem; padding: 15px 32px; border-radius: 10px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .15s, box-shadow .15s; }
.kh-read:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.16); }
.kh-dl { display: inline-block; color: #cfe3dc; font-weight: 700; font-size: .92rem; padding: 14px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; transition: border-color .15s, color .15s, background .15s; }
.kh-dl:hover { border-color: var(--brand); color: #fff; background: rgba(22,163,150,.12); }
.kh-scrollhint { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; font-size: .84rem; font-weight: 700; color: #7fd0be; }
.kh-scrollhint:hover { color: #b5eadd; }
.kh-scrollhint svg { animation: kh-bounce 1.8s infinite; }
@keyframes kh-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* El ejemplar del mes: volumen 3D con canto de páginas, brillo y badge */
.kh-cover { position: relative; display: block; max-width: 400px; margin: 0 auto; perspective: 1400px; }
.kh-book { display: block; transform: rotateY(-17deg) rotateX(2deg); transform-style: preserve-3d; border-radius: 3px 8px 8px 3px;
  box-shadow: -2px 0 0 rgba(0,0,0,.35),
    2px 0 0 #f4f1ea, 4px 1px 0 #dedad1, 6px 2px 0 #f4f1ea, 8px 3px 0 #d5d0c6,
    30px 45px 70px -18px rgba(0,0,0,.75);
  transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .45s; }
.kh-cover:hover .kh-book { transform: rotateY(-7deg) rotateX(1deg) translateY(-6px); }
/* Brillo que recorre la portada de vez en cuando */
.kh-book .pdf-canvas-wrap::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); background-size: 280% 100%; background-position: 120% 0;
  animation: kh-sheen 6s ease-in-out infinite; }
@keyframes kh-sheen { 0%, 55% { background-position: 130% 0; } 75%, 100% { background-position: -60% 0; } }
.kh-badge { position: absolute; top: -13px; left: -14px; z-index: 3; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; padding: 7px 14px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 8px 18px -6px rgba(0,0,0,.6); }

/* ---------- EDICIONES ANTERIORES (todas, por años) ---------- */
.karchive { max-width: 1200px; margin: 0 auto; padding: 10px 20px 90px; }
.karchive-head h2 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; color: #fff; margin: 0; }
.karchive-head h2::before { content: ''; display: inline-block; width: 26px; height: 3px; background: var(--brand); border-radius: 2px; margin: 0 12px 5px 0; vertical-align: middle; }
.karchive-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.year-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.year-nav a { padding: 8px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #cfe3dc; font-weight: 800; font-size: .84rem; transition: all .15s; }
.year-nav a:hover { border-color: var(--brand); background: rgba(22,163,150,.16); color: #fff; }
.kyear { scroll-margin-top: 76px; }
.kyear h3 { display: flex; align-items: center; gap: 18px; margin: 40px 0 22px; }
.kyear h3 span { font-family: var(--display); font-size: 2rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); letter-spacing: 1px; }
.kyear h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.2), transparent); }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 34px 24px; }
.kcard-cover { position: relative; transition: transform .22s, box-shadow .22s; }
.kcard-cover:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(127,208,190,.25); }
/* Velo con "Leer edición" al pasar el ratón */
.kcard-hover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(8,14,12,.1), rgba(8,14,12,.68)); opacity: 0; transition: opacity .18s; }
.kcard-hover span { border: 1.5px solid #fff; color: #fff; font-weight: 800; font-size: .8rem; padding: 9px 18px; border-radius: 999px; backdrop-filter: blur(2px); }
.kcard-cover:hover .kcard-hover { opacity: 1; }
.kcard-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
/* Mes + año, mismo estilo que la cabecera del número del mes */
.kcard-title { display: flex; flex-direction: column; line-height: 1.25; }
.kcard-title strong { font-family: var(--serif); font-weight: 700; font-size: .98rem; color: #eef5f2; }
.kcard-title em { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: 1.6px; color: #7e948b; }
.kcard:hover .kcard-title strong { color: #9fe0cf; }
.kcard-dl { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: #accbc1; transition: all .15s; }
.kcard-dl:hover { border-color: var(--brand); color: #fff; background: rgba(22,163,150,.18); }
/* Miniatura enmarcada en blanco, como una portada de periódico de verdad */
.kcard-cover.pdf-cover { background: #fff; padding: 7px; border-radius: 4px; }
.kcard-cover .pdf-canvas-wrap { border-radius: 2px; overflow: hidden; }
.kcard-cover img, .kcard-cover canvas.pdf-cover-canvas,
.kh-cover-m .pdf-cover img, .kh-cover-m .pdf-cover canvas.pdf-cover-canvas { object-fit: contain; transform: none; }
/* No permitir arrastrar ninguna imagen del sitio (portada e interiores) */
img { -webkit-user-drag: none; -khtml-user-drag: none; user-drag: none; }

/* ---------- El quiosco en móvil ---------- */
@media (max-width: 759px) {
  .kh { padding-bottom: 46px; }
  .kh-bgword { font-size: 5.6rem; top: 4px; }
  .kh h1 { font-size: 2.7rem; }
  .kh-cover { max-width: 260px; }
  .kh-actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .kh-read, .kh-dl { justify-content: center; text-align: center; }
  .kgrid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .karchive-head { flex-direction: column; align-items: flex-start; }
  .year-nav { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; padding-bottom: 4px; }
}
/* ---------- Lector de una edición (/pdf/{slug}) — estética oscura de /pdf ---------- */
.pdf-reader { padding: clamp(22px, 4vw, 42px) 20px clamp(40px, 6vw, 72px); }
.pr-top { max-width: 1500px; margin: 0 auto 22px; }
/* Botón de volver: píldora con flecha (sustituye al breadcrumb) */
.pr-back { display: inline-flex; align-items: center; gap: 8px; color: #cfe3dc; font-weight: 700; font-size: .88rem; padding: 9px 20px 9px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; transition: border-color .15s, background .15s, color .15s; margin-bottom: 24px; }
.pr-back:hover { border-color: var(--brand); background: rgba(22,163,150,.14); color: #fff; }
.pr-back svg { transition: transform .15s; }
.pr-back:hover svg { transform: translateX(-3px); }
.pr-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.pr-kicker { font-family: var(--sans); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2.2px; color: #7fd0be; margin: 0 0 7px; }
.pr-head h1 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.5px; color: #fff; margin: 0; line-height: 1.05; }
.pr-pages { font-family: var(--sans); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #7e948b; margin-left: 14px; vertical-align: middle; }
.pr-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pr-read { display: inline-flex; align-items: center; gap: 9px; background: var(--brand); color: #fff; font-weight: 800; font-size: .92rem; padding: 12px 24px; border-radius: 9px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .15s, box-shadow .15s; }
.pr-read:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.16); }
.pr-dl { display: inline-flex; align-items: center; gap: 9px; color: #cfe3dc; font-weight: 700; font-size: .9rem; padding: 12px 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; transition: border-color .15s, background .15s, color .15s; }
.pr-dl:hover { border-color: var(--brand); color: #fff; background: rgba(22,163,150,.12); }
/* Marco del visor: el PDF (páginas blancas) resalta sobre el fondo oscuro */
/* Visor: iframe con el visor COMPLETO de PDF.js (barra, zoom, navegación,
   pinch-zoom en móvil) — igual que la versión en producción. */
.pr-viewer { max-width: 1100px; margin: 0 auto; position: relative; background: #3a3d42; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; box-shadow: 0 34px 74px -26px rgba(0,0,0,.82); }
.pr-viewer iframe { display: block; width: 100%; height: min(88vh, 1300px); border: 0; }
.pr-below, .kh-below { max-width: 1100px; margin: 22px auto 0; display: flex; align-items: center; justify-content: center; gap: 18px 28px; flex-wrap: wrap; }
/* Flipbook (escritorio): hojeable tipo revista, páginas blancas sobre el kiosco. */
.pdf-flip { position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 6px 0; }
.pdf-flip.zoomed { overflow: hidden; }
.pdf-flip.is-loading { min-height: 50vh; }
.pdf-flip.is-loading::before { content: 'Cargando la edición…'; color: #9fc7bd; font-weight: 600; font-size: .9rem; }
.flip-stage { position: relative; margin: 0 auto; }
.flip-book { margin: 0 auto; transition: transform .2s ease; will-change: transform; }
.flip-page { background: #fff; overflow: hidden; }
.flip-canvas { display: block; width: 100%; height: 100%; }
.flip-error { color: #cfe6df; padding: 44px 20px; text-align: center; }
.flip-error a { color: #7fd0be; font-weight: 700; }
/* Capa de arrastre: solo intercepta cuando hay zoom (si no, se hojea normal). */
.flip-pan { display: none; position: absolute; inset: 0; z-index: 4; cursor: grab; }
.pdf-flip.zoomed .flip-pan { display: block; }
.flip-pan.grabbing { cursor: grabbing; }
/* Flechas */
.flip-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(11,22,19,.7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.flip-nav:hover { background: var(--brand); }
.flip-prev { left: 4px; } .flip-next { right: 4px; }
/* Controles de zoom */
.flip-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 8; display: flex; align-items: center; gap: 2px; background: rgba(11,22,19,.82); border-radius: 22px; padding: 4px 6px; }
.fz-btn { width: 32px; height: 32px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.fz-btn:hover { background: var(--brand); }
.fz-lvl { color: #fff; font-size: .74rem; font-weight: 700; min-width: 42px; text-align: center; }
/* Pista de "hojear/ampliar": flechas que laten + rótulo unos segundos. */
.pdf-flip.show-hint .flip-nav { animation: flip-pulse 1.5s ease-in-out infinite; }
@keyframes flip-pulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.16); background: var(--brand); } }
.flip-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(11,22,19,.85); color: #fff; font-size: .8rem; font-weight: 600; padding: 9px 18px; border-radius: 22px; white-space: nowrap; pointer-events: none; z-index: 7; box-shadow: 0 8px 22px -8px rgba(0,0,0,.7); transition: opacity .5s; }
.flip-hint.gone { opacity: 0; }
/* Botón "Ver edición en PDF" (vista alternativa), en verde marca. */
.kh-viewpdf { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.kh-viewpdf:hover { background: var(--brand); color: #fff; filter: brightness(1.09); }
@media (max-width: 700px) { .pdf-flip { display: none; } }

/* Última edición: escritorio = flipbook; móvil = solo portada, y al
   tocarla se abre el PDF nativo del teléfono (mejor lectura en móvil). */
.kh-cover-m { display: none; }
.kh-cover-cta { align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff; font-weight: 800; font-size: .95rem; padding: 13px 24px; border-radius: 10px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.55); }
@media (max-width: 700px) {
  .kh-cover-m { display: block; max-width: 330px; margin: 0 auto; text-align: center; }
  /* Marco blanco a todos lados alrededor de la portada. */
  .kh-cover-m .pdf-cover { display: block; background: #fff; padding: 9px; border-radius: 4px; }
  .kh-cover-m .kh-cover-cta { display: inline-flex; margin-top: 18px; }
}
@media (max-width: 640px) {
  .pr-headrow { flex-direction: column; align-items: flex-start; }
  .pr-viewer iframe { height: 82vh; }
}

/* Teaser de la última edición en el header: mini-ficha portada + datos + CTA. */
.masthead-flank.right .ed-teaser { display: inline-flex; align-items: center; gap: 12px; text-align: right; padding: 6px 6px 6px 10px; border-radius: 9px; transition: background .15s; }
.masthead-flank.right .ed-teaser:hover { background: rgba(22,163,150,.10); }
.ed-teaser-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.28; }
.ed-teaser-eyebrow { font-family: var(--sans); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: var(--brand-dark); }
.ed-teaser-title { font-family: var(--serif); font-size: 1rem; font-weight: 800; color: var(--ink); margin: 1px 0; }
.ed-teaser-cta { font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--muted); }
.ed-teaser:hover .ed-teaser-cta { color: var(--brand-dark); }
.ed-teaser-mini { display: none; font-family: var(--sans); font-size: .74rem; font-weight: 700; line-height: 1.18; color: var(--brand-dark); text-align: left; max-width: 4em; }
/* La portada como periódico real: el marco recorta los márgenes blancos de la
   propia página (imagen escalada un 12% dentro de un contenedor overflow:hidden,
   a la proporción real de la maqueta 727×932) y las "páginas apiladas" las dan
   las capas de sombra del borde derecho/inferior. */
.ed-teaser-cover { flex-shrink: 0; position: relative; width: 70px; aspect-ratio: 727/932; overflow: hidden; border-radius: 2px;
  background: #fff; padding: 3px;
  box-shadow: 1.5px 1.5px 0 0 #fff, 2.5px 2.5px 0 0 rgba(20,24,28,.25), 4px 4px 0 -.5px #fff, 5px 5px 0 -.5px rgba(20,24,28,.2), 6px 10px 20px -6px rgba(20,24,28,.45);
  transition: transform .2s; }
.ed-teaser-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Lomo con sombra interior en el borde izquierdo, como ejemplar doblado. */
.ed-teaser-cover::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(20,24,28,.16); border-radius: 1px;
  background: linear-gradient(90deg, rgba(20,24,28,.15), rgba(20,24,28,0) 14%); pointer-events: none; }
.ed-teaser:hover .ed-teaser-cover { transform: translateY(-2px) rotate(-1deg); }
[data-theme="dark"] .masthead-flank.right .ed-teaser:hover { background: rgba(22,163,150,.16); }
[data-theme="dark"] .ed-teaser-eyebrow { color: #8fd8c8; }

/* Compactado móvil del teaser PDF y de la barra sticky. Va DESPUÉS de las reglas
   base del teaser/sticky para ganar por orden de cascada (misma especificidad). */
@media (max-width: 1024px) {
  .masthead-flank.right .ed-teaser { padding: 0; gap: 8px; }
  .ed-teaser-meta { display: none; }
  .ed-teaser-mini { display: block; }
  .ed-teaser-cover { width: 46px; }
  .sticky-in { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
  .sticky-logo { justify-self: center; }
  .sticky-pdf { display: inline-flex; justify-self: end; }
}

/* ============================================================
   Modo oscuro. Se activa con html[data-theme="dark"] (fijado por
   un script inline en <head> para evitar parpadeo).
   ============================================================ */
[data-theme="dark"] {
  --brand: #16A396;
  --brand-dark: #16A396;
  --ink: #e9edf1;
  --body: #c2ccd3;
  --muted: #8b97a2;
  --line: #2a3138;
  --paper: #0f1417;
  --bg-soft: #161c21;
  --surface: #1a2127;
  --ad-label: #6d777f;
  --ad-rule: #272e35;
}
/* Superficies que estaban en blanco/gris claro */
[data-theme="dark"] .single,
[data-theme="dark"] .newsletter-box,
[data-theme="dark"] .pdf-promo,
[data-theme="dark"] .most-read-box,
[data-theme="dark"] .rail-mostread,
[data-theme="dark"] .edition-featured { background: var(--surface); }
/* Banda de cabecera de los faldones: en oscuro, --brand-dark (#4f9488) con
   texto blanco se queda en ~2,9:1. Se usa un verde tinta más cerrado. */
[data-theme="dark"] .most-read-box > .block-title,
[data-theme="dark"] .pdf-promo > .block-title,
[data-theme="dark"] .newsletter-box > .block-title,
[data-theme="dark"] .rail-mostread > .block-title { background: #23443f; color: #fff; }
[data-theme="dark"] .news-ico { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--brand); }
[data-theme="dark"] .btn-news { background: #23443f; }
[data-theme="dark"] .btn-news:hover { background: var(--brand); color: var(--deep); }
[data-theme="dark"] .footer-news .btn-news { background: #fff; color: var(--brand); }
[data-theme="dark"] .tda-pager-btn,
[data-theme="dark"] .tda-pager-num { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .tda-pager-btn.is-disabled { background: #141a1e; color: #55606a; }
[data-theme="dark"] .tda-pager-num.is-current { color: #0f1417; }
[data-theme="dark"] .pdf-cover { background: #20272c; }
/* Hovers de enlace: verde más claro para que contraste sobre fondo oscuro */
[data-theme="dark"] .card-title a:hover,
[data-theme="dark"] .lead-title a:hover,
[data-theme="dark"] .most-read a:hover,
[data-theme="dark"] .nav-list a:hover { color: #9ad8cc; }
[data-theme="dark"] .nav-list a:hover { border-bottom-color: #9ad8cc; }
/* Sombras más suaves para no "brillar" en oscuro (la hoja del artículo va plana) */
[data-theme="dark"] .newsletter-box,
[data-theme="dark"] .pdf-promo,
[data-theme="dark"] .suggested-card,
[data-theme="dark"] .rail-mostread { box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Botón de tema en la barra superior */
.theme-toggle { display: inline-flex; align-items: center; background: none; border: 0; color: #b9cec7; cursor: pointer; padding: 0; }
.theme-toggle:hover { color: #fff; }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ============================================================
   Interior de artículos de OPINIÓN (columnas firmadas): diseño propio.
   ============================================================ */
.single.is-opinion .single-head { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 6px; }
.op-eyebrow { display: inline-block; color: var(--brand-dark); font-family: var(--sans); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: 2.5px; margin: 2px 0 10px; }
.single.is-opinion h1 { font-style: italic; }
.single.is-opinion .standfirst { font-style: italic; color: var(--muted); max-width: 42rem; margin-left: auto; margin-right: auto; }
.op-byline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.op-portrait { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid var(--brand); flex-shrink: 0; box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.op-portrait-ph { display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-family: var(--serif); font-weight: 800; font-size: 3.2rem; }
.op-meta { text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.4; }
.op-name { font-family: var(--serif); font-size: 1.08rem; font-weight: 800; color: var(--ink); }
.op-role { color: var(--brand-dark); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; }
.op-meta time { color: var(--muted); font-size: .8rem; }
.op-byline .share { margin: 6px 0 0; justify-content: center; }
/* El cuerpo de opinión, algo más grande y con firma al pie */
.single.is-opinion .body-content { font-size: 1.09rem; }
[data-theme="dark"] .op-eyebrow, [data-theme="dark"] .op-role { color: #8fd8c8; }
@media (max-width: 620px) { .op-byline { gap: 10px; } .op-meta { text-align: center; } .op-byline .share { width: 100%; justify-content: center; margin-left: 0; } }

/* ============================================================
   Fase 51: tipos de contenido — plantilla de ENTREVISTA y página de autor.
   ============================================================ */
.ent-eyebrow { display: inline-block; color: var(--accent, #b3372a); font-family: var(--sans); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: 2.5px; margin: 2px 12px 6px 0; }
.single.is-entrevista h1 { font-style: italic; }
.single.is-entrevista .standfirst { color: var(--body); }
.single.is-entrevista .body-content strong { color: var(--ink); }
/* Enlaces de firma (interior de opinión y carrusel de portada) */
.op-name a { color: inherit; }
.op-name a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.op-author a { color: inherit; }
.op-author a:hover { color: var(--brand-dark); }
/* Página pública del columnista (/autor/{slug}) */
.autor-head { max-width: var(--maxw); margin: 10px auto 6px; }
.autor-card { display: flex; align-items: center; gap: 26px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 8px; padding: clamp(18px, 3vw, 34px); margin-top: 10px; box-shadow: 0 1px 3px rgba(20,24,28,.05); flex-wrap: wrap; }
.autor-portrait { width: 184px; height: 184px; border-radius: 50%; object-fit: cover; border: 5px solid var(--brand); flex-shrink: 0; box-shadow: 0 8px 26px rgba(0,0,0,.16); }
.autor-portrait-ph { display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-family: var(--serif); font-weight: 800; font-size: 4.4rem; }
.autor-meta h1 { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 2px 0 6px; font-weight: 800; }
.autor-role { color: var(--muted); font-size: .9rem; margin: 0; }
.autor-bio { color: var(--body); margin: 10px 0 0; max-width: 52rem; }
.autor-articles { max-width: var(--maxw); margin: 0 auto 40px; }
.autor-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .autor-grid { grid-template-columns: repeat(4, 1fr); } }
[data-theme="dark"] .autor-card { background: var(--surface); }
/* ============================================================
   Foros Tribuna — portal /foros (Fase 63.1)
   Réplica del sistema visual de tribunadecanarias.es/foros:
   hero azul marino con foto de fondo, acentos dorados, banda
   lavanda con tarjetas de filete superior y formulario a la
   derecha. Colores tomados del sitio de referencia.
   ============================================================ */
.foro-hero { position: relative; overflow: hidden; color: #eef2f8; padding: clamp(44px, 6vw, 72px) 0 clamp(48px, 6vw, 80px);
  margin: 0 calc(50% - 50vw); /* fondo a sangre completa, como .kiosco en /pdf */
  background: linear-gradient(120deg, #1b2c4a 0%, #24395e 55%, #2c4670 100%); }
/* Foto del cartel de fondo, difuminada y hundida en el azul (como la referencia). */
.foro-hero::before { content: ''; position: absolute; inset: -3%; pointer-events: none;
  background: var(--foro-bg, none) center 30% / cover no-repeat; opacity: .16; filter: blur(7px) saturate(.8); }
.foro-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(23,37,63,.85), rgba(30,48,80,.35) 60%, rgba(23,37,63,.55)); }
.foro-hero-in { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .foro-hero-in { grid-template-columns: 1.05fr .95fr; } .foro-hero-in.no-img { grid-template-columns: 1fr; max-width: 860px; } }
.foro-eyebrow { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2.4px; color: #fff; margin: 0 0 18px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.35); }
.foro-hero h1 { font-family: var(--sans); font-size: clamp(2rem, 4.6vw, 3.15rem); font-weight: 800; line-height: 1.12; margin: 0 0 10px; color: #fff; letter-spacing: -.5px; text-wrap: balance; }
.foro-sub { font-family: var(--sans); font-size: clamp(1.02rem, 2vw, 1.3rem); color: #e9b949; font-weight: 700; line-height: 1.35; margin: 0 0 30px; }
/* Fecha y lugar: chip circular claro + texto en dos líneas (como la referencia) */
.foro-facts { display: grid; gap: 16px; margin: 0 0 32px; }
.foro-fact { display: flex; gap: 14px; align-items: center; }
.ff-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #b8412e; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.ff-txt { display: flex; flex-direction: column; line-height: 1.35; }
.ff-txt strong { color: #fff; font-size: .98rem; font-weight: 700; }
.ff-txt em { font-style: normal; font-size: .86rem; color: #c9d4e6; }
.foro-cta { display: inline-block; background: #e8ba4e; color: #1d2c47; font-family: var(--sans); font-weight: 800; font-size: .95rem; padding: 14px 30px; border-radius: 26px; box-shadow: 0 8px 22px -6px rgba(0,0,0,.45); transition: background .15s, transform .15s; }
.foro-cta:hover { background: #f5c95f; color: #1d2c47; transform: translateY(-1px); }
.foro-closed-note { color: #f3c9b8; font-weight: 700; }
/* Cartel: limpio, esquinas redondeadas y sombra suave (sin marco ni giro) */
.foro-hero-img { max-width: 430px; margin: 0 auto; }
.foro-hero-img img { width: 100%; border-radius: 12px; box-shadow: 0 16px 44px -10px rgba(0,0,0,.55); }

/* Banda lavanda clara a todo el ancho, como la referencia */
.foro-band { background: #edeff7; margin: 0 calc(50% - 50vw); /* fondo a sangre, contenido recentrado por .container */ }
.foro-body { display: grid; gap: 26px; padding-top: 44px; padding-bottom: 60px; align-items: start; }
@media (min-width: 900px) { .foro-body { grid-template-columns: .96fr 1.04fr; } .foro-form-col { position: sticky; top: 70px; } }
/* Tarjetas blancas con filete superior de color */
.foro-card { background: #fff; border: 0; border-top: 4px solid transparent; border-radius: 10px; padding: 24px 26px; box-shadow: 0 4px 16px rgba(35,48,77,.07); margin-bottom: 20px; }
.foro-card.accent-gold { border-top-color: #e9b949; }
.foro-card.accent-navy { border-top-color: #22304d; }
/* Título de tarjeta: azul marino + subrayado corto dorado */
.foro-card h2 { font-family: var(--sans); font-size: 1rem; font-weight: 800; margin: 0 0 16px; color: #22304d; border: 0; display: block; padding: 0; }
.foro-card h2::after { content: ''; display: block; width: 34px; height: 3px; border-radius: 2px; background: #e9b949; margin-top: 9px; }
.foro-rich { color: #4a5261; font-size: .92rem; }
.foro-rich p { margin: 0 0 1em; line-height: 1.75; }
.foro-rich p:last-child { margin-bottom: 0; }
.foro-rich img { border-radius: 8px; margin: 8px 0; }
.foro-panel-intro { color: #4a5261; font-size: .92rem; line-height: 1.7; margin: 0 0 14px; }
.foro-keynote-name { font-family: var(--sans); font-size: 1.18rem; font-weight: 800; color: #23407c; margin: 0 0 8px; }
.foro-keynote-bio { color: #4a5261; font-size: .92rem; margin: 0; line-height: 1.7; }
/* Ponentes: cajitas grises con filete dorado a la izquierda */
.foro-speakers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foro-speakers li { background: #f5f6f9; border-left: 3px solid #e9b949; border-radius: 4px; padding: 12px 16px; }
.foro-speakers strong { display: block; color: #22304d; font-size: .95rem; }
.foro-speakers span { font-size: .84rem; color: #6b7482; }
/* ¿A quién se dirige?: checks azules */
.foro-audience { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foro-audience li { padding-left: 28px; position: relative; line-height: 1.55; color: #4a5261; font-size: .92rem; }
.foro-audience li::before { content: '✓'; position: absolute; left: 2px; color: #4d8fd6; font-weight: 800; }

/* Formulario (columna derecha) */
.foro-form-card { padding-bottom: 30px; }
.foro-form-note { color: #5b6472; font-size: .9rem; line-height: 1.6; margin: 0 0 18px; }
.foro-form label { display: block; font-family: var(--sans); font-weight: 700; font-size: .82rem; color: #333a45; margin-bottom: 15px; }
.foro-form .req { color: #d33c30; }
.foro-form input:not([type=checkbox]), .foro-form select { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #dfe3ec; border-radius: 6px; font: inherit; font-size: .92rem; background: #fbfcfe; color: #22304d; }
.foro-form input:focus, .foro-form select:focus { outline: 0; border-color: #7c93dd; box-shadow: 0 0 0 3px rgba(124,147,221,.18); }
.foro-legal { font-size: .78rem; color: #555e6b; line-height: 1.65; margin: 16px 0; }
.foro-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; font-size: .78rem !important; color: #454d59 !important; line-height: 1.55; }
.foro-check input { margin-top: 3px; width: 15px; height: 15px; flex-shrink: 0; accent-color: #7c93dd; }
/* Botón azul perlado, ancho natural (como la referencia) */
.foro-submit { display: inline-block; width: auto; margin-top: 16px; background: #7c93dd; color: #fff; border: 0; padding: 12px 24px; border-radius: 6px; font: inherit; font-family: var(--sans); font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s; }
.foro-submit:hover { background: #6a81cf; }
.foro-err { display: block; color: #d33c30; font-size: .78rem; font-weight: 700; margin-top: 3px; }
.foro-ok { text-align: center; padding: 26px 10px; }
.foro-ok strong { display: block; font-size: 1.25rem; color: #22304d; margin: 10px 0 8px; font-family: var(--sans); font-weight: 800; }
.foro-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* WhatsApp flotante (aparece si hay número en Ajustes) */
.foro-wa { position: fixed; right: 18px; bottom: 18px; z-index: 95; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px -4px rgba(0,0,0,.35); transition: transform .15s; }
.foro-wa:hover { transform: scale(1.08); }

/* Check animado (círculo + tick que se dibujan) */
.foro-ok-check { display: inline-flex; width: 64px; height: 64px; }
.foro-ok-check.big { width: 84px; height: 84px; }
.foro-ok-check svg { width: 100%; height: 100%; fill: none; stroke: #2f9e7d; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.foro-ok-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: foro-draw .7s ease-out forwards; }
.foro-ok-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: foro-draw .45s ease-out .55s forwards; }
@keyframes foro-draw { to { stroke-dashoffset: 0; } }

/* Modal de inscripción confirmada: inconfundible */
.foro-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,30,52,.72); backdrop-filter: blur(4px); animation: foro-fade .2s ease-out; }
.foro-modal.leaving { opacity: 0; transition: opacity .18s; }
.foro-modal-card { position: relative; width: min(440px, 100%); background: #fff; border-radius: 14px; padding: 38px 32px 30px; text-align: center; box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); border-top: 5px solid #e9b949; animation: foro-pop .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes foro-fade { from { opacity: 0; } }
@keyframes foro-pop { from { opacity: 0; transform: translateY(26px) scale(.94); } }
.foro-modal-card h2 { font-family: var(--sans); font-weight: 800; font-size: 1.55rem; color: #22304d; margin: 14px 0 8px; }
.foro-modal-lead { color: #4a5261; font-size: 1rem; margin: 0 0 12px; }
.foro-modal-when { color: #6b7482; font-size: .92rem; line-height: 1.7; margin: 0 0 6px; }
.foro-modal-mail { font-size: .82rem; color: #23407c; background: #eef2fb; border-radius: 8px; padding: 9px 14px; margin: 12px 0 4px; }
.foro-modal-ok { margin-top: 16px; border: 0; cursor: pointer; font-family: inherit; }
.foro-modal-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: #9aa3b0; cursor: pointer; padding: 4px; }
.foro-modal-x:hover { color: #22304d; }

/* Modo oscuro */
[data-theme="dark"] .foro-band { background: #141a24; }
[data-theme="dark"] .foro-card { background: var(--surface); box-shadow: none; }
[data-theme="dark"] .foro-card h2, [data-theme="dark"] .foro-speakers strong, [data-theme="dark"] .foro-ok strong { color: #e8edf5; }
[data-theme="dark"] .foro-rich, [data-theme="dark"] .foro-panel-intro, [data-theme="dark"] .foro-audience li, [data-theme="dark"] .foro-keynote-bio { color: #aab6c5; }
[data-theme="dark"] .foro-keynote-name { color: #9db8ee; }
[data-theme="dark"] .foro-speakers li { background: rgba(255,255,255,.05); }
[data-theme="dark"] .foro-form label { color: #cfd8e4; }
[data-theme="dark"] .foro-form input:not([type=checkbox]),
[data-theme="dark"] .foro-form select { background: var(--surface); border-color: #3a4453; color: #e8edf5; }
[data-theme="dark"] .foro-legal, [data-theme="dark"] .foro-check, [data-theme="dark"] .foro-form-note { color: #93a0b0 !important; }
[data-theme="dark"] .foro-modal-card { background: var(--surface); }
[data-theme="dark"] .foro-modal-card h2 { color: #fff; }

/* ============================================================
   PROMO DEL FORO ACTIVO — tarjeta en la columna de publicidad
   lateral. Presente en toda la web cuando hay un foro activo.
   ============================================================ */
.foro-side { display: block; margin: 0 0 24px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, #1b2c4a, #2c4670); border: 1px solid rgba(233,185,73,.35);
  box-shadow: 0 10px 26px -12px rgba(27,44,74,.55); transition: transform .15s, box-shadow .15s; }
.foro-side:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(27,44,74,.7); }
.foro-side-img { display: block; }
.foro-side-img img { display: block; width: 100%; height: auto; }
.foro-side-body { display: block; padding: 16px 18px 18px; }
.foro-side-tag { display: block; font-family: var(--sans); font-size: .64rem; font-weight: 800;
  letter-spacing: 1.8px; text-transform: uppercase; color: #f0c65f; margin-bottom: 7px; }
.foro-side-title { display: block; font-family: var(--sans); font-size: 1.02rem; font-weight: 800;
  line-height: 1.22; color: #fff; }
.foro-side-sub { display: block; font-family: var(--sans); font-size: .82rem; font-weight: 700;
  color: #e9b949; line-height: 1.3; margin-top: 5px; }
.foro-side-facts { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 14px;
  font-size: .78rem; color: #c9d4e6; line-height: 1.4; }
.foro-side-cta { display: block; text-align: center; font-family: var(--sans); font-size: .82rem;
  font-weight: 800; color: #1d2c47; background: #e8ba4e; padding: 10px 14px; border-radius: 22px;
  transition: background .15s; }
.foro-side:hover .foro-side-cta { background: #f5c95f; }

/* Logo por tema (multi-edición): color en claro, blanco en oscuro. */
.logo .logo-blanco, .sticky-logo .logo-blanco { display: none; }
[data-theme="dark"] .logo .logo-color,
[data-theme="dark"] .sticky-logo .logo-color { display: none; }
[data-theme="dark"] .logo .logo-blanco,
[data-theme="dark"] .sticky-logo .logo-blanco { display: inline-block; }