/*
Theme Name: News Child
Theme URI: https://example.com/news
Template: news
Author: Meli
Author URI: https://example.com
Description: Tema hijo de "News". Toda la personalización del cliente va aquí, sin tocar el tema padre (para soportar actualizaciones).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: news-child
*/
/* ==========================================================================
Personalizaciones del cliente.
El CSS del padre se carga vía wp_enqueue_style en functions.php
(no se usa @import por rendimiento). Escribí aquí tus overrides.
========================================================================== */
/* 0) Sin padding superior en el main (queda pegado al header/ticker). */
.site-main { padding-top: 0; }
/* Espacio entre secciones = mismo que header↔primera sección (margin-top del hero). */
.home-blocks { padding-bottom: 0; gap: clamp(1.5rem, 3vw, 2.5rem); }
/* 1) Contenedor principal uniforme a 90vw en PC, tablet y móvil.
Sobrescribe la variable y el .container del padre, sin max-width ni cambios
por media query (el hijo carga después del padre, así que gana). */
:root { --news-maxw: 90vw; } /* fuente única del ancho del contenedor (PC/tablet/móvil) */
.container {
width: var(--news-maxw);
max-width: var(--news-maxw); /* sin px que lo pise */
margin-inline: auto;
}
/* Recorta el sangrado del fondo de la fila 1 del header en el borde derecho,
sin crear scroll horizontal (clip = solo eje X; el desplegable vertical sigue visible). */
.site-header { overflow-x: clip; }
/* 2) Lista lateral del home (bloque tipo "Lista", section-list.php):
cada ítem en columna -> imagen full width arriba y texto debajo. */
.section-block--list .post-item {
display: flex;
flex-direction: column;
gap: .6rem;
}
.section-block--list .post-item__media {
width: 100%;
aspect-ratio: 16 / 9;
}
/* 3) Cards secundarias del hero (side): una sola columna.
Imagen full width arriba y, debajo, título a todo el ancho + info.
Sobrescribe el grid 110px/1fr del padre. */
.hero-main__side .hero-card--sec {
display: flex;
flex-direction: column;
gap: .5rem;
}
.hero-main__side .hero-card--sec .hero-card__media {
width: 100%;
aspect-ratio: 16 / 9;
}
.hero-main__side .hero-card--sec .hero-card__title {
width: 100%;
font-size: 1.05rem;
}
/* 4) Secciones del home (contenido principal + barra lateral). */
/* Sin margin propio: el espacio entre bloques lo da el gap de .home-blocks (uniforme). */
.home-section { margin-block: 0; }
.home-section .content-area { align-items: start; }
/* Layout magazine: destacada grande (overlay) + grilla de 2. */
.section-magazine .mag-lead { margin-bottom: var(--news-gap); }
/* Layout list4: items horizontales (imagen izq + texto der) en 2 columnas. */
.section-list4 .post-item { grid-template-columns: 120px 1fr; }
/* Barra lateral tipo "Latest News": lista vertical miniatura izq + texto der. */
.sidebar-list .post-list { display: flex; flex-direction: column; gap: 1rem; }
/* =========================================================
UTILIDAD ÚNICA — filas de 2 columnas: "la columna más baja sticky".
Se aplica a TODAS las filas de 2 columnas del sitio a través de sus
clases estructurales (.content-area de home/archivos-categoría/archivos-
región/single/búsqueda, y .contact-grid de Contacto), en vez de reglas
sueltas por sección. Reemplaza a .widget-area--sticky, .home-aside.news-sticky
y al sticky-por-sección del tablet.
Cómo funciona (sin JS ni condicional): las DOS columnas son position:sticky +
align-self:start. La columna MÁS ALTA ocupa casi todo el alto de la fila, así
que no le queda margen para "pegarse" y scrollea normal; la MÁS BAJA sí tiene
margen y queda fija (top = alto del header sticky + pequeño offset) hasta que
termina la fila -> se libera al final, sin superponerse con la sección siguiente.
Vale en ambos sentidos (izq o der, la que resulte más baja). Si las alturas son
parecidas, no hay efecto visible. Requiere que la fila no tenga overflow:hidden
ni alto fijo (por eso overflow:visible). Solo se activa donde la fila es de 2
columnas; en 1 columna (móvil / colapsada) NO se aplica, para no fijar contenido
apilado.
========================================================= */
:root { --news-sticky-top: 90px; } /* header sticky (~90px) + offset */
@media (min-width: 768px) and (max-width: 1024px) {
:root { --news-sticky-top: 110px; } /* header un poco más alto en tablet */
}
/* Desktop (>=1025px): todas las filas de 2 columnas del sitio. */
@media (min-width: 1025px) {
.content-area,
.contact-grid { overflow: visible; }
.content-area > *,
.contact-grid > * {
position: sticky;
top: var(--news-sticky-top);
align-self: start;
}
}
/* Tablet (768–1024px): SOLO la fila main+sidebar del home sigue siendo de 2
columnas (las demás colapsan a 1). Se anula, además, el sticky heredado de
.widget-area--sticky (padre, min-width:1024) sobre las filas ya colapsadas. */
@media (min-width: 768px) and (max-width: 1024px) {
.home-section .content-area { overflow: visible; }
.home-section .content-area > * {
position: sticky;
top: var(--news-sticky-top);
align-self: start;
}
.widget-area--sticky { position: static; top: auto; }
}
/* 5) Sección 3 (ColorMag): destacada horizontal + grilla de 3. */
.colormag .hpost {
display: grid;
grid-template-columns: 300px 1fr;
gap: 1.1rem;
align-items: start;
margin-bottom: var(--news-gap);
position: relative; /* ancla del badge categoría/región (va fuera del de la imagen). */
}
.colormag .hpost__media {
position: relative;
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--news-radius);
overflow: hidden;
background: var(--news-surface);
}
.colormag .hpost__media img { width: 100%; height: 100%; object-fit: cover; }
.colormag .hpost__title { font-size: 1.4rem; margin: 0 0 .4rem; }
.colormag .hpost__title a { color: var(--news-text); }
.colormag .hpost__title a:hover { color: var(--news-primary); text-decoration: none; }
.colormag .hpost__excerpt { color: var(--news-muted); margin: .5rem 0 0; }
.colormag .hpost .card__meta { font-size: .8rem; color: var(--news-muted); }
@media (max-width: 600px) {
.colormag .hpost { grid-template-columns: 1fr; }
}
/* Bullet del encabezado: color del tema (primario), igual que las líneas.
Etiquetas: color configurable (panel Colores), por defecto el acento de la paleta. */
.home-section .section-block__title::before { background: var(--news-primary); }
.card__cat,
.home-section .card__cat { background: var(--news-label-bg, var(--news-accent)); }
.card__cat,
.card__cat:hover { color: var(--news-label-text, #fff); }
/* Etiqueta de categoría: la card es el ancla (la etiqueta va fuera del de
la imagen para no anidar enlaces). Siempre visible; hover -> primario. */
.card { position: relative; }
.card:hover .card__cat,
.card__cat:hover { background: var(--news-primary); }
/* Etiquetas categoría + región en fila sobre la imagen. El wrapper toma el
posicionamiento absoluto que tenía .card__cat; las etiquetas quedan static y
se ubican una al lado de la otra (misma línea). */
.card__cats { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; }
.card__cats .card__cat { position: static; top: auto; left: auto; }
.hero-card--lead .card__cats { top: .8rem; left: .8rem; }
/* Etiqueta de REGIÓN: idéntica a la de categoría (tamaño/padding/tipografía/
peso/border-radius heredados de la clase base); solo cambian los colores.
Doble clase para ganar a los fondos contextuales (.home-section/.hero--top) y
al hover de la card, en todos los estados. */
.card__cats .card__cat--region.card__cat,
.card:hover .card__cats .card__cat--region.card__cat,
.card__cats .card__cat--region.card__cat:hover { background: #c85312; color: #ffffff; }
.entry-cat--region.entry-cat,
.entry-cat--region.entry-cat:hover { background: #c85312; color: #ffffff; }
/* Alinear la línea del título del sidebar (ej. LATEST NEWS) con la de las
secciones (ej. DEPORTES): misma tipografía y métrica de la línea. */
.home-aside .widget__title {
font-size: 1.25rem;
padding-bottom: .4rem;
margin-bottom: 1.25rem;
}
/* Líneas de los encabezados (sección + sidebar): finas (2px), niveladas e
iguales en todas las secciones. */
.section-block__head,
.widget__title {
border-bottom-width: 2px;
padding-bottom: .4rem;
}
/* Títulos de entradas y secciones en color oscuro fijo (var(--news-text)).
No dependen de la paleta para mantener legibilidad. */
.card__title a,
.post-item__title a,
.hpost__title a,
.video-feature__title a,
.video-item__title a,
.news-wp-title,
.entry-title,
.entry-title a,
.related__title,
.single-module__title,
.widget__title {
color: var(--news-title, var(--news-text));
}
.card__title a:hover,
.post-item__title a:hover,
.hpost__title a:hover,
.news-wp-title:hover,
.entry-title a:hover {
color: var(--news-primary);
text-decoration: none;
}
/* 6) Sección 1 — Destacados ancho completo: 1 grande (izq) + 2 apiladas (der). */
.hero--top {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--news-gap);
align-items: stretch; /* ambas columnas igualan altura */
margin-top: clamp(1.5rem, 3vw, 2.5rem); /* separación del ticker (margen superior) */
}
.hero--top .ht-main,
.hero--top .ht-side { min-width: 0; min-height: 0; }
.hero--top .card__cat { background: var(--news-label-bg, var(--news-accent)); z-index: 2; }
/* Overlay oscuro sobre la imagen para que el texto se lea. */
.hero--top .hero-card--lead .hero-card__media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
/* 7) Video: facade de play + reproductor inline + sección "Watch Videos". */
.news-video { position: relative; }
.news-video__media {
position: relative;
display: block;
aspect-ratio: 16 / 9; /* reserva alto -> CLS */
background: var(--news-surface);
border-radius: var(--news-radius);
overflow: hidden;
}
.news-video__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-video__ph { display: block; width: 100%; height: 100%; background: var(--news-surface); }
.news-video__play {
position: absolute;
inset: 0;
margin: auto;
width: 64px; height: 64px;
border: 0; border-radius: 50%;
background: var(--news-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,0,0,.35);
transition: transform .15s ease;
}
.news-video__play svg { margin-left: 3px; }
.news-video__play:hover { transform: scale(1.08); }
.news-video__player { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.news-video.is-playing .news-video__play { display: none; }
/* Video destacado (columna principal). */
.video-feature { position: relative; }
.video-feature__tag {
position: absolute; top: .7rem; left: .7rem; z-index: 3;
background: var(--news-secondary); color: #fff;
font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: .3rem .6rem; border-radius: 4px;
}
.video-feature__body { padding-top: .6rem; }
.video-feature__title { font-size: 1.35rem; margin: .25rem 0 0; }
.video-feature__title a { color: var(--news-text); }
.video-feature__title a:hover { color: var(--news-primary); text-decoration: none; }
.video-feature .card__meta { font-size: .8rem; color: var(--news-muted); }
/* Lista lateral de videos. */
.video-aside .post-list { display: flex; flex-direction: column; gap: 1rem; }
.video-item { display: grid; grid-template-columns: 120px 1fr; gap: .7rem; align-items: start; }
.video-item .news-video__play { width: 38px; height: 38px; }
.video-item .news-video__play svg { width: 18px; height: 18px; }
.video-item__meta { font-size: .74rem; color: var(--news-muted); }
.video-item__title { font-size: 1rem; line-height: 1.3; margin: .15rem 0 0; }
.video-item__title a { color: var(--news-text); }
.video-item__title a:hover { color: var(--news-primary); text-decoration: none; }
@media (max-width: 600px) {
.video-item { grid-template-columns: 1fr; }
}
/* 10) Footer — 4 columnas + fila de copyright.
Colores y líneas configurables desde el panel (pestaña Footer):
--news-footer-text, --news-footer-line, --news-footer-line-width. */
.site-footer { color: var(--news-footer-text, #cfd4da); }
.footer-cols {
display: grid;
gap: var(--news-gap);
align-items: start;
}
/* Columnas por layout (PC): L1=2, L2=3, L3=4. */
.footer-cols--l1 { grid-template-columns: repeat(2, 1fr); }
.footer-cols--l2 { grid-template-columns: repeat(3, 1fr); }
.footer-cols--l3 { grid-template-columns: repeat(4, 1fr); }
.footer-col { padding-bottom: 50px; }
.footer-col__title {
color: var(--news-footer-text, #fff);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .02em;
border-bottom: 0;
padding-bottom: .6rem;
margin: 0 0 1rem;
position: relative;
}
/* Línea separadora: ancho y color configurables (default 70px / color primario). */
.footer-col__title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: var(--news-footer-line-width, 70px);
height: 2px;
background: var(--news-footer-line, var(--news-primary));
}
.footer-col--logo .footer-logo img { max-width: 200px; height: auto; }
.footer-logo--text { color: var(--news-footer-text, #fff); font-size: 1.5rem; font-weight: 700; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-contact li { display: flex; align-items: center; gap: .5rem; }
.footer-contact__ic { flex: 0 0 auto; display: inline-flex; color: var(--news-footer-text, #fff); transition: color .15s ease; }
.footer-contact__ic svg { width: 16px; height: 16px; fill: currentColor; }
/* Hover igual que las redes: ícono (y enlace) en color primario. */
.footer-contact li:hover .footer-contact__ic,
.footer-contact a:hover { color: var(--news-primary); }
.footer-contact a { color: var(--news-footer-text, #fff); }
.footer-col .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-col .menu a { color: var(--news-footer-text, #cfd4da); }
.footer-col .menu a:hover { color: #fff; text-decoration: none; }
/* Aislamiento: los menús del footer NUNCA se colapsan (ni hamburguesa ni acordeón)
en ninguna resolución -> lista vertical siempre visible y expandida. Las reglas
del hamburguesa están scopeadas a .main-navigation (no alcanzan al footer), pero
reforzamos por si se comparten clases .menu/.news-menu, en TODOS los breakpoints. */
.site-footer .menu,
.site-footer .news-menu,
.site-footer .sub-menu {
display: flex;
flex-direction: column;
flex-basis: auto;
position: static;
gap: .5rem;
}
.site-footer .sub-menu { padding-left: 1rem; }
/* El footer no usa disparador de menú; si por herencia apareciera, ocultarlo. */
.site-footer .menu-toggle { display: none; }
/* Hover + focus-visible de TODOS los enlaces del footer -> negro (#000).
Solo el estado hover/focus; no cambia el color de reposo ni otros estilos.
Cubre: menús de cualquier columna, datos de contacto, iconos de redes y copyright.
Va después de las reglas base para ganar por orden con igual especificidad. */
.footer-col .menu a:hover,
.footer-col .menu a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible,
.footer-copyright a:hover,
.footer-copyright a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
color: #000;
}
.footer-col--contact .footer-follow {
display: block;
margin-top: 1rem;
font-weight: 700;
text-transform: uppercase;
font-size: .8rem;
letter-spacing: .04em;
color: var(--news-footer-text, #fff);
}
.footer-col .footer-social { display: flex; gap: .75rem; margin-top: .4rem; }
/* Íconos de redes del footer: color de texto del footer; hover = primario. */
.footer-social a { color: var(--news-footer-text, #fff); }
.footer-social a:hover { color: var(--news-primary); }
.footer-social a svg { fill: currentColor; }
.footer-copyright {
padding-top: 1.2rem;
padding-bottom: 0;
text-align: center;
font-size: .85rem;
color: var(--news-footer-text, #cfd4da);
}
.footer-copyright p { margin: 0; }
/* Texto debajo del logo (primera columna), alineación configurable. */
.footer-logo-text {
margin-top: 1rem;
font-size: .85rem;
color: var(--news-footer-text, #cfd4da);
}
.footer-logo-text p { margin: 0 0 .5rem; }
.footer-logo-text p:last-child { margin-bottom: 0; }
.footer-logo-text a { color: var(--news-footer-text, #fff); text-decoration: underline; }
.footer-logo-text--left { text-align: left; }
.footer-logo-text--center { text-align: center; }
.footer-logo-text--right { text-align: right; }
/* Separador a lo ancho antes del copyright: mismo color que las líneas de los títulos. */
.footer-sep {
border: 0;
height: 2px;
background: var(--news-footer-line, var(--news-primary));
margin: 2rem 0 0;
}
/* Padding del footer: top 60px (móvil) / 80px (tablet+PC); bottom 15px. */
.site-footer { padding-top: 60px; padding-bottom: 15px; }
@media (min-width: 768px) { .site-footer { padding-top: 80px; } }
/* Columnas: 4 en PC, 2 en tablet (2 arriba + 2 abajo), 1 en móvil. */
/* Tablet: L1=1, L2=2, L3=2. */
@media (max-width: 1024px) {
.footer-cols--l1 { grid-template-columns: 1fr; }
.footer-cols--l2 { grid-template-columns: repeat(2, 1fr); }
.footer-cols--l3 { grid-template-columns: repeat(2, 1fr); }
}
/* Móvil: todas 1 columna. */
@media (max-width: 600px) {
.footer-cols--l1,
.footer-cols--l2,
.footer-cols--l3 { grid-template-columns: 1fr; }
}
/* Móvil (<768px): centrar horizontalmente TODO el contenido del footer, en todas
las columnas. text-align:center + justify-content:center en los bloques flex;
sin padding-left heredado que descentre. No toca tablet ni desktop. */
@media (max-width: 767px) {
/* Base de columna: centra títulos, textos, enlaces de menú (inline) y logo. */
.footer-col { text-align: center; }
/* Título: la línea/subrayado decorativo (::after, absolute) va al centro. */
.footer-col__title::after { left: 50%; transform: translateX(-50%); }
/* Texto bajo el logo: anula la alineación configurable (--left / --right). */
.footer-col .footer-logo-text { text-align: center; }
/* Logo como bloque centrado (la img interna se centra por text-align). */
.footer-col--logo .footer-logo { display: block; }
/* Datos de contacto: el par icono+texto centrado COMO BLOQUE (no el texto suelto). */
.footer-contact li { justify-content: center; }
/* Iconos de redes sociales centrados. */
.footer-col .footer-social { justify-content: center; }
/* Submenús sin sangría izquierda que descentre los items. */
.site-footer .sub-menu { padding-left: 0; }
}
/* Móvil (<768px): H1 un 20% más chicos que su tamaño mobile actual.
El h1 base (padre) es clamp(1.9rem, 4vw, 2.8rem); en mobile (<760px) 4vw < 1.9rem
→ resuelve al MÍN = 1.9rem (30.4px con root 16px). 1.9 × 0.8 = 1.52rem (24.32px).
Override SOLO en mobile: el clamp de desktop/tablet (sin media query) queda intacto.
Cubre .entry-title del single (es un y no tiene font-size propio → hereda de h1)
y cualquier otro H1 gobernado por el clamp base. */
@media (max-width: 767px) {
h1 { font-size: 1.52rem; }
}
/* 9) Menú de categorías — hamburguesa integrada a la derecha de la fila del menú. */
.main-navigation .container { display: flex; align-items: center; gap: 1rem; }
.news-catmenu { position: relative; margin-left: auto; } /* a la derecha */
/* Disparador como un link más del menú: sin fondo, misma tipografía/peso/color. */
.news-catmenu__toggle {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
font-weight: 600;
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .03em;
color: var(--news-secondary);
padding: .85rem 1rem;
min-height: 44px; /* reserva alto -> CLS */
}
.news-catmenu__toggle:hover { color: var(--news-primary); }
.news-catmenu__chevron { transition: transform .2s ease; }
.news-catmenu.is-open .news-catmenu__chevron { transform: rotate(180deg); }
/* Panel desplegable: fondo blanco por defecto (configurable desde el panel). */
.news-catmenu__panel {
position: absolute; /* dropdown -> no empuja el layout (CLS) */
right: 0; top: 100%;
z-index: 90;
min-width: 240px;
background: #fff;
border: 1px solid var(--news-border);
box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.news-catmenu__panel[hidden] { display: none; }
.news-catmenu__panel .menu { list-style: none; margin: 0; padding: .25rem 0; display: block; }
.news-catmenu__panel .menu a { display: block; padding: .6rem 1rem; color: var(--news-text); }
.news-catmenu__panel .menu a:hover { background: var(--news-surface); color: var(--news-primary); text-decoration: none; }
.news-catmenu__panel .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
/* Espaciado del ícono FA opcional delante del texto del ítem. */
.news-menu a i, .news-catmenu__panel a i { margin-right: .4rem; }
@media (prefers-reduced-motion: reduce) {
.news-catmenu__chevron { transition: none; }
}
/* 8) Single — breadcrumbs + comentarios. */
.breadcrumbs { margin-top: 30px; }
/* Separación antes del bloque de comentarios = mismo espacio que entre secciones. */
.comments-area { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.comments-title,
.comment-reply-title { font-family: var(--news-font-heading); margin-bottom: 1rem; color: var(--news-text); }
/* Formulario: inputs full width, tipografía del tema, bordes consistentes. */
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
#comment {
width: 100%;
max-width: 100%;
padding: .6rem .75rem;
border: 1px solid var(--news-border);
border-radius: 6px;
font: inherit;
font-family: var(--news-font);
background: #fff;
color: var(--news-text);
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .comment-notes,
.comment-form .logged-in-as { font-size: .85rem; color: var(--news-muted); }
/* Botón con los colores configurables del panel. */
.comment-form .news-btn,
.comment-form input[type="submit"],
.comment-form .submit {
background: var(--news-primary);
color: #fff;
border: 0;
border-radius: 6px;
padding: .7rem 1.4rem;
min-height: 44px;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background .15s ease;
}
.comment-form .news-btn:hover,
.comment-form input[type="submit"]:hover,
.comment-form .submit:hover { background: var(--news-secondary); }
/* Single — compartir: íconos como los del footer (sin fondo/borde,
color de texto y hover en primario). */
.news-share__btn {
background: transparent;
border: 0;
color: var(--news-text);
padding: 0 .4rem;
}
.news-share__btn:hover {
background: transparent;
border-color: transparent;
color: var(--news-primary);
}
.news-share__btn svg { fill: currentColor; }
/* Navegación anterior/siguiente: ANTERIOR (‹ a la izq) / SIGUIENTE (› a la der),
en color secundario, sin el título de la nota. */
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; }
.post-navigation .nav-next { margin-left: auto; text-align: right; }
.post-navigation a {
color: var(--news-secondary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.post-navigation a:hover { color: var(--news-primary); text-decoration: none; }
.post-navigation .nav-arrow { font-size: 1.3em; line-height: 1; }
.comment-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.comment-list .children { list-style: none; margin-left: 1.5rem; }
/* Izquierda: define el alto del bloque por aspect-ratio. */
.hero--top .ht-main .hero-card--lead .hero-card__media { aspect-ratio: 3 / 2; }
/* Derecha: 2 filas iguales que llenan exactamente el alto de la izquierda
(cada apilada = mitad del alto de la principal, base alineada). */
.hero--top .ht-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: var(--news-gap);
}
.hero--top .ht-side .hero-card--lead { height: 100%; min-height: 0; }
.hero--top .ht-side .hero-card--lead .hero-card__media { height: 100%; aspect-ratio: auto; }
/* Títulos de la derecha al tamaño de los títulos de listas (no agrandado). */
.hero--top .ht-side .hero-card__title { font-size: 1rem; line-height: 1.3; }
/* Móvil: las 3 notas se apilan en una columna. */
@media (max-width: 768px) {
.hero--top { grid-template-columns: 1fr; }
.hero--top .ht-main .hero-card--lead .hero-card__media { aspect-ratio: 16 / 9; }
.hero--top .ht-side { grid-template-rows: auto; }
.hero--top .ht-side .hero-card--lead .hero-card__media { height: auto; aspect-ratio: 16 / 9; }
}
/* Móvil (<768px): cards del hero "1 grande + 2 apiladas" (grande + apiladas) 30%
más altas. El alto lo da el aspect-ratio del .hero-card__media (16/9 en móvil,
arriba). Para +30% de alto, con el ancho fijo el alto pasa de W·9/16 a
W·9/16·1.3 = W·11.7/16 -> aspect-ratio 16/11.7 (9 × 1.3 = 11.7). La imagen sigue
con object-fit:cover (no se deforma) y el texto tiene más aire abajo. Solo <768:
no toca el borde 768 ni tablet ni desktop. */
@media (max-width: 767px) {
.hero--top .ht-main .hero-card--lead .hero-card__media,
.hero--top .ht-side .hero-card--lead .hero-card__media { aspect-ratio: 16 / 11.7; }
}
/* =========================================================
Móvil (<768px) — FIX etiquetas/título en las cards con imagen de fondo + texto
encima (overlay). Antes: etiquetas (.card__cats) absolute arriba-izq y texto
(.hero-card__body) absolute abajo -> con varias etiquetas hacían wrap y se
pisaban con el título. Ahora: etiquetas y texto en un MISMO flujo vertical
(columna flex) SOBRE la imagen, que pasa a fondo. Orden: etiquetas primero
(margin-bottom:40px), luego título / bajada / fecha. Las etiquetas hacen wrap
sin pisar nada; la card crece con el contenido (min-height = piso). La imagen
sigue con object-fit:cover (sin deformar). Aplica a los módulos con ese
tratamiento: Destacados (.hero--top) y Sección magazine (.section-magazine).
Solo <768: no toca tablet ni desktop.
========================================================= */
@media (max-width: 767px) {
.hero--top .hero-card--lead,
.section-magazine .hero-card--lead {
display: flex;
flex-direction: column;
justify-content: flex-end; /* texto abajo, como el overlay original */
min-height: 320px; /* piso; si el contenido es más alto, la card crece */
padding: 1.1rem;
overflow: hidden;
border-radius: var(--news-radius);
}
/* Imagen -> fondo: media absoluto que llena la card (cover, sin deformar). Se
anula el aspect-ratio (definía el alto en móvil) con especificidad suficiente
(los .ht-main/.ht-side lo fijan en 0,4,0) para que inset:0 llene la card. */
.hero--top .ht-main .hero-card--lead .hero-card__media,
.hero--top .ht-side .hero-card--lead .hero-card__media,
.hero--top .hero-card--lead .hero-card__media,
.section-magazine .hero-card--lead .hero-card__media {
position: absolute;
inset: 0;
aspect-ratio: auto;
border-radius: 0;
z-index: 0;
}
/* Degradado oscuro sobre TODA la card (legibilidad; el body ya no lo trae). */
.hero--top .hero-card--lead .hero-card__media::after,
.section-magazine .hero-card--lead .hero-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4) 55%, rgba(0,0,0,.15));
z-index: 1;
pointer-events: none;
}
/* Etiquetas + texto: en flujo (position:relative, NO absolute) y por encima de
la imagen (z-index sobre el fondo). Relative -> el z-index gana a la imagen. */
.hero--top .hero-card--lead .card__cats,
.hero--top .hero-card--lead .hero-card__body,
.section-magazine .hero-card--lead .card__cats,
.section-magazine .hero-card--lead .hero-card__body {
position: relative;
inset: auto;
top: auto;
left: auto;
z-index: 2;
}
/* Etiquetas primero, 40px hasta el título; hacen wrap sin pisar nada. */
.hero--top .hero-card--lead .card__cats,
.section-magazine .hero-card--lead .card__cats {
margin: 0 0 40px;
}
/* El body ya no trae su padding/gradiente propios (los da la card / el ::after). */
.hero--top .hero-card--lead .hero-card__body,
.section-magazine .hero-card--lead .hero-card__body {
padding: 0;
background: none;
}
}
/* Tablet: el grid 2fr/1fr queda apretado; afloja el interlineado de los títulos
de la Sección 1 (principal grande + secundarias) para que no se encimen. */
@media (min-width: 769px) and (max-width: 1024px) {
.hero--top .ht-main .hero-card__title,
.hero--top .ht-side .hero-card__title { line-height: 1.3; }
}
/* 11) Header / Ticker — colores configurables (panel Cabecera / Header).
Vars inyectadas por news_child_header_vars(); fallback al estilo base. */
/* Fecha del top bar: sin capitalizar (el padre forzaba capitalize -> "21 De Junio De 2026"). */
.topbar__date { text-transform: none; }
.topbar__search button { background: var(--news-search-btn-bg, var(--news-primary)); }
.topbar__search button .dashicons-search { color: var(--news-search-icon, #fff); }
/* Botón de búsqueda de la barra superior del header: fondo Primario de la paleta
(var inyectada desde la opción color_primary), lupa en blanco. */
.site-header__row--meta .topbar__search button { background: var(--news-primary); }
.site-header__row--meta .topbar__search button .dashicons-search { color: #fff; }
/* Searchform del tema (get_search_form: archivos, 404, "Nada por aquí"):
mismo diseño que el buscador del header — botón Primario, lupa en blanco. */
.news-searchform button { background: var(--news-primary); }
.news-searchform button .dashicons-search { color: #fff; }
/* Estado vacío "Nada por aquí": buscador centrado, alto 44px, lupa 20px y
borde Primario alrededor del conjunto input+botón (una sola pieza).
Scopeado a .news-searchform -> NO afecta al buscador del header. */
.news-searchform {
width: fit-content;
margin-inline: auto; /* centra el bloque completo input+botón */
border: 1px solid var(--news-primary); /* borde Primario desde la paleta (var) */
border-radius: 6px;
overflow: hidden; /* recorta input/botón a las esquinas */
}
.news-searchform input[type="search"],
.news-searchform button {
height: 44px; /* mismo alto input y botón */
box-sizing: border-box;
border-radius: 0; /* el radio lo da el form */
}
.news-searchform button .dashicons-search,
.news-searchform button .dashicons-search::before {
font-size: 20px; /* icono de la lupa 20px */
width: 20px;
height: 20px;
line-height: 20px;
}
/* ===== Header layout 1 — logo + columna derecha (2 filas). ===== */
/* La barra superior full-width se plegó en la fila 1 (meta). Markup único. */
.l1-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* DESKTOP (>=1025px): logo 15% / columna derecha 85%. Suma exacta (gap 0). */
@media (min-width: 1025px) {
.header--type-1 .header-bar--inline { flex-wrap: nowrap; gap: 0; align-items: stretch; }
.header--type-1 .site-header__logo { flex: 0 0 15%; max-width: 15%; display: flex; align-items: center; }
.header--type-1 .site-header__logo .site-branding { width: 100%; }
/* #2: logo altura fija 100px, ancho automático, sin recorte.
max-height:100px pisa el .custom-logo{max-height:56px} del padre. */
.header--type-1 .site-header__logo img { height: 100px; max-height: 100px; width: auto; max-width: 100%; object-fit: contain; }
.header--type-1 .site-header__right {
flex: 0 0 85%;
max-width: 85%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0;
background: transparent; /* el fondo lo pone cada fila, no el contenedor */
}
.header--type-1 .site-header__row { min-width: 0; }
/* Fila 1 (meta): fondo = Secundario de la paleta (var inyectada desde la opción
color_secondary; no se hardcodea el hex). Textos/enlaces/iconos en blanco.
Ocupa el 100% del ancho de la columna derecha, con padding lateral. */
.header--type-1 .site-header__row--meta { position: relative; background: var(--news-secondary); padding: .5rem 1rem; }
/* El fondo Secundario sangra hasta el borde derecho de la pantalla (más allá
del contenedor 90vw). El CONTENIDO sigue dentro del contenedor; solo el
fondo se extiende. La franja se recorta en .site-header (overflow-x:clip),
así no genera scroll horizontal en ninguna resolución. */
.header--type-1 .site-header__row--meta::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 100vw;
background: var(--news-secondary);
}
/* #3: el header arranca pegado al borde superior (sin el padding-top del bar). */
.header--type-1 .site-header__bar { padding-top: 0; }
.header--type-1 .site-header__row--meta { margin-top: 0; }
.header--type-1 .site-header__row--meta .l1-meta { color: #fff; }
.header--type-1 .site-header__row--meta a,
.header--type-1 .site-header__row--meta a:hover { color: #fff; }
.header--type-1 .site-header__row--meta .topbar__social a { color: #fff; } /* los SVG usan fill:currentColor */
/* Buscador sobre fondo secundario: campo translúcido para que el texto/placeholder blanco sea legible. */
.header--type-1 .site-header__row--meta .topbar__search input[type="search"] {
background: rgba( 255, 255, 255, .12 );
border: 1px solid rgba( 255, 255, 255, .4 );
color: #fff;
}
.header--type-1 .site-header__row--meta .topbar__search input[type="search"]::placeholder { color: #fff; opacity: .75; }
.header--type-1 .site-header__row--meta .topbar__search button .dashicons-search { color: #fff; }
/* Fila 2 (nav): fondo blanco de borde a borde de la columna derecha.
OJO: el tema inyecta inline `.main-navigation{background:nav_bg}` desde
dynamic-css (hoy nav_bg = Secundario). Por eso hay que forzar el blanco
en el propio