.article-category {
display: inline-block;
padding: 0 1rem;
font-size: 0.60rem;
font-weight: bold;
text-transform: uppercase;
color: var(--color-text-inverse);
margin-bottom: 0.75rem;
}
.mt-5 { margin-top: 5rem; }
.mt-3 { margin-top: 3rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.p-3 { padding: 3rem; }
.p-0 { padding: 0; }

/* Título principal del artículo */
.article-title {
font-family: 'Source Serif 4', serif;
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-tight);
font-size: var(--font-size-xxxl);
color: var(--color-text-primary);
margin-bottom: var(--spacing-xs);
}

/* Fecha del artículo */
.article-date {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
font-weight: var(--font-weight-regular);
margin-top: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
}

.article-category.sin-categoria { background-color: #ccc; color: black; }
.article-category.entre-voces-opinion    { background-color: var(--color-entre-voces-opinion); }
.article-category.agenda-publica { background-color: var(--color-agenda-publica); }
.article-category.comunidades    { background-color: var(--color-comunidades); }
.article-category.enfoque        { background-color: var(--color-enfoque); }
.article-category.tendencias     { background-color: var(--color-tendencias); }
.article-category.global         { background-color: var(--color-global); }
.article-category.deportes       { background-color: var(--color-deportes); }
.article-category.tu-voz         { background-color: var(--color-tu-voz); }

/* ===== CAPA 1: CONTENEDOR DE FONDO (FULL-SCREEN) ===== */
.article-full-background {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: var(--color-background);
}

/* ===== GRADIENT PROGRESIVO - CORREGIDO ===== */
.article-full-background::before {
content: '';
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10vh;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.03));
z-index: 1;
transition: height 0.5s ease, bottom 0.3s ease;
pointer-events: none;
}

.article-full-background.gradient-expanded::before {
height: 60vh;
}

.article-full-background.gradient-sticky::before {
position: absolute;
bottom: 0;
top: auto;
}

/* Gradients específicos por categoría */
.article-full-background.agenda-publica::before {
background: linear-gradient(to bottom, transparent, rgba(var(--agenda-publica-rgb), 0.2));
}
.article-full-background.entre-voces::before {
background: linear-gradient(to bottom, transparent, rgba(var(--entre-voces-rgb), 0.2));
}
.article-full-background.comunidades::before {
background: linear-gradient(to bottom, transparent, rgba(var(--comunidades-rgb), 0.2));
}
.article-full-background.enfoque::before {
background: linear-gradient(to bottom, transparent, rgba(var(--enfoque-rgb), 0.2));
}
.article-full-background.tendencias::before {
background: linear-gradient(to bottom, transparent, rgba(var(--tendencias-rgb), 0.2));
}
.article-full-background.global::before {
background: linear-gradient(to bottom, transparent, rgba(var(--global-rgb), 0.2));
}
.article-full-background.deportes::before {
background: linear-gradient(to bottom, transparent, rgba(var(--deportes-rgb), 0.2));
}
.article-full-background.tu-voz::before {
background: linear-gradient(to bottom, transparent, rgba(var(--tu-voz-rgb), 0.2));
}

/* ===== CAPA 2: CONTENEDOR DE CONTENIDO ===== */
.article-main-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 3rem var(--spacing-lg) 3rem;
position: relative;
z-index: 2;
}

/* ===== HEADER DEL ARTÍCULO ===== */
.article-header-content {
width: 100%;
margin-bottom: 2rem;
}

/* ===== CONTENEDOR IMAGEN + SIDEBAR ===== */
.image-sidebar-container {
display: grid;
grid-template-columns: 1fr 400px;
gap: 30px;
align-items: start;
margin-bottom: 2rem;
}

.article-media-section {
width: 100%;
}

.article-sidebar-section {
width: 100%;
}

/* ===== ELEMENTOS MEDIA ===== */
.article-banner {
width: 100%;
max-width: 920px;
height: 520px;
overflow: hidden;
border-radius: var(--border-radius-card);
}

.article-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.video-responsive {
width: 100%;
}

.video-responsive iframe {
width: 100%;
height: 520px;
border-radius: var(--border-radius-card);
}

/* ===== CONTENIDO DEL ARTÍCULO (CON SANGRÍA ORIGINAL) ===== */
.article-content-section {
width: 100%;
max-width: 750px;
margin: 2rem auto 0;
margin-left: calc(100px + var(--spacing-md));
line-height: var(--line-height-relaxed);
font-size: var(--font-size-lg);
color: var(--color-text-primary);
text-align: justify;
}

