/*
Theme Name: Radio Quimika
Description: Radio Quimika 98.7
Version: 3.0
*/

:root {
    --rq-yellow: #ffd900;
    --rq-pink: #ff168f;
    --rq-violet: #752cff;
    --rq-bg: #040a11;
    --rq-panel: #0b1823;
    --rq-panel-2: #101d29;
    --rq-border: #314451;
    --rq-muted: #aeb9c4;
    --rq-white: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--rq-white);
    background:
        radial-gradient(
            circle at -10% 55%,
            rgba(255, 16, 132, 0.28),
            transparent 34%
        ),
        radial-gradient(
            circle at 108% 65%,
            rgba(96, 37, 255, 0.28),
            transparent 38%
        ),
        #050b13;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(125px);
    pointer-events: none;
}

body::before {
    left: -340px;
    top: 360px;
    background: rgba(255, 0, 128, 0.36);
}

body::after {
    right: -340px;
    top: 520px;
    background: rgba(101, 41, 255, 0.34);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.wrap {
    width: min(1480px, calc(100% - 32px));
    margin-inline: auto;
}

.yellow {
    color: var(--rq-yellow);
}

/* Barra superior */

.top {
    position: relative;
    z-index: 30;
    color: #f4f6f8;
    background:
        linear-gradient(
            90deg,
            #111d29,
            #162334 48%,
            #101b29
        );
    border-bottom: 1px solid #30414f;
    font-size: 13px;
}

.top .wrap {
    display: grid;
    grid-template-columns:
        1fr
        1fr
        1.25fr;
    align-items: center;
    height: 42px;
}

.top .wrap > span:nth-child(2) {
    text-align: center;
}

.top .wrap > span:nth-child(3) {
    text-align: right;
}

/* Encabezado */

.head {
    position: relative;
    z-index: 25;
    background: #020910;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav {
    display: grid;
    grid-template-columns:
        210px
        minmax(0, 1fr)
        auto;
    align-items: center;
    min-height: 118px;
    gap: 34px;
}

.logo {
    display: flex;
    align-items: center;
    width: 185px;
    height: 105px;
    overflow: hidden;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(19px, 2vw, 34px);
    min-width: 0;
}

.menu ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(19px, 2vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    position: relative;
    padding-block: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    text-transform: uppercase;
}

.menu a:hover::after,
.menu .current-menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 3px;
    border-radius: 4px;
    background: var(--rq-yellow);
}

.live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 58px;
    padding: 15px 26px;
    border-radius: 999px;
    color: #06101a;
    background: var(--rq-yellow);
    font-size: 19px;
    font-weight: 950;
    white-space: nowrap;
}

/* Banner */

.hero {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 8 / 3;
    overflow: hidden;
    background:
        url("assets/images/radioquimika/hero/la-culpa-es-de-roman-1920x720.webp")
        center / cover
        no-repeat;
}

.hero::before,
.hero::after,
.hero .wrap::before {
    display: none;
}

.hero .wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
}

.hero em,
.hero h1,
.hero h2 {
    display: none;
}

.hero .youtube {
    position: absolute;
    z-index: 3;
    left: 35.5%;
    top: 76%;
    width: 29%;
    height: 12%;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: transparent;
    background: transparent;
    font-size: 0;
    box-shadow: none;
}

/* Contenido */

main.wrap {
    position: relative;
    z-index: 5;
    padding-top: 16px;
}

/* Reproductor */

.player {
    position: relative;
    display: grid;
    grid-template-columns:
        78px
        minmax(250px, 330px)
        minmax(280px, 1fr)
        190px;
    align-items: center;
    min-height: 112px;
    gap: 22px;
    margin: 0 0 14px;
    padding: 16px 26px;
    overflow: hidden;
    border: 1px solid var(--rq-border);
    border-radius: 22px;
    background:
        linear-gradient(
            115deg,
            #0b1823,
            #101c29
        );
    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 27, 149, 0.05);
}

.player::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rq-pink),
            var(--rq-violet),
            transparent
        );
}

.play {
    width: 66px;
    height: 66px;
    padding: 0 0 0 5px;
    border: 0;
    border-radius: 50%;
    color: #06101a;
    background: var(--rq-yellow);
    font-size: 25px;
    cursor: pointer;
}

.player-meta {
    min-width: 0;
}

.station {
    color: #fff;
    font-size: 25px;
    font-weight: 950;
    line-height: 1.05;
}

