/* ============================================================
   Voces PTM OnAir
   Los colores los inyecta el Personalizador como variables CSS
   (ver inc/customizer.php). Aquí solo van los valores de reserva.
   ============================================================ */

:root {
    --onair-primary: #00c853;
    --onair-accent: #f70d28;
    --onair-ink: #0c1116;
    --onair-on-header: #ffffff;
    --onair-hero-height: 480px;
    --onair-hero-overlay: 0.55;

    --onair-bg: #f2f5f4;
    --onair-surface: #ffffff;
    --onair-muted: #6b7580;
    --onair-line: #e3e8e6;
    --onair-radius: 14px;
    --onair-shadow: 0 2px 14px rgba(12, 17, 22, .08);
    --onair-max: 1320px;
    --onair-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --onair-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

body {
    margin: 0;
    background: var(--onair-bg);
    color: var(--onair-ink);
    font-family: var(--onair-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--onair-head);
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.1;
    margin: 0 0 .5em;
}

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

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link { position: absolute; left: -9999px; z-index: 999; }
.skip-link:focus {
    left: 8px; top: 8px;
    background: #fff;
    padding: .6rem 1rem;
    clip: auto; clip-path: none;
    width: auto; height: auto;
}

/* Aviso de función bloqueada por licencia (solo lo ven los administradores) */
.onair-locked {
    border: 1px dashed #c3c4c7;
    border-radius: 6px;
    padding: .7rem 1rem;
    margin: .6rem 0;
    font-size: 14px;
    color: #666;
    background: #fff;
}

/* ============================================================
   Iconos (SVG en máscara: heredan el color del texto)
   ============================================================ */
.onair-ico {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    flex: none;
}
.onair-ico--search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E");
}
.onair-ico--play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.onair-ico--volume {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 9v6h4l5 5V4L7 9zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05A4.47 4.47 0 0 0 16.5 12M14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 9v6h4l5 5V4L7 9zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05A4.47 4.47 0 0 0 16.5 12M14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54'/%3E%3C/svg%3E");
}
.onair-ico--popup {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z'/%3E%3C/svg%3E");
}
.onair-ico--tv {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 3H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h6v2H7v2h10v-2h-2v-2h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1m-1 13H4V5h16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 3H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h6v2H7v2h10v-2h-2v-2h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1m-1 13H4V5h16z'/%3E%3C/svg%3E");
}
.onair-ico--home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
.onair-ico--grid {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E");
}
.onair-ico--clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m1 10.59V7h-2v6.41l4.29 4.3 1.42-1.42z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m1 10.59V7h-2v6.41l4.29 4.3 1.42-1.42z'/%3E%3C/svg%3E");
}
.onair-ico--link {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.9 12a4.1 4.1 0 0 1 4.1-4.1h4V6H8a6 6 0 0 0 0 12h4v-1.9H8A4.1 4.1 0 0 1 3.9 12M9 13h6v-2H9zm7-7h-4v1.9h4a4.1 4.1 0 0 1 0 8.2h-4V18h4a6 6 0 0 0 0-12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.9 12a4.1 4.1 0 0 1 4.1-4.1h4V6H8a6 6 0 0 0 0 12h4v-1.9H8A4.1 4.1 0 0 1 3.9 12M9 13h6v-2H9zm7-7h-4v1.9h4a4.1 4.1 0 0 1 0 8.2h-4V18h4a6 6 0 0 0 0-12'/%3E%3C/svg%3E");
}
.onair-ico--facebook {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12'/%3E%3C/svg%3E");
}
.onair-ico--x {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.2 2H21l-6.4 7.3L22 22h-5.9l-4.6-6-5.3 6H3.4l6.8-7.8L2.3 2h6l4.2 5.5zm-1 18.3h1.6L7.9 3.6H6.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.2 2H21l-6.4 7.3L22 22h-5.9l-4.6-6-5.3 6H3.4l6.8-7.8L2.3 2h6l4.2 5.5zm-1 18.3h1.6L7.9 3.6H6.2z'/%3E%3C/svg%3E");
}

/* ============================================================
   Barra superior
   ============================================================ */
