/* ==========================================================================
   Pulso del Valle — base.css
   Valores medidos del template AmpNews (enableds.com) el 2026-07-27.
   Los tokens de marca no cambian de valor: el modo oscuro se resuelve
   con la capa de roles de abajo.
   ========================================================================== */

:root {
    /* Le dice al navegador con qué tema pintar lo que NO controla el CSS
       del tema: el ::placeholder por defecto, el cursor del campo, las
       barras de scroll y el relleno del autocompletado. Sin esto el
       navegador pinta siempre el placeholder con su gris de tema claro
       (#757575), que sobre el fondo oscuro da 2,79:1 y no llega al 4,5:1
       de texto. */
    color-scheme: light;

    /* --- tokens de marca: NO SE TOCAN --- */
    --primario: #0F5BB3;
    --tinta: #08325F;
    --acento: #0F5BB3;
    --papel: #FFFFFF;
    --bajada: #EDE6E6;
    --texto: #16150F;
    --texto-suave: #6E6A5E;

    /* --- roles de superficie (claro) --- */
    --superficie: var(--papel);
    --en-superficie: var(--texto);
    --en-superficie-suave: var(--texto-suave);
    /* Filete decorativo (divisores, separadores del menú). 1,25:1 sobre la
       superficie: alcanza para insinuar una división, NO para delimitar un
       control — para eso está --borde-control. */
    --borde-suave: rgba(0, 0, 0, 0.1);
    /* Borde de un control (campo de búsqueda, números de paginación). El
       manual del medio exige 3,0:1 en elemento gráfico, y el borde del
       campo es lo único que marca dónde empieza: su fondo es --superficie,
       o sea exactamente el fondo de la página. 3,35:1 sobre --superficie. */
    --borde-control: rgba(0, 0, 0, 0.45);
    /* Relleno de énfasis: bloque de logo, botón de buscar, página activa de
       la paginación. En claro es el azul de marca (6,63:1 sobre la
       superficie, y 6,63:1 contra el texto blanco que va encima). */
    --relleno-fuerte: var(--primario);
    --en-relleno-fuerte: var(--papel);
    /* Color del subtítulo de sección cuando NO hay categoría. Es una
       variable de rol y no un selector de modo oscuro aparte a propósito:
       ver el comentario de .seccion__subtitulo. */
    --subtitulo-acento: var(--acento);

    /* --- roles de texto medidos de la referencia --- */
    --titulo-fuerte: #000000;
    --titulo-tarjeta: #1f1f1f;
    /* Los grises medidos de AmpNews (referencia) no llegan al 4,5:1 que
       exige el manual del medio para texto — --meta y --byline daban
       2,61:1 y 1,64:1 sobre blanco. Se ajustaron al valor más claro que
       sí cumple, en vez de transcribir la referencia literal. */
    --meta: #767676;
    --byline: #767676;
    --cuerpo: var(--texto-suave);

    /* --- chips de categoría (claro): texto blanco sobre chip oscuro --- */
    --chip-texto: #ffffff;
    --chip-politica: #0F5BB3;
    --chip-economia: #1B7A4B;
    --chip-sociedad: #B85C00;
    --chip-policial: #B3261E;
    --chip-deportes: #0F6E7A;
    --chip-cultura: #6B3FA0;
    --chip-entretenimiento: #A81C5D;
    --chip-mundo: #08325F;
    --chip-tecnologia: #3F5B75;

    /* --- métrica --- */
    --gutter: 20px;
    --ancho-max: 1140px;
    /* Mas alta que los 60px de AmpNews: el monograma de este medio es casi
       cuadrado y a 40px de alto no se leia. La cabecera crece con el logo. */
    --alto-cabecera: 76px;
}

/* Modo oscuro: el chip se invierte — texto tinta sobre chip claro.
   El azul de marca sobre el fondo oscuro da 1,94:1 y no llega ni al
   3,0:1 de elemento gráfico, por eso no se puede reusar tal cual. */
