/* ===================================================================== base.css — tokens, reset, tipografía, botones, footer y utilidades. Se carga en TODAS las páginas. Colores y fuentes se cambian en :root. ===================================================================== */ /* ========================================================= TOKENS — referencias Figma: desktop 1512 / iPad 820 / móvil 390 ========================================================= */ :root { --bg-page: #f2f2f7; --navy: #1d3957; --navy-text: #1c3857; --navy-70: rgba(28, 56, 87, 0.7); --navy-60: rgba(29, 57, 87, 0.6); --navy-50: rgba(28, 56, 87, 0.5); --navy-40: rgba(29, 57, 87, 0.4); --navy-20: rgba(28, 56, 87, 0.2); --grey: #d9d9d9; --ice: #e7eef4; --ice-60: rgba(231, 238, 244, 0.6); --sky: #70b0f2; --sand: #ede7db; --sand-muted: #b8afa0; --white: #ffffff; --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Inter", sans-serif; --font-script: "Ballet", cursive; --font-mono: "Space Mono", monospace; /* Tipografía fluida (móvil 390 → iPad 820 → desktop 1512) */ --fs-hero: clamp(2.25rem, 0.5rem + 5vw, 6rem); /* 36 → 64 → 96 */ --fs-h2: clamp(1.5rem, 0.6rem + 3.2vw, 3rem); /* 24 → 48 */ --fs-script: clamp(2.25rem, 1.2rem + 3.3vw, 4rem); /* 36 → 64 */ --fs-card: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); /* 40 (28 en móvil) */ --fs-stat: clamp(2rem, 1.4rem + 1.9vw, 3rem); /* 48 */ --fs-faq-t: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); /* 28 → 36 */ --fs-faq-q: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); /* 24 */ --fs-tagline: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); /* 24 */ --fs-body: clamp(0.8125rem, 0.72rem + 0.35vw, 1rem); /* 13 → 16 */ --fs-small: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); /* 12 → 13 */ --fs-gallery: clamp(5rem, -1.5rem + 13.9vw, 13.5rem); /* 120 → 216 */ /* Espaciado fluido */ --pad-x: clamp(1.25rem, -3.07rem + 12.4vw, 9.25rem); /* 20 → 50 → 148 */ --pad-y: clamp(3rem, 5vw, 5rem); /* 48 → 80 */ --gap: clamp(1rem, 1.6vw, 1.5rem); /* 24 */ } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-page); font-family: var(--font-body); font-size: var(--fs-body); color: var(--navy); -webkit-font-smoothing: antialiased; overflow-x: hidden; } p, h1, h2, h3 { margin: 0; font-weight: inherit; } img { display: block; } /* Visibilidad por dispositivo: .m = solo móvil, .d = oculto en móvil */ .m { display: none; } .display { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 14, "wdth" 100; text-transform: uppercase; } .script { font-family: var(--font-script); font-weight: 400; text-transform: none; font-variation-settings: normal; } .fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; pointer-events: none; } .page { width: 100%; display: flex; flex-direction: column; position: relative; } .page > * { position: relative; z-index: 1; } /* ---------- Botones ---------- */ .btn-hero { width: clamp(14rem, 23vw, 21.75rem); min-height: 4.0625rem; background: var(--sky); color: var(--ice); display: flex; align-items: center; justify-content: center; line-height: 1.6; text-transform: uppercase; text-decoration: none; } .btn-hero--ghost { background: var(--white); color: var(--sky); } /* ---------- Footer ---------- */ .footer { width: 100%; background: var(--navy); padding: var(--pad-y) clamp(1.25rem, 5.3vw, 5rem) 2.5rem; display: flex; flex-direction: column; gap: 1.875rem; } .footer__divider { border-top: 1px solid rgba(184, 175, 160, 0.3); } .footer__info { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .footer__brand { max-width: 25.3125rem; display: flex; flex-direction: column; gap: 1rem; } .footer__name { font-family: var(--font-display); font-weight: 700; font-variation-settings: "opsz" 14, "wdth" 100; font-size: 1.5rem; color: var(--sand); } .footer__desc { font-weight: 300; font-size: var(--fs-small); line-height: 1.6; color: var(--sand-muted); } .footer__cols { display: flex; gap: 3rem; white-space: nowrap; } .footer__col { display: flex; flex-direction: column; gap: 0.75rem; } .footer__col-title { font-size: 0.6875rem; text-transform: uppercase; color: var(--sky); } .footer__col p:not(.footer__col-title) { font-size: var(--fs-small); color: var(--sand-muted); } .footer__legal { padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.625rem; color: var(--sand-muted); } /* ---------- FoldText (port vanilla del efecto de React Bits) ---------- Cada línea del titular es una "lámina" que se despliega sobre su borde superior/inferior alternando, como un papel plegado que se abre. */ .fold { perspective: 900px; perspective-origin: 50% 50%; } .fold-line { display: block; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; } .fold:not(.fold-done) .fold-line { opacity: 0; } @media (prefers-reduced-motion: reduce) { .fold:not(.fold-done) .fold-line { opacity: 1; } } /* ---------- ParagraphReveal (js/text-reveal.js) ---------- Cada palabra de un

es un span suelto que GSAP anima con stagger al entrar en el viewport (port de TextRotate, solo entrada). */ .reveal-w { display: inline-block; will-change: transform, opacity; } /* ---------- TextRevealBlur (js/hero-reveal.js) ---------- Igual que .reveal-w pero con blur de entrada (preset "fade-in-blur"). */ .reveal-blur-w { display: inline-block; will-change: transform, opacity, filter; } /* Lenis */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; } /* Footer en móvil */ @media (max-width: 640px) { .footer { padding: 2rem 1.25rem; gap: 1.5rem; } .footer__info { flex-direction: column; gap: 1.5rem; } .footer__brand { max-width: none; gap: 1.5rem; } .footer__name { font-family: var(--font-mono); font-weight: 400; font-size: 0.875rem; letter-spacing: 0.08em; } .footer__desc { font-weight: 400; font-size: 0.75rem; color: rgba(237, 231, 219, 0.5); } .footer__col { gap: 0.25rem; } .footer__col-title { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; color: rgba(237, 231, 219, 0.4); } .footer__col p:not(.footer__col-title) { color: rgba(237, 231, 219, 0.7); } .footer__legal { padding-top: 0; font-size: 0.5625rem; letter-spacing: 0.05em; color: rgba(237, 231, 219, 0.3); } }