/* Clima en vivo del hero. */
.clima-badge {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    max-width: 540px;
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px solid var(--linea-osc);
    background: rgba(13, 17, 23, 0.72);
    backdrop-filter: blur(8px);
}

.clima-badge[hidden] {
    display: none;
}

.clima-badge-icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(240, 115, 48, 0.36);
    border-radius: 50%;
    background: rgba(240, 115, 48, 0.08);
}

.clima-badge svg {
    width: 25px;
    height: 25px;
    color: var(--naranja);
}

.clima-ubicacion {
    display: block;
    margin-bottom: 2px;
    color: var(--naranja);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#climaTexto {
    margin: 0;
    color: var(--hueso);
    font-family: var(--display);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

#climaTexto b {
    color: var(--naranja);
    font-weight: 700;
}

.clima-beneficio {
    margin: 5px 0 0;
    color: var(--niebla);
    font-size: 12px;
    line-height: 1.45;
}

#capaClima {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero > .hero-grid {
    z-index: 2;
}

body.clima-soleado .hero-luz {
    width: 820px;
    height: 820px;
    background: radial-gradient(circle, rgba(240, 150, 60, 0.26), transparent 62%);
}

body.clima-soleado .hv-calida {
    filter: saturate(1.2) brightness(1.06);
}

body.clima-nublado .hero-luz {
    background: radial-gradient(circle, rgba(150, 170, 190, 0.1), transparent 62%);
}

body.clima-lluvia .hero {
    background: linear-gradient(180deg, #101722 0%, var(--noche) 100%);
}

body.clima-lluvia .hero-luz {
    background: radial-gradient(circle, rgba(120, 155, 185, 0.12), transparent 62%);
}

body.clima-noche .hero {
    background: linear-gradient(180deg, #080b10 0%, var(--noche) 100%);
}

body.clima-noche .hero-luz {
    background: radial-gradient(circle, rgba(120, 150, 200, 0.1), transparent 60%);
}

body.clima-nieve .hero-luz {
    background: radial-gradient(circle, rgba(190, 215, 235, 0.12), transparent 60%);
}

@media (max-width: 820px) {
    .clima-badge {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        border-left: 3px solid var(--naranja);
        background: rgba(20, 27, 38, 0.94);
    }
}

@media (max-width: 640px) {
    .clima-badge {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .clima-badge-icono {
        width: 40px;
        height: 40px;
    }

    #climaTexto {
        font-size: 23px;
    }

    .clima-beneficio {
        font-size: 11.5px;
    }
}