/* =============================================================================
   XCMS v2 — Template Default
   ============================================================================= */

/* ---- Variables (defaults, sobreescritas por inyección del sitio) ---------- */
:root {
    --color-primary:       #0066cc;
    --color-secondary:     #111827;
    --color-accent:        #e55a00;
    --color-primary-dark:  #004fa3;
    --color-bg:            #f4f5f9;
    --color-surface:       #ffffff;
    --color-surface-2:     #f0f2f8;
    --color-border:        #e2e6f0;
    --color-text:          #111827;
    --color-text-muted:    #6b7280;
    --color-text-light:    #9ca3af;
    --font:                'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-serif:          Georgia, 'Times New Roman', serif;
    --radius:              10px;
    --radius-sm:           6px;
    --shadow:              0 4px 24px rgba(0,0,0,.09);
    --shadow-sm:           0 1px 6px rgba(0,0,0,.06);
    --transition:          .18s ease;
    --container:           1180px;
    --gutter:                1.25rem;
    --gap:                 1.5rem;
    --nav-h:               48px;
    --sidebar-sticky-top:    calc(var(--nav-h) + 1rem);
    --sidebar-sticky-bottom: 1rem;
    --radio-player-h:        0px;
    --color-header-bg:     var(--color-secondary);
    --color-header-fg:     #ffffff;
    --color-header-fg-muted: rgba(255,255,255,.75);
    --color-header-fg-subtle: rgba(255,255,255,.45);
    --color-header-border: rgba(255,255,255,.15);
    --color-header-surface: rgba(255,255,255,.10);
    --color-header-surface-hover: rgba(255,255,255,.16);
    --color-nav-bg:        var(--color-secondary);
    --color-nav-fg:        #ffffff;
    --color-nav-fg-muted:  rgba(255,255,255,.78);
    --color-nav-fg-subtle: rgba(255,255,255,.45);
    --color-nav-border:    rgba(255,255,255,.15);
    --color-nav-surface:   rgba(255,255,255,.06);
    --color-nav-surface-hover: rgba(255,255,255,.10);
    --color-footer-bg:     var(--color-secondary);
    --color-footer-fg:     #ffffff;
    --color-footer-fg-muted: rgba(255,255,255,.75);
    --color-footer-fg-subtle: rgba(255,255,255,.45);
    --color-footer-border: rgba(255,255,255,.08);
    --color-footer-surface: rgba(255,255,255,.10);
    --color-footer-surface-hover: rgba(255,255,255,.16);
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; scroll-behavior: smooth; }

/* Navegación AJAX: sin animación al volver arriba (radio.js añade la clase) */
html.xcms-instant-scroll {
    scroll-behavior: auto !important;
}
body  { font-family: var(--font); background: var(--color-bg); color: var(--color-text);
        line-height: 1.65; -webkit-font-smoothing: antialiased;
        display: flex; flex-direction: column; min-height: 100vh; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--color-primary); text-decoration: none;
        transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
ul, ol { list-style: none; }
button { font-family: var(--font); cursor: pointer; }

