/* ================================================
   NEWSPAPER 1 - THEME EDITORIAL CLÁSICO
   /themes/newspaper-1/theme.css
   
   Inspirado en El País - Estilo periódico clásico
   Tipografía serif, esquinas cuadradas, diseño limpio
   
   Los estilos base están en /themes/common/bundle.css
   ================================================ */

/* ========== VARIABLES CSS ========== */
:root {
    /* Colores base - Editorial limpio */
    --bg: #ffffff;
    --card: #ffffff;
    --border: #d1d1d1;
    --text: #1a1a1a;
    --muted: #666666;
    --accent: #c71c25;
    
    /* Header */
    --header-bg: rgba(255, 255, 255, 0.98);
    
    /* Footer */
    --footer-bg: #f5f5f5;
    
    /* Fuentes - Serif editorial */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-title-size: 24px;
    --font-title-weight: 700;
    --font-body-size: 16px;
    --font-body-weight: 400;
}

/* ========== RESET BORDER-RADIUS GLOBAL ========== */
.header,
.article-card,
.article-image,
.hero-article,
.hero-image,
.hero-category,
.article-category,
.article-featured-image,
.article-featured-figure img,
.related-card,
.related-image,
.tag,
.cta-btn,
.share-btn,
.search-btn,
.menu-toggle,
.nav a,
.pagination a,
.pagination span,
.sidebar-menu,
.search-modal-content,
.search-modal-input,
.cookie-popup,
.cookie-modal-content,
.scroll-to-top,
.author-avatar,
.author-avatar-placeholder,
.widget-card,
.tldr-card,
.tldr-badge,
.cta-horizontal,
.footer-social a,
.article-content img,
.logo img,
/* Hero styles */
.hero-np1-card,
.hero-np1-main,
.hero-np1-card-img,
.hero-np1-main-img,
.hero-np1-cat,
.hero-np2-main,
.hero-np2-main-img,
.hero-np2-sidebar-img,
.hero-np2-bottom-card,
.hero-np2-bottom-img,
.hero-np2-cat,
.hero-np2-cat-sm,
.hero-np3-hero,
.hero-np3-hero-img,
.hero-np3-column-img,
.hero-np3-cat,
.hero-np3-cat-sm {
    border-radius: 0 !important;
}

/* ========== HEADER EDITORIAL ========== */
.header {
    background: var(--header-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
}

/* Nav sin pills - estilo enlaces clásico */
.nav a {
    background: transparent;
    color: var(--text);
    font-weight: 500;
    position: relative;
    padding: 8px 12px;
}

.nav a:hover {
    background: transparent;
    color: var(--accent);
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.nav a:hover::after {
    transform: scaleX(1);
}

/* ========== CARDS SIN EFECTOS ========== */
.article-card {
    background: var(--card);
    border: none;
    border-bottom: 1px solid var(--border);
    transition: none;
}

.article-card:hover {
    transform: none;
    box-shadow: none;
}

.article-card:hover .article-title {
    color: var(--accent);
}

/* ========== TIPOGRAFÍA EDITORIAL ========== */
.article-title,
.hero-title,
.section-title,
.page-header h1,
.article-header .article-title,
.related-card-title,
.hero-np1-main-title,
.hero-np1-card-title,
.hero-np2-main-title,
.hero-np2-sidebar-title,
.hero-np2-bottom-title,
.hero-np3-hero-title,
.hero-np3-aside-title {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Títulos más grandes en hero */
.hero-title,
.hero-np1-main-title,
.hero-np2-main-title,
.hero-np3-hero-title {
    font-size: 2.5rem;
    line-height: 1.15;
}

/* ========== CATEGORÍAS ESTILO EL PAÍS ========== */
.article-category,
.hero-category,
.hero-np1-cat,
.hero-np2-cat,
.hero-np2-cat-sm,
.hero-np3-cat,
.hero-np3-cat-sm {
    background: var(--accent) !important;
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
}

/* ========== META - AUTOR EN MAYÚSCULAS ========== */
.article-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--muted);
}

.author-name,
.article-meta-row .author-name {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--text);
}

/* ========== CONTENIDO ARTÍCULO ========== */
.article-content {
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.75;
}

.article-content p {
    color: var(--text);
    margin-bottom: 1.5em;
}

.article-content h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.article-content h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.article-content blockquote {
    border-left: 3px solid var(--accent);
    background: #f9f9f9;
    padding: 1rem 1.5rem;
    color: #333;
    font-style: italic;
}

.article-content a {
    color: var(--accent);
}

.article-content a:hover {
    color: #a01820;
}

.article-summary {
    font-family: var(--font-body);
    color: #333;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.6;
}

/* ========== SECCIÓN HEADERS ========== */
.section-header {
    border-bottom: 2px solid var(--text);
    padding-bottom: 8px;
}

.section-dot {
    display: none;
}

.section-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-body);
    font-weight: 700;
}

.section-link {
    color: var(--accent);
    font-weight: 500;
}

.section-link:hover {
    text-decoration: underline;
}