.station small {
    display: block;
    margin-top: 6px;
    color: #bec8d1;
    font-size: 19px;
    font-weight: 850;
}

.player-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #c8d1d9;
    font-size: 12px;
}

.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7d8992;
}

.is-playing .live-dot {
    background: #ff266f;
    box-shadow: 0 0 13px #ff266f;
}

.wavebar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    gap: 4px;
    overflow: hidden;
}

.wavebar i {
    display: block;
    width: 3px;
    height: 24%;
    min-height: 5px;
    border-radius: 4px;
    background:
        linear-gradient(
            #ff32ad,
            #742dff
        );
}

.wavebar i:nth-child(3n) {
    height: 72%;
}

.wavebar i:nth-child(4n) {
    height: 42%;
}

.wavebar i:nth-child(5n) {
    height: 92%;
}

.wavebar i:nth-child(7n) {
    height: 57%;
}

.is-playing .wavebar i {
    animation:
        rq-wave 0.65s
        ease-in-out
        infinite alternate;
}

@keyframes rq-wave {
    to {
        height: 96%;
    }
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.player-controls button {
    padding: 0;
    border: 0;
    color: white;
    background: none;
    font-size: 24px;
    cursor: pointer;
}

.player-controls input {
    width: 110px;
    accent-color: var(--rq-pink);
}

.player-error {
    grid-column: 2 / -1;
    margin-top: -14px;
    color: #ff9cca;
    font-size: 11px;
}

/* Noticias móviles */

.ticker {
    display: grid;
    grid-template-columns:
        250px
        minmax(0, 1fr);
    align-items: center;
    min-height: 52px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--rq-border);
    border-radius: 15px;
    background: #08131e;
}

.ticker b {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 12px 22px;
    color: #06101a;
    background: var(--rq-yellow);
    font-size: 16px;
    font-weight: 950;
    white-space: nowrap;
}

.ticker span {
    min-width: 0;
    padding-inline: 28px;
    overflow: hidden;
    color: #f3f5f7;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Estructura principal */

.grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        355px;
    align-items: start;
    gap: 14px;
}

.grid > div,
.grid > aside {
    min-width: 0;
}

.box {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--rq-border);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            #0d1a26,
            #08131d
        );
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.14);
}

/* Noticias */

.news {
    display: grid;
    grid-template-columns:
        minmax(0, 2.2fr)
        minmax(265px, 1fr);
    gap: 14px;
    padding: 14px;
}

.lead {
    position: relative;
    min-height: 475px;
    overflow: hidden;
    border-radius: 13px;
}

.lead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            transparent 35%,
            rgba(1, 7, 12, 0.96)
        );
}

.copy {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
}

.pill {
    display: inline-flex;
    padding: 7px 16px;
    border-radius: 999px;
    color: #06101a;
    background: var(--rq-yellow);
    font-size: 12px;
    font-weight: 950;
}

.copy h2 {
    max-width: 760px;
    margin: 13px 0 8px;
    font-size: clamp(28px, 2.5vw, 42px);
    line-height: 1.02;
    letter-spacing: -1.2px;
}

.copy p {
    margin: 0;
    color: #d6dde3;
    font-size: 17px;
    line-height: 1.35;
}

.side {
    min-width: 0;
}

.side article {
    display: grid;
    grid-template-columns:
        132px
        minmax(0, 1fr);
    gap: 12px;
    min-height: 126px;
    padding: 9px 0 13px;
    border-bottom: 1px solid #344450;
}

.side article:first-child {
    padding-top: 0;
}

.side article:last-child {
    border-bottom: 0;
}

.side img {
    width: 132px;
    height: 105px;
    object-fit: cover;
    border-radius: 9px;
}

.side h3 {
    margin: 6px 0;
    font-size: 16px;
    line-height: 1.08;
}

.side small {
    color: #e0e5e9;
    font-size: 12px;
}

.side .yellow {
    color: var(--rq-yellow);
    font-weight: 900;
}

/* Encabezados de sección */

.section {
    margin-top: 14px;
    padding: 14px;
}

.sh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 36px;
    margin-bottom: 12px;
}

.sh h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.05;
}

