/* Theme Name: LocalNews Color Vivo Theme URI: https://colorvivo.com Author: Color Vivo Internet Author URI: https://colorvivo.com Description: Tema de prensa local para la red de diarios digitales de Color Vivo (ciudadreal.com, herencia.net, diariodelamancha.com, noticiastoledo.com, alcazardesanjuan.com, noticias.madrid…). Un único tema versátil: cada medio cambia su identidad (color, logo, secciones, publicidad) solo con configuración. Rendimiento (limpieza tipo Perfmatters), SEO de noticias (NewsArticle, sitemap de noticias, Open Graph), barra social + IA, newsletter seguro (Acumbamail), anti-spam Turnstile, modo claro/oscuro por tokens y variaciones de estilo por cabecera. Version: 0.9.5 Requires at least: 6.4 Tested up to: 6.8 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: cvnews Tags: news, blog, two-columns, custom-colors, custom-menu, dark-mode-support, editor-style, featured-images, full-width-template, block-styles, translation-ready */ /* ============================================================================ LocalNews Color Vivo — sistema de diseño (source of truth: docs/02-DISENO-SISTEMA.md) Claro por defecto; oscuro con [data-theme="dark"]. Todo por tokens: una cabecera cambia de marca sin tocar componentes. El acento se sobreescribe con variaciones de estilo (styles/*.json) o en Personalizar → Marca del medio. ========================================================================== */ /* ---------- Fuentes auto-hospedadas (subconjunto latino, sin Google Fonts) ---------- Añade los .woff2 en assets/fonts/ (Newsreader y Archivo son variables). */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/archivo-latin.woff2) format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/newsreader-latin.woff2) format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(assets/fonts/newsreader-latin-italic.woff2) format('woff2'); } /* ---------- Tokens ---------- */ :root { --bg: #fbfbfa; /* papel: blanco roto (no #fff puro; lee menos sintético en prensa). */ --surface: #f5f5f2; --surface-2: #ececE7; --ink: #15171c; --ink-soft: #3a3d45; --muted: #5f636b; --rule: #e3e3de; --accent: #d92525; /* rojo prensa por defecto (AA con texto blanco, 4.95:1). Se sobreescribe por marca. */ --accent-strong: #c62222; --on-accent: #ffffff; --live: var(--accent); --masthead-bg: #15171c; --masthead-ink: #f5f5f2; --font-head: 'Newsreader', Georgia, 'Times New Roman', serif; --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Newsreader', Georgia, 'Times New Roman', serif; --container: 1200px; --article: 720px; --radius: 6px; --sp-xs: 8px; --sp-s: 16px; --sp-m: 24px; --sp-l: 36px; --sp-xl: 56px; /* Curvas y duraciones (nunca el "ease" por defecto del navegador). */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in: cubic-bezier(.55, .06, .68, .19); --ease-in-out: cubic-bezier(.65, .05, .36, 1); --dur-fast: .12s; --dur-short: .15s; --dur-mid: .22s; /* Escala de apilamiento nombrada (evita z-index arbitrarios). */ --z-header: 50; --z-dropdown: 60; --z-search: 65; --z-mobile-nav: 70; --z-fab: 800; --z-cookie: 900; --z-skip: 1000; /* Tamaños de lectura (acordado: cuerpo mayor para mejor lectura). */ --fs-body: 19px; --fs-lead: 21px; } [data-theme="dark"] { --bg: #0e0f12; --surface: #16181d; --surface-2: #1e2128; --ink: #e9eaec; --ink-soft: #c4c7cd; --muted: #9aa0a8; --rule: #2a2e36; --accent: #ff5a5a; --accent-strong: #ff8080; --on-accent: #0e0f12; --masthead-bg: #0a0b0d; /* casi negro con matiz (no #000 puro). */ --masthead-ink: #e9eaec; } @media (max-width: 600px) { :root { --fs-body: 18px; --fs-lead: 20px; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-strong); } /* Anillo de foco con contraste garantizado también sobre acentos claros. */ :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); } .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 120px); } /* .screen-reader-text es la clase que emite el core (p. ej. el

«Navegación de entradas» de the_posts_pagination); sin la regla, ese texto se pintaba a la vista. */ .visually-hidden, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 8px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: var(--radius); z-index: var(--z-skip); } /* ---------- Tipografía editorial ---------- */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .4em; } .kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); } .entradilla, .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-soft); } .muted { color: var(--muted); } .meta { font-family: var(--font-ui); font-size: 13px; color: var(--muted); } /* ---------- Botones y chips ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: var(--radius); border: 0; cursor: pointer; } .btn--accent { background: var(--accent); color: var(--on-accent); } .btn--accent:hover { background: var(--accent-strong); color: var(--on-accent); } .btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 20px; background: var(--surface); color: var(--ink); } .tag { font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 4px; background: var(--surface); color: var(--ink-soft); } /* ---------- Cabecera ---------- */ .utility-bar { background: var(--masthead-bg); color: var(--masthead-ink); font-family: var(--font-ui); font-size: 12px; } .utility-bar .container { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 18px; } .utility-bar a { color: var(--masthead-ink); } .utility-bar a:hover { color: #fff; opacity: .85; } .utility-bar .u-left, .utility-bar .u-right { display: flex; align-items: center; gap: 18px; } .u-city { font-weight: 700; } .u-city::after { content: "·"; margin-left: 10px; opacity: .4; font-weight: 400; } /* La barra superior siempre es oscura: gris claro con contraste AA (no usar --muted, que se aclara/oscurece por modo y falla en claro). */ .u-date { color: #c3c4c2; font-variant-numeric: tabular-nums; } .u-menu { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; } .u-menu a { font-weight: 600; } .u-social { display: inline-flex; align-items: center; gap: 6px; } .u-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 6px; border-radius: var(--radius); } .u-social svg { width: 15px; height: 15px; } @media (max-width: 720px) { .u-menu { display: none; } } @media (max-width: 600px) { .u-date { display: none; } } .masthead { background: var(--bg); border-bottom: 1px solid var(--rule); } .masthead .container { display: flex; justify-content: space-between; align-items: center; padding-block: 22px; gap: 20px; } .site-logo { font-family: var(--font-ui); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); } .site-logo .tld { color: var(--accent); } .custom-logo-link { display: inline-block; line-height: 0; } .custom-logo { max-height: 48px; width: auto; height: auto; } /* Logos: versiones clara/oscura (y móvil). El intercambio sigue al modo activo. */ .site-logo-link { display: inline-flex; align-items: center; } .cvnews-logo { display: inline-flex; } .cvnews-logo img { max-height: 48px; width: auto; height: auto; } .cvnews-logo--dark { display: none; } [data-theme="dark"] .site-logo-link--has-dark .cvnews-logo--light { display: none; } [data-theme="dark"] .site-logo-link--has-dark .cvnews-logo--dark { display: inline-flex; } @media (max-width: 600px) { .cvnews-logo img, .custom-logo { max-height: 40px; } } .masthead-actions { display: flex; align-items: center; gap: 14px; } /* La búsqueda fluye inline en escritorio; el envoltorio es transparente al layout. */ .masthead-search { display: contents; } .searchform-inline { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--radius); padding: 9px 14px; } /* min-width:0 permite que el campo encoja dentro del flex sin desbordar en móvil. */ .searchform-inline input { border: 0; background: transparent; font-family: var(--font-ui); font-size: 13px; color: var(--ink); width: 180px; min-width: 0; } .searchform-inline input::placeholder { color: var(--ink-soft); opacity: 1; } /* El foco se dibuja sobre el campo completo (campo + botón), no solo sobre el input. */ .searchform-inline:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .searchform-inline input:focus-visible { outline: 0; box-shadow: none; } .searchform-inline__submit { flex: 0 0 auto; padding: 7px 12px; } .searchform-inline__submit svg { width: 16px; height: 16px; } /* Botón lupa: solo visible en móvil (mismo estilo que los demás iconos de cabecera). */ .search-toggle { display: none; } .main-nav { background: var(--bg); border-bottom: 2px solid var(--ink); } .main-nav .container { display: flex; justify-content: space-between; align-items: center; min-height: 50px; } .main-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; align-items: center; overflow-x: auto; } .main-nav a { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; } .main-nav .current-menu-item > a, .main-nav a:hover { color: var(--accent-strong); } /* Botones de la cabecera: buscar, conmutador de tema y hamburguesa (≥44px, accesibles). */ .theme-toggle, .menu-toggle, .search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; } .theme-toggle:hover, .menu-toggle:hover, .search-toggle:hover { background: var(--surface-2); } .theme-toggle svg, .menu-toggle svg, .search-toggle svg { width: 20px; height: 20px; } .menu-toggle { display: none; } .search-toggle { display: none; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } /* Submenús desplegables (accesibles: hover + foco de teclado con :focus-within). */ .main-nav .menu-item-has-children { position: relative; } .main-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); display: flex; flex-direction: column; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; background: var(--bg); border: 1px solid var(--rule); border-top: 2px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); } .main-nav .menu-item-has-children:hover > .sub-menu, .main-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav .sub-menu li { display: block; } .main-nav .sub-menu a { display: block; padding: 9px 16px; font-size: 13px; white-space: nowrap; } .main-nav .sub-menu a:hover { background: var(--surface); } /* Panel de navegación en móvil (desplegado con el botón hamburguesa). */ @media (max-width: 720px) { .menu-toggle { display: inline-flex; } .main-nav .container { position: relative; min-height: 0; padding-block: 0; } .main-nav .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-mobile-nav); flex-direction: column; align-items: stretch; gap: 0; overflow: visible; background: var(--bg); border-bottom: 2px solid var(--ink); box-shadow: 0 14px 30px rgba(0,0,0,.16); } .main-nav.is-open .nav-menu { display: flex; } .main-nav.is-open { border-bottom-color: var(--accent); } .main-nav .nav-menu > li { border-top: 1px solid var(--rule); } .main-nav .nav-menu a { display: block; padding: 13px 20px; } .main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 6px 12px; min-width: 0; } .main-nav .sub-menu a { padding: 10px 20px; } } /* ---------- Cabecera en móvil: buscador colapsado a lupa + ancho ajustado ---------- */ @media (max-width: 720px) { .masthead { position: relative; } .masthead .container { gap: 10px; padding-block: 16px; } .masthead-actions { gap: 8px; } /* La búsqueda deja de ir inline: se muestra la lupa y el campo se despliega debajo. El panel se oculta con visibility (no display) para poder animar la apertura. */ .search-toggle { display: inline-flex; } .masthead-search { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-search); background: var(--surface); border-bottom: 2px solid var(--accent); padding: 12px clamp(16px, 4vw, 120px); box-shadow: 0 14px 30px rgba(0,0,0,.18); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; /* visibility con duración 0 y retardo solo al cerrar: al abrir pasa a visible en el acto (si se interpolara, seguiría «hidden» en t=0 y el campo no sería enfocable). */ transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s var(--dur-short); } .masthead.search-open .masthead-search { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; } /* La lupa se marca como activa: deja claro que al volver a pulsarla se cierra. */ .masthead.search-open .search-toggle { background: var(--accent); color: var(--on-accent); } .masthead.search-open .searchform-inline { width: 100%; padding: 5px 6px 5px 14px; } .masthead.search-open .searchform-inline input { flex: 1 1 auto; width: auto; font-size: 16px; } /* Objetivo táctil de 44px para el botón de enviar (WCAG 2.5.8). */ .masthead.search-open .searchform-inline__submit { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; } .masthead.search-open .searchform-inline__submit svg { width: 18px; height: 18px; } /* Logo de texto: reducir para que quepa junto a las acciones. */ .site-logo { font-size: 30px; } } @media (max-width: 480px) { .site-logo { font-size: 24px; } /* En pantallas muy estrechas, el botón «Suscríbete» se reserva al menú/pie para no desbordar. Hijo directo: si no, el selector alcanzaría también al botón de enviar del buscador. */ .masthead-actions > .btn--accent { display: none; } } /* Utilidad: ocultar un bloque de portada en móvil (opción por bloque; aligera la home móvil). */ @media (max-width: 720px) { .cvnews-hide-mobile { display: none !important; } } /* ---------- Cabecera fija (opt-in: Personalizar → Cabecera) ---------- Se fija el envoltorio .site-head, que agrupa el masthead y el menú de secciones. La barra superior y el ticker quedan fuera a propósito y se van con el scroll. position: sticky y no fixed: no saca el elemento del flujo, así que no hay salto al activarse ni hay que compensar la altura por JavaScript —y el CLS se queda en 0—. */ .site-head { position: relative; z-index: var(--z-header); } @media (min-width: 721px) { .cvnews-stick-d .site-head { position: sticky; top: 0; } } @media (max-width: 720px) { .cvnews-stick-m .site-head, .cvnews-stick-mup .site-head { position: sticky; top: 0; } .cvnews-stick-mup .site-head { transition: transform var(--dur-mid) var(--ease-out); } .cvnews-stick-mup.cvnews-head-hidden .site-head { transform: translateY(-100%); } /* Con la cabecera fija el panel del menú puede pasarse de alto (un móvil apaisado no llegaría a las últimas secciones): se le deja desplazarse por dentro. */ .cvnews-stick-m .main-nav .nav-menu, .cvnews-stick-mup .main-nav .nav-menu { max-height: 72dvh; overflow-y: auto; } } @media (prefers-reduced-motion: reduce) { .cvnews-stick-mup .site-head { transition: none; } } /* ---------- Ticker "Última hora" (una línea, desplazamiento continuo) ---------- */ .ticker { background: var(--accent); color: var(--on-accent); } /* min-height: el botón de pausa se recortaba contra el overflow de la barra, dejando un área pulsable de 44×10,5 px (Lighthouse, WCAG 2.5.8 pide 24×24). */ .ticker .container { display: flex; align-items: center; gap: 16px; padding-block: 6px; min-height: 44px; overflow: hidden; flex-wrap: nowrap; } .ticker .pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: var(--on-accent); color: var(--accent); font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; white-space: nowrap; } .ticker .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: cvnews-blink 1.4s steps(1) infinite; } /* Degradado simétrico: el botón ya no ocupa el borde derecho del viewport. */ .ticker__viewport { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .ticker__track { display: flex; width: max-content; animation: cvnews-ticker 45s linear infinite; } .ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker--paused .ticker__track { animation-play-state: paused; } .ticker__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--on-accent); color: var(--accent); cursor: pointer; } .ticker__toggle svg { width: 16px; height: 16px; } .ticker__toggle .ico-play { display: none; } .ticker--paused .ticker__toggle .ico-pause { display: none; } .ticker--paused .ticker__toggle .ico-play { display: inline; } .ticker__items { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; } .ticker__items li { display: inline-flex; align-items: center; } .ticker__items li::after { content: "•"; margin: 0 16px; opacity: .55; } .ticker__items a { position: relative; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--on-accent); } /* En pantallas táctiles amplía el área de toque de cada titular a ~44px sin alterar el layout ni la altura de la barra (WCAG 2.5.8 / objetivos táctiles). */ @media (pointer: coarse) { .ticker__items a::before { content: ""; position: absolute; inset: -11px 0; } } @keyframes cvnews-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes cvnews-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .ticker .pill .dot { animation: none; } .main-nav .sub-menu, .share-bar--d .share-btn, .share-bar--c .share-btn, .theme-toggle, .menu-toggle, .search-toggle, .masthead-search, .wa-fab { transition: none; } } /* ---------- Banner bajo el ticker (dos zonas de widgets independientes) ---------- Cada zona vive en su breakpoint: la de escritorio no llega a pintarse en móvil y al revés, así que se puede activar una, la otra o las dos sin opciones adicionales. No se reserva alto: si la zona está vacía el tema no imprime nada (regla .ad-slot:empty). Para que el banner no desplace el contenido al cargar, dale al creativo su width/height. */ .ad-slot--ticker_d, .ad-slot--ticker_m { padding-block: var(--sp-s); } .ad-slot--ticker_d img, .ad-slot--ticker_m img { max-width: 100%; height: auto; } @media (max-width: 720px) { .ad-slot.ad-slot--ticker_d { display: none; } } @media (min-width: 721px) { .ad-slot.ad-slot--ticker_m { display: none; } } /* ---------- Módulo "En directo" ---------- */ .live { background: var(--surface); } .live .container { padding-block: var(--sp-m); } .live__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-s); } .live__pill { display: inline-flex; align-items: center; gap: 7px; background: var(--live); color: var(--on-accent); font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; } .live__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .live__item time { font-family: var(--font-ui); font-size: 13px; font-weight: 800; color: var(--accent-strong); display: block; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .live__item .h { font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 1.2; } /* ---------- Hero de portada: noticia grande arriba + 4 secundarias (2 col) + rail ---------- */ .hero { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 34px; align-items: start; padding-block: var(--sp-l); } .hero:has(.ad-rail:empty) { grid-template-columns: 1fr; } .hero__main { display: flex; flex-direction: column; gap: 26px; min-width: 0; } .hero__lead img, .card img, .story img { border-radius: 4px; width: 100%; } .hero__lead > a { display: block; } .hero__lead img { aspect-ratio: 16 / 9; object-fit: cover; } .hero__lead h1 { font-size: clamp(30px, 3.2vw, 42px); margin-top: 12px; } .hero__lead .entradilla { margin-top: 4px; } .hero__secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid var(--rule); padding-top: 22px; } .hero__secondary .story { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .hero__secondary .story__thumb img { aspect-ratio: 16 / 10; object-fit: cover; } .hero__secondary .story h3 { font-size: 17px; line-height: 1.18; margin: 0; } /* Rail: sticky y apilable (admite 1 grande de 300×600 o 2 pequeños de 300×250). */ .ad-rail { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .ad-rail:empty { display: none; } /* ---------- Secciones y tarjetas ---------- */ .section-header { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; } .section-header .tick { width: 5px; height: 20px; background: var(--accent); } .section-header h1, .section-header h2 { font-family: var(--font-ui); font-size: 20px; font-weight: 800; margin: 0; line-height: 1.15; } .section-header .more { margin-left: auto; font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--accent-strong); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Rejilla de tarjetas con nº de columnas configurable (--cols, 1–6); el tamaño se adapta. */ .grid-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 22px; } /* Variante sin imagen: tarjetas de solo texto con una fina línea de acento arriba. */ .grid-cards--noimg .card { border-top: 2px solid var(--rule); padding-top: 12px; } .home-section { margin-bottom: var(--sp-l); } .card img { aspect-ratio: 16 / 10; object-fit: cover; } .card h3 { font-size: 20px; margin: 8px 0 4px; line-height: 1.14; } .card .kicker { margin-top: 10px; display: inline-block; } .card .desc { font-size: 14px; color: var(--muted); line-height: 1.4; } .hero__lead img { aspect-ratio: 16 / 9; object-fit: cover; } /* Secciones compactas (muchas categorías sin agrandar la home) */ .compact-sections { background: var(--surface); padding-block: var(--sp-l); } /* Se adapta al nº de columnas: <4 rellenan el ancho; >4 pasan a 2 filas (máx. ~4 por fila). */ .compact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; } .compact-col h3 { font-family: var(--font-ui); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 8px; border-bottom: 2px solid var(--accent); } .compact-col .lead-h { font-size: 17px; margin: 10px 0; } .compact-col li { list-style: none; padding: 9px 0; border-top: 1px solid var(--rule); font-family: var(--font-head); font-size: 14px; font-weight: 500; color: var(--ink-soft); } .compact-col ul { margin: 0; padding: 0; } /* Destacado por secciones: 2 categorías (2 noticias) en tarjetas sobre banda sombreada */ .dual-sections { background: var(--surface); padding-block: var(--sp-l); } .dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Nº impar de columnas: la primera sección ocupa todo el ancho (bloque destacado). */ .dual-grid--lead .dual-col:first-child { grid-column: 1 / -1; } @media (min-width: 701px) { .dual-grid--lead .dual-col:first-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .dual-grid--lead .dual-col:first-child .section-header { grid-column: 1 / -1; } .dual-grid--lead .dual-col:first-child .dual-item { border-top: 0; padding-top: 6px; } } .dual-col { background: var(--bg); border-radius: 8px; padding: 22px 24px; } .dual-col .section-header { margin-bottom: 14px; } .dual-item { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-top: 1px solid var(--rule); } .dual-item:first-of-type { border-top: 0; padding-top: 0; } .dual-thumb { flex: 0 0 104px; } .dual-thumb img { width: 104px; height: 68px; object-fit: cover; border-radius: 4px; } .dual-item__title { font-size: 18px; line-height: 1.18; margin: 0; } @media (max-width: 700px) { .dual-grid { grid-template-columns: 1fr; } } /* ---------- Listados de archivo, búsqueda y autor ---------- */ /* .story solo estaba estilado dentro de .hero__secondary: sin estas reglas, cada resultado apilaba la imagen a todo el ancho de la columna sobre el titular. */ .story--horizontal { display: flex; gap: 20px; align-items: flex-start; padding-block: 22px; border-top: 1px solid var(--rule); } .story--horizontal:first-of-type { border-top: 0; padding-top: 0; } .story--horizontal .story__thumb { flex: 0 0 220px; display: block; } .story--horizontal .story__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; } .story--horizontal .story__text { min-width: 0; } .story--horizontal h2 { font-size: 22px; line-height: 1.18; margin: 6px 0 6px; } .story--horizontal .desc { font-size: 15px; color: var(--muted); line-height: 1.45; margin-bottom: 8px; } .story--horizontal .meta { font-family: var(--font-ui); font-size: 13px; color: var(--muted); } @media (max-width: 640px) { .story--horizontal { flex-direction: column; gap: 12px; } .story--horizontal .story__thumb { flex: none; width: 100%; } .story--horizontal h2 { font-size: 20px; } } /* Cabeceras de búsqueda, 404 y ficha de autor. */ .search-hero, .author-hero { padding-block: var(--sp-l) var(--sp-m); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-m); } .search-hero h1, .author-hero h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.14; margin: 0; } .author-hero { display: flex; gap: 22px; align-items: flex-start; } .author-hero .avatar { flex: none; border-radius: 50%; } .author-hero__text { min-width: 0; } .author-hero .entradilla { color: var(--ink-soft); margin-top: 8px; max-width: 62ch; } @media (max-width: 560px) { .author-hero { flex-direction: column; gap: 14px; } } /* Etiquetas al pie del artículo. */ .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block: var(--sp-m); } .article-tags a { font-family: var(--font-ui); font-size: 13px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); text-decoration: none; } .article-tags a:hover, .article-tags a:focus-visible { border-color: var(--accent); color: var(--accent-strong); } /* ---------- Cuerpo con sidebar ---------- */ .with-sidebar { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; padding-block: var(--sp-m) var(--sp-xl); } /* En el artículo, todo el sidebar acompaña al scroll y se detiene al final de la rejilla (antes de los comentarios). */ .single .with-sidebar > .sidebar { position: sticky; top: 16px; align-self: start; } .single .with-sidebar > .sidebar .ad-rail { position: static; } .comments-wrap { padding-block: 0 var(--sp-xl); } /* ---------- Barra lateral: separación uniforme entre módulos ---------- */ .sidebar { display: flex; flex-direction: column; gap: 26px; } /* ---------- Lo más leído / Últimas ---------- */ .most-read { background: var(--surface); border-radius: var(--radius); padding: 20px; } .most-read--plain li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex: none; } .most-read--plain .h { font-weight: 600; } .most-read h2 { font-family: var(--font-ui); font-size: 16px; font-weight: 800; margin-bottom: 14px; } .most-read li { display: flex; gap: 12px; padding-block: 14px; border-top: 1px solid var(--rule); list-style: none; } .most-read li:first-child { border-top: 0; padding-top: 0; } .most-read .num { font-family: var(--font-ui); font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .most-read .h { font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 1.24; } .most-read ul { margin: 0; padding: 0; } /* ---------- Cuadro Tribuna / Opinión (sidebar) ---------- */ .opinion-box { border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 8px; padding: 20px; background: var(--bg); } .opinion-box__label { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent-strong); } /* Roman (no cursiva): los encabezados van rectos; el énfasis lo lleva el peso + la etiqueta de acento encima. */ .opinion-box__title { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.26; color: var(--ink); margin: 8px 0 14px; } .opinion-box__author { display: flex; align-items: center; gap: 10px; } .opinion-box__author .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); } .opinion-box__author .name { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink); } .opinion-box__author .role { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--muted); } /* ---------- Newsletter ---------- */ .newsletter { background: var(--masthead-bg); color: var(--masthead-ink); border-radius: var(--radius); padding: 24px; } .newsletter .k { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); } .newsletter h2 { color: var(--masthead-ink); font-size: 22px; } .newsletter input[type="email"] { width: 100%; height: 44px; border: 0; border-radius: var(--radius); padding: 0 14px; font-family: var(--font-ui); margin-bottom: 10px; } .cvnews-consent { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-ui); font-size: 12px; line-height: 1.4; margin-bottom: 12px; } .cvnews-consent a { text-decoration: underline; } .cvnews-nl-msg { font-family: var(--font-ui); font-size: 13px; margin: 10px 0 0; min-height: 1em; } .cvnews-nl-msg:empty { margin: 0; } /* ---------- Publicidad (colapsa si vacío; varios anuncios se apilan) ---------- */ .ad-slot:empty { display: none; } /* El alto reservado se expresa como propiedad personalizada, no como min-height directo: así el valor por zona del panel —que llega en el atributo style del propio elemento— gana sin necesidad de !important ni de pelear con la especificidad. */ .ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: var(--cvnews-ad-h, 0px); } /* Altura mínima por formato: evita el salto de maquetación (CLS) al inyectar el anuncio. El hueco vacío sigue colapsado por .ad-slot:empty (sin reserva sin venta). */ .ad-slot--billboard { margin-block: 44px; --cvnews-ad-h: 250px; } .ad-slot--in_feed { margin-block: 28px; --cvnews-ad-h: 90px; } .ad-slot--in_article { --cvnews-ad-h: 250px; } .ad-slot--mpu, .ad-slot--rail, .ad-slot--post_sidebar { --cvnews-ad-h: 250px; } @media (max-width: 600px) { /* En móvil los formatos grandes suelen servir banners de 300×250. */ .ad-slot--billboard, .ad-slot--in_feed { --cvnews-ad-h: 250px; } } /* Banner propio: el markup lo genera el tema, con width/height en la imagen, así que el hueco ya está reservado por la propia relación de aspecto y no hace falta reservar más. */ .ad-banner { display: block; max-width: 100%; } .ad-banner__img { display: block; max-width: 100%; height: auto; } /* Anuncio de un tercero aún sin consentir: se queda el hueco, no un cartel. Un aviso por cada anuncio bloqueado convertiría la portada en un muro de carteles. */ .ad-slot--pending { position: relative; } /* ---------- Artículo ---------- */ .article { max-width: var(--article); } .article h1 { font-size: clamp(30px, 4vw, 46px); } .article .article-body { font-size: var(--fs-body); line-height: 1.65; } .article .article-body p { margin: 0 0 1.1em; } .article .article-body h2 { font-size: 28px; margin-top: 1.4em; } /* Los enlaces que pone la redacción dentro de la noticia deben distinguirse del texto: la regla base `a { color: inherit; text-decoration: none }` los dejaba invisibles. */ .article .article-body a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .article .article-body a:hover, .article .article-body a:focus-visible { text-decoration-thickness: 2px; } /* Contenido incrustado ancho (tablas pegadas por redacción) sin romper el reflow a 320px. */ .article .article-body table { display: block; overflow-x: auto; max-width: 100%; } .article blockquote { border-left: 4px solid var(--accent); margin: 1.2em 0; padding: .2em 0 .2em 22px; font-style: italic; font-size: 24px; line-height: 1.3; } /* Separación de la barra Compartir inferior respecto a Relacionados */ .article .share-bar:last-of-type { margin-bottom: 12px; } .article .related { margin-top: var(--sp-l); } /* ---------- Cabecera del artículo: imagen destacada configurable ---------- El markup es único (template-parts/content-article-header.php); cada modo se maqueta solo con clases: .article-header--{modo}. Los modos a ancho completo (above-full/above-full-wide/overlay) se pintan en .article-fullhero, un .container propio encima de la rejilla, y salen así de la columna de 720px. */ .article-header { margin-bottom: var(--sp-m); } .article-figure { margin: 0; } .article-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; } .article-figure figcaption { margin-top: 8px; } /* Estándar: texto y, debajo, la imagen (separación entre ambos). */ .article-header--standard .article-figure { margin-top: var(--sp-m); } /* Encima (columna): imagen primero, luego el bloque de texto. */ .article-header--above .article-figure { margin-bottom: var(--sp-m); } /* Contenedor de los modos a ancho completo (encima de la rejilla). */ .article-fullhero { padding-top: var(--sp-m); } .article-fullhero .breadcrumb { margin-bottom: var(--sp-s); } .article-fullhero .article-header { margin-bottom: 0; } /* Texto en la columna de lectura, alineado con el inicio del cuerpo. */ .article-header--above-full .article-header__text { max-width: var(--article); } .article-header--above-full .article-figure--full { margin-bottom: var(--sp-m); } .article-figure--full img { border-radius: 6px; } /* Título + imagen a ancho completo: el texto no se encajona en 720px. */ .article-header--above-full-wide .article-header__text--wide { max-width: none; margin-bottom: var(--sp-m); } .article-header--above-full-wide .article-header__text--wide h1 { font-size: clamp(34px, 5vw, 60px); } /* Overlay: imagen de fondo + degradado + kicker/H1/byline superpuestos (H1 real en el DOM; contraste AA gracias al scrim oscuro y al texto claro). */ .article-header--overlay { margin-bottom: var(--sp-m); } .overlay-media { position: relative; border-radius: 6px; overflow: hidden; } .overlay-media img { width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; object-fit: cover; } .overlay-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.12) 100%); } .overlay-content { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(20px, 4vw, 46px); color: #fff; } .overlay-content .kicker { color: #fff; } .overlay-content h1 { color: #fff; font-size: clamp(30px, 4.4vw, 54px); max-width: 22ch; text-shadow: 0 1px 3px rgba(0,0,0,.45); } .overlay-content .byline .meta, .overlay-content .byline .byline-name, .overlay-content .byline .byline-name-caps, .overlay-content .byline .cat, .overlay-content .byline time, .overlay-content .byline a { color: rgba(255,255,255,.95); } .article-figure__credit { margin: 8px 0 0; } /* Split: imagen a un lado, cabecera de texto al otro (editorial). */ .article-header--split { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); gap: var(--sp-m) var(--sp-l); align-items: center; } .article-header--split .article-figure { margin: 0; } .article-header--split .article-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; } /* Split a ancho completo (se pinta en .article-fullhero): título con presencia. */ .article-header--split .article-header__text h1 { font-size: clamp(28px, 3.2vw, 46px); margin-top: 0; } .article-header--split .article-header__text .entradilla { font-size: var(--fs-lead); } @media (max-width: 700px) { .article-header--split { grid-template-columns: 1fr; } .article-header--split .article-figure img { aspect-ratio: 16 / 9; } .overlay-content h1 { font-size: clamp(24px, 7vw, 34px); } .overlay-content { padding: 16px; } .article-header--above-full-wide .article-header__text--wide h1 { font-size: clamp(28px, 8vw, 40px); } } /* ---------- Byline (5 estilos configurables) ---------- */ .byline { font-family: var(--font-ui); padding-block: 6px; } .byline .avatar { border-radius: 50%; background: var(--surface-2); object-fit: cover; flex: none; } .byline .meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .byline.is-compact .meta { font-size: 12px; } .byline .byline-name { font-weight: 700; color: var(--ink); } .byline .sep { opacity: .5; margin: 0 3px; } .byline .meta-ico { width: 13px; height: 13px; } .byline-row { display: flex; align-items: center; gap: 12px; } .byline.is-compact .byline-row { gap: 9px; } .byline-stack { display: flex; flex-direction: column; gap: 1px; } .byline-stack .byline-name { font-size: 15px; } .byline.is-compact .byline-stack .byline-name { font-size: 13px; } /* V1 inline */ .byline--v1 .byline-inline { display: inline-flex; align-items: center; flex-wrap: wrap; } /* V3 chips */ .byline-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .byline-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 20px; } .byline.is-compact .byline-chip { padding: 6px 10px; font-size: 11px; } .byline-chip .meta-ico { color: var(--muted); } .byline-chip.chip--cat { background: var(--accent); color: var(--on-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .byline-chip.chip--author { padding-left: 5px; font-weight: 700; } .byline-chip.chip--author .avatar { width: 24px; height: 24px; } /* V4 editorial hairline */ .byline-hair { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; flex-wrap: wrap; } .byline-hair .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .byline-hair .caps { font-weight: 800; letter-spacing: .5px; } .byline-hair .cat { color: var(--accent-strong); } .byline-hair .grow { flex: 1; } .byline-hair .meta { font-weight: 600; } /* V5 author card */ .author-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 8px; padding: 14px; } .author-card .avatar { width: 46px; height: 46px; } .author-card .ac-top { display: flex; align-items: center; gap: 8px; } .author-card .byline-name { font-family: var(--font-head); font-size: 17px; } .author-card .grow { flex: 1; } .follow { font-size: 11px; font-weight: 700; background: var(--accent); color: var(--on-accent); border-radius: 12px; padding: 3px 9px; } /* ---------- Barra Compartir + IA (una línea; 3 estilos: a/b/c) ---------- */ .share-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: 16px; } .share-label { font-family: var(--font-ui); font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--ink); } .share-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .share-div { width: 1px; align-self: stretch; min-height: 26px; background: var(--rule); margin: 0 4px; } .share-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; color: var(--ink); background: var(--surface); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } .share-btn svg { display: block; } .share-btn-label { display: none; font-family: var(--font-ui); } /* A · circular monocromo (color de marca al hover) */ .share-bar--a .share-btn { width: 40px; height: 40px; border-radius: 50%; } .share-bar--a .share-btn svg { width: 19px; height: 19px; } .share-bar--a .share-btn:hover { transform: translateY(-1px); color: #fff; } .share-bar--a .share-btn--whatsapp:hover { background: #25d366; } .share-bar--a .share-btn--twitter:hover, .share-bar--a .share-btn--grok:hover { background: #000; } .share-bar--a .share-btn--facebook:hover { background: #1877f2; } .share-bar--a .share-btn--telegram:hover { background: #229ed9; } .share-bar--a .share-btn--email:hover, .share-bar--a .share-btn.cvnews-copy:hover { background: var(--ink); } .share-bar--a .share-btn--chatgpt:hover, .share-bar--a .share-btn--claude:hover, .share-bar--a .share-btn--perplexity:hover, .share-bar--a .share-btn--google_ai:hover { background: var(--accent); color: var(--on-accent); } /* B · color de marca (estilo Astro) */ .share-bar--b .share-btn { width: 40px; height: 40px; border-radius: 10px; } .share-bar--b .share-btn svg { width: 20px; height: 20px; } .share-bar--b .share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); } .share-bar--b .share-btn--whatsapp { color: #25d366; } .share-bar--b .share-btn--twitter, .share-bar--b .share-btn--grok { color: var(--ink); } .share-bar--b .share-btn--facebook { color: #1877f2; } .share-bar--b .share-btn--telegram { color: #229ed9; } .share-bar--b .share-btn--email, .share-bar--b .share-btn.cvnews-copy { color: var(--muted); } .share-bar--b .share-btn--chatgpt { color: #10a37f; } .share-bar--b .share-btn--claude { color: #cc785c; } .share-bar--b .share-btn--perplexity { color: #20808d; } .share-bar--b .share-btn--google_ai { color: #4285f4; } /* C · píldoras con etiqueta */ .share-bar--c .share-btn { gap: 7px; padding: 8px 13px; border-radius: 20px; font-size: 12px; font-weight: 600; } .share-bar--c .share-btn svg { width: 15px; height: 15px; } .share-bar--c .share-btn-label { display: inline; } .share-bar--c .share-btn:hover { transform: translateY(-1px); } /* D · chips con borde (estilo Astro / cloudprivado / especialmundial) */ .share-bar--d .share-btn { gap: 6px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 600; } .share-bar--d .share-btn svg { width: 15px; height: 15px; opacity: .85; } .share-bar--d .share-btn-label { display: inline; } .share-bar--d .share-btn:hover { border-color: var(--accent); color: var(--accent-strong); } .share-bar--d .share-btn:hover svg { opacity: 1; } .share-bar--d .share-btn.is-ai { border-style: dashed; } .share-bar--d .share-btn.is-ai:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .share-bar--d .share-div { display: none; } @media (max-width: 600px) { .share-label { min-width: 100%; } .share-bar--d .share-btn-label { display: none; } .share-bar--d .share-btn { padding: 8px; } } /* ---------- Comentarios (estilados por si se activan) ---------- */ .comments-area { max-width: var(--article); margin-top: var(--sp-l); padding-top: var(--sp-m); border-top: 2px solid var(--ink); } .comments-title, .comment-reply-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-bottom: var(--sp-m); } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .children { list-style: none; margin: 0 0 0 clamp(16px, 4vw, 44px); padding: 0; } .comment-list li.comment { margin-bottom: var(--sp-s); } .comment-body { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; } .comment .comment-author { display: flex; align-items: center; gap: 10px; } .comment .comment-author .avatar { width: 40px; height: 40px; border-radius: 50%; } .comment .comment-author .fn { font-family: var(--font-ui); font-weight: 700; font-style: normal; color: var(--ink); } .comment .comment-author .says { display: none; } .comment-metadata { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin: 4px 0 10px; } .comment-metadata a { color: var(--muted); } .comment-content { font-family: var(--font-body); font-size: 16px; line-height: 1.6; } .comment-content p { margin: 0 0 .6em; } .reply { margin-top: 8px; } .comment-reply-link { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--accent-strong); } .bypostauthor > .comment-body { border-left: 3px solid var(--accent); } .comment-respond { margin-top: var(--sp-l); } .comment-form { display: grid; gap: 14px; } .comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { display: flex; flex-direction: column; gap: 6px; } .comment-form label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; width: 100%; } .comment-form textarea { min-height: 130px; resize: vertical; } .comment-form .comment-notes, .comment-form .comment-form-cookies-consent { font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .comment-form .form-submit .submit { font-family: var(--font-ui); font-weight: 700; font-size: 14px; padding: 12px 22px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius); cursor: pointer; } .comment-form .form-submit .submit:hover { background: var(--accent-strong); } .comments-area .no-comments, .comments-area .comment-awaiting-moderation { font-family: var(--font-ui); font-size: 14px; color: var(--muted); } /* ---------- Pie ---------- */ .site-footer { background: var(--surface); color: var(--ink-soft); margin-top: var(--sp-l); border-top: 1px solid var(--rule); } .site-footer a { color: var(--ink-soft); } .site-footer a:hover { color: var(--ink); } /* Layout flexible: se adapta al nº de columnas de menú asignadas (pie compacto). */ .footer-top { display: flex; flex-wrap: wrap; gap: 24px 48px; padding-block: 32px; } .footer-brand { flex: 1 1 280px; max-width: 380px; } .footer-top .footer-col:not(.footer-brand) { flex: 0 1 170px; } .footer-col h3 { font-family: var(--font-ui); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 12px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-ui); font-size: 13px; } .footer-bar { border-top: 1px solid var(--rule); padding-block: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .footer-legal { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-legal-menu { display: inline-flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; } .footer-legal-menu li { display: inline; } /* ---------- Estilos de pie alternables (Personalizar → Pie de página) ---------- */ /* Centrado: logo, menú de secciones y redes centrados. */ .site-footer--centered .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 16px; } .site-footer--centered .footer-brand { flex: 0 1 auto; max-width: 640px; } .site-footer--centered .footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .footer-hmenu-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: 14px; font-weight: 600; } .site-footer--centered .footer-bar { justify-content: center; text-align: center; } .site-footer--centered .footer-legal { justify-content: center; } /* Marca + menú: logo/redes a un lado, un menú al otro. */ .site-footer--brand .footer-top { justify-content: space-between; } /* Mínimo: sin franja superior; barra un poco más aireada. */ .site-footer--minimal .footer-bar { padding-block: 20px; } /* Enlace "Cookies" (retirar consentimiento): botón sin cromo, con aspecto de enlace del pie. */ .footer-cookies-link { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .footer-cookies-link:hover, .footer-cookies-link:focus-visible { color: var(--ink); } /* ---------- Banner de cookies ---------- */ .cookie-banner { position: fixed; inset-inline: 0; bottom: 0; background: var(--masthead-bg); color: var(--masthead-ink); border-top: 3px solid var(--accent); padding: 18px clamp(16px,4vw,120px); z-index: var(--z-cookie); } .cookie-banner[hidden] { display: none; } .cookie-banner .actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } /* El banner se pinta sobre --masthead-bg, no sobre el fondo de página: .btn--outline usa --ink, que en modo claro es exactamente ese mismo color y dejaba «Rechazar» invisible (contraste 1,0:1). Rechazar debe verse tan bien como Aceptar, y no solo por WCAG: la AEPD exige que rechazar sea tan fácil como aceptar. */ .cookie-banner .btn--outline { color: var(--masthead-ink); border-color: var(--masthead-ink); } .cookie-banner .btn--outline:hover, .cookie-banner .btn--outline:focus-visible { background: var(--masthead-ink); color: var(--masthead-bg); } .cookie-banner :focus-visible { box-shadow: 0 0 0 4px var(--masthead-bg); } /* Panel de preferencias por categorías (opt-in en Personalizar → Analítica y cookies). */ .cookie-prefs { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 12px; max-height: 45vh; overflow-y: auto; } .cookie-prefs[hidden] { display: none; } .cookie-prefs__row { font-size: 14px; } .cookie-prefs__toggle { display: flex; gap: 10px; align-items: center; cursor: pointer; } .cookie-prefs__toggle input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } .cookie-prefs__head { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 0; } .cookie-prefs__label { font-family: var(--font-ui); font-weight: 700; } /* Descripción fuera del