/* ---- Contenedor ---------------------------------------------------------- */
.container { width:100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Main content area --------------------------------------------------- */
#main-content { flex: 1; padding-top: 2rem; padding-bottom: 3.5rem; }

/* =============================================================================
   HEADER (3 columnas: redes | logo centrado | buscador)
   ============================================================================= */
.site-header {
    background: var(--color-header-bg);
    padding:    .75rem 0;
}

.site-header__inner {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   1.25rem;
}

/* Redes sociales del header */
.header-social {
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

.header-social__link {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         32px;
    height:        32px;
    border-radius: 50%;
    background:    var(--color-header-surface);
    color:         var(--color-header-fg-muted);
    transition:    background var(--transition), color var(--transition);
}
.header-social__link:hover {
    background: var(--color-primary);
    color:      #fff;
}
.header-social__link svg { display: block; }

/* Logo (centrado por grid) */
.site-logo {
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-logo img {
    max-width:  500px;
    max-height: 80px;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

.site-logo__text {
    font-size:   1.6rem;
    font-weight: 800;
    color:       var(--color-header-fg);
    letter-spacing: -.02em;
}

/* Buscador del header */
.header-search {
    display:         flex;
    gap:             .35rem;
    justify-content: flex-end;
    max-width:       380px;
    margin-left:     auto;
}

.header-search input {
    flex:          1;
    padding:       .5rem 1rem;
    border:        1px solid var(--color-header-border);
    border-radius: 100px;
    background:    var(--color-header-surface);
    color:         var(--color-header-fg);
    font-size:     .88rem;
    outline:       none;
    min-width:     0;
    transition:    background var(--transition), border-color var(--transition);
}
.header-search input::placeholder { color: var(--color-header-fg-subtle); }
.header-search input:focus {
    background:   var(--color-header-surface-hover);
    border-color: var(--color-header-border);
}

.header-search button {
    padding:       .5rem .85rem;
    background:    var(--color-primary);
    border:        none;
    border-radius: 100px;
    color:         #fff;
    display:       flex;
    align-items:   center;
    transition:    background var(--transition);
}
.header-search button:hover { background: var(--color-primary-dark); }

/* =============================================================================
   MOBILE BOTTOM BAR (menú tipo app — solo mobile)
   ============================================================================= */
.mobile-bottom-bar {
    display:    none;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    300;
    background: var(--color-nav-bg);
    box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    justify-content: space-around;
    align-items:     center;
    padding:    .35rem 0 calc(.35rem + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-bar__item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .15rem;
    padding:        .35rem .75rem;
    color:          var(--color-nav-fg-muted);
    font-size:      .65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background:     none;
    border:         none;
    cursor:         pointer;
    transition:     color var(--transition);
}
.mobile-bottom-bar__item:hover,
.mobile-bottom-bar__item.is-active {
    color: var(--color-nav-fg);
}
.mobile-bottom-bar__item.is-active svg {
    color: var(--color-accent);
}

.mobile-bottom-bar__item--radio .mobile-radio-icon-pause {
    display: none;
}

.mobile-bottom-bar__item--radio.is-playing .mobile-radio-icon-play {
    display: none;
}

.mobile-bottom-bar__item--radio.is-playing .mobile-radio-icon-pause {
    display: block;
}

.mobile-bottom-bar__item--radio.is-playing {
    color: var(--color-accent);
}

/* Panel de categorías mobile */
.mobile-cats-panel {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    301;
    background: var(--color-surface);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 30px rgba(0,0,0,.2);
    transform:  translateY(100%);
    transition: transform .3s ease;
    max-height: 70vh;
    overflow-y: auto;
}
.mobile-cats-panel.is-open { transform: translateY(0); }

.mobile-cats-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--color-text);
    border-bottom:   1px solid var(--color-border);
    position:        sticky;
    top:             0;
    background:      var(--color-surface);
}
.mobile-cats-panel__header button {
    background: none;
    border:     none;
    font-size:  1.5rem;
    color:      var(--color-text-muted);
    padding:    .25rem;
    line-height: 1;
}

.mobile-cats-panel__list li a {
    display:     block;
    padding:     .85rem 1.25rem;
    color:       var(--color-text);
    font-size:   .95rem;
    border-bottom: 1px solid var(--color-border);
    transition:  background var(--transition);
}
.mobile-cats-panel__list li:last-child a { border-bottom: none; }
.mobile-cats-panel__list li a:hover { background: var(--color-surface-2); }

/* Buscador mobile (panel deslizante) */
.mobile-search-panel {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    301;
    background: var(--color-header-bg);
    padding:    .75rem 1rem;
    transform:  translateY(-100%);
    transition: transform .3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.mobile-search-panel.is-open { transform: translateY(0); }

.mobile-search-panel__form {
    display:     flex;
    gap:         .5rem;
    align-items: center;
}
.mobile-search-panel__form input {
    flex:          1;
    padding:       .65rem 1rem;
    border:        1px solid var(--color-header-border);
    border-radius: 100px;
    background:    var(--color-header-surface);
    color:         var(--color-header-fg);
    font-size:     .95rem;
    outline:       none;
}
.mobile-search-panel__form input::placeholder { color: var(--color-header-fg-subtle); }
.mobile-search-panel__form button[type="submit"] {
    padding:       .6rem .85rem;
    background:    var(--color-primary);
    border:        none;
    border-radius: 100px;
    color:         #fff;
    display:       flex;
    align-items:   center;
}
.mobile-search-panel__close {
    background: none;
    border:     none;
    color:      var(--color-header-fg-muted);
    font-size:  1.5rem;
    padding:    .25rem;
    line-height: 1;
}

/* Overlay para paneles mobile */
.mobile-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    299;
    background: rgba(0,0,0,.5);
}
.mobile-overlay.is-visible { display: block; }

/* =============================================================================
   NAVBAR (sticky — solo este queda fijo al scrollear)
   ============================================================================= */
.site-nav {
    background: var(--color-nav-bg);
    position:   sticky;
    top:        0;
    z-index:    200;
    height:     var(--nav-h);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    transition: transform .25s ease, box-shadow .25s ease;
}

.site-nav.is-hidden { transform: translateY(-100%); }

.site-nav__favicon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           0;
    height:          28px;
    margin-right:    0;
    border-radius:   4px;
    overflow:        hidden;
    opacity:         0;
    pointer-events:  none;
    transition:      width .2s ease, margin-right .2s ease, opacity .2s ease;
}

.site-nav__favicon img {
    width:      28px;
    height:     28px;
    object-fit: contain;
}

.site-nav.is-stuck .site-nav__favicon {
    width:          28px;
    margin-right:   .35rem;
    opacity:        1;
    pointer-events: auto;
}

.site-nav__inner {
    display:     flex;
    align-items: center;
    height:      100%;
    gap:         .25rem;
}

.site-nav__search {
    display:         flex;
    align-items:     center;
    gap:             .35rem;
    flex-shrink:     0;
    width:           0;
    margin-left:     auto;
    opacity:         0;
    overflow:        hidden;
    pointer-events:  none;
    transition:      width .25s ease, opacity .2s ease, margin-left .2s ease;
}

.site-nav__search input {
    flex:          1;
    min-width:     0;
    width:         100%;
    padding:       .42rem .85rem;
    border:        1px solid var(--color-nav-border);
    border-radius: 100px;
    background:    var(--color-nav-surface);
    color:         var(--color-nav-fg);
    font-size:     .82rem;
    outline:       none;
    transition:    background var(--transition), border-color var(--transition);
}

.site-nav__search input::placeholder {
    color: var(--color-nav-fg-subtle);
}

.site-nav__search input:focus {
    background:   var(--color-nav-surface-hover);
    border-color: color-mix(in srgb, var(--color-nav-fg) 25%, transparent);
}

.site-nav__search button {
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    padding:       .42rem .7rem;
    border:        none;
    border-radius: 100px;
    background:    var(--color-primary);
    color:         #fff;
    cursor:        pointer;
    transition:    background var(--transition);
}

.site-nav__search button:hover {
    background: var(--color-primary-dark);
}

.site-nav.is-stuck .site-nav__search {
    width:          min(240px, 26vw);
    opacity:        1;
    pointer-events: auto;
}

/* Lista de nav */
.nav-list {
    display:     flex;
    align-items: stretch;
    height:      100%;
    gap:         0;
    flex:        1;
    min-width:   0;
    overflow-x:  auto;
    scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }

.nav-item {
    position:    relative;
    display:     flex;
    align-items: center;
}

.nav-link {
    display:     flex;
    align-items: center;
    padding:     0 .95rem;
    height:      100%;
    color:       var(--color-nav-fg-muted);
    font-size:   .875rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition:  color var(--transition), border-color var(--transition),
                 background var(--transition);
}
.nav-link:hover,
.nav-item.is-active .nav-link {
    color:         var(--color-nav-fg);
    border-color:  var(--color-accent);
    background:    var(--color-nav-surface);
}

/* Submenú */
.nav-item.has-submenu .nav-link::after {
    content:     ' ▾';
    font-size:   .7rem;
    margin-left: .25rem;
    opacity:     .6;
}

.nav-submenu {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    min-width:     200px;
    background:    var(--color-nav-bg);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow:    var(--shadow);
    padding:       .4rem 0;
    z-index:       201;
}

.nav-item.has-submenu:hover .nav-submenu { display: block; }

.nav-submenu li a {
    display:    block;
    padding:    .6rem 1.1rem;
    color:      var(--color-nav-fg-muted);
    font-size:  .85rem;
    transition: background var(--transition), color var(--transition);
}
.nav-submenu li a:hover { background: var(--color-nav-surface-hover); color: var(--color-nav-fg); }

/* Hamburguesa */
.nav-toggle {
    display:    none;
    background: none;
    border:     none;
    color:      var(--color-nav-fg);
    padding:    .35rem .5rem;
    flex-direction: column;
    gap:        5px;
    margin-left: auto;
}
.nav-toggle span {
    display:      block;
    width:        22px;
    height:       2px;
    background:   var(--color-nav-fg);
    border-radius:2px;
    transition:   transform .2s, opacity .2s;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   LAYOUT CON SIDEBAR
   ============================================================================= */
.home-layout {
    display: grid;
    gap:     2rem;
}
.home-layout--with-sidebar {
    grid-template-columns: 1fr 320px;
    align-items:           start;
}
.home-layout--no-sidebar {
    grid-template-columns: 1fr;
}

/* Bloques de portada a ancho completo (antes de la sidebar) */
.home-full-width {
    margin-bottom: 2rem;
}

/* Layout interno con sidebar (artículos, categorías, etc.) */
.page-layout {
    display: grid;
    gap:     2rem;
}
.page-layout--with-sidebar {
    grid-template-columns: 1fr 320px;
    align-items:           start;
}

/*
 * Sidebar sticky:
 * - wrap estira a la altura de la columna del grid (mismo alto que el artículo)
 * - in envuelve solo el contenido (el 100% del calc = alto del aside)
 * - aside sticky se mueve dentro del wrap hasta mostrar todo el bloque
 */
.site-sidebar-wrap {
    align-self: stretch;
    min-width:  0;
}

.site-sidebar-in {
    width: 100%;
}

.site-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    position:       sticky;
    top:            var(--sidebar-sticky-top);
}

/* Alta: el desplazamiento lo maneja main.js con translateY dentro del wrap */
.site-sidebar-wrap--tall .site-sidebar {
    position:   relative;
    top:        auto;
    bottom:     auto;
    will-change: transform;
}

.sidebar-block {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
}

/* Scroll solo en el listado de últimas noticias */
.sidebar-block--noticias .sidebar-block__body {
    max-height:      calc(var(--sidebar-viewport-h, 100vh) - 5rem);
    overflow-y:      auto;
    scrollbar-width: thin;
}

.sidebar-block__header {
    background:     var(--color-nav-bg, var(--color-secondary));
    color:          var(--color-nav-fg, #fff);
    padding:        .65rem 1rem;
    font-size:      .8rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height:    1.3;
    border-bottom:    1px solid var(--color-nav-border, rgba(255, 255, 255, .12));
}

.sidebar-block__body {
    padding: 0;
}

.sidebar-article {
    display:       flex;
    gap:           .75rem;
    padding:       .75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    align-items:   flex-start;
}
.sidebar-article:last-child { border-bottom: none; }

.sidebar-article__thumb {
    flex-shrink: 0;
    width:       75px;
    height:      55px;
    overflow:    hidden;
    border-radius: var(--radius-sm);
}
.sidebar-article__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.sidebar-article__body { flex: 1; min-width: 0; }

.sidebar-article__title {
    font-size:   .82rem;
    font-weight: 600;
    line-height: 1.35;
    color:       var(--color-text);
    display:     block;
    margin-bottom: .15rem;
}
.sidebar-article__title:hover { color: var(--color-primary); }

.sidebar-article__cat {
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--color-accent);
}

.sidebar-block--html .sidebar-block__body {
    padding: 1rem;
}

/* =============================================================================
   PORTADA — SECCIONES
   ============================================================================= */
.portada-section { margin-bottom: 2.75rem; }

.section-heading {
    font-size:     1.05rem;
    font-weight:   800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:         var(--color-text);
    padding-bottom: .6rem;
    margin-bottom:  1.1rem;
    border-bottom:  3px solid var(--color-accent);
    display:       inline-block;
}

/* --- Diseño: hero-sidebar (1 grande + sidebar lateral) -------------------- */
.portada-headline {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   1.25rem;
    align-items:           start;
}

.portada-headline__sidebar {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* --- Diseño: hero-grid-2x2 (1 grande + grid 2x2) ------------------------- */
.portada-hero-grid {
    display:               grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap:                   1rem;
    align-items:           stretch;
}
.portada-hero-grid__hero {
    display:    flex;
    min-height: 0;
    min-width:  0;
}
.portada-hero-grid__hero > .article-card--hero {
    flex:           1;
    display:        flex;
    flex-direction: column;
    width:          100%;
}
.portada-hero-grid__hero .article-card__image-link {
    flex:       1;
    min-height: 0;
    display:    block;
}
.portada-hero-grid__hero .article-card__image {
    width:        100%;
    height:       100%;
    min-height:   260px;
    aspect-ratio: auto;
    object-fit:   cover;
}
.portada-hero-grid__side {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   1rem;
    min-width:             0;
}

/* --- Diseño: grid-2x1-hero-2x1 ------------------------------------------- */
.portada-2x1-hero-2x1 {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:    auto;
    gap:                   1rem;
}
.portada-2x1-hero-2x1 > :nth-child(1) { grid-column: 1; }
.portada-2x1-hero-2x1 > :nth-child(2) { grid-column: 2; }
.portada-2x1-hero-2x1 > :nth-child(3) { grid-column: 3; }
.portada-2x1-hero-2x1 > .portada-2x1-hero-2x1__hero {
    grid-column: 2 / 4;
    grid-row:    1;
}
.portada-2x1-hero-2x1 > :nth-child(4) { grid-column: 4; }
.portada-2x1-hero-2x1 > :nth-child(5) { grid-column: 4; }

/* --- Diseño: hero-2x2 (grande arriba + 2x2 abajo) ------------------------ */
.portada-hero-bottom {
    display: grid;
    gap:     1rem;
}
.portada-hero-bottom__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

/* --- Diseño: 2x2-hero (2x2 arriba + grande abajo) ------------------------ */
.portada-top-hero {
    display: grid;
    gap:     1rem;
}
.portada-top-hero__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

/* --- Diseño: grid (grilla uniforme) --------------------------------------- */
.portada-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:                   1.1rem;
}

/* --- Diseño: slider (carrusel horizontal) --------------------------------- */
.portada-slider {
    position: relative;
    overflow: hidden;
}

.portada-slider__track {
    display:    flex;
    gap:        1rem;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    cursor:     grab;
}
.portada-slider__track.is-grabbing { cursor: grabbing; }

.portada-slider__slide {
    flex:       0 0 calc(33.333% - .667rem);
    min-width:  0;
}

.portada-slider__btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,.5);
    color:           #fff;
    border:          none;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    font-size:       1.3rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         2;
    transition:      background var(--transition);
}
.portada-slider__btn:hover { background: rgba(0,0,0,.75); }
.portada-slider__btn--prev { left: .5rem; }
.portada-slider__btn--next { right: .5rem; }