.onair-topbar {
    background: var(--onair-ink);
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}
.onair-topbar__inner {
    max-width: var(--onair-max);
    margin-inline: auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.onair-topbar__left { display: flex; align-items: center; gap: 14px; }
.onair-topbar__date { text-transform: capitalize; }
.onair-topbar__freq {
    background: var(--onair-accent);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 3px;
}
.onair-topbar__right { display: flex; align-items: center; gap: 18px; }
.onair-topmenu, .onair-social {
    display: flex; gap: 14px;
    list-style: none; margin: 0; padding: 0;
}
.onair-topmenu a, .onair-social a { text-decoration: none; }
.onair-topmenu a:hover, .onair-social a:hover { color: #fff; }

/* ============================================================
   Barra principal
   ============================================================ */
.site-header { position: relative; }
.site-header.is-sticky { position: sticky; top: 0; z-index: 200; }

.onair-bar {
    background: var(--onair-primary);
    color: var(--onair-on-header);
}
.onair-bar__inner {
    max-width: var(--onair-max);
    margin-inline: auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    transition: padding .18s ease;
}
.site-header.is-compact .onair-bar__inner { padding-block: 7px; }

.onair-brand { flex: none; }
.onair-brand img, .onair-brand .custom-logo {
    max-height: 54px;
    width: auto;
    transition: max-height .18s ease;
}
.site-header.is-compact .onair-brand img { max-height: 40px; }
.onair-brand__text { text-decoration: none; }
.onair-brand__name {
    font-family: var(--onair-head);
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Menú */
.onair-nav { flex: 1 1 auto; min-width: 0; }
.onair-nav-center .onair-nav { display: flex; justify-content: center; }

.primary-menu {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.primary-menu > li { position: relative; }
.primary-menu a {
    display: block;
    padding: 10px 12px;
    font-family: var(--onair-head);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    opacity: .92;
}
.primary-menu a:hover, .primary-menu .current-menu-item > a { opacity: 1; }

.primary-menu .submenu-toggle {
    position: absolute;
    top: 50%; right: -2px;
    transform: translateY(-50%);
    background: none; border: 0;
    color: inherit;
    font-size: 16px; line-height: 1;
    padding: 4px;
    cursor: pointer;
    opacity: .7;
}
.primary-menu .has-dropdown > a { padding-right: 22px; }

.primary-menu .sub-menu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: var(--onair-surface);
    color: var(--onair-ink);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 30px rgba(12, 17, 22, .16);
    list-style: none; margin: 0; padding: 6px 0;
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 30;
}
.primary-menu > li:hover > .sub-menu,
.primary-menu > li.is-open > .sub-menu {
    opacity: 1; visibility: visible; transform: none;
}
.primary-menu .sub-menu a { padding: 9px 16px; font-size: 15px; letter-spacing: .02em; opacity: 1; }
.primary-menu .sub-menu a:hover { background: var(--onair-bg); }

/* ============================================================
   Botones de acción de la cabecera
   ============================================================ */
.onair-actions {
    display: flex; align-items: center; gap: 8px;
    flex: none; margin-left: auto;
}
.onair-actions__slot { margin-right: 6px; }

.onair-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    background: var(--onair-ink);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: var(--onair-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.onair-action:hover { background: #000; transform: translateY(-1px); }
.onair-action--icon { width: 42px; padding: 0; }
.onair-action--popup { background: transparent; border: 2px solid rgba(255, 255, 255, .55); }
.onair-action--popup:hover { background: rgba(0, 0, 0, .18); border-color: #fff; }
body.onair-header-dark .onair-action--popup { border-color: rgba(0, 0, 0, .35); }

/* Hamburguesa */
.onair-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    background: rgba(0, 0, 0, .18);
    border: 0; border-radius: 4px;
    cursor: pointer;
}
.onair-burger__bar {
    display: block;
    width: 20px; height: 2px;
    margin-inline: auto;
    background: currentColor;
    color: var(--onair-on-header);
}

/* Buscador desplegable */
.onair-search { background: var(--onair-ink); padding: 18px 0; }
.onair-search__inner {
    max-width: var(--onair-max);
    margin-inline: auto;
    padding-inline: 20px;
    display: flex; align-items: center; gap: 14px;
}
.onair-search__inner .onair-searchform { flex: 1; }
.onair-search__close {
    background: none; border: 0;
    color: #fff; font-size: 30px; line-height: 1;
    cursor: pointer;
}

.onair-searchform { display: flex; align-items: stretch; }
.onair-searchform input[type="search"] {
    flex: 1; min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--onair-line);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    font: inherit;
}
.onair-searchform__submit {
    width: 52px;
    background: var(--onair-accent);
    color: #fff;
    border: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* ============================================================
   Banner de portada
   ============================================================ */
.onair-hero {
    position: relative;
    min-height: var(--onair-hero-height);
    display: flex; align-items: center;
    background: var(--onair-ink) center/cover no-repeat;
    color: #fff;
}
.onair-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .25));
    opacity: var(--onair-hero-overlay);
}
.onair-hero__inner { position: relative; padding-block: 56px; }
.onair-hero__title { font-size: clamp(38px, 6vw, 76px); margin-bottom: .2em; }
.onair-hero__subtitle {
    font-size: clamp(16px, 2vw, 21px);
    max-width: 46ch;
    margin: 0 0 28px;
    opacity: .92;
}
.onair-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.onair-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 4px;
    font-family: var(--onair-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.onair-btn:hover { transform: translateY(-2px); }
.onair-btn--accent { background: var(--onair-accent); color: #fff; }
.onair-btn--ghost { border-color: currentColor; color: inherit; }

/* ============================================================
   Mosaico de portada
   ============================================================ */
.onair-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 34px;
    --onair-mosaic-fila: 210px;
}
.onair-mosaic__item {
    position: relative;
    border-radius: var(--onair-radius);
    overflow: hidden;
    background: var(--onair-ink);
}

/* --- Destacada a la izquierda: 1 grande, 1 ancha arriba, 2 pequeñas abajo --- */
.onair-mosaic--destacada { grid-template-rows: repeat(2, var(--onair-mosaic-fila)); }
.onair-mosaic--destacada .onair-mosaic__item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.onair-mosaic--destacada .onair-mosaic__item:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
.onair-mosaic--destacada .onair-mosaic__item:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
.onair-mosaic--destacada .onair-mosaic__item:nth-child(4) { grid-area: 2 / 4 / 3 / 5; }

/* --- Dos columnas: 1 grande y 2 apiladas --- */
.onair-mosaic--dos-columnas { grid-template-rows: repeat(2, var(--onair-mosaic-fila)); }
.onair-mosaic--dos-columnas .onair-mosaic__item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.onair-mosaic--dos-columnas .onair-mosaic__item:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
.onair-mosaic--dos-columnas .onair-mosaic__item:nth-child(3) { grid-area: 2 / 3 / 3 / 5; }

/* --- Clásico: 1 grande, 2 pequeñas arriba, 1 ancha abajo --- */
.onair-mosaic--clasico { grid-template-rows: repeat(2, var(--onair-mosaic-fila)); }
.onair-mosaic--clasico .onair-mosaic__item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.onair-mosaic--clasico .onair-mosaic__item:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.onair-mosaic--clasico .onair-mosaic__item:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.onair-mosaic--clasico .onair-mosaic__item:nth-child(4) { grid-area: 2 / 3 / 3 / 5; }

/* --- Revista: 1 grande y 3 apiladas más bajitas --- */
.onair-mosaic--revista { grid-template-rows: repeat(3, calc(var(--onair-mosaic-fila) * .66)); }
.onair-mosaic--revista .onair-mosaic__item:nth-child(1) { grid-area: 1 / 1 / 4 / 3; }
.onair-mosaic--revista .onair-mosaic__item:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
.onair-mosaic--revista .onair-mosaic__item:nth-child(3) { grid-area: 2 / 3 / 3 / 5; }
.onair-mosaic--revista .onair-mosaic__item:nth-child(4) { grid-area: 3 / 3 / 4 / 5; }
.onair-mosaic--revista .onair-mosaic__item--small .onair-mosaic__title { font-size: 18px; }

/* --- Tira: cuatro del mismo tamaño --- */
.onair-mosaic--tira { grid-template-rows: calc(var(--onair-mosaic-fila) * 1.24); }
.onair-mosaic--tira .onair-mosaic__title { font-size: 19px; }

.onair-mosaic__link {
    display: block;
    width: 100%; height: 100%;
    text-decoration: none;
    color: #fff;
}
.onair-mosaic__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.onair-mosaic__item:hover .onair-mosaic__img { transform: scale(1.06); }

.onair-mosaic__shade {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%);
}
.onair-mosaic__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.onair-mosaic__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.12;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.onair-mosaic__item--big .onair-mosaic__title { font-size: clamp(26px, 3vw, 40px); }
.onair-mosaic__date { font-size: 12px; opacity: .8; }

/* Etiqueta de categoría, compartida por mosaico y tarjetas */
.onair-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 3px;
    background: var(--onair-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.onair-section-title {
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 22px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--onair-accent);
}

/* ============================================================
   Layout de contenido
   ============================================================ */
.onair-layout { padding-block: 40px; }
.onair-layout.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
}
.onair-main { min-width: 0; }

.onair-archive-head { margin-bottom: 28px; }
.onair-archive-title { font-size: clamp(28px, 4vw, 44px); }
.onair-archive-title span { color: var(--onair-accent); }
.onair-archive-desc { color: var(--onair-muted); }

/* ============================================================
   Tarjetas de noticias
   ============================================================ */
.onair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.onair-card {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.onair-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(12, 17, 22, .14);
}
.onair-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--onair-line);
}
.onair-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.onair-card:hover .onair-card__media img { transform: scale(1.05); }
.onair-card__placeholder {
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--onair-line), #fff);
}