[data-tema="oscuro"] {
    color-scheme: dark;

    --superficie: var(--tinta);
    --en-superficie: var(--papel);
    --en-superficie-suave: var(--bajada);
    --borde-suave: rgba(255, 255, 255, 0.14);
    /* 3,82:1 sobre --superficie (el 0.14 de --borde-suave da 1,51:1). */
    --borde-control: rgba(255, 255, 255, 0.45);
    /* El azul de marca sobre el fondo oscuro da 1,94:1 — no llega ni al
       3,0:1 de elemento gráfico, así que el relleno de énfasis pasa al azul
       claro del chip de Política: 5,00:1 sobre la superficie. El texto que
       va encima se invierte con él (tinta sobre ese azul: 5,00:1); dejarlo
       blanco daría 2,58:1. Misma inversión que hace --chip-texto. */
    --relleno-fuerte: var(--chip-politica);
    --en-relleno-fuerte: var(--tinta);
    --subtitulo-acento: var(--chip-politica);

    --titulo-fuerte: var(--papel);
    --titulo-tarjeta: var(--papel);
    --meta: rgba(255, 255, 255, 0.6);
    /* --byline era rgba(255,255,255,0.45): 3,82:1 sobre --tinta, no llega
       al 4,5:1 de texto (se usa en .hero__byline, "por Fulano"). Subido
       al mismo 0.6 que --meta: 5,61:1. */
    --byline: rgba(255, 255, 255, 0.6);
    --cuerpo: var(--bajada);

    --chip-texto: #08325F;
    --chip-politica: #5FA6EC;
    --chip-economia: #3FBF7F;
    --chip-sociedad: #F0932B;
    --chip-policial: #F98177;
    --chip-deportes: #3FC0CE;
    --chip-cultura: #B48CE0;
    --chip-entretenimiento: #F075AC;
    --chip-mundo: #8FB8E0;
    --chip-tecnologia: #9FBBD4;
}

/* --- reset mínimo --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: var(--superficie);
    color: var(--en-superficie);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --- contenedor y divisor --- */
.contenido {
    padding: 0 var(--gutter);
    margin: 0 auto 25px;
    max-width: var(--ancho-max);
}

.divisor {
    height: 1px;
    background: var(--borde-suave);
    margin: 0 0 30px;
    border: 0;
}

/* --- chip de categoría --- */
.chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    padding: 2px 10px 3px;
    border-radius: 10px;
    color: var(--chip-texto);
}

.chip--politica        { background: var(--chip-politica); }
.chip--economia        { background: var(--chip-economia); }
.chip--sociedad        { background: var(--chip-sociedad); }
.chip--policial        { background: var(--chip-policial); }
.chip--deportes        { background: var(--chip-deportes); }
.chip--cultura         { background: var(--chip-cultura); }
.chip--entretenimiento { background: var(--chip-entretenimiento); }
.chip--mundo           { background: var(--chip-mundo); }
.chip--tecnologia      { background: var(--chip-tecnologia); }

/* --- título de sección --- */
.seccion__titulo {
    font-size: 24px;
    line-height: 34px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--titulo-fuerte);
    margin: 0;
    overflow-wrap: anywhere;
}

/* El color sale de una VARIABLE de rol, no de un selector de modo oscuro.
   Antes el oscuro se resolvía con [data-tema="oscuro"] .seccion__subtitulo,
   que tiene especificidad (0,2,0) y le ganaba a las nueve modificadoras
   .seccion__subtitulo--<slug> (0,1,0): los nueve archivos de categoría y el
   bloque "MÁS DE [CATEGORÍA]" de la nota salían todos del mismo azul en
   oscuro. Con la variable, el modo oscuro solo redefine --subtitulo-acento
   en :root y no compite en especificidad con nadie: las modificadoras
   siguen ganando por orden de cascada, como en claro. */
.seccion__subtitulo {
    font-size: 14px;
    line-height: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--subtitulo-acento);
    margin: 0 0 25px;
}

/* --- accesibilidad ---
   El nombre lo fija WordPress: es la clase que core emite en el <label>
   del formulario de búsqueda (get_search_form). Está definida acá y no se
   hereda del CSS de core a propósito — si alguien desencola ese estilo, el
   texto del label aparecería a la vista en el 404 y en la búsqueda. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- cabecera: 60px fija, medida de la referencia --- */
