/* ============================================================
   PATAGONIA LACUSTRE · home.v7.css
   v7 (14-ago-2026) — Contraste del botón "Tengo un emprendimiento →" en el
   CTA fusionado (#bloque-kimche .cta-kimche): .btn-linea (secciones.v1.css)
   trae texto/borde color crema, pensado para fondos oscuros como
   riberas-pie — sobre el crema de este CTA quedaba invisible. Override
   scoped SOLO acá, sin tocar la clase base (que sigue sirviendo bien donde
   ya estaba). Solo tokens existentes.
   v6 (14-ago-2026) — Poda paso 1 del rediseño (solo contenido, sin diseño
   nuevo): la banda de fotos baja de 82svh a 55svh (las fotos ya no cargan
   tanto peso visual sin las secciones de texto que las seguían) y se suma
   el margen del CTA fusionado dentro de #bloque-kimche (antes era su
   propia sección .bloque, con su propio padding-top; ahora es un div
   interior y necesitaba el suyo). Mismo criterio de siempre: contenido
   cambió → nombre nuevo, para no dejar a nadie con el CSS viejo cacheado.
   v5 (14-ago-2026) — Renombrado desde home.v4.css: ese archivo se editó dos
   veces (sección del boletín) sin cambiar de nombre, y al estar servido con
   Cache-Control immutable de un año, los visitantes recurrentes se quedaban
   con el CSS viejo cacheado y no veían los estilos nuevos.
   13-ago-2026 (parte 5) — Tres ajustes del home pedidos por Cristian.
   v3 (mismo día): la banda de fotos recibe altura propia — al ocultar
   el bloque blanco colapsó a 350px y las fotos se veían aplastadas.
   v4 (mismo día): la FOTO ENTERA. Las fotos son 3:2 (2000×1333):
   mostrarlas completas centradas exigiría una banda de ~900px de alto.
   Solución de Cristian («colócala hacia una orilla»): foto completa
   anclada a la IZQUIERDA, y la columna derecha deja de ser hueco —
   ahí van el relato y los puntos, y queda reservada para publicidad.
   v2/v3 se retiran del HTML pero quedan en disco (immutable servido).

     1. El hero del clima baja de 100svh a 86svh: el carrusel ASOMA
        al abrir la página. «El tiempo ocupa toda la pantalla y no se
        ve el carrusel que sigue» — ahora se ve que sigue.
     2. La card de luna se oscurece: degradé casi negro arriba, y
        entra la cordillera nocturna (color propio, más azul-noche
        que la de /luna, con filo de luna tenue).
     3. El carrusel pierde el bloque blanco fijo (título + bajada):
        tapaba las fotos y no cambiaba. El pie por foto se queda —
        ese sí cuenta cada imagen.

   ARCHIVO NUEVO y no edición de hero.v1.css / luna.v1.css: esos ya
   están desplegados con caché immutable de un año. Este se carga
   DESPUÉS de ambos y los sobrescribe donde corresponde.
   ============================================================ */

/* ===== 1 · EL HERO DEJA VER EL CARRUSEL ===== */
.hero-clima {
    min-height: 86svh;
    /* La medición real (13-ago): 144px arriba + 80 abajo de puro
       padding empujaban el hero a 853px — más que el viewport — y el
       min-height solo no bastaba. Se recorta el aire, no el dato. */
    padding: clamp(4.5rem, 9vw, 5.5rem) 0 clamp(1.5rem, 4vw, 2rem);
}
.hero-clima__titulo {
    margin-bottom: clamp(0.9rem, 2vw, 1.25rem);
}
.hero-clima__acciones {
    margin-top: clamp(1rem, 2.4vw, 1.5rem);
}

/* Compresión SOLO desktop: el viewport útil real de Cristian ronda los
   670-745px (escala de Windows) y el hero medía 743 — el carrusel no
   asomaba ni un pixel. Se baja el número de 168 a ~130px (sigue siendo
   el protagonista) y se aprietan los márgenes internos de la card.
   En móvil nada de esto aplica. */
@media (min-width: 900px) {
    .hero-clima .clima-tira__temp { font-size: clamp(104px, 13vw, 132px); }
    .hero-clima .clima-tira__cta  { margin-top: 14px; }
    .hero-clima .clima-tira__pie  { margin-top: 12px; }
    .hero-clima .clima-tira__lago { margin-top: 10px; }
    .hero-clima .clima-tira__dots { margin-top: 14px; }
}

/* ===== 2 · CARD DE LUNA NOCTURNA ===== */
/* Gana a .bloque--oscuro (secciones.v1.css) por especificidad del id.
   Mismo lenguaje que el hero de /luna: casi negro arriba, el verde de
   la marca asomando abajo. */
