/* ==========================================================================
   En Titulares — sitio público
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video { max-width: 100%; height: auto; display: block; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--lh-tight);
    margin: 0 0 var(--sp-3);
    letter-spacing: -.01em;
}

p { margin: 0 0 var(--sp-4); }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; cursor: pointer; }

/* El anillo de foco nunca se elimina: es la única señal de posición para
   quien navega con teclado. */
:focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    z-index: var(--z-toast);
    background: var(--brand-ink);
    color: var(--text-invert);
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 600;
    transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   2. Cabecera
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--dark);
    color: #C9CDD2;
    font-size: var(--fs-xs);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 36px;
}
.topbar__date { text-transform: capitalize; }
.topbar__social { display: flex; gap: var(--sp-1); }
.topbar__social a {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;      /* área táctil ampliada bajo el icono */
    border-radius: var(--radius-sm);
    color: #C9CDD2;
}
.topbar__social a:hover { background: var(--dark-line); color: #fff; }
.topbar__social svg { width: 15px; height: 15px; fill: currentColor; }

.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding-block: var(--sp-5);
}
.masthead__logo img { max-height: 62px; width: auto; }
.masthead__logo-text {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.02em;
}
.masthead__logo-text span { color: var(--brand-ink); }

.search-inline { display: flex; align-items: center; gap: var(--sp-2); }
.search-inline input[type="search"] {
    width: 240px;
    padding: 10px var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    background: var(--surface-alt);
    color: var(--text);
    min-height: 44px;
}
.search-inline input::placeholder { color: var(--text-muted); }
.search-inline button {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: var(--radius-full);
    background: var(--brand-ink);
    color: #fff;
    transition: background var(--dur-fast) var(--ease-out);
}
.search-inline button:hover { background: var(--brand-ink-hover); }
.search-inline svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Navegación --- */

.mainnav {
    background: var(--brand-ink);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-shadow: var(--shadow-sm);
}
.mainnav__inner { display: flex; align-items: center; gap: var(--sp-2); }

.mainnav__list {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    flex: 1;
}
.mainnav__list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--sp-4);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    position: relative;
}
.mainnav__list a:hover,
.mainnav__list a:focus-visible { background: rgba(0, 0, 0, .16); }

/* La página actual se marca con barra inferior además del fondo: el color
   por sí solo no basta como indicador. */
.mainnav__list a[aria-current="page"] { background: rgba(0, 0, 0, .22); }
.mainnav__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--sp-3);
    bottom: 0;
    height: 3px;
    background: #fff;
    border-radius: 2px 2px 0 0;
}

.mainnav__toggle {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding-inline: var(--sp-3);
    background: transparent;
    border: 0;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.mainnav__toggle svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 900px) {
    .mainnav__toggle { display: flex; }

    .mainnav__list {
        display: none;
        flex-direction: column;
        width: 100%;
        padding-block: var(--sp-2);
        border-top: 1px solid rgba(255, 255, 255, .18);
    }
    .mainnav__list.is-open { display: flex; }
    .mainnav__inner { flex-wrap: wrap; }
    .mainnav__list a { width: 100%; }
    .mainnav__list a[aria-current="page"]::after { display: none; }

    .masthead__inner { flex-direction: column; gap: var(--sp-4); }
    .search-inline input[type="search"] { width: 100%; }
    .search-inline { width: 100%; }
}

/* --------------------------------------------------------------------------
   3. Etiquetas de categoría
   -------------------------------------------------------------------------- */

.cat-badge {
    display: inline-block;
    padding: 4px 9px;
    background: var(--brand-ink);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}
.cat-badge:hover { filter: brightness(.9); }

/* --------------------------------------------------------------------------
   4. Tarjetas de noticia
   -------------------------------------------------------------------------- */