.cabecera {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--alto-cabecera);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde-suave);
}

.cabecera__espaciador {
    height: var(--alto-cabecera);
}

/* Barra de administración de WordPress. Está fija arriba de todo con
   z-index 99999, así que le gana a la cabecera (z-index 50) y le tapa la
   mitad de arriba: con sesión iniciada, medio logo, medio toggle de tema y
   media hamburguesa dejan de ser clickeables. El margin-top que WP le pone
   al <html> no corre la cabecera porque es position: fixed. WP marca el
   <body> con .admin-bar cuando la barra está presente; mide 32px, y 46px
   hasta 782px de ancho. */
body.admin-bar .cabecera {
    top: 32px;
}

body.admin-bar .cabecera__espaciador {
    height: calc(var(--alto-cabecera) + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .cabecera {
        top: 46px;
    }

    body.admin-bar .cabecera__espaciador {
        height: calc(var(--alto-cabecera) + 46px);
    }
}

/* Hasta 600px WP pasa su barra a position: absolute — se va con el scroll
   en vez de quedarse fija. Si la cabecera quedara desplazada 46px, al
   scrollear dejaría una franja muerta arriba. Acompañamos ese
   comportamiento: la cabecera también se vuelve absoluta, de modo que las
   dos scrollean juntas y nunca se pisan. */
@media screen and (max-width: 600px) {
    body.admin-bar .cabecera {
        position: absolute;
    }
}

.cabecera__logo {
    width: 116px;
    height: var(--alto-cabecera);
    background: var(--relleno-fuerte);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.cabecera__logo img {
    max-height: 100%;
    width: auto;
}

/* El monograma va en dos versiones porque el relleno del bloque cambia con
   el tema: la blanca sobre el azul de marca (6,63:1) y la tinta sobre el
   azul claro del modo oscuro (5,00:1). Dejar la blanca en oscuro daría
   2,58:1, por debajo del 3,0:1 de elemento gráfico. Mismo patrón de
   alternancia que los íconos de sol/luna. */
.pulso-logo-oscuro { display: none; }
[data-tema="oscuro"] .pulso-logo-claro { display: none; }
[data-tema="oscuro"] .pulso-logo-oscuro { display: block; }

.cabecera__acciones {
    display: flex;
}

.cabecera__boton {
    width: 60px;
    height: var(--alto-cabecera);
    border: 0;
    background: none;
    color: var(--en-superficie);
    font-size: 18px;
    line-height: var(--alto-cabecera);
    text-align: center;
    cursor: pointer;
}

.pulso-icono-oscuro { display: none; }
[data-tema="oscuro"] .pulso-icono-claro { display: none; }
[data-tema="oscuro"] .pulso-icono-oscuro { display: inline; }

/* --- menú off-canvas --- */
.menu-fondo {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.menu-fondo--visible {
    opacity: 1;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: 280px;
    max-width: 85vw;
    background: var(--superficie);
    border-right: 1px solid var(--borde-suave);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.menu--abierto {
    transform: translateX(0);
}

.menu__cerrar {
    width: 60px;
    height: var(--alto-cabecera);
    border: 0;
    background: none;
    color: var(--en-superficie);
    font-size: 18px;
    cursor: pointer;
}

.menu__divisor {
    font-size: 10px;
    line-height: 40px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--en-superficie-suave);
    padding-left: var(--gutter);
    margin: 0;
    border-top: 1px solid var(--borde-suave);
}

.menu__item {
    display: block;
    font-size: 13px;
    line-height: 60px;
    color: var(--en-superficie);
    padding-left: var(--gutter);
    border-bottom: 1px solid var(--borde-suave);
}

.menu__redes {
    display: flex;
    padding: 10px var(--gutter);
    gap: 4px;
}

.menu__redes a {
    width: 43px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--en-superficie);
}

@media (prefers-reduced-motion: reduce) {
    .menu,
    .menu-fondo {
        transition: none;
    }
}

/* --- pie --- */
.pie {
    border-top: 1px solid var(--borde-suave);
    padding: 30px 0 40px;
    text-align: center;
}

.pie__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--relleno-fuerte);
    padding: 12px 20px;
    margin-bottom: 15px;
}

