/* ==========================================================================
   RÁDIO WEB IJB
   Arquivo: radio.css
   ========================================================================== */


/* ==========================================================================
   VARIÁVEIS
   ========================================================================== */

:root {
    --laranja: #dc9a5c;
    --laranja-hover: #e6aa71;

    --preto: #080808;
    --preto-profundo: #050506;
    --preto-card: #121118;
    --preto-card-claro: #191820;

    --branco: #ffffff;

    --texto: rgba(255, 255, 255, 0.92);
    --texto-suave: rgba(255, 255, 255, 0.62);
    --texto-fraco: rgba(255, 255, 255, 0.36);

    --borda: rgba(255, 255, 255, 0.075);
    --borda-dourada: rgba(220, 154, 92, 0.18);

    --ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --header-height: 92px;
}


/* ==========================================================================
   RESET
   ========================================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-width: 320px;
    min-height: 100vh;

    overflow-x: hidden;

    background: var(--preto);

    color: var(--branco);

    font-family:
        "Manrope",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    color: inherit;
}


a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--laranja);

    outline-offset: 4px;
}


/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

.skip-link {
    position: fixed;

    top: -100px;
    left: 24px;

    z-index: 9999;

    padding: 12px 18px;

    border-radius: 8px;

    background: var(--laranja);

    color: #111;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        top 0.3s var(--ease);
}


.skip-link:focus {
    top: 20px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    min-height: var(--header-height);

    display: flex;

    align-items: center;

    border-bottom:
        1px solid
        rgba(220, 154, 92, 0.13);

    background:
        rgba(7, 7, 8, 0.94);

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.nav-container {
    width: 100%;
    max-width: 1540px;

    margin-inline: auto;

    padding-inline: 48px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.logo {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    flex-shrink: 0;

    color: var(--branco);

    font-size: 20px;
    font-weight: 600;

    text-decoration: none;
}


.logo img {
    width: 46px;
    height: 46px;

    object-fit: contain;
}


/* ==========================================================================
   MENU
   ========================================================================== */

.menu {
    display: flex;

    align-items: center;

    gap: 32px;
}


.menu > a,
.drop-btn {
    position: relative;

    border: 0;

    padding: 0;

    background: transparent;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.25s ease,
        transform 0.25s var(--ease);
}


.drop-btn {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.menu > a:hover,
.drop-btn:hover {
    color: var(--branco);

    transform:
        translateY(-2px);
}


.menu > a:not(.btn-contato)::after,
.drop-btn::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 0;
    height: 1px;

    background: var(--laranja);

    transition:
        width 0.3s var(--ease);
}


.menu > a:not(.btn-contato):hover::after,
.dropdown:hover .drop-btn::after,
.dropdown.open .drop-btn::after {
    width: 100%;
}


/* ==========================================================================
   BOTÃO CONTATO
   ========================================================================== */

.menu .btn-contato {
    padding:
        13px
        24px;

    border-radius: 999px;

    background: var(--laranja);

    color: #fff;

    font-weight: 600;

    box-shadow:
        0 8px 24px
        rgba(220, 154, 92, 0.16);

    transition:
        background 0.25s ease,
        transform 0.25s var(--ease),
        box-shadow 0.25s ease;
}


.menu .btn-contato:hover {
    background:
        var(--laranja-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(220, 154, 92, 0.24);
}


/* ==========================================================================
   DROPDOWN
   ========================================================================== */

.dropdown {
    position: relative;
}


.dropdown::after {
    content: "";

    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;
    height: 28px;
}


.dropdown-menu {
    position: absolute;

    top: calc(100% + 18px);
    left: 0;

    min-width: 230px;

    padding: 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    background:
        rgba(24, 23, 30, 0.98);

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.42);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(10px)
        scale(0.98);

    transform-origin:
        top left;

    transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease),
        visibility 0.25s;
}


.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


.dropdown-menu a {
    display: block;

    padding:
        11px
        13px;

    border-radius: 9px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 13px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s var(--ease);
}


.dropdown-menu a:hover,
.dropdown-menu a[aria-current="page"] {
    color: var(--laranja);

    background:
        rgba(255, 255, 255, 0.05);

    transform:
        translateX(3px);
}


/* ==========================================================================
   MENU MOBILE
   ========================================================================== */

