/* =============================================================================
   RÁDIO ENSINOSOCIAL (?a=radio.index · radio.ensinosocial.com.br)
   Prefixo .rad-* (docs/design.md). Base nos tokens; ACENTOS COM PAPEL:
   madeira/latão = o rádio antigo (calor, objeto) · creme = teclas bakelite ·
   verde-dial = "ligado/tocando" (olho mágico) · vermelho = ponteiro/ação ·
   violeta/teal = os estilos musicais (herdados da marca).
   Redesign vintage 2026-07-26 (pedido: rádio antigo no topo, controles retrô).
   ========================================================================== */

.rad {
    --rad-c-lofi: #8b5cf6;
    --rad-c-piano: #14b8a6;
    --rad-c-classica: #f59e0b;
    --rad-c-jazz: #38bdf8;
    --rad-c-gospel: #fb7185;
    --rad-c-ambiente: #22c55e;
    --rad-c-mpb: #fb923c;
    --rad-c-viola: #ca8a04;
    --rad-c-nordeste: #ef4444;
    --rad-c-choro: #06b6d4;
    --rad-c-rock: #334155;
    --rad-c-eletronica: #ec4899;
    --rad-c-cinema: #0ea5e9;
    --rad-c-neutro: #94a3b8;

    /* paleta do rádio antigo */
    --rad-wood: #5a3517;
    --rad-wood-2: #3f2410;
    --rad-brass: #c49a4a;
    --rad-brass-claro: #e8c477;
    --rad-cream: #f6ecd4;
    --rad-cream-2: #e9dab4;
    --rad-tinta: #3a2a12;          /* texto sobre creme */
    --rad-dialverde: #3ddc84;      /* olho mágico / tocando */
    --rad-needle: #d64545;         /* ponteiro / ação */

    --rad-player-h: 5.25rem;

    min-height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
    background: #120a04;
    color: #f5ead2;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    position: relative;
}
.rad::before {
    /* O RÁDIO INTEIRO É O FUNDO: foto fixa na viewport (não rola junto) +
       véu escuro pra legibilidade; conteúdo em painéis de vidro por cima. */
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        linear-gradient(180deg, rgba(12, 7, 3, .60), rgba(12, 7, 3, .74)),
        var(--rad-fundo) center / cover no-repeat #120a04;
}
.rad > * { position: relative; z-index: 1; }

.rad-oculto { display: none !important; }

/* ---------- topo ---------- */
.rad-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid rgba(196, 154, 74, .28);
    background: rgba(23, 13, 5, .55);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 30;
}
.rad-marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #f5ead2; }
.rad-marca-ic {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem; border-radius: .8rem;
    color: #fff;
    background: linear-gradient(140deg, var(--rad-wood), var(--rad-brass));
    box-shadow: var(--shadow-sm);
}
.rad-marca-txt { font-size: 1.05rem; letter-spacing: -.02em; }
.rad-marca-txt strong { font-weight: 700; }
.rad-top-acoes { display: flex; align-items: center; gap: .5rem; }
.rad-badge-preview {
    font-size: .72rem; padding: .3rem .6rem; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--rad-brass) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rad-brass) 45%, transparent);
    color: var(--text-2);
    white-space: nowrap;
}