#bloque-luna {
    background: linear-gradient(180deg, #040b08 0%, #071410 40%, #0a1c17 100%);
    /* aire para que la cordillera no pise el calendario */
    padding-bottom: clamp(120px, 14vw, 170px);
}

/* Cordillera de la card del home. Color PROPIO, más azul-noche que la
   de /luna, para que las dos vistas rimen sin ser calco. Estilizada
   (lenguaje del logo): NO es perfil real de ningún cerro. */
.cordillera-home {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 0;
    pointer-events: none;
}
.cordillera-home svg {
    display: block;
    width: 100%;
    height: clamp(70px, 11vw, 140px);
}
.cordillera-home .ch-tras   { fill: #0d2431; }   /* azul-noche */
.cordillera-home .ch-frente { fill: #061318; }
.cordillera-home .ch-filo   { fill: none; stroke: rgba(233, 228, 210, .2); stroke-width: 1.1; }

/* ===== 3 · CARRUSEL SIN BLOQUE BLANCO ===== */
/* El HTML se queda (por si se revierte); acá simplemente no se pinta.
   .hero-carrusel__texto (el pie por foto) NO se toca. */
.banda-fotos .hero__content {
    display: none;
}

/* v3: al ocultar el bloque de texto, la banda perdió el contenido que
   la empujaba y colapsó a su mínimo (350px). Con pantalla ancha eso es
   un recorte 4:1 y las fotos se ven aplastadas. Altura propia: la banda
   ya no depende de ningún texto para verse bien. */
.banda-fotos {
    min-height: clamp(400px, 64svh, 560px);
}

/* ===== 4 · LA FOTO ENTERA (v4, solo desktop) ===== */
/* En móvil (<900px) las fotos siguen a pantalla completa con cover:
   la pantalla vertical calza bien con el 3:2 y el relato abajo. */
@media (min-width: 900px) {
    .banda-fotos {
        /* v4.1: «la foto quedó muy pequeña» — con contain, la foto crece
           con la altura de la banda (ancho = 1,5 × alto).
           v6 (14-ago, poda paso 1): de 82svh a 55svh — con las secciones
           de texto que la seguían eliminadas, ocupar casi toda la
           pantalla la dejaba pesada sin nada que la equilibrara debajo.
           El clamp existente solo cambia el término del medio. */
        min-height: clamp(520px, 55svh, 720px);
        /* el costado derecho es fondo, no foto: casi negro con matiz
           verde para que los bordes oscuros de las fotos se fundan */
        background: #04100c;
    }
    /* La foto completa, sin recorte, pegada a la orilla izquierda */
    .banda-fotos .hero-carrusel__foto {
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
    }
    /* El respaldo hero.jpg y el velo cubrían todo con cover: en este
       layout mancharían la columna derecha. Fuera. */
    .banda-fotos .hero__bg,
    .banda-fotos .hero__overlay { display: none; }

    /* Relato en la columna derecha (el espacio que libera el 3:2).
       Reservado también para publicidad futura: si entra un auspicio,
       vive acá y el relato sube. */
    .banda-fotos .hero-carrusel__texto {
        position: absolute;
        left: auto;
        right: clamp(20px, 4vw, 64px);
        bottom: 52%;
        transform: none;
        width: clamp(220px, 24vw, 340px);
        text-align: left;
        font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    }
    .banda-fotos .hero-carrusel__dots {
        position: absolute;
        left: auto;
        right: clamp(20px, 4vw, 64px);
        bottom: auto;
        top: 52%;
        transform: none;
        justify-content: flex-start;
        width: clamp(220px, 24vw, 340px);
    }
    /* La pista «Descubre» estorba en el nuevo layout de columna */
    .banda-fotos .hero__scroll-hint { display: none; }
}

/* ===== 5 · CHAT DE KIMCHE (v4.1) ===== */
/* De globo único a conversación. Los globos de Kimche reusan
   .kimche-globo de secciones.v1.css; acá solo se suman los del usuario
   y la aparición del segundo par (kimche-chat.v1.js pone .vista). */
.kimche-chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.globo-user {
    align-self: flex-end;
    max-width: 78%;
    padding: 12px 18px;
    border-radius: 18px 18px 4px 18px;
    background: #153b32;
    color: #f3efe4;
    font-size: .98rem;
    line-height: 1.45;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
}
.kimche-chat .kimche-globo {
    align-self: flex-start;
    max-width: 88%;
}
/* el segundo par entra cuando la primera respuesta terminó */
.globo-par2 {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
}
.globo-par2.vista {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .globo-par2 { transition: none; }
}

/* ===== 6 · SECCIÓN EMPRENDEDORES (14-ago) ===== */
/* La puerta del lado de la oferta. Reusa .bloque--oscuro; acá solo la
   grilla de tres argumentos y la nota de urgencia honesta. */
.emp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 30px;
}
.emp-card {
    padding: 22px;
    border: 1px solid rgba(243, 239, 228, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
}
.emp-card h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    color: var(--dorado, #c9924d);
}
.emp-card p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
    opacity: .85;
}
.emp-nota {
    margin-top: 14px;
    font-size: .85rem;
    opacity: .65;
}

/* ===== 7 · CAPACIDADES DE KIMCHE (14-ago) ===== */
/* Lo que sabe hacer, de un vistazo. Va sobre el chat: primero la
   promesa concreta, después la demostración conversada. */
.kimche-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.kimche-skills li {
    padding: 7px 14px;
    border: 1px solid rgba(21, 59, 50, .22);
    border-radius: 99px;
    background: rgba(21, 59, 50, .06);
    font-size: .85rem;
    line-height: 1.3;
}

/* ===== 8 · BOLETÍN METEOROLOGÍA LACUSTRE (14-ago) =====
   Formulario de una sola línea (correo + botón) bajo la sección de
   riberas. Centrado como .cta-kimche: es un cierre, no un bloque de
   contenido con imagen al lado. */
.boletin { text-align: center; }
.boletin .bloque__bajada {
    margin-left: auto;
    margin-right: auto;
}

.boletin__form {
    max-width: 480px;
    margin: 1.75rem auto 0;
}

.boletin__fila {
    display: flex;
    gap: .6rem;
}

.boletin__label-oculta {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.boletin__fila input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: .85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-piedra);
    background: var(--color-blanco);
    border: 1.5px solid rgba(21, 59, 50, .18);
    border-radius: 8px;
    transition: border-color .2s var(--ease);
}
.boletin__fila input[type="email"]:focus {
    outline: none;
    border-color: var(--color-bosque);
}
.boletin__fila input[type="email"].err {
    border-color: #c0392b;
}
.boletin__fila input[type="email"]:disabled,
.boletin__fila .btn-solido:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.boletin__fila .btn-solido {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}

