/* ============================================
   PATAGONIA LACUSTRE · CLIMA Y ESTADO DEL LAGO
   Complemento de styles.css — NO lo reemplaza.
   Reutiliza las custom properties de :root definidas allí.

   Nombre versionado a propósito: firebase.json cachea los CSS y JS como
   immutable por un año. Para cambiar el estilo hay que subir de versión y
   actualizar el <link>, igual que con las imágenes.

   CHANGELOG
   v2 (12-ago-2026): la landing dejó de vivir sobre un plano crema liso.
   Se agrega el fondo de la cuenca fija bajo velo (mismo patrón que
   .clima-page::before), halos de marca y las secciones en panel de papel.
   La card del clima crece de 172px a 220-320px y pasa a dos columnas
   sobre 860px, para que el estado del lago quede al mismo nivel de
   lectura que la temperatura.
   ============================================ */

/* ===== HERO COMPACTO (index.html) =====
   Sobrescribe .hero de styles.css sin tocar ese archivo (ya está
   desplegado con caché immutable de un año; editarlo dejaría a los
   visitantes que vuelven con la versión vieja).

   POR QUÉ: el hero original ocupa 100vh. En un teléfono eso significa
   que el clima queda bajo el pliegue, y quien llega porque alguien le
   dijo «mira cómo está el lago» ve una postal y se va. El hero baja a
   ~56vh para que la tira de clima entre en la primera pantalla.

   El mínimo en px evita que se aplaste en teléfono acostado. */
.hero--compacto {
    min-height: max(min(42vh, 100vh - 300px), 280px);
}

.hero--compacto .hero__logo {
    width: clamp(64px, 8vw, 92px);
    height: clamp(64px, 8vw, 92px);
    margin: 0 auto 1.1rem;
}

.hero--compacto .hero__title {
    font-size: clamp(1.7rem, 4.5vw, 2.9rem);
    margin-bottom: 0.35rem;
}

.hero--compacto .hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 0.9rem;
}

.hero--compacto .hero__sub {
    margin-bottom: 1.5rem;
}

.hero--compacto .hero__content {
    padding: 1rem 2rem;
}

/* Cuando la cuenca viva está activa, el velo del hero se aclara mucho.
   El overlay original se calibró para hero.jpg, que es una foto clara de
   atardecer; sobre la escena —que ya viene teñida y con su propio ajuste
   de brillo— el mismo velo la deja prácticamente negra y no se ve el lago.
   Acá basta un degradado suave, y solo en la zona del texto. */
.hero--viva .hero__overlay {
    background: linear-gradient(
        to bottom,
        rgba(6, 15, 14, 0.52) 0%,
        rgba(6, 15, 14, 0.20) 42%,
        rgba(6, 15, 14, 0.10) 70%,
        rgba(6, 15, 14, 0.34) 100%
    );
}

/* La foto de respaldo se oculta cuando la escena cargó: si no, la cuenca
   viva queda compitiendo con hero.jpg debajo. */
.hero--viva .hero__bg {
    opacity: 0;
}

/* Sombra bajo el texto en vez de oscurecer toda la imagen: así se lee
   igual de bien y la cuenca se sigue viendo. */
.hero--viva .hero__title,
.hero--viva .hero__tagline,
.hero--viva .hero__sub {
    text-shadow: 0 2px 18px rgba(6, 15, 14, 0.85), 0 1px 4px rgba(6, 15, 14, 0.6);
}


/* La tira de clima justo abajo es la señal de que hay más: el indicador
   de scroll sobra y además se superpone con ella al acortar el hero. */
.hero--compacto .hero__scroll-hint {
    display: none;
}

@media (max-width: 640px) {
    /* En teléfono cada línea cuenta: la bajada larga se va y quedan
       marca, tagline y botón. El resto del relato vive más abajo. */
    .hero--compacto .hero__sub {
        display: none;
    }
    .hero--compacto {
        min-height: max(min(38vh, 100vh - 260px), 240px);
    }
}

/* ===== LA CUENCA VIVA =====
   Port de EscenaClima.module.css de la app. Una sola imagen aérea
   (/img/cuenca.webp, copiada desde app-movil/public/clima/) teñida por
   el clima real: filtro y velo vienen por estilo inline desde
   ambienteCuenca(). Cero librerías, cero assets extra.
   Respeta prefers-reduced-motion al final del bloque. */

.escena {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.escena__capa {
    position: absolute;
    inset: 0;
}

.escena__foto {
    position: absolute;
    inset: -3%;
    width: 106%;
    height: 106%;
    background-image: url('/img/cuenca.webp');
    background-size: cover;
    background-position: center 42%;
    transition: filter 1.2s ease;
    /* Deriva lenta: la cámara respira sobre la cuenca. Imperceptible de a
       un segundo, pero mata la sensación de foto pegada. */
    animation: escenaDeriva 60s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes escenaDeriva {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.07) translate(-1.2%, -0.8%); }
}

.escena__tinte {
    position: absolute;
    inset: 0;
    transition: background 1.2s ease, opacity 1.2s ease;
}