/* ---------- HERO: o rádio valvulado ---------- */
.rad-hero {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    min-height: clamp(19rem, 36vw, 24rem);
    margin: 1.4rem 0 2rem;
    padding: clamp(1.4rem, 3.5vw, 2.6rem);
    border-radius: calc(var(--radius-lg) * 1.6);
    border: 1px solid rgba(196, 154, 74, .30);
    position: relative;
    overflow: hidden;
    /* vidro escuro: o rádio-fundo brilha através. COMPACTO: o dial e os
       efeitos (os únicos controles) precisam aparecer sem rolar. */
    background: rgba(14, 8, 3, .52);
    backdrop-filter: blur(3px);
    color: #f5ead2;
    box-shadow: var(--shadow-lg);
    transition: box-shadow .8s ease;
}
.rad-hero { min-height: auto !important; padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 3vw, 2.2rem); margin-bottom: 1.2rem; }
.rad-hero-h1 { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.4rem); }
.rad-hero-lead { font-size: .95rem; }
.rad-hero-texto { gap: .55rem; }
.rad-hero.rad-ligado {
    border-color: color-mix(in srgb, var(--rad-brass-claro) 65%, transparent);
    animation: rad-brilho 3.2s ease-in-out infinite;
}
.rad-hero::after { /* granulado (feTurbulence em data-URI — §3.3 do design.md) */
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: .07;
    mix-blend-mode: overlay;
}
.rad-hero-texto { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; }
.rad-hero-eyebrow {
    margin: 0;
    font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--rad-brass-claro);
}
.rad-hero-h1 {
    margin: 0;
    font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
    color: #fdf6e3;
}
.rad-hero-h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--rad-brass-claro), var(--rad-dialverde));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.rad-hero-lead {
    margin: 0;
    max-width: 34rem;
    font-size: clamp(.98rem, .9rem + .3vw, 1.1rem);
    line-height: 1.65;
    color: rgba(253, 246, 227, .78);
    text-wrap: pretty;
}
.rad-hero-ctas { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.rad-hero .rad-btn { border-color: rgba(232, 196, 119, .4); background: rgba(253, 246, 227, .07); color: #fdf6e3; }
.rad-hero .rad-btn:hover { background: rgba(253, 246, 227, .13); }
.rad-hero .rad-btn-primario {
    background: linear-gradient(140deg, var(--rad-brass-claro), var(--rad-brass));
    color: #2c1a0b; border-color: transparent;
}
@keyframes rad-brilho {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 26px rgba(232, 196, 119, .16); }
    50% { box-shadow: var(--shadow-lg), 0 0 52px rgba(232, 196, 119, .34); }
}

/* ---------- aviso pro DESLOGADO: a Rádio mora no menu do site ---------- */
.rad-aviso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.6rem;
    padding: .95rem 1.15rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(196, 154, 74, .32);
    background: rgba(14, 8, 3, .55);
    backdrop-filter: blur(3px);
}
.rad-aviso-ic {
    display: grid; place-items: center;
    width: 2.7rem; height: 2.7rem; border-radius: .85rem;
    color: #2c1a0b;
    background: linear-gradient(140deg, var(--rad-brass-claro), var(--rad-brass));
    box-shadow: var(--shadow-sm);
}
.rad-aviso-ic .rad-ic { width: 1.35rem; height: 1.35rem; }
.rad-aviso-txt h2 { margin: 0 0 .2rem; font-size: .98rem; letter-spacing: -.01em; color: #fdf6e3; }
.rad-aviso-txt p { margin: 0; font-size: .85rem; line-height: 1.55; color: rgba(253, 246, 227, .74); text-wrap: pretty; }
.rad-aviso-ctas { display: flex; flex-direction: column; gap: .45rem; }
.rad-aviso-ctas .rad-btn { justify-content: center; padding: .5rem 1.05rem; min-height: 40px; font-size: .88rem; }
.rad-aviso .rad-btn { border-color: rgba(232, 196, 119, .4); background: rgba(253, 246, 227, .07); color: #fdf6e3; }
.rad-aviso .rad-btn:hover { background: rgba(253, 246, 227, .13); }
.rad-aviso .rad-btn-primario {
    background: linear-gradient(140deg, var(--rad-brass-claro), var(--rad-brass));
    color: #2c1a0b; border-color: transparent;
}
@media (max-width: 900px) {
    .rad-aviso { grid-template-columns: auto minmax(0, 1fr); }
    .rad-aviso-ctas { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .rad-aviso-ctas .rad-btn { flex: 1 1 12rem; }
}

/* ---------- DIAL de estações ---------- */
.rad-dial {
    position: relative;
    padding: 2.2rem 1.4rem 1rem;
    border-radius: var(--radius-lg);
    border: 2px solid color-mix(in srgb, var(--rad-brass) 45%, var(--border));
    background: linear-gradient(180deg, var(--rad-cream), var(--rad-cream-2));
    overflow-x: auto;
    scrollbar-width: none; /* dial arrasta como um dial — sem barra de rolagem aparente */
    box-shadow: inset 0 2px 10px rgba(90, 53, 23, .18), var(--shadow-sm);
}
.rad-dial::-webkit-scrollbar { display: none; }
.rad-dial-linha {
    position: absolute; left: 1.4rem; right: 1.4rem; top: 1.35rem;
    height: 3px; border-radius: 2px;
    background: color-mix(in srgb, var(--rad-tinta) 45%, transparent);
}
.rad-dial-ponteiro {
    position: absolute; top: .55rem;
    width: 3px; height: 2.6rem; border-radius: 2px;
    background: var(--rad-needle);
    box-shadow: 0 0 6px rgba(214, 69, 69, .55);
    left: 8%;
    transition: left .7s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
.rad-dial-freqs {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    min-width: max-content;
}
.rad-dial-freq {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    border: none; background: none; padding: .35rem .4rem .25rem;
    font: inherit; cursor: pointer; border-radius: .5rem;
    color: var(--rad-tinta);
    min-width: 4.6rem;
}
.rad-dial-freq::before {
    content: ''; width: 2px; height: .8rem; margin-bottom: .15rem;
    background: color-mix(in srgb, var(--rad-tinta) 55%, transparent);
}
.rad-dial-freq strong { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.rad-dial-freq span { font-size: .72rem; opacity: .75; white-space: nowrap; }
.rad-dial-freq:hover { background: rgba(90, 53, 23, .08); }
.rad-dial-freq.tocando strong { color: #0d7a43; }
.rad-dial-freq:focus-visible { outline: 2px solid var(--rad-needle); outline-offset: 2px; }

/* ---------- botões base ---------- */
.rad-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .6rem 1.05rem; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font: inherit; font-size: .92rem; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    min-height: 44px;
}
.rad-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rad-btn-grande { padding: .8rem 1.5rem; font-size: 1rem; font-weight: 600; }
.rad-btn-primario {
    background: linear-gradient(140deg, var(--rad-c-piano), color-mix(in srgb, var(--rad-c-piano) 55%, var(--rad-c-lofi)));
    border-color: transparent; color: #fff; font-weight: 600;
}
.rad-btn-mini { padding: .4rem .85rem; min-height: 36px; font-size: .85rem; }
.rad-btn-ghost {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .6rem; border-radius: var(--radius);
    border: none; background: transparent; color: var(--text-2);
    font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none;
    min-height: 40px;
}
.rad-btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.rad-btn-ghost:disabled, .rad-pl-btn:disabled, .rad-pl-play:disabled { opacity: .4; cursor: not-allowed; }

.rad-ic { width: 1.35em; height: 1.35em; flex: 0 0 auto; }

/* ---------- main ---------- */
.rad-main {
    flex: 1;
    width: min(1060px, 100%);
    margin: 0 auto;
    padding: .4rem clamp(1rem, 4vw, 2.5rem) calc(var(--rad-player-h) + 2.5rem);
}
.rad-sec { margin-bottom: 1.8rem; }
.rad-sec[id] { scroll-margin-top: 5.5rem; } /* âncoras #estacoes/#sons da carteirinha */
.rad-eyebrow {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--rad-brass-claro); font-weight: 600; margin: 0 0 .6rem;
}
.rad-eyebrow-nota {
    text-transform: none; letter-spacing: .01em; font-weight: 400;
    font-size: .78rem; color: rgba(245, 234, 210, .55);
}
.rad-eyebrow-nota::before { content: '· '; }
.rad-h1 {
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.3rem);
    line-height: 1.1; letter-spacing: -.025em; margin: 0;
    text-wrap: balance;
    color: #fdf6e3;
}
.rad-h1-ou { color: rgba(245, 234, 210, .55); font-weight: 400; }
.rad-h2 { font-size: 1.15rem; margin: 0 0 .9rem; letter-spacing: -.01em; color: #fdf6e3; }
.rad-sec-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.rad-nota { color: rgba(245, 234, 210, .8); font-size: .9rem; background: rgba(20, 12, 5, .7); border: 1px dashed rgba(196, 154, 74, .35); border-radius: var(--radius-lg); padding: .8rem 1rem; }

/* SONS POR CIMA — efeitos de 1 toque, sempre visíveis (jazz + fogueira em 2 cliques) */
.rad-efeitos { display: flex; gap: .55rem; flex-wrap: wrap; }
.rad-ef {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    min-width: 4.6rem; padding: .65rem .5rem .5rem;
    border-radius: .8rem;
    border: 1px solid rgba(196, 154, 74, .28);
    background: rgba(20, 12, 5, .72);
    color: rgba(245, 234, 210, .85); font: inherit; font-size: .72rem;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
    min-height: 44px;
}
.rad-ef .rad-ic { width: 1.45rem; height: 1.45rem; }
.rad-ef:hover { border-color: rgba(232, 196, 119, .55); background: rgba(246, 236, 212, .16); } /* sem translate: fileira apertada piscava no hover */
.rad-ef.ativa {
    background: linear-gradient(180deg, var(--rad-cream), var(--rad-cream-2));
    color: var(--rad-tinta);
    border-color: var(--rad-brass);
    box-shadow: 0 0 14px rgba(232, 196, 119, .35), inset 0 -2px 0 rgba(58, 42, 18, .25);
    font-weight: 600;
}
.rad-ef:focus-visible { outline: 2px solid var(--rad-brass-claro); outline-offset: 2px; }
/* Na PÁGINA a fileira é uma TIRA de ícones, igual à janelinha (2026-07-30, "os
   botões de som estão confusos"): o nome mora no balão §DICA e no aria-label;
   quem está ligado acende em creme. Só ícone = os 14 numa linha, sem gritaria.
   O :not(.rad-mini) preserva a janelinha, que tem as próprias medidas. */
.rad:not(.rad-mini) .rad-efeitos { gap: .45rem; }
.rad:not(.rad-mini) .rad-ef {
    flex-direction: row; justify-content: center;
    min-width: 0; width: 2.9rem; height: 2.9rem; padding: 0;
    border-radius: .7rem;
}
.rad:not(.rad-mini) .rad-ef span { display: none; }
.rad:not(.rad-mini) .rad-ef .rad-ic { width: 1.35rem; height: 1.35rem; }

/* objetivos = TECLAS de rádio (bakelite) */
.rad-objetivos { display: flex; gap: .55rem; flex-wrap: wrap; }
.rad-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem .6rem; border-radius: .65rem;
    border: 1px solid color-mix(in srgb, var(--rad-tinta) 25%, transparent);
    background: linear-gradient(180deg, var(--rad-cream), var(--rad-cream-2));
    color: var(--rad-tinta); font: inherit; font-size: .9rem; font-weight: 500;
    cursor: pointer;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--rad-tinta) 35%, transparent), var(--shadow-sm);
    transition: transform .1s ease, box-shadow .1s ease;
    min-height: 44px;
}
.rad-chip:hover { filter: brightness(1.06); } /* idem: nada de mover em fileira apertada */
.rad-chip:active, .rad-chip.ativa {
    transform: translateY(2px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--rad-tinta) 35%, transparent), inset 0 2px 6px rgba(58, 42, 18, .35);
    background: linear-gradient(180deg, var(--rad-cream-2), var(--rad-cream));
}
.rad-chip.ativa { border-color: var(--rad-brass); }

