/* ============================================================
   PATAGONIA LACUSTRE · HERO DEL CLIMA (index)
   Etapa 1 del rediseño v2 — 13-ago-2026

   QUÉ HACE
   Convierte el dato del clima en la PORTADA de la landing. Antes el
   index abría con un carrusel de fotos a pantalla completa y el clima
   vivía en una card más abajo: quien llegaba porque alguien le dijo
   «mira cómo está el lago» tenía que pasar por una postal primero.
   Ahora el clima es lo primero, enmarcado por la marca, y las fotos
   bajan a una banda de territorio.

   POR QUÉ ARCHIVO NUEVO Y NO clima.v3.css
   firebase.json cachea los CSS como immutable por un año. Un archivo
   nuevo resuelve la caché sin renombrar nada, y además mantiene la
   etapa 1 del rediseño aislada: si hay que revertir, se saca un <link>.

   ORDEN DE CARGA
   Va DESPUÉS de clima.v2.css: reutiliza y sobrescribe sus reglas
   .clima-tira__* dentro del hero. Cambiar el orden lo rompe.

   LA ESCENA VIVA
   clima-tira.v2.js inyecta .escena dentro de #clima-tira-card. Acá la
   card se pone en position:static a propósito: así .escena (que es
   absolute inset:0) se posiciona contra .hero-clima y la cuenca teñida
   por el clima real cubre TODO el hero, no una tarjeta.
   ============================================================ */