.escena__calor {
    position: absolute;
    inset: 0;
    animation: escenaCalor 5s ease-in-out infinite;
}

@keyframes escenaCalor {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.78; }
}

/* Sombras de nube corriendo SOBRE el terreno: el detalle que hace que la
   vista aérea se sienta viva y no una foto. */
.escena__sombra {
    position: absolute;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(6, 20, 16, 0.30) 0%, rgba(6, 20, 16, 0) 72%);
    animation: escenaSombra linear infinite;
}

.escena__sombra--1 { top: 6%;  width: 60%; animation-duration: 38s; animation-delay: -4s; }
.escena__sombra--2 { top: 26%; width: 44%; animation-duration: 52s; animation-delay: -22s; }
.escena__sombra--3 { top: 46%; width: 72%; animation-duration: 44s; animation-delay: -13s; }

@keyframes escenaSombra {
    from { transform: translateX(-80%); }
    to   { transform: translateX(220%); }
}

/* ===== LLUVIA / LLOVIZNA ===== */
.escena__gota {
    position: absolute;
    top: -30%;
    width: 1.5px;
    height: 26%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.65));
    animation-name: escenaCaerGota;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.escena__gota--fina {
    width: 1px;
    height: 17%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.45));
}

/* rotate + translateY: la gota cae en diagonal, como con viento. */
@keyframes escenaCaerGota {
    from { transform: rotate(10deg) translateY(0); }
    to   { transform: rotate(10deg) translateY(420%); }
}

/* ===== NIEVE ===== */
.escena__copo {
    position: absolute;
    top: -12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    animation-name: escenaCaerCopo;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes escenaCaerCopo {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(6%, 90%, 0); }
    50%  { transform: translate3d(-4%, 180%, 0); }
    75%  { transform: translate3d(7%, 270%, 0); }
    100% { transform: translate3d(1%, 360%, 0); }
}

/* ===== NIEBLA ===== */
.escena__niebla {
    position: absolute;
    left: -20%;
    width: 140%;
    height: 34%;
    background: linear-gradient(90deg,
        rgba(240, 240, 235, 0) 0%,
        rgba(240, 240, 235, 0.35) 25%,
        rgba(240, 240, 235, 0.22) 55%,
        rgba(240, 240, 235, 0) 100%);
    filter: blur(6px);
    animation: escenaFlotar 26s ease-in-out infinite alternate;
}

.escena__niebla--1 { top: 18%; }
.escena__niebla--2 { top: 42%; animation-duration: 34s; animation-delay: -12s; }
.escena__niebla--3 { top: 64%; animation-duration: 29s; animation-delay: -20s; }

@keyframes escenaFlotar {
    from { transform: translateX(-4%); }
    to   { transform: translateX(6%); }
}

/* Velo de contraste: asegura que el texto se lea sobre cualquier estado,
   incluidos los claros como nieve y niebla. */
.escena__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(8, 20, 18, 0.82) 0%,
        rgba(8, 20, 18, 0.55) 42%,
        rgba(8, 20, 18, 0.18) 72%,
        rgba(8, 20, 18, 0.30) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .escena__foto,
    .escena__sombra,
    .escena__calor,
    .escena__gota,
    .escena__copo,
    .escena__niebla { animation: none !important; }
}

/* Botón de acceso anticipado en el pie. Hereda de .btn--cta pero se
   achica: en el pie no debe competir con el CTA grande de más arriba. */
.footer__cta {
    margin-top: 1.35rem;
    font-size: 0.92rem;
    padding: 0.8rem 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Líneas de viento al estilo Windy. La capa entera se rota según la
   dirección real del aire (estilo inline desde el JS) y cada trazo cruza a
   velocidad proporcional a los km/h medidos.
   Se sobredimensiona la capa (-30% de inset) para que al rotar no queden
   esquinas vacías dentro del hero. */
.escena__capa--viento {
    inset: -30%;
    width: 160%;
    height: 160%;
}

.escena__viento {
    position: absolute;
    left: -40%;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 45%,
        rgba(255, 255, 255, 0) 100%);
    animation-name: escenaViento;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes escenaViento {
    from { transform: translateX(0); }
    to   { transform: translateX(340%); }
}

/* Pie de la card: «esto es la app» + señal de dato en vivo. */
.clima-tira__pie {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(250, 240, 214, 0.12);
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    color: var(--color-crema);
    opacity: 0.72;
}

.clima-tira__vivo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ABF9E;
    flex-shrink: 0;
    animation: latidoVivo 2.4s ease-in-out infinite;
}

@keyframes latidoVivo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(122, 191, 158, 0.55); opacity: 1; }
    55%      { box-shadow: 0 0 0 6px rgba(122, 191, 158, 0); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .escena__viento,
    .clima-tira__vivo { animation: none !important; }
}

/* ===== CARD DE CLIMA (index.html) =====
   Equivalente web de la ClimaCard del Home de la app: la cuenca aérea
   teñida por el clima, con la lluvia cayendo encima y los datos sobre
   un velo diagonal. */