.pie__logo img {
    max-height: 56px;
    width: auto;
}

.pie__bajada {
    font-size: 14px;
    line-height: 22px;
    color: var(--en-superficie-suave);
    max-width: 420px;
    margin: 0 auto 15px;
}

.pie__redes {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 15px;
}

.pie__redes a {
    width: 43px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--en-superficie);
}

.pie__copyright {
    font-size: 12px;
    color: var(--meta);
    margin: 0;
}

/* --- hero --- */
.hero {
    margin-bottom: 15px;
}

.hero__foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.hero__cuerpo {
    padding: 0 var(--gutter);
}

.hero__linea {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 15px;
}

.hero__byline {
    font-size: 12px;
    color: var(--byline);
    padding-top: 2px;
}

.hero__titulo {
    display: block;
    font-size: 20px;
    font-weight: 900;
    color: var(--titulo-fuerte);
    padding: 10px 0;
    overflow-wrap: anywhere;
}

.hero__hora {
    display: block;
    font-size: 12px;
    color: var(--meta);
    padding-top: 10px;
}

/* --- grilla de tarjetas --- */
.grilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 35px;
}

.tarjeta__foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}

.tarjeta__titulo {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--titulo-tarjeta);
    padding-top: 10px;
    overflow-wrap: anywhere;
}

.tarjeta__hora {
    display: block;
    font-size: 12px;
    color: var(--meta);
    padding-top: 10px;
}

/* --- strip --- */
.strip {
    margin-bottom: 30px;
}

.strip__enlace {
    display: block;
    position: relative;
    min-height: 100px;
}

.strip__titulo {
    display: block;
    font-size: 16px;
    line-height: 25px;
    font-weight: 900;
    color: var(--titulo-fuerte);
    padding-right: 120px;
    overflow-wrap: anywhere;
}

.strip__foto {
    position: absolute;
    top: 0;
    right: 0;
}

.strip__foto img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.strip__hora {
    display: block;
    font-size: 12px;
    color: var(--meta);
    padding-top: 20px;
    padding-right: 120px;
}

/* --- marcador para una nota sin imagen destacada ---
   Ocupa exactamente el mismo lugar que la foto que falta. Sin esto, la
   tarjeta sin foto sube su título 254px respecto a sus vecinas y desalinea
   toda la fila de la grilla; además el aire entre foto y título vive en el
   margin-bottom de la imagen, así que desaparecía justo cuando no había
   imagen. Va pintado con el color de la categoría (los nueve tokens que ya
   existen). No lleva texto y el <a> que lo envuelve ya es tabindex="-1" o
   trae el titular como texto accesible, así que no es alcanzable por
   teclado ni se anuncia. */
.marcador {
    display: block;
    width: 100%;
    background: var(--relleno-fuerte);
}

.marcador--politica        { background: var(--chip-politica); }
.marcador--economia        { background: var(--chip-economia); }
.marcador--sociedad        { background: var(--chip-sociedad); }
.marcador--policial        { background: var(--chip-policial); }
.marcador--deportes        { background: var(--chip-deportes); }
.marcador--cultura         { background: var(--chip-cultura); }
.marcador--entretenimiento { background: var(--chip-entretenimiento); }
.marcador--mundo           { background: var(--chip-mundo); }
.marcador--tecnologia      { background: var(--chip-tecnologia); }

/* Cada marcador copia la caja de la foto a la que reemplaza. */
.hero__foto .marcador {
    aspect-ratio: 3 / 2;
}

.tarjeta__foto .marcador {
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    margin-bottom: 15px;
}

.strip__foto .marcador {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

/* --- subtítulo de sección por categoría --- */
.seccion__subtitulo--politica        { color: var(--chip-politica); }
.seccion__subtitulo--economia        { color: var(--chip-economia); }
.seccion__subtitulo--sociedad        { color: var(--chip-sociedad); }
.seccion__subtitulo--policial        { color: var(--chip-policial); }
.seccion__subtitulo--deportes        { color: var(--chip-deportes); }
.seccion__subtitulo--cultura         { color: var(--chip-cultura); }
.seccion__subtitulo--entretenimiento { color: var(--chip-entretenimiento); }
.seccion__subtitulo--mundo           { color: var(--chip-mundo); }
.seccion__subtitulo--tecnologia      { color: var(--chip-tecnologia); }

/* --- paginación --- */
.paginacion {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 20px 0 10px;
}

.paginacion .page-numbers {
    display: inline-block;
    min-width: 36px;
    padding: 6px 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--borde-control);
    border-radius: 4px;
    color: var(--en-superficie);
}