/* Portada — lista */
.portada-list { display: flex; flex-direction: column; gap: 0; }

/* =============================================================================
   TARJETAS DE ARTÍCULO
   ============================================================================= */

/* Aparición suave al montar (CSS puro — funciona con navegación AJAX) */
.article-card {
    opacity: 1;
    transform: none;
}

.article-card__image {
    opacity: 1;
}

.article-card__image--placeholder {
    object-fit: contain;
    background: var(--color-surface-2, #f3f4f6);
}

@media (prefers-reduced-motion: no-preference) {
    .article-card {
        transition:
            opacity 0.65s ease var(--card-reveal-delay, 0ms),
            transform 0.65s ease var(--card-reveal-delay, 0ms);
    }

    @starting-style {
        .article-card {
            opacity: 0;
            transform: translateY(12px);
        }
    }

    .portada-grid > .article-card:nth-child(1),
    .portada-hero-grid > .article-card:nth-child(1),
    .portada-headline__main > .article-card:nth-child(1),
    .portada-headline__sidebar > .article-card:nth-child(1),
    .archive-grid > .article-card:nth-child(1),
    .portada-slider__track > .article-card:nth-child(1) { --card-reveal-delay: 0ms; }

    .portada-grid > .article-card:nth-child(2),
    .portada-hero-grid > .article-card:nth-child(2),
    .portada-headline__main > .article-card:nth-child(2),
    .portada-headline__sidebar > .article-card:nth-child(2),
    .archive-grid > .article-card:nth-child(2),
    .portada-slider__track > .article-card:nth-child(2) { --card-reveal-delay: 80ms; }

    .portada-grid > .article-card:nth-child(3),
    .portada-hero-grid > .article-card:nth-child(3),
    .portada-headline__main > .article-card:nth-child(3),
    .portada-headline__sidebar > .article-card:nth-child(3),
    .archive-grid > .article-card:nth-child(3),
    .portada-slider__track > .article-card:nth-child(3) { --card-reveal-delay: 160ms; }

    .portada-grid > .article-card:nth-child(4),
    .portada-hero-grid > .article-card:nth-child(4),
    .portada-headline__main > .article-card:nth-child(4),
    .portada-headline__sidebar > .article-card:nth-child(4),
    .archive-grid > .article-card:nth-child(4),
    .portada-slider__track > .article-card:nth-child(4) { --card-reveal-delay: 240ms; }

    .portada-grid > .article-card:nth-child(5),
    .portada-hero-grid > .article-card:nth-child(5),
    .portada-headline__main > .article-card:nth-child(5),
    .portada-headline__sidebar > .article-card:nth-child(5),
    .archive-grid > .article-card:nth-child(5),
    .portada-slider__track > .article-card:nth-child(5) { --card-reveal-delay: 320ms; }

    .portada-grid > .article-card:nth-child(6),
    .portada-hero-grid > .article-card:nth-child(6),
    .portada-headline__main > .article-card:nth-child(6),
    .portada-headline__sidebar > .article-card:nth-child(6),
    .archive-grid > .article-card:nth-child(6),
    .portada-slider__track > .article-card:nth-child(6) { --card-reveal-delay: 400ms; }

    .portada-grid > .article-card:nth-child(n+7),
    .portada-hero-grid > .article-card:nth-child(n+7),
    .portada-headline__main > .article-card:nth-child(n+7),
    .portada-headline__sidebar > .article-card:nth-child(n+7),
    .archive-grid > .article-card:nth-child(n+7),
    .portada-slider__track > .article-card:nth-child(n+7) { --card-reveal-delay: 480ms; }
}

@media (prefers-reduced-motion: reduce) {
    .article-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Estándar (grilla) ---------------------------------------------------- */
.article-card--standard {
    background:    var(--color-surface);
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow-sm);
    display:       flex;
    flex-direction: column;
    transition:    transform var(--transition), box-shadow var(--transition);
}
.article-card--standard:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow);
}

.article-card--standard .article-card__image-link { display: block; overflow: hidden; }
.article-card--standard .article-card__image {
    width:        100%;
    aspect-ratio: 16/9;
    object-fit:   cover;
    transition:   opacity .5s ease, transform .35s ease;
}
.article-card--standard:hover .article-card__image { transform: scale(1.04); }

.article-card--standard .article-card__body {
    padding: .85rem 1rem 1rem;
    flex:    1;
    display: flex;
    flex-direction: column;
    gap:     .35rem;
}

/* --- Hero ------------------------------------------------------------------ */
.article-card--hero {
    background:    var(--color-surface);
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow);
    transition:    transform var(--transition), box-shadow var(--transition);
}
.article-card--hero:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.12); }

.article-card--hero .article-card__image-link { display: block; overflow: hidden; }
.article-card--hero .article-card__image {
    width:        100%;
    aspect-ratio: 16/7;
    object-fit:   cover;
    transition:   opacity .5s ease, transform .35s ease;
}
.article-card--hero:hover .article-card__image { transform: scale(1.03); }

.article-card--hero .article-card__body { padding: 1.2rem 1.35rem 1.35rem; }

.article-card--hero .article-card__title {
    font-size:   1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

/* --- Row (horizontal) ----------------------------------------------------- */
.article-card--row {
    display:       flex;
    gap:           .85rem;
    padding:       .85rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items:   flex-start;
}
.article-card--row:last-child { border-bottom: none; }

.article-card--row .article-card__image-link {
    flex-shrink: 0;
    width:       90px;
    height:      62px;
    overflow:    hidden;
    border-radius: var(--radius-sm);
}
.article-card--row .article-card__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: opacity .5s ease, transform .3s;
}
.article-card--row:hover .article-card__image { transform: scale(1.06); }

.article-card--row .article-card__body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }

/* --- Elementos comunes de la card ----------------------------------------- */
.article-card__category {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--color-accent);
    display:        block;
}

.article-card__title {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--color-text);
    line-height: 1.35;
    display:     block;
}
.article-card__title:hover,
.article-card__title a:hover { color: var(--color-primary); }
.article-card__title a { color: inherit; }

.article-card--hero .article-card__category { font-size: .75rem; margin-bottom: .3rem; }