.menu-toggle {
    display: none;

    border: 0;

    padding: 5px;

    background: transparent;

    color: #fff;

    font-size: 28px;

    cursor: pointer;
}


/* ==========================================================================
   HERO DA RÁDIO
   ========================================================================== */

.radio-hero {
    position: relative;

    isolation: isolate;

    min-height: 100vh;

    padding:
        160px
        24px
        110px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse 900px 520px at 50% 15%,
            rgba(220, 154, 92, 0.065),
            transparent 67%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0c0b10 55%,
            #070708 100%
        );
}


.radio-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 55%,
            transparent 30%,
            rgba(0, 0, 0, 0.48) 100%
        );
}


/* ==========================================================================
   LUZ AMBIENTE
   ========================================================================== */

.radio-ambient {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;
}


.radio-glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--laranja),
            transparent 70%
        );

    filter: blur(120px);

    opacity: 0.065;
}


.radio-glow-1 {
    top: 60px;
    left: -180px;

    width: 500px;
    height: 500px;
}


.radio-glow-2 {
    right: -180px;
    bottom: -120px;

    width: 520px;
    height: 520px;
}


/* ==========================================================================
   CONTAINER PRINCIPAL
   ========================================================================== */

.radio-container {
    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin-inline: auto;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.radio-intro {
    max-width: 820px;

    margin:
        0 auto
        58px;

    text-align: center;
}


.radio-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: var(--laranja);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}


.radio-intro h1 {
    max-width: 800px;

    margin:
        0 auto
        22px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            3.2rem,
            6vw,
            5.2rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.025em;
}


.radio-intro p {
    max-width: 660px;

    margin: 0 auto;

    color: var(--texto-suave);

    font-size: 15px;

    line-height: 1.75;
}


/* ==========================================================================
   CARD PRINCIPAL
   ========================================================================== */

.radio-player {
    display: grid;

    grid-template-columns:
        minmax(360px, 0.9fr)
        minmax(480px, 1.1fr);

    width: 100%;

    min-height: 500px;

    overflow: hidden;

    border:
        1px solid
        var(--borda);

    border-radius: 26px;

    background:
        var(--preto-card);

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.36),

        0 0 50px
        rgba(220, 154, 92, 0.035);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s var(--ease);
}


.radio-player:hover {
    border-color:
        rgba(220, 154, 92, 0.14);

    box-shadow:
        0 42px 100px
        rgba(0, 0, 0, 0.42),

        0 0 65px
        rgba(220, 154, 92, 0.05);
}


/* ==========================================================================
   ÁREA DO ALTO-FALANTE
   ========================================================================== */

.radio-player-visual {
    position: relative;

    display: grid;

    place-items: center;

    min-width: 0;
    min-height: 500px;

    padding: 52px;

    overflow: hidden;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.055);

    background:
        radial-gradient(
            circle at center,
            rgba(220, 154, 92, 0.07),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            #0e0e12,
            #08080b
        );
}


/* ==========================================================================
   ALTO-FALANTE
   ========================================================================== */

.radio-speaker {
    --speaker-intensity: 0.06;

    position: relative;

    width:
        clamp(
            240px,
            23vw,
            310px
        );

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    isolation: isolate;
}


/* ==========================================================================
   ONDAS SONORAS
   ========================================================================== */

.speaker-wave {
    position: absolute;

    z-index: 0;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;

    transition:
        transform 100ms linear,
        opacity 120ms linear;
}


.speaker-wave-1 {
    inset: 4%;

    border:
        1px solid
        rgba(220, 154, 92, 0.18);

    opacity:
        calc(
            0.05 +
            var(--speaker-intensity) * 0.24
        );

    transform:
        scale(
            calc(
                1 +
                var(--speaker-intensity) * 0.035
            )
        );
}


.speaker-wave-2 {
    inset: -5%;

    border:
        1px solid
        rgba(220, 154, 92, 0.11);

    opacity:
        calc(
            0.025 +
            var(--speaker-intensity) * 0.16
        );

    transform:
        scale(
            calc(
                1 +
                var(--speaker-intensity) * 0.055
            )
        );
}