.onair-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.onair-card__title { font-size: 22px; margin: 0; }
.onair-card__title a { text-decoration: none; }
.onair-card__title a:hover { color: var(--onair-accent); }
.onair-card__excerpt { margin: 0; color: var(--onair-muted); font-size: 15px; }
.onair-card__meta {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--onair-line);
    display: flex; flex-wrap: wrap; gap: 14px;
    color: var(--onair-muted);
    font-size: 13px;
}

/* ============================================================
   Entrada individual
   ============================================================ */
.onair-single {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    padding: 32px;
}
.onair-single__head { margin-bottom: 22px; }
.onair-single__title { font-size: clamp(30px, 4.4vw, 50px); margin-block: 12px; }
.onair-single__media { margin: 0 0 26px; border-radius: 10px; overflow: hidden; }
.onair-single__content { font-size: 17px; }
.onair-single__content > * + * { margin-top: 1.1em; }
.onair-single__content a { color: var(--onair-accent); }
.onair-single__content blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--onair-accent);
    color: var(--onair-muted);
    font-style: italic;
}
.onair-single__tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.onair-single__tags a {
    padding: 4px 12px;
    background: var(--onair-bg);
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
}

.post-navigation { margin-top: 30px; display: grid; gap: 14px; }
.post-navigation a { text-decoration: none; font-weight: 600; }
.post-navigation span {
    display: block;
    font-size: 12px;
    color: var(--onair-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ============================================================
   Barra lateral
   ============================================================ */
.onair-sidebar { display: flex; flex-direction: column; gap: 24px; }
.onair-sidebar .widget {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    padding: 22px;
}
.widget-title {
    font-size: 20px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--onair-accent);
}
.onair-sidebar ul { list-style: none; margin: 0; padding: 0; }
.onair-sidebar > .widget > ul > li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--onair-line);
}
.onair-sidebar a { text-decoration: none; }

/* ============================================================
   Paginación
   ============================================================ */
.pagination, .nav-links { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 6px; }
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px; height: 42px;
    padding-inline: 12px;
    background: var(--onair-surface);
    border-radius: 4px;
    box-shadow: var(--onair-shadow);
    font-weight: 600;
    text-decoration: none;
}
.page-numbers.current, .page-numbers:hover { background: var(--onair-accent); color: #fff; }

/* ============================================================
   Sin resultados / 404
   ============================================================ */
.onair-none {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    padding: 48px 32px;
    text-align: center;
}
.onair-none__title { font-size: clamp(26px, 4vw, 40px); }
.onair-none .onair-searchform { max-width: 460px; margin: 24px auto; }
.onair-404__code {
    font-family: var(--onair-head);
    font-size: clamp(80px, 16vw, 170px);
    line-height: .9;
    margin: 0;
    color: var(--onair-accent);
}

/* ============================================================
   Comentarios
   ============================================================ */
.onair-comments { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--onair-line); }
.onair-comments__list { list-style: none; margin: 0 0 28px; padding: 0; }
.onair-comments__list .children { list-style: none; padding-left: 26px; }
.onair-comments__list li { margin-bottom: 18px; }
.comment-form input:not([type="submit"]),
.comment-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--onair-line);
    border-radius: 6px;
    font: inherit;
}
.comment-form .onair-btn { border: 0; }

/* ============================================================
   Ranking musical
   ============================================================ */
.onair-chart__title {
    font-size: 24px;
    margin: 0 0 16px;
}
.onair-chart__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}

.onair-track {
    display: flex;
    align-items: stretch;
    background: var(--onair-surface);
    border: 1px solid var(--onair-line);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.onair-track:hover {
    box-shadow: 0 6px 18px rgba(12, 17, 22, .12);
    transform: translateY(-2px);
}

.onair-track__cover {
    position: relative;
    flex: none;
    width: 96px;
    background: var(--onair-line) center/cover no-repeat;
}
.onair-track__cover img { width: 100%; height: 100%; object-fit: cover; }
.onair-track__pos {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--onair-head);
    font-size: 46px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    background: rgba(0, 0, 0, .18);
}
.onair-track.has-audio .onair-track__cover { cursor: pointer; }
.onair-track.has-audio .onair-track__cover::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .45) center/28px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity .18s ease;
}
.onair-track.has-audio .onair-track__cover:hover::after,
.onair-track.has-audio .onair-track__cover:focus-visible::after { opacity: 1; }

.onair-track__vote {
    flex: none;
    width: 56px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    border-right: 1px solid var(--onair-line);
}
.onair-track__btn {
    width: 34px; height: 26px;
    border: 0;
    background: transparent center/16px no-repeat;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s ease, transform .15s ease;
}
.onair-track__btn:hover { opacity: 1; transform: scale(1.15); }
.onair-track__btn--up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c853'%3E%3Cpath d='m12 8-6 6 1.4 1.4L12 10.8l4.6 4.6L18 14z'/%3E%3C/svg%3E");
}
.onair-track__btn--down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f70d28'%3E%3Cpath d='m12 16 6-6-1.4-1.4L12 13.2 7.4 8.6 6 10z'/%3E%3C/svg%3E");
}
.onair-track__count {
    font-size: 15px; font-weight: 700;
    color: var(--onair-muted);
    line-height: 1;
}
.onair-track__vote.is-sending { opacity: .5; pointer-events: none; }
.onair-track__vote.is-voted .onair-track__btn { opacity: .25; pointer-events: none; }
.onair-track__vote.is-voted .onair-track__count { color: var(--onair-accent); }
.onair-track__vote.is-closed { width: 46px; }

.onair-track__info {
    flex: 1; min-width: 0;
    padding: 14px 18px;
    display: flex; flex-direction: column; justify-content: center;
    gap: 3px;
}
.onair-track__name { margin: 0; font-size: 19px; line-height: 1.2; }
.onair-track__artist { margin: 0; font-size: 13px; font-weight: 600; color: var(--onair-muted); }
.onair-track__album { font-weight: 400; opacity: .85; }