.paginacion .page-numbers.current {
    background: var(--relleno-fuerte);
    border-color: var(--relleno-fuerte);
    color: var(--en-relleno-fuerte);
}

.contenido--cabeza {
    padding-top: 25px;
}

.vacio {
    font-size: 16px;
    line-height: 1.8;
    color: var(--cuerpo);
    margin: 0 0 20px;
}

.search-form {
    display: flex;
    gap: 8px;
}

/* El fondo del campo es --superficie, o sea el mismo fondo de la página: el
   borde es lo único que marca dónde empieza el control, por eso va con
   --borde-control y no con --borde-suave. */
.search-form input[type="search"] {
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--borde-control);
    border-radius: 4px;
    background: var(--superficie);
    color: var(--en-superficie);
}

/* Explícito además del color-scheme de :root: el gris por defecto del
   navegador no está bajo control del tema y en oscuro daba 2,79:1. El
   opacity: 1 es por Firefox, que le baja la opacidad al placeholder. */
.search-form input[type="search"]::placeholder {
    color: var(--en-superficie-suave);
    opacity: 1;
}

.search-form input[type="submit"] {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--relleno-fuerte);
    color: var(--en-relleno-fuerte);
    cursor: pointer;
}

/* --- nota --- */
.nota__titulo {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
    color: var(--titulo-fuerte);
    margin: 15px 0 20px;
    overflow-wrap: anywhere;
}

.nota__firma {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--meta);
    margin: 0 0 4px;
}

.nota__firma span {
    color: var(--primario);
    font-weight: 700;
}

[data-tema="oscuro"] .nota__firma span {
    color: var(--chip-politica);
}

.nota__fecha {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--meta);
    margin: 0 0 25px;
}

