/* Estética · tokens del sistema visual. Ver definicion.md para el uso y mediciones.md para la trazabilidad. Fuentes: Zalando Sans Expanded (display) + Hanken Grotesk (cuerpo). Ambas en Google Fonts (OFL). Cargar en el : */ :root { /* Color · Paleta P2 (marfil + oliva profundo). El slot --maroon conserva el nombre por retro-compatibilidad con la CSS del sistema; su valor deja de ser granate. */ --bg: #F1ECDE; /* marfil (fondo del sitio) */ --ink: #1F1D17; /* texto y titulares sobre marfil */ --maroon: #2E3524; /* oliva profundo: hover del nav, footer, mega-menús, bloques oscuros */ --on-maroon: #F1ECDE; /* marfil sobre oliva */ --accent: #8C7B4E; /* oro apagado, reservado a CTA promocional puntual */ --on-accent: #F1ECDE; --line: rgba(31,29,23,.14); /* hairlines sobre marfil */ /* Tipografía */ --f-display: 'Zalando Sans Expanded', system-ui, sans-serif; /* nav, botones, headings, labels */ --f-text: 'Hanken Grotesk', system-ui, sans-serif; /* cuerpo, intro */ --fs-body: 1rem; /* 16px */ --lh-body: 1.5; /* Layout */ --pad-x: 40px; /* padding lateral desktop; mobile lo baja a 22px */ --radius-pill: 30px; /* botones pill (outline y sólido) */ /* Motion */ --dur-appear: 0.4s; /* fade + subida al entrar en viewport */ --appear-y: 24px; /* subida sutil del appear */ --ease: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out suave del sistema */ --dur-hover: 0.4s; /* invert de botones outline */ --dur-reveal: 0.8s; /* clip "agua subiendo" en imágenes protagonistas */ } /* Appear global: fade + subida sutil. app.js añade .in al entrar en viewport. El estado oculto se aplica solo con JS (.has-js) → sin JS, el contenido queda visible. Con @keyframes para que la entrada se reproduzca siempre al añadir .in. */ @keyframes appear-in { from { opacity: 0; transform: translateY(var(--appear-y)); } to { opacity: 1; transform: none; } } .has-js .appear { opacity: 0; transform: translateY(var(--appear-y)); } .appear.in { animation: appear-in var(--dur-appear) var(--ease) forwards; } /* Clip reveal: la imagen se llena de abajo hacia arriba, recto ("agua subiendo en un vaso"). Con @keyframes (no transición) para que SIEMPRE se reproduzca al añadir .in por scroll. */ @keyframes reveal-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } .has-js .reveal { clip-path: inset(100% 0 0 0); } .reveal.in { animation: reveal-rise var(--dur-reveal) var(--ease) forwards; } @media (prefers-reduced-motion: reduce) { .has-js .appear, .has-js .reveal, .appear, .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; } }