/* REVERTIDO (9-ago-2026): la fusión con margen negativo grande se probó y
   quedó mal — la card se metía tanto en el hero que el título se montaba
   sobre el header y no se distinguía dónde terminaba una cosa y empezaba
   la otra. La card vuelve a vivir DEBAJO del hero, separada y con aire.
   Sigue siendo panel de vidrio (sin su propia copia de la cuenca), que era
   la mitad buena del cambio. */
.clima-tira {
    width: var(--container);
    margin: 2.25rem auto 0;
    position: relative;
    z-index: 3;
}

/* La card vuelve a llevar su propia escena viva (la vista aérea teñida
   por el clima). Ya no compite con el hero, porque el hero ahora son
   fotos del territorio: dos imágenes distintas contando cosas distintas. */
.clima-tira__card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    min-height: clamp(220px, 30vw, 320px);
    display: block;
    color: var(--color-crema);
    background: var(--color-bosque-profundo);
    border: 1px solid rgba(250, 240, 214, 0.10);
    box-shadow: 0 18px 48px rgba(6, 15, 14, 0.22);
    transition: box-shadow 0.4s var(--ease);
}

.clima-tira__card:hover {
    box-shadow: 0 22px 60px rgba(6, 15, 14, 0.30);
}

.clima-tira__lago-tag {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-claro);
    opacity: 0.85;
    margin-left: 0.5rem;
}

/* Puntitos del carrusel */
.clima-tira__dots {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    padding-top: 0.8rem;
}

.clima-tira__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(21, 59, 56, 0.28);
    transition: all 0.3s var(--ease);
}

.clima-tira__dot[aria-pressed="true"] {
    background: var(--color-dorado);
    transform: scale(1.25);
}

.clima-tira__inner {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: clamp(220px, 30vw, 320px);
}

.clima-tira__lugar {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* baseline y no center: con la temperatura a 5,2rem, centrado la
   condición queda flotando a media altura del número. */
.clima-tira__dato {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-top: 0.1rem;
}

.clima-tira__temp {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 8.5vw, 5.2rem);
    font-weight: 600;
    line-height: 1;
}

.clima-tira__cond {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    opacity: 0.95;
}

.clima-tira__meta {
    font-size: clamp(0.9rem, 1.3vw, 1.02rem);
    opacity: 0.82;
}

.clima-tira__lago {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    margin-top: 0.55rem;
}

.clima-tira__lago-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.clima-tira__lago-estado {
    font-weight: 600;
}

.clima-tira__cta {
    margin-top: auto;
    padding-top: 0.85rem;
    font-size: clamp(0.92rem, 1.3vw, 1.05rem);
    font-weight: 500;
    color: var(--color-dorado-claro);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.clima-tira__card:hover .clima-tira__cta {
    color: var(--color-blanco);
}

.clima-tira__cargando {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* En escritorio la card mide 1200px de ancho. Agrandarla y dejar el texto
   apilado a la izquierda deja media card vacía: a dos columnas el estado
   del lago sube al mismo nivel jerárquico que la temperatura, que es lo
   que la gente viene a mirar.
   Colocación por grid-area y no por orden de los nodos: si
   clima-tira.v2.js cambia el orden del HTML, el layout aguanta. */
@media (min-width: 860px) {
    .clima-tira__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "lugar lago"
            "dato  lago"
            "meta  cta"
            "pie   pie";
        align-content: center;
        column-gap: clamp(1.5rem, 4vw, 3rem);
        row-gap: 0.35rem;
    }
    .clima-tira__lugar { grid-area: lugar; }
    .clima-tira__dato  { grid-area: dato; }
    .clima-tira__meta  { grid-area: meta; }
    .clima-tira__lago  { grid-area: lago; align-self: center; margin-top: 0; }
    .clima-tira__cta   { grid-area: cta; justify-self: end; align-self: end; margin-top: 0; }
    .clima-tira__pie   { grid-area: pie; }
}

/* ===== PÁGINA /clima ===== */
.clima-page {
    padding-top: 88px;
    min-height: 100vh;
}

.clima-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-bosque-profundo);
    color: var(--color-crema);
    padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem);
    transition: background 1.2s var(--ease);
}

/* El contenido va sobre la escena. */
.clima-hero__inner {
    position: relative;
    z-index: 2;
    width: var(--container);
    margin: 0 auto;
}

/* Los degradados de respaldo quedan por si la imagen de la cuenca no
   carga: la escena va encima cuando sí está. */