.article-card__excerpt {
    font-size:  .83rem;
    color:      var(--color-text-muted);
    display:    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:   hidden;
    flex:       1;
}

.article-card__meta {
    font-size:  .72rem;
    color:      var(--color-text-light);
    display:    flex;
    gap:        .6rem;
    flex-wrap:  wrap;
    margin-top: auto;
    padding-top:.35rem;
}

.article-card__author { font-weight: 600; color: var(--color-text-muted); }

/* =============================================================================
   ARCHIVE HEADER (categoría / etiqueta / búsqueda)
   ============================================================================= */
.archive-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.archive-title {
    font-size:   1.75rem;
    font-weight: 800;
    color:       var(--color-text);
    margin-bottom: .35rem;
}
.archive-title em { font-style: normal; color: var(--color-primary); }

.archive-desc { font-size: .95rem; color: var(--color-text-muted); }

.archive-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap:                   1.25rem;
    margin-bottom:         2rem;
}

/* =============================================================================
   PÁGINA 404
   ============================================================================= */
.error-page {
    margin-bottom: 2.5rem;
}

.error-page__hero {
    text-align:      center;
    max-width:       640px;
    margin:          0 auto 2.5rem;
    padding:         2rem 1rem 0;
}

.error-page__code {
    margin:          0 0 .5rem;
    font-size:       clamp(3.5rem, 12vw, 5.5rem);
    font-weight:     900;
    line-height:     1;
    letter-spacing:  -.04em;
    color:           color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}

.error-page__title {
    margin:      0 0 .85rem;
    font-size:   clamp(1.45rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color:       var(--color-text);
}

.error-page__lead {
    margin:      0 auto 1.5rem;
    font-size:   1.02rem;
    line-height: 1.65;
    color:       var(--color-text-muted);
}

.error-page__actions {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             .75rem;
}

.error-page__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         .72rem 1.25rem;
    border-radius:   var(--radius-sm);
    font-size:       .92rem;
    font-weight:     700;
    transition:      background var(--transition), color var(--transition), border-color var(--transition), transform .15s ease;
}

.error-page__btn:hover {
    transform: translateY(-1px);
}

.error-page__btn--primary {
    background: var(--color-primary);
    color:      #fff;
}

.error-page__btn--primary:hover {
    background: var(--color-primary-dark);
    color:      #fff;
}

.error-page__btn--ghost {
    border:  2px solid var(--color-border);
    color:   var(--color-text);
    background: var(--color-surface);
}

.error-page__btn--ghost:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
}

.error-page__suggestions .section-heading {
    margin-bottom: 1.25rem;
}

/* =============================================================================
   BÚSQUEDA
   ============================================================================= */
.search-form { margin-bottom: 1.5rem; }

.search-form__inner {
    display:       flex;
    gap:           .5rem;
    max-width:     540px;
}

.search-form__inner input {
    flex:          1;
    padding:       .7rem 1.1rem;
    border:        2px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     1rem;
    background:    var(--color-surface);
    color:         var(--color-text);
    outline:       none;
    transition:    border-color var(--transition);
}
.search-form__inner input:focus { border-color: var(--color-primary); }

.search-form__inner button {
    padding:       .7rem 1.5rem;
    background:    var(--color-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--radius);
    font-size:     .95rem;
    font-weight:   600;
    transition:    background var(--transition);
}
.search-form__inner button:hover { background: var(--color-primary-dark); }

.search-form__filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             1rem;
    margin-top:      1rem;
    max-width:       720px;
}

.search-form__field {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
    min-width:      140px;
}

.search-form__label {
    font-size:      .75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          var(--color-text-muted);
}

.search-form__field input,
.search-form__field select {
    padding:       .55rem .75rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size:     .9rem;
    background:    var(--color-surface);
    color:         var(--color-text);
}

.search-form__hint {
    font-size:   .85rem;
    margin-top:  .5rem;
    color:       var(--color-text-light);
}

.empty-state, .empty-portada {
    text-align: center;
    padding:    3rem 1rem;
    color:      var(--color-text-muted);
    font-size:  .95rem;
}

/* =============================================================================
   PAGINACIÓN
   ============================================================================= */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    margin:          2.5rem 0 1rem;
    flex-wrap:       wrap;
}

.pagination__btn {
    padding:       .5rem 1.1rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background:    var(--color-surface);
    color:         var(--color-text-muted);
    font-size:     .88rem;
    transition:    all var(--transition);
}
.pagination__btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface-2); }

.pagination__pages { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }

.pagination__page {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     38px;
    height:        38px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size:     .88rem;
    color:         var(--color-text-muted);
    background:    var(--color-surface);
    transition:    all var(--transition);
}
.pagination__page:hover  { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__page.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600; }
.pagination__ellipsis   { color: var(--color-text-light); padding: 0 .25rem; }

/* =============================================================================
   PÁGINA DE ARTÍCULO
   ============================================================================= */
.article-page { max-width: 780px; }

.article-header { margin-bottom: 1.5rem; }

.article-category {
    display:        inline-block;
    background:     var(--color-accent);
    color:          #fff;
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding:        .25rem .65rem;
    border-radius:  3px;
    margin-bottom:  .75rem;
}
.article-category:hover { background: var(--color-primary); color: #fff; }

.article-volanta {
    font-size:      .82rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--color-text-muted);
    margin-bottom:  .5rem;
}

.article-title {
    font-size:     2.1rem;
    font-weight:   800;
    line-height:   1.2;
    color:         var(--color-text);
    margin-bottom: .85rem;
}

.article-bajada {
    font-size:     1.05rem;
    color:         var(--color-text-muted);
    line-height:   1.55;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.article-meta {
    display:       flex;
    gap:           1.25rem;
    font-size:     .82rem;
    color:         var(--color-text-light);
    margin-bottom: 1.5rem;
    flex-wrap:     wrap;
    align-items:   center;
}

.article-meta__author,
.article-meta__date {
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.article-meta__author { font-weight: 600; color: var(--color-text-muted); }

/* Imagen principal (1 sola imagen) */
.article-featured-image {
    margin-bottom: 1.75rem;
    border-radius: var(--radius);
    overflow:      hidden;
}
.article-featured-image img {
    width:        100%;
    max-height:   520px;
    object-fit:   cover;
    border-radius: var(--radius);
}
.article-featured-image figcaption {
    font-size:  .78rem;
    color:      var(--color-text-light);
    padding:    .45rem .1rem 0;
    font-style: italic;
}

/* =============================================================================
   CARRUSEL DE IMÁGENES
   ============================================================================= */
.article-carousel {
    position:      relative;
    margin-bottom: 1.75rem;
    border-radius: var(--radius);
    overflow:      hidden;
    background:    #000;
    user-select:   none;
}

.carousel-track {
    display:    flex;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.carousel-slide {
    min-width:  100%;
    position:   relative;
}
.carousel-slide img {
    width:       100%;
    max-height:  520px;
    object-fit:  cover;
    display:     block;
}
.carousel-slide figcaption {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color:      rgba(255,255,255,.9);
    font-size:  .78rem;
    padding:    1.5rem .75rem .6rem;
    font-style: italic;
}

.carousel-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,.45);
    color:           #fff;
    border:          none;
    font-size:       2rem;
    line-height:     1;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition);
    z-index:         2;
}
.carousel-btn:hover        { background: rgba(0,0,0,.75); }
.carousel-btn--prev        { left: .75rem; }
.carousel-btn--next        { right: .75rem; }

.carousel-dots {
    position:        absolute;
    bottom:          .75rem;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    gap:             .4rem;
    z-index:         2;
}
.carousel-dot {
    width:           9px;
    height:          9px;
    border-radius:   50%;
    background:      rgba(255,255,255,.45);
    border:          none;
    padding:         0;
    transition:      background var(--transition), transform var(--transition);
}
.carousel-dot.is-active { background: #fff; transform: scale(1.25); }

.carousel-counter {
    position:   absolute;
    top:        .7rem;
    right:      .85rem;
    background: rgba(0,0,0,.5);
    color:      #fff;
    font-size:  .75rem;
    padding:    .2rem .55rem;
    border-radius: 20px;
    z-index:    2;
}

/* =============================================================================
   CONTENIDO DEL ARTÍCULO (salida del editor)
   ============================================================================= */
.article-content {
    font-family: var(--font-serif);
    font-size:   1.06rem;
    line-height: 1.85;
    color:       var(--color-text);
    margin-bottom: 2rem;
}
.article-content h2, .article-content h3, .article-content h4 {
    font-family: var(--font);
    font-weight: 700;
    margin:      1.75rem 0 .75rem;
    line-height: 1.3;
}
.article-content h2 { font-size: 1.45rem; }
.article-content h3 { font-size: 1.2rem; }
.article-content h4 { font-size: 1rem; }
.article-content p  { margin-bottom: 1.15rem; }
.article-content ul, .article-content ol {
    padding-left: 1.6rem; margin-bottom: 1.1rem;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: .45rem; }
.article-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding:     .85rem 1.35rem;
    margin:      1.5rem 0;
    background:  var(--color-surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color:       var(--color-text-muted);
    font-style:  italic;
}
.article-content img {
    border-radius: var(--radius-sm);
    margin: 1.25rem auto;
    max-width: 100%;
}

/* Bloque nota relacionada (insertado desde el editor) */
.article-content .xcms-relacionada {
    margin:  1.75rem 0;
    clear:   both;
}

.article-content .xcms-relacionada__kicker {
    margin:         0 0 .55rem;
    font-size:      .78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--color-text-muted);
}