/* ===== EL HERO ===== */
.hero-clima {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    /* svh y no vh: en teléfono la barra del navegador no debe cortar el dato */
    min-height: 100svh;
    padding: clamp(6.5rem, 14vw, 9rem) 0 clamp(3rem, 7vw, 5rem);
    color: var(--color-crema);
    /* Respaldo: si el clima no carga, el hero igual se ve como hero */
    background: linear-gradient(180deg, #081513 0%, var(--color-sepia-profundo) 52%, var(--color-bosque-profundo) 100%);
}

/* La cuenca teñida cubre el hero entero. El margen negativo le da
   recorrido al parallax sin que asomen bordes vacíos al desplazarse. */
.hero-clima .escena {
    inset: -18% 0 -12%;
}

/* ===== EL TÍTULO DE LA PÁGINA =====
   Reemplaza al bloque de marca duplicado. La marca vive en el header;
   acá va la proposición, en cuerpo chico, para que el número mande.
   Deliberadamente discreto: si compite con el dato, no sirve. */
.hero-clima__titulo {
    position: relative;
    z-index: 3;
    width: var(--container);
    margin: 0 auto clamp(1.2rem, 3vw, 1.8rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    opacity: 0.72;
    font-feature-settings: "ss01", "ss02";
}

/* ===== EL RESPLANDOR =====
   El «neón» de las referencias, en cálido y con los colores de marca.
   Solo funciona sobre fondo oscuro — por eso llega recién ahora, con el
   hero en verde profundo.
   La animación va en `scale` y no en `transform` a propósito: el
   parallax usa transform y se pisarían. */
.hero-clima__halo {
    position: absolute;
    left: 4%;
    top: 26%;
    width: min(58vw, 640px);
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(217, 154, 43, 0.30) 0%,
        rgba(217, 154, 43, 0.11) 42%,
        rgba(217, 154, 43, 0) 70%);
    filter: blur(8px);
    animation: haloRespira 6.5s ease-in-out infinite;
}

@keyframes haloRespira {
    0%, 100% { scale: 1;    opacity: 0.82; }
    50%      { scale: 1.14; opacity: 1; }
}

/* Segundo halo, teal y al otro lado: da volumen sin ensuciar. */
.hero-clima__halo--teal {
    left: auto;
    right: 2%;
    top: 52%;
    width: min(46vw, 520px);
    background: radial-gradient(circle,
        rgba(46, 125, 123, 0.34) 0%,
        rgba(46, 125, 123, 0.12) 45%,
        rgba(46, 125, 123, 0) 72%);
    animation-duration: 8.5s;
    animation-delay: -3s;
}

/* ===== EL DATO =====
   Reset de la card: acá no es tarjeta, es la portada.
   position:static en la card Y en el contenedor es funcional, no
   cosmético: .escena es absolute inset:0 y se ancla al ancestro
   posicionado más cercano. Si este div fuera relative, la cuenca teñida
   cubriría solo el bloque del dato en vez del hero entero. */
.hero-clima__dato {
    position: static;
}

.hero-clima .clima-tira__card {
    position: static;
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    overflow: visible;
    color: inherit;
}

.hero-clima .clima-tira__card:hover {
    box-shadow: none;
}

.hero-clima .clima-tira__inner {
    position: relative;
    z-index: 2;
    width: var(--container);
    margin: 0 auto;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* clima.v2.css pone el dato en dos columnas sobre 860px con grid-area.
   Acá volvemos a columna, y hay que neutralizar los align-self/justify-self
   de esas reglas: en un flex column, align-self trabaja sobre el eje
   horizontal y mandaba el estado del lago al centro y el CTA a la derecha. */
.hero-clima .clima-tira__lago,
.hero-clima .clima-tira__cta,
.hero-clima .clima-tira__pie,
.hero-clima .clima-tira__meta,
.hero-clima .clima-tira__dato {
    align-self: flex-start;
    justify-self: auto;
}

/* El nombre del lugar pasa a ser antetítulo: el número es la estrella. */
.hero-clima .clima-tira__lugar {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-dorado);
    margin-bottom: 0.4rem;
}

.hero-clima .clima-tira__lago-tag {
    color: var(--color-crema);
    opacity: 0.55;
    letter-spacing: 0.16em;
}

.hero-clima .clima-tira__dato {
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    margin-top: 0;
}

.hero-clima .clima-tira__temp {
    font-size: clamp(5rem, 15vw, 10.5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    text-shadow: 0 6px 40px rgba(6, 15, 14, 0.5);
}

.hero-clima .clima-tira__cond {
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    color: var(--color-dorado-claro);
    opacity: 1;
}

.hero-clima .clima-tira__meta {
    font-size: clamp(0.9rem, 1.5vw, 1.08rem);
    opacity: 0.8;
    margin-top: 0.5rem;
}

.hero-clima .clima-tira__lago {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    margin-top: 1.1rem;
}

.hero-clima .clima-tira__lago-punto {
    width: 12px;
    height: 12px;
}

/* El enlace a /clima se vuelve botón: es la acción del dato. */
.hero-clima .clima-tira__cta {
    margin-top: 1.6rem;
    padding: 0.85rem 1.7rem;
    border-radius: 99px;
    border: 1px solid rgba(245, 218, 172, 0.45);
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.hero-clima .clima-tira__card:hover .clima-tira__cta {
    border-color: var(--color-dorado);
    background: rgba(217, 154, 43, 0.14);
    color: var(--color-dorado-claro);
}

.hero-clima .clima-tira__pie {
    margin-top: 1.5rem;
    border-top: 0;
    padding-top: 0;
    opacity: 0.55;
}

/* ===== ACCIONES DE MARCA =====
   El botón de la app vive FUERA del <a> de la card: un enlace dentro de
   otro enlace es HTML inválido y rompe el teclado. */
.hero-clima__acciones {
    position: relative;
    z-index: 3;
    width: var(--container);
    margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.hero-clima__acciones .btn--hero {
    box-shadow: 0 12px 38px rgba(6, 15, 14, 0.45);
}

/* Puntitos de localidad: los de clima.v2.css son oscuros y sobre este
   fondo desaparecen. Necesitan z-index propio porque el contenedor del
   dato quedó estático para que la escena cubra el hero. */
.hero-clima .clima-tira__dots {
    position: relative;
    z-index: 3;
    width: var(--container);
    margin: clamp(1.4rem, 3vw, 2rem) auto 0;
    justify-content: flex-start;
    padding-top: 0;
}

.hero-clima .clima-tira__dot {
    background: rgba(250, 240, 214, 0.30);
}

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

/* ===== BANDA DE FOTOS =====
   El carrusel del territorio, que antes era el hero. Conserva la clase
   .hero para no romper el parallax de main.js ni el pausado al pasar el
   mouse de hero-carrusel.v1.js, pero deja de ocupar la pantalla entera. */
.banda-fotos {
    min-height: clamp(320px, 52vh, 560px);
    align-items: flex-end;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* El velo de .hero__overlay estaba calibrado para una sección de 100vh:
   el tramo oscuro queda arriba y abajo, y el centro —donde ahora vive el
   texto— pasó a ser transparente. Sobre las fotos claras (otoño con
   nieve, lago espejo) el texto desaparecía. Se reemplaza por un velo
   propio, más parejo y con el verde de la app. */
.banda-fotos .hero__overlay {
    background: linear-gradient(
        to bottom,
        rgba(6, 15, 14, 0.55) 0%,
        rgba(6, 15, 14, 0.42) 45%,
        rgba(13, 35, 34, 0.72) 100%
    );
}

/* Y sombra bajo el texto: así se puede mantener el velo suave y la foto
   sigue viéndose, en vez de apagarla entera para que se lea una línea. */
.banda-fotos .hero__tagline,
.banda-fotos .hero__sub {
    text-shadow: 0 2px 16px rgba(6, 15, 14, 0.9), 0 1px 4px rgba(6, 15, 14, 0.7);
}

/* El contenido se centra en la banda y el pie de foto va anclado abajo:
   sin este respiro se montan uno sobre otro cuando la banda es baja. */
.banda-fotos .hero__content {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* El indicador de scroll pertenecía a la primera pantalla. Acá sobra. */
.banda-fotos .hero__scroll-hint {
    display: none;
}

/* ===== HEADER =====
   Arreglo del café sepia: rgba(90,68,35,.95) está hardcodeado en
   styles.css sin variable, así que el retema de la app nunca lo alcanzó.
   Se veía marrón peleando con toda la paleta nueva. */
.header.scrolled {
    background: rgba(13, 35, 34, 0.92);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
    .hero-clima {
        padding-top: clamp(5.5rem, 20vw, 7rem);
    }
    .hero-clima__halo {
        top: 30%;
        width: 90vw;
    }
    .hero-clima__halo--teal {
        display: none;
    }
    .hero-clima .clima-tira__dato {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-clima__halo { animation: none !important; }
}