.onair-track__buy {
    flex: none;
    width: 56px;
    background: transparent center/22px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c853'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M7.2 14.6l1.1-2h7.4c.75 0 1.4-.41 1.75-1.03l3.58-6.49L19.3 4l-3.6 6.5H8.5L4.3 2H1v2h2l3.6 7.6-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7.4z'/%3E%3C/svg%3E");
    opacity: .8;
    transition: opacity .15s ease, transform .15s ease;
}
.onair-track__buy:hover { opacity: 1; transform: scale(1.1); }

.onair-chart__closed {
    margin-top: 12px;
    font-size: 14px;
    color: var(--onair-muted);
    text-align: center;
}

/* En la barra lateral el espacio es estrecho */
.widget .onair-track__cover { width: 64px; }
.widget .onair-track__pos { font-size: 30px; }
.widget .onair-track__name { font-size: 16px; }
.widget .onair-track__buy { display: none; }

/* ============================================================
   Programación
   ============================================================ */
.onair-schedule__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 3px solid var(--onair-line);
}
.onair-schedule__tab {
    flex: 1 1 auto;
    padding: 12px 10px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    color: var(--onair-muted);
    font-family: var(--onair-head);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.onair-schedule__tab:hover { color: var(--onair-ink); }
.onair-schedule__tab.is-active {
    color: var(--onair-accent);
    border-bottom-color: var(--onair-accent);
}
.onair-schedule__tab-short { display: none; }

.onair-schedule__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.onair-schedule__empty { color: var(--onair-muted); }

.onair-slot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: var(--onair-surface);
    border: 1px solid var(--onair-line);
    border-left: 4px solid transparent;
    border-radius: 10px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.onair-slot:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(12, 17, 22, .1); }
.onair-slot.is-live { border-left-color: var(--onair-accent); }

.onair-slot__cover {
    flex: none;
    width: 56px; height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--onair-line);
}
.onair-slot__cover img { width: 100%; height: 100%; object-fit: cover; }

.onair-slot__time {
    flex: none;
    width: 74px;
    display: flex;
    flex-direction: column;
    font-family: var(--onair-head);
    line-height: 1.1;
}
.onair-slot__start { font-size: 24px; font-weight: 700; }
.onair-slot__end { font-size: 14px; color: var(--onair-muted); }

.onair-slot__info { flex: 1; min-width: 0; }
.onair-slot__title { margin: 0; font-size: 19px; }
.onair-slot__title a { text-decoration: none; }
.onair-slot__title a:hover { color: var(--onair-accent); }
.onair-slot__host { margin: 2px 0 0; font-size: 13px; color: var(--onair-muted); }

.onair-slot__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--onair-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}
.onair-slot__badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: onair-blink 1.4s ease-in-out infinite;
}

/* --- Barra "Al aire ahora" --- */
.onair-live {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 14px 20px;
    background: var(--onair-ink);
    color: #fff;
    border-radius: var(--onair-radius);
}
.onair-live__now { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.onair-live__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 3px;
    background: var(--onair-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}
.onair-live__badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: onair-blink 1.4s ease-in-out infinite;
}
.onair-live__cover {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: cover;
}
.onair-live__texts { display: flex; flex-direction: column; min-width: 0; }
.onair-live__title {
    font-family: var(--onair-head);
    font-size: 21px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onair-live__meta { font-size: 13px; color: rgba(255, 255, 255, .65); }

.onair-live__next {
    flex: none;
    display: flex;
    flex-direction: column;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .15);
    max-width: 260px;
}
.onair-live__next-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.onair-live__next-title {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onair-live__play { flex: none; padding: 10px 20px; font-size: 16px; }

/* --- Horarios en la página del programa --- */
.onair-show__head { display: flex; gap: 24px; align-items: center; margin-bottom: 26px; }
.onair-show__cover {
    flex: none;
    width: 180px;
    border-radius: 12px;
    overflow: hidden;
}
.onair-show__intro { min-width: 0; }
.onair-show__host { margin: 0 0 14px; color: var(--onair-muted); font-weight: 600; }
.onair-show__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.onair-show-times { margin-top: 30px; }
.onair-show-times ul { list-style: none; margin: 0; padding: 0; }
.onair-show-times li {
    padding: 10px 0;
    border-bottom: 1px solid var(--onair-line);
}

/* ============================================================
   Clima
   ============================================================ */
.onair-weather {
    background: var(--onair-surface);
    border-radius: 12px;
    overflow: hidden;
}
.onair-weather__header { padding: 14px 18px 0; }
.onair-weather__badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--onair-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.onair-weather__now {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 18px;
}
.onair-weather__place { margin: 0; font-size: 13px; font-weight: 600; color: var(--onair-muted); }
.onair-weather__temp { margin: 2px 0; font-size: 42px; font-weight: 800; line-height: 1; }
.onair-weather__unit { font-size: .5em; font-weight: 600; vertical-align: super; }
.onair-weather__desc { margin: 0; font-size: 14px; color: var(--onair-muted); }

.onair-weather__detail {
    display: flex; gap: 20px;
    padding: 0 18px 14px;
    font-size: 13px;
    color: var(--onair-muted);
}

.onair-weather__hours {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--onair-line);
    max-height: 340px;
    overflow-y: auto;
}
.onair-weather__hour {
    display: grid;
    grid-template-columns: 54px 30px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    font-size: 14px;
}
.onair-weather__hour + .onair-weather__hour { border-top: 1px solid var(--onair-line); }
.onair-weather__hour-time { font-weight: 600; }
.onair-weather__hour-temp { font-weight: 700; }
.onair-weather__hour-rain { color: var(--onair-muted); font-size: 13px; }

.onair-weather__icon {
    display: inline-block;
    width: 28px; height: 28px;
    background: center/contain no-repeat;
    flex: none;
}
.onair-weather__now .onair-weather__icon { width: 64px; height: 64px; }