/* grade de estações */
.rad-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: .9rem;
}
.rad-card {
    --c: var(--rad-c-piano);
    position: relative;
    display: flex; flex-direction: column; gap: .65rem;
    padding: 1.1rem; border-radius: var(--radius-lg);
    border: 1px solid rgba(196, 154, 74, .22);
    background: rgba(20, 12, 5, .72);
    cursor: pointer; text-align: left; font: inherit; color: #f5ead2;
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.rad-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--rad-brass) 55%, var(--border));
}
.rad-card.tocando { border-color: color-mix(in srgb, var(--rad-dialverde) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rad-dialverde) 20%, transparent); }
.rad-card-ic {
    display: grid; place-items: center;
    width: 2.9rem; height: 2.9rem; border-radius: .9rem;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}
.rad-card-ic .rad-ic { width: 1.5rem; height: 1.5rem; }
.rad-card h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; }
.rad-card-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.rad-card-tag {
    font-size: .72rem; color: rgba(245, 234, 210, .75);
    padding: .18rem .55rem; border-radius: var(--radius-full);
    background: rgba(245, 234, 210, .08); border: 1px solid rgba(196, 154, 74, .25);
    display: inline-flex; align-items: center; gap: .3rem;
}
.rad-card-tag .rad-ic { width: .95em; height: .95em; }
.rad-card-acoes { position: absolute; top: .6rem; right: .6rem; display: flex; gap: .15rem; }
.rad-card-acoes .rad-btn-ghost { min-height: 32px; padding: .3rem .4rem; }
.rad-card-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; margin-left: .35rem; }
.rad-card-eq i { width: 3px; background: var(--rad-dialverde); border-radius: 2px; animation: rad-eq 1s ease-in-out infinite; }
.rad-card-eq i:nth-child(2) { animation-delay: .2s; }
.rad-card-eq i:nth-child(3) { animation-delay: .45s; }
@keyframes rad-eq { 0%,100% { height: 4px; } 50% { height: 12px; } }