.clima-hero--lluvia    { background: linear-gradient(160deg, #3d4f56 0%, #26383f 100%); }
.clima-hero--llovizna  { background: linear-gradient(160deg, #46585c 0%, #2c3f45 100%); }
.clima-hero--tormenta  { background: linear-gradient(160deg, #2b3a40 0%, #16232a 100%); }
.clima-hero--nube      { background: linear-gradient(160deg, #4a5a4d 0%, #303f35 100%); }
.clima-hero--niebla    { background: linear-gradient(160deg, #5c6560 0%, #3d453f 100%); }
.clima-hero--nieve     { background: linear-gradient(160deg, #6d7f83 0%, #445357 100%); }
.clima-hero--sol       { background: linear-gradient(160deg, #4a6d63 0%, #2c4a3f 100%); }
.clima-hero--nube-sol  { background: linear-gradient(160deg, #506b5e 0%, #32473c 100%); }

.clima-hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-dorado);
    display: block;
    margin-bottom: 0.75rem;
}

.clima-hero__temp {
    font-family: var(--font-display);
    font-size: clamp(4rem, 15vw, 7rem);
    font-weight: 500;
    line-height: 0.95;
}

.clima-hero__cond {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--color-dorado-claro);
    margin-top: 0.35rem;
}

.clima-hero__sens {
    font-size: 0.92rem;
    opacity: 0.75;
    margin-top: 0.3rem;
}

.clima-hero__viento {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.clima-hero__flecha {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    transition: transform 0.8s var(--ease);
}

.clima-hero__viento-nombre {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    font-weight: 600;
}

.clima-hero__viento-card {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.7;
    margin-left: 0.3rem;
}

.clima-hero__viento-kmh {
    font-size: 0.95rem;
    opacity: 0.85;
}

.clima-hero__viento-origen {
    width: 100%;
    font-size: 0.88rem;
    opacity: 0.7;
    font-style: italic;
}

/* ===== AVISO ===== */
.clima-aviso {
    width: var(--container);
    margin: -1px auto 0;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    border-left: 4px solid;
    background: var(--color-crema);
    border-radius: 0 4px 4px 0;
}

.clima-aviso__nivel {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.clima-aviso__titulo {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    display: block;
}

.clima-aviso__texto {
    font-size: 0.92rem;
    color: var(--color-piedra);
    opacity: 0.85;
}

/* ===== SECCIÓN GENÉRICA ===== */
.clima-seccion {
    width: var(--container);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.clima-seccion__titulo {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 600;
    color: var(--color-bosque-profundo);
}

.clima-seccion__bajada {
    font-size: 0.95rem;
    color: var(--color-niebla);
    margin-top: 0.4rem;
    max-width: 62ch;
}

/* ===== SECTORES DEL LAGO ===== */
/* El contenedor dejó de ser una grilla de tarjetas: ahora aloja el panel
   completo del lago, que maneja su propio layout adentro. Si se deja en
   grid, el panel queda comprimido en una columna de 230 px. */
.clima-sectores {
    display: block;
    margin-top: 0;
}

.clima-sector {
    background: var(--color-blanco);
    border: 1px solid rgba(90, 68, 35, 0.12);
    border-radius: 6px;
    padding: 1.15rem 1.25rem;
    border-top: 3px solid;
}

.clima-sector__nombre {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-bosque-profundo);
}

.clima-sector__estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.clima-sector__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.clima-sector__frase {
    font-size: 0.88rem;
    color: var(--color-piedra);
    opacity: 0.8;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.clima-sector__nota {
    font-size: 0.8rem;
    color: var(--color-sepia);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(90, 68, 35, 0.18);
    font-style: italic;
}

.clima-sector--expuesto {
    box-shadow: 0 2px 14px rgba(90, 68, 35, 0.1);
}

.clima-consejo {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-crema);
    border-radius: 6px;
    font-size: 0.98rem;
    color: var(--color-sepia-profundo);
}

.clima-consejo strong {
    font-weight: 600;
}

/* ===== NOTA METODOLÓGICA ===== */
.clima-nota {
    margin-top: 1.25rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--color-niebla);
    max-width: 74ch;
    border-left: 2px solid var(--color-dorado-claro);
    padding-left: 1rem;
}

/* ===== EL PARTE DEL LAGO ===== */
.clima-parte__marco {
    background: var(--color-bosque-profundo);
    color: var(--color-crema);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.35rem;
}

.clima-parte__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-dorado);
}

.clima-parte__texto {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0.85rem 0 1.15rem;
    opacity: 0.95;
}

.clima-parte__acciones {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.clima-parte__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-dorado);
    color: var(--color-sepia-profundo);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.7rem 1.4rem;
    border-radius: 100px;
    transition: background 0.3s var(--ease);
}

.clima-parte__btn:hover {
    background: var(--color-dorado-claro);
}

.clima-parte__copiar {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-crema);
    border: 1px solid rgba(245, 236, 216, 0.4);
    border-radius: 100px;
    padding: 0.65rem 1.25rem;
    background: transparent;
    transition: border-color 0.3s var(--ease);
}

.clima-parte__copiar:hover {
    border-color: var(--color-dorado-claro);
}

/* ===== VIDRIO ESMERILADO =====
   La cuenca queda fija de fondo en toda la página, muy apagada, y las
   tarjetas pasan a vidrio traslucido encima. Es la transparencia de la
   card del index llevada al resto. El velo pseudo-elemento garantiza
   contraste: la foto casi no se ve, se SIENTE. */
.clima-page {
    position: relative;
}

.clima-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to bottom, rgba(247, 244, 238, 0.90), rgba(247, 244, 238, 0.94)),
        url('/img/cuenca.webp');
    background-size: cover;
    background-position: center;
}

.clima-tarjeta,
.clima-dia,
.clima-sector,
.clima-sol {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.clima-consejo {
    background: rgba(250, 240, 214, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== HERO VIVO (index) ===== */
.hero__escena {
    /* Hereda .escena (position absolute inset 0). Vive entre hero__bg y
       hero__overlay: cuando el dato llega, tapa la foto de respaldo. */
    z-index: 1;
}

.hero--viva .hero__bg {
    /* La foto de respaldo se apaga cuando la escena está viva, para no
       traslucirse en los bordes de la deriva de cámara. */
    opacity: 0;
    transition: opacity 1s var(--ease);
}

.hero__overlay,
.hero__content {
    position: relative;
    z-index: 2;
}

/* ===== CARRUSEL DEL HERO =====
   Fotos reales de la cuenca con fundido cruzado lento. Van sobre
   hero.jpg (que queda de respaldo) y bajo el overlay del texto.
   El zoom lentísimo evita la sensación de diapositiva pegada. */
.hero-carrusel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.hero-carrusel__foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.6s ease;
    will-change: opacity;
}

.hero-carrusel__foto.is-activa {
    opacity: 1;
    animation: heroZoom 22s ease-out forwards;
}

@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* El relato: una línea por foto, abajo a la izquierda para no pelear
   con el título centrado. */
.hero-carrusel__texto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4.2rem;
    z-index: 3;
    width: min(var(--container), 92vw);
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-style: italic;
    color: var(--color-crema);
    text-shadow: 0 2px 16px rgba(6, 15, 14, 0.9);
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.hero-carrusel__texto.is-visible {
    opacity: 0.92;
}

.hero-carrusel__dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.4rem;
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

.hero-carrusel__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(250, 240, 214, 0.38);
    transition: all 0.3s var(--ease);
}

.hero-carrusel__dot[aria-pressed="true"] {
    background: var(--color-dorado);
    transform: scale(1.3);
}

/* El hero con fotos necesita más alto que el compacto: las imágenes
   merecen aire, y ahora el relato y los puntitos viven abajo. */
.hero--compacto {
    min-height: max(min(62vh, 100vh - 220px), 420px);
    padding-bottom: 3rem;
}

@media (prefers-reduced-motion: reduce) {
    .hero-carrusel__foto.is-activa { animation: none; }
}

@media (max-width: 640px) {
    .hero-carrusel__texto {
        bottom: 3.6rem;
        font-size: 0.95rem;
    }
    .hero-carrusel__dots { bottom: 1.6rem; }
}

/* ===== PANEL DEL LAGO (réplica de la pantalla de la app) =====
   Panel oscuro de vidrio sobre la cuenca, con el estado destacado, el
   consejo de navegación y las riberas en barras compactas. Reemplaza a
   las tarjetas blancas sueltas: así la web y la app cuentan lo mismo de
   la misma forma. */
.lago-panel {
    position: relative;
    margin-top: 1.5rem;
    border-radius: 18px;
    padding: clamp(1.1rem, 3vw, 1.75rem);
    color: var(--color-crema);
    background:
        linear-gradient(150deg, rgba(8, 20, 18, 0.88), rgba(13, 35, 34, 0.80)),
        url('/img/cuenca.webp') center/cover;
    border: 1px solid rgba(250, 240, 214, 0.12);
    box-shadow: 0 14px 40px rgba(6, 15, 14, 0.24);
    overflow: hidden;
}

.lago-panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lago-panel__titulo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    font-weight: 600;
}

.lago-panel__titulo svg { width: 21px; height: 21px; flex-shrink: 0; }

.lago-panel__viento {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    opacity: 0.8;
    white-space: nowrap;
}

.lago-panel__viento svg { width: 17px; height: 17px; }

/* Estado destacado: nombre grande a la izquierda, cifra a la derecha */
.lago-estado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: rgba(250, 240, 214, 0.07);
    border: 1px solid;
}

.lago-estado__label {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.1;
}

.lago-estado__frase {
    display: block;
    font-size: 0.88rem;
    opacity: 0.78;
    margin-top: 0.2rem;
}

.lago-estado__cifra {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-shrink: 0;
}

.lago-estado__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 600;
    line-height: 1;
}

.lago-estado__unidad { font-size: 1rem; opacity: 0.85; }

.lago-estado__pie {
    font-size: 0.68rem;
    opacity: 0.6;
    margin-left: 0.2rem;
}

.lago-consejo {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.lago-consejo svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    opacity: 0.8;
}

.lago-rafagas {
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: rgba(250, 240, 214, 0.07);
    font-size: 0.88rem;
    opacity: 0.9;
}

.lago-rafagas strong { color: var(--color-dorado-claro); font-weight: 600; }

.lago-panel__subtitulo {
    display: block;
    margin: 1.4rem 0 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-dorado);
}

.lago-riberas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.7rem;
}

.lago-ribera {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(250, 240, 214, 0.07);
    border: 1px solid rgba(250, 240, 214, 0.08);
    transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.lago-ribera.is-destacada {
    background: rgba(250, 240, 214, 0.14);
    box-shadow: 0 0 0 2px var(--color-dorado);
}

.lago-ribera__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.lago-ribera__nombre {
    font-size: 0.98rem;
    font-weight: 600;
}

.lago-ribera__m {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
}

.lago-ribera__barra {
    height: 4px;
    border-radius: 99px;
    background: rgba(250, 240, 214, 0.13);
    margin: 0.55rem 0 0.45rem;
    overflow: hidden;
}

.lago-ribera__barra span {
    display: block;
    height: 100%;
    border-radius: 99px;
    transition: width 0.8s var(--ease);
}

.lago-ribera__estado {
    display: block;
    font-size: 0.78rem;
    opacity: 0.7;
}

.lago-ribera__nota {
    display: block;
    font-size: 0.74rem;
    opacity: 0.55;
    font-style: italic;
    margin-top: 0.35rem;
}

.lago-panel__nota {
    margin-top: 1.3rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(250, 240, 214, 0.10);
    font-size: 0.76rem;
    line-height: 1.6;
    opacity: 0.62;
}

/* ===== EL MAPA VIVO DEL LAGO =====
   Contorno real del lago con cada ribera pintada según su estado.
   Es la pieza que ninguna otra plataforma tiene y la que se entiende sin
   leer una palabra. */
.clima-mapa {
    margin-top: 1.75rem;
    background: linear-gradient(160deg, var(--color-crema), var(--color-papel));
    border: 1px solid rgba(21, 59, 56, 0.10);
    border-radius: 16px;
    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.clima-mapa__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Las islas son tierra: van del color del papel, no del agua. */
.clima-mapa__isla {
    fill: var(--color-papel);
    stroke: rgba(21, 59, 56, 0.14);
    stroke-width: 1;
}

.clima-mapa__sector {
    cursor: pointer;
    outline: none;
}

.clima-mapa__punto {
    stroke: var(--color-crema);
    stroke-width: 2.5;
    transition: r 0.25s var(--ease);
}

.clima-mapa__sector:hover .clima-mapa__punto,
.clima-mapa__sector:focus-visible .clima-mapa__punto {
    r: 11;
}

/* Halo que late solo en la ribera más expuesta: el ojo va derecho a
   donde hay que mirar, sin necesidad de leer. */
.clima-mapa__halo {
    opacity: 0.35;
    transform-origin: center;
    animation: mapaLatido 2.6s ease-in-out infinite;
}

@keyframes mapaLatido {
    0%, 100% { opacity: 0.30; transform: scale(1); }
    50%      { opacity: 0.05; transform: scale(1.9); }
}

.clima-mapa__etiqueta {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    fill: var(--color-bosque-profundo);
    paint-order: stroke;
    stroke: var(--color-papel);
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
}

.clima-mapa__viento {
    animation: mapaViento 3.4s ease-in-out infinite;
    transform-box: fill-box;
}

@keyframes mapaViento {
    0%, 100% { opacity: 0.30; }
    50%      { opacity: 0.62; }
}

.clima-mapa__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(21, 59, 56, 0.10);
}

.clima-mapa__leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-niebla);
}

.clima-mapa__leyenda-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Tarjeta resaltada al tocar su ribera en el mapa */
.clima-sector.is-destacada {
    box-shadow: 0 0 0 2px var(--color-dorado), 0 8px 26px rgba(6, 15, 14, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .clima-mapa__halo,
    .clima-mapa__viento { animation: none !important; }
}

@media (max-width: 640px) {
    .clima-mapa__etiqueta { font-size: 20px; stroke-width: 5px; }
}

/* ===== FRANJA POR HORAS =====
   Scroll horizontal: en teléfono no caben 14 horas, y comprimirlas las
   vuelve ilegibles. Se desliza, como en las apps de clima. */
.clima-horas__scroll {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.clima-hora {
    flex: 0 0 auto;
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.85rem 0.35rem;
    border-radius: 12px;
    scroll-snap-align: start;
}

.clima-hora--ahora {
    background: var(--color-crema);
}

.clima-hora__label {
    font-size: 0.75rem;
    color: var(--color-niebla);
    font-weight: 500;
    white-space: nowrap;
}

.clima-hora--ahora .clima-hora__label {
    color: var(--color-sepia);
    font-weight: 700;
}

.clima-hora__icono {
    width: 26px;
    height: 26px;
    color: var(--color-bosque);
}

.clima-hora__temp {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-bosque-profundo);
}

.clima-hora__prob {
    font-size: 0.72rem;
    color: var(--color-lago-claro);
    font-weight: 600;
}

/* Barra de milímetros: crece desde abajo, como en la app de Samsung que
   sirvió de referencia. Altura fija para que la base quede alineada. */
.clima-hora__barra {
    width: 26px;
    height: 46px;
    display: flex;
    align-items: flex-end;
    border-radius: 4px;
    background: rgba(46, 125, 123, 0.10);
    overflow: hidden;
}

.clima-hora__barra-fill {
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, var(--color-lago), var(--color-bosque-claro));
}

.clima-hora__mm {
    font-size: 0.7rem;
    color: var(--color-niebla);
}

.clima-horas__pie {
    font-size: 0.8rem;
    color: var(--color-niebla);
    margin-top: 0.35rem;
}

/* ===== GRILLA DE DETALLE ===== */
.clima-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.clima-tarjeta {
    background: var(--color-blanco);
    border: 1px solid rgba(21, 59, 56, 0.10);
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
}

.clima-tarjeta__titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-bosque);
}

.clima-tarjeta__titulo svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.clima-tarjeta__frase {
    font-size: 0.95rem;
    color: var(--color-piedra);
    margin-top: 0.55rem;
    line-height: 1.45;
}

.clima-tarjeta__valor {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 2.5rem);
    font-weight: 600;
    color: var(--color-bosque-profundo);
    margin-top: auto;
    padding-top: 0.9rem;
    line-height: 1;
}

