/* ============================================================
   FUENTES GOOGLE
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Syne:wght@400;500;600;700;800&display=swap');

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ============================================================
   VARIABLES
============================================================ */
:root {
    --color-black: #0a0a0a;
    --color-white: #ffffff;
    --color-magenta: #e60a64;
    --font-display: 'Instrument Serif', serif;
    --font-ui: 'Syne', sans-serif;
}

/* ============================================================
   HEADER
============================================================ */
.header {
    border-top: 3px solid #2a1a0e;
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e8e8e8;
}

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 64px;
    /*max-width: 1400px;
    margin: 0 auto;*/
}

.navbar__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar__logo-name {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--color-black);
    letter-spacing: -0.03em;
}

.navbar__logo-sub {
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.navbar__menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.navbar__item a {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-black);
    text-decoration: none;
}

.navbar__item--active a {
    color: var(--color-magenta);
    border-bottom: 2px solid var(--color-magenta);
    padding-bottom: 2px;
}

.navbar__icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar__icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-black);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   CHIPS DE CATEGORÍAS (solo visibles en móvil)
============================================================ */
.chips {
    display: none;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    background: var(--color-white);
    border-bottom: 1px solid #e8e8e8;
    flex-wrap: nowrap;
}

.chips__item {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-black);
    border: 1px solid #d0d0d0;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
}

.chips__item--activo {
    background: var(--color-magenta);
    color: var(--color-white);
    border-color: var(--color-magenta);
}

/* ============================================================
   HERO
============================================================ */
.hero {
    position: relative;
    width: 100%;
    min-height: 240px;
    overflow: hidden;
}

.hero__content {
    /*max-width: 1400px;
    margin: 0 auto;*/
    padding: 0.5rem 2rem;
    padding-right: 32%;
    display: grid;
    grid-template-columns: 1fr 1px 0.9fr;
    align-items: center;
    gap: 0.5rem 2.0rem;
}

.hero__eyebrow {
    grid-column: 1 / 4;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
}

.hero__title {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 1.0;
    color: var(--color-black);
    letter-spacing: -0.02em;
}

.hero__dot {
    color: var(--color-magenta);
}

.hero__divider {
    background: #ccc;
    width: 1px;
    height: 120px;
    align-self: center;
}

.hero__right {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-left: 1rem;
}

.hero__desc {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: #555;
    line-height: 1.7;
}

.hero__cta {
    display: inline-block;
    background: var(--color-magenta);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    align-self: flex-start;
}

.hero__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32%;
    overflow: hidden;
}

/* La foto del hero se sirve como fondo y SOLO en escritorio: en móvil
   la caja está oculta y un <img> se habría descargado igual (1,7 MB de
   PNG que el 80% de los lectores no llega a ver). WebP de 132 KB. */
@media (min-width: 901px) {
    .hero__image {
        background-image: url('../img/hero.webp');
        background-size: cover;
        background-position: center center;
    }
}

/* ============================================================
   ESTA SEMANA
============================================================ */
.semana {
    /*max-width: 1400px;
    margin: 0 auto;*/
    padding: 0 2rem 2rem;
}

.semana__titulo {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: 0.75rem;
    margin-right: -2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.semana__titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d0d0d0;
}

.semana__layout {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    align-items: start;
}

/* --- Columna de fechas --- */
.fechas {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-right: 1px solid #d0d0d0;
    padding-right: 1rem;
    max-height: 420px;
    overflow-y: auto;

}

/* Los días pasaron de <button> a <a> para poder enlazarlos y compartirlos:
   de ahí el text-decoration, que el botón no necesitaba. */
.fechas__dia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    padding: 0.4rem 0 0.4rem 0.75rem;
    cursor: pointer;
    font-family: var(--font-ui);
    text-decoration: none;
}

.fechas__num {
    font-size: 1.25rem;
    font-weight: 600;
    color: #bbb;
    line-height: 1;
}

.fechas__nombre {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #bbb;
}

.fechas__dia--activo {
    border-left: 2px solid var(--color-magenta);
}

.fechas__dia--activo .fechas__num,
.fechas__dia--activo .fechas__nombre {
    color: var(--color-magenta);
}



/* --- Fila de tarjetas --- */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

.tarjeta {
    cursor: pointer;
    border-left: 1px solid #e8e8e8;
    padding-left: 1.25rem;
}

.tarjeta:first-child {
    border-left: none;
    padding-left: 0;
}

.tarjeta__imagen {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: #f4f4f4;
}