.article-content .xcms-relacionada__card {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    padding:         .9rem 1.1rem;
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius);
    text-decoration: none !important;
    color:           inherit;
    transition:      border-color .2s ease, box-shadow .2s ease;
}

.article-content .xcms-relacionada__card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 14px rgba(0, 0, 0, .08);
}

.article-content .xcms-relacionada__img {
    width:         120px;
    height:        80px;
    object-fit:    cover;
    border-radius: var(--radius-sm);
    flex-shrink:   0;
    margin:        0;
}

.article-content .xcms-relacionada__titulo {
    font-size:   1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color:       var(--color-text);
}

.article-content a.xcms-relacionada__card { text-decoration: none; }

@media (max-width: 520px) {
    .article-content .xcms-relacionada__card {
        flex-direction: column;
        align-items:    flex-start;
    }
    .article-content .xcms-relacionada__img {
        width:  100%;
        height: auto;
        max-height: 160px;
    }
}

.article-content a { color: var(--color-primary); text-decoration: underline; }
.article-content strong { font-weight: 700; }
.article-content iframe {
    width: 100%; aspect-ratio: 16/9; border: none;
    border-radius: var(--radius-sm); margin: 1.25rem 0;
}
.article-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; font-family: var(--font); }
.article-content th, .article-content td { padding: .5rem .75rem; border: 1px solid var(--color-border); text-align: left; }
.article-content th { background: var(--color-surface-2); font-weight: 600; }

/* =============================================================================
   VIDEO / ADJUNTOS
   ============================================================================= */
.article-videos,
.article-audios { margin: 1.75rem 0; }
.audio-wrapper {
    margin:        1rem 0;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       .75rem 1rem;
}
.article-audio {
    width:         100%;
    display:       block;
    border-radius: var(--radius);
}
.video-wrapper {
    margin:        1.25rem 0;
    background:    #000;
    border-radius: var(--radius);
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,.18);
}
.article-video {
    width:         100%;
    height:        auto;
    border-radius: 0;   /* el wrapper ya tiene el radius */
    display:       block;
    background:    #000;
}
.media-caption  { font-size: .78rem; color: var(--color-text-light); margin: .4rem .6rem .6rem; font-style: italic; }

.article-downloads {
    margin:        1.75rem 0;
    padding:       1.35rem;
    background:    var(--color-surface);
    border-radius: var(--radius);
    border:        1px solid var(--color-border);
}
.article-downloads h3 {
    font-size:   .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:       var(--color-text-muted);
    margin-bottom: .85rem;
    font-family: var(--font);
}

.download-list { display: flex; flex-direction: column; gap: .5rem; }

.download-item {
    display:       flex;
    align-items:   center;
    gap:           .85rem;
    padding:       .65rem 1rem;
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition:    background var(--transition);
}
.download-item:hover          { background: #e8eaf6; }
.download-item__icon          { font-size: 1.4rem; flex-shrink: 0; }
.download-item__info          { flex: 1; min-width: 0; }
.download-item__name          { font-size: .9rem; color: var(--color-text); font-weight: 500; display: block; }
.download-item__name:hover    { color: var(--color-primary); text-decoration: underline; }
.download-item__size          { font-size: .75rem; color: var(--color-text-light); }
.download-item__ext {
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    background:     var(--color-primary);
    color:          #fff;
    padding:        .15rem .45rem;
    border-radius:  3px;
    flex-shrink:    0;
}

/* =============================================================================
   ETIQUETAS
   ============================================================================= */
.article-tags {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    gap:        .4rem;
    margin:     1.75rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.article-tags__label {
    font-size:   .78rem;
    font-weight: 700;
    color:       var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .25rem;
}

.tag-pill {
    display:       inline-block;
    padding:       .3rem .8rem;
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: 100px;
    font-size:     .78rem;
    color:         var(--color-text-muted);
    transition:    all var(--transition);
}
.tag-pill:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* =============================================================================
   BOTONES DE COMPARTIR
   ============================================================================= */
.article-share {
    margin:     1.75rem 0 2rem;
    padding:    1.25rem;
    background: var(--color-surface);
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
}

.article-share__label {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--color-text-light);
    display:        block;
    margin-bottom:  .75rem;
}

.article-share__buttons {
    display:   flex;
    gap:       .6rem;
    flex-wrap: wrap;
}

.share-btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .45rem;
    width:           44px;
    height:          44px;
    padding:         0;
    border-radius:   50%;
    font-size:       .85rem;
    font-weight:     600;
    color:           #fff;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    transition:      opacity var(--transition), transform var(--transition), background var(--transition);
    flex-shrink:     0;
}
.share-btn:hover       { opacity: .88; transform: translateY(-1px); color: #fff; }
.share-btn svg         { flex-shrink: 0; }
.share-btn__label      { line-height: 1.2; }
.share-btn--facebook   { background: #1877f2; }
.share-btn--twitter    { background: #000; }
.share-btn--whatsapp   { background: #25d366; }
.share-btn--telegram   { background: #0088cc; }
.share-btn--native     { background: var(--color-text-muted); }
.share-btn--copy       { background: var(--color-text-muted); }
.share-btn--copy.copied { background: #16a34a; }

@media (min-width: 769px) {
    .share-btn {
        width:         auto;
        height:        auto;
        min-height:    44px;
        padding:       .55rem 1.1rem;
        border-radius: 999px;
    }
}

@media (max-width: 768px) {
    .share-btn__label {
        position: absolute;
        width:    1px;
        height:   1px;
        padding:  0;
        margin:   -1px;
        overflow: hidden;
        clip:     rect(0, 0, 0, 0);
        white-space: nowrap;
        border:   0;
    }
}

/* =============================================================================
   PÁGINAS INTERNAS
   ============================================================================= */
.page-content {
    max-width:  780px;
}

.page-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-border);
}

.page-title {
    font-size:   2rem;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--color-text);
    margin:      0 0 .6rem;
}

.page-description {
    font-size:  1.05rem;
    color:      var(--color-text-muted);
    margin:     0;
    line-height: 1.6;
}

.page-body {
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-size:   1.05rem;
    line-height: 1.75;
    color:       var(--color-text);
}

.page-body h2 { font-size: 1.4rem; margin: 1.75rem 0 .6rem; }
.page-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.page-body p  { margin: 0 0 1.1rem; }
.page-body ul, .page-body ol { margin: 0 0 1.1rem 1.5rem; }
.page-body li { margin-bottom: .4rem; }
.page-body a  { color: var(--color-primary); text-decoration: underline; }

/* =============================================================================
   ARTÍCULOS RELACIONADOS
   ============================================================================= */
.related-articles {
    margin-top:    2.5rem;
    padding-top:   2rem;
    border-top:    2px solid var(--color-border);
}

.related-articles__title {
    font-size:   1.1rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--color-text);
}

.related-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   1.1rem;
}

.related-item {}

.related-item__thumb {
    display:       block;
    overflow:      hidden;
    border-radius: var(--radius-sm);
    margin-bottom: .65rem;
    aspect-ratio:  16/9;
}
.related-item__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .35s;
}
.related-item__thumb:hover img { transform: scale(1.05); }

.related-item__body {}
.related-item__title { font-size: .88rem; font-weight: 600; line-height: 1.35; margin-bottom: .3rem; }
.related-item__title a { color: var(--color-text); }
.related-item__title a:hover { color: var(--color-primary); }
.related-item__date { font-size: .73rem; color: var(--color-text-light); }

/* =============================================================================
   MODO MANTENIMIENTO (aviso admin)
   ============================================================================= */