.clima-tarjeta__unidad {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-niebla);
    margin-left: 0.15rem;
}

.clima-tarjeta__barra {
    position: relative;
    height: 7px;
    border-radius: 99px;
    margin-top: 0.85rem;
    background: rgba(46, 125, 123, 0.16);
}

.clima-tarjeta__punto {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-blanco);
    border: 2.5px solid var(--color-bosque-profundo);
    transform: translate(-50%, -50%);
}

.clima-tarjeta__pie {
    font-size: 0.8rem;
    color: var(--color-niebla);
    margin-top: 0.7rem;
}

/* ===== ROSA DE LOS VIENTOS ===== */
.clima-rosa {
    position: relative;
    width: 100%;
    max-width: 168px;
    margin: 0.9rem auto 0;
    aspect-ratio: 1;
}

.clima-rosa svg {
    width: 100%;
    height: 100%;
}

.clima-rosa__aro {
    fill: none;
    stroke: rgba(46, 125, 123, 0.20);
    stroke-width: 7;
}

.clima-rosa__card {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    fill: var(--color-niebla);
}

.clima-rosa__flecha {
    fill: var(--color-dorado);
}

.clima-rosa__centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.clima-rosa__kmh {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-bosque-profundo);
    line-height: 1;
}

.clima-rosa__unidad {
    font-size: 0.8rem;
    color: var(--color-niebla);
}