/* revelação no scroll (só esconde com JS vivo — design.md §5) */
html.rad-js .rad-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
html.rad-js .rad-rv.is-in { opacity: 1; transform: none; }

/* ---------- wizard ---------- */
.rad-wizard-fundo {
    position: fixed; inset: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 55%, rgba(2, 8, 16, .55));
    backdrop-filter: blur(6px);
    display: grid; place-items: center; padding: 1rem;
}
.rad-wizard {
    width: min(680px, 100%);
    max-height: min(86vh, 700px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--rad-brass) 35%, var(--border));
    border-radius: calc(var(--radius-lg) * 1.2);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.rad-wz-cab { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.rad-wz-cab h2 { margin: 0; font-size: 1.1rem; flex: 1; letter-spacing: -.01em; }
.rad-wz-passos { display: flex; gap: .35rem; }
.rad-wz-passos i { width: 1.6rem; height: .3rem; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--border); }
.rad-wz-passos i.feito { background: var(--rad-brass); border-color: transparent; }
.rad-wz-passo { padding: 1.2rem; overflow: auto; flex: 1; }
.rad-wz-pergunta { margin: 0 0 1rem; font-size: 1rem; color: var(--text); font-weight: 600; }
.rad-wz-pergunta small { color: var(--muted); font-weight: 400; }
.rad-wz-pe { display: flex; justify-content: space-between; gap: .75rem; padding: 1rem 1.2rem; border-top: 1px solid var(--border); }
.rad-wz-dica { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }

