/* ==========================================================
portada-mobile-tune.css — PROPUESTA (reversible) de ajuste
de la portada en MÓVIL (≤640px). Sesión 2026-06-07.
Objetivo (petición del usuario):
1) GAP foto→texto en los templates "grandes horizontales"
(imagen + titular en 2 columnas que apilan en móvil):
igualarlo al de las aperturas (Claves) = 8px.
Hoy esos leads heredan el gap de rejilla (32px) como
separación vertical → quedan descolgados respecto a la
apertura. Afecta a: .act-destacado, .destacados__lead, .contra.
(Economía/Deportes y las aperturas ya usan margin-bottom:8px
en su media, por eso esos sí están bien.)
2) ESCALA TIPOGRÁFICA: la apertura está bien (28/22px, ya
afinada por el usuario), pero casi toda la portada
secundaria está a 16px → en un móvil con titulares serif
se queda pequeña. Se sube de forma coherente por roles,
SIN tocar la apertura (.t-claves-*).
CÓMO TIRAR ATRÁS: quitar el de Base.astro
(justo debajo de portada.css). No toca ningún otro .css.
========================================================== */
@media (max-width: 640px) {
/* ---- 0 · Gap base de rejillas en móvil: 32px → 20px ---- */
/* El token --gap (gutter de columnas/filas de las rejillas) baja en móvil
para apretar el layout. NO afecta a --section-gap-m (separación entre
módulos) ni a los gaps fijados a mano (leads a 8px, row-gap de tarjetas
a 18px, etc., que sobreescriben var(--gap)). */
:root {
--gap: 20px;
}
/* ---- 1 · GAP foto→texto = apertura (8px) ---- */
/* Estos tres apilan imagen sobre cuerpo (dos celdas del grid);
el gap de rejilla pasa a ser separación vertical. Lo bajamos
de 32px a 8px para igualar el ritmo de las aperturas/Economía. */
.act-destacado,
.destacados__lead,
.contra {
gap: 8px;
}
/* ---- 2 · Escala tipográfica móvil · titulares de 1 columna ---- */
/* Valores acordados con el usuario (2026-06-07, 2ª pasada). Suelo 1 col = 20.
Apertura: NO se toca (.t-claves-lead 28 / .t-claves-card 22, en portada.css).
Los de DOBLE columna quedan pendientes de revisar (al final del bloque). */
/* Leads de sección */
.t-contra {
font-size: var(--fs-28);
} /* 28 */
.t-act-dest,
.t-dest-lead,
.t-news-lead {
font-size: var(--fs-26);
} /* 26 */
.t-op-lead {
font-size: var(--fs-24);
} /* 24 */
.t-branded-full,
.t-closing-lead {
font-size: var(--fs-22);
} /* 22 */
/* Secundarios y listas de 1 columna → suelo --fs-20 */
.t-act-grande,
.t-news-second,
.t-rail,
.t-rail-live,
.t-list,
.t-op-firma,
.t-closing-item {
font-size: var(--fs-20);
} /* 20 (suelo 1 col) */
/* Tarjetas a DOBLE columna → PENDIENTE de revisar (decisión del usuario:
"después ya revisaremos los que van a doble columna"). Se dejan como están. */
.t-dest-card,
.t-parati,
.t-gente {
font-size: var(--fs-18);
} /* doble columna (pendiente) */
.t-comprador {
font-size: var(--fs-17);
} /* doble columna (pendiente) */
/* ---- 2b · Aperturas "Claves del día" · unificación ---- */
/* Acordado con el usuario: la PRINCIPAL siempre 28, EL RESTO (card / side /
relacionados) a 19, y t-rail se queda en 20 (igual que el rail de más abajo,
ya unificado en la sección 2). Algunas reglas de portada.css van scopeadas
(3col/3up) → se replica su especificidad para ganarles. */
.t-claves-full {
font-size: var(--fs-28);
} /* principal de full / full2col: 24 → 28 */
.t-claves-card {
font-size: var(--fs-19);
} /* base: 22 → 19 */
.apertura--claves-split .t-claves-card {
font-size: var(--fs-28);
} /* split: los 2 temas SON la principal → 28 (no 19) */
.apertura--claves-3col .claves-col .t-claves-card {
font-size: var(--fs-24);
} /* cards de las columnas 2ª/3ª de 3col → 24 (petición del usuario) */
.apertura--claves-3up .t-claves-card {
font-size: var(--fs-19);
} /* 3up (sección La Contra) → 19 */
.t-claves-side {
font-size: var(--fs-19);
} /* resto: 17 → 19 */
/* t-claves-lead se queda 28 y t-rail 20 (ya cubiertos). */
/* ---- 2c · Cobertura especial (Gran Acontecimiento) · mismo criterio ---- */
/* Principal de cada variante → 28; el resto (vídeo / derivadas / cronología /
relacionados) → 19. t-acon-titular ya va a 28 en portada.css. */
.t-acon-lead,
.t-acon-visual,
.t-acon-reducido {
font-size: var(--fs-28);
} /* principal: 26 / 27 / 25 → 28 */
.t-acon-video,
.t-acon-derived,
.t-acon-timeline,
.t-acon-rel {
font-size: var(--fs-19);
} /* resto: 16 → 19 (vale para relacionados de claves y de acon) */
/* ---- 3 · Separador (filete) uniforme tras cada noticia ---- */
/* Convención del flujo móvil: una hairline tras cada noticia como
separador. Faltaba en las rejillas de tarjetas, en las firmas de
Opinión y entre los dos "grandes" de Actualidad. Se excluyen los
bloques branded (cajas con fondo propio: branded-full/-list/-card). */
.destacados__cards > article:not(.branded-card):not([class*="branded"]),
.parati__cards > article:not(.branded-card):not([class*="branded"]),
.ligeros > article:not(.branded-card):not([class*="branded"]),
.comprador__grid > .comprador__item,
.opinion__lead,
.opinion__firmas > .firma,
.contra {
padding-bottom: 16px;
border-bottom: 1px solid var(--hair);
}
/* Ritmo entre filas algo más ajustado cuando llevan filete (32px era
demasiado aire en móvil con el separador). */
.destacados__cards,
.parati__cards,
.ligeros,
.comprador__grid {
row-gap: 18px;
}
.opinion__firmas {
row-gap: 16px;
}
/* Separador entre los dos "grandes" de Actualidad (apilan en móvil). */
.act-dosgrandes > article + article {
padding-top: 16px;
border-top: 1px solid var(--hair);
}
/* Lead de Economía/Deportes (es el directo del grid, sin clase):
filete antes de la lista de la sección. */
.newsmod__grid > article {
padding-bottom: 16px;
border-bottom: 1px solid var(--hair);
}
/* ---- 4 · Vídeos verticales (9:16) a ancho completo ---- */
/* width:100% y el aspect-ratio calcula el alto. Las aperturas ya iban
a 100%; se asegura aquí y se retira el max-width contradictorio. El
módulo Vídeos pasa a un clip por pantalla (carrusel horizontal). */
.claves-col--video .vclip,
.claves__rail-video .vclip {
width: 100%;
max-width: none;
}
.clips > .vclip {
flex: 0 0 60%;
}
}