/* ═══════════════════════════════════════════════════════════════════════
fanpage.lezzenbo.com — hoja de estilos de la página pública
Paleta, tipografías (Fraunces + Inter) y tokens de espaciado/sombra de
la identidad visual de LE'zzen.
(Este archivo es público: no documentar acá detalles internos — ver
CLAUDE.md del proyecto.)
═══════════════════════════════════════════════════════════════════════ */
:root {
--c-border: #ecdff0;
--c-text: #1f1a1d;
--c-muted: #6b6169;
--c-bg: #fdf9fb;
--c-bg-alt: #f7ecf3;
--c-surface: #ffffff;
--c-accent: #eab86c;
--c-accent-hover: #dfa651;
--c-accent-2: #e2a0d8;
--c-accent-2-hover: #d488c7;
/* #a8672a daba 3,9:1 sobre --c-bg-alt; #8f5620 es el mismo ámbar, más
profundo, y llega a 5,2:1 (WCAG AA). */
--c-accent-text: #8f5620;
--c-accent-2-text: #9c3f95;
/* Texto sobre los fondos pastel de marca (accent/accent-2): el blanco
daba ~2:1; este tono oscuro fijo da 8–9:1 y no cambia con el tema. */
--c-on-pastel: #1f1a1d;
--c-success-text: #166534;
--c-whatsapp: #25d366;
--c-whatsapp-hover: #1fb955;
--font-display: 'Fraunces', 'Inter', -apple-system, BlinkMacSystemFont, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--shadow-sm: 0 2px 4px rgba(31, 26, 29, .06);
--shadow-md: 0 4px 16px rgba(31, 26, 29, .08);
--shadow-lg: 0 12px 32px rgba(31, 26, 29, .12);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--container-w: 1140px;
--c-footer-bg: #1f1a1d;
}
@media (prefers-color-scheme: dark) {
:root {
--c-border: #3a2f36;
--c-text: #f3ecef;
--c-muted: #b7a9b2;
--c-bg: #171216;
--c-bg-alt: #1f181d;
--c-surface: #211a1f;
/* Versiones claras de los textos de acento para fondo oscuro (los
del tema claro quedaban en ~3:1 sobre #171216). */
--c-accent-text: #e9b97a;
--c-accent-2-text: #e6a6dc;
--c-success-text: #86efac;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, .35);
--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}
}
/* ── Reset base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x:hidden en html/body: el panel de navegación móvil
(position:fixed + transform:translateX(100%) para esconderse fuera de
pantalla, ver @media max-width:640px) hace que Chrome/Safari igual lo
cuenten en el ancho scrolleable de la página incluso "escondido" — bug
conocido de esa combinación. Esto corta cualquier desborde horizontal
accidental (acá o en futuros componentes) sin afectar los contenedores
con scroll horizontal propio que declaren su overflow-x:auto. */
html, body { overflow-x: hidden; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--c-text);
background: var(--c-bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* height:auto: las ![]()
llevan atributos width/height (para reservar su
espacio y evitar saltos de layout); sin esto, al achicarse por
max-width conservaban el alto del atributo y se deformaban (logo de
"Nosotros"). Las reglas con alto propio (logo del header, fotos de
producto) tienen más especificidad y no se ven afectadas. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
margin: 0 0 .75rem;
}
p { margin: 0 0 1rem; color: var(--c-muted); }
ul { margin: 0; padding: 0; list-style: none; }
/* Foco visible accesible en toda la página */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
/* accent-2-text (no el rosa pastel accent-2): el pastel sobre fondo
claro no llegaba a 3:1, el mínimo de WCAG para indicadores de foco. */
outline: 3px solid var(--c-accent-2-text);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.lz-footer a:focus-visible,
.lz-footer button:focus-visible,
.lz-hero a:focus-visible,
.lz-hero button:focus-visible {
outline-color: var(--c-accent-2); /* sobre fondo oscuro, el pastel sí contrasta */
}
/* ── Reveal-on-scroll (disparado por GSAP ScrollTrigger, ver
lz-parallax.js — acá solo vive la transición CSS en sí) ──────────────── */
/* Todo el estado "oculto antes de animar" vive bajo html.lz-anim, que pone
el script inline del SOLO si hay JS y no se pidió
reduced-motion, y que se quita si GSAP no cargó en 2,5 s — el contenido
nunca depende de un CDN para verse. */
.lz-anim [data-reveal] {
opacity: 0;
transform: translateY(32px);
transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
will-change: opacity, transform;
}
.lz-anim [data-reveal].is-visible { opacity: 1; transform: none; }
.lz-anim [data-reveal="zoom"] { transform: scale(.9); }
.lz-anim [data-reveal="zoom"].is-visible { transform: scale(1); }
.lz-anim [data-reveal="left"] { transform: translateX(-36px); }
.lz-anim [data-reveal="left"].is-visible { transform: translateX(0); }
.lz-anim [data-reveal="right"] { transform: translateX(36px); }
.lz-anim [data-reveal="right"].is-visible { transform: translateX(0); }
/* Hero (primera pantalla, elemento LCP): entra con una animación 100% CSS
que arranca al pintar, sin esperar a GSAP — antes el