.rad-grade-mini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: .6rem;
}
.rad-card-mini {
    --c: var(--rad-c-neutro);
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    padding: .9rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font: inherit; font-size: .92rem; cursor: pointer; text-align: left;
    transition: all .15s ease;
    min-height: 44px;
}
.rad-card-mini .rad-ic { width: 1.5rem; height: 1.5rem; color: var(--c); }
.rad-card-mini small { color: var(--muted); }
.rad-card-mini:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); }
.rad-card-mini.ativa {
    border-color: color-mix(in srgb, var(--c) 60%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--bg));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 15%, transparent);
}

/* ambientes no wizard */
.rad-lista-ambientes { display: flex; flex-direction: column; gap: .5rem; }
.rad-amb {
    display: grid;
    grid-template-columns: auto 1fr minmax(0, 46%);
    align-items: center; gap: .8rem;
    padding: .65rem .8rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg);
}
.rad-amb.ativa { border-color: color-mix(in srgb, var(--rad-brass) 55%, var(--border)); background: color-mix(in srgb, var(--rad-brass) 7%, var(--bg)); }
.rad-amb-toggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: none; font: inherit; color: var(--text);
    cursor: pointer; padding: .25rem; min-height: 40px;
}
.rad-amb-toggle .rad-ic { width: 1.4rem; height: 1.4rem; color: var(--rad-brass); }
.rad-amb:not(.ativa) .rad-amb-toggle .rad-ic { color: var(--muted); }
.rad-amb-vol { display: flex; align-items: center; gap: .5rem; }
.rad-amb-vol output { font-size: .78rem; color: var(--text-2); min-width: 2.4em; text-align: right; }

