/* ============================================================
PATAGONIA LACUSTRE · TEMA DE LA APP PARA LA LANDING
============================================================
QUÉ HACE
Redefine las custom properties de :root que declara styles.css,
reemplazando la paleta sepia/café original por la paleta real de la
app (app-movil/src/styles/tokens.css). Como styles.css referencia
TODO por var(--...), este archivo re-tematiza el sitio completo sin
tocar una sola regla del original.
POR QUÉ ASÍ Y NO EDITANDO styles.css
firebase.json cachea los CSS como immutable por un año. Editar
styles.css dejaría a quien ya visitó el sitio con la versión vieja
durante meses. Un archivo nuevo con nombre versionado se resuelve
solo.
ORDEN DE CARGA — IMPORTANTE
Este va DESPUÉS de styles.css y ANTES de clima.v1.css en el
. Si se carga antes que styles.css, no tiene efecto.
EQUIVALENCIAS (landing → tokens de la app)
El nombre de la variable se conserva aunque el color ya no sea sepia:
renombrarlas obligaría a reescribir styles.css entero. Los nombres
son históricos; los valores son los que mandan.
CHANGELOG
v2 (8-ago-2026): corrige el contraste AA de .section__eyebrow y su
borde inferior, y la viñeta de .section__list li::before. El dorado
de acento (#D2823C) sobre el fondo papel (#F7F4EE) daba 2.73:1 y no
pasaba AA (mínimo 4.5:1 texto / 3:1 borde funcional). Se reemplaza
por accent-700 (#815B18, 5.55:1) y accent-600 (#AB7920, 3.49:1).
============================================================ */
:root {
/* --- Antes sepia/dorado. Ahora verde profundo + dorado de la app --- */
--color-sepia-profundo: #0D2322; /* primary-700 */
--color-sepia: #1A4948; /* secondary-700 */
--color-dorado: #D99A2B; /* accent-500 — el dorado de la app */
--color-dorado-claro: #F5DAAC; /* accent-200 */
--color-crema: #FAF0D6; /* accent-100 */
/* --- Antes verde bosque. Ahora el teal de la cuenca --- */
--color-bosque-profundo: #153B38; /* primary-500 */
--color-bosque: #2E7D7B; /* secondary-500 — el teal de marca */
--color-bosque-claro: #67C0BE; /* secondary-300 */
/* --- Lago: antes azul acero, ahora la familia teal --- */
--color-lago: #236361; /* secondary-600 */
--color-lago-claro: #3D9F9C; /* secondary-400 */
/* --- Atardecer: los tonos del degradado de atardecer de la app
(clima.js, paleta CIELO). Son los mismos del ícono. --- */
--color-atardecer: #D2823C;
--color-atardecer-claro: #E4A15A;
/* --- Neutros alineados con los de la app --- */
--color-piedra: #1c1917; /* text-primary */
--color-niebla: #78716c; /* text-tertiary */
--color-papel: #F7F4EE; /* bg-cream-pale */
--color-blanco: #ffffff;
--color-negro: #060F0E; /* primary-900 */
/* --- Tipografía: la app titula en Fraunces, no en Cormorant.
Requiere el a Google Fonts en el . --- */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* Fraunces tiene eje óptico y pesos más gruesos que Cormorant: con los
mismos tamaños se ve pesada. Se compensa aflojando el tracking y
activando los sets estilísticos que usa la app. */
.hero__title,
.section__title,
.cta__title,
.clima-seccion__titulo,
.clima-cta__titulo,
.header__logo-text {
font-feature-settings: "ss01", "ss02";
letter-spacing: -0.015em;
}
/* El velo del hero terminaba en sepia (rgba(90,68,35,.75)), que ahora
choca con el verde. Se reemplaza por el verde profundo de la app. */
.hero__overlay {
background: linear-gradient(
to bottom,
rgba(6, 15, 14, 0.32) 0%,
rgba(6, 15, 14, 0.24) 45%,
rgba(21, 59, 56, 0.82) 100%
);
}
/* Mismo caso en el CTA final y el pie. */
.cta__overlay {
background: linear-gradient(
to bottom,
rgba(6, 15, 14, 0.42) 0%,
rgba(21, 59, 56, 0.72) 100%
);
}
.footer__overlay {
background: linear-gradient(
to bottom,
rgba(13, 35, 34, 0.86) 0%,
rgba(6, 15, 14, 0.94) 100%
);
}
/* Corrección de contraste AA (v2): --color-atardecer (#D2823C) sobre
--color-papel (#F7F4EE) da 2.73:1 y no pasa AA. Se reemplaza por
accent-700/accent-600, verificados contra el mismo fondo. */
.section__eyebrow {
color: #815B18;
border-bottom-color: #AB7920;
}
.section__list li::before {
background: #AB7920;
}