/* ============================================================
PATAGONIA LACUSTRE · TEMA NOCHE — PROPAGACIÓN DEL REDISEÑO NEÓN
v2 (14-ago-2026)
============================================================
QUÉ HACE
Lleva el home entero al lenguaje que la prueba de fuego validó en
/clima#riberas: superficie casi negra, texto crema, cian fosforescente
como acento, naranjo reservado para el agua brava y los CTA.
DÓNDE SE CARGA
Solo en index.html, como ÚLTIMO del . Gana en cascada a
styles.css, tema-app.v2.css, clima.v2.css, secciones.v1.css y
home.v7.css sin tocar ninguno. /privacidad y /terminos no lo cargan y
siguen en claro a propósito: son páginas de lectura legal, no de
experiencia.
CÓMO SE REVIERTE
Borrar este del index. Nada más.
DECISIONES DE DISEÑO (registradas también en la Bitácora)
- Las variables globales de texto/fondo se redefinen bajo
.pagina-landing, NO en :root: así el tema no se filtra a ninguna
página que no lo pida.
- --color-blanco NO se toca: en styles.css se usa a la vez como fondo
de tarjetas y como color de texto sobre oscuro. Cambiarlo apagaría
textos. Los fondos blancos se sobreescriben caso a caso.
- El CTA de Kimche (.cta-kimche) SIGUE CREMA a propósito: la portada
PNG trae el fondo crema horneado en la imagen. Se convierte en
tarjeta clara redondeada sobre el oscuro — se lee deliberado, no
como resto del tema viejo. Cuando exista la Kimche recortada de
cuerpo entero (pendiente en Bitácora), este bloque pasa a oscuro.
- El "neón" es color saturado sobre casi negro, sin glow ni blur:
mismo criterio que la prueba de fuego.
PAREJA OBLIGADA
/js/riberas-neon.v1.js debe cargarse en el index entre clima.v2.js y
sus consumidores: las riberas del home y la tira del hero pintan con
PL_CLIMA.ESTADOS, y sin ese script quedan en la rampa suave vieja.
============================================================ */
/* ===== PALETA NOCHE ===== */
.pagina-landing {
--noche-fondo: #071615;
--noche-panel: #0A1D1C;
--noche-tarjeta: #0F2725;
--noche-borde: rgba(93, 231, 214, 0.16);
--noche-borde-vivo: rgba(93, 231, 214, 0.42);
--noche-cian: #5DE7D6;
--noche-naranjo: #FF8A3D;
/* Redefinición de las variables históricas SOLO dentro del tema.
Los nombres son los de styles.css; los valores, los de la noche. */
--color-papel: #071615;
--color-piedra: #F2EFE6;
--color-niebla: #8FB3B0;
--color-crema: #F2EFE6;
--color-dorado: #FFC24D;
--color-dorado-claro: #FFD98A;
}
.pagina-landing {
background: var(--noche-fondo);
color: var(--color-piedra);
}
/* ===== FONDO DE LA PÁGINA =====
clima.v2.css pinta la cuenca bajo un velo CREMA en
.pagina-landing::before y halos suaves en ::after. Acá el velo pasa a
noche y los halos a los dos neones, muy tenues: la foto sigue ahí,
apenas insinuada, como se ve la cuenca de noche. */
.pagina-landing::before {
background-image:
linear-gradient(to bottom,
rgba(7, 22, 21, 0.90) 0%,
rgba(7, 22, 21, 0.86) 38%,
rgba(5, 15, 14, 0.93) 100%),
url('/img/cuenca.webp');
background-size: cover;
background-position: center;
}
.pagina-landing::after {
background:
radial-gradient(58% 42% at 10% 16%, rgba(93, 231, 214, 0.07), transparent 70%),
radial-gradient(52% 38% at 92% 58%, rgba(255, 138, 61, 0.06), transparent 72%),
radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(4, 12, 11, 0.35) 100%);
}
/* ===== HEADER =====
De café sepia a verde noche. Transparente arriba (el hero ya es
oscuro), losa al scrollear. */
.pagina-landing .header.scrolled {
background: rgba(7, 22, 21, 0.92);
border-bottom: 1px solid var(--noche-borde);
box-shadow: none;
}
.pagina-landing .header__nav a {
color: var(--color-crema);
}
.pagina-landing .header__nav a:hover {
color: var(--noche-cian);
}
/* ===== BLOQUES =====
Los bloque--oscuro ya calzan con la noche; solo se les alinea el tono
y el borde. Los bloque--crema DEJAN DE SER CREMA: pasan a panel noche
un pelo más claro que el fondo, para conservar el ritmo claro/oscuro
como ritmo oscuro/más-oscuro. */
.pagina-landing .bloque--oscuro {
background: var(--noche-fondo);
border-top: 1px solid var(--noche-borde);
border-bottom: 1px solid var(--noche-borde);
}
.pagina-landing .bloque--crema {
background: var(--noche-panel);
}
.pagina-landing .bloque--crema .bloque__eyebrow {
color: var(--noche-cian);
border-bottom-color: rgba(93, 231, 214, 0.35);
}
.pagina-landing .bloque--crema .bloque__titulo,
.pagina-landing .bloque--crema .bloque__bajada {
color: var(--color-crema);
}
.pagina-landing .bloque__eyebrow {
color: var(--noche-cian);
}
/* ===== TARJETAS DEL SISTEMA (emprendedores, riberas del home) =====
Mismo lenguaje que las láminas del mazo de /clima: tarjeta #0F2725,
borde cian tenue, borde vivo al pasar. */
.pagina-landing .emp-card,
.pagina-landing .ribera {
background: var(--noche-tarjeta);
border: 1px solid var(--noche-borde);
transition: border-color 0.25s ease, transform 0.25s ease;
}
.pagina-landing .emp-card:hover,
.pagina-landing .ribera:hover {
border-color: var(--noche-borde-vivo);
transform: translateY(-2px);
}
.pagina-landing .emp-card h3 {
color: var(--noche-cian);
}
.pagina-landing .emp-card p {
color: var(--color-niebla);
}
/* La ribera más expuesta del home se marca con el naranjo del agua
brava, no con el cian: el color es dato acá también. */
.pagina-landing .ribera.is-expuesta {
border-color: rgba(255, 138, 61, 0.45);
}
/* ===== CHAT DE KIMCHE ===== */
.pagina-landing .kimche-globo {
background: var(--noche-tarjeta);
border: 1px solid var(--noche-borde);
color: var(--color-crema);
}
.pagina-landing .globo-user {
background: rgba(93, 231, 214, 0.10);
border: 1px solid var(--noche-borde);
color: var(--color-crema);
}
.pagina-landing .kimche-skills li {
background: var(--noche-tarjeta);
border: 1px solid var(--noche-borde);
color: var(--color-crema);
}
/* ===== CTA DE KIMCHE: TARJETA CLARA DELIBERADA =====
El único resto claro del home, y es a propósito: la portada PNG trae
el crema horneado en la imagen. Tarjeta redondeada sobre la noche.
Sale de acá cuando exista la Kimche recortada (pendiente Bitácora). */
.pagina-landing .cta-kimche {
border-radius: 18px;
overflow: hidden;
margin: 2rem auto 0;
max-width: 1080px;
border: 1px solid var(--noche-borde);
}
/* ===== BOLETÍN ===== */
.pagina-landing .boletin input[type="email"] {
background: var(--noche-tarjeta);
border: 1px solid var(--noche-borde);
color: var(--color-crema);
}
.pagina-landing .boletin input[type="email"]::placeholder {
color: var(--color-niebla);
}
.pagina-landing .boletin input[type="email"]:focus {
border-color: var(--noche-borde-vivo);
outline: none;
}
.pagina-landing .boletin__legal,
.pagina-landing .boletin__legal a {
color: var(--color-niebla);
}
/* ===== BOTONES =====
El sólido pasa al naranjo neón: es el color de acción del tema, y no
compite con el cian informativo. El de línea, cian. */
.pagina-landing .btn-solido {
background: var(--noche-naranjo);
border-color: var(--noche-naranjo);
color: #2B1405;
}
.pagina-landing .btn-solido:hover {
background: #FFA05C;
border-color: #FFA05C;
}
.pagina-landing .btn-linea {
color: var(--noche-cian);
border-color: rgba(93, 231, 214, 0.45);
}
.pagina-landing .btn-linea:hover {
border-color: var(--noche-cian);
background: rgba(93, 231, 214, 0.08);
}
/* Dentro de la tarjeta crema del CTA, el btn-linea cian no contrasta:
ahí vuelve al verde profundo que home.v7.css ya había resuelto. */
.pagina-landing .cta-kimche .btn-linea {
color: #153B38;
border-color: rgba(21, 59, 56, 0.5);
}
.pagina-landing .cta-kimche .btn-linea:hover {
border-color: #153B38;
background: rgba(21, 59, 56, 0.06);
}
/* ===== LUNA DEL HOME =====
El disco crema ya brilla solo sobre la noche; se le baja el borde al
lenguaje del tema. */
.pagina-landing .luna-disco__borde {
stroke: rgba(93, 231, 214, 0.25);
}
.pagina-landing .luna-nota {
color: var(--color-niebla);
}
/* ===== ACCESIBILIDAD =====
Los foco visibles del sitio dependían del contraste sobre crema. Sobre
noche, foco cian explícito. */
.pagina-landing a:focus-visible,
.pagina-landing button:focus-visible,
.pagina-landing input:focus-visible {
outline: 2px solid var(--noche-cian);
outline-offset: 2px;
}
/* ===== v2: RESCATE DE LOS BOTONES DEL CTA DE KIMCHE =====
Detectado en producción tras el primer deploy del tema (verificado con
getComputedStyle: opacity 0): los dos botones del .cta-kimche quedaban
invisibles — su revelación .rev nunca se disparaba (el bloque nace
hidden hasta que llega el clima y el observer de secciones.v2.js no
los alcanza). El resto del bloque sí revela. Arreglo CSS puro, sin
tocar el JS: dentro del CTA las revelaciones quedan siempre visibles.
La tarjeta clara ya es el remate de la página; no necesita entrada
animada.
CHANGELOG v2 (14-ago-2026): este bloque + el contraste del btn-linea
dentro de la tarjeta crema. El resto es idéntico a v1. Rename obligado
por el Cache-Control immutable de un año. */
.pagina-landing .cta-kimche .rev {
opacity: 1 !important;
transform: none !important;
}