.tarjeta__imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tarjeta__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--color-white);
    padding: 0.4rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.tarjeta__badge-num {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
}

.tarjeta__badge-mes {
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-black);
}

.tarjeta__categoria {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-magenta);
    display: block;
    margin-bottom: 0.4rem;
}

.tarjeta__titulo {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.3;
}

/* ============================================================
   PIE EDITORIAL
============================================================ */
.pie {
    background: var(--color-black);
    color: var(--color-white);
    padding: 4rem 2rem 2rem;
    /*margin-top: 1rem;*/
}

.pie__layout {
    /*max-width: 1400px;
    margin: 0 auto;*/
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #2a2a2a;
}

.pie__logo {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    display: block;
    margin-bottom: 1rem;
}

.pie__claim {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.7;
    color: #999;
}

.pie__titulo {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #777;
    margin-bottom: 1.25rem;
}

.pie__col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pie__link {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-white);
    text-decoration: none;
}

.pie__link:hover {
    color: var(--color-magenta);
}

/* El correo es la acción de esa columna: se destaca sobre la frase que
   lo acompaña, que va en el gris secundario del pie. */
.pie__correo {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    border-bottom: 2px solid var(--color-magenta);
    padding-bottom: 2px;
    margin-bottom: 0.75rem;
}

.pie__correo:hover {
    color: var(--color-magenta);
}

.pie__newsletter {
    display: flex;
    margin-bottom: 1.5rem;
}

.pie__input {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 1px solid #444;
    padding: 0.5rem 0;
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

.pie__input::placeholder {
    color: #777;
}

.pie__boton {
    background: var(--color-magenta);
    border: none;
    color: var(--color-white);
    width: 36px;
    cursor: pointer;
    font-size: 1rem;
}

.pie__redes {
    display: flex;
    gap: 1rem;
}

.pie__red {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    color: #999;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.pie__red:hover {
    color: var(--color-magenta);
}

.pie__legal {
    /*max-width: 1400px;
    margin: 0 auto;*/
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: #777;
}

.pie__legal-links {
    display: flex;
    gap: 1.5rem;
}

.pie__legal-links a {
    color: #777;
    text-decoration: none;
}

.pie__legal-links a:hover {
    color: var(--color-magenta);
}

/* ============================================================
   ARTÍCULO
============================================================ */
.articulo {
    width: clamp(320px, 90vw, 1400px);
    margin: 0 auto;
    padding: 2rem;
}

.articulo__banner {
    position: relative;
    width: 100%;
    height: 550px;
    margin-bottom: 2.5rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* Capa que difumina el fondo, entre el fondo y el cartel */
.articulo__banner::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(40px) brightness(0.75);
}

.articulo__banner img {
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* Escritorio: dos columnas. El DOM va en orden móvil (cabecera · ficha ·
   mapa · cuerpo) y aquí se recoloca por coordenadas de grid. */
.articulo__layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    align-items: start;
}

.articulo__cabecera  { grid-column: 1; grid-row: 1; }
.articulo__contenido { grid-column: 1; grid-row: 2; }

.articulo__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 90px;
}

/* El mapa ya no vive dentro de la tarjeta: bloque hermano debajo. */
.articulo__aside .ficha__mapa {
    margin-top: 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

/* ---- Miga de pan ----------------------------------------------------
   Discreta a propósito: orienta y deja volver, pero no compite con el
   titular. En móvil el título se recorta con puntos suspensivos para
   que no ocupe tres líneas antes de empezar a leer.                    */
.miga {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: #777;
    margin-bottom: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.miga a {
    color: #777;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.miga a:hover {
    color: var(--magenta, #c2185b);
    border-bottom-color: currentColor;
}

.miga__flecha { color: #bbb; }

.miga__actual {
    color: #aaa;
    /* El último escalón no es enlace: ya estás aquí. */
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .miga__actual { max-width: none; }
}

.articulo__categoria {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-magenta);
    display: block;
    margin-bottom: 0.75rem;
}

.articulo__titulo {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-black);
    margin-bottom: 1rem;
}

.articulo__subtitulo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.4;
    color: #555;
    margin-bottom: 2rem;
}

.articulo__cuerpo p {
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
}

.articulo__destacado {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    border-left: 3px solid var(--color-magenta);
    padding-left: 1.5rem;
    margin: 2rem 0;
}

/* ============================================================
   FICHA TICKET
============================================================ */
/* El sticky vive en .articulo__aside (la ficha ya no es la columna). */
.ficha {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.75rem;
    background: var(--color-white);
}

.ficha__top {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.ficha__categoria {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-magenta);
}

.ficha__competicion {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-black);
}