.onair-weather__icon--sol {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbc02d'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23fbc02d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M19.8 4.2l-2.1 2.1M6.3 17.7l-2.1 2.1'/%3E%3C/g%3E%3C/svg%3E");
}
.onair-weather__icon--nube-sol {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='7' r='3.4' fill='%23fbc02d'/%3E%3Cpath fill='%2390a4ae' d='M18.5 12.4A4.5 4.5 0 0 0 10 11a3.5 3.5 0 0 0 .5 7h8a3 3 0 0 0 0-5.6'/%3E%3C/svg%3E");
}
.onair-weather__icon--nube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390a4ae'%3E%3Cpath d='M18.5 10.4A5.5 5.5 0 0 0 8 9a4 4 0 0 0 .5 8h9.5a3.5 3.5 0 0 0 .5-6.6'/%3E%3C/svg%3E");
}
.onair-weather__icon--niebla {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b0bec5' d='M18.5 9.4A5.5 5.5 0 0 0 8 8a4 4 0 0 0 .5 8h9.5a3.5 3.5 0 0 0 .5-6.6'/%3E%3Cg stroke='%23b0bec5' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 19h16M6 22h12'/%3E%3C/g%3E%3C/svg%3E");
}
.onair-weather__icon--llovizna {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2390a4ae' d='M18.5 8.4A5.5 5.5 0 0 0 8 7a4 4 0 0 0 .5 8h9.5a3.5 3.5 0 0 0 .5-6.6'/%3E%3Cg stroke='%234fc3f7' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 18v2M13 18v2.5M17 18v2'/%3E%3C/g%3E%3C/svg%3E");
}
.onair-weather__icon--lluvia {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2378909c' d='M18.5 8.4A5.5 5.5 0 0 0 8 7a4 4 0 0 0 .5 8h9.5a3.5 3.5 0 0 0 .5-6.6'/%3E%3Cg stroke='%230288d1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8.5 17.5 7 22M13 17.5 11.5 22M17.5 17.5 16 22'/%3E%3C/g%3E%3C/svg%3E");
}
.onair-weather__icon--nieve {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2390a4ae' d='M18.5 8.4A5.5 5.5 0 0 0 8 7a4 4 0 0 0 .5 8h9.5a3.5 3.5 0 0 0 .5-6.6'/%3E%3Cg fill='%2381d4fa'%3E%3Ccircle cx='8.5' cy='19' r='1.4'/%3E%3Ccircle cx='12.5' cy='21' r='1.4'/%3E%3Ccircle cx='16.5' cy='19' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
.onair-weather__icon--tormenta {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23607d8b' d='M18.5 8.4A5.5 5.5 0 0 0 8 7a4 4 0 0 0 .5 8h9.5a3.5 3.5 0 0 0 .5-6.6'/%3E%3Cpath fill='%23fbc02d' d='m13 16-4 4h2.6L10.5 24 15 19h-2.6z'/%3E%3C/svg%3E");
}

.widget .onair-weather { background: none; }

/* ============================================================
   Título de sección
   ============================================================ */
.onair-heading { margin: 0 0 24px; }
.onair-heading--center { text-align: center; }
.onair-heading--right { text-align: right; }

.onair-heading__text {
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    font-size: clamp(24px, 3vw, 36px);
}
.onair-heading__text::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 64px; height: 4px;
    border-radius: 2px;
    background: var(--onair-accent);
}
.onair-heading--center .onair-heading__text::after { left: 50%; transform: translateX(-50%); }
.onair-heading--right .onair-heading__text::after { left: auto; right: 0; }

.onair-heading__sub {
    margin: 12px 0 0;
    color: var(--onair-muted);
    font-size: 16px;
}

/* ============================================================
   Locutores
   ============================================================ */
.onair-hosts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 26px;
}

.onair-host {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    overflow: hidden;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.onair-host:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(12, 17, 22, .14); }

.onair-host__photo {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--onair-line);
}
.onair-host__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.onair-host:hover .onair-host__photo img { transform: scale(1.05); }
.onair-host__placeholder {
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--onair-line), #fff);
}

