/* FUERZA BRUTA ESTILO NEW YORKER */
.portada-container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.todays-mix-label {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
}

/* La rejilla de 4 columnas de arriba */
.news-feed {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.feed-item img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 15px; }
.feed-item h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; font-weight: 700; }
.excerpt-mini { font-size: 0.9rem; color: #555; margin-bottom: 10px; }

/* El bloque negro gigante */
.hero-black-section { background: #000; color: #fff; padding: 80px 40px; margin: 0 -20px; }
.hero-article { display: flex; align-items: center; gap: 50px; max-width: 1100px; margin: 0 auto; }
.hero-text { flex: 1; text-align: center; }
.hero-image { flex: 1; }
.hero-image img { width: 100%; height: auto; }

.hero-text h2 { font-size: 3.5rem; line-height: 1; margin: 20px 0; font-family: 'Libre Caslon Text', serif; }
.hero-text h2 a { color: #fff !important; text-decoration: none; }
.hero-excerpt { font-size: 1.3rem; margin-bottom: 20px; opacity: 0.9; }

.byline { font-family: 'Oswald', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.byline-white { font-family: 'Oswald', sans-serif; font-size: 0.8rem; color: #ccc; text-transform: uppercase; }

.placeholder-img { background: #f0f0f0; width: 100%; height: 200px; }
.main-navigation {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    margin-top: 20px;
}
.main-navigation ul {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-navigation a {
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000 !important;
}

/* --- DISEÑO DE LECTURA (SINGLE POST) --- */

.article-wrapper {
    background: #fff;
    padding-top: 40px;
}

.single-article {
    max-width: 700px; /* Columna estrecha estilo revista */
    margin: 0 auto;
    padding: 0 20px;
}

.article-header {
    text-align: center;
    margin-bottom: 40px;
}

.article-title {
    font-family: 'Libre Caslon Text', serif;
    font-size: 3.5rem; /* Título imponente */
    line-height: 1.1;
    font-weight: 400;
    margin: 20px 0;
}

.article-dek {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #333;
    font-style: italic;
    margin-bottom: 30px;
}

.article-byline {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-top: 1px solid #000;
    padding-top: 15px;
    display: inline-block;
}

.author-name { font-weight: 700; }
.article-date { color: #888; margin-left: 10px; }

/* Cuerpo del texto */
.article-body {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.25rem; /* Tamaño ideal para lectura larga */
    line-height: 1.8;
    color: #1a1a1a;
}

.article-body p {
    margin-bottom: 1.8em;
}

/* Imágenes dentro del artículo */
.article-featured-image {
    margin: 40px -100px; /* Sobresale un poco de la columna */
}

@media (max-width: 900px) {
    .article-featured-image { margin: 40px 0; }
}

.article-featured-image img {
    width: 100%;
    height: auto;
}

.image-caption {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    color: #777;
    margin-top: 10px;
    text-align: left;
}

/* --- NAVEGACIÓN ESTILO NEW YORKER --- */
.main-navigation {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 30px;
    padding: 10px 0;
}

.nav-menu-list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px; /* Espacio entre secciones */
}

.nav-menu-list li a {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #000 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-menu-list li a:hover {
    color: #ff0000 !important; /* El rojo clásico de sus enlaces */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .nav-menu-list { flex-wrap: wrap; gap: 15px; }
}
/* --- MEJORA DEL MENÚ: NEGRITAS Y ESPACIADO --- */

.nav-menu-list li a {
    font-family: 'Oswald', sans-serif;
    font-weight: 700; /* Esto pone las categorías en negrita */
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    padding: 5px 10px;
    display: inline-block;
}

/* Efecto sutil al pasar el ratón */
.nav-menu-list li a:hover {
    color: #ff0000 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Si tienes submenús (categorías que cuelgan de otras), 
   podemos hacer que esas NO sean negritas para contrastar */
.nav-menu-list li ul li a {
    font-weight: 400;
    font-size: 0.75rem;
}
.nav-menu-list {
    gap: 15px; /* Reduce este número si ves que no caben todas en una línea */
    flex-wrap: wrap; /* Esto hará que, si no caben, salten a la siguiente línea con elegancia */
}
/* --- BARRAS SEPARADORAS EN EL MENÚ --- */

.nav-menu-list li {
    display: flex;
    align-items: center;
}

/* Añade la barra después de cada elemento... */
.nav-menu-list li:not(:last-child)::after {
    content: "|"; /* La barra vertical */
    margin: 0 5px; /* Espacio a los lados de la barra */
    color: #ccc;   /* Un gris suave para que no compita con el texto */
    font-family: 'Arial', sans-serif; /* Fuente neutra para la barra */
    font-weight: normal;
    font-size: 0.9rem;
}

/* Ajuste del enlace para que no esté pegado a la barra */
.nav-menu-list li a {
    padding: 5px 8px !important;
}
/* --- ETIQUETA DE SECCIÓN ESTILO NEW YORKER --- */
.seccion-label {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;      /* Un poco más pequeña para que sea elegante */
    font-weight: 700;
    letter-spacing: 4px;    /* Mucho espacio entre letras */
    margin: 40px 0 30px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    color: #000;
}
/* --- LIMPIEZA Y TIPOGRAFÍA ESTILO NEW YORKER --- */

/* Eliminar subrayados de todos los enlaces de la web */
a {
    text-decoration: none !important;
    transition: color 0.2s ease-in-out;
}

/* Título del artículo: Más contundente y con serifa clásica */
.article-title {
    font-family: 'Libre Caslon Text', serif;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.05;
    color: #1a1a1a;
    margin-bottom: 15px;
    text-align: left; /* Alineado a la izquierda como en tu captura */
}

/* Entradilla (Dek): Letra más ligera y grisácea */
.article-dek {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.5rem;
    line-height: 1.3;
    color: #555;
    font-style: normal; /* En el NYer moderno a veces no es itálica */
    margin-bottom: 25px;
    text-align: left;
}

/* Firma (Byline): Negrita, sin serifa y compacta */
.article-byline {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
    border: none; /* Quitamos líneas si las hubiera */
    padding: 0;
    margin-top: 10px;
}

.author-name {
    color: #000;
}
/* --- SECCIÓN MÁS COSITAS (STYLE THE CRITICS) --- */

.mas-cositas-wrapper {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.critics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas perfectas */
    gap: 50px 30px; /* Mucho espacio vertical para que respire */
    margin-top: 40px;
}

.critic-card {
    text-align: center; /* Todo centrado como en tu captura */
    border-bottom: 1px solid #eee; /* Línea sutil de separación */
    padding-bottom: 30px;
}

.critic-thumbnail img {
    width: 220px; /* Tamaño contenido para que parezca una reseña */
    height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
}

.category-tag {
    font-family: 'Oswald', sans-serif;
    color: #ff0000; /* Rojo New Yorker para la categoría */
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.critic-card h3 {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: 700;
}

.critic-excerpt {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
}

.byline-critic {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* En móviles se pone en 1 columna */
@media (max-width: 768px) {
    .critics-grid { grid-template-columns: 1fr; }
}