/* sliders com thumb de KNOB serrilhado dourado */
.rad input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 3px;
    background: linear-gradient(to right, var(--rad-brass) var(--_pct, 50%), var(--surface-2) var(--_pct, 50%));
    outline-offset: 4px;
}
.rad input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #f4e7c8, #d8bd8a 55%, #8f6d35),
        repeating-conic-gradient(#8f6d35 0 8deg, #d8bd8a 8deg 16deg);
    background-blend-mode: overlay;
    border: 2px solid #6b4d20;
    box-shadow: var(--shadow-sm); cursor: pointer;
}
.rad input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4e7c8, #d8bd8a 55%, #8f6d35);
    border: 2px solid #6b4d20; cursor: pointer;
}

/* ajustes (passo 3) */
.rad-ajustes { display: flex; flex-direction: column; gap: 1.2rem; }
.rad-ajuste > label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-2); margin-bottom: .5rem; }
.rad-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.rad-seg button {
    padding: .5rem .9rem; border-radius: .6rem;
    border: 1px solid color-mix(in srgb, var(--rad-tinta) 22%, var(--border));
    background: linear-gradient(180deg, var(--rad-cream), var(--rad-cream-2));
    font: inherit; font-size: .85rem; color: var(--rad-tinta); cursor: pointer;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--rad-tinta) 30%, transparent);
    min-height: 40px;
}
.rad-seg button.ativa {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(58, 42, 18, .35);
    border-color: var(--rad-brass);
    font-weight: 600;
}
.rad-switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.rad-switch input { position: absolute; opacity: 0; }
.rad-switch span {
    width: 2.6rem; height: 1.45rem; border-radius: 1rem;
    background: var(--surface-2); border: 1px solid var(--border);
    position: relative; transition: background .15s ease; flex: 0 0 auto;
}
.rad-switch span::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4e7c8, #d8bd8a 60%, #8f6d35);
    box-shadow: var(--shadow-sm); transition: left .15s ease;
}
.rad-switch input:checked + span { background: var(--rad-brass); border-color: transparent; }
.rad-switch input:checked + span::after { left: calc(100% - 1.25rem); }
.rad-switch input:focus-visible + span { outline: 2px solid var(--rad-brass); outline-offset: 2px; }
.rad-switch em { font-style: normal; color: var(--muted); font-size: .82rem; }

.rad-input {
    width: 100%; padding: .8rem 1rem;
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font: inherit; font-size: 1.05rem;
}
.rad-input:focus { outline: 2px solid var(--rad-brass); outline-offset: 1px; }