.site-maintenance-banner {
    position: sticky;
    top: 0;
    z-index: 1200;
    padding: .65rem 1rem;
    text-align: center;
    font-size: .88rem;
    line-height: 1.4;
    color: #7c2d12;
    background: #fff7ed;
    border-bottom: 1px solid #fdba74;
}

.site-maintenance-banner strong {
    font-weight: 700;
}

body.has-maintenance-banner {
    --maintenance-banner-offset: 0px;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
    background: var(--color-footer-bg);
    color:      var(--color-footer-fg-muted);
    padding:    3rem 0 0;
    margin-top: auto;
}

.site-footer__inner {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap:                   2.5rem;
    padding-bottom:        2.5rem;
}

/* Logo del footer */
.footer-brand { display: flex; flex-direction: column; gap: .85rem; }

.footer-logo-link { display: inline-flex; }

.footer-logo {
    max-width:  500px;
    max-height: 80px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    opacity:    .9;
}

.footer-logo-text {
    font-size:   1.4rem;
    font-weight: 800;
    color:       var(--color-footer-fg);
}

.footer-custom-text {
    max-width:   42rem;
    font-size:   .88rem;
    line-height: 1.55;
    color:       var(--color-footer-fg-muted);
}

.footer-custom-text p {
    margin: 0 0 .45rem;
}

.footer-custom-text p:last-child {
    margin-bottom: 0;
}

.footer-custom-text a {
    color: var(--color-footer-fg);
    text-decoration: underline;
    text-underline-offset: .12em;
}

.footer-custom-text a:hover {
    color: var(--color-primary);
}

.footer-social { display: flex; flex-wrap: wrap; gap: .45rem; }

.footer-social__link {
    display:       inline-flex;
    align-items:   center;
    padding:       .3rem .75rem;
    background:    var(--color-footer-surface);
    border-radius: 100px;
    color:         var(--color-footer-fg-muted);
    font-size:     .78rem;
    font-weight:   500;
    transition:    background var(--transition), color var(--transition);
}
.footer-social__link:hover { background: var(--color-primary); color: #fff; }

.footer-nav__title {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--color-footer-fg-subtle);
    margin-bottom:  .85rem;
}

.footer-nav ul    { display: flex; flex-direction: column; gap: .4rem; }
.footer-nav li a  { font-size: .88rem; color: var(--color-footer-fg-muted); transition: color var(--transition); }
.footer-nav li a:hover { color: var(--color-footer-fg); }

.footer-contact   { font-size: .85rem; line-height: 1.9; color: var(--color-footer-fg-muted); }
.footer-contact a { color: var(--color-footer-fg-muted); }
.footer-contact a:hover { color: var(--color-footer-fg); }

.site-footer__bottom {
    border-top:  1px solid var(--color-footer-border);
    padding:     1rem 0;
    font-size:   .78rem;
    color:       var(--color-footer-fg-subtle);
}

.site-footer__bottom-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
}

.site-footer__copyright,
.site-footer__credit {
    margin: 0;
}

.site-footer__credit a {
    color:       var(--color-footer-fg-muted);
    font-weight: 600;
    transition:  color var(--transition);
}

.site-footer__credit a:hover {
    color: var(--color-footer-fg);
}

