/* ==========================================================
   TRANSMISIÓN EN DIRECTO (Facebook Live)
   ========================================================== */
.dir { margin: 0 0 34px; scroll-margin-top: 96px; }
.dir-card {
    position: relative; overflow: hidden; border-radius: var(--radius-card, 28px);
    color: #fff; box-shadow: var(--shadow-card);
    background: linear-gradient(115deg, #2a1810 0%, #3a2818 35%, var(--color-accent-dark, #1a2a3a) 75%, #2d4a6a 100%);
    isolation: isolate;
}
.dir-card::before { /* brillo dorado sutil */
    content: ""; position: absolute; inset: -40% -10% auto auto; width: 420px; height: 420px; z-index: -1;
    background: radial-gradient(circle, rgba(232,201,122,.16), transparent 62%); pointer-events: none;
}
.dir-card.is-directo { background: linear-gradient(120deg, #1d0d0a 0%, #3a1512 38%, #2a1810 70%, #1a2a3a 100%); }
.dir-card.is-directo::before { background: radial-gradient(circle, rgba(255,77,82,.22), transparent 62%); }

/* ---------- Espera ---------- */
.dir-espera { display: flex; align-items: center; gap: 20px; padding: 24px 28px; }
.dir-ico {
    position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center; color: #e8c97a;
    background: rgba(232,201,122,.1); box-shadow: inset 0 0 0 1px rgba(232,201,122,.3);
}
.dir-ico svg { width: 30px; height: 30px; position: relative; }
.dir-ondas, .dir-ondas::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(232,201,122,.45); animation: dirOnda 2.8s ease-out infinite;
}
.dir-ondas::after { animation-delay: 1.4s; }
@keyframes dirOnda { 0% { box-shadow: 0 0 0 0 rgba(232,201,122,.45); } 100% { box-shadow: 0 0 0 22px rgba(232,201,122,0); } }

.dir-txt { flex: 1; min-width: 0; }
.dir-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #e8c97a; margin-bottom: 4px; }
.dir-prox { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; font-weight: 600; }
.dir-prox span { color: #c5a059; margin: 0 2px; }
.dir-horario { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.dir-horario svg { width: 15px; height: 15px; flex: none; opacity: .8; }

.dir-cuenta { display: flex; gap: 8px; flex: none; }
.dir-u {
    min-width: 62px; padding: 10px 6px 8px; text-align: center; border-radius: 16px;
    background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.dir-u b { display: block; font-size: 26px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.dir-u small { display: block; margin-top: 5px; font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dir-cuenta.is-cerca .dir-u { background: rgba(232,201,122,.14); box-shadow: inset 0 0 0 1px rgba(232,201,122,.4); }
.dir-cuenta.is-cerca .dir-u b { color: #e8c97a; }
.dir-empezando {
    display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px;
    font-weight: 700; color: #241708; background: linear-gradient(135deg, #e8c97a, #c5a059);
    animation: dirLatido 1.8s ease-in-out infinite;
}
.dir-empezando i { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; }
.dir-cuenta.is-empezando .dir-u { display: none; }
.dir-empezando[hidden], .dir [hidden], .dir[hidden] { display: none !important; }
@keyframes dirLatido { 50% { box-shadow: 0 0 0 8px rgba(232,201,122,.15); } }

.dir-extra {
    display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 28px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.dir-ultima { padding: 0 28px 24px; }
.dir-ultima .dir-player { border-radius: 18px; }
.dir-aviso { margin: 0; padding: 0 28px 22px; font-size: 13.5px; color: rgba(255,255,255,.75); }

/* ---------- Botones ---------- */
.dir-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    font: 600 14px/1.2 var(--font-system); color: #fff; text-decoration: none; cursor: pointer; border: 0;
    background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    transition: background .2s, transform .2s, box-shadow .2s;
}
.dir-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); color: #fff; }
.dir-btn svg { width: 16px; height: 16px; flex: none; }
.dir-btn em { white-space: nowrap; font-style: normal; color: rgba(255,255,255,.6); font-weight: 500; }
.dir-btn[aria-expanded="true"] { background: rgba(232,201,122,.16); box-shadow: inset 0 0 0 1px rgba(232,201,122,.45); }
.dir-btn.is-oro { color: #241708; background: linear-gradient(135deg, #e8c97a, #c5a059); box-shadow: 0 8px 20px -10px rgba(232,201,122,.9); }
.dir-btn.is-oro:hover { color: #241708; }
.dir-btn.is-suave { background: transparent; }

/* ---------- En directo ---------- */
.dir-cab { display: flex; align-items: center; gap: 16px; padding: 20px 26px 18px; }
.dir-live {
    flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    background: #e5484d; color: #fff; box-shadow: 0 6px 18px -6px rgba(229,72,77,.9);
}
.dir-live i {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    animation: dirPunto 1.4s ease-in-out infinite;
}
@keyframes dirPunto { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.dir-cab-txt { min-width: 0; }
.dir-tit { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.2; font-weight: 600; color: #fff; }
.dir-meta { margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.65); }

.dir-player {
    position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
}
.dir-card.is-directo .dir-player { margin: 0 14px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.dir-player.is-vertical { aspect-ratio: 9 / 16; max-height: 78vh; margin-left: auto !important; margin-right: auto !important; width: min(100% - 28px, 440px); }
.dir-ultima .dir-player.is-vertical { width: min(100%, 440px); }
.dir-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dir-portada {
    position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; color: #fff; text-align: center; padding: 20px;
    background:
        radial-gradient(ellipse at center, rgba(229,72,77,.18), transparent 60%),
        linear-gradient(160deg, #241708, #0f141c);
}
.dir-ultima .dir-portada { background: radial-gradient(ellipse at center, rgba(232,201,122,.14), transparent 60%), linear-gradient(160deg, #241708, #0f141c); }
.dir-play {
    width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
    background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 30px -8px rgba(0,0,0,.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform .25s, background .25s;
}
.dir-play svg { width: 32px; height: 32px; margin-left: 4px; }
.dir-portada:hover .dir-play { transform: scale(1.07); background: #e5484d; }
.dir-ultima .dir-portada:hover .dir-play { background: #c5a059; color: #241708; }
.dir-portada-t { font-size: 18px; font-weight: 700; }
.dir-portada-n { font-size: 12.5px; color: rgba(255,255,255,.55); }
.dir-player.is-cargando .dir-portada { pointer-events: none; }
.dir-player.is-cargando .dir-play { animation: dirLatido 1s infinite; }

.dir-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 26px 20px; }
.dir-pie-txt { font-size: 13px; color: rgba(255,255,255,.6); }
.dir-acc { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Pastilla flotante bajo la cabecera ----------
   Va fuera de la fila del menú para no empujar ni tapar las pestañas. */
.hdr-directo {
    position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5;
    display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; border: 0; cursor: pointer;
    font: 600 13px/1 var(--font-system); color: #fff; white-space: nowrap;
    background: rgba(26,17,9,.82); backdrop-filter: saturate(170%) blur(20px); -webkit-backdrop-filter: saturate(170%) blur(20px);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
    transform: translateX(-50%); animation: dirEntra .5s cubic-bezier(.3,1.3,.5,1) both;
    transition: opacity .3s, transform .3s, box-shadow .2s;
}
.hdr-directo i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d52; box-shadow: 0 0 0 4px rgba(255,77,82,.22); flex: none; }
.hdr-directo span { font-weight: 800; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; }
.hdr-directo em {
    font-style: normal; font-weight: 700; padding: 7px 12px; border-radius: 999px; color: #fff;
    background: #e5484d; box-shadow: 0 6px 16px -6px rgba(229,72,77,.9);
}
.hdr-directo:hover { box-shadow: 0 18px 38px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.2); }
.hdr-directo:hover em { background: #f05257; }
.hdr-directo.is-oculta { opacity: 0; pointer-events: none; transform: translate(-50%, -8px); }
.hdr-directo[hidden] { display: none; }
@keyframes dirEntra { from { opacity: 0; transform: translate(-50%, -10px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* ---------- Pista de pantalla completa (móvil) ---------- */
.dir-pista { display: none; }
.dir-pie-txt.is-movil { display: none; }
@media (hover: none) and (pointer: coarse) {
    .dir-pie-txt.is-pc { display: none; }
    .dir-pie-txt.is-movil { display: inline; }
    .dir-player.is-cargado .dir-pista {
        position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%);
        display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
        font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; pointer-events: none;
        background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        animation: dirPista 7s ease forwards;
    }
    .dir-pista b { font-size: 16px; line-height: 1; color: #e8c97a; animation: dirLatidoIco 1.2s ease-in-out 3; }
}
    .dir-player.is-tocado .dir-pista { display: none !important; }
@keyframes dirPista { 0% { opacity: 0; transform: translate(-50%, 8px); } 6%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes dirLatidoIco { 50% { transform: scale(1.35); } }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .dir-espera { flex-wrap: wrap; padding: 20px; gap: 16px; }
    .dir-ico { width: 52px; height: 52px; }
    .dir-ico svg { width: 26px; height: 26px; }
    .dir-txt { flex: 1 1 calc(100% - 70px); }
    .dir-prox { font-size: 22px; }
    .dir-cuenta { width: 100%; }
    .dir-u { flex: 1; min-width: 0; }
    .dir-empezando { width: 100%; justify-content: center; }
    .dir-extra { padding: 14px 20px 18px; }
    .dir-btn { flex: 1 1 auto; justify-content: center; }
    .dir-ultima { padding: 0 20px 20px; }
    .dir-aviso { padding: 0 20px 18px; }
    .dir-cab { padding: 18px 18px 14px; gap: 12px; flex-wrap: wrap; }
    .dir-tit { font-size: 19px; }
    .dir-card.is-directo .dir-player { margin: 0 10px; border-radius: 14px; }
    .dir-player.is-vertical { width: min(100% - 20px, 440px); }
    .dir-pie { padding: 14px 18px 18px; }
    .dir-pie .dir-acc { width: 100%; }
    .hdr-directo { top: calc(100% + 10px); height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .dir-ondas, .dir-ondas::after, .dir-live i, .dir-empezando, .hdr-directo, .dir-pista b { animation: none; }
}