.onair-host__body { padding: 16px 18px 20px; }
.onair-host__name { margin: 0; font-size: 20px; }
.onair-host__name a { text-decoration: none; }
.onair-host__name a:hover { color: var(--onair-accent); }
.onair-host__role {
    margin: 4px 0 0;
    color: var(--onair-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.onair-host__social {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.onair-host__link {
    display: block;
    width: 32px; height: 32px;
    border-radius: 50%;
    background-size: 16px;
    transition: transform .15s ease;
}
.onair-host__link:hover { transform: translateY(-2px); }

/* ============================================================
   Iconos de marca
   Se usan tanto en los locutores como en la tira de redes con
   contador, por eso viven en un solo sitio.
   ============================================================ */
.onair-net-ico {
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--onair-ink);
}
.onair-net-ico--facebook  { background-color: #1877f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12'/%3E%3C/svg%3E"); }
.onair-net-ico--tiktok    { background-color: #010101; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.6 5.8a4.8 4.8 0 0 1-1-2.8h-3v12.2a2.6 2.6 0 1 1-2.6-2.6c.3 0 .5 0 .8.1V9.6a5.7 5.7 0 1 0 4.8 5.6V9.4a7.8 7.8 0 0 0 4.4 1.4V7.8a4.8 4.8 0 0 1-3.4-2'/%3E%3C/svg%3E"); }
.onair-net-ico--youtube   { background-color: #ff0000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23 7.5s-.2-1.6-.9-2.3c-.9-.9-1.8-.9-2.3-1C16.6 4 12 4 12 4s-4.6 0-7.8.2c-.5.1-1.4.1-2.3 1C1.2 5.9 1 7.5 1 7.5S.8 9.4.8 11.3v1.4c0 1.9.2 3.8.2 3.8s.2 1.6.9 2.3c.9.9 2 .9 2.5 1 1.8.2 7.6.2 7.6.2s4.6 0 7.8-.2c.5-.1 1.4-.1 2.3-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.8v-1.4c0-1.9-.2-3.8-.2-3.8M9.8 15.1V9l5.9 3.1z'/%3E%3C/svg%3E"); }
.onair-net-ico--x         { background-color: #000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.2 2H21l-6.4 7.3L22 22h-5.9l-4.6-6-5.3 6H3.4l6.8-7.8L2.3 2h6l4.2 5.5zm-1 18.3h1.6L7.9 3.6H6.2z'/%3E%3C/svg%3E"); }
.onair-net-ico--whatsapp  { background-color: #25d366; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2m0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2m4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.5.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.4-3c-.2-.4.2-.4.6-1.2.1-.1 0-.3 0-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3c-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7a10 10 0 0 0 4 3.5c1.4.6 2 .6 2.7.5.4-.1 1.3-.5 1.5-1.1s.2-1 .1-1.1z'/%3E%3C/svg%3E"); }

/* Instagram no tiene un color plano: su marca es el degradado. */
.onair-net-ico--instagram {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9s.7.8.9 1.4c.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4s-.8.7-1.4.9c-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9s-.7-.8-.9-1.4c-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4s.8-.7 1.4-.9c.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2m0 3.8a6 6 0 1 0 0 12 6 6 0 0 0 0-12m0 9.9a3.9 3.9 0 1 1 0-7.8 3.9 3.9 0 0 1 0 7.8m7.6-10.1a1.4 1.4 0 1 1-2.8 0 1.4 1.4 0 0 1 2.8 0'/%3E%3C/svg%3E"),
        radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 16px, cover;
}
/* Nota: Instagram lleva dos capas de fondo (icono + degradado). Por eso todas
   las reglas de tamaño de esta tira dan dos valores: el segundo solo lo usa
   Instagram y las demás redes lo ignoran. */

/* ============================================================
   Tira de redes con contador
   ============================================================ */
.onair-nets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px;
    padding: 26px 20px;
}

.onair-net {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease;
}
.onair-net:hover { transform: translateY(-4px); }

.onair-net__ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-size: 30px, cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.onair-net__num {
    font-family: var(--onair-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
}

.onair-net__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}

@media (max-width: 560px) {
    .onair-nets { gap: 22px; }
    .onair-net__ico { width: 52px; height: 52px; background-size: 24px, cover; }
    .onair-net__num { font-size: 24px; }
}

/* ============================================================
   Contador de visitas
   ============================================================ */
.onair-visits {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    overflow: hidden;
}
.onair-visits__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--onair-ink);
    color: #fff;
    font-family: var(--onair-head);
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.onair-visits__icon {
    width: 20px; height: 20px;
    background-color: currentColor;
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5m0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10m0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5m0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10m0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6'/%3E%3C/svg%3E");
    flex: none;
}

.onair-visits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.onair-visits__item {
    padding: 16px 10px;
    text-align: center;
    border-right: 1px solid var(--onair-line);
    border-bottom: 1px solid var(--onair-line);
}
.onair-visits__item:last-child { border-right: 0; }
.onair-visits__number {
    display: block;
    font-family: var(--onair-head);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--onair-accent);
}
.onair-visits__item--total .onair-visits__number { color: var(--onair-ink); }
.onair-visits__label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--onair-muted);
}

/* ============================================================
   Facebook, TikTok y chat
   ============================================================ */
.onair-facebook, .onair-cbox, .onair-tiktok {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    overflow: hidden;
}
.onair-facebook iframe, .onair-cbox iframe, .onair-tiktok iframe { display: block; }

/* ============================================================
   Portadas armadas por el theme

   El reparto lo controla el theme, no el constructor. Por eso se
   puede garantizar que en el móvil todo queda una cosa debajo de
   otra, sin depender de ningún ajuste del cliente.
   ============================================================ */
.onair-home { padding-block: 34px; }
.onair-home__bloque + .onair-home__bloque { margin-top: 44px; }

.onair-home__dos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}
.onair-home__principal { min-width: 0; }
.onair-home__lateral { min-width: 0; }
.onair-home__lateral .onair-home__bloque + .onair-home__bloque { margin-top: 32px; }

/* Dentro de la portada, el mosaico ya no necesita separación extra */
.onair-home .onair-mosaic { margin-top: 0; }
.onair-home .onair-mosaic + .onair-grid { margin-top: 24px; }

/* Los bloques del lateral van enmarcados, como tarjetas */
.onair-home__lateral .onair-weather,
.onair-home__lateral .onair-schedule,
.onair-home__lateral .onair-chart {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    padding: 18px;
}
.onair-home__lateral .onair-weather { padding: 0; overflow: hidden; }

@media (max-width: 1100px) {
    /* Una sola columna: primero el contenido, después lo lateral */
    .onair-home__dos { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 600px) {
    .onair-home { padding-block: 24px; }
    .onair-home__bloque + .onair-home__bloque { margin-top: 32px; }
}

/* ============================================================
   Sección "Interactúa"

   El reparto lo decide el propio theme con auto-fit: cuando una
   columna ya no cabe con su ancho mínimo, la rejilla reduce el
   número de columnas sola. No hay forma de que quede apretada.
   ============================================================ */
.onair-interact { padding-block: 44px; }

.onair-interact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    align-items: start;
}

.onair-interact__col {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    overflow: hidden;
    min-width: 0;
}

.onair-interact__title {
    margin: 0;
    padding: 16px 20px;
    background: var(--onair-ink);
    color: #fff;
    font-size: 19px;
    letter-spacing: .05em;
}

.onair-interact__body { padding: 0; }
.onair-interact__col--pedido .onair-interact__body { padding: 20px; }

/* Los bloques de dentro ya vienen enmarcados: aquí sobra su marco */
.onair-interact__body .onair-request,
.onair-interact__body .onair-facebook,
.onair-interact__body .onair-cbox,
.onair-interact__body .onair-tiktok {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: none;
}
.onair-interact__embed iframe,
.onair-interact__body iframe { display: block; width: 100%; }

/* En pantallas de teléfono, una columna y punto */
@media (max-width: 700px) {
    .onair-interact { padding-block: 30px; }
    .onair-interact__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   Carrusel de banners
   ============================================================ */
.onair-slider {
    position: relative;
    border-radius: var(--onair-radius);
    overflow: hidden;
}

.onair-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* Edge antiguo */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.onair-slider__track::-webkit-scrollbar { display: none; }
.onair-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.onair-slider__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
}
.onair-slider__slide a { display: block; }
.onair-slider__slide img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Con altura fija todos los banners quedan iguales aunque las imágenes varíen */
.onair-slider.has-height .onair-slider__slide,
.onair-slider.has-height .onair-slider__slide a { height: var(--onair-slider-h); }
.onair-slider.has-height .onair-slider__slide img { height: 100%; object-fit: cover; }

.onair-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(12, 17, 22, .55) center/18px no-repeat;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, background-color .18s ease;
}
.onair-slider:hover .onair-slider__arrow,
.onair-slider__arrow:focus-visible { opacity: 1; }
.onair-slider__arrow:hover { background-color: var(--onair-accent); }
.onair-slider__arrow--prev {
    left: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4-4.6-4.6z'/%3E%3C/svg%3E");
}
.onair-slider__arrow--next {
    right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='m8.6 16.6 1.4 1.4 6-6-6-6-1.4 1.4 4.6 4.6z'/%3E%3C/svg%3E");
}

.onair-slider__dots {
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.onair-slider__dot {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: background .15s ease, width .15s ease;
}
.onair-slider__dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: var(--onair-accent);
}

/* En pantallas táctiles las flechas estorban: se arrastra y ya */
@media (hover: none) {
    .onair-slider__arrow { display: none; }
}

/* ============================================================
   Solicitud de canciones
   ============================================================ */
.onair-request {
    background: var(--onair-surface);
    border-radius: var(--onair-radius);
    box-shadow: var(--onair-shadow);
    padding: 24px;
}
.onair-request__title { margin: 0 0 6px; font-size: 24px; }
.onair-request__intro { margin: 0 0 18px; color: var(--onair-muted); font-size: 15px; }

.onair-request__field { margin-bottom: 14px; }
.onair-request__field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--onair-muted);
}
.onair-request__field input,
.onair-request__field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--onair-line);
    border-radius: 8px;
    font: inherit;
    background: var(--onair-bg);
}
.onair-request__field input:focus,
.onair-request__field textarea:focus {
    outline: 2px solid var(--onair-accent);
    outline-offset: 1px;
    background: #fff;
}