/* ========== BOTONES ========== */
.share-btn,
.cta-btn {
    border-radius: 0;
    font-family: var(--font-body);
}

.cta-btn {
    background: var(--accent);
}

.cta-btn:hover {
    background: #a01820;
    transform: none;
}

.share-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.share-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

/* ========== TAGS ========== */
.tag,
.article-tags a {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.tag:hover,
.article-tags a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ========== FOOTER EDITORIAL ========== */
.footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border);
}

.footer-logo {
    font-family: var(--font-heading);
}

.footer-social a {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
}

.footer-social a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

.footer-social a.facebook:hover,
.footer-social a.twitter:hover,
.footer-social a.instagram:hover,
.footer-social a.youtube:hover,
.footer-social a.tiktok:hover,
.footer-social a.linkedin:hover,
.footer-social a.telegram:hover,
.footer-social a.whatsapp:hover {
    background: transparent;
    color: var(--accent);
}

.footer-copyright {
    color: var(--muted);
    font-size: 13px;
}

/* ========== RELATED SECTION ========== */
.related-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
}

.related-card:hover {
    transform: none;
}

.related-card-title {
    font-size: 1rem;
}

/* ========== SIDEBAR & WIDGETS ========== */
.sidebar-menu {
    background: #ffffff;
    border-right: 1px solid var(--border);
}

.sidebar-nav a {
    font-family: var(--font-body);
    color: var(--text);
}

.sidebar-nav a:hover {
    background: #f5f5f5;
    color: var(--accent);
}

/* ========== TL;DR CARD ========== */
.tldr-card {
    background: #fef3f3 !important;
    border: 1px solid rgba(199, 28, 37, 0.2) !important;
}

.tldr-badge {
    background: var(--accent) !important;
    color: #ffffff !important;
}

.tldr-text {
    color: #333 !important;
}

.tldr-link {
    color: var(--accent) !important;
}

.tldr-link:hover {
    color: #a01820 !important;
}

/* ========== CTA HORIZONTAL ========== */
.cta-horizontal {
    background: #f9f9f9;
    border: 1px solid var(--border);
}

.cta-horizontal .cta-text {
    color: var(--text);
}

/* ========== COOKIE POPUP ========== */
.cookie-popup,
.cookie-modal-content {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

.cookie-popup p,
.cookie-modal-content p {
    color: #333 !important;
}

/* ========== SEARCH MODAL ========== */
.search-modal {
    background: rgba(255, 255, 255, 0.98);
}

.search-modal-input {
    font-family: var(--font-body);
    border: 1px solid var(--border);
}

/* ========== PAGINATION ========== */
.pagination a,
.pagination span {
    background: transparent;
    border: 1px solid var(--border);
}

.pagination a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pagination span.current {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* ========== SCROLL TO TOP ========== */
.scroll-to-top {
    background: #ffffff;
    border: 1px solid var(--border);
}

.scroll-to-top svg {
    stroke: var(--accent);
}

.scroll-to-top:hover {
    border-color: var(--accent);
    background: var(--accent);
}

.scroll-to-top:hover svg {
    stroke: #ffffff;
}

/* ========== AUTHOR BOX ========== */
.author-card {
    background: #f9f9f9;
    border: none;
}

.author-card .author-name {
    font-family: var(--font-heading);
    color: var(--text);
}

.author-card .author-role {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.author-card .author-bio {
    color: #333;
    font-family: var(--font-body);
}

.author-card .author-social a {
    background: transparent;
    border: 1px solid var(--border);
}

.author-card .author-social a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

/* ========== HERO NEWSPAPER SPECIFICS ========== */
.hero-np1-right {
    background: #f9f9f9;
}

.hero-np1-right-header {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--text);
}

.hero-np1-list-num {
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
}

.hero-np3-ticker {
    background: var(--accent);
}

.hero-np3-ticker-label {
    background: #a01820;
}

/* ========== LAYOUTS HORIZONTALES ========== */
.latest-news-grid.layout-list-h .article-card,
.latest-news-grid.layout-list-h-inv .article-card,
.latest-news-grid.layout-2col .article-card,
.latest-news-grid.layout-2col-inv .article-card {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

.latest-news-grid.layout-list-h .article-card:hover,
.latest-news-grid.layout-list-h-inv .article-card:hover,
.latest-news-grid.layout-2col .article-card:hover,
.latest-news-grid.layout-2col-inv .article-card:hover {
    transform: none !important;
}

/* ========== DROP CAP ========== */
.article-content > p:first-of-type::first-letter {
    float: left;
    font-size: 4.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-heading);
}

/* ========== MOBILE MENU ========== */
.nav-mobile a {
    font-family: var(--font-body);
}

/* ========== BREADCRUMBS ========== */
.breadcrumbs a {
    color: var(--muted);
}

.breadcrumbs a:hover {
    color: var(--accent);
}

/* ========== FIGCAPTION ========== */
.article-content figcaption,
.article-featured-figure figcaption {
    font-family: var(--font-body);
    color: var(--muted);
    font-size: 13px;
}