.speaker-wave-3 {
    inset: -15%;

    border:
        1px solid
        rgba(220, 154, 92, 0.065);

    opacity:
        calc(
            0.015 +
            var(--speaker-intensity) * 0.10
        );

    transform:
        scale(
            calc(
                1 +
                var(--speaker-intensity) * 0.075
            )
        );
}


/* ==========================================================================
   ESTRUTURA EXTERNA DO ALTO-FALANTE
   ========================================================================== */

.speaker-surround {
    position: relative;

    z-index: 3;

    width: 78%;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(220, 154, 92, 0.22);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 43%,
            #18181a 0%,
            #101012 42%,
            #09090a 68%,
            #040405 100%
        );

    box-shadow:
        inset 0 0 30px
        rgba(255, 255, 255, 0.018),

        inset 0 -20px 34px
        rgba(0, 0, 0, 0.75),

        0 24px 50px
        rgba(0, 0, 0, 0.38),

        0 0
        calc(
            18px +
            var(--speaker-intensity) * 20px
        )
        rgba(220, 154, 92, 0.07);

    transform:
        scale(
            calc(
                1 +
                var(--speaker-intensity) * 0.012
            )
        );

    will-change: transform;

    transition:
        transform 80ms linear,
        box-shadow 120ms ease;
}


.speaker-surround::before {
    content: "";

    position: absolute;

    inset: 7%;

    border:
        1px solid
        rgba(255, 255, 255, 0.035);

    border-radius: 50%;

    box-shadow:
        inset 0 0 22px
        rgba(0, 0, 0, 0.58);

    pointer-events: none;
}


/* ==========================================================================
   CONE
   ========================================================================== */

.speaker-cone {
    position: relative;

    z-index: 2;

    width: 73%;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.03);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 42%,
            #161617 0%,
            #0c0c0d 45%,
            #080809 70%,
            #030304 100%
        );

    box-shadow:
        inset 0 0 30px
        rgba(0, 0, 0, 0.55),

        inset 0 -14px 28px
        rgba(0, 0, 0, 0.65);

    transform:
        scale(
            calc(
                1 +
                var(--speaker-intensity) * 0.028
            )
        );

    will-change: transform;

    transition:
        transform 65ms linear;
}


/* ==========================================================================
   CENTRO DO ALTO-FALANTE
   ========================================================================== */

.speaker-center {
    position: relative;

    z-index: 3;

    width: 35%;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(220, 154, 92, 0.32);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 40%,
            #121212,
            #060606 74%
        );

    box-shadow:
        inset 0 0 14px
        rgba(255, 255, 255, 0.018),

        0 0
        calc(
            10px +
            var(--speaker-intensity) * 15px
        )
        rgba(220, 154, 92, 0.08);

    transform:
        scale(
            calc(
                1 +
                var(--speaker-intensity) * 0.02
            )
        );

    transition:
        transform 65ms linear,
        box-shadow 100ms linear;
}


.speaker-center img {
    width: 60%;
    height: auto;

    opacity: 0.95;

    filter:
        drop-shadow(
            0 4px 9px
            rgba(0, 0, 0, 0.4)
        );
}


/* ==========================================================================
   CONTEÚDO DO PLAYER
   ========================================================================== */

.radio-player-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        52px
        58px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018),
            transparent 65%
        ),
        var(--preto-card);

    text-align: left;
}


/* ==========================================================================
   STATUS AO VIVO
   ========================================================================== */

.radio-status {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 8px;

    margin-bottom: 24px;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(220, 154, 92, 0.23);

    border-radius: 999px;

    background:
        rgba(220, 154, 92, 0.065);

    color:
        var(--laranja-hover);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.radio-live-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--laranja);

    box-shadow:
        0 0 12px
        rgba(220, 154, 92, 0.60);
}


/* ==========================================================================
   INFORMAÇÕES
   ========================================================================== */