.ficha__datos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ficha__dato {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ficha__etiqueta {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
}

.ficha__valor {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-black);
}

/* El precio compacto de la rejilla 2x2 es exclusivo de móvil. Va DESPUÉS
   de .ficha__dato, que lo pone en flex: con la misma especificidad manda
   la regla que aparece más abajo. */
.ficha__dato--precio {
    display: none;
}

.ficha__separador {
    border-top: 2px dashed #ccc;
    margin: 1.5rem 0;
    position: relative;
}

.ficha__separador::before,
.ficha__separador::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid #e0e0e0;
}

.ficha__separador::before {
    left: -1.75rem;
}

.ficha__separador::after {
    right: -1.75rem;
}

.ficha__precio {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1.25rem;
}

.ficha__precio-etiqueta {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
}

.ficha__precio-valor {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-magenta);
    line-height: 1;
}

.ficha__cta {
    display: block;
    background: var(--color-magenta);
    color: var(--color-white);
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.9rem;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.ficha__mapa {
    border-radius: 6px;
    overflow: hidden;
}

.ficha__mapa iframe {
    width: 100%;
    height: 200px;
    border: none;
    display: block;
}

/* ============================================================
   BARRA INFERIOR FIJA (móvil) — precio + CTA
   Se oculta por clase mientras el CTA de la ficha está a la vista.
============================================================ */
.barra-movil {
    display: none;                    /* se enciende en la media query de móvil */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: transform 0.22s ease;
}

.barra-movil--oculta {
    transform: translateY(110%);
}

.barra-movil__precio {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
}

.barra-movil__etiqueta {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
}

.barra-movil__valor {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-magenta);
}

.barra-movil__cta {
    flex: 1 1 auto;
    max-width: 62%;
    background: var(--color-magenta);
    color: var(--color-white);
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.95rem 1rem;
    text-decoration: none;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .barra-movil {
        transition: none;
    }
}

/* Los eventos sin venta de entradas usan la MISMA ficha que los de
   pago: mismo troquel, mismo bloque grande y mismo botón relleno.
   Solo cambian las palabras (Acceso / Entradas desde, Más información /
   Comprar entradas). Decisión del propietario, 31 jul: dos aspectos
   distintos para lo mismo confundían más de lo que informaban. */

/* ============================================================
   PÁGINAS FIJAS (Quiénes somos, Contacto, Colabora, Publicidad)
   Columna de lectura estrecha: son textos, no fichas.
============================================================ */
.pagina {
    width: clamp(320px, 90vw, 720px);
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

.pagina__titulo {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-black);
    margin-bottom: 1.5rem;
}

.pagina__entradilla {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.4;
    color: #555;
    margin-bottom: 2.5rem;
}

.pagina__subtitulo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--color-black);
    margin: 2.5rem 0 1rem;
}

.pagina p,
.pagina__lista {
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.25rem;
}

.pagina__lista {
    padding-left: 1.25rem;
}

.pagina__lista li {
    margin-bottom: 0.6rem;
}

.pagina a {
    color: var(--color-magenta);
    text-decoration: none;
    border-bottom: 1px solid var(--color-magenta);
}

.pagina a:hover {
    background: var(--color-magenta);
    color: var(--color-white);
}

@media (max-width: 600px) {
    .pagina {
        padding: 2rem 1.25rem 4rem;
    }

    .pagina__titulo {
        font-size: 2.25rem;
    }

    .pagina__entradilla {
        font-size: 1.15rem;
    }
}

/* ============================================================
   EDITOR DEL PANEL
   Formulario del segundo ok. Sobrio a propósito: es herramienta de
   trabajo, no una página que vea nadie de fuera.
============================================================ */
.editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 900px;
    margin-bottom: 3rem;
}

.editor__slug {
    font-family: monospace;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 1.5rem;
}

.editor__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.editor__fila .editor__campo {
    flex: 1 1 200px;
}

.editor__campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.editor__etiqueta {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}

.editor__input {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 0.6rem 0.7rem;
    width: 100%;
}

.editor__input:focus {
    outline: none;
    border-color: var(--color-magenta);
}

.editor__ayuda {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: #999;
}

/* El cuerpo se escribe en párrafos largos: interlínea de lectura, no de
   formulario, para poder revisar el texto mientras se edita. */
.editor__input--cuerpo {
    line-height: 1.7;
    font-size: 0.9rem;
}

.editor__miniatura {
    max-width: 180px;
    max-height: 180px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: block;
}