.clima-tarjeta--viento .clima-tarjeta__valor {
    display: none;
}

/* ===== ARCO DEL SOL Y LA LUNA =====
   Mismo tratamiento que el panel del lago: verde profundo sobre la
   cuenca. Los dos paneles del territorio se leen como una sola familia,
   igual que en la app. */
.clima-sol {
    background:
        linear-gradient(150deg, rgba(8, 20, 18, 0.88), rgba(13, 35, 34, 0.80)),
        url('/img/cuenca.webp') center/cover;
    border: 1px solid rgba(250, 240, 214, 0.12);
    border-radius: 18px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    margin-top: 1rem;
    color: var(--color-crema);
    box-shadow: 0 14px 40px rgba(6, 15, 14, 0.24);
}

.clima-sol__grafico svg {
    width: 100%;
    height: auto;
    display: block;
}

.clima-sol__arco {
    fill: none;
    stroke: var(--color-dorado);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.clima-sol__horizonte {
    stroke: rgba(250, 240, 214, 0.28);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.clima-sol__punto {
    fill: var(--color-dorado);
    stroke: rgba(8, 20, 18, 0.5);
    stroke-width: 3;
}

.clima-sol__horas {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
}

.clima-sol__horas > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.clima-sol__horas > div:last-child {
    text-align: right;
}

.clima-sol__label {
    font-size: 0.78rem;
    color: var(--color-crema);
    opacity: 0.7;
}

.clima-sol__hora {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-crema);
}

/* ===== LA LUNA EN SU ARCO =====
   Mismo dibujo que el sol pero con su propio recorrido: la Luna sale y
   se pone a horas distintas cada día. La parte oscura NO se pinta, se
   enmascara, así deja ver la cuenca del fondo. */
.clima-luna {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(250, 240, 214, 0.14);
}

.clima-luna__grafico svg {
    width: 100%;
    height: auto;
    display: block;
}

/* El arco de la luna va más tenue que el del sol: es el astro secundario
   de la lectura, y así no compiten. */
.clima-luna__arco {
    fill: none;
    stroke: rgba(242, 228, 188, 0.35);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 6;
}

/* Contorno del disco completo: sin esto, en luna nueva no se ve nada. */
.clima-luna__borde {
    fill: rgba(250, 240, 214, 0.07);
    stroke: rgba(250, 240, 214, 0.28);
    stroke-width: 1;
}

.clima-luna__cara {
    fill: #F2E4BC;
}

.clima-luna__horas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.6rem;
}