.nota__foto img {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.nota__cuerpo {
    font-size: 16px;
    line-height: 1.8;
    color: var(--cuerpo);
}

.nota__cuerpo p {
    margin: 0 0 25px;
}

.nota__cuerpo blockquote {
    margin: 0 0 25px;
    padding-left: 20px;
    border-left: 4px solid var(--primario);
    font-style: italic;
}

.nota__cuerpo--politica        blockquote { border-left-color: var(--chip-politica); }
.nota__cuerpo--economia        blockquote { border-left-color: var(--chip-economia); }
.nota__cuerpo--sociedad        blockquote { border-left-color: var(--chip-sociedad); }
.nota__cuerpo--policial        blockquote { border-left-color: var(--chip-policial); }
.nota__cuerpo--deportes        blockquote { border-left-color: var(--chip-deportes); }
.nota__cuerpo--cultura         blockquote { border-left-color: var(--chip-cultura); }
.nota__cuerpo--entretenimiento blockquote { border-left-color: var(--chip-entretenimiento); }
.nota__cuerpo--mundo           blockquote { border-left-color: var(--chip-mundo); }
.nota__cuerpo--tecnologia      blockquote { border-left-color: var(--chip-tecnologia); }

/* --- feed de Facebook --- */
.feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.feed__item {
    display: block;
}

/* Sin proporción fija, a diferencia del hero y de las tarjetas — nunca le
   agregues object-fit/aspect-ratio acá. Las piezas de social vienen
   verticales o cuadradas y traen el titular quemado dentro de la imagen:
   recortarlas a 16:9 (o a cualquier proporción fija) corta el texto a la
   mitad. Lo que se acota para que la foto no explote en escritorio es el
   ANCHO DE LA COLUMNA (ver .feed en el media query de 768px, grid de 3
   columnas) — la imagen sigue mostrándose completa, solo más angosta. En
   mobile .feed es de 1 columna y la imagen ocupa el ancho del viewport,
   que ya es razonable. */
.feed__foto {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.feed__texto {
    display: block;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--titulo-tarjeta);
    overflow-wrap: anywhere;
}

/* --- repaso de contraste (oscuro) ---
   --acento (#0F5BB3) sobre --tinta da 1,94:1, no llega al 4,5:1 de texto.
   El subtítulo SIN categoría pasa al azul claro del chip de Política
   (5,00:1) — eso lo resuelve la variable --subtitulo-acento, redefinida en
   el bloque [data-tema="oscuro"] de arriba.

   Ojo con el reflejo de agregar acá un [data-tema="oscuro"] .seccion__algo:
   ese selector tiene especificidad (0,2,0) y le gana a las modificadoras de
   categoría (0,1,0), que es exactamente el bug que tenía esta regla — los
   nueve subtítulos de categoría salían del mismo azul en oscuro. Lo que
   cambia por tema va en una variable de rol, no en un selector más
   específico. */

/* ==========================================================================
   Escritorio. AmpNews no tiene diseño de escritorio: no hay valores que
   copiar acá, se escala el mismo sistema. Ningún componente nuevo.
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --gutter: 40px;
        --alto-cabecera: 88px;
    }

    .cabecera__logo {
        width: 140px;
    }

    .pie__logo img {
        max-height: 68px;
    }

    .hero__foto img {
        border-radius: 5px;
    }

    .hero__cuerpo {
        padding: 0;
    }

    .hero {
        max-width: var(--ancho-max);
        margin: 0 auto 25px;
        padding: 0 var(--gutter);
    }

    .hero__titulo {
        font-size: 28px;
    }

    /* Cuatro columnas y no tres: la portada siempre emite 4 tarjetas por
       bloque, así que con 3 columnas quedaba una huérfana sola en una
       segunda fila entre 768 y 1023px (dos veces, una por bloque). Se
       miraron las dos alternativas a 820px: con 2 columnas las tarjetas
       salen de 352px y le compiten al hero; con 4 entran en una fila
       limpia de ~180px con el titular en tres líneas. Además empalma sin
       salto con el tramo de ≥1024px, que ya era de 4. */
    .grilla {
        grid-template-columns: repeat(4, 1fr);
    }

    /* .pulso-strips envuelve los .strip en front-page.php y single.php.
       Antes se armaban las dos columnas con width: calc(50% - 20px) +
       margin-right, y se intentaba sacarle el margen a la segunda con
       .strip:nth-child(2n) — pero nth-child cuenta TODOS los hermanos
       del contenedor (el <hr class="divisor">, y en single.php también
       un <h2>/<p> antes de los strips), no solo los .strip. En
       front-page.php eso seleccionaba el 1er y 3er strip en vez del 2do,
       dejando al que cierra la fila con su margen de más y rompiendo el
       salto de línea. Grid + gap en un contenedor propio no depende de
       la posición entre hermanos — mismo patrón que .grilla. */
    .pulso-strips {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .pulso-strips .strip {
        margin-bottom: 0;
    }

    /* .feed__foto no tiene proporción fija (ver comentario junto a esa
       regla — el titular queda quemado dentro de la imagen, recortarla
       lo corta a la mitad). Dejar el bloque en 1 sola columna en
       escritorio se probó y fue peor: a 1440px las fotos, sin ancho
       acotado, se estiran al ancho completo del contenedor topeado
       (~1060px) y el bloque entero pasa de 4670px de alto — la página se
       vuelve un scroll interminable, un problema más grave que el que se
       evitaba. La solución correcta no es recortar la imagen, es acotar
       el ANCHO de la columna: 3 columnas, cada foto ronda los 340px de
       ancho de verdad, sigue completa y sin recortar. align-items: start
       evita que un item más alto (proporción más vertical) estire a lo
       alto a sus vecinos de fila — las alturas quedan desparejas entre
       columnas, y eso es aceptable: es la proporción nativa de cada
       pieza, no un bug. */
    .feed {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .hero__titulo {
        font-size: 40px;
        line-height: 1.1;
    }

    /* .grilla ya es de 4 columnas desde 768px — no se repite acá. */

    .seccion__titulo {
        font-size: 32px;
        line-height: 42px;
    }
}