/* Portfolio UGC · Ana María — tokens del sistema visual (Editorial B/N).
Tipografía: Manrope. Cargar en el :
*/
:root {
/* Color · blanco y negro puros. La fotografía UGC aporta todo el color. */
--bg: #FFFFFF;
--ink: #000000;
--paper: #F4F4F4;
--muted: #7D7C7C;
--line: #EAEAEA;
--btn: #0A0A0A;
--on-dark: #FFFFFF;
/* Tipografía · Manrope, display 400, tracking normal, lh 1.2 */
--f-display: 'Manrope', system-ui, sans-serif;
--f-text: 'Manrope', system-ui, sans-serif;
--w-display: 400;
--fs-hero: clamp(2.4rem, 7vw, 4.4rem); /* ≈70px desktop */
--fs-h2: clamp(2rem, 4.5vw, 3.5rem); /* ≈56px desktop */
--fs-lead: clamp(1.05rem, 1.6vw, 1.4rem);/* intro grande */
--track-display: normal;
--lh-display: 1.2;
/* Layout */
--content-max: 1400px;
--pad-x: 50px;
--radius-img: 2px;
/* Ratios de imagen */
--ar-hero: 422 / 495; /* works del ticker (0.85) */
--ar-team: 300 / 367; /* retrato 4:5 */
--ar-banner: 1905 / 650; /* banner apaisado (portrait en móvil) */
--ar-reel: 9 / 16; /* video vertical */
/* Motion de entrada */
--appear-y: 40px;
--dur-appear: 0.6s;
--ease-appear: cubic-bezier(0.22, 1, 0.36, 1);
/* Interacciones */
--ticker-dur: 45s; /* marquee de works */
--logos-dur: 20s; /* marquee de logos */
--hover-hero-scale: 0.94;
--dur-hover: 0.45s;
--ease-hover: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Titular de página */
.hero-title { font-family: var(--f-display); font-weight: var(--w-display);
font-size: var(--fs-hero); line-height: var(--lh-display);
letter-spacing: var(--track-display); color: var(--ink); margin: 0; }
/* Gesto de entrada: fade + rise 40px. app.js añade .in al entrar en viewport. */
.appear { opacity: 0; transform: translateY(var(--appear-y));
transition: opacity var(--dur-appear) var(--ease-appear),
transform var(--dur-appear) var(--ease-appear); }
.appear.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.appear { opacity: 1; transform: none; transition: none; }
}