/* ============================================================
   RESPONSIVE — TABLET (hasta 900px)
============================================================ */
@media (max-width: 900px) {

    .hero__image {
        display: none;
    }

    .hero__content {
        grid-template-columns: 1fr;
        padding-right: 2rem;
    }

    .hero__divider {
        display: none;
    }

    .hero__eyebrow {
        grid-column: 1;
    }

    .hero__title {
        font-size: 3rem;
    }

    .hero__right {
        padding-left: 0;
    }

    .tarjetas {
        grid-template-columns: repeat(2, 1fr);
    }

    .pie__layout {
        grid-template-columns: 1fr 1fr;
    }

    /* Una columna: al soltar las coordenadas del grid, el orden vuelve a ser
       el del DOM (cabecera · ficha · mapa · cuerpo). */
    .articulo__layout {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 2rem;
    }

    .articulo__cabecera,
    .articulo__contenido,
    .articulo__aside {
        grid-column: 1;
        grid-row: auto;
    }

    .articulo__aside {
        position: static;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (hasta 600px)
============================================================ */
@media (max-width: 600px) {

    /* NAVBAR */
    .navbar__logo-sub {
        display: none;
    }

    .navbar__menu {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--color-white);
        border-bottom: 1px solid #e8e8e8;
        padding: 1rem 2rem;
        z-index: 99;
    }

    .navbar__menu--abierto {
        display: flex;
    }

    .navbar__item {
        width: 100%;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* CHIPS: se encienden en móvil */
    .chips {
        display: flex;
    }

    /* HERO */
    .hero__title {
        font-size: 2.25rem;
    }

    /* ESTA SEMANA: tarjetas apiladas */
    .tarjetas {
        grid-template-columns: 1fr;
    }

    .tarjeta {
        border-left: none;
        padding-left: 0;
    }

    .semana__layout {
        grid-template-columns: 1fr;
    }

    /*Fechas: pasan a fila horizontal con scroll*/
    .fechas {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #d0d0d0;
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
    }

    .fechas__dia {
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 0.5rem 0.75rem 0.4rem;
    }

    .fechas__dia--activo {
        border-left: none;
        border-bottom: 2px solid var(--color-magenta);
    }

    /* PIE */
    .pie__layout {
        grid-template-columns: 1fr;
    }

    .pie__legal {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* ============================================================
       ARTÍCULO MÓVIL — primera pantalla transaccional (v1 a medir)
       Objetivo: título + ficha compacta + CTA sin scroll inicial.
       Presupuesto vertical (~660px útiles): navbar 64 + chips 48 +
       banner 160 + título 88 + subtítulo 86 + ficha 190 ≈ 636.
    ============================================================ */
    .articulo {
        padding: 1rem 1.25rem 6rem;   /* hueco inferior para la barra fija */
    }

    .articulo__layout {
        row-gap: 1.5rem;
    }

    /* Banner recortado: cede altura para que quepa la ficha. */
    .articulo__banner {
        height: 160px;
        margin-bottom: 1.25rem;
    }

    .articulo__banner img {
        max-height: 160px;
    }

    .articulo__titulo {
        font-size: 1.9rem;
        margin-bottom: 0.5rem;
    }

    /* Subtítulo a 3 líneas: el contexto largo ya lo da el cuerpo. */
    .articulo__subtitulo {
        font-size: 1.05rem;
        line-height: 1.35;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;              /* la estándar, para cuando toque */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* --- Ficha compacta: rejilla 2x2 del boceto --- */
    .ficha {
        position: relative;
        padding: 1.1rem 1.25rem 1.25rem;
    }

    /* Muescas de entrada a media altura de la tarjeta. */
    .ficha::before,
    .ficha::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        border-radius: 50%;
        background: var(--color-white);
        border: 1px solid #e0e0e0;
    }

    .ficha::before { left: -10px; }
    .ficha::after  { right: -10px; }

    /* Tipo y contexto (gira, temporada) no son datos de decisión. */
    .ficha__top {
        display: none;
    }

    .ficha__datos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem 1rem;
    }

    /* Orden del boceto: fecha | lugar · hora | precio. El DOM va
       fecha · hora · lugar · precio para que escritorio lea seguido;
       el grid respeta 'order'. */
    .ficha__dato--fecha  { order: 1; }
    .ficha__dato--lugar  { order: 2; }
    .ficha__dato--hora   { order: 3; }
    .ficha__dato--precio { order: 4; display: flex; }

    .ficha__dato--lugar,
    .ficha__dato--precio {
        border-left: 1px solid #e8e8e8;
        padding-left: 1rem;
    }

    .ficha__valor {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    /* El troquel y el precio grande sobran: el precio ya está en la
       rejilla y en la barra fija. */
    .ficha__separador,
    .ficha__precio {
        display: none;
    }

    .ficha__cta {
        margin: 1.25rem 0 0;
        padding: 1rem;
        font-size: 0.85rem;
    }

    /* Mapa: fuera de la primera pantalla, con loading="lazy". */
    .articulo__aside .ficha__mapa {
        margin-top: 1.5rem;
    }

    .ficha__mapa iframe {
        height: 180px;
    }

    /* Barra inferior fija: solo se enciende en móvil. */
    .barra-movil {
        display: flex;
    }

    /* TARJETAS MÓVIL: meta con lugar y precio */
    .tarjeta__meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .tarjeta__lugar {
        font-family: var(--font-ui);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #888;
    }

    .tarjeta__precio {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--color-magenta);
    }

    .tarjeta__imagen {
        height: 220px;
    }
}
.tarjeta__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.tarjeta__lugar {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
}

.tarjeta__precio {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-magenta);
}

.tarjeta__badge {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 2;
    }

    a.tarjeta {
    text-decoration: none;
    color: inherit;
    display: block;
}
.ficha__mapa-link {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-magenta);
    text-decoration: none;
    padding-top: 0.5rem;
    text-align: center;
}

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