.sh a {
    flex: 0 0 auto;
    color: var(--rq-yellow);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

/* Programación */

.programs {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.program {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 11px;
    background-color: #06101a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.program:nth-child(1) {
    background-image:
        url("assets/images/radioquimika/programas/la-manana-perfecta-720x900.webp");
}

.program:nth-child(2) {
    background-image:
        url("assets/images/radioquimika/programas/ahora-chubut-720x900.webp");
}

.program:nth-child(3) {
    background-image:
        url("assets/images/radioquimika/programas/puro-debate-720x900.webp");
}

.program:nth-child(4) {
    background-image:
        url("assets/images/radioquimika/programas/tarde-libre-720x900.webp");
}

.program:nth-child(5) {
    background-image:
        url("assets/images/radioquimika/programas/la-formula-musical-720x900.webp");
}

.program img,
.program > div {
    visibility: hidden;
}

/* Columna derecha */

.tiktok {
    padding: 14px;
}

.tiktok h2 {
    margin: 3px 3px 12px;
    font-size: 25px;
}

.tiktok a {
    display: block;
}

.tk {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
    border: 2px solid white;
    border-radius: 18px;
    color: transparent;
    background:
        url("assets/images/radioquimika/vivo/tiktok-live-900x1200.webp")
        center / cover
        no-repeat;
    font-size: 0;
}

.tk .yellow {
    display: none;
}

.weather {
    margin-top: 14px;
    padding: 18px;
}

.weather .sh {
    align-items: flex-start;
}

.weather .sh h2 {
    max-width: 190px;
    font-size: 23px;
}

.weather-main {
    display: grid;
    grid-template-columns:
        78px
        minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 130px;
}

.wi {
    font-size: 57px;
}

.temp {
    margin-bottom: 5px;
    font-size: 48px;
    font-weight: 950;
}

/* Zona inferior */

.bottom {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.05fr);
    gap: 14px;
    margin: 14px auto 30px;
}

.bottom > .box {
    margin: 0;
    padding: 14px;
}

.pods {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pod {
    position: relative;
    height: auto;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    border-radius: 10px;
    background-color: #06101a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pod:nth-child(1) {
    background-image:
        url("assets/images/radioquimika/podcast/voces-de-la-patagonia-1000x700.webp");
}

.pod:nth-child(2) {
    background-image:
        url("assets/images/radioquimika/podcast/historias-que-inspiran-1000x700.webp");
}

.pod:nth-child(3) {
    background-image:
        url("assets/images/radioquimika/podcast/economia-en-simple-1000x700.webp");
}

.pod img,
.pod b {
    visibility: hidden;
}

.event {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 11px;
    background:
        url("assets/images/radioquimika/agenda/festival-patagonia-viva-1400x700.webp")
        center / cover
        no-repeat;
}

.event img,
.event > div {
    visibility: hidden;
}

/* Pie */

.foot {
    margin-top: 0;
    padding: 38px 0;
    border-top: 1px solid var(--rq-border);
    background: #020910;
}

.foot .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.foot strong {
    color: white;
    font-size: 32px;
}

.foot strong b {
    color: var(--rq-yellow);
}

/* Tabletas */

@media (max-width: 1180px) {
    .wrap {
        width: min(100% - 24px, 1120px);
    }

    .nav {
        grid-template-columns:
            170px
            minmax(0, 1fr)
            auto;
        gap: 22px;
    }

    .logo {
        width: 160px;
        height: 94px;
    }

    .menu {
        gap: 18px;
    }

    .menu ul {
        gap: 18px;
    }

    .menu a {
        font-size: 11px;
    }

    .grid {
        grid-template-columns:
            minmax(0, 1fr)
            310px;
    }

    .news {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(220px, 1fr);
    }

    .side article {
        grid-template-columns:
            105px
            minmax(0, 1fr);
    }

    .side img {
        width: 105px;
        height: 88px;
    }
}

/* Celular y tablet vertical */

@media (max-width: 900px) {
    .top .wrap {
        grid-template-columns:
            1fr
            1fr;
    }

    .top .wrap > span:nth-child(3) {
        display: none;
    }

    .nav {
        grid-template-columns:
            145px
            1fr
            auto;
        min-height: 88px;
    }

    .logo {
        width: 138px;
        height: 80px;
    }

    .menu {
        display: none;
    }

    .live {
        min-width: 145px;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .hero .youtube {
        left: 29%;
        width: 42%;
    }

    .player {
        grid-template-columns:
            66px
            minmax(0, 1fr)
            auto;
        gap: 15px;
    }

    .wavebar {
        grid-column: 1 / -1;
        height: 28px;
    }

    .player-controls {
        grid-column: 3;
        grid-row: 1;
    }

    .grid,
    .bottom {
        grid-template-columns: 1fr;
    }

    .news {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(230px, 1fr);
    }

    .rq-aside,
    aside {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
        gap: 14px;
    }

    .weather {
        margin-top: 0;
    }
}

/* Celular */

@media (max-width: 700px) {
    .wrap {
        width: calc(100% - 18px);
    }

    .top {
        font-size: 11px;
    }

    .top .wrap {
        grid-template-columns: 1fr;
        height: 36px;
    }

    .top .wrap > span:nth-child(2),
    .top .wrap > span:nth-child(3) {
        display: none;
    }

    .nav {
        grid-template-columns:
            112px
            1fr
            auto;
        min-height: 76px;
        gap: 12px;
    }

    .logo {
        width: 110px;
        height: 65px;
    }

    .live {
        min-width: 112px;
        min-height: 42px;
        padding: 10px 14px;
        font-size: 13px;
    }

    .hero {
        aspect-ratio: 4 / 5;
        background-image:
            url("assets/images/radioquimika/hero/la-culpa-es-de-roman-mobile-1080x1350.webp");
    }

    .hero .youtube {
        left: 19%;
        top: 66%;
        width: 62%;
        height: 9%;
    }

    main.wrap {
        padding-top: 9px;
    }

    .player {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            auto;
        min-height: 90px;
        padding: 12px;
        border-radius: 16px;
    }

    .play {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .station {
        font-size: 17px;
    }

    .station small {
        font-size: 12px;
    }

    .player-controls input {
        display: none;
    }

    .ticker {
        grid-template-columns:
            150px
            minmax(0, 1fr);
        min-height: 45px;
    }

    .ticker b {
        padding-inline: 10px;
        font-size: 12px;
    }

    .ticker span {
        padding-inline: 14px;
        font-size: 12px;
    }

    .news {
        grid-template-columns: 1fr;
        padding: 9px;
    }

    .lead {
        min-height: 395px;
    }

    .copy {
        right: 17px;
        bottom: 17px;
        left: 17px;
    }

    .copy h2 {
        font-size: 28px;
    }

    .copy p {
        font-size: 14px;
    }

    .side article {
        grid-template-columns:
            108px
            minmax(0, 1fr);
    }

    .side img {
        width: 108px;
        height: 84px;
    }

    .programs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .program:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 5px);
        justify-self: center;
    }

    .rq-aside,
    aside {
        grid-template-columns: 1fr;
    }

    .weather {
        margin-top: 0;
    }

    .pods {
        grid-template-columns: 1fr;
    }

    .pod {
        aspect-ratio: 10 / 6;
    }

    .sh h2 {
        font-size: 17px;
    }

    .sh a {
        font-size: 10px;
    }

    .foot .wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* RADIOQUIMIKA TIPOGRAFIA V3 */
:root{--rq-condensed:"Arial Narrow","Aptos Narrow","Roboto Condensed","Liberation Sans Narrow",sans-serif}
.top,.topbar,.head,.nav,.menu,.ticker,.player,.section,.box,.weather,.event,footer{font-family:var(--rq-condensed)}
.top,.topbar{font-size:14px;font-weight:600;letter-spacing:.01em}
.menu a,.nav a{font-family:var(--rq-condensed);font-size:15px;font-weight:700;letter-spacing:.025em;text-transform:uppercase}
.live,.live-button,.btn-live{font-family:var(--rq-condensed);font-size:18px;font-weight:800;letter-spacing:.025em}
.hero{min-height:0;height:auto;aspect-ratio:1920/650;background-image:url("assets/images/radioquimika/hero/la-culpa-es-de-roman-1920x720.webp");background-position:center center;background-size:cover;background-repeat:no-repeat}
.hero::before,.hero::after,.hero .hero-content,.hero .content,.hero h1,.hero h2,.hero p,.hero .button,.hero .btn{display:none}
.player strong,.ticker strong,.section h2,.box h2,.weather h2,.event h2{font-family:var(--rq-condensed);font-weight:800;letter-spacing:.01em}
.program h3,.pod h3,.lead h2,.side h3{font-family:var(--rq-condensed);font-weight:800;letter-spacing:.005em}
@media (max-width:760px){.hero{aspect-ratio:16/9;background-position:center center}.menu a,.nav a{font-size:14px}}
/* FIN RADIOQUIMIKA TIPOGRAFIA V3 */