.clima-luna__horas > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.clima-luna__horas > div:last-child { text-align: right; }

.clima-luna__fase {
    text-align: center;
    flex: 1;
}

.clima-luna__label {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-crema);
}

.clima-luna__pie {
    font-size: 0.78rem;
    color: var(--color-crema);
    opacity: 0.65;
}

.clima-luna__nota {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-crema);
    opacity: 0.6;
}

@media (max-width: 560px) {
    .clima-luna__horas { flex-wrap: wrap; }
    .clima-luna__fase { order: -1; flex-basis: 100%; text-align: left; }
}

/* ===== DÍAS ===== */
.clima-dias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin-top: 1.75rem;
}

.clima-dia {
    background: var(--color-blanco);
    border: 1px solid rgba(90, 68, 35, 0.12);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
}

.clima-dia__nombre {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-sepia);
    font-weight: 600;
}

.clima-dia__cond {
    font-size: 0.82rem;
    color: var(--color-niebla);
    margin-top: 0.5rem;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clima-dia__temps {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-bosque-profundo);
    margin-top: 0.35rem;
}

.clima-dia__min {
    color: var(--color-niebla);
    font-size: 1.05rem;
    margin-left: 0.3rem;
}

.clima-dia__lluvia {
    font-size: 0.8rem;
    color: var(--color-lago);
    margin-top: 0.35rem;
}