.ficha__mapa {
    position: relative;
}

.ficha__mapa-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

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

/* ============================================================
   PANEL DE BORRADORES
============================================================ */
.panel {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.panel__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8e8e8;
}

.panel__titulo {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-black);
}

.panel__contador {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel__fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.panel__info {
    flex: 1;
}

.panel__categoria {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-magenta);
    display: block;
    margin-bottom: 0.4rem;
}

.panel__nombre {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: 0.4rem;
}

.panel__subtitulo {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.panel__meta {
    display: flex;
    gap: 1.5rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: #999;
}

.panel__acciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 140px;
}

.panel__btn {
    display: block;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.6rem 1rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
    width: 100%;
}

.panel__btn--ver {
    background: #f0f0f0;
    color: var(--color-black);
}

.panel__btn--publicar {
    background: var(--color-magenta);
    color: var(--color-white);
}

.panel__btn--descartar {
    background: none;
    color: #999;
    border: 1px solid #ddd;
}

.panel__btn--descartar:hover {
    color: #c00;
    border-color: #c00;
}

.panel__vacio {
    padding: 3rem 0;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: #999;
    text-align: center;
}

.panel__miniatura {
    width: 90px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Filas de candidatos ya procesados: presentes pero en segundo plano */
.panel__fila--apagada {
    opacity: 0.6;
}
/* ============================================================
   COMPARTIR E INVITACIÓN AL CANAL
   Van al final del artículo: el lector que llega hasta aquí ya ha
   recibido algo, y es el único momento en que pedirle algo no es
   interrumpirle. En móvil, además, el final del scroll cae en la
   zona del pulgar.
============================================================ */
.compartir {
    border-top: 1px solid #e8e8e8;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compartir__texto {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--color-black);
}

.compartir__acciones {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* 48px de alto: por debajo de eso, un dedo falla. */
.compartir__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.5rem;
    border: 1px solid var(--color-magenta);
    border-radius: 999px;
    background: var(--color-magenta);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
}

.compartir__btn--secundario {
    background: var(--color-white);
    color: var(--color-black);
    border-color: #d0d0d0;
}

/* ============================================================
   LA BURBUJA DEL CANAL
   Forma de mensaje —una esquina sin redondear— porque el destino
   del botón es, literalmente, una conversación. Fondo negro: es el
   mismo salto visual que ya hace el pie, así que la página no
   estrena un color nuevo para esto.
============================================================ */
.canal {
    margin: 2.5rem 0 1rem;
    padding: 1.75rem;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 20px 20px 20px 4px;
}

.canal__hook {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.canal__texto {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #b0b0b0;
    margin-bottom: 1.25rem;
}

.canal__cta {
    display: block;
    min-height: 48px;
    line-height: 48px;
    text-align: center;
    background: var(--color-magenta);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-radius: 999px;
}

/* La objeción —"esto es un grupo que me va a llenar el móvil"— se
   desactiva debajo del botón, no en el gancho: ahí le robaría sitio
   a la promesa, que es lo único que decide si pulsan. */
.canal__nota {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: #777;
    text-align: center;
    margin: 0.75rem 0 0;
}

/* La salida existe y se ve, pero no compite: quien ya está dentro
   la encuentra, y al resto no le grita nada. */
.canal__no {
    display: block;
    margin: 0.9rem auto 0;
    background: none;
    border: none;
    color: #777;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 901px) {
    .compartir {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .canal {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "hook cta" "texto cta";
        align-items: center;
        column-gap: 2rem;
        padding: 2rem 2.25rem;
    }

    .canal__hook  { grid-area: hook; margin-bottom: 0.25rem; }
    .canal__texto { grid-area: texto; margin-bottom: 0; max-width: 42ch; }
    .canal__cta   { grid-area: cta; padding: 0 2rem; }
    .canal__nota  { grid-column: 1 / -1; text-align: left; margin-top: 0.75rem; }
    .canal__no    { grid-column: 1 / -1; margin-left: 0; }
}

/* ============================================================
   REVISIÓN EN EL EDITOR
   Los avisos se leen de un vistazo o no se leen: color, una línea
   por aviso y el dato medido delante. Verde no significa "bien
   escrito", significa "cabe y no repite muletillas".
============================================================ */
.editor__medida {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: #999;
}

/* --- Margen de publicación en el panel de candidatos --------------
   Mismos colores que el corrector del editor: verde vale, ámbar
   avisa, rojo es tarde. Obligar al ojo a aprender dos códigos de
   color distintos en el mismo panel sería pedirle que traduzca.
   El gris no es un aviso: dice "puede esperar". */
/* --- Salud del scraper: solo se pinta cuando hay algo que decir --- */
.salud {
    border-left: 4px solid #b06a00;
    background: #fdf6e8;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0 6px 6px 0;
}

.salud__titulo {
    font-family: var(--font-ui);
    font-weight: 700;
    color: #8a5200;
    margin: 0 0 0.35rem;
}

.salud__titulo + .salud__texto { margin-top: 0; }

.salud__texto {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: #6b4b18;
    margin: 0 0 0.4rem;
}

.salud__texto:last-child { margin-bottom: 0; }

.panel__margen { font-weight: 600; }
.panel__margen--bien  { color: #1a7f3c; }
.panel__margen--aviso { color: #b06a00; }
.panel__margen--mal   { color: #c00; }
.panel__margen--lejos { color: #999; }

.editor__medida--bien  { color: #1a7f3c; }
.editor__medida--aviso { color: #b06a00; }
.editor__medida--mal   { color: #c00; }

.editor__revision {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.5rem;
}

.revision__linea {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: #999;
}

.revision__linea--aviso { color: #b06a00; }
.revision__linea--mal   { color: #c00; font-weight: 600; }

/* ============================================================
   VISTA DE GOOGLE
   Sin imitar su tipografía ni sus colores exactos: lo único que
   importa es dónde corta el texto.
============================================================ */
.serp {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    background: #fafafa;
}

.serp__url {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: #5f6368;
    margin-bottom: 0.25rem;
    word-break: break-all;
}

.serp__titulo {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a0dab;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.serp__desc {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4d5156;
}

/* ============================================================
   DÍA SIN NADA
   Ocupa toda la rejilla de tarjetas para que el hueco deje de
   parecer un error de carga. No usa magenta: no es una llamada
   a la acción, es una explicación.
============================================================ */
.vacio {
    grid-column: 1 / -1;
    border: 1px dashed #d0d0d0;
    border-radius: 12px;
    padding: 2.5rem 1.75rem;
    text-align: center;
}

.vacio__titulo {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--color-black);
    margin-bottom: 0.5rem;
}

.vacio__texto {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.6;
    color: #777;
    max-width: 46ch;
    margin: 0 auto 1.5rem;
}

.vacio__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    border: 1px solid var(--color-black);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

/* El hueco de agenda es también una oportunidad de crowdsourcing:
   es justo lo que mejor hace la competencia. */
.vacio__aviso {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: #999;
    margin-top: 1.5rem;
}

.vacio__aviso a {
    color: var(--color-magenta);
    font-weight: 600;
}

/* ============================================================
   ADÓNDE SEGUIR — al pie del artículo
   Reutiliza las filas del bloque «Más adelante» de la portada, así que
   aquí solo hace falta el marco: la raya de arriba que lo separa del
   cuerpo y el aire para que no parezca parte del texto.
============================================================ */
.seguir {
    border-top: 2px solid var(--color-black);
    padding-top: 1.25rem;
    margin-top: 2.5rem;
}

.seguir .proximos__mes:first-child {
    margin-top: 0;
}

/* Los dos enlaces del pie, con hueco en vez de con un punto separador:
   así el segundo no se parte a mitad dejando el subrayado cortado en
   dos líneas. En el móvil, uno debajo del otro. */
.seguir__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

@media (max-width: 600px) {
    .seguir__enlaces {
        flex-direction: column;
    }
}

/* ============================================================
   PÁGINA DE UN DÍA
============================================================ */

/* --- Titular en dos alturas ---
   Mismas palabras que antes, repartidas. Para Google la frase completa
   sigue dentro del h1, que es lo que posiciona estas páginas; para el
   lector la coletilla se aparta y manda la fecha, que es el dato. En un
   móvil de 460 px eran dos líneas gordas encima de un carrusel que ya
   dice qué día se está viendo. */
.dia__titular {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1.5rem;
}

.dia__titular-que {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #777;
}

.dia__titular-fecha {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-black);
}

/* --- Etiqueta del carrusel ---
   Nombra lo que tiene debajo: la semana. La línea que la acompaña es la
   misma que lleva el título de sección de la portada, para que las dos
   páginas se lean como la misma web. */
.semana__etiqueta {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.semana__etiqueta::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d0d0d0;
}

@media (max-width: 600px) {
    .dia__titular-fecha {
        font-size: 1.65rem;
    }
}

.dia__pasado {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: #777;
    background: #f6f6f6;
    border-left: 3px solid #d0d0d0;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.dia__pasado a,
.dia__volver a {
    color: var(--color-magenta);
    font-weight: 600;
    text-decoration: none;
}

.dia__volver {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    margin-top: 2rem;
}

/* --- Cadena de días: anterior · portada · siguiente --- */
.dia__paso {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8e8e8;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
}

.dia__paso-enlace {
    color: var(--color-black);
    text-decoration: none;
}

.dia__paso-enlace:last-child { text-align: right; }

.dia__paso-centro {
    color: #999;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    text-align: center;
}

.dia__paso a:hover { color: var(--color-magenta); }

/* ============================================================
   MÁS ADELANTE
   Lista y no tarjetas: quince líneas pesan lo que dos tarjetas con
   foto, y el 80% de los lectores entra por el móvil. La franja negra
   de arriba separa el bloque sin cambiar el fondo, que la portada es
   blanca por dogma.
============================================================ */
.proximos {
    padding: 0 2rem 3rem;
}

.proximos__lista,
.proximos__titulo,
.proximos__sub,
.proximos__categorias {
    border-top: 0;
}

.proximos__titulo {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-black);
    border-top: 2px solid var(--color-black);
    padding-top: 1.25rem;
    margin-bottom: 0.2rem;
}

.proximos__sub {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 1.4rem;
}

.proximos__mes {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-magenta);
    margin: 1.4rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eee;
}

.proximos__mes:first-child { margin-top: 0; }

/* La fecha manda, igual que en el carrusel: número grande a la
   izquierda y el resto colgando de él. */
.fila {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.85rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f2f2f2;
    text-decoration: none;
    color: inherit;
}

.fila__dia {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-black);
    text-align: right;
    font-variant-numeric: tabular-nums;   /* que cuadren las columnas */
}

.fila__dia small {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fila__titulo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.25;
    display: block;
}

.fila__lugar {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-top: 0.15rem;
}

.fila:hover .fila__titulo { color: var(--color-magenta); }

.proximos__categorias {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: #999;
    margin-top: 1.75rem;
}

.proximos__categorias span { margin-right: 0.4rem; }

.proximos__categorias a {
    color: var(--color-black);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-magenta);
}

/* En escritorio, dos columnas de BLOQUES, no de texto: cada mes entero
   con su epígrafe. Con `columns` el navegador partía septiembre por la
   mitad y la segunda columna se quedaba sin decir de qué mes era. */
@media (min-width: 901px) {
    .proximos__lista {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 3rem;
        align-items: start;
    }
}

.proximos__grupo .proximos__mes:first-child { margin-top: 0; }

/* --- Las normas del titular, a mano y plegadas --- */
.editor__normas {
    margin-top: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: #888;
}

.editor__normas summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-magenta);
}

.editor__normas ul {
    margin: 0.5rem 0 0 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    line-height: 1.5;
}

/* --- Retirar con destino: plegado y sin color de acento, porque no es
       una acción que deba invitar a pulsarla --- */
.editor__retirar {
    max-width: 900px;
    margin: 2.5rem auto 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8e8e8;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: #888;
}

.editor__retirar summary {
    cursor: pointer;
    font-weight: 600;
    color: #777;
}

.editor__retirar > p { margin: 0.75rem 0 1rem; }

/* --- El cartel en la tarjeta ---
   Los nombres de un festival son la información, no un adorno: quien
   baja por la portada reconoce a un artista o no reconoce nada. Va en
   la tipografía de interfaz y en gris para no competir con el titular,
   pero con tamaño suficiente para leerse de pasada. */
.tarjeta__cartel {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    line-height: 1.45;
    color: #666;
}

/* --- Avisos de la ficha ---
   Ni alarma ni adorno: información práctica. Fondo suave y filete
   ámbar para que se lea sin gritar, y encima del botón de compra
   porque es un dato para decidir, no para después de pagar. */
.ficha__avisos {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    background: #fdf8ef;
    border-left: 3px solid #d9a13b;
    border-radius: 0 6px 6px 0;
}

.ficha__aviso {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b5730;
    margin-top: 0.35rem;
}

.ficha__avisos .ficha__etiqueta { color: #a07b31; }

/* --- Cabecera de las páginas de categoría ---
   Cuatro líneas de texto donde antes solo había tarjetas. El recuento
   se calcula solo; la entradilla está escrita a mano y no lleva fechas
   dentro a propósito, para que no caduque. */
.categoria__recuento {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-magenta);
    margin: -0.25rem 0 0.75rem;
}

/* Va al pie de la parrilla: es un texto para Google más que para el
   lector, así que no le quita sitio a las tarjetas. Se prueba a dos
   columnas y quedaba peor —tres líneas en una y una suelta en la otra—,
   así que columna única y ancho de lectura. */
.categoria__entradilla {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.6;
    color: #777;
    max-width: 75ch;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

/* --- Casillas de días que abre (editor) ---
   No son un campo del formulario: son una calculadora que escribe en el
   campo de fechas de arriba. Por eso van pegadas a él, sin recuadro
   propio: se tiene que leer que una cosa alimenta a la otra, no que son
   dos datos distintos. */
.semanal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.semanal__dia {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    background: var(--color-white);
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    user-select: none;
}

/* Si el navegador no entiende :has(), la casilla marcada se ve igual:
   se pierde el color, no la función. */
.semanal__dia:has(:checked) {
    border-color: var(--color-magenta);
    color: var(--color-magenta);
}

.semanal__btn {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-black);
    background: #f2f2f2;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 0.42rem 0.85rem;
    margin-left: 0.5rem;
    cursor: pointer;
}

.semanal__btn:hover {
    background: #e8e8e8;
    border-color: #b8b8b8;
}

/* El aviso salta de línea entero: cuando dice "35 fechas escritas" no
   debe empujar las casillas ni partirse a mitad en el móvil. */
#semanal-aviso {
    flex-basis: 100%;
    margin-top: 0.15rem;
}

/* ============================================================
   EL FIN DE SEMANA
   Tres dias apilados en la misma columna de la rejilla. Estas
   reglas SOLO separan un dia del siguiente: las tarjetas, el
   rotulo y el carrusel son los de siempre, sin tocar nada.
   ============================================================ */
.finde__jornada { margin-bottom: 2.75rem; }
.finde__jornada:last-child { margin-bottom: 0; }

/* El rotulo del dia es un enlace a su pagina, pero se lee igual
   que el rotulo de la portada: no debe parecer otro elemento. */
.finde__jornada .semana__etiqueta a { color: inherit; text-decoration: none; }
.finde__jornada .semana__etiqueta a:hover { text-decoration: underline; }

.finde__hueco { font-family: var(--font-ui); font-size: 0.95rem; color: #777; margin: 0; }

/* La invitacion de la portada al fin de semana. */
.semana__finde { font-family: var(--font-ui); font-size: 0.9rem; margin: -0.5rem 0 1.5rem; }
.semana__finde a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }


/* ============================================================
   BARRA DEL PANEL
   Las paginas de trabajo en un sitio. Se pega arriba al hacer scroll
   porque las listas del panel son largas y volver arriba para cambiar
   de pagina es justo lo que se queria evitar.
   ============================================================ */
.panelnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e8e8e8;
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 5;
    padding-top: 0.75rem;
}

.panelnav__enlace {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
}

.panelnav__enlace:hover { color: var(--color-black); background: #f5f5f5; }

.panelnav__enlace--activa {
    color: var(--color-white);
    background: var(--color-magenta);
}

.panelnav__enlace--activa:hover {
    color: var(--color-white);
    background: var(--color-magenta);
}

/* Separado del resto: no es una pagina del panel, es salir de el. */
.panelnav__enlace--fuera { margin-left: auto; }