/* ---------- player: painel do rádio ---------- */
.rad-player {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    min-height: var(--rad-player-h);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.6fr);
    align-items: center; gap: 1rem;
    padding: .7rem clamp(1rem, 4vw, 2.5rem);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0));
    /* a BASE do gabinete: madeira mais rica que o corpo, friso de latão em cima */
    background:
        repeating-linear-gradient(92deg, rgba(0, 0, 0, .10) 0 4px, transparent 4px 9px),
        linear-gradient(180deg, #3a2412, #2a1809 55%, #1d1006);
    border-top: 3px solid color-mix(in srgb, var(--rad-brass) 75%, transparent);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .35);
    color: #f5ead2;
}
.rad-pl-textos strong { color: #fdf6e3; }
.rad-pl-textos span, .rad-pl-timer, .rad-pl-vol { color: rgba(245, 234, 210, .62); }
.rad-player .rad-btn-ghost { color: rgba(245, 234, 210, .72); }
.rad-player .rad-btn-ghost:hover:not(:disabled) { background: rgba(245, 234, 210, .10); color: #fdf6e3; }
.rad-pl-info { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.rad-pl-arte {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 2.9rem; height: 2.9rem; border-radius: .8rem;
    color: #fdf6e3; background: linear-gradient(140deg, var(--rad-wood), var(--rad-brass));
    border: 1px solid color-mix(in srgb, var(--rad-brass) 60%, transparent);
}
.rad-player.rad-tocando .rad-pl-arte { animation: rad-pulso 3.2s ease-in-out infinite; }
@keyframes rad-pulso { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rad-dialverde) 40%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
.rad-pl-textos { display: flex; flex-direction: column; min-width: 0; }
.rad-pl-textos strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rad-pl-textos span { font-size: .8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rad-pl-controles { display: flex; align-items: center; gap: .6rem; }
.rad-pl-btn {
    display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid rgba(232, 196, 119, .35); background: rgba(245, 234, 210, .08);
    color: #f5ead2; cursor: pointer;
}
.rad-pl-btn:hover:not(:disabled) { background: rgba(245, 234, 210, .16); }
.rad-pl-play {
    display: grid; place-items: center;
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    border: 3px solid #6b4d20; cursor: pointer; color: #2c1a0b;
    background: radial-gradient(circle at 35% 28%, #f4e7c8, #d8bd8a 55%, #a8853f);
    box-shadow: var(--shadow-md), inset 0 -3px 6px rgba(58, 42, 18, .35);
    transition: transform .15s ease;
}
.rad-pl-play:hover:not(:disabled) { transform: scale(1.05); }
.rad-pl-play .rad-ic { width: 1.5rem; height: 1.5rem; }
.rad-pl-timer { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--text-2); }
.rad-pl-mix { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; min-width: 0; }
.rad-pl-vol { display: flex; align-items: center; gap: .45rem; color: var(--text-2); flex: 0 1 160px; min-width: 90px; }
.rad-pl-chips { display: flex; gap: .3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.rad-pl-chips::-webkit-scrollbar { display: none; }
.rad-pl-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .6rem; border-radius: .5rem;
    border: 1px solid color-mix(in srgb, var(--rad-tinta) 22%, var(--border));
    background: linear-gradient(180deg, var(--rad-cream), var(--rad-cream-2));
    color: var(--rad-tinta); font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--rad-tinta) 28%, transparent);
}
.rad-pl-chip .rad-ic { width: 1em; height: 1em; color: var(--rad-wood); }
.rad-pl-acoes { display: flex; gap: .1rem; }

/* botão 🎚 Sons no player */
.rad-btn-mixer {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: .6rem;
    border: 1px solid color-mix(in srgb, var(--rad-tinta) 25%, var(--border));
    background: linear-gradient(180deg, var(--rad-cream), var(--rad-cream-2));
    color: var(--rad-tinta); font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--rad-tinta) 30%, transparent);
    min-height: 40px;
}
.rad-btn-mixer:hover:not(:disabled) { filter: brightness(1.08); }
.rad-btn-mixer:disabled { opacity: .4; cursor: not-allowed; }