.onair-btn--wa { background: #25d366; color: #fff; width: 100%; justify-content: center; }
.onair-btn--wa:hover { background: #1fb855; }
.onair-ico--wa {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2m0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2m4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.5.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.4-3c-.2-.4.2-.4.6-1.2.1-.1 0-.3 0-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3c-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7a10 10 0 0 0 4 3.5c1.4.6 2 .6 2.7.5.4-.1 1.3-.5 1.5-1.1s.2-1 .1-1.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2m0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2m4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.5.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.4-3c-.2-.4.2-.4.6-1.2.1-.1 0-.3 0-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3c-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7a10 10 0 0 0 4 3.5c1.4.6 2 .6 2.7.5.4-.1 1.3-.5 1.5-1.1s.2-1 .1-1.1z'/%3E%3C/svg%3E");
}

.onair-request__error {
    margin: 12px 0 0;
    color: var(--onair-accent);
    font-size: 14px;
    font-weight: 600;
}

/* En la barra lateral las tarjetas ya vienen enmarcadas */
.widget .onair-visits,
.widget .onair-request,
.widget .onair-facebook,
.widget .onair-cbox { box-shadow: none; padding: 0; }
.widget .onair-request { padding: 0; }

/* ============================================================
   Pie
   ============================================================ */
.site-footer {
    margin-top: 40px;
    background: var(--onair-ink);
    color: rgba(255, 255, 255, .78);
}
.onair-footer-widgets { padding-block: 46px; }
.onair-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}
.site-footer .widget-title { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }

.onair-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.onair-footer-bottom__inner {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 14px;
    padding-block: 18px;
}
.onair-credits { margin: 0; }
.onair-footer-menu { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* Marca de quien desarrolla el theme */
.onair-brandbar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
}
.onair-brandbar > .onair-container { padding-block: 13px; }
.onair-brandmark {
    margin: 0;
    text-align: center;
    line-height: 1.7;
    color: rgba(255, 255, 255, .6);
}
.onair-brandmark a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.onair-brandmark a:hover { color: #fff; border-bottom-color: currentColor; }
.onair-brandmark strong { color: rgba(255, 255, 255, .82); font-weight: 700; }
.onair-brandmark__sep { opacity: .45; margin-inline: 3px; }

/* Cuando el pie lo pinta Elementor, la barra tiene que traerse su propio fondo. */
.onair-brandbar--suelta {
    background: var(--onair-ink);
    color: rgba(255, 255, 255, .78);
    border-top: 0;
}

/* ============================================================
   Adaptación a pantallas pequeñas
   ============================================================ */
@media (max-width: 1100px) {
    .onair-layout.has-sidebar { grid-template-columns: 1fr; }
    .onair-action__label { display: none; }
    .onair-action { width: 42px; padding: 0; }
}

@media (max-width: 900px) {
    .onair-burger { display: flex; }
    .onair-bar__inner { gap: 12px; }

    .onair-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--onair-surface);
        color: var(--onair-ink);
        box-shadow: 0 14px 30px rgba(12, 17, 22, .2);
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        z-index: 50;
    }
    .onair-nav.is-open { max-height: 75vh; overflow-y: auto; }

    .primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .primary-menu > li { border-bottom: 1px solid var(--onair-line); }
    .primary-menu a { padding: 14px 20px; opacity: 1; }
    .primary-menu .submenu-toggle { right: 10px; font-size: 22px; }

    .primary-menu .sub-menu {
        position: static;
        opacity: 1; visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: var(--onair-bg);
        display: none;
    }
    .primary-menu > li.is-open > .sub-menu { display: block; }

    .onair-topbar__date { display: none; }

    /* En dos columnas las composiciones fijas ya no caben: la destacada pasa a
       ocupar el ancho completo y el resto se reparte de dos en dos. */
    .onair-mosaic,
    .onair-mosaic--destacada,
    .onair-mosaic--dos-columnas,
    .onair-mosaic--clasico,
    .onair-mosaic--revista,
    .onair-mosaic--tira {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-rows: 180px;
    }
    .onair-mosaic .onair-mosaic__item { grid-area: auto !important; }
    .onair-mosaic .onair-mosaic__item--big { grid-column: span 2; height: 260px; }
    /* Una pieza suelta al final se estira para no dejar un hueco */
    .onair-mosaic--dos-columnas .onair-mosaic__item:nth-child(3) { grid-column: span 2; }
}

