/*
Theme Name: Zythos
Author: Zythos Business
Description: Tema de la asesoria Zythos, adaptado del tema de revista de MCM. Estructura y look conservados, rebrandeado a la paleta corporativa (azul navy + dorado).
Version: 0.2
Text Domain: zythos
Domain Path: /languages
*/

/* --- 0. RESET & GLOBALS --- */
:root {
    /* Paleta Zythos: navy + azul claro + dorado */
    --zy-navy: #0e2a47;
    --zy-navy-light: #16406b;
    --zy-gold: #c8a24b;
    /* --mcm-vino es la variable de "color de marca/acento" que usan las
       plantillas y el CSS heredados. Se conserva el nombre y se reapunta al
       azul Zythos para no tocar cada referencia. */
    --mcm-vino: #16406b;
    --mcm-white: #ffffff;
    --mcm-black: #000000;
    --mcm-gray-bg: #f9f9f9;
    --mcm-font-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
body, html {
    background-color: var(--mcm-white) !important;
    font-family: 'Georgia', serif;
    color: #111;
    margin: 0; padding: 0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
}

/* Home: breathing room between header/nav and main content */
.home .mcm-home-container{padding-top:28px;}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: color 0.2s; }
a:hover { color: var(--mcm-vino); }
ul, li { list-style: none; padding: 0; margin: 0; } 

/* Tipografía */
h1, h2, h3, h4, h5, h6,
.entry-title, .section-title, .mcm-card-title, .page-title, .comments-title, .widget-title {
    font-family: var(--mcm-font-title);
    letter-spacing: -0.5px;
    font-weight: 700;
}

/* Fotos Redondeadas Globales */
.featured-image-container img, .entry-content img, .related-thumb img, 
.mcm-archive-media img, .wp-block-image img, .mcm-card-media img, .avatar {
    border-radius: 12px !important;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- 1. ESTRUCTURA Y ESPACIADO GLOBAL (25px) --- */
.single-article, 
.mcm-archive-container,
.mcm-home-section:first-child { 
    margin-top: 25px !important; 
    padding-top: 0 !important;
}

/* --- 2. HEADER & BRANDING --- */
#mcm-branding-row { background: #fff; padding: 0; text-align: center; border-bottom: 1px solid #f2f2f2; }
.logo-wrapper { display: flex; justify-content: center; padding: 15px 0; }
.mcm-main-logo { 
    width: 300px !important; 
    height: auto; 
    display: block; 
}

/* --- 3. NAVEGACIÓN (Lógica JS) --- */
#mcm-navbar {
    background: #fff; border-bottom: 2px solid #000;
    width: 100%; height: 50px; position: relative; z-index: 9999;
}
#mcm-navbar.is-fixed { position: fixed; top: 0; left: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

.mcm-nav-container { display: flex; justify-content: space-between; align-items: center; height: 100%; }

.mcm-nav-item.left { width: 60px; height: 100%; display: flex; align-items: center; justify-content: flex-start; }
.mcm-nav-item.center { flex-grow: 1; display: flex; justify-content: center; align-items: center; height: 100%; }
.mcm-nav-item.right { width: 60px; }

/* Menú Escritorio */
.mcm-desktop-menu-wrap { height: 100%; display: flex; align-items: center; }
.mcm-main-menu { display: flex; gap: 20px; }
.mcm-main-menu > li > a { 
    font-weight: 800; font-size: 11px; text-transform: uppercase; font-family: sans-serif; 
    height: 50px; line-height: 50px; display: block; 
}
.mcm-main-menu > li > a:hover { 
    color: var(--mcm-vino); text-decoration: underline; text-decoration-color: var(--mcm-vino);
    text-decoration-thickness: 3px; text-underline-offset: 4px; 
}

/* SUBMENÚS: LÓGICA DE COLUMNAS (RECUPERADO) */
.mcm-main-menu li { position: relative; }
.mcm-main-menu .sub-menu {
    display: none; position: absolute; top: 50px; left: -15px; background: #fff;
    border: 1px solid #eee; min-width: 200px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10000;
}
.mcm-main-menu li:hover > .sub-menu { display: block; }
.mcm-main-menu .sub-menu a { display: block; padding: 10px 20px; font-size: 11px; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid #f9f9f9; }

/* REGLA MÁGICA: Si hay más de 10 elementos, dividir en 2 columnas */
.mcm-main-menu .sub-menu:has(li:nth-child(11)) {
    width: 440px;       /* Ancho doble */
    columns: 2;         /* Divide en 2 columnas */
    column-gap: 0;      /* Sin hueco extra */
}
/* Soporte manual por si usas la clase 'mcm-mega-menu' */
.mcm-main-menu > li.mcm-mega-menu > .sub-menu { width: 440px; columns: 2; }

/* Elementos Móviles */
#mcm-burger-trigger { display: none; background: none; border: none; cursor: pointer; color: #000; height: 100%; align-items: center; }
.mcm-mobile-logo-link, .mcm-sticky-logo-link { display: none; }
.is-fixed .mcm-sticky-logo-link { display: block; margin-left: 10px; }
.mcm-sticky-logo { height: 24px; width: auto; }

/* --- 4. PORTADA (HOME) --- */
.mcm-home-container { padding-bottom: 60px; }
.mcm-home-section { margin-bottom: 60px; }

.section-header { display: flex; align-items: center; margin-bottom: 25px; }
.section-title { font-size: 24px; margin: 0; padding-right: 20px; text-transform: uppercase; }
.section-line { flex-grow: 1; height: 4px; background-color: #000; }

.mcm-hero-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 30px; }
.hero-main { grid-column: 1 / 2; grid-row: 1 / 3; }
.hero-main .mcm-card-media img { height: 480px; }
.mcm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.mcm-card-media { position: relative; margin-bottom: 15px; overflow: hidden; }
.mcm-card-media img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.3s; }
.mcm-card:hover .mcm-card-media img { transform: scale(1.05); }

.mcm-cat-overlay { 
    position: absolute; bottom: 0; left: 0; background: #000; color: #fff; 
    font-size: 13px; font-weight: 800; padding: 10px 15px; text-transform: uppercase; font-family: sans-serif;
}
.mcm-card-title { font-size: 18px; line-height: 1.3; margin: 0 0 10px 0; }

/* --- 5. SINGLE ARTICLE (Detalle) --- */
.single-article { padding-bottom: 60px; }
.content-limit { max-width: 820px; margin: 0 auto; }

/* CAPTIONS (PIES DE FOTO) */
.mcm-caption,
.entry-content figcaption,
.wp-caption-text {
    text-align: right; font-size: 11px !important; line-height: 1.3 !important;
    color: #555; /* Gris oscuro elegante */
    margin-top: 6px; font-style: italic; font-family: sans-serif; display: block;
    overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%;
}

/* Categoría Centrada y Corta */
.mcm-entry-cat { margin-bottom: 10px !important; text-align: left; }
.mcm-entry-cat a {
    font-weight: 800; font-size: 13px !important; text-transform: uppercase;
    font-family: sans-serif; color: #000; position: relative;
    display: inline-block; padding: 0 0 6px 0 !important; border-bottom: none !important;
    line-height: 1;
}
.mcm-entry-cat a::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 30px; height: 2px;
    background-color: var(--mcm-vino);
}