@media (max-width: 640px) {
    .site-footer__bottom-inner {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .portada-headline { grid-template-columns: 1fr 260px; }
    .portada-hero-grid { grid-template-columns: 1fr 1fr; }
    .portada-2x1-hero-2x1 { grid-template-columns: repeat(2, 1fr); }
    .portada-2x1-hero-2x1 > .portada-2x1-hero-2x1__hero { grid-column: 1 / -1; }
    .portada-2x1-hero-2x1 > :nth-child(4) { grid-column: auto; }
    .portada-2x1-hero-2x1 > :nth-child(5) { grid-column: auto; }
    .portada-slider__slide { flex: 0 0 calc(50% - .5rem); }
    .home-layout--with-sidebar { grid-template-columns: 1fr 280px; }
    .page-layout--with-sidebar { grid-template-columns: 1fr 280px; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
    .site-footer__inner > .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    /* Header fijo en mobile */
    .site-header {
        position:   fixed;
        top:        0;
        left:       0;
        right:      0;
        z-index:    300;
        height:     55px;
        padding:    0;
        box-shadow: 0 2px 12px rgba(0,0,0,.25);
    }

    .site-header__inner {
        grid-template-columns: 1fr;
        justify-items:         center;
        align-items:           center;
        height:                100%;
        gap:                   0;
    }

    .site-logo img {
        max-height: 42px;
        max-width:  min(280px, 70vw);
    }

    .site-logo__text {
        font-size:   1.15rem;
        line-height: 1.1;
    }

    body {
        padding-top:    55px;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    body.has-whatsapp-float {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    body.has-whatsapp-float .site-footer__bottom {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    :root {
        --gutter: 16px;
    }

    .container {
        padding-left:  calc(var(--gutter) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
    }

    .header-social { display: none; }
    .header-search { display: none; }

    /* Buscador mobile: debajo del header fijo (oculto fuera de pantalla) */
    .mobile-search-panel {
        top:       55px;
        transform: translateY(calc(-100% - 55px));
    }

    .mobile-search-panel.is-open {
        transform: translateY(0);
    }

    /* Bottom bar visible */
    .mobile-bottom-bar { display: flex; }

    /* Navbar mobile */
    .site-nav { display: none; }

    /* Sidebar pasa debajo */
    .home-layout--with-sidebar { grid-template-columns: 1fr; }
    .page-layout--with-sidebar { grid-template-columns: 1fr; }

    .site-sidebar-wrap--tall .site-sidebar,
    .site-sidebar {
        position:   static;
        top:        auto;
        max-height: none;
        overflow-y: visible;
    }

    .site-sidebar-wrap {
        align-self: auto;
    }

    /* Bloques portada */
    .portada-headline { grid-template-columns: 1fr; }
    .portada-headline__sidebar { flex-direction: row; overflow-x: auto; }
    .portada-headline__sidebar .article-card--row {
        min-width: 220px; flex-direction: column;
        border-bottom: none; border-right: 1px solid var(--color-border); padding-right: .85rem;
    }
    .portada-headline__sidebar .article-card--row .article-card__image-link {
        width: 100%; height: 120px;
    }
    .portada-hero-grid {
        grid-template-columns: 1fr;
    }
    .portada-hero-grid__hero .article-card__image {
        min-height:   0;
        aspect-ratio: 16/9;
        height:       auto;
    }
    .portada-hero-grid__side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portada-2x1-hero-2x1 {
        grid-template-columns: 1fr;
    }
    .portada-2x1-hero-2x1 > .portada-2x1-hero-2x1__hero { grid-column: 1; }
    .portada-hero-bottom__grid { grid-template-columns: 1fr; }
    .portada-top-hero__grid    { grid-template-columns: 1fr; }
    .portada-slider__slide { flex: 0 0 calc(50% - .5rem); }

    .portada-grid { grid-template-columns: repeat(2, 1fr); }
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
    .article-title { font-size: 1.6rem; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .site-footer__inner > .footer-brand { grid-column: 1; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    :root { --gap: 1rem; }
    .portada-grid { grid-template-columns: 1fr; }
    .portada-hero-grid__side { grid-template-columns: 1fr; }
    .portada-hero-bottom__grid { grid-template-columns: 1fr; }
    .portada-top-hero__grid    { grid-template-columns: 1fr; }
    .portada-slider__slide { flex: 0 0 100%; }
    .archive-grid { grid-template-columns: 1fr; }
    .article-title { font-size: 1.35rem; }
    .article-carousel .carousel-btn { width: 34px; height: 34px; font-size: 1.5rem; }
    .article-share__buttons .share-btn { width: 42px; height: 42px; }
    .related-grid { grid-template-columns: 1fr; }
    .site-logo img { max-height: 56px; }
}

/* PWA push modal */
.pwa-push-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.pwa-push-modal.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
.pwa-push-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.pwa-push-modal__box {
    position: relative;
    width: min(100%, 360px);
    background: var(--color-background, #fff);
    color: var(--color-text, #212121);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    transform: translateY(12px);
    transition: transform .25s ease;
}
.pwa-push-modal.is-open .pwa-push-modal__box { transform: translateY(0); }
.pwa-push-modal__close {
    position: absolute;
    top: .5rem;
    right: .65rem;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-muted, #666);
    cursor: pointer;
}
.pwa-push-modal__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 14px;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.pwa-push-modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.pwa-push-modal__text {
    font-size: .95rem;
    color: var(--color-text-muted, #555);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.pwa-push-modal__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.pwa-push-modal__btn {
    border: 0;
    border-radius: 999px;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}
.pwa-push-modal__btn--primary {
    background: var(--color-primary, #1a73e8);
    color: #fff;
}
.pwa-push-modal__btn--ghost {
    background: transparent;
    color: var(--color-text-muted, #666);
}

/* =============================================================================
   RADIO — player fijo + programación
   ============================================================================= */
.radio-player-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    background: var(--color-nav-bg, #1a1a1a);
    color: var(--color-nav-fg, #fff);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .2);
    padding: .65rem 0 calc(.65rem + env(safe-area-inset-bottom, 0px));
}

body.has-radio-player {
    padding-bottom: 72px;
    --radio-player-h:        72px;
    --sidebar-sticky-bottom: calc(72px + 1rem);
}

.radio-player-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.radio-player-bar__left {
    min-width: 0;
    justify-self: start;
}

.radio-player-bar__center {
    justify-self: center;
}

.radio-player-bar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    min-width: 0;
    justify-self: end;
}

.radio-player-bar__text {
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.radio-player-bar__info {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.radio-player-bar__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.radio-player-bar__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .75);
}

.radio-player-bar__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    min-width: 0;
}

.radio-player-bar__program {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-player-bar__info .radio-player-bar__text {
    font-size: .78rem;
    font-weight: 500;
    opacity: .82;
    line-height: 1.2;
}

body.has-radio-player.has-live-program {
    padding-bottom: 80px;
    --radio-player-h:        80px;
    --sidebar-sticky-bottom: calc(80px + 1rem);
}

.radio-player-bar__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--color-accent, #fbbc04);
    color: #111;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s, background .15s, color .15s;
}

.radio-player-bar__play svg {
    display: block;
    flex-shrink: 0;
}

.radio-player-bar__play .radio-player__icon-pause {
    display: none;
}

.radio-player-bar.is-playing .radio-player-bar__play .radio-player__icon-play {
    display: none;
}

.radio-player-bar.is-playing .radio-player-bar__play .radio-player__icon-pause {
    display: block;
}

.radio-player__play .radio-player__icon-pause {
    display: none;
}

.radio-player.is-playing .radio-player__play .radio-player__icon-play {
    display: none;
}

.radio-player.is-playing .radio-player__play .radio-player__icon-pause {
    display: block;
}

.radio-player-bar__play:hover {
    transform: scale(1.04);
}

.radio-player-bar__volume {
    width: 96px;
    accent-color: var(--color-accent, #fbbc04);
}

.radio-player-bar__popout {
    display: flex;
    color: inherit;
    opacity: .85;
}

.radio-player-bar__popout:hover {
    opacity: 1;
}

.radio-player-bar.is-playing .radio-player-bar__play {
    background: var(--color-primary, #1a73e8);
    color: #fff;
}

.mobile-bottom-bar__item--radio.is-playing {
    color: var(--color-accent);
}

#main-content.is-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .2s;
}

/* Programación en portada — tira horizontal a ancho completo */
.radio-schedule {
    width: 100%;
    margin: 0 0 1.75rem;
    background: var(--color-surface, #f8f9fa);
    border: none;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0;
    overflow: hidden;
}

body.has-radio-schedule #main-content {
    padding-top: 0;
}

.radio-schedule__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.radio-schedule__card {
    flex: 0 0 auto;
    width: min(220px, 72vw);
    padding: .7rem 1rem;
    background: var(--color-background, #fff);
    border-right: 1px solid var(--color-border, #e5e7eb);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 100%;
}

.radio-schedule__card:last-child {
    border-right: none;
}

.radio-schedule__card.is-actual {
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 8%, var(--color-background, #fff));
}

.radio-schedule__card.is-pasado {
    opacity: .55;
}

.radio-schedule__logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.radio-schedule__status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .45rem;
    min-width: 0;
    flex-wrap: wrap;
}

.radio-schedule__badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #666);
    flex-shrink: 0;
}

.radio-schedule__card.is-actual .radio-schedule__badge {
    color: var(--color-primary, #1a73e8);
}

.radio-schedule__program {
    font-size: .95rem;
    line-height: 1.25;
}

.radio-schedule__meta {
    font-size: .82rem;
    color: var(--color-text-muted, #666);
}

.radio-schedule__overnight {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .35rem;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 4px;
    background: var(--color-border, #e5e7eb);
    color: var(--color-text-muted, #666);
    vertical-align: middle;
}

.radio-schedule__countdown {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-primary, #1a73e8);
    white-space: nowrap;
}

.radio-schedule__empty {
    margin: 0;
    padding: 1rem;
    color: var(--color-text-muted, #666);
}

/* =============================================================================
   PROGRAMACIÓN SEMANAL (/programacion)
   ============================================================================= */
.programacion-page__header {
    margin-bottom: 1.75rem;
}

.programacion-page__title {
    margin: 0 0 .35rem;
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.15;
}

.programacion-page__lead {
    margin: 0;
    color: var(--color-text-muted, #666);
    font-size: .95rem;
}

.programacion-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 720px;
}

.programacion-dia {
    background: var(--color-surface, #f8f9fa);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.programacion-dia.is-hoy {
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 45%, var(--color-border, #e5e7eb));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #1a73e8) 18%, transparent);
}

.programacion-dia__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem;
    background: var(--color-background, #fff);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.programacion-dia.is-hoy .programacion-dia__head {
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 8%, var(--color-background, #fff));
}

.programacion-dia__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

.programacion-dia__badge {
    flex-shrink: 0;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--color-primary, #1a73e8);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.programacion-dia__empty {
    margin: 0;
    padding: 1rem;
    font-size: .85rem;
    color: var(--color-text-muted, #666);
}

.programacion-list {
    list-style: none;
    margin: 0;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.programacion-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem;
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}

.programacion-item.is-actual {
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 35%, var(--color-border, #e5e7eb));
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 7%, var(--color-background, #fff));
}

.programacion-item__logo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.programacion-item__logo--empty {
    display: block;
    background: var(--color-surface-2, #eef1f4);
}

.programacion-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.programacion-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .45rem;
}

.programacion-item__title {
    font-size: .88rem;
    line-height: 1.25;
}

.programacion-item__live {
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary, #1a73e8);
}

.programacion-item__time {
    font-size: .78rem;
    color: var(--color-text-muted, #666);
}

.programacion-item__overnight {
    display: inline-block;
    margin-left: .2rem;
    padding: 0 .3rem;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.35;
    border-radius: 4px;
    background: var(--color-border, #e5e7eb);
    color: var(--color-text-muted, #666);
    vertical-align: middle;
}

@media (min-width: 769px) {
    .radio-player-bar {
        display: block;
    }
}

/* =============================================================================
   RADIO — player standalone (/player)
   ============================================================================= */
.radio-player-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--color-background, #f4f5f9);
    color: var(--color-text);
    overflow: hidden;
}

.radio-player-page__bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 65%),
        linear-gradient(165deg, var(--color-nav-bg, var(--color-secondary)) 0%, color-mix(in srgb, var(--color-nav-bg, var(--color-secondary)) 55%, #000) 100%);
    z-index: 0;
}

.radio-player-page__glow {
    position: fixed;
    width: min(520px, 90vw);
    height: min(520px, 90vw);
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 35%, transparent);
    filter: blur(80px);
    opacity: .45;
    z-index: 0;
    pointer-events: none;
    animation: radio-page-glow 6s ease-in-out infinite alternate;
}

@keyframes radio-page-glow {
    from { opacity: .35; transform: translate(-50%, -50%) scale(.95); }
    to   { opacity: .55; transform: translate(-50%, -50%) scale(1.05); }
}

.radio-player-page__shell {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.radio-player-page [data-reveal] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
    .radio-player-page [data-reveal] {
        transition:
            opacity .7s ease var(--reveal-delay, 0ms),
            transform .7s ease var(--reveal-delay, 0ms);
    }

    @starting-style {
        .radio-player-page [data-reveal] {
            opacity: 0;
            transform: translateY(18px);
        }
    }
}

.radio-player-page__brand {
    text-align: center;
}

.radio-player-page__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.radio-player-page__logo {
    max-width: min(220px, 70vw);
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .25));
}

.radio-player-page__site-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-nav-fg, #fff);
    letter-spacing: -.02em;
}

.radio-player-page__card {
    width: 100%;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-background, #fff) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-nav-fg, #fff) 12%, transparent);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(255, 255, 255, .06) inset;
    backdrop-filter: blur(14px);
    text-align: center;
}

.radio-player-page__live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-background, #fff));
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.radio-player-page__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .55);
    animation: radio-live-pulse 1.8s ease-out infinite;
}

@keyframes radio-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.radio-player-page__program {
    margin-bottom: 1rem;
}

.radio-player-page__art {
    width: 120px;
    height: 120px;
    margin: 0 auto .85rem;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.radio-player-page__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radio-player-page__art--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-background, #fff));
    color: var(--color-primary);
}

.radio-player-page__program-title {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
}

.radio-player-page__program-meta {
    margin: 0;
    font-size: .82rem;
    color: var(--color-text-muted, #666);
}

.radio-player-page__title {
    margin: 0 0 1.35rem;
    font-size: clamp(1.2rem, 4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

.radio-player-page__program + .radio-player-page__title {
    margin-top: .25rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-text-muted, #666);
}

.radio-player-page__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.radio-player-page__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: none;
    border-radius: 50%;
    background: var(--color-accent, #fbbc04);
    color: #111;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.radio-player-page__play:hover {
    transform: scale(1.04);
}

.radio-player-page__play-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
    opacity: 0;
    transform: scale(.92);
}

.radio-player-page.is-playing .radio-player-page__play {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.radio-player-page.is-playing .radio-player-page__play-ring {
    animation: radio-play-ring 1.6s ease-out infinite;
}

@keyframes radio-play-ring {
    0%   { opacity: .75; transform: scale(.92); }
    100% { opacity: 0; transform: scale(1.18); }
}

.radio-player-page .radio-player__play .radio-player__icon-pause {
    display: none;
}

.radio-player-page.is-playing .radio-player__play .radio-player__icon-play {
    display: none;
}

.radio-player-page.is-playing .radio-player__play .radio-player__icon-pause {
    display: block;
}

.radio-player-page__volume {
    width: 100%;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    text-align: left;
}

.radio-player-page__volume-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted, #666);
}

.radio-player-page__volume-input {
    width: 100%;
    accent-color: var(--color-primary);
}

.radio-player-page__viz {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .35rem;
    height: 28px;
    margin-top: 1.25rem;
    opacity: .35;
}

.radio-player-page__viz span {
    display: block;
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-primary);
}

.radio-player-page.is-playing .radio-player-page__viz {
    opacity: 1;
}

.radio-player-page.is-playing .radio-player-page__viz span {
    animation: radio-page-bar .85s ease-in-out infinite alternate;
    animation-delay: var(--bar-delay, 0s);
}

@keyframes radio-page-bar {
    from { height: 8px; opacity: .55; }
    to   { height: 24px; opacity: 1; }
}

.radio-player-page__footer {
    text-align: center;
}

.radio-player-page__back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-nav-fg, #fff) 10%, transparent);
    color: var(--color-nav-fg, #fff);
    font-size: .88rem;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}

.radio-player-page__back:hover {
    background: color-mix(in srgb, var(--color-nav-fg, #fff) 18%, transparent);
    color: var(--color-nav-fg, #fff);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .radio-player-page {
        padding: 1rem 1rem 1.5rem;
    }

    .radio-player-page__card {
        padding: 1.5rem 1.15rem 1.25rem;
    }

    .radio-player-page__play {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .radio-player-bar {
        display: none;
    }
}

/* =============================================================================
   WHATSAPP — botón flotante
   ============================================================================= */
.whatsapp-float {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    left: auto;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 280;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 4px 18px rgba(37, 211, 102, .45), 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.whatsapp-float:hover {
    transform: scale(1.06);
    background: #20bd5a;
    box-shadow: 0 6px 22px rgba(37, 211, 102, .5), 0 3px 10px rgba(0, 0, 0, .2);
    color: #fff;
}

.whatsapp-float:active {
    transform: scale(.98);
}

body.has-radio-player .whatsapp-float {
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

body.has-radio-player.has-live-program .whatsapp-float {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}

body.has-whatsapp-float .site-footer__bottom-inner {
    padding-right: 5rem;
}

@media (max-width: 768px) {
    .whatsapp-float {
        right: max(.85rem, env(safe-area-inset-right, 0px));
        bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }

    body.has-radio-player .whatsapp-float,
    body.has-radio-player.has-live-program .whatsapp-float {
        bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
    }

    body.has-whatsapp-float .site-footer__bottom-inner {
        padding-right: 0;
    }

    body.has-whatsapp-float .site-footer {
        padding-bottom: 1.5rem;
    }
}

/* ==========================================================================
   FIRMA DE AUTOR + PÁGINA /autor/{id}
   ========================================================================== */

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

.article-meta__author a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.article-signature {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.article-signature__link {
    display:         inline-flex;
    align-items:     center;
    gap:             .85rem;
    text-decoration: none;
    color:           inherit;
    max-width:       100%;
}

.article-signature__link:hover .article-signature__name {
    color: var(--color-primary);
}

.article-signature__avatar {
    width:         48px;
    height:        48px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    border:        2px solid var(--color-border);
}

.article-signature__avatar--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-primary);
    color:           #fff;
    font-weight:     700;
    font-size:       1.1rem;
}

.article-signature__text {
    display:        flex;
    flex-direction: column;
    gap:            .1rem;
    min-width:      0;
}

.article-signature__label {
    font-size:   .75rem;
    color:       var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.article-signature__name {
    font-weight: 700;
    font-size:   1rem;
    transition:  color var(--transition);
}

.author-page__header {
    display:         flex;
    align-items:     center;
    gap:             1.35rem;
    margin-bottom:   2rem;
    padding:         1.35rem 1.5rem;
    border-radius:   14px;
    border:          1px solid var(--color-border);
    background:      var(--color-surface);
    box-shadow:      0 1px 2px rgba(0, 0, 0, .04);
}

.author-page__header.has-bio {
    align-items: flex-start;
}

.author-page__avatar {
    flex-shrink:   0;
    width:         112px;
    height:        112px;
    border-radius: 50%;
    overflow:      hidden;
    border:        3px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
    background:    var(--color-primary);
    box-shadow:    0 4px 14px rgba(0, 0, 0, .08);
}

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

.author-page__initials {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    color:           #fff;
    font-size:       2.35rem;
    font-weight:     700;
    line-height:     1;
}

.author-page__body {
    flex:          1;
    min-width:     0;
    display:       flex;
    flex-direction: column;
    gap:           .85rem;
}

.author-page__top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem 1.25rem;
    width:           100%;
}

.author-page__name {
    margin:      0;
    font-size:   clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    flex:        1 1 auto;
    min-width:   0;
}

.author-page__social {
    flex:          0 0 auto;
    max-width:     100%;
}

.author-page__bio {
    color:       var(--color-text-muted);
    line-height: 1.65;
    font-size:   .95rem;
    max-width:   65ch;
}

.author-social {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
    align-items:     center;
    gap:             .4rem;
}

.author-social__link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1px solid var(--color-border);
    color:           var(--color-text-muted);
    background:      var(--color-background);
    transition:      color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}

.author-social__link:hover {
    color:        var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    background:   color-mix(in srgb, var(--color-primary) 8%, transparent);
    transform:    translateY(-1px);
}

.author-page__articles-head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             .75rem;
    margin-bottom:   1.25rem;
    padding-bottom:  .85rem;
    border-bottom:   1px solid var(--color-border);
}

.author-page__section-title {
    margin:      0;
    font-size:   1.25rem;
    font-weight: 700;
}

.author-page__count {
    flex-shrink:   0;
    font-size:     .8rem;
    font-weight:   600;
    color:         var(--color-text-muted);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 999px;
    padding:       .2rem .65rem;
}

.author-page__empty {
    padding:       2rem 1rem;
    border-radius: 10px;
    background:    var(--color-surface);
    border:        1px dashed var(--color-border);
}

@media (max-width: 720px) {
    .author-page__header {
        padding: 1.15rem 1.2rem;
        gap:     1rem;
    }

    .author-page__avatar {
        width:  88px;
        height: 88px;
    }

    .author-page__initials {
        font-size: 1.85rem;
    }

    .author-page__top {
        align-items: flex-start;
    }

    .author-page__social {
        padding-top: .15rem;
    }

    .author-social {
        gap: .35rem;
    }

    .author-social__link {
        width:  36px;
        height: 36px;
    }
}

@media (max-width: 420px) {
    .author-page__name {
        font-size: 1.25rem;
    }

    .author-social__link {
        width:  34px;
        height: 34px;
    }
}