.card {
    /* .card__badge (position:absolute) es hermano de .card__media, no su
       hijo, así que ancla contra el .card más cercano. Sin position:relative
       aquí, un badge en cualquier tarjeta que no sea --hero (que sí lo
       define) sube por el árbol hasta <body> y todos los badges de la
       página terminan apilados en la esquina superior izquierda. */
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.card__media {
    position: relative;
    display: block;
    background: var(--line);
    /* La proporción se reserva antes de cargar para que el texto de abajo
       no salte cuando llega la imagen. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }

.card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }

.card__title {
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    margin: 0;
}
.card__title a:hover { color: var(--brand-ink); }

.card__excerpt {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--lh-normal);
}

.card__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding-top: var(--sp-1);
}
.card__meta a:hover { color: var(--brand-ink); }
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

/* --- Tarjeta destacada con superposición --- */

.card--hero { position: relative; border-radius: var(--radius); min-height: 420px; }
.card--hero .card__media { aspect-ratio: auto; position: absolute; inset: 0; }
.card--hero .card__body {
    position: relative;
    justify-content: flex-end;
    padding: var(--sp-6);
    /* Degradado en lugar de una capa plana: mantiene visible la foto y
       garantiza contraste del texto sobre cualquier imagen. */
    background: linear-gradient(to top,
        rgba(15, 17, 20, .92) 0%,
        rgba(15, 17, 20, .78) 35%,
        rgba(15, 17, 20, .18) 70%,
        rgba(15, 17, 20, 0) 100%);
    color: #fff;
    min-height: 420px;
}
/* Solo titular, sin bajada ni autor/fecha (card.php lo omite por completo
   para esta variante) — de ahí que aquí no queden reglas para
   .card__meta/.card__excerpt en hero: nunca llegan a renderizarse. */
.card--hero .card__title { font-size: var(--fs-xl); color: #fff; }
.card--hero .card__title a:hover { color: #FFD5DE; }

/* --- Tarjeta con imagen y titular superpuesto (para carruseles) ---
   Mismo principio visual que el hero —foto de fondo, degradado, texto
   encima— pero a la escala de una tarjeta de grilla: la altura la marca
   aspect-ratio (16:9, o 1:1 con .card--square), no un min-height fijo,
   para que se adapte al ancho variable de cada tarjeta del carrusel. */
.card--overlay { aspect-ratio: 16 / 9; }
.card--overlay.card--square { aspect-ratio: 1 / 1; }
.card--overlay .card__media { aspect-ratio: auto; position: absolute; inset: 0; }
.card--overlay .card__media img { object-fit: cover; }
.card--overlay .card__body {
    position: relative;
    justify-content: flex-end;
    padding: var(--sp-4);
    background: linear-gradient(to top,
        rgba(15, 17, 20, .88) 0%,
        rgba(15, 17, 20, .55) 45%,
        rgba(15, 17, 20, 0) 100%);
    color: #fff;
}
.card--overlay .card__title { font-size: var(--fs-md); color: #fff; }
.card--overlay .card__title a:hover { color: #FFD5DE; }

/* .card__body ocupa el alto completo de la tarjeta en hero/overlay (flex:1
   dentro de una tarjeta de alto fijo), incluida la franja transparente del
   degradado por encima del titular. Al quedar por delante de .card__media
   en el orden de apilamiento, ese div —sin ningún link propio ahí arriba—
   se comía el clic en toda esa zona: la foto, que es la mayor parte de la
   tarjeta, no llevaba a ninguna parte y solo funcionaba el texto exacto
   del titular. Se anulan los eventos de puntero en el body y se
   reactivan solo en sus enlaces, así el click en cualquier punto de la
   tarjeta cae directo en el <a> de .card__media que está debajo. */
.card--hero .card__body,
.card--overlay .card__body { pointer-events: none; }
.card--hero .card__body a,
.card--overlay .card__body a { pointer-events: auto; }

/* --- Tarjeta horizontal compacta --- */

.card--row {
    flex-direction: row;
    gap: var(--sp-3);
    background: transparent;
    box-shadow: none;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.card--row:hover { transform: none; box-shadow: none; }
.card--row:last-child { border-bottom: 0; }
.card--row .card__media { width: 108px; flex: 0 0 108px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.card--row .card__body { padding: 0; gap: var(--sp-1); }
.card--row .card__title { font-size: var(--fs-sm); font-weight: 600; }

/* --- Tarjeta sin imagen --- */
.card--text .card__media { display: none; }

/* --- Tarjeta destacada de listado (cabecera de categoría) ---
   Igual que la tarjeta normal (imagen arriba, cuerpo abajo) pero en fila,
   a todo el ancho, para que la primera noticia de la categoría destaque
   claramente sobre la grilla de a dos que viene después. */
.card--lead { flex-direction: row; }
.card--lead .card__media { width: 46%; flex: 0 0 46%; aspect-ratio: 4 / 3; }
.card--lead .card__body { padding: var(--sp-6); justify-content: center; gap: var(--sp-3); }
.card--lead .card__title { font-size: var(--fs-xl); line-height: var(--lh-snug); }
.card--lead .card__excerpt { font-size: var(--fs-base); }

@media (max-width: 767px) {
    .card--lead { flex-direction: column; }
    .card--lead .card__media { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; }
    .card--lead .card__body { padding: var(--sp-4); }
    .card--lead .card__title { font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------------
   5. Bloques de sección
   -------------------------------------------------------------------------- */

.section { margin-block: var(--sp-10); }

.section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 2px solid var(--line);
    padding-bottom: var(--sp-2);
}

.section__title {
    font-size: var(--fs-lg);
    margin: 0;
    position: relative;
    padding-bottom: var(--sp-2);
    /* Mismo color que la etiqueta de la categoría, no solo el filete de
       abajo. En un par de categorías con tono muy claro (Deportes,
       Cultura & Espectáculos) el contraste contra el fondo queda por
       debajo de 3:1 — heredado del color de marca de esas categorías,
       no algo que se pueda arreglar sin cambiar esos colores. */
    color: var(--accent, var(--text));
}
/* El filete inferior toma el color de la categoría vía --accent. */
.section__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--accent, var(--brand-ink));
    border-radius: 2px;
}

.section__more {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding-inline: var(--sp-2);
}
.section__more:hover { color: var(--brand-ink-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Rejillas
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.archive-featured { margin-bottom: var(--sp-6); }

/* Portada: bloque de categoría = 1 destacada grande + lista lateral */
.block-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-6); }

/* Estructura principal contenido + barra lateral */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; }

@media (max-width: 1023px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .layout { grid-template-columns: 1fr; }
    .block-split { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }
    .card--hero,
    .card--hero .card__body { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   7. Portada — bloque principal
   -------------------------------------------------------------------------- */

.hero { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); margin-block: var(--sp-6); }
.hero__side { display: grid; grid-template-rows: repeat(2, 1fr); gap: var(--sp-5); }
.hero__side .card--hero,
.hero__side .card--hero .card__body { min-height: 200px; }
.hero__side .card--hero .card__title { font-size: var(--fs-sm); }

@media (max-width: 899px) {
    .hero { grid-template-columns: 1fr; }
    .hero__side { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
    .hero__side { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Barra lateral
   -------------------------------------------------------------------------- */

.sidebar { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 72px; }

.sidebar-ad {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sidebar-ad:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.sidebar-ad img { width: 100%; height: auto; display: block; }

.widget { background: var(--surface); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.widget__title {
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--brand-ink);
}

.ranked { list-style: none; counter-reset: rank; }
.ranked li {
    counter-increment: rank;
    display: flex;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line);
}
.ranked li:last-child { border-bottom: 0; padding-bottom: 0; }
.ranked li::before {
    content: counter(rank);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--brand);
    line-height: 1;
    min-width: 24px;
}
.ranked a { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.ranked a:hover { color: var(--brand-ink); }
.ranked time { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; margin-top: var(--sp-1); }

@media (max-width: 1023px) {
    .sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   9. Detalle de noticia
   -------------------------------------------------------------------------- */

.article { background: var(--surface); border-radius: var(--radius); padding: var(--sp-8); box-shadow: var(--shadow-sm); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "›"; color: var(--line-strong); }
.breadcrumb a:hover { color: var(--brand-ink); text-decoration: underline; }

.article__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }

.article__lead {
    font-size: var(--fs-md);
    color: var(--text-muted);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-5);
    padding-left: var(--sp-4);
    border-left: 3px solid var(--brand);
}

.article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding-block: var(--sp-4);
    border-block: 1px solid var(--line);
    margin-bottom: var(--sp-6);
}
.article__author { font-weight: 600; color: var(--text); }

.article__figure { margin: 0 0 var(--sp-6); }
.article__figure img { width: 100%; border-radius: var(--radius); }
.article__figure figcaption { font-size: var(--fs-xs); color: var(--text-muted); padding-top: var(--sp-2); }

/* --- Cuerpo del texto --- */

.prose {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    /* Medida de lectura: por encima de ~75 caracteres el ojo pierde el
       renglón al volver al margen izquierdo. */
    max-width: 68ch;
}
.prose p { margin-bottom: var(--sp-5); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand-ink-hover); }
.prose ul, .prose ol { margin: 0 0 var(--sp-5) var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); }
.prose img { border-radius: var(--radius); margin-block: var(--sp-5); }
.prose figure { margin: var(--sp-6) 0; }
.prose figcaption { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; padding-top: var(--sp-2); }
.prose blockquote {
    margin: var(--sp-6) 0;
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--brand);
    background: var(--surface-alt);
    font-size: var(--fs-lg);
    font-family: var(--font-heading);
    color: var(--text);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose iframe { max-width: 100%; border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); text-align: left; }
.prose th { background: var(--surface-alt); font-weight: 600; }

/* Las tablas anchas se desplazan dentro de su caja, nunca la página. */
.table-scroll { overflow-x: auto; }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.share__label { font-size: var(--fs-sm); font-weight: 600; margin-right: var(--sp-2); }
.share a, .share button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding-inline: var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}
.share a:hover, .share button:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.share svg { width: 16px; height: 16px; fill: currentColor; }

.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
.postnav a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.postnav a:hover { border-color: var(--brand); }
.postnav span { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.postnav strong { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.postnav .is-next { text-align: right; }

@media (max-width: 767px) {
    .article { padding: var(--sp-5); }
    .postnav { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Cabecera de archivo (categoría / autor / búsqueda)
   -------------------------------------------------------------------------- */

.archive-head {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    border-left: 5px solid var(--accent, var(--brand-ink));
    box-shadow: var(--shadow-sm);
}
.archive-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.archive-head p { color: var(--text-muted); margin: 0; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   11. Paginación
   -------------------------------------------------------------------------- */

.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-block: var(--sp-8); list-style: none; }
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.pagination [aria-current="page"] { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.pagination .is-gap { border: 0; background: transparent; min-width: auto; }

/* --------------------------------------------------------------------------
   12. Estados vacíos y avisos
   -------------------------------------------------------------------------- */

.empty {
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
}
.empty svg { width: 56px; height: 56px; fill: var(--line-strong); margin-bottom: var(--sp-4); }
.empty h2 { font-size: var(--fs-lg); }
.empty p { color: var(--text-muted); max-width: 46ch; margin-inline: auto; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--brand-ink);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--brand-ink-hover); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: var(--surface-alt); border-color: var(--brand); color: var(--brand-ink); }

/* --------------------------------------------------------------------------
   13. Pie
   -------------------------------------------------------------------------- */

.footer {
    background: var(--surface);
    color: var(--text-muted);
    margin-top: var(--sp-16);
    /* El pie ya no tiene un fondo oscuro que lo separe visualmente del
       contenido: el filete cumple ese rol ahora. */
    border-top: 1px solid var(--line);
}
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--brand-ink); }

.footer__top { display: flex; justify-content: center; padding-block: var(--sp-10); }
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo img { max-height: 48px; width: auto; }
.footer__brand-name { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 600; color: var(--text); }
.footer__brand-name span { color: var(--brand-ink); }

.footer__bottom {
    border-top: 1px solid var(--line);
    padding-block: var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .footer__top { padding-block: var(--sp-8); }
    .footer__bottom { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   14. Carrusel de categoría
   --------------------------------------------------------------------------
   El número de tarjetas visibles se fija por CSS con [data-per-view] +
   media queries; el JS (site.js) solo mide el ancho real ya renderizado
   para saber cuánto desplazar el track y cuántas páginas/puntos generar,
   así que un mismo bloque de estilos vale para cualquier cantidad. */

.slider__viewport {
    overflow: hidden;
    cursor: grab;
    /* Permite que el scroll vertical de la página siga funcionando con el
       dedo; solo el arrastre horizontal lo captura el JS del carrusel. */
    touch-action: pan-y;
}
.slider__viewport:active { cursor: grabbing; }

.slider__track {
    list-style: none;
    display: flex;
    gap: var(--sp-5);
    padding: 0;
    margin: 0;
    /* JS ajusta el transform en cada cambio de página; con JS desactivado
       el track no se mueve, pero al ser flex + overflow:hidden en el
       viewport las tarjetas restantes simplemente no se ven, en vez de
       romper el layout. */
    transition: transform var(--dur-slow) var(--ease-out);
}

.slider__item { flex: 0 0 auto; min-width: 0; }

/* Escritorio: el ancho por tarjeta lo marca perView (2 o 3 según el bloque). */
.slider[data-per-view="2"] .slider__item { width: calc((100% - var(--sp-5)) / 2); }
.slider[data-per-view="3"] .slider__item { width: calc((100% - 2 * var(--sp-5)) / 3); }

/* Tablet: nunca más de 2 por fila, aunque el bloque pida 3. */
@media (max-width: 1023px) {
    .slider[data-per-view] .slider__item { width: calc((100% - var(--sp-4)) / 2); }
}

/* Móvil: una tarjeta casi completa, con una porción de la siguiente
   asomando — la misma señal visual que usan los carruseles nativos para
   indicar que hay más contenido al deslizar. */
@media (max-width: 599px) {
    .slider[data-per-view] .slider__item { width: 86%; }
    .slider__track { gap: var(--sp-3); }
}

.slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}

.slider__arrow {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}
.slider__arrow:hover { border-color: var(--accent, var(--brand-ink)); color: var(--accent, var(--brand-ink)); }
.slider__arrow svg { width: 18px; height: 18px; fill: currentColor; }
/* Deshabilitado en el extremo del recorrido, no oculto: perder el botón
   de golpe desorienta más que verlo apagado. */
.slider__arrow:disabled { opacity: .35; cursor: not-allowed; }

.slider__dots { display: flex; align-items: center; gap: var(--sp-1); }

/* El botón real mide 32px (el punto visible es más chico, centrado por
   ::after): así el área de toque no depende del tamaño del punto que se
   ve, que sí queda pequeño a propósito para no competir con las tarjetas. */
.slider__dot {
    position: relative;
    width: 32px; height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
}
.slider__dot::after {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: width var(--dur) var(--ease-out),
                border-radius var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}
.slider__dot:hover::after { background: var(--text-faint); }
.slider__dot[aria-selected="true"]::after {
    width: 22px;
    border-radius: var(--radius-full);
    background: var(--accent, var(--brand-ink));
}

/* --------------------------------------------------------------------------
   14b. Volver arriba
   -------------------------------------------------------------------------- */

.to-top {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: var(--z-sticky);
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: var(--brand-ink);
    color: #fff;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; fill: currentColor; }

/* --------------------------------------------------------------------------
   15. Impresión
   -------------------------------------------------------------------------- */

@media print {
    .topbar, .mainnav, .footer, .sidebar, .share, .postnav, .to-top, .search-inline, .slider__nav { display: none !important; }
    .slider__track { flex-wrap: wrap; transform: none !important; }
    .slider__item { width: 100% !important; }
    body { background: #fff; }
    .article { box-shadow: none; padding: 0; }
    .prose { max-width: none; font-size: 12pt; }
    .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}