.article-content-section p {
margin-bottom: var(--spacing-md);
line-height: var(--line-height-relaxed);
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
}

.article-content-section h1,
.article-content-section h2,
.article-content-section h3,
.article-content-section h4,
.article-content-section h5,
.article-content-section h6 {
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}

.article-content-section h1 { font-size: var(--font-size-xxl); }
.article-content-section h2 { font-size: var(--font-size-xl); }
.article-content-section h3 { font-size: var(--font-size-lg); }
.article-content-section h4 { font-size: var(--font-size-md); }
.article-content-section h5 { font-size: var(--font-size-sm); }
.article-content-section h6 { font-size: var(--font-size-xs); }

.article-content-section ul,
.article-content-section ol {
margin-bottom: var(--spacing-md);
padding-left: var(--spacing-lg);
line-height: var(--line-height-relaxed);
}

.article-content-section li {
margin-bottom: var(--spacing-xs);
}

.article-content-section blockquote {
margin: var(--spacing-lg) 0;
padding: var(--spacing-md) var(--spacing-lg);
border-left: 4px solid var(--color-highlight);
background-color: rgba(255, 255, 255, 0.5);
border-radius: var(--border-radius-sm);
font-style: italic;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text-secondary);
}

.article-content-section strong {
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}

.article-content-section em {
font-style: italic;
}

.article-content-section code {
background-color: rgba(0, 0, 0, 0.05);
padding: var(--spacing-xxs) var(--spacing-xs);
border-radius: var(--border-radius-sm);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}

.article-content-section pre {
background-color: rgba(0, 0, 0, 0.05);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
overflow-x: auto;
margin: var(--spacing-md) 0;
line-height: var(--line-height-normal);
}

.article-content-section pre code {
background: none;
padding: 0;
}

.article-content-section hr {
margin: var(--spacing-xl) 0;
border: none;
height: 1px;
background-color: var(--color-border);
}

.article-content-section img {
max-width: 100%;
height: auto;
max-height: 500;
border-radius: var(--border-radius-md);
margin: var(--spacing-lg) 0;
box-shadow: var(--shadow-sm);
}

.article-content-section figure {
margin: var(--spacing-lg) 0;
}

.article-content-section figcaption {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
text-align: center;
margin-top: var(--spacing-xs);
font-style: italic;
}

/* ===== SECCIONES ADICIONALES ===== */
.article-more-sections {
width: 100%;
max-width: 1180px;
margin: 3rem auto 0;
}

/* ===== ESTILOS PARA TÍTULOS DEL SIDEBAR ===== */
.article-sidebar-section .recent-title {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.article-sidebar-section .recent-title a {
color: white;
text-decoration: none;
}

.article-sidebar-section .recent-title a:hover {
text-decoration: none;
}

.article-sidebar-section .mini-title {
margin: 0 0 0.5rem 0;
font-weight: bold;
font-size: 14px;
line-height: 1.3;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/* ===== TÍTULOS DEL CAROUSEL "MÁS EN CATEGORÍA" ===== */
.article-more-sections .article-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 767px) {
.article-main-container {
    padding: 2rem var(--spacing-sm) 2rem;
}

.image-sidebar-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.article-sidebar-section {
    display: none;
}

.article-content-section {
    max-width: none;
    margin: 2rem 0 0 0;
}

.article-more-sections {
    max-width: none;
}

.video-responsive iframe {
    height: 250px;
}

.article-banner {
    height: 250px;
}
}

@media (min-width: 768px) and (max-width: 900px) {
.image-sidebar-container {
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-lg);
}

.article-content-section {
    margin-left: var(--spacing-md);
    max-width: calc(100% - var(--spacing-lg));
}
}

@media (min-width: 901px) and (max-width: 1080px) {
.image-sidebar-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.article-content-section {
    margin-left: calc(50px + var(--spacing-sm));
    max-width: 750px;
}
}

@media (min-width: 1081px) and (max-width: 1199px) {
.image-sidebar-container {
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-lg);
}

.article-content-section {
    margin-left: calc(50px + var(--spacing-sm));
    max-width: 650px;
}
}

@media (min-width: 1200px) {
.article-main-container {
    max-width: 1600px;
    padding: 3rem var(--spacing-xl) 3rem;
}

.image-sidebar-container {
    grid-template-columns: 1fr 400px;
    gap: 30px;
}

.article-content-section {
    margin-left: calc(100px + var(--spacing-md));
    max-width: 750px;
}
}