/* ===== SELECTOR DE LOCALIDAD, AGRUPADO POR LAGO ===== */
.clima-loc {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.4rem;
    flex-wrap: wrap;
}

.clima-loc__grupo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.clima-loc__lago {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-dorado);
    white-space: nowrap;
}

.clima-loc__btn {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    border: 1px solid rgba(245, 236, 216, 0.35);
    color: var(--color-crema);
    background: transparent;
    transition: all 0.3s var(--ease);
}

.clima-loc__btn:hover {
    border-color: var(--color-dorado-claro);
}

.clima-loc__btn[aria-pressed="true"] {
    background: var(--color-dorado);
    border-color: var(--color-dorado);
    color: var(--color-sepia-profundo);
}

/* ===== ESTADOS DE CARGA / ERROR ===== */
.clima-cargando,
.clima-error {
    width: var(--container);
    margin: 0 auto;
    padding: 3rem 0;
    text-align: center;
    color: var(--color-niebla);
}

.clima-error__btn {
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin-top: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 100px;
    background: var(--color-bosque);
    color: var(--color-crema);
}

.clima-actualizado {
    width: var(--container);
    margin: 2.5rem auto 0;
    font-size: 0.8rem;
    color: var(--color-niebla);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.clima-actualizado__btn {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-sepia);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

/* ===== CTA FINAL DE LA PÁGINA ===== */
.clima-cta {
    width: var(--container);
    margin: clamp(3rem, 7vw, 4.5rem) auto clamp(3rem, 7vw, 5rem);
    background: var(--color-bosque-profundo);
    color: var(--color-crema);
    border-radius: 8px;
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.clima-cta__titulo {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 600;
}

.clima-cta__texto {
    font-size: 0.98rem;
    opacity: 0.85;
    margin: 0.75rem auto 1.75rem;
    max-width: 56ch;
}

@media (max-width: 640px) {
    .clima-tira {
        margin-top: 1.5rem;
    }
    .clima-aviso {
        flex-direction: column;
        gap: 0.4rem;
    }
}

/* ===== FONDO DE LA LANDING (index) =====
   La landing vivía sobre --color-papel liso: el hero, el CTA y el pie
   tenían foto y todo el medio quedaba flotando en un plano vacío.

   Mismo patrón que .clima-page::before: la cuenca fija en el viewport
   bajo un velo crema. Se usa un ELEMENTO fijo y no background-attachment,
   porque en iOS Safari el attachment fixed se rompe.

   cuenca.webp ya se descarga en el index (la escena de la card), así que
   esto no agrega una sola petición.

   Va con clase en el <body> y no global: /clima ya tiene su propio fondo
   fijo y se duplicarían. */
.pagina-landing::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to bottom,
            rgba(247, 244, 238, 0.94) 0%,
            rgba(247, 244, 238, 0.89) 38%,
            rgba(243, 239, 230, 0.93) 100%),
        url('/img/cuenca.webp');
    background-size: cover;
    background-position: center;
}

/* Halos de teal y dorado más viñeta: dan profundidad donde la foto casi
   no se ve. Son los colores de marca, no tonos inventados. */
.pagina-landing::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 10% 16%, rgba(46, 125, 123, 0.11), transparent 70%),
        radial-gradient(52% 38% at 92% 58%, rgba(217, 154, 43, 0.10), transparent 72%),
        radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(21, 59, 56, 0.09) 100%);
}

/* El texto de cada sección pasa a panel de papel sobre el fondo. Sin
   backdrop-filter a propósito: el velo ya deja la foto al 10%, el blur no
   se notaría y cuesta GPU en teléfono rural. */
.pagina-landing .section__content {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(21, 59, 56, 0.07);
    border-radius: 16px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 8px 28px rgba(6, 15, 14, 0.06);
}

/* La foto de cada sección se alinea con el radio de los demás paneles y
   la sombra se profundiza: ahora hay fondo contra el cual proyectarse. */
.pagina-landing .section__media {
    border-radius: 14px;
    box-shadow: 0 26px 64px rgba(6, 15, 14, 0.18);
}