.radio-kicker {
    margin:
        0 0 8px;

    color: var(--texto-fraco);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.radio-player-content h2 {
    margin:
        0 0 10px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            3rem,
            4vw,
            4.1rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.02em;
}


.radio-programa {
    margin:
        0 0 18px;

    color: var(--laranja);

    font-size: 14px;
    font-weight: 700;
}


.radio-descricao {
    max-width: 500px;

    margin: 0;

    color: var(--texto-suave);

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================================
   PLAYER CASTER.FM
   ========================================================================== */

.radio-caster-player {
    width: 100%;
    max-width: 520px;

    margin-top: 24px;

    overflow: hidden;

    border-radius: 16px;

    background: #111218;
}


.radio-caster-shell {
    position: relative;

    width: 100%;

    min-height: 220px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 16px;

    background:
        #111218;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025),

        0 12px 32px
        rgba(0, 0, 0, 0.18);
}


.radio-caster-shell .cstrEmbed {
    display: block;

    width: 100%;
    min-height: 220px;

    background:
        #111218;
}


.radio-caster-shell iframe {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 220px !important;

    margin: 0 !important;

    border: 0 !important;

    border-radius: 16px !important;

    background:
        #111218 !important;
}


.cstrEmbed {
    width: 100% !important;

    max-width: 100% !important;
}


.cstrEmbed > a {
    color:
        rgba(255, 255, 255, 0.32);

    font-size: 11px;
}


/*
 * IMPORTANTE:
 *
 * O conteúdo interno do player Caster.fm pode ser carregado
 * dentro de iframe externo.
 *
 * Se isso acontecer, o CSS do site não consegue alterar
 * elementos internos desse iframe.
 *
 * O tema escuro deve ser solicitado no HTML usando:
 *
 * data-theme="dark"
 * data-color="dc9a5c"
 */


/* ==========================================================================
   NOTA DA TRANSMISSÃO
   ========================================================================== */

.radio-stream-note {
    margin:
        12px 0 0;

    color:
        rgba(255, 255, 255, 0.27);

    font-size: 10px;

    line-height: 1.5;
}


/* ==========================================================================
   PROGRAMAÇÃO
   ========================================================================== */

.radio-programacao {
    padding:
        110px
        24px
        120px;

    background:
        #f7f5f2;

    color:
        #111;
}


.radio-programacao-container {
    max-width: 1040px;
}


/* ==========================================================================
   CABEÇALHO DA PROGRAMAÇÃO
   ========================================================================== */

.radio-section-heading {
    max-width: 620px;

    margin:
        0 auto
        60px;

    text-align: center;
}


.radio-section-heading h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.1rem
        );

    font-weight: 500;

    line-height: 1;
}


.radio-divider {
    display: block;

    width: 70px;
    height: 1px;

    margin:
        22px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--laranja),
            transparent
        );
}


.radio-section-heading p {
    max-width: 560px;

    margin:
        0 auto;

    color: #666;

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================================
   GRADE DA PROGRAMAÇÃO
   ========================================================================== */

.radio-schedule {
    border-top:
        1px solid
        rgba(0, 0, 0, 0.09);
}


.radio-schedule-item {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 40px;

    padding:
        30px
        4px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.09);

    transition:
        padding-left 0.3s var(--ease),
        background 0.3s ease;
}


.radio-schedule-item:hover {
    padding-left: 14px;
}


.radio-schedule-day {
    color: var(--laranja);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.radio-schedule-content h3 {
    margin:
        0 0 5px;

    color: #111;

    font-size: 15px;
    font-weight: 700;
}


.radio-schedule-content p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.55;
}


.radio-schedule-time {
    min-width: 72px;

    color: #111;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.6rem;
    font-weight: 600;

    text-align: right;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
    padding:
        44px
        24px;

    border-top:
        1px solid
        rgba(220, 154, 92, 0.14);

    background:
        #080808;
}


.footer-container {
    max-width: 1180px;

    margin-inline: auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 32px;
}


.footer-nome {
    display: block;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
    font-weight: 600;
}


.footer-tagline,
.footer p {
    margin:
        4px 0 0;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 12px;
}


/* ==========================================================================
   RESPONSIVIDADE — NOTEBOOK
   ========================================================================== */

@media (max-width: 1200px) {

    .nav-container {
        padding-inline: 32px;
    }


    .menu {
        gap: 23px;
    }


    .radio-container {
        width:
            min(
                1000px,
                calc(100% - 32px)
            );
    }


    .radio-player {
        grid-template-columns:
            minmax(310px, 0.85fr)
            minmax(430px, 1.15fr);
    }


    .radio-player-content {
        padding:
            48px
            42px;
    }


    .radio-player-visual {
        padding: 42px;
    }

}


/* ==========================================================================
   RESPONSIVIDADE — TABLET
   ========================================================================== */