@media (max-width: 780px) {
    /* Con siete pestañas no caben los nombres completos */
    .onair-schedule__tab-full { display: none; }
    .onair-schedule__tab-short { display: inline; }
    .onair-schedule__tab { flex: 1 1 0; padding-inline: 4px; }

    .onair-live { flex-wrap: wrap; gap: 14px; }
    .onair-live__next {
        order: 3;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
        padding-top: 12px;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .onair-single { padding: 22px 18px; }

    .onair-slot { gap: 12px; padding: 10px 12px; }
    .onair-slot__cover { display: none; }
    .onair-slot__time { width: 58px; }
    .onair-slot__start { font-size: 19px; }
    .onair-slot__title { font-size: 17px; }
    .onair-slot__badge { font-size: 0; padding: 6px; gap: 0; }

    .onair-show__head { flex-direction: column; align-items: flex-start; }
    .onair-show__cover { width: 140px; }
    .onair-grid { grid-template-columns: 1fr; }
    .onair-hero__inner { padding-block: 40px; }

    /* En el móvil todas las composiciones son una sola columna */
    .onair-mosaic,
    .onair-mosaic--destacada,
    .onair-mosaic--dos-columnas,
    .onair-mosaic--clasico,
    .onair-mosaic--revista,
    .onair-mosaic--tira {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 12px;
    }
    .onair-mosaic .onair-mosaic__item { grid-area: auto !important; height: 210px; }
    .onair-mosaic .onair-mosaic__item--big { height: 260px; }

    .onair-track__cover { width: 74px; }
    .onair-track__pos { font-size: 34px; }
    .onair-track__name { font-size: 17px; }
    .onair-track__buy { width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Cabecera en pantallas de teléfono

   El nombre de la emisora a 30px más los botones y la hamburguesa
   no caben en 360-390px: la página acababa desbordando y el móvil
   dejaba arrastrarla de lado, que es lo que se ve como "deformado".
   ============================================================ */
@media (max-width: 900px) {
    .onair-bar__inner { gap: 10px; padding-inline: 14px; }

    /* La marca cede espacio en vez de empujar a los demás */
    .onair-brand { flex: 1 1 auto; min-width: 0; }
    .onair-brand__text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .onair-brand__name { font-size: 22px; }
    .onair-brand img, .onair-brand .custom-logo { max-height: 40px; }

    .onair-actions { gap: 6px; flex: none; }
    .onair-burger { flex: none; }
}

@media (max-width: 560px) {
    .onair-brand__name { font-size: 19px; }
    .onair-bar__inner { padding-inline: 10px; gap: 8px; }

    /* La ventana emergente ya tiene su botón en el reproductor de abajo,
       así que arriba se puede prescindir de él y ganar sitio. */
    .onair-actions .onair-action--popup { display: none; }
}

@media (max-width: 380px) {
    .onair-brand__name { font-size: 17px; }
    .onair-action, .onair-action--icon { width: 38px; height: 38px; }
    .onair-burger { width: 38px; height: 38px; }
}

/* El reproductor tampoco debe empujar la página a lo ancho */
@media (max-width: 620px) {
    .onair-player--barra { padding-inline: 10px; gap: 8px; }
    .onair-player--barra .onair-player__texts { min-width: 0; }
}

/**
 * Red de seguridad: nada debe poder ensanchar la página.
 *
 * Se usa "clip" y no "hidden" a propósito: hidden convertiría el body en
 * una zona desplazable y rompería la cabecera fija.
 */
body { overflow-x: clip; }

/* ============================================================
   Adaptación al ancho del contenedor

   Las reglas de arriba miran el ancho de la pantalla, y eso no basta:
   un widget puede quedar en una columna de 150 px aunque la pantalla
   sea ancha, o al revés. Aquí cada bloque se mide a sí mismo y se
   reorganiza según el sitio que realmente tiene.
   ============================================================ */

.onair-chart,
.onair-weather,
.onair-request,
.onair-visits,
.onair-nets,
.onair-hosts,
.onair-schedule,
.onair-live,
.onair-grid,
.onair-mosaic {
    container-type: inline-size;
}

/* --- Ranking musical --- */
@container (max-width: 340px) {
    .onair-track__cover { width: 62px; }
    .onair-track__pos { font-size: 26px; }
    .onair-track__info { padding: 10px 12px; }
    .onair-track__name { font-size: 15px; }
    .onair-track__buy { display: none; }
}
@container (max-width: 250px) {
    /* Sin sitio para columnas: la carátula arriba y los datos debajo */
    .onair-track { flex-wrap: wrap; }
    .onair-track__cover { width: 100%; aspect-ratio: 16 / 7; }
    .onair-track__vote {
        width: auto;
        flex-direction: row;
        gap: 10px;
        padding: 6px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--vptmc-line, var(--onair-line));
    }
    .onair-track__info { flex-basis: 100%; }
}

/* --- Clima --- */
@container (max-width: 320px) {
    .onair-weather__now { gap: 12px; padding: 14px; }
    .onair-weather__now .onair-weather__icon { width: 46px; height: 46px; }
    .onair-weather__temp { font-size: 32px; }
    .onair-weather__hour { grid-template-columns: 46px 24px 1fr; padding-inline: 12px; }
    .onair-weather__hour-rain { display: none; }
    .onair-weather__detail { flex-wrap: wrap; gap: 8px; padding-inline: 14px; }
}
@container (max-width: 210px) {
    .onair-weather__hour { grid-template-columns: 1fr auto; gap: 6px; }
    .onair-weather__hour .onair-weather__icon { display: none; }
    .onair-weather__place { font-size: 12px; }
}

/* --- Pedir canción --- */
@container (max-width: 300px) {
    .onair-request { padding: 16px; }
    .onair-request__title { font-size: 19px; }
    .onair-btn--wa {
        padding: 12px 10px;
        font-size: 14px;
        letter-spacing: .02em;
        text-align: center;
        flex-wrap: wrap;
        word-break: break-word;
    }
}

/* --- Contador de visitas --- */
@container (max-width: 300px) {
    .onair-visits__grid { grid-template-columns: repeat(2, 1fr); }
    .onair-visits__head { padding: 11px 12px; font-size: 15px; gap: 7px; }
    .onair-visits__title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@container (max-width: 170px) {
    .onair-visits__grid { grid-template-columns: 1fr; }
    .onair-visits__item { border-right: 0; }
    .onair-visits__icon { display: none; }
}

/* --- Redes con contador --- */
@container (max-width: 300px) {
    .onair-nets { gap: 16px; padding: 18px 12px; }
    .onair-net__ico { width: 44px; height: 44px; background-size: 20px, cover; }
    .onair-net__num { font-size: 20px; }
    .onair-net__label { font-size: 10px; letter-spacing: .06em; }
}

/* --- Locutores --- */
@container (max-width: 300px) {
    .onair-hosts__grid { grid-template-columns: 1fr; }
}

/* --- Programación --- */
@container (max-width: 380px) {
    .onair-schedule__tab-full { display: none; }
    .onair-schedule__tab-short { display: inline; }
    .onair-schedule__tab { flex: 1 1 0; padding-inline: 2px; font-size: 15px; }
    .onair-slot { gap: 10px; padding: 10px 12px; }
    .onair-slot__cover { display: none; }
    .onair-slot__time { width: 52px; }
    .onair-slot__start { font-size: 18px; }
    .onair-slot__title { font-size: 16px; }
    .onair-slot__badge { font-size: 0; padding: 6px; gap: 0; }
}

/* --- Barra al aire --- */
@container (max-width: 420px) {
    .onair-live { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
    .onair-live__next {
        order: 3;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
        padding-top: 10px;
        max-width: none;
    }
    .onair-live__play { width: 100%; justify-content: center; }
}

/* --- Rejilla de tarjetas y mosaico --- */
@container (max-width: 420px) {
    .onair-grid { grid-template-columns: 1fr; }
}
@container (max-width: 480px) {
    .onair-mosaic,
    .onair-mosaic--destacada,
    .onair-mosaic--dos-columnas,
    .onair-mosaic--clasico,
    .onair-mosaic--revista,
    .onair-mosaic--tira {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
    }
    .onair-mosaic .onair-mosaic__item { grid-area: auto !important; height: 190px; }
    .onair-mosaic .onair-mosaic__item--big { height: 240px; }
    .onair-mosaic__title { font-size: 18px; }
    .onair-mosaic__item--big .onair-mosaic__title { font-size: 22px; }
}

/* ============================================================
   Los bloques incrustados de terceros (TikTok, Facebook, chat)
   no se pueden reorganizar desde fuera: lo único sensato es
   permitir que se desplacen si la columna es más angosta que su
   contenido mínimo, en vez de romper la página.
   ============================================================ */
.onair-tiktok, .onair-facebook, .onair-cbox { max-width: 100%; overflow-x: auto; }
.onair-tiktok iframe { min-width: 280px; }
.onair-facebook iframe { min-width: 180px; }
.onair-cbox iframe { min-width: 200px; }