.boletin__msg {
    margin: .8rem 0 0;
    font-size: .85rem;
}
.boletin__msg.is-error { color: #c0392b; }

/* Mismo margen superior que .boletin__form (1.75rem): ocupa el espacio que
   dejaba el formulario, no queda pegado a la bajada. El resto (fondo con
   borde, ícono de check) es lo que hace que se lea como confirmación y no
   como una línea más del párrafo — antes solo tenía un tinte casi invisible. */
.boletin__ok {
    max-width: 480px;
    margin: 1.75rem auto 0;
    padding: 1.1rem 1.4rem;
    border-radius: 10px;
    background: rgba(21, 59, 50, .08);
    border: 1px solid rgba(21, 59, 50, .2);
    color: var(--color-bosque-profundo);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}
.boletin__ok::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    margin-right: .5em;
    border-radius: 50%;
    background: var(--color-bosque);
    color: var(--color-blanco);
    font-size: .85em;
    font-weight: 700;
    vertical-align: -.15em;
}
.boletin__ok strong { font-family: var(--font-display); font-size: 1.05em; }

.boletin__legal {
    margin-top: 1.1rem;
    font-size: .8rem;
    color: var(--color-niebla);
}
.boletin__legal a { color: var(--color-bosque); }

@media (max-width: 560px) {
    .boletin__fila {
        flex-direction: column;
    }
}

/* ===== 9 · CTA FUSIONADO DENTRO DE KIMCHE (14-ago, poda paso 1) =====
   Antes era su propia section.bloque (con el padding-top de section a
   section incluido gratis). Ahora es un div dentro de #bloque-kimche, así
   que solo necesita el margen que perdía frente al chat de arriba. */
#bloque-kimche .cta-kimche {
    margin-top: 2.5rem;
}

/* ===== 10 · CONTRASTE DEL BOTÓN DE LÍNEA EN EL CTA (14-ago, v7) =====
   .btn-linea (secciones.v1.css) es texto/borde color crema — pensada para
   .riberas-pie, sobre fondo oscuro. Este CTA es crema, así que quedaba
   crema sobre crema. Verde bosque profundo: mismo tono que ya usa
   .bloque--crema .bloque__titulo para texto sobre ESTE MISMO fondo, así
   que el contraste ya estaba validado en el sitio, no es un color nuevo.
   Se toca solo el botón de línea acá adentro — .riberas-pie sigue igual. */
#bloque-kimche .cta-kimche .btn-linea {
    border-color: var(--color-bosque-profundo);
    color: var(--color-bosque-profundo);
}
/* El texto se queda en bosque-profundo también en hover (medido: bosque
   normal sobre este crema da ~4.28:1, justo bajo el mínimo AA de 4.5:1
   para texto normal). Solo cambian borde y fondo como señal de hover. */
#bloque-kimche .cta-kimche .btn-linea:hover {
    border-color: var(--color-bosque);
    background: rgba(21, 59, 56, .08);
    color: var(--color-bosque-profundo);
}