/* Radio: mismos tonos azul, morado y fucsia de la portada. */
.radio { position:relative; isolation:isolate; min-height:calc(100vh - 170px); padding:54px 20px 80px; overflow:hidden; }
.radio::before { content:""; position:fixed; z-index:-2; inset:0; background:url("../img/fondo-hero.webp") center top / cover no-repeat; }
.radio::after { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 16% 20%,rgba(37,184,255,.20),transparent 30%),radial-gradient(circle at 82% 75%,rgba(208,76,255,.18),transparent 34%),rgba(9,13,35,.64); }
.radio-cabecera { max-width:900px; margin:0 auto 34px; text-align:center; }
.radio-eyebrow { margin-bottom:9px; color:#8edbff; font-size:12px; font-weight:800; letter-spacing:2px; }
.radio-marca { width:min(380px,78vw); margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.radio-marca img:first-child { display:block; width:100%; height:auto; }
.radio-marca img:last-child { display:block; width:72%; height:auto; margin-top:2px; }
.radio h1 { margin:0; color:#fff; font-family:'Allura',cursive; font-size:clamp(58px,8vw,92px); font-weight:400; line-height:.9; text-shadow:0 0 22px rgba(94,195,255,.6); }
.radio .subtitulo { max-width:760px; margin:18px auto 0; color:#f0f6ff; font-family:Arial,Helvetica,sans-serif; font-size:clamp(19px,2vw,24px); font-weight:600; line-height:1.45; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.radio-secciones { --radio-cerrada:calc((100% - 36px)/6); width:min(1080px,100%); min-height:220px; margin:0 auto; display:flex; justify-content:center; align-items:flex-start; gap:18px; }
.radio-categoria { flex:0 0 var(--radio-cerrada); width:var(--radio-cerrada); min-width:0; overflow:hidden; border:1px solid rgba(135,194,255,.26); border-radius:18px; background:linear-gradient(135deg,rgba(23,34,76,.91),rgba(22,22,56,.88)); box-shadow:0 16px 38px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(14px); transition:flex-basis .28s ease,width .28s ease,box-shadow .28s ease; }
.radio-categoria[open] { flex:1 1 auto; width:auto; display:grid; grid-template-columns:var(--radio-cerrada) minmax(0,1fr); align-items:start; box-shadow:0 20px 44px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08); }
.radio-categoria summary { display:flex; width:100%; aspect-ratio:1 / 1; box-sizing:border-box; flex-direction:column; justify-content:center; align-items:center; gap:8px; min-height:0; padding:13px 10px; cursor:pointer; list-style:none; text-align:center; transition:background .2s ease; }
.radio-categoria summary::-webkit-details-marker { display:none; }
.radio-categoria summary:hover { background:rgba(96,157,255,.10); }
.radio-categoria-icono { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:1px solid rgba(141,215,255,.38); border-radius:12px; background:rgba(37,184,255,.12); font-size:18px; box-shadow:0 0 20px rgba(37,184,255,.13); }
.radio-categoria-texto { display:grid; gap:4px; text-align:center; }
.radio-categoria-texto strong { color:#fff; font-size:clamp(15px,1.45vw,18px); line-height:1.12; }
.radio-categoria-texto small { color:#bad3ff; font-size:11px; line-height:1.22; }
.radio-categoria-flecha { width:9px; height:9px; margin:2px 0 0; border-right:2px solid #b9d9ff; border-bottom:2px solid #b9d9ff; transform:rotate(45deg) translateY(-3px); transition:transform .22s ease; }
.radio-categoria:not([open]) .radio-categoria-flecha { transform:rotate(-45deg) translateY(4px); }
.radio-categoria-destacada { border-color:rgba(214,125,255,.42); background:linear-gradient(135deg,rgba(43,29,83,.94),rgba(20,34,75,.92)); }
.radio-contenido { min-width:0; padding:16px; border-top:0; border-left:1px solid rgba(255,255,255,.08); }
.radio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:10px; }
.radio-grid-una { grid-template-columns:minmax(205px,350px); justify-content:center; }
.radio-paises { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:row dense; width:100%; margin:0; gap:10px; }
.radio-pais-acordeon { display:block; min-width:0; align-self:start; }
.radio-pais-acordeon > summary { display:flex; min-width:0; min-height:58px; box-sizing:border-box; align-items:center; justify-content:space-between; gap:7px; padding:10px 12px; cursor:pointer; list-style:none; overflow:hidden; border:1px solid rgba(142,219,255,.24); border-radius:14px; background:rgba(255,255,255,.045); color:#fff; font-size:14px; font-weight:800; }
.radio-pais-acordeon > summary::-webkit-details-marker { display:none; }
.radio-pais-acordeon > summary::after { content:""; width:8px; height:8px; margin-left:auto; border-right:2px solid #8edbff; border-bottom:2px solid #8edbff; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
.radio-pais-acordeon[open] > summary::after { transform:rotate(225deg) translate(-2px,-2px); }
.radio-pais-acordeon > summary:hover { background:rgba(74,147,255,.12); }
.radio-pais-acordeon > summary > span { display:flex; align-items:center; gap:8px; }
.radio-pais-acordeon > summary > small { order:2; flex:0 0 auto; color:#a9c7ef; font-size:10px; font-weight:600; }
.radio-pais-emisoras { display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px; padding:8px; border:1px solid rgba(142,219,255,.18); border-radius:14px; background:rgba(8,18,52,.42); }
.radio-pais-emisoras .radio-card { width:100%; min-height:76px; margin:0; }
.radio-categoria .radio-pais-acordeon > summary { width:100%; height:auto; aspect-ratio:auto; min-height:58px; flex-direction:row; justify-content:space-between; padding:10px 12px; text-align:left; border:1px solid rgba(142,219,255,.24); border-radius:14px; background:rgba(255,255,255,.045); box-shadow:none; backdrop-filter:none; }
.radio-card { display:flex; min-width:0; min-height:68px; align-items:center; gap:10px; padding:9px; overflow:hidden; border:1px solid rgba(156,201,255,.20); border-radius:13px; background:rgba(255,255,255,.055); color:#fff; font:inherit; text-align:left; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.radio-card:hover,.radio-card:focus-visible { outline:none; transform:translateY(-4px); border-color:#76d0ff; background:rgba(74,147,255,.17); box-shadow:0 10px 25px rgba(29,144,255,.20); }
.radio-card img { flex:0 0 46px; width:46px; height:46px; object-fit:contain; border-radius:10px; }
.radio-card-texto { display:grid; gap:5px; min-width:0; }
.radio-card-texto strong { font-size:15px; }
.radio-card-texto small { color:#c7d8fa; font-size:11px; line-height:1.25; }
.radio-card-principal { flex-wrap:nowrap; justify-content:center; padding:10px; text-align:left; border-color:rgba(218,125,255,.38); background:linear-gradient(135deg,rgba(117,105,255,.27),rgba(208,76,255,.18)); }
.radio-card-principal .radio-card-texto { width:auto; text-align:left; }
.radio-card-principal .radio-card-texto strong { font-size:17px; }
.radio-card-principal:hover { border-color:#e191ff; box-shadow:0 12px 30px rgba(193,83,255,.30); }
.escuchar-ahora { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.13); color:#fff; font-size:12px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
@media (max-width:760px) { .radio { padding:34px 13px 56px; } .radio-secciones { --radio-cerrada:min(280px,100%); min-height:0; flex-wrap:wrap; gap:12px; } .radio-categoria { flex-basis:var(--radio-cerrada); } .radio-categoria[open] { flex:0 0 100%; grid-template-columns:var(--radio-cerrada) minmax(0,1fr); } .radio-categoria summary { width:100%; height:92px; aspect-ratio:auto; flex-direction:row; justify-content:flex-start; padding:12px 14px; gap:11px; text-align:left; } .radio-categoria-texto { flex:1; text-align:left; } .radio-categoria-flecha { flex:0 0 9px; margin-left:auto; } .radio-categoria-texto small { font-size:10px; } .radio-contenido { padding:11px; } .radio-grid { grid-template-columns:1fr; gap:8px; } .radio-card { min-height:58px; padding:7px; } .radio-card img { flex-basis:40px; width:40px; height:40px; } }
@media (max-width:480px) { .radio-categoria[open] { display:block; } .radio-categoria[open] summary { width:100%; height:auto; min-height:112px; } .radio-contenido { border-top:1px solid rgba(255,255,255,.08); border-left:0; } }

/* Escritorio: las categorías forman una fila estable y la seleccionada abre
   una bandeja independiente debajo. Así ninguna tarjeta empuja a las demás y
   la zona de emisoras puede crecer todo lo necesario en el futuro. */
@media (min-width:761px) {
    .radio-secciones {
        --radio-cerrada:280px;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,var(--radio-cerrada)));
        grid-template-rows:auto auto;
        justify-content:center;
        align-items:start;
        gap:14px;
        min-height:0;
    }

    .radio-categoria,
    .radio-categoria[open] {
        display:contents;
        width:auto;
    }

    .radio-categoria summary,
    .radio-categoria[open] summary {
        grid-row:1;
        width:var(--radio-cerrada);
        height:92px;
        aspect-ratio:auto;
        overflow:hidden;
        border:1px solid rgba(135,194,255,.26);
        flex-direction:row;
        justify-content:flex-start;
        gap:12px;
        padding:12px 16px;
        text-align:left;
        border-radius:16px;
        background:linear-gradient(135deg,rgba(23,34,76,.91),rgba(22,22,56,.88));
        box-shadow:0 16px 38px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.08);
        backdrop-filter:blur(14px);
    }

    .radio-categoria:nth-child(1) summary { grid-column:1; }
    .radio-categoria:nth-child(2) summary { grid-column:2; }
    .radio-categoria:nth-child(3) summary { grid-column:3; }

    .radio-categoria summary .radio-categoria-texto { flex:1 1 auto; text-align:left; }
    .radio-categoria summary .radio-categoria-icono { flex:0 0 36px; }
    .radio-categoria summary .radio-categoria-flecha { flex:0 0 9px; margin-left:auto; }

    .radio-categoria-destacada summary {
        border-color:rgba(214,125,255,.42);
        background:linear-gradient(135deg,rgba(43,29,83,.94),rgba(20,34,75,.92));
    }

    .radio-categoria[open] summary {
        border-color:#76d0ff;
        box-shadow:0 16px 38px rgba(0,0,0,.32),0 0 24px rgba(41,141,232,.16);
    }

    .radio-categoria[open] .radio-contenido {
        grid-column:1 / -1;
        grid-row:2;
        width:100%;
        box-sizing:border-box;
        margin-top:2px;
        padding:18px;
        border:1px solid rgba(135,194,255,.26);
        border-radius:18px;
        background:linear-gradient(135deg,rgba(23,34,76,.94),rgba(22,22,56,.92));
        box-shadow:0 16px 38px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.08);
    }

    .radio-grid,
    .radio-grid-una {
        grid-template-columns:repeat(3,minmax(0,1fr));
        justify-content:stretch;
        gap:12px;
    }

    .radio-grid-una .radio-card { grid-column:2; }

    /* `<details>` crea una caja interna propia en algunos navegadores aunque
       use display:contents. La bandeja común evita que el contenido quede
       limitado a los 174 px de la tarjeta seleccionada. */
    .radio-categoria,
    .radio-categoria[open] {
        display:block;
        width:var(--radio-cerrada);
        border:0;
        background:transparent;
        box-shadow:none;
        overflow:visible;
    }

    .radio-categoria:nth-child(1) { grid-column:1; }
    .radio-categoria:nth-child(2) { grid-column:2; }
    .radio-categoria:nth-child(3) { grid-column:3; }

    .radio-categoria .radio-contenido { display:none !important; }

    .radio-bandeja {
        display:block;
        grid-column:1 / -1;
        grid-row:2;
        width:100%;
        box-sizing:border-box;
        margin-top:2px;
        padding:18px;
        border:1px solid rgba(135,194,255,.26);
        border-radius:18px;
        background:linear-gradient(135deg,rgba(23,34,76,.94),rgba(22,22,56,.92));
        box-shadow:0 16px 38px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.08);
    }

    .radio-bandeja[hidden] { display:none; }

    .radio-bandeja .radio-grid,
    .radio-bandeja .radio-grid-una {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
        padding:0;
        border:0;
    }

    .radio-bandeja .radio-paises {
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        grid-auto-flow:row dense;
        width:100%;
        margin:0;
        gap:10px;
        padding:0;
        border:0;
    }

    /* Radio ChatZona es una emisora única: una tarjeta protagonista, ancha y
       legible, con el logo a la izquierda y la información a su derecha. */
    .radio-bandeja .radio-grid-una {
        grid-template-columns:1fr;
    }

    .radio-bandeja .radio-grid-una .radio-card-principal {
        grid-column:auto;
        display:grid;
        grid-template-columns:92px minmax(0,1fr) auto;
        width:min(640px,100%);
        min-height:118px;
        justify-self:center;
        align-items:center;
        gap:18px;
        padding:14px 18px;
        text-align:left;
        border-radius:18px;
    }

    .radio-bandeja .radio-grid-una .radio-card-principal img {
        width:92px;
        height:92px;
        object-fit:contain;
        border-radius:15px;
        background:rgba(255,255,255,.92);
    }

    .radio-bandeja .radio-grid-una .radio-card-texto {
        width:auto;
        gap:7px;
        text-align:left;
    }

    .radio-bandeja .radio-grid-una .radio-card-texto strong {
        font-size:24px;
        line-height:1.1;
    }

    .radio-bandeja .radio-grid-una .radio-card-texto small {
        font-size:14px;
        line-height:1.35;
    }

    .radio-bandeja .radio-grid-una .escuchar-ahora {
        white-space:nowrap;
        padding:11px 15px;
    }
}

@media (max-width:900px) {
    .radio-paises,
    .radio-bandeja .radio-paises { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:620px) {
    .radio-paises,
    .radio-bandeja .radio-paises { grid-template-columns:repeat(2,minmax(0,1fr)); }
}