/* 🎚 MESA DE SONS (sheet acima do player; mexe no som AO VIVO) */
.rad-mixer-fundo {
    position: fixed; inset: 0; z-index: 55;
    background: color-mix(in srgb, var(--bg) 40%, rgba(2, 8, 16, .45));
    backdrop-filter: blur(4px);
}
.rad-mixer {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--rad-player-h) + .8rem);
    width: min(560px, calc(100vw - 1.5rem));
    max-height: min(62vh, 560px);
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--rad-brass) 40%, var(--border));
    border-radius: calc(var(--radius-lg) * 1.2);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    animation: rad-sheet .3s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden;
}
@keyframes rad-sheet { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rad-mixer-cab { display: flex; align-items: center; gap: .6rem; }
.rad-mixer-cab strong { font-size: 1rem; }
.rad-mixer-dica { flex: 1; color: var(--muted); font-size: .78rem; }
.rad-mixer-musica { background: color-mix(in srgb, var(--rad-brass) 10%, var(--bg)); border-color: color-mix(in srgb, var(--rad-brass) 40%, var(--border)); }
.rad-mixer .rad-lista-ambientes { overflow-y: auto; padding-right: .25rem; }

/* ---------- §DICA: o balão da casa (página E janelinha) ----------
   Nasce na hora (o title nativo demora ~1s), fica ACIMA do alvo e usa a
   tipografia da Rádio. Um elemento só, reaproveitado; posicionado pelo
   radio.js (§DICA): fixed, preso nas bordas, seta apontando pro alvo.
   width:max-content + max-width: dica curta fica justa, longa quebra linha. */
.radm-dica {
    position: fixed; z-index: 70; pointer-events: none;
    width: max-content; max-width: 14rem;
    padding: .24rem .5rem;
    border-radius: .35rem;
    border: 1px solid rgba(196, 154, 74, .45);
    background: #2a1a0d;
    color: #fdf6e3;
    font-size: .7rem; line-height: 1.35;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .12s ease;
}
/* estado de MEDIÇÃO: precisa ter caixa pra o JS ler offsetWidth, mas não pode
   piscar no canto da tela antes de saber onde vai ficar */
.radm-dica.e-medindo { visibility: hidden; opacity: 0; transition: none; }
.radm-dica.e-on { visibility: visible; opacity: 1; }
.radm-dica::after {
    content: ''; position: absolute;
    left: var(--dica-seta, 50%); margin-left: -4px;
    border: 4px solid transparent;
}
.radm-dica:not(.e-abaixo)::after { top: 100%; border-top-color: #2a1a0d; }
.radm-dica.e-abaixo::after { bottom: 100%; border-bottom-color: #2a1a0d; }

/* toast */
.rad-toast {
    position: fixed; z-index: 80;
    left: 50%; transform: translateX(-50%);
    bottom: calc(var(--rad-player-h) + 1.2rem);
    width: min(440px, calc(100vw - 2rem));
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--rad-brass);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: .85rem 1rem; font-size: .9rem;
    animation: rad-sobe .35s cubic-bezier(.16,1,.3,1);
}
.rad-toast a { color: var(--rad-brass); font-weight: 600; text-decoration: none; }
[data-theme="dark"] .rad-toast a { color: var(--rad-brass-claro); }
.rad-toast a:hover { text-decoration: underline; }
@keyframes rad-sobe { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- em breve ---------- */
.rad-embreve { display: grid; place-items: center; padding: 3rem 1rem; }
.rad-embreve-box { text-align: center; max-width: 30rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.rad-embreve-logo {
    display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; border-radius: 1.4rem; color: #fdf6e3;
    background: linear-gradient(140deg, var(--rad-wood), var(--rad-brass));
    box-shadow: var(--shadow-lg);
}
.rad-embreve-logo .rad-ic { width: 2.2rem; height: 2.2rem; }
.rad-embreve h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: -.03em; }
.rad-embreve p { margin: 0; color: var(--text-2); line-height: 1.65; text-wrap: pretty; }
.rad-embreve-tag { font-weight: 600; color: var(--rad-brass); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
    .rad-hero { min-height: auto; }
}
@media (max-width: 760px) {
    .rad-player {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'info controles' 'mix mix';
        row-gap: .4rem;
    }
    .rad-pl-info { grid-area: info; }
    .rad-pl-controles { grid-area: controles; }
    .rad-pl-mix { grid-area: mix; justify-content: space-between; }
    .rad { --rad-player-h: 7.6rem; }
    .rad-sec-cab { flex-direction: column; align-items: stretch; }
    .rad-sec-cab .rad-btn { justify-content: center; width: 100%; }
    .rad-amb { grid-template-columns: 1fr; }
    .rad-amb-vol { padding-left: .25rem; }
    .rad-hero-ctas { justify-content: center; }
    .rad-hero-ctas .rad-btn { width: 100%; justify-content: center; }
}

/* ---------- dentro do shell do site (preset public: menu lateral) ---------- */
@media (min-width: 1025px) {
    body.layout-admin .rad-player { left: var(--menu-width-expanded, 0); }
    body.layout-admin.menu-collapsed .rad-player { left: var(--menu-width-collapsed, 0); }
}
body:has(#rad-app) { --rad-player-h: 5.25rem; }
/* .main-content é flex item: sem min-width:0 o max-content do DIAL vaza o
   tamanho intrínseco por cima do overflow:auto e estica a página (mesma
   família do bug de grid do design.md §7). min-width:0 deixa encolher e o
   dial rola de verdade; clip segura qualquer full-bleed do footer. */
body:has(#rad-app) .main-content { min-width: 0; overflow-x: clip; }
body:has(#rad-app) footer { padding-bottom: calc(var(--rad-player-h) + 1.5rem); }
@media (max-width: 760px) {
    body:has(#rad-app) { --rad-player-h: 7.6rem; }
}

/* ---------- a11y / movimento ---------- */
.rad :focus-visible { outline: 2px solid var(--rad-brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rad *, .rad *::before, .rad *::after { animation: none !important; transition: none !important; }
    .rad-card-eq i { height: 8px; }
    html.rad-js .rad-rv { opacity: 1; transform: none; }
    .rad-retro-olho { opacity: 1; }
    .rad-dial-ponteiro { transition: none; }
}