.entry-title { font-size: 3rem; line-height: 1.1; color: #000; margin-bottom: 15px !important; margin-top: 20px; }

/* Autor / Byline — Guardian-NYT style: avatar pequeño + By Author + date
   line con Updated condicional. "Updated" solo aparece si modified > pub+6h.
   E-E-A-T signal directo de Google News. */
.mcm-author-box {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0 !important; margin-bottom: 18px !important;
    border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}
.mcm-avatar img { border-radius: 50% !important; width: 44px; height: 44px; object-fit: cover; }
.mcm-meta-info { font-family: sans-serif; font-size: 13px; color: #333; line-height: 1.4; }
.mcm-byline-line { color: #111; }
.mcm-byline-prefix { color: #666; font-weight: 400; margin-right: 4px; }
.mcm-author-name { font-weight: 700; }
.mcm-author-name a { color: #111; text-decoration: none; }
.mcm-author-name a:hover { color: var(--mcm-vino); }
.mcm-date-line { color: #666; font-size: 12px; margin-top: 2px; }
.mcm-date-sep { margin: 0 6px; color: #ccc; }
.mcm-updated-date { color: var(--mcm-vino); font-weight: 600; }
.mcm-read-time { color: #666; }

/* Contenido */
.entry-content { font-size: 21px; line-height: 1.8; color: #111; }
.single-article .entry-content p:first-child { margin-top: 0 !important; }

/* Share Buttons */
.mcm-share-section {
    margin: 0 0 15px 0 !important; padding-top: 25px; border-top: 1px solid #eee;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.share-label { font-weight: 800; font-size: 12px; font-family: sans-serif; text-transform: uppercase; }
.mcm-btn-share {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--mcm-gray-bg); color: #444 !important; border: 1px solid #e5e5e5;
    font-family: sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase;
    height: 44px; padding: 0 20px; border-radius: 4px; transition: all 0.2s;
}
.mcm-btn-share:hover { background-color: #000; color: #fff !important; }
.mcm-btn-share svg { width: 14px !important; height: 14px !important; fill: currentColor; }
.mcm-btn-share.facebook svg { margin-right: 6px; }
.mcm-btn-share.icon-only { padding: 0; width: 44px; justify-content: center; }

/* --- 6. REDES SOCIALES (WIDGETS Y MENÚS) --- */
.widget_social_icons ul, .social-icons ul, .menu-social-container ul {
    display: flex !important; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none !important;
}
.widget_social_icons li, .social-icons li, .menu-social-container li {
    margin: 0 !important; padding: 0 !important;
}
.widget_social_icons a, .social-icons a, .menu-social-container a {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 36px !important; height: 36px !important;
    background-color: #333; color: #fff !important;
    border-radius: 50% !important;
    font-size: 16px; text-decoration: none; transition: 0.3s;
}
.widget_social_icons a:hover, .social-icons a:hover {
    background-color: var(--mcm-vino); transform: translateY(-2px);
}
.widget_social_icons svg, .widget_social_icons i { width: 16px; height: 16px; fill: currentColor; }

/* --- 7. ARTÍCULOS RELACIONADOS --- */
.mcm-related-wrapper { margin-top: 10px !important; padding-top: 20px !important; border-top: 4px solid #000; }
.related-heading { margin-bottom: 15px !important; font-size: 24px; text-transform: uppercase; }
.mcm-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.related-item { margin-bottom: 20px; }
.related-thumb img { width: 100%; height: 180px; object-fit: cover; margin-bottom: 10px; }
.related-cat a { font-size: 10px; text-transform: uppercase; font-weight: 800; color: var(--mcm-vino); }
.related-title { font-size: 16px; line-height: 1.2; margin-top: 5px; }

/* =========================================
   BLOQUE: COMENTARIOS (V2 - SAFE MODE)
   ========================================= */

/* 1. El Contenedor que lo separa del artículo */
.mcm-comments-wrapper {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 4px solid #000; /* Separador negro fuerte */
    clear: both; /* Evita que flote raro */
}

/* 2. Lista de comentarios */
.comment-list, .children {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.comment-body {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

/* 3. Quién escribe */
.comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.comment-author img {
    border-radius: 50%;
    margin-right: 15px;
    width: 40px; 
    height: 40px;
}
.fn { /* Nombre del autor */
    font-weight: 800; 
    font-style: normal;
    text-transform: uppercase;
    font-size: 13px;
}

/* 4. Lo que dice */
.comment-content p {
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 5. El formulario para responder */
#respond {
    margin-top: 40px;
    background: #f5f5f5;
    padding: 30px;
    border-radius: 8px;
}
#reply-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 800;
    display: block;
    margin-bottom: 20px;
}
.comment-form textarea, 
.comment-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 4px;
    box-sizing: border-box; /* Importante para que no se salga */
}
.form-submit .submit {
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

/* --- 9. ARCHIVOS & PAGINACIÓN --- */
.mcm-archive-container { padding-bottom: 60px; }
.mcm-archive-header { margin-bottom: 40px !important; }
.mcm-archive-header .page-title { font-size: 32px; font-weight: 800; text-transform: uppercase; }
.mcm-archive-divider { width: 100%; height: 4px; background-color: #000; margin-top: 15px; }

.mcm-archive-item { 
    display: grid; grid-template-columns: 1fr 350px; gap: 30px; 
    border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 40px; 
}
.mcm-item-title { font-size: 24px; margin-bottom: 15px; }
.mcm-item-author { display: flex; align-items: center; gap: 10px; margin-top: 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; font-family: sans-serif; }
.mcm-item-author img { border-radius: 50% !important; width: 30px; height: 25px; }
.mcm-archive-media img { height: 220px; width: 100%; object-fit: cover; }

/* OCULTAR CAPTIONS EN ARCHIVOS */
.mcm-overlay-cat,
.mcm-archive-item figcaption, 
.mcm-archive-item .wp-caption-text,
.mcm-archive-media figcaption,
.mcm-archive-media .wp-caption-text {
    display: none !important;
}

/* PAGINACIÓN ESTILIZADA */
.mcm-pagination, .pagination { 
    margin-top: 40px; text-align: center; display: block; width: 100%; clear: both; 
}
.mcm-pagination .nav-links, .pagination { 
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; 
}
.page-numbers, .mcm-pagination a, .mcm-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    background: #fff; border: 1px solid #ddd; color: #333;
    text-decoration: none; font-weight: 700; font-size: 13px; font-family: sans-serif;
    border-radius: 4px; transition: all 0.2s;
}
.page-numbers.current, .mcm-pagination .current {
    background: #000; color: #fff; border-color: #000;
}
.page-numbers:hover:not(.current), .mcm-pagination a:hover {
    background: var(--mcm-vino); color: #fff; border-color: var(--mcm-vino);
}
/* --- 10. FOOTER (OPTIMIZADO Y SIN ROMPER EL MENÚ) --- */
#mcm-footer { 
    background-color: #000; 
    color: #fff; 
    padding: 60px 0 30px; 
    margin-top: 60px; 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
    margin-bottom: 30px; 
}

/* Títulos de Widget */
.footer-widget .widget-title, .footer-title { 
    color: #fff; 
    font-size: 14px; 
    text-transform: uppercase; 
    border-bottom: 2px solid #333; 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    font-weight: 800; 
    letter-spacing: 1px; 
}

/* ENLACES: SOLO AFECTA AL FOOTER AHORA */
.footer-widget a, 
.footer-legal-widget a, 
.footer-legal-row a { /* <--- HE QUITADO .menu-item a DE AQUÍ */
    color: #ccc; 
    text-decoration: none; 
    font-family: sans-serif; 
    font-size: 12px; 
    font-weight: 700;
    text-transform: uppercase; 
    display: inline-block; 
    
    /* Touch Target Fix para Google */
    padding: 12px 0; 
    line-height: 1.4;
    min-height: 44px; 
    box-sizing: border-box;
    vertical-align: middle;
}

.footer-widget a:hover, 
.footer-legal-widget a:hover, 
.footer-legal-row a:hover { 
    color: #fff; 
}

/* Listas en columnas */
.footer-widget li { 
    margin-bottom: 0; 
    border-bottom: 1px solid #222; 
    padding-bottom: 0; 
}

/* Zona Legal (Horizontal) */
.footer-legal-row { 
    border-top: 1px solid #222; 
    padding-top: 30px; 
    margin-bottom: 20px; 
    text-align: center; 
}

.footer-legal-widget ul, 
.footer-legal-row ul { 
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    flex-wrap: wrap; 
}

.footer-legal-widget li,
.footer-legal-row li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Copyright y final */
.footer-bottom { 
    text-align: center; 
    border-top: 1px solid #111; 
    padding-top: 30px; 
    font-size: 12px; 
    color: #666; 
}
/* --- 11. PANEL MÓVIL (JS Logic) --- */
#mcm-mobile-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 2147483647;
    visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#mcm-mobile-overlay.is-active { visibility: visible; opacity: 1; pointer-events: auto; }

.mcm-mobile-inner {
    width: 300px; height: 100%; background: #fff; position: absolute; top: 0; left: -320px;
    transition: left 0.3s ease; overflow-y: auto; box-shadow: 5px 0 15px rgba(0,0,0,0.2);
}
#mcm-mobile-overlay.is-active .mcm-mobile-inner { left: 0; }
#mcm-mobile-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; padding: 10px; }
.mcm-mobile-content { padding: 60px 20px 20px; }
.mcm-mobile-menu a { 
    display: block; padding: 15px 0; color: #000; font-weight: 700; font-size: 15px; 
    border-bottom: 1px solid #eee; font-family: sans-serif; text-transform: uppercase; 
}

/* --- 12. MEDIA QUERIES --- */
@media (max-width: 1024px) {
    .entry-title { font-size: 2rem; }
    .mcm-desktop-menu-wrap, #mcm-branding-row { display: none !important; }
    #mcm-burger-trigger, .mcm-mobile-logo-link { display: block !important; }
    #mcm-burger-trigger { display: flex !important; }
    
    /* REPARACIÓN LOGO MÓVIL */
    .mcm-mobile-logo { 
    height: 25px; 
    width: auto; /* Mantiene la proporción basada en el height */
    aspect-ratio: 108 / 25; /* Ayuda al navegador a reservar el espacio exacto */
    display: block; 
}
    
    .mcm-hero-grid, .mcm-related-grid, .footer-grid, .mcm-archive-item { grid-template-columns: 1fr; }
    .hero-main { grid-column: auto; grid-row: auto; }
    .hero-main .mcm-card-media img { height: 300px; }
    .mcm-archive-media { order: -1; }
    
    .mcm-main-menu > li.mcm-mega-menu > .sub-menu { width: 100%; display: block; }
}

@media (max-width: 600px) {
    .mcm-grid-3 { grid-template-columns: 1fr; }
    .footer-legal-widget ul { flex-direction: column; gap: 10px; }
    /* Title más compacto en mobile real (≤600px) — la foto llega antes al
       fold, mejora time-to-visual y dwell time. WaPo/Reuters/BBC pattern. */
    .entry-title { font-size: 1.75rem; line-height: 1.15; margin-top: 12px; }
}

/* --- SUBTÍTULO / STANDFIRST (BAJADA DE ARTÍCULO) --- */
/* Style aligned with Guardian/NYT/WaPo decks: serif, normal (no italic),
   medium weight, dark grey, generous line-height. Italic was the "datado"
   bit reading more like an Atlantic feature than a news deck. */
.mcm-subtitle {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 500;
    font-style: normal;
    color: #222;
    margin-top: 0;
    margin-bottom: 28px;
    letter-spacing: -0.005em;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .mcm-subtitle {
        font-size: 1.15rem;
        line-height: 1.45;
        margin-bottom: 22px;
    }
}

/* --- RELATED STORIES (INLINE) --- */
.mcm-inline-related {
    margin: 35px 0;
    padding: 0;
    border-top: 2px solid #000;
    font-family: var(--mcm-font-title);
    clear: both;
}

.mcm-inline-header {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 15px 0;
    color: #000;
}

.mcm-inline-link {
    display: flex !important;
    align-items: center; /* <--- CAMBIO CLAVE: Centra verticalmente la foto y el texto */
    gap: 20px;
    text-decoration: none;
    color: #000;
    transition: opacity 0.2s;
}

.mcm-inline-link:hover {
    opacity: 0.7;
    color: var(--mcm-vino);
}

.mcm-inline-thumb {
    flex-shrink: 0;
    width: 100px;
}

.mcm-inline-thumb img {
    width: 100px !important;
    height: 100px !important; /* Forzamos cuadrado para consistencia */
    object-fit: cover;
    border-radius: 8px !important; /* Bordes redondeados Platinum */
    display: block;
}

.mcm-inline-title {
    font-size: 1.3rem !important; /* Un poco más de peso visual */
    font-weight: 700;
    line-height: 1.3;
    margin: 0 !important; /* Eliminamos margen del H3 para el centrado */
    font-family: var(--mcm-font-title);
}

.mcm-inline-divider {
    margin-top: 20px;
    border: 0;
    border-top: 1px solid #ddd;
}
/* Ajuste Móvil */
@media (max-width: 600px) {
    .mcm-inline-title { font-size: 1.1rem; }
    .mcm-inline-thumb { width: 80px; }
}

/* Separador entre Autor y Fecha */
.mcm-meta-sep::before {
    content: "|";       /* La barra separadora */
    margin: 0 10px;     /* Espacio a los lados (10px) */
    color: #ccc;        /* Un gris suave para que no pese visualmente */
    font-weight: 300;   
}

/* --- ESTILO LETRA CAPITAL (DROP CAP) --- */
/* Solo funciona si PHP ha confirmado que el idioma es válido */

.mcm-has-dropcap .entry-content > p:first-of-type::first-letter {
    float: left;            /* Flota a la izquierda del texto */
    font-size: 3.8rem;      /* Tamaño grande y señorial */
    line-height: 0.8;       /* Altura ajustada para que no empuje mucho hacia abajo */
    margin-right: 12px;     /* Espacio con el resto del texto */
    margin-top: 5px;        /* Pequeño ajuste vertical */
    margin-bottom: -5px;    /* Evita huecos debajo */
    font-weight: 700;       /* Negrita */
    color: var(--mcm-vino); /* Tu color corporativo (#16406b) */
    font-family: 'Georgia', serif; /* Mantenemos el estilo clásico */
}

/* Ajuste para móviles (para que no ocupe media pantalla) */
@media (max-width: 768px) {
    .mcm-has-dropcap .entry-content > p:first-of-type::first-letter {
        font-size: 3rem;
        margin-right: 10px;
    }
}

/* --- BARRA DE PROGRESO SUPERIOR --- */
#mcm-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px; /* Grosor de la línea */
    background: transparent;
    z-index: 99999; /* Siempre encima de todo */
}

#mcm-progress-bar {
    height: 4px;
    background: var(--mcm-vino); /* Tu color rojo corporativo */
    width: 0%;
    transition: width 0.1s ease;
}

/* --- AJUSTES METADATOS --- */
.mcm-updated-label {
    font-weight: 700;
    color: #555;
    margin-right: 3px;
}

.mcm-reading-time {
    color: #666;
    font-style: italic;
    white-space: nowrap; /* Que no se parta en dos líneas */
}

/* Separador vertical */
.mcm-meta-sep::before {
    content: "|";
    margin: 0 10px;
    color: #ccc;
    font-weight: 300;
}

/* Asegurar que todos los botones de compartir mantengan el tamaño */
.mcm-share-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Colores de marca opcionales al hacer hover */
.mcm-btn-share.telegram:hover { background-color: #0088cc !important; border-color: #0088cc; }
.mcm-btn-share.weibo:hover { background-color: #e6162d !important; border-color: #e6162d; }
.mcm-btn-share.reddit:hover { background-color: #ff4500 !important; border-color: #ff4500; }
.mcm-btn-share.whatsapp:hover { background-color: #25d366 !important; border-color: #25d366; }

/* Para que se vean bien en el estilo Platinum que llevamos */
.mcm-btn-share.icon-only svg {
    width: 18px !important;
    height: 18px !important;
}
/* Color corporativo de Reddit al pasar el ratón */
.mcm-btn-share.reddit:hover {
    background-color: #ff4500 !important; /* Naranja Reddit */
    color: #fff !important;
    border-color: #ff4500;
}

/* Optimización de los iconos en el grid de compartir */
.mcm-share-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- OPTIMIZACIÓN DE ENLACES EN EL TEXTO (SEO & UX) --- */
.entry-content p a,
.entry-content li a {
    color: #16406b !important;                          /* rojo vivo, separa del negro del cuerpo */
    text-decoration: underline !important;
    text-decoration-color: #16406b !important;          /* subrayado SÓLIDO (antes 30%) */
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
}

.entry-content p a:hover,
.entry-content li a:hover {
    color: #0e2a47 !important;                          /* rojo más oscuro al pasar */
    text-decoration-color: #0e2a47 !important;
    background-color: rgba(22, 64, 107, 0.08);          /* Fondo muy sutil */
}

/* Exclusiones para no romper el diseño de otros bloques */
.entry-content .mcm-inline-related a, 
.entry-content .mcm-share-links a, 
.entry-content .mcm-btn-share a,
.entry-content a img {
    text-decoration: none !important;
    background-color: transparent !important;
}

/* PAGINACIÓN DE BÚSQUEDA */
/* PAGINACIÓN PLATINUM (Alineación Perfecta) */
.mcm-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px; /* Espacio entre cajitas */
    margin-top: 40px;
}

.mcm-pagination .page-numbers {
    display: flex;            /* Flexbox interno */
    align-items: center;      /* Centrado vertical */
    justify-content: center;  /* Centrado horizontal */
    height: 44px;             /* Altura fija para todos igual */
    min-width: 44px;          /* Anchura mínima (para que el 1 sea cuadrado) */
    padding: 0 18px;          /* Aire a los lados para "Previous/Next" */
    border: 1px solid #e0e0e0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;         /* Letra gordita */
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;           /* Importante para que el flex calcule bien */
    transition: all 0.2s ease;
}

/* Estado Activo y Hover (Color Vino) */
.mcm-pagination .page-numbers.current,
.mcm-pagination .page-numbers:hover {
    background-color: #16406b; /* Tu rojo vino */
    color: #fff !important;
    border-color: #16406b;
}

/* --- OVERLAY DE BÚSQUEDA PLATINUM --- */
#mcm-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98); /* Fondo blanco casi opaco */
    z-index: 999999; /* Por encima de todo, incluso del menú */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mcm-search-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Botón de cerrar búsqueda */
#mcm-search-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    color: #000;
}

/* El input gigante */
.mcm-fullscreen-input {
    width: 100%;
    max-width: 800px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #000;
    font-size: 40px; /* Letra gigante estilo revista */
    font-weight: 700;
    color: #000;
    padding: 10px 0;
    outline: none;
    text-align: center;
    font-family: serif; /* Toque elegante */
}

/* Placeholder gris suave */
.mcm-fullscreen-input::placeholder {
    color: #ccc;
    font-weight: 300;
}

/* Instrucciones pequeñas */
.mcm-search-instructions {
    text-align: center;
    margin-top: 20px;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Ajuste Responsive para móviles */
@media (max-width: 768px) {
    .mcm-fullscreen-input {
        font-size: 24px;
        width: 90%;
    }
}
}

/* --- LAYOUT REVISTA (ARTÍCULO + SIDEBAR) --- */
.mcm-layout-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Espacio entre artículo y barra lateral */
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Columna Principal (Artículo) */
.mcm-main-column {
    flex: 1; /* Ocupa todo el espacio posible */
    min-width: 0; /* Evita desbordamientos raros */
}

/* --- LAYOUT REVISTA (CORREGIDO STICKY) --- */
.mcm-layout-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    /* IMPORTANTE: Quitamos 'align-items: flex-start' para que la columna sea alta */
    align-items: stretch; 
}

/* Columna Principal */
.mcm-main-column {
    flex: 1; 
    min-width: 0;
}

/* Columna Lateral (El Raíl) */
.mcm-sidebar-column, 
.mcm-layout-container aside {
    width: 300px;
    flex-shrink: 0;
    display: block;
    position: relative; /* Necesario */
}

/* Widgets Normales */
.mcm-widget {
    margin-bottom: 50px;
}

/* Latest News widget — sidebar items with 80x80 thumb + text (NYT/WaPo pattern).
   Thumb reuses WP `thumbnail` size (150x150) scaled to 80; no new image sizes. */
.mcm-latest-news-list { list-style: none; padding: 0; margin: 0; }
.mcm-latest-news-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid #eee;
}
.mcm-latest-news-item:last-child { border-bottom: 0; }
.mcm-lni-thumb-link { flex-shrink: 0; display: block; line-height: 0; }
.mcm-lni-thumb {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 2px; background: #f5f5f5;
}
.mcm-lni-text { flex: 1; min-width: 0; }
.mcm-lni-cat {
    display: block; font-family: sans-serif; font-size: 10px;
    text-transform: uppercase; color: var(--mcm-vino); font-weight: 800;
    letter-spacing: 0.5px; text-decoration: none;
    line-height: 1.4; padding: 6px 0; /* tap target ≥24px alto (10px·1.4 + 12px = ~26px), determinista. Reemplaza margin-bottom; el thumb 80px domina la altura del item → no agranda el layout */
}
.mcm-lni-title {
    display: block; color: #111; font-weight: 600; font-size: 15px;
    line-height: 1.4; text-decoration: none;
    padding: 4px 0; /* tap target ≥24px alto (a11y PageSpeed) */
}
.mcm-lni-title:hover { color: var(--mcm-vino); }

/* Most Read — numbered ranking in sidebar (single article). The widget
   shares CSS with .mcm-latest-news-* so only the new rank chip is added. */
.mcm-most-read-widget .mcm-mr-item { position: relative; }
.mcm-most-read-widget .mcm-mr-rank {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--mcm-vino); color: #fff; font-weight: 800;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
    font-family: sans-serif; align-self: center;
}

/* Most Read — portada section (5 cards horizontal grid, NYT-style). */
.mcm-most-read-section .mcm-most-read-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 992px) {
    .mcm-most-read-section .mcm-most-read-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .mcm-most-read-section .mcm-most-read-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.mcm-mr-card { position: relative; }
.mcm-mr-card-link { display: block; text-decoration: none; color: inherit; }
.mcm-mr-card-media {
    position: relative; aspect-ratio: 1/1; overflow: hidden;
    border-radius: 4px; background: #f5f5f5; margin-bottom: 10px;
}
.mcm-mr-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.mcm-mr-card-link:hover .mcm-mr-card-media img { transform: scale(1.05); }
.mcm-mr-card-rank {
    position: absolute; left: 8px; bottom: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.85); color: #fff;
    font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    font-family: sans-serif;
}
.mcm-mr-card-cat {
    display: block; font-family: sans-serif; font-size: 10px;
    text-transform: uppercase; color: var(--mcm-vino); font-weight: 800;
    letter-spacing: 0.5px; margin-bottom: 4px;
}
.mcm-mr-card-title {
    font-size: 15px; line-height: 1.3; font-weight: 700; color: #111;
    margin: 0;
}
.mcm-mr-card-link:hover .mcm-mr-card-title { color: var(--mcm-vino); }

/* HERO 3-col (Newspaper-style): Most Read compact left + HERO center + sub-cards right.
   IMPORTANT: this layout overrides the legacy .mcm-hero-section .hero-main/.hero-sub
   overlay styling (position:absolute + dark gradient + white text) defined further
   down in this file (~L1744). The Newspaper2 reference uses "photo above, text below"
   not overlay, so the body is forced back into normal flow and the colors are reset. */
.mcm-hero-3col {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .mcm-hero-3col {
        grid-template-columns: 240px minmax(0, 1fr) 280px;
        align-items: start;
    }
}
/* Mobile/tablet: stack HERO first (the news), then right cards (more
   top stories), then Most Read at the end (sidebar-like). Avoids the
   "Most Read appears before the headline" anti-pattern. */
@media (max-width: 991px) {
    .mcm-hero-3col .mcm-hero-center { order: 1; }
    .mcm-hero-3col .mcm-hero-right  { order: 2; }
    .mcm-hero-3col .mcm-hero-left   { order: 3; }
}
/* Override legacy mobile rule (~L1993) that hides the HERO excerpt on
   <768px — written for the old overlay layout where the excerpt didn't
   fit on top of the image. With the new text-below-photo Newspaper2
   layout it has room, and the lead paragraph is editorially valuable. */
@media (max-width: 767px) {
    .mcm-hero-3col .hero-main .mcm-card-excerpt {
        display: block !important;
        font-size: 14px;
        line-height: 1.45;
        color: #444 !important;
        margin-top: 8px;
    }
}

/* Reset legacy overlay for the new 3-col HERO */
.mcm-hero-3col .hero-main.mcm-card,
.mcm-hero-3col .hero-sub.mcm-card {
    position: static;
    overflow: visible;
    border-radius: 0;
}
.mcm-hero-3col .hero-main .mcm-card-media,
.mcm-hero-3col .hero-sub .mcm-card-media {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.mcm-hero-3col .hero-main .mcm-card-media img,
.mcm-hero-3col .hero-sub .mcm-card-media img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    display: block;
}
.mcm-hero-3col .hero-main .mcm-card-body,
.mcm-hero-3col .hero-sub .mcm-card-body {
    position: static !important;
    inset: auto !important;
    background: none !important;
    color: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
}
.mcm-hero-3col .hero-main .mcm-card-title a,
.mcm-hero-3col .hero-sub .mcm-card-title a {
    color: #000 !important;
    text-shadow: none !important;
}
.mcm-hero-3col .hero-main .mcm-card-title a:hover,
.mcm-hero-3col .hero-sub .mcm-card-title a:hover {
    color: var(--mcm-vino) !important;
}
.mcm-hero-3col .hero-main .mcm-card-excerpt {
    color: #444 !important;
}
.mcm-hero-3col .hero-main .mcm-card-meta,
.mcm-hero-3col .hero-main .mcm-card-meta .author {
    color: #777 !important;
}

/* Center HERO (single dominant) */
.mcm-hero-center .hero-main .mcm-card-media {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 14px;
}
.mcm-hero-center .hero-main .mcm-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.mcm-hero-center-cat {
    display: inline-block; font-family: sans-serif; font-size: 11px;
    text-transform: uppercase; color: var(--mcm-vino); font-weight: 800;
    letter-spacing: 0.7px; margin-bottom: 6px; text-decoration: none;
}
.mcm-hero-center .hero-main .mcm-card-title {
    font-size: 1.9rem; line-height: 1.15; font-weight: 800; margin: 0 0 8px;
}
.mcm-hero-center .hero-main .mcm-card-title a { color: #000; text-decoration: none; }
.mcm-hero-center .hero-main .mcm-card-title a:hover { color: var(--mcm-vino); }
.mcm-hero-center .hero-main .mcm-card-excerpt {
    font-size: 15px; color: #444; line-height: 1.5; margin-bottom: 8px;
}
.mcm-hero-center .hero-main .mcm-card-meta {
    font-family: sans-serif; font-size: 12px; color: #777;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* RIGHT column: 2 sub cards stacked */
.mcm-hero-right { display: flex; flex-direction: column; gap: 22px; }
.mcm-hero-right .hero-sub .mcm-card-media {
    aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; margin-bottom: 8px;
}
.mcm-hero-right .hero-sub .mcm-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.mcm-hero-sub-cat {
    display: inline-block; font-family: sans-serif; font-size: 10px;
    text-transform: uppercase; color: var(--mcm-vino); font-weight: 800;
    letter-spacing: 0.5px; margin-bottom: 4px; text-decoration: none;
}
.mcm-hero-right .hero-sub .mcm-card-title {
    font-size: 16px; line-height: 1.3; font-weight: 700; margin: 0;
}
.mcm-hero-right .hero-sub .mcm-card-title a { color: #111; text-decoration: none; }
.mcm-hero-right .hero-sub .mcm-card-title a:hover { color: var(--mcm-vino); }

/* LEFT column: Most Read compact (60×60 thumb, no big rank chip) */
.mcm-mrc { }
.mcm-mrc-title {
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: #000; font-family: var(--mcm-font-title);
    margin: 0 0 10px; padding-bottom: 8px;
    border-bottom: 3px solid #000;
}
.mcm-mrc-list { list-style: none; padding: 0; margin: 0; }
.mcm-mrc-item { padding: 10px 0; border-bottom: 1px solid #eee; }
.mcm-mrc-item:last-child { border-bottom: 0; }
.mcm-mrc-link {
    display: flex; gap: 10px; align-items: flex-start;
    text-decoration: none; color: inherit;
}
.mcm-mrc-thumb { flex-shrink: 0; line-height: 0; }
.mcm-mrc-thumb img {
    width: 60px; height: 60px; object-fit: cover;
    border-radius: 4px; background: #f5f5f5; display: block;
}
.mcm-mrc-text { flex: 1; min-width: 0; }
.mcm-mrc-cat {
    display: block; font-family: sans-serif; font-size: 9px;
    text-transform: uppercase; color: var(--mcm-vino); font-weight: 800;
    letter-spacing: 0.4px; margin-bottom: 3px;
}
.mcm-mrc-headline {
    display: block; font-size: 13px; line-height: 1.3;
    font-weight: 700; color: #111;
}
.mcm-mrc-rank { color: var(--mcm-vino); margin-right: 4px; }
.mcm-mrc-link:hover .mcm-mrc-headline { color: var(--mcm-vino); }

.mcm-hero-mostread {
    border-top: 3px solid #000;
    padding-top: 14px;
}
.mcm-hero-mostread-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px 0;
    font-family: var(--mcm-font-title);
    color: #000;
}
.mcm-hero-mostread-list {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 0;
}
.mcm-hmr-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.mcm-hmr-item:last-child { border-bottom: 0; }
.mcm-hmr-rank {
    flex-shrink: 0;
    font-family: var(--mcm-font-title);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: var(--mcm-vino);
    width: 28px;
    text-align: left;
}
.mcm-hmr-link { display: block; text-decoration: none; color: inherit; }
.mcm-hmr-cat {
    display: block;
    font-family: sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--mcm-vino);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.mcm-hmr-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: #111;
}
.mcm-hmr-link:hover .mcm-hmr-title { color: var(--mcm-vino); }

/* Movies portada — grid 4-col uniforme en desktop. Mobile colapsa a 1 col
   (no 2 cuadrados pequeños: con cards full-width la imagen 16:9 es legible
   y el título tiene aire — patrón mobile-friendly de Reuters/Guardian). */
.mcm-grid-4col-uniform {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .mcm-grid-4col-uniform { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .mcm-grid-4col-uniform { grid-template-columns: repeat(4, 1fr); }
}
.mcm-grid-4col-uniform .ratio-16x9 {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 8px;
}
.mcm-grid-4col-uniform .ratio-16x9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.mcm-grid-4col-uniform .mcm-card:hover .ratio-16x9 img { transform: scale(1.05); }

/* STICKY: El último widget se queda pegado */
/* Al ser la columna alta (stretch), este widget flotará en el espacio vacío */
.mcm-sidebar-column .mcm-widget:last-child,
.mcm-layout-container aside > div:last-child {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Margen superior para no chocar con el menú */
    z-index: 10;
}

/* MÓVIL (Reset) */
@media (max-width: 1024px) {
    .mcm-layout-container { flex-direction: column; gap: 40px; }
    .mcm-sidebar-column, .mcm-layout-container aside { width: 100%; border-top: 1px solid #eee; padding-top: 40px; }
    
    /* Desactivar sticky en móvil */
    .mcm-sidebar-column .mcm-widget:last-child,
    .mcm-layout-container aside > div:last-child {
        position: static;
    }
}

/* --- RELACIONADOS: GRID 2 COLUMNAS --- */
.mcm-related-wrapper {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 4px solid #000;
}

.related-heading {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-family: var(--mcm-font-title, sans-serif);
}

.mcm-related-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columnas exactas */
    gap: 30px;
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-thumb-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* Formato panorámico uniforme */
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.related-thumb-link:hover img {
    transform: scale(1.03); /* Efecto zoom suave */
}

.related-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.related-card-title a {
    text-decoration: none;
    color: #000;
}

.related-card-title a:hover {
    color: var(--mcm-vino);
}

/* Móvil: 1 sola columna */
@media (max-width: 600px) {
    .mcm-related-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* Mobile overrides for INLINE-styled grids injected by writer/publisher.
   Inline styles can only be beaten with !important. Targets:
   - .mcm-bottom-section .mcm-unified-grid (2-col grid → 1-col on mobile)
   - .mcm-related-box (flex row → stacked on mobile) */
@media (max-width: 600px) {
    .mcm-bottom-section .mcm-unified-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .mcm-related-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .mcm-related-box img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
}

/* Copiar en style.css si no está */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}


/* =========================================================
   MOBILE CHROME HORIZONTAL OVERFLOW HARDENING (2026-01-25)
   Purpose:
   - Prevent any off-canvas/viewport-sized element from expanding layout width
   - Prefer overflow-x: clip (no scrollbars) with safe fallback
   ========================================================= */

/* 1) Hard stop horizontal overflow at root */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}

/* 2) Safer sizing model */
*, *::before, *::after { box-sizing: border-box; }

/* 3) Media/embeds should never exceed container */
img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

/* 4) Common WP blocks sometimes create overflow due to long words/URLs */
.entry-content, .mcm-main-column, .mcm-sidebar-column, .mcm-layout-container {
    min-width: 0;
}
.entry-content * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 5) Avoid 100vw traps on fixed/full-width bars (Chrome mobile can include scrollbar/UI) */
#mcm-navbar, #mcm-branding-row, #mcm-progress-container {
    width: 100%;
    max-width: 100%;
}

/* 6) Off-canvas mobile menu: keep it in the viewport and move with transform
   (Negative left positioning can still expand layout width in Chrome) */
#mcm-mobile-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
#mcm-mobile-overlay.is-active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease;
}
#mcm-mobile-overlay .mcm-mobile-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 300px;
    max-width: 85vw;
    transform: none;
}

/* 7) Search overlay: ensure it never creates horizontal overflow */
#mcm-search-overlay {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* 8) Containers: keep theme max-width; prevent overflow via box-sizing */
.container, .logo-wrapper, .footer-grid, .mcm-nav-container{
  width: 100%;
  box-sizing: border-box;
}


.mcm-home-intro{
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--mcm-rule);
  margin-bottom: 18px;
}
.mcm-home-intro .mcm-kicker{
  font-family: var(--mcm-font-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mcm-muted);
  margin: 0 0 8px;
}
.mcm-home-intro .mcm-home-lead{
  font-family: var(--mcm-font-serif);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.mcm-home-intro .mcm-home-sublead{
  max-width: 72ch;
  color: var(--mcm-muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Hero refinement without viewport-width tricks */
.mcm-hero-premium .mcm-hero-grid{
  gap: 18px;
  align-items: start;
}
.mcm-hero-premium .mcm-hero-main,
.mcm-hero-premium .mcm-hero-side{
  background: #fff;
  border: 1px solid var(--mcm-rule);
  border-radius: 12px;
  overflow: hidden;
}
.mcm-hero-premium .mcm-hero-main img,
.mcm-hero-premium .mcm-hero-side img{
  border-radius: 0;
}
.mcm-hero-premium .mcm-hero-post{
  padding: 12px 14px 14px;
}
.mcm-hero-premium .mcm-hero-title{
  font-family: var(--mcm-font-serif);
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 8px;
}
.mcm-hero-premium .mcm-hero-excerpt{
  color: var(--mcm-muted);
  line-height: 1.55;
}
.mcm-hero-premium .mcm-hero-side .mcm-hero-title{
  font-size: 16px;
}

/* Archive cards */
body.archive .archive-title{
  font-family: var(--mcm-font-serif);
  letter-spacing: .02em;
}
body.archive .archive-description{
  color: var(--mcm-muted);
  max-width: 72ch;
}
body.archive .entry-title{
  font-family: var(--mcm-font-serif);
  line-height: 1.15;
}
.mcm-card-meta{
  font-size: 12px;
  color: var(--mcm-muted);
  margin: -2px 0 10px;
}
.mcm-time-ago{
  letter-spacing: .02em;
}

/* Hide exact dates (Google News). Keep relative time where added. */
body.home time,
body.archive time,
body.home .entry-date,
body.archive .entry-date,
body.home .posted-on,
body.archive .posted-on,
body.home .mcm-date,
body.archive .mcm-date{
  display:none !important;
}




/* =========================
   PREMIUM ARCHIVE (V7)
   ========================= */
.mcm-archive-container{
  padding-top: 34px;
  padding-bottom: 70px;
}
.mcm-archive-header{
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mcm-archive-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
}
.mcm-archive-description{
  margin-top: 10px;
  max-width: 72ch;
  color: rgba(0,0,0,.72);
  font-size: 15px;
  line-height: 1.65;
}
.mcm-archive-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.mcm-archive-featured{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  margin-bottom: 4px;
}
.mcm-archive-featured-media img,
.mcm-archive-card-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
.mcm-archive-featured-media{
  display: block;
}
.mcm-archive-featured-body{
  padding-right: 8px;
}
.mcm-archive-meta{
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.mcm-archive-cat{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mcm-vino, #16406b);
  text-decoration: none;
}
.mcm-archive-cat:hover{
  text-decoration: underline;
}
.mcm-archive-time{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
}
.mcm-archive-title{
  margin: 0 0 8px 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
}
.mcm-archive-title a{
  color: #111;
  text-decoration: none;
}
.mcm-archive-title a:hover{
  text-decoration: underline;
}
.mcm-archive-title--featured{
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mcm-archive-excerpt{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0,0,0,.70);
}
.mcm-archive-excerpt--featured{
  font-size: 14px;
  max-width: 90ch;
}

.mcm-archive-card{
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  transition: transform .14s ease, box-shadow .14s ease;
}
.mcm-archive-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.mcm-archive-card-media{
  display: block;
}
.mcm-archive-card-body{
  padding: 0 4px 2px 4px;
}

/* Pagination */
.mcm-pagination{
  margin-top: 26px;
}
.mcm-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  color: #111;
  text-decoration: none;
  margin-right: 8px;
}
.mcm-pagination .page-numbers.current{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Responsive */
@media (min-width: 760px){
  .mcm-archive-featured{
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
  .mcm-archive-card{
    grid-column: span 6;
  }
  .mcm-archive-title{
    font-size: 18px;
  }
}
@media (min-width: 1100px){
  .mcm-archive-card{
    grid-column: span 4;
  }
}


/* Archive / grid thumbnail normalization */
.mcm-archive-featured-media,
.mcm-archive-card-media,
.mcm-grid-card-media{
  display: block;
  overflow: hidden;
  background: #f3f3f3;
  border-radius: 14px;
}

.mcm-archive-featured-media{ aspect-ratio: 16 / 9; }
.mcm-archive-card-media,
.mcm-grid-card-media{ aspect-ratio: 4 / 3; }

.mcm-archive-featured-media img,
.mcm-archive-card img,
.mcm-grid-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Typography consistency on archive pages (do not affect single.php) */
body.archive .mcm-archive-card-title,
body.category .mcm-archive-card-title,
body.tag .mcm-archive-card-title,
body.taxonomy .mcm-archive-card-title{
  font-size: 15px;
  line-height: 1.25;
}

body.archive .mcm-archive-card-excerpt,
body.category .mcm-archive-card-excerpt,
body.tag .mcm-archive-card-excerpt,
body.taxonomy .mcm-archive-card-excerpt{
  font-size: 13px;
  line-height: 1.45;
}

body.archive .mcm-archive-featured-title,
body.category .mcm-archive-featured-title,
body.tag .mcm-archive-featured-title,
body.taxonomy .mcm-archive-featured-title{
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

body.archive .mcm-archive-featured-excerpt,
body.category .mcm-archive-featured-excerpt,
body.tag .mcm-archive-featured-excerpt,
body.taxonomy .mcm-archive-featured-excerpt{
  font-size: 14px;
  line-height: 1.55;
  color: #444;
}

body.archive .mcm-archive-section-title,
body.category .mcm-archive-section-title,
body.tag .mcm-archive-section-title,
body.taxonomy .mcm-archive-section-title{
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* Accessibility: visually hidden but SEO/AT-friendly */
.mcm-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* --- CONSOLIDATED HEADER/FOOTER CSS START --- */
/* --- 1. CONTAINER FIX --- */
.mcm-nav-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- 2. BOTÓN LUPA --- */
#mcm-search-trigger {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: inherit; width: 100%; height: 100%;
}
#mcm-search-trigger:hover { color: #16406b; }

/* --- 3. BÚSQUEDA FULLSCREEN --- */
#mcm-search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 999999; opacity: 0; visibility: hidden;
    transition: all 0.3s ease-in-out;
    display: flex; align-items: center; justify-content: center;
}
#mcm-search-overlay.is-active { opacity: 1; visibility: visible; }
#mcm-search-close {
    position: absolute; top: 30px; right: 30px;
    background: none; border: none; font-size: 40px; line-height: 1;
    cursor: pointer; color: #000;
}
.mcm-fullscreen-form { width: 100%; max-width: 800px; text-align: center; }
.mcm-fullscreen-input {
    width: 100%; background: transparent; border: none;
    border-bottom: 3px solid #000;
    font-size: 40px; font-weight: 700; color: #000;
    padding: 15px 0; outline: none; text-align: center; font-family: serif;
}
.mcm-fullscreen-input::placeholder { color: #ddd; }
.mcm-search-instructions { margin-top: 20px; color: #999; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-family: sans-serif; }

/* --- 4. BÚSQUEDA MÓVIL --- */
.mcm-mobile-search-wrapper { padding: 20px 20px 10px 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 10px; }
.mcm-mobile-search-form { position: relative; display: flex; align-items: center; }
.mcm-mobile-search-input { width: 100%; background: #f7f7f7; border: 1px solid #eee; border-radius: 4px; padding: 12px 40px 12px 15px; font-size: 16px; color: #333; outline: none; transition: background 0.2s; }
.mcm-mobile-search-input:focus { background: #fff; border-color: #ddd; }
.mcm-mobile-search-submit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; color: #999; cursor: pointer; display: flex; }

/* --- FOOTER CSS --- */
/* Efectos Hover para Enlaces */
.mcm-footer-link { color: #ccc !important; text-decoration: none; transition: all 0.3s ease; }
.mcm-footer-link:hover { color: #fff !important; padding-left: 5px; } /* Efecto desplazamiento sutil */

/* Efectos para Iconos Sociales */
.mcm-social-icon { color: #fff !important; transition: all 0.3s ease; opacity: 0.8; }
.mcm-social-icon:hover { color: #16406b !important; opacity: 1; transform: translateY(-3px); }

/* Botón Suscribir */
.mcm-sub-btn { background: #fff; color: #000; transition: all 0.3s ease; border: 1px solid #fff; }
.mcm-sub-btn:hover { background: #16406b; color: #fff; border-color: #16406b; }

/* Ajustes Móviles Footer */
@media (max-width: 768px) {
    .footer-col { flex: 100% !important; text-align: center; border-bottom: 1px solid #222; padding-bottom: 20px; margin-bottom: 20px; }
    .footer-col:last-child { border-bottom: none; }
    .footer-legal-row ul { flex-direction: column; gap: 10px; }
}
/* --- CONSOLIDATED HEADER/FOOTER CSS END --- */

/* =========================
   HERO OVERLAY PREMIUM
   ========================= */
.mcm-hero-section .hero-main.mcm-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.mcm-hero-section .hero-main .mcm-card-media {
    margin-bottom: 0;
}

.mcm-hero-section .hero-main .mcm-card-media img {
    height: 480px;
    display: block;
    width: 100%;
    object-fit: cover;
}

.mcm-hero-section .hero-main .mcm-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 25px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    color: #fff;
    margin: 0;
}

.mcm-hero-section .hero-main .mcm-card-title a {
    color: #fff !important;
    font-size: 1.6rem;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-decoration: none;
}

.mcm-hero-section .hero-main .mcm-card-title a:hover {
    color: #ddd !important;
}

.mcm-hero-section .hero-main .mcm-card-excerpt {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 8px;
}

.mcm-hero-section .hero-main .mcm-card-meta {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    margin-top: 8px;
    margin-bottom: 0;
}

.mcm-hero-section .hero-main .mcm-card-meta .author {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 991px) {
    .mcm-hero-section .hero-main .mcm-card-media img { height: 300px; }
}

/* =========================
   HERO SUB OVERLAY
   ========================= */
.mcm-hero-section .hero-sub.mcm-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.mcm-hero-section .hero-sub .mcm-card-media {
    margin-bottom: 0;
}

.mcm-hero-section .hero-sub .mcm-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 15px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    color: #fff;
    margin: 0;
}

.mcm-hero-section .hero-sub .mcm-card-title a {
    color: #fff !important;
    font-size: 1rem;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-decoration: none;
}

.mcm-hero-section .hero-sub .mcm-card-title a:hover {
    color: #ddd !important;
}

.mcm-hero-section .hero-sub .mcm-card-meta {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    margin-top: 6px;
    margin-bottom: 0;
}

.mcm-hero-section .hero-sub .mcm-card-meta .author {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================
   MEJORAS VISUALES HOME
   ========================= */

/* 1. Hover zoom en hero */
.mcm-hero-section .hero-main .mcm-card-media img,
.mcm-hero-section .hero-sub .mcm-card-media img {
    transition: transform 0.6s ease !important;
}
.mcm-hero-section .hero-main:hover .mcm-card-media img,
.mcm-hero-section .hero-sub:hover .mcm-card-media img {
    transform: scale(1.05) !important;
}

/* 2. Títulos de sección con acento vino */
.section-title {
    background: var(--mcm-vino, #16406b) !important;
    letter-spacing: 0.08em;
}

/* 3. Hero-sub más alto */
.mcm-hero-section .hero-sub .mcm-card-media img {
    height: 240px;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* 4. Sombra en hover de cards */
.mcm-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mcm-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.mcm-hero-section .mcm-card:hover {
    transform: none;
}

/* 5. Separador entre secciones */
.mcm-home-section {
    padding-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 40px !important;
}
.mcm-home-section:last-child {
    border-bottom: none;
}

/* =========================
   HERO MÓVIL FIX
   ========================= */
@media (max-width: 767px) {
    .mcm-hero-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mcm-hero-section .hero-main .mcm-card-media img {
        height: 320px;
    }

    .mcm-hero-section .hero-main .mcm-card-body {
        padding: 60px 15px 15px;
    }

    .mcm-hero-section .hero-main .mcm-card-title a {
        font-size: 1.2rem;
    }

    .mcm-hero-section .hero-main .mcm-card-excerpt {
        display: none;
    }

    .mcm-hero-section .hero-sub .mcm-card-media img {
        height: 180px;
    }
}

/* =========================
   TECHNOLOGY GRID 4 COLUMNAS
   ========================= */
.mcm-grid-4col .mcm-grid-3 {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 991px) {
    .mcm-grid-4col .mcm-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575px) {
    .mcm-grid-4col .mcm-grid-3 { grid-template-columns: 1fr !important; }
}

/* Fix contrast ratio - YOU MAY ALSO LIKE / RECOMMENDED READING */
.mcm-related-box span {
    color: #767676 !important;
}

/* Fix contrast - span labels en related boxes */
span[style*="text-transform: uppercase"][style*="letter-spacing"] {
    color: #767676 !important;
}

.mcm-footer-menu, .mcm-footer-legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mcm-footer-menu li { line-height: 2.2; }
.mcm-footer-menu a, .mcm-footer-legal-menu a {
    color: #b3b3b3;
    text-decoration: none;
}
.mcm-footer-legal-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}
.mcm-footer-legal-menu li { list-style: none; }

/* ===========================================================
   HERO 3-col CASCADE WINNERS — keep at end of file
   ===========================================================
   The legacy .mcm-hero-section .hero-main / .hero-sub rules
   (~L1744 and ~L1849) use `color: #fff !important` for the
   white-on-photo overlay style. The new 3-col Newspaper2 layout
   needs the opposite (dark text below the photo). Same selector
   specificity means the LAST occurrence in the file wins — so
   these overrides live at the very bottom to guarantee cascade.
   =========================================================== */
body .mcm-hero-3col .hero-main .mcm-card-title a,
body .mcm-hero-3col .hero-sub .mcm-card-title a {
    color: #000 !important;
    text-shadow: none !important;
}
body .mcm-hero-3col .hero-main .mcm-card-title a:hover,
body .mcm-hero-3col .hero-sub .mcm-card-title a:hover {
    color: var(--mcm-vino) !important;
}
body .mcm-hero-3col .hero-main .mcm-card-excerpt {
    color: #444 !important;
}
body .mcm-hero-3col .hero-main .mcm-card-meta,
body .mcm-hero-3col .hero-main .mcm-card-meta .author {
    color: #777 !important;
}
@media (max-width: 767px) {
    body .mcm-hero-3col .hero-main .mcm-card-title a {
        color: #000 !important;
        font-size: 1.4rem !important;
        line-height: 1.2;
    }
    body .mcm-hero-3col .hero-main .mcm-card-excerpt {
        display: block !important;
        color: #444 !important;
        font-size: 14px;
        line-height: 1.45;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   MCM Score badge — review articles only (cinema / streaming / music).
   Visual: prominent number 0-10, color-coded by band. Float-right on
   desktop, full-width inline on mobile (single-page above the fold).
   See tema/inc/mcm-score.php for the helper, and skill files for the
   rubric the writer applies.
   ───────────────────────────────────────────────────────────────────── */
.mcm-score {
    display: block;
    box-sizing: border-box;
    margin: 14px 0 18px;
    padding: 14px 16px 12px;
    border: 1px solid #e2e2e2;
    border-left-width: 5px;
    border-radius: 4px;
    background: #fafafa;
    font-family: inherit;
    line-height: 1.2;
    max-width: 100%;
}
.mcm-score__top {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}
.mcm-score__brand {
    font-weight: 700;
    color: #111;
}
.mcm-score__value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: Georgia, 'Times New Roman', serif;
    color: #111;
}
.mcm-score__number {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
}
.mcm-score__max {
    font-size: 1.1rem;
    color: #777;
    font-weight: 400;
}
.mcm-score__label {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mcm-score__breakdown {
    margin-top: 10px;
    font-size: 12px;
    color: #555;
}
.mcm-score__breakdown summary {
    cursor: pointer;
    color: #666;
    user-select: none;
}
.mcm-score__breakdown ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.mcm-score__breakdown li {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px dotted #e2e2e2;
}
.mcm-score__breakdown li:last-child {
    border-bottom: 0;
}
.mcm-score__dim-val {
    font-variant-numeric: tabular-nums;
    color: #333;
    font-weight: 500;
}

.mcm-score--green {
    border-left-color: #2a8f4f;
    background: linear-gradient(to right, #f1faf3 0%, #fafafa 25%);
}
.mcm-score--green .mcm-score__label { color: #1f6e3c; }
.mcm-score--amber {
    border-left-color: #d8a017;
    background: linear-gradient(to right, #fdf7e7 0%, #fafafa 25%);
}
.mcm-score--amber .mcm-score__label { color: #8a6510; }
.mcm-score--red {
    border-left-color: #16406b;
    background: linear-gradient(to right, #eef2f7 0%, #fafafa 25%);
}
.mcm-score--red .mcm-score__label { color: #0e2a47; }

/* Score floats RIGHT of the header at ALL widths — the title/subtitle wrap to
   its left, so it reads as a deliberate magazine badge instead of a full-bleed
   strip (mobile) or a lonely left box. Desktop 200px, mobile 150px. Operator
   2026-05-31: full-width "sobresalía por la derecha", compact-left looked off →
   float-right (variant C) chosen. Clearfix always so the float is contained. */
.entry-header::after {
    content: '';
    display: table;
    clear: both;
}
@media (min-width: 900px) {
    .entry-header .mcm-score {
        float: right;
        clear: right;
        width: 200px;
        margin: 8px 0 18px 24px;
    }
}
@media (max-width: 899px) {
    .entry-header .mcm-score {
        float: right;
        clear: right;
        width: 150px;
        margin: 2px 0 14px 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Watch Tonight landing — daily-curated per-market page.
   Template tema/page-watch-tonight.php reads
   wp-content/cache/mcm-watch-tonight.json (cron-refreshed daily).
   ───────────────────────────────────────────────────────────────────── */
.mcm-watch-tonight {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.mcm-wt-header {
    text-align: center;
    margin: 12px 0 32px;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 22px;
}
.mcm-wt-h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #111;
}
.mcm-wt-sub {
    color: #666;
    font-size: 0.95rem;
    margin: 0 0 6px;
}
.mcm-wt-time {
    color: #999;
    font-size: 0.85rem;
}
.mcm-wt-empty {
    text-align: center;
    color: #999;
    padding: 60px 20px;
}
.mcm-wt-section {
    margin: 0 0 40px;
}
.mcm-wt-section__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 18px;
    color: #111;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e2e2;
}
.mcm-wt-grid {
    display: grid;
    gap: 18px;
}
.mcm-wt-grid--5 { grid-template-columns: repeat(5, 1fr); }
.mcm-wt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mcm-wt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mcm-wt-card {
    background: #fff;
}
.mcm-wt-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mcm-wt-card__thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.mcm-wt-card__body { padding: 8px 2px 0; }
.mcm-wt-card__title {
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 4px 0 4px;
    font-weight: 600;
    color: #222;
}
.mcm-wt-card__link:hover .mcm-wt-card__title { color: #000; text-decoration: underline; }
.mcm-wt-card__meta {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mcm-wt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: nfx;
}
.mcm-wt-list__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.mcm-wt-list__item:last-child { border-bottom: 0; }
.mcm-wt-rank {
    font-family: Georgia, serif;
    font-weight: 700;
    color: #16406b;
    font-size: 1.1rem;
    min-width: 36px;
}
.mcm-wt-list__title {
    color: #222;
    font-size: 0.98rem;
}
@media (max-width: 900px) {
    .mcm-wt-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .mcm-wt-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mcm-wt-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .mcm-wt-h1 { font-size: 1.8rem; }
}
@media (max-width: 480px) {
    .mcm-wt-grid--5,
    .mcm-wt-grid--4,
    .mcm-wt-grid--3 { grid-template-columns: 1fr; }
}

/* Inline content image alignment (bios + articles). The theme had NO align
   rules; it relied on WP core block-library CSS, which Perfmatters RUCSS strips
   from the per-template used.css → alignleft/right/center on .wp-block-image had
   NO effect and bio photos rendered unstyled (Emma Stone bio "fotos mal",
   2026-06-04). Defined here + safelisted in rucss_excluded_selectors so RUCSS
   keeps them. See reference_perfmatters_used_css. */
.wp-block-image.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.wp-block-image.aligncenter > img { display: inline-block; height: auto; }
.wp-block-image.alignleft  { float: left;  margin: 0.3em 1.6em 1em 0; max-width: 45%; }
.wp-block-image.alignright { float: right; margin: 0.3em 0 1em 1.6em; max-width: 45%; }
.wp-block-image.alignleft > img,
.wp-block-image.alignright > img { height: auto; }
@media (max-width: 600px) {
    .wp-block-image.alignleft,
    .wp-block-image.alignright { float: none; max-width: 100%; margin: 1.2em auto; text-align: center; }
    .wp-block-image.alignleft > img,
    .wp-block-image.alignright > img { display: inline-block; }
}

/* Galería WP (rejilla de REPARTO): WP pone flex-grow:1 en cada figura → la ÚLTIMA
   fila incompleta se estira y los actores secundarios salen MÁS GRANDES que los
   principales (queja operador 14-jun). flex-grow:0 mantiene el width-calc por columna
   (columns-N) y las alturas is-cropped; solo elimina el estirón → la fila incompleta
   queda al mismo tamaño, alineada a la izquierda. Verificado con Chrome headless antes
   de desplegar (un intento de GRID colapsó las figuras → descartado). `.entry-content`
   da specificity > la regla base de WP (0,2,1). Safelisted .wp-block-gallery en RUCSS. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }

/* Cartelitos / infoboxes (estadio en crónicas, biografías en CPT people).
   Su float:right + max-width:300px está en estilo INLINE (no puede llevar @media),
   así que en móvil seguían flotando y estrujaban el texto a una columna de ~60px,
   partiendo frases ("The" huérfano sobre el cartel). En tablet/móvil los pasamos a
   bloque a ancho completo para que el texto fluya limpio arriba/abajo. !important
   porque hay que ganarle a los estilos inline. Render-layer = cubre todos los posts
   ya publicados + los futuros sin regenerar nada. */
@media (max-width: 768px) {
    .mcm-stadium-card,
    .mcm-infobox {
        float: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 1em 0 18px !important;
    }
}

/* NORMA BIOS (people CPT): el vídeo embebido (tráiler) se inserta tras el primer
   párrafo, justo donde el cartelito `.mcm-infobox` flota a la derecha. Un iframe a
   ancho completo NO fluye alrededor del float → se solapaba y "rompía" el artículo
   con el cartelito (reporte operador 2026-06-12). Forzamos que el embed limpie el
   float y caiga A ANCHO COMPLETO POR DEBAJO del cartelito. Scope = páginas de bio. */
.single-people .entry-content p:has(> .perfmatters-lazy-youtube),
.single-people .entry-content p:has(> iframe),
.single-people .entry-content .perfmatters-lazy-youtube,
.single-people .entry-content figure.wp-block-embed,
.single-people .entry-content iframe {
    clear: both;
}

/* ============================================================
   PÁGINAS: UNA SOLA MEDIDA HORIZONTAL (tema + Elementor)
   Todas las páginas pasan por page.php → .mcm-page-container (1040px,
   padding lateral clamp). Las de solo-tema (Estrategia) llenan esa banda
   con .entry-content. Las de Elementor (About/company, Contacto) inyectaban
   su PROPIO contenedor (.elementor-container) con un ancho de contenido
   menor y centrado → el contenido caía en una banda estrecha con grandes
   márgenes blancos, "otro canvas". Forzamos que TODO lo de Elementor dentro
   del contenedor de página ocupe el 100% de la misma banda, sin su ancho ni
   gutter propios → todas las páginas miden lo mismo en horizontal.
   (Elementor desaparecerá al rehacer About/Contacto nativas; esto las alinea
   mientras tanto.)
   ============================================================ */
.mcm-page-container .elementor,
.mcm-page-container .elementor-section,
.mcm-page-container .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
}
.mcm-page-container .elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}