@media (max-width: 900px) {

    :root {
        --header-height: 78px;
    }


    .nav-container {
        padding-inline: 22px;
    }


    .menu-toggle {
        display: block;
    }


    .menu {
        position: fixed;

        top: 88px;
        left: 18px;
        right: 18px;

        display: none;

        max-height:
            calc(
                100vh - 110px
            );

        overflow-y: auto;

        padding: 22px;

        border:
            1px solid
            rgba(255, 255, 255, 0.08);

        border-radius: 18px;

        background:
            rgba(12, 12, 14, 0.985);

        box-shadow:
            0 24px 60px
            rgba(0, 0, 0, 0.42);

        flex-direction: column;

        align-items: stretch;

        gap: 20px;
    }


    .menu.open {
        display: flex;
    }


    .menu > a,
    .drop-btn {
        width: 100%;

        font-size: 15px;

        text-align: left;
    }


    .menu .btn-contato {
        width: fit-content;

        text-align: center;
    }


    .dropdown-menu {
        position: static;

        display: none;

        min-width: 0;

        margin-top: 12px;

        padding: 8px;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: none;

        box-shadow: none;
    }


    .dropdown.open .dropdown-menu {
        display: block;
    }


    .radio-hero {
        min-height: auto;

        padding-top: 138px;
    }


    .radio-player {
        grid-template-columns: 1fr;
    }


    .radio-player-visual {
        min-height: 350px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.055);
    }


    .radio-speaker {
        width: 265px;
    }


    .radio-player-content {
        padding:
            46px
            40px;
    }


    .radio-caster-player {
        max-width: none;
    }


    .radio-caster-shell,
    .radio-caster-shell .cstrEmbed,
    .radio-caster-shell iframe {
        min-height: 220px !important;
    }

}


/* ==========================================================================
   RESPONSIVIDADE — MOBILE
   ========================================================================== */

@media (max-width: 560px) {

    :root {
        --header-height: 72px;
    }


    .header {
        min-height:
            var(--header-height);
    }


    .nav-container {
        padding-inline: 16px;
    }


    .logo {
        gap: 9px;

        font-size: 16px;
    }


    .logo img {
        width: 40px;
        height: 40px;
    }


    .menu {
        top: 80px;

        left: 12px;
        right: 12px;
    }


    .radio-hero {
        padding:
            120px
            12px
            78px;
    }


    .radio-container {
        width: 100%;
    }


    .radio-intro {
        margin-bottom: 42px;

        padding-inline: 8px;
    }


    .radio-intro h1 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4rem
            );
    }


    .radio-intro p {
        font-size: 14px;
    }


    .radio-player {
        border-radius: 20px;
    }


    .radio-player-visual {
        min-height: 285px;

        padding:
            32px
            18px;
    }


    .radio-speaker {
        width: 205px;
    }


    .radio-player-content {
        padding:
            34px
            20px;
    }


    .radio-status {
        margin-bottom: 22px;
    }


    .radio-player-content h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                3.5rem
            );
    }


    .radio-caster-player {
        margin-top: 20px;

        border-radius: 13px;
    }


    .radio-caster-shell {
        border-radius: 13px;
    }


    .radio-caster-shell iframe {
        border-radius:
            13px !important;
    }


    .radio-programacao {
        padding:
            82px
            18px
            92px;
    }


    .radio-section-heading {
        margin-bottom: 46px;
    }


    .radio-schedule-item {
        grid-template-columns:
            1fr
            auto;

        gap:
            12px
            20px;

        padding:
            26px
            0;
    }


    .radio-schedule-day {
        grid-column:
            1 / -1;
    }


    .radio-schedule-time {
        align-self: center;
    }


    .footer {
        padding:
            38px
            20px;
    }


    .footer-container {
        flex-direction: column;

        text-align: center;
    }

}


/* ==========================================================================
   TELAS MUITO PEQUENAS
   ========================================================================== */

@media (max-width: 380px) {

    .logo span {
        font-size: 14px;
    }


    .radio-player-content {
        padding:
            30px
            16px;
    }


    .radio-speaker {
        width: 185px;
    }

}


/* ==========================================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }


    .radio-speaker {
        --speaker-intensity:
            0.055 !important;
    }

}