/* =========================================================================== Pesito — Marketing site, single source of truth for styles. Heritage palette (verde / hueso / rojo) — deliberately distinct from the in-app Cash palette used inside app.pesito.la. App mockups embedded in the showcase band render with the app palette to signal "same family, different surface". Design tokens mirror docs/website-prompt.md §3–§4. =========================================================================== */ :root { /* Color tokens */ --verde-900: #003D26; --verde-700: #006847; --verde-500: #00A651; --verde-300: #6FCF97; --verde-100: #E6F4EC; --verde-050: #F4FAF6; --rojo-700: #A50F20; --rojo-500: #CE1126; --rojo-200: #F7C9CE; --rojo-100: #FBD8DC; --rojo-050: #FDECEE; --blanco: #FFFFFF; --hueso: #FAF7F2; /* Slightly deeper-than-hueso backgrounds for legal callouts and inline sidebars. Sits between `--hueso` and `--crema` so it reads as "a card on the hueso canvas" rather than a muddy second tone. */ --hueso-100: #F6F3EB; --hueso-200: #F2EEE0; --crema: #F2EEE6; --tinta-900: #0B0B0B; --tinta-700: #2A2A2E; --tinta-500: #6B6B70; /* `--tinta-400` (#8A8A90) fills the gap between `--tinta-500` (body copy) and `--tinta-300` (hairlines). Used for dimmed metadata such as "Vigente a partir de …" on legal pages. */ --tinta-400: #8A8A90; --tinta-300: #C7C7CC; --oro: #D4A94A; --oro-soft: #E9D39A; --app-green: #00D632; /* Typography. Apple's macOS 26 / iOS 26 Liquid Glass aesthetic is inseparable from SF Pro's optical sizing — so on Apple devices we let the platform serve the real family (`-apple-system`, which resolves to SF Pro Display above ~20pt and SF Pro Text below). Inter is the self-hosted fallback for Windows, Linux, and Android; it shares the same width, weight axis, and x-height as SF, so switches between platforms feel continuous. `ui-rounded` first-in-stack gives Apple hardware (iOS 13+ / macOS Big Sur+) the SF Rounded variant at display sizes, which is what iOS 26's "Dynamic Island" and Control Center glass panels use. Falls through silently to SF Pro / Inter elsewhere. */ --font-body: ui-rounded, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-display: ui-rounded, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Display', 'Inter', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Fluid type scale — min / fluid / max via clamp(). */ --fs-display-xxl: clamp(56px, 7.4vw, 120px); --fs-display-xl: clamp(44px, 5.6vw, 84px); --fs-display-l: clamp(38px, 4.8vw, 72px); --fs-display-m: clamp(30px, 3.6vw, 52px); --fs-title: clamp(26px, 2.6vw, 40px); --fs-headline: 24px; --fs-body-l: 18px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 13px; --fs-eyebrow: 12px; /* Layout */ --container-max: 1200px; --container-inner: 1040px; --reading-max: 640px; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* Shadow */ --shadow-card: 0 2px 12px rgba(11, 11, 11, 0.06); --shadow-hover: 0 12px 32px rgba(0, 61, 38, 0.12); --shadow-modal: 0 24px 64px rgba(11, 11, 11, 0.24); /* Motion */ --dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-deliberate: 520ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* ═════════════════════════════════════════════════════════════════ Liquid Glass — iOS 26 / macOS 26 "Tahoe" material language. Real refraction is done at the platform level (CanvasKit shaders on the Flutter side, display compositor on Apple). On the web, we approximate with a layered stack: 1. backdrop-filter: blur + saturate + brightness (the physics) 2. surface tint (the color) 3. inset top-highlight + bottom-shade (edge lighting) 4. a thin gradient stroke + outer soft shadow (the ring) 5. optional SVG feTurbulence/feDisplacementMap (true warp) Tokens are declared here so the whole site + docs + in-app web shell can reach for the same numbers. Flutter mirrors these in mobile/lib/core/design/liquid_glass.dart — if you change a value here, match it there. ═════════════════════════════════════════════════════════════════ */ /* Backdrop physics */ --glass-blur-xs: 8px; --glass-blur-sm: 14px; --glass-blur-md: 22px; --glass-blur-lg: 36px; --glass-blur-xl: 56px; --glass-saturate: 1.8; --glass-brightness: 1.06; /* Nav chrome — its own blur pair so the scroll-triggered "materialize" moment reads as a deliberate step up in thickness, not a subtle tween. Matched to iOS 26 Finder chrome (~28px at rest) and Control Center surface (~40px). Pair with the `#nav-liquid-glass` / `-strong` SVG filters injected by scripts/main.js for real fractal-noise refraction of the content scrolling beneath the pane. */ --glass-blur-nav: 28px; --glass-blur-nav-scrolled: 40px; --glass-saturate-nav: 1.92; /* Surface tints — layered ON TOP of whatever the backdrop filter reveals. Warm hueso-biased by default so the glass feels Mexican heritage, not generic Apple-on-white. */ --glass-surface-light: rgba(250, 247, 242, 0.62); --glass-surface-regular: rgba(250, 247, 242, 0.36); --glass-surface-clear: rgba(255, 255, 255, 0.12); --glass-surface-chrome: rgba(250, 247, 242, 0.74); --glass-surface-dark: rgba(11, 11, 11, 0.42); --glass-surface-dark-regular: rgba(11, 11, 11, 0.58); /* Brand-tinted variants — glass that picks up verde / oro. Use sparingly: CTAs, active nav chip, "confirm" sheets. */ --glass-tint-verde: rgba(0, 166, 81, 0.18); --glass-tint-verde-strong: rgba(0, 104, 71, 0.32); --glass-tint-oro: rgba(212, 169, 74, 0.16); --glass-tint-rojo: rgba(206, 17, 38, 0.14); /* Edge lighting — simulates a 1px specular band on the top edge and a softer return on the bottom, faking light-from-above. */ --glass-edge-top: rgba(255, 255, 255, 0.62); --glass-edge-top-dark: rgba(255, 255, 255, 0.18); --glass-edge-bottom: rgba(255, 255, 255, 0.14); --glass-edge-stroke: rgba(255, 255, 255, 0.42); --glass-edge-stroke-dark: rgba(255, 255, 255, 0.1); --glass-edge-stroke-warm: rgba(250, 247, 242, 0.5); /* Outer shadows — softer, longer, more layers than a flat box-shadow. Always compose 2-3 stops: a tight 1-3px hair for crispness, a mid 8-14px for presence, and an ambient 24-48px for lift. */ --glass-shadow-sm: 0 1px 1px rgba(11, 11, 11, 0.04), 0 2px 8px rgba(11, 11, 11, 0.06); --glass-shadow-md: 0 1px 2px rgba(11, 11, 11, 0.06), 0 6px 18px rgba(11, 11, 11, 0.08), 0 24px 48px -12px rgba(11, 11, 11, 0.14); --glass-shadow-lg: 0 1px 3px rgba(11, 11, 11, 0.08), 0 14px 36px rgba(11, 11, 11, 0.14), 0 36px 72px -16px rgba(11, 11, 11, 0.22); --glass-shadow-verde-md: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 61, 38, 0.18), 0 24px 56px -16px rgba(0, 61, 38, 0.28); /* Continuous-ish corner radii — Apple's squircle is ~48% rounder than CSS `border-radius`, so bump nominal sizes up one step to visually match iOS 26 geometry. */ --glass-radius-xs: 12px; --glass-radius-sm: 16px; --glass-radius-md: 22px; --glass-radius-lg: 28px; --glass-radius-xl: 36px; --glass-radius-pill: 9999px; /* ═════════════════════════════════════════════════════════════════ Aurora atmosphere — v2 (2026-04-23). The "Liquid Glass redesign" pass. Where v1 tokens described the glass PANE itself (blur, tint, edge, shadow), these tokens describe the LIGHT that lands on the pane — the cinematic backdrop that makes every glass surface read as if it exists in a real lit room rather than a flat CSS stage. Three conceptual layers: 1. Aurora blooms — large, ultra-soft radial gradient washes of brand hue, sized in vw so they scale with the viewport. Use as body backdrop layers or as section accents. Alpha stays ≤ 14% so text contrast is never harmed. 2. Halo shadows — short outer-glow stacks, brand-tinted, that ride alongside neutral shadows for cards, CTAs, devices. Add dimension without dominating the surface. 3. Section shells — prebuilt multi-stop background recipes for sections (hero, cta-final, pricing, trust) so every section shares one atmospheric vocabulary. Designed to compose: a hero can layer [aurora-verde + aurora-oro + section-hero-shell] without any recipe fighting another — every bloom is radial, alpha-stacked, and fades out past 70% of its own radius. ═════════════════════════════════════════════════════════════════ */ /* ---- Aurora bloom colors — raw rgba stops --------------------- */ --aurora-verde-core: rgba(0, 166, 81, 0.22); --aurora-verde-soft: rgba(0, 166, 81, 0.12); --aurora-verde-trace: rgba(0, 104, 71, 0.08); --aurora-oro-core: rgba(212, 169, 74, 0.22); --aurora-oro-soft: rgba(212, 169, 74, 0.12); --aurora-oro-trace: rgba(233, 211, 154, 0.08); --aurora-rojo-core: rgba(206, 17, 38, 0.14); --aurora-rojo-soft: rgba(206, 17, 38, 0.07); --aurora-cream: rgba(242, 238, 230, 0.35); /* ---- Ambient halo shadows — outer glow rings ------------------ Layered with the existing neutral `--glass-shadow-*` stack. The trick: a tinted shadow at 20-40px blur, low opacity, no offset. Reads as "the element is emitting a soft corona", not "the element has a colored drop shadow". */ --halo-verde-sm: 0 0 24px -4px rgba(0, 166, 81, 0.22); --halo-verde-md: 0 0 40px -8px rgba(0, 166, 81, 0.28), 0 0 80px -24px rgba(0, 104, 71, 0.22); --halo-verde-lg: 0 0 60px -12px rgba(0, 166, 81, 0.32), 0 0 120px -32px rgba(0, 104, 71, 0.28); --halo-oro-sm: 0 0 24px -4px rgba(212, 169, 74, 0.28); --halo-oro-md: 0 0 40px -8px rgba(212, 169, 74, 0.32), 0 0 80px -24px rgba(212, 169, 74, 0.20); --halo-rojo-sm: 0 0 24px -4px rgba(206, 17, 38, 0.22); /* ---- Luminous surface tints — brighter, more chromatic ------ Use sparingly for hero-class surfaces that want to read as internally lit rather than merely translucent. The key is the warm white base + a faint cream overtone so the surface never greys out against the colored backdrop. */ --glass-surface-luminous: rgba(255, 253, 248, 0.66); --glass-surface-luminous-strong: rgba(255, 253, 248, 0.82); --glass-edge-luminous: rgba(255, 255, 255, 0.85); /* ---- Section atmosphere shells ------------------------------ Copy-paste-friendly multi-stop recipes. Use as `background: var(--shell-aurora-warm);` on a section. Each stacks 3–4 radial blooms + a faint linear base. */ /* Warm aurora — soft verde top-left, oro mid-right, rojo bottom-trace. The default for hero + hueso sections. */ --shell-aurora-warm: radial-gradient(82vw 52vw at 8% -6%, var(--aurora-verde-soft) 0%, transparent 58%), radial-gradient(68vw 48vw at 96% 22%, var(--aurora-oro-soft) 0%, transparent 60%), radial-gradient(58vw 46vw at 18% 108%, var(--aurora-rojo-soft) 0%, transparent 62%), linear-gradient(180deg, #fbf9f4 0%, var(--hueso) 50%, #f4efe6 100%); /* Cool verde shell — for the pricing / CTA sections that live on a verde ground. Adds an oro bloom + a softer verde corona. */ --shell-aurora-verde: radial-gradient(95vw 58vw at 50% -12%, rgba(0, 214, 104, 0.28) 0%, transparent 60%), radial-gradient(70vw 48vw at 12% 92%, var(--aurora-oro-core) 0%, transparent 62%), radial-gradient(70vw 48vw at 88% 108%, rgba(0, 132, 85, 0.24) 0%, transparent 60%), linear-gradient(180deg, #004e31 0%, var(--verde-700) 50%, var(--verde-900) 100%); /* Deep verde shell — footer + dark sections. Same posture as verde shell but dimmer, with the oro trace pushed to a thin top rim so the footer reads as a continuation of the CTA aurora rather than a flat cut. */ --shell-aurora-deep: radial-gradient(120vw 44vw at 50% -8%, rgba(0, 132, 85, 0.4) 0%, transparent 52%), radial-gradient(60vw 40vw at 10% 110%, var(--aurora-verde-trace) 0%, transparent 70%), var(--verde-900); } /* Mobile scale overrides — tighter headlines + body. The clamp() floors already cover the worst case; these just tune the micro sizes that don't warrant a full fluid curve. */ @media (max-width: 768px) { :root { --fs-headline: 20px; --fs-body-l: 17px; --fs-body: 15px; } } /* ---------- Reset ---------- */ /* ═══════════════════════════════════════════════════════════════════ Cross-Document View Transitions — the web platform's native answer to SwiftUI's `matchedGeometryEffect`. Supported in Chrome 126+, Edge 126+, Safari 18.2+; browsers without support silently fall back to a hard navigation. That's the whole progressive-enhancement story — no JS needed for the fallback. How it works: 1. `@view-transition { navigation: auto }` opts the origin into cross-document transitions for same-origin same-type nav. 2. Any element with a `view-transition-name` is captured on BOTH the outgoing and incoming page. 3. Between unload and first paint of the new page the browser interpolates the shared element's position + size + opacity, and crossfades the remainder via the implicit `root` group. We tag THREE things: • `.lang-toggle-indicator` — the dark ES/EN pill slides from the old language's position to the new one's, natively, regardless of what JavaScript did or didn't do. • `.brand-mark-icon` + `.brand-mark-text` — the nav wordmark stays pinned across page loads so the nav reads as continuous chrome rather than a reloaded element. Animation speeds are tuned via the `::view-transition-group(…)` pseudo-elements below; they use the Apple sheet-enter curve (`cubic-bezier(0.16, 1, 0.3, 1)`) so the feel matches the hover-anticipation motion the pill already uses within a page. ═══════════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } /* Default root transition — a soft crossfade, ~260ms, slightly asymmetric (old fades faster than new so the incoming content "arrives" rather than "swaps"). */ ::view-transition-old(root) { animation: pesito-vt-fade-out 200ms cubic-bezier(0.3, 0, 1, 1) both; } ::view-transition-new(root) { animation: pesito-vt-fade-in 280ms cubic-bezier(0, 0, 0, 1) both; } @keyframes pesito-vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes pesito-vt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* The lang-toggle pill — the centerpiece shared element. Animation timing matches the in-page hover slide so the commit moment feels like a direct continuation of the anticipation motion. */ ::view-transition-group(lang-indicator) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* The brand wordmark — stays EXACTLY in place across nav. If the icon+text don't shift between pages (they shouldn't — the nav is fixed), the group animates effectively to a no-op, but it's still captured so the element doesn't repaint. */ ::view-transition-group(brand-icon), ::view-transition-group(brand-text) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); } /* Reduced motion: browsers should already short-circuit view transitions, but we set a `prefers-reduced-motion` block to be explicit — durations drop to near-zero so the transition still fires (preserves layout stability) but is imperceptibly fast. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(lang-indicator), ::view-transition-group(brand-icon), ::view-transition-group(brand-text) { animation-duration: 1ms !important; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } /* Defensive horizontal-overflow clamp. `position: fixed` elements (`.nav`, `.nav-sheet`, `body::after`'s aurora, etc.) resolve `left: 0 / right: 0` against the initial containing block, which in most browsers widens to the document's scrollable width when ANY descendant triggers horizontal overflow. A single stray grid gap or oversized shape was enough to push the nav + sheet out to the scroll width, producing the visible "footer shifted left of the header" misalignment on mobile. `overflow-x: clip` pins the ICB to the layout-viewport width without introducing a horizontal scroll container (unlike `hidden`, which would also clobber `position: sticky` on descendants). Both html and body get it so that paint clipping kicks in regardless of which is the scroller in a given browser. */ html, body { overflow-x: clip; } body { margin: 0; /* Base layer only — a subtle top-to-bottom hueso wash. The real atmospheric work lives on `body::after` (the cinematic aurora bloom stack) and `body::before` (paper grain). Splitting it across pseudo-elements lets the stack layer cleanly: grain in OVERLAY blend mode, blooms in normal mode — neither fighting the other for alpha. Why not a single `background:` shorthand like v1? The old stack used `background-attachment: fixed` on three radials inside one composite. That forces the browser to repaint the entire viewport-sized gradient on any scroll invalidation (even when nothing moved). By moving blooms to a fixed pseudo-element, only that one layer owns repaint, and the browser composites it once per viewport resize. */ background: linear-gradient(180deg, #fbf9f4 0%, var(--hueso) 40%, #f4efe6 100%); color: var(--tinta-900); font-family: var(--font-body); font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1; font-weight: 500; font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Min-height guards against short pages (legal docs, 404) where the aurora layer would otherwise clip to content height. */ min-height: 100vh; } /* ═══════════════════════════════════════════════════════════════════ Cinematic aurora backdrop — v2 (2026-04-23). Five positioned radial blooms + a warm wash, all on one fixed viewport-sized layer that ONLY repaints on resize. Positioned so the blooms span the full scroll range without ever feeling repetitive: • verde top-left (8% -6%) — primary brand, establishes the page's "morning" light • oro mid-right (96% 22%) — warm counterpoint, sits behind the hero CTAs • cream mid-center (52% 48%) — a soft center bloom so the upper-fold doesn't read as empty between the blobs • verde bottom-left (-6% 84%) — anchors the FAQ / audience sections so content reveals against a lit ground • rojo bottom-right (108% 112%) — subtle heritage accent, balances the oro top-right All blooms use ≤ 22% alpha so body text contrast is never at risk — every pixel still has enough hueso under it to hit AA/AAA on tinta-900/-700 copy. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(88vw 58vw at 8% -6%, var(--aurora-verde-soft) 0%, transparent 55%), radial-gradient(72vw 52vw at 96% 22%, var(--aurora-oro-soft) 0%, transparent 58%), radial-gradient(58vw 42vw at 52% 48%, var(--aurora-cream) 0%, transparent 64%), radial-gradient(64vw 46vw at -6% 84%, var(--aurora-verde-trace) 0%, transparent 64%), radial-gradient(68vw 48vw at 108% 112%, var(--aurora-rojo-soft) 0%, transparent 60%); } /* Paper grain — a top-level fixed overlay on OVERLAY blend so it adds film-like tactility without shifting hue. Independent of `body::after` so the grain's blend-mode doesn't wrestle with the bloom stack's alpha. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; opacity: 0.55; mix-blend-mode: overlay; } /* Honor prefers-reduced-transparency — users who've opted out of Apple's translucency get a plain hueso canvas (blooms drop out, grain stays for tactility). All the glass primitives have their own reduced-transparency fallbacks, so removing the aurora leaves them on a clean warm base. */ @media (prefers-reduced-transparency: reduce) { body::after { display: none; } } .money, .tabular { font-variant-numeric: tabular-nums; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } ul, ol { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; } p { margin: 0; } /* ---------- Inter self-host ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations'); } /* ---------- Utilities ---------- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .container-inner { width: 100%; max-width: var(--container-inner); margin: 0 auto; padding: 0 24px; } .reading { width: 100%; max-width: var(--reading-max); margin: 0 auto; } /* Eyebrow — the small uppercase label that sits above every section title. v2 promotes it to a glass chip: a translucent pill with a soft verde halo so it reads as a "lit nameplate" floating over the section, matching the rest of the Liquid Glass material family. Remains an inline element so existing HTML (``) doesn't need to change. ─────────────────────────────────────────────────────────────── */ .eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: var(--glass-radius-pill); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-700); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 166, 81, 0.18); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(11, 11, 11, 0.02), 0 1px 2px rgba(0, 61, 38, 0.06), 0 0 24px -8px rgba(0, 166, 81, 0.22); font-feature-settings: "ss01" 1; } .eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.18); flex-shrink: 0; } /* Dark-section eyebrows (pricing, cta-final, gallery): flip the glass tint to a dim warm oro so it reads as a lit ornament on the colored ground rather than a bright hueso chip that fights the backdrop. */ .pricing .eyebrow, .cta-final .eyebrow, .trust .eyebrow, .how-gallery .eyebrow { background: rgba(250, 247, 242, 0.1); border-color: rgba(212, 169, 74, 0.32); color: var(--oro-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 24px -8px rgba(212, 169, 74, 0.24); } /* Display classes — heroic type. On Apple devices these resolve to SF Pro Display (or SF Pro Rounded where `ui-rounded` is available), matching macOS 26 / iOS 26 headline rendering. Tight tracking + `text-wrap: balance` to avoid orphans at breakpoints. */ .display-xxl { font-family: var(--font-display); font-size: var(--fs-display-xxl); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; } .display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .display-l { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; } .display-m { font-family: var(--font-display); font-size: var(--fs-display-m); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; } .title { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--tinta-700); text-wrap: balance; } .headline { font-size: var(--fs-headline); font-weight: 700; line-height: 1.25; color: var(--tinta-700); } .body-l { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.55; color: var(--tinta-700); } .caption { font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; color: var(--tinta-500); } /* The gold dot is Pesito's signature — used sparingly on headlines and paragraph breaks. */ .oro-dot { color: var(--oro); font-style: normal; display: inline-block; transform: translateY(-0.05em); } /* Pull-quote — Inter italic, bold weight, still distinct from body copy but keeps the site's sans-serif consistency. */ .pullquote { font-style: italic; font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.35; letter-spacing: -0.01em; color: var(--tinta-900); border-left: 2px solid var(--oro); padding: 4px 0 4px 24px; max-width: 56ch; text-wrap: pretty; } .pullquote cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-500); } .section { position: relative; padding: 128px 0; } @media (max-width: 768px) { .section { padding: 72px 0; } } /* Screen-reader-only utility — hides the visuals while keeping the element in the accessibility tree for form labels and aria hints. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 28px; border-radius: var(--radius-pill); font-size: var(--fs-body-l); font-weight: 700; transition: transform var(--dur-fast) var(--ease-emphasized), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .btn:active { transform: scale(0.98); } /* `.btn-primary`: Liquid Glass filled pill. The verde fill stays solid (this is the anchor CTA — not a translucent surface) but picks up the same top-edge specular, warm inner highlight, and layered shadow stack as the glass primitives so it reads as one material family. v2: added a soft verde halo at rest (so the button "emits" even before hover) and a brighter halo on hover. */ .btn-primary { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--verde-500) 0%, #008A46 100%); color: var(--blanco); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 61, 38, 0.22), 0 22px 44px -14px rgba(0, 61, 38, 0.28), var(--halo-verde-sm); border: 1px solid rgba(0, 104, 71, 0.45); letter-spacing: -0.005em; } .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 61, 38, 0.28), 0 30px 54px -14px rgba(0, 61, 38, 0.36), var(--halo-verde-md); } .btn-rojo { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--rojo-500) 0%, #9B0E1C 100%); color: var(--blanco); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(165, 15, 32, 0.24), 0 22px 44px -14px rgba(165, 15, 32, 0.32), var(--halo-rojo-sm); border: 1px solid rgba(165, 15, 32, 0.5); letter-spacing: -0.005em; } .btn-rojo:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(165, 15, 32, 0.3), 0 30px 54px -14px rgba(165, 15, 32, 0.42), 0 0 40px -4px rgba(206, 17, 38, 0.28); } /* `.btn-outline`: clear glass pill. Text reads as tinta-700 on warm contexts, flips to hueso when the parent has `.on-dark`. */ .btn-outline { position: relative; background: var(--glass-surface-clear); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); color: var(--tinta-700); border: 1px solid var(--glass-edge-stroke-warm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-sm); } .btn-outline:hover { background: rgba(255, 255, 255, 0.42); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.05), var(--glass-shadow-md); } /* Ghost button — text-only with a subtle glass chip on hover so it has a "clicked target" feel without competing with the primary verde-filled pill. Always text-first. */ .btn-ghost { color: var(--verde-700); padding: 12px 16px; border-radius: var(--glass-radius-pill); transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .btn-ghost:hover { color: var(--verde-900); background: rgba(0, 166, 81, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 24px -6px rgba(0, 166, 81, 0.22); } /* Focus rings — ALWAYS visible, restyled only. */ :focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════ Iridescent sheen — Pesito's "oil on warm glass" hover effect. Ported from the reference neumorphic-iridescent button (https://freefrontend.com/code/iridescent-3d-neumorphic-button-2026-03-12/, credit Simey / inspired by Wojciech Zieliński) but re-tinted to the brand's heritage spectrum — coral → gold → teal-green rather than the reference's cool cyan/magenta — so it reads as Pesito, not generic glassmorphism. Applied as a utility over ANY button that has `position: relative` and a non-transparent `border-radius`. Works by layering two pseudo-elements OVER the existing button fill: 1. `::after` — inner glassy glow. Brightens the bottom edge on hover, sells the "lit from below" depth. 2. `::before` — the iridescent sheen. Blurred diagonal gradient that slides IN from the top-right on hover; on rest it's invisible (opacity 0, translated out). Both layers are strictly DECORATIVE: `pointer-events: none` so hit-testing is unchanged; `mix-blend-mode: lighten` so they never make text harder to read (can only BRIGHTEN the underlying pixel, not darken). The `oklab` color-space gradient interpolates perceptually — no muddy greys in the middle of the spectrum. Requires Chrome 111+ / Safari 16.2+ / Firefox 113+; older browsers fall through to the base button fill with no sheen (graceful degrade). Applied below to `.btn-primary`, `.btn-rojo`, `.store-badge`, `.finale-store`, `.finale-signin-cta`, and `.cta-final .waitlist-submit` — every tier-1 CTA on the site. Secondary / ghost / outline buttons deliberately skip it so the iridescence stays a premium signal, not wallpaper. ═══════════════════════════════════════════════════════════════════ */ .iridescent { position: relative; isolation: isolate; /* contain the mix-blend to the button */ } .iridescent::before, .iridescent::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity 600ms cubic-bezier(0.32, 0, 0.67, 0), transform 600ms cubic-bezier(0.32, 0, 0.67, 0), filter 600ms cubic-bezier(0.32, 0, 0.67, 0); } /* Inner glassy glow — a soft lit bottom edge. Present (low opacity) at rest; intensifies on hover. */ .iridescent::after { opacity: 0.28; box-shadow: inset 0 -0.25em 2px 1px rgba(255, 255, 255, 0.42), inset 0 -0.3em 0.5em rgba(255, 255, 255, 0.25), inset 0 -0.3em 1em rgba(255, 255, 255, 0.18); mix-blend-mode: lighten; z-index: 2; } /* Iridescent sheen — the headline effect. Hidden at rest (opacity 0, translated off-screen to upper-right, scaled down), animates IN on hover from the top-right corner like a light hitting the surface. The mask ensures the sheen only shows on the lower-right portion of the button, leaving the top-left clean for legibility. */ .iridescent::before { opacity: 0; transform: translate(1.1em, 0) scale(0.85); background: linear-gradient( 98deg in oklab, oklch(0.86 0.16 30) -5%, /* warm coral / salmon */ oklch(0.92 0.15 85), /* gold oro */ oklch(0.9 0.18 165) 65%, /* teal-verde */ oklch(0.88 0.2 280) 140% /* cooled violet tail */ ); /* Diagonal mask: sheen fades in from top-right, absent top-left */ -webkit-mask: linear-gradient(166deg, transparent 55%, black 95%); mask: linear-gradient(166deg, transparent 55%, black 95%); filter: blur(6px) contrast(1.25); mix-blend-mode: lighten; z-index: 3; } /* Hover / focus / shine states — the magic moment. */ .iridescent:hover::before, .iridescent:focus-visible::before, .iridescent.is-shining::before { opacity: 0.55; transform: translate(0, 0) scale(1); transition-duration: 320ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .iridescent:hover::after, .iridescent:focus-visible::after, .iridescent.is-shining::after { opacity: 0.75; transition-duration: 320ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } /* Dark-surface variant — buttons with a dark body (finale-signin-cta, finale-store) need a brighter sheen to punch through the tint. Applied via `.iridescent--dark`. */ .iridescent--dark::before { background: linear-gradient( 98deg in oklab, oklch(0.92 0.2 30) -5%, oklch(0.98 0.18 90), oklch(0.95 0.22 170) 65%, oklch(0.95 0.24 275) 140% ); filter: blur(7px) contrast(1.3) brightness(1.05); } .iridescent--dark::after { box-shadow: inset 0 -0.25em 2px 1px rgba(255, 255, 255, 0.28), inset 0 -0.3em 0.5em rgba(255, 255, 255, 0.18), inset 0 -0.3em 1em rgba(255, 255, 255, 0.12); } .iridescent--dark:hover::before, .iridescent--dark:focus-visible::before, .iridescent--dark.is-shining::before { opacity: 0.42; } /* Reduced-motion + reduced-transparency: skip the sheen entirely. The base button styling is intact and still signals interactivity via the existing Liquid Glass hover transform. */ @media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) { .iridescent::before, .iridescent::after { display: none; } } /* Apply the utility to every tier-1 CTA on the site. No HTML changes required — just CSS composition. Buttons that already share `position: relative` (all the primary CTAs via the `.btn` base, the store badges via their own rules, the finale-* via their own rules) inherit the sheen automatically. */ .btn-primary, .btn-rojo, .cta-final .waitlist-submit, .store-badge, .finale-signin-cta { position: relative; isolation: isolate; } .btn-primary::before, .btn-primary::after, .btn-rojo::before, .btn-rojo::after, .cta-final .waitlist-submit::before, .cta-final .waitlist-submit::after, .store-badge::before, .store-badge::after, .finale-signin-cta::before, .finale-signin-cta::after, .finale-store::before, .finale-store::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity 600ms cubic-bezier(0.32, 0, 0.67, 0), transform 600ms cubic-bezier(0.32, 0, 0.67, 0), filter 600ms cubic-bezier(0.32, 0, 0.67, 0); } /* Warm (light/brand-colored buttons) — coral→gold→teal sheen. */ .btn-primary::before, .btn-rojo::before, .cta-final .waitlist-submit::before, .store-badge::before { opacity: 0; transform: translate(1.1em, 0) scale(0.85); background: linear-gradient( 98deg in oklab, oklch(0.86 0.16 30) -5%, oklch(0.92 0.15 85), oklch(0.9 0.18 165) 65%, oklch(0.88 0.2 280) 140% ); -webkit-mask: linear-gradient(166deg, transparent 55%, black 95%); mask: linear-gradient(166deg, transparent 55%, black 95%); filter: blur(6px) contrast(1.25); mix-blend-mode: lighten; z-index: 3; } .btn-primary::after, .btn-rojo::after, .cta-final .waitlist-submit::after, .store-badge::after { opacity: 0.28; box-shadow: inset 0 -0.25em 2px 1px rgba(255, 255, 255, 0.42), inset 0 -0.3em 0.5em rgba(255, 255, 255, 0.25), inset 0 -0.3em 1em rgba(255, 255, 255, 0.18); mix-blend-mode: lighten; z-index: 2; } /* Dark variant — jet-black or dark-translucent backgrounds get a brighter sheen + subtler inner glow so the iridescence still reads against the dark canvas. */ .finale-signin-cta::before, .finale-store::before { opacity: 0; transform: translate(1.1em, 0) scale(0.85); background: linear-gradient( 98deg in oklab, oklch(0.92 0.2 30) -5%, oklch(0.98 0.18 90), oklch(0.95 0.22 170) 65%, oklch(0.95 0.24 275) 140% ); -webkit-mask: linear-gradient(166deg, transparent 55%, black 95%); mask: linear-gradient(166deg, transparent 55%, black 95%); filter: blur(7px) contrast(1.3) brightness(1.05); mix-blend-mode: lighten; z-index: 3; } .finale-signin-cta::after, .finale-store::after { opacity: 0.22; box-shadow: inset 0 -0.25em 2px 1px rgba(255, 255, 255, 0.28), inset 0 -0.3em 0.5em rgba(255, 255, 255, 0.18), inset 0 -0.3em 1em rgba(255, 255, 255, 0.12); mix-blend-mode: lighten; z-index: 2; } /* Hover / focus — unify all variants through a single set of transitions to the same target state. */ .btn-primary:hover::before, .btn-primary:focus-visible::before, .btn-rojo:hover::before, .btn-rojo:focus-visible::before, .cta-final .waitlist-submit:hover::before, .cta-final .waitlist-submit:focus-visible::before, .store-badge:hover::before, .store-badge:focus-visible::before { opacity: 0.58; transform: translate(0, 0) scale(1); transition-duration: 320ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .btn-primary:hover::after, .btn-primary:focus-visible::after, .btn-rojo:hover::after, .btn-rojo:focus-visible::after, .cta-final .waitlist-submit:hover::after, .cta-final .waitlist-submit:focus-visible::after, .store-badge:hover::after, .store-badge:focus-visible::after { opacity: 0.78; transition-duration: 320ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .finale-signin-cta:hover::before, .finale-signin-cta:focus-visible::before, .finale-store:hover::before, .finale-store:focus-visible::before { opacity: 0.46; transform: translate(0, 0) scale(1); transition-duration: 320ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .finale-signin-cta:hover::after, .finale-signin-cta:focus-visible::after, .finale-store:hover::after, .finale-store:focus-visible::after { opacity: 0.6; transition-duration: 320ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } /* One-time load shimmer — every tier-1 CTA briefly pulses on first paint so the user sees the iridescent material exists before any hover. Controlled by the `is-shining` class that `scripts/main.js` adds on DOMContentLoaded + removes after the shimmer completes. */ .btn-primary.is-shining::before, .btn-rojo.is-shining::before, .cta-final .waitlist-submit.is-shining::before, .store-badge.is-shining::before { opacity: 0.52; transform: translate(0, 0) scale(1); transition-duration: 900ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .btn-primary.is-shining::after, .btn-rojo.is-shining::after, .cta-final .waitlist-submit.is-shining::after, .store-badge.is-shining::after { opacity: 0.7; transition-duration: 900ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .finale-signin-cta.is-shining::before, .finale-store.is-shining::before { opacity: 0.42; transform: translate(0, 0) scale(1); transition-duration: 900ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .finale-signin-cta.is-shining::after, .finale-store.is-shining::after { opacity: 0.55; transition-duration: 900ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } /* Reduced-motion + reduced-transparency: skip sheen entirely. */ @media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) { .btn-primary::before, .btn-primary::after, .btn-rojo::before, .btn-rojo::after, .cta-final .waitlist-submit::before, .cta-final .waitlist-submit::after, .store-badge::before, .store-badge::after, .finale-signin-cta::before, .finale-signin-cta::after, .finale-store::before, .finale-store::after { display: none; } } /* ═══════════════════════════════════════════════════════════════════ Liquid Glass — primitives Three things make this feel like a real iOS 26 / macOS 26 surface rather than "frosted glass, AI edition": 1. The ::before top-edge specular. One hair-thin 1px gradient from white 0.6 down to transparent, draped over the top 40% of the element. This is what makes glass look "lit". 2. The ::after bottom vignette. A subtle inverse gradient on the bottom edge, darker by ~8%, so the element has weight. 3. box-shadow stacks of 2-3 layers. Flat 8px shadows always read as cheap; real Apple glass has a hair layer + a mid layer + a long ambient. Use `.glass` as the baseline, then compose variants (`.glass--dark`, `.glass--verde`, `.glass--clear`) for tone. Wrap interactive glass with `.glass--interactive` to get hover squeeze + shadow bloom. ═══════════════════════════════════════════════════════════════════ */ .glass { position: relative; background: var(--glass-surface-regular); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border-radius: var(--glass-radius-md); border: 1px solid var(--glass-edge-stroke); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), var(--glass-shadow-md); isolation: isolate; transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } /* Top-edge specular — a lit arc across the top 42% of the card. */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 70% ); mix-blend-mode: plus-lighter; z-index: 0; } /* Bottom vignette — weight. */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, transparent 0%, transparent 65%, rgba(11, 11, 11, 0.06) 100% ); z-index: 0; } /* Direct children sit above the specular/vignette layers. */ .glass > * { position: relative; z-index: 1; } /* Size variants — smaller surfaces use tighter blur so the backdrop doesn't smear the type above. */ .glass--sm { border-radius: var(--glass-radius-sm); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), var(--glass-shadow-sm); } .glass--lg { border-radius: var(--glass-radius-lg); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), var(--glass-shadow-lg); } .glass--pill { border-radius: var(--glass-radius-pill); } /* Tonal variants. */ .glass--clear { background: var(--glass-surface-clear); } .glass--light { background: var(--glass-surface-light); } .glass--chrome { background: var(--glass-surface-chrome); } .glass--dark { background: var(--glass-surface-dark); border-color: var(--glass-edge-stroke-dark); box-shadow: inset 0 1px 0 var(--glass-edge-top-dark), inset 0 -1px 0 rgba(255, 255, 255, 0.04), var(--glass-shadow-md); color: var(--hueso); } .glass--dark::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 42%, transparent 70% ); } .glass--dark::after { background: linear-gradient( 180deg, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.18) 100% ); } .glass--dark-regular { background: var(--glass-surface-dark-regular); } .glass--verde { background: color-mix(in srgb, var(--glass-tint-verde) 80%, var(--glass-surface-regular)); border-color: rgba(0, 166, 81, 0.28); } .glass--verde-strong { background: var(--glass-tint-verde-strong); border-color: rgba(0, 104, 71, 0.45); color: var(--hueso); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.12), var(--glass-shadow-verde-md); } /* Luminous variant — for hero-class surfaces that want to read as internally lit rather than merely translucent. Pushes the surface alpha 10pp higher, widens the top specular, and adds a warm inner cream glow + an outer soft verde halo so the card visibly "emits" against the aurora backdrop. Reserve for: hero eyebrow pill, finale card, solo showcase cards, anywhere the composition needs ONE surface to lead. ───────────────────────────────────────────────────────────────── */ .glass--luminous { background: var(--glass-surface-luminous); border-color: var(--glass-edge-luminous); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(11, 11, 11, 0.04), inset 0 0 42px rgba(255, 252, 244, 0.4), var(--glass-shadow-md), var(--halo-verde-sm); } .glass--luminous::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 70% ); } .glass--luminous.glass--interactive:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(11, 11, 11, 0.04), inset 0 0 52px rgba(255, 252, 244, 0.5), var(--glass-shadow-lg), var(--halo-verde-md); } .glass--verde-strong::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 70% ); } .glass--oro { background: color-mix(in srgb, var(--glass-tint-oro) 80%, var(--glass-surface-regular)); border-color: rgba(212, 169, 74, 0.42); } /* Interactive glass — pointer state responds with a subtle lift and a deeper shadow + a widened specular, mirroring iOS 26's "breathing" button state. */ .glass--interactive { cursor: pointer; will-change: transform, box-shadow; } .glass--interactive:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), var(--glass-shadow-lg); } .glass--interactive:active { transform: translateY(0) scale(0.985); transition-duration: var(--dur-instant); } /* Optional: true liquid refraction via SVG. Apply with `style="filter: url(#liquid-refraction)"` on the element BEHIND the glass (not the glass itself) to get a subtle warp of the content through the pane. Expensive; reserve for hero. */ .glass--refract { filter: url(#liquid-refraction); } /* ---- Liquid Glass "goo" container --------------------------------- Port of SwiftUI's `GlassEffectContainer(spacing:)`. When applied to a parent, any `.glass` or `.glass--pill` children inside it that come within ~spacing pixels of each other will PHYSICALLY MERGE into one continuous shape (like mercury beads fusing). As they pull apart, the fused shape splits. Implementation is an SVG filter trick: 1. Gaussian blur softens the edges of child glass shapes. 2. feColorMatrix thresholds alpha to near-binary, turning the blurred halos into hard-edged fused regions. 3. feComposite re-overlays the original SourceGraphic so the interior of each shape (type, icons) stays crisp — only the EDGES participate in the merge. The trade-off: children rendered through the filter lose their own drop shadows and backdrop-filter effects (filter eats them). So `.glass-container` children use an INTERNAL tint + hair border, not backdrop-blur. Render the container on a parent that itself has glass/backdrop if you want blur-through-the-group. Use `.glass-container--tight` for a shorter merge reach (buttons, chips) and `.glass-container` for the default (cards, store badges). Spacing in SwiftUI lives on the container; we encode it in the filter's stdDeviation. */ .glass-container { filter: url(#liquid-goo); /* isolate so the goo filter only composites its own subtree, not the surrounding page. */ isolation: isolate; } .glass-container--tight { filter: url(#liquid-goo-tight); isolation: isolate; } /* Goo children can't use backdrop-filter (the filter collapses it). This is a solid-tint sibling variant of `.glass` designed to live inside `.glass-container`. The border, specular highlight, and shadow are all painted inline so the filter pipeline preserves them through the blur+threshold step. */ .glass-pellet { position: relative; background: rgba(255, 255, 255, 0.62); border: 1px solid var(--glass-edge-stroke-warm); border-radius: var(--glass-radius-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(11, 11, 11, 0.04); /* No backdrop-filter: goo filter eats it. Solid-tint only. */ transition: transform var(--dur-fast) var(--ease-emphasized), background var(--dur-fast) var(--ease-standard); } .glass-pellet--dark { background: rgba(11, 11, 11, 0.55); border-color: var(--glass-edge-stroke-dark); box-shadow: inset 0 1px 0 var(--glass-edge-top-dark), inset 0 -1px 0 rgba(0, 0, 0, 0.2); color: var(--hueso); } .glass-pellet--verde { background: rgba(0, 104, 71, 0.55); border-color: rgba(0, 104, 71, 0.5); color: var(--hueso); } /* ---- Interactive glass — Apple's `.interactive()` modifier -------- On hover: the glass "breathes" brighter (specular intensifies, tint lifts toward white) and lifts 1px. On press: squeezes to 97% scale with a tighter shadow, mimicking iOS 26's haptic squeeze. The timing matches SwiftUI's default glass interaction (fast-in, slower spring-out). */ .glass-pressable { cursor: pointer; will-change: transform, background; transition: transform 180ms cubic-bezier(0.2, 0, 0, 1.2), background 180ms cubic-bezier(0.2, 0, 0, 1), box-shadow 180ms cubic-bezier(0.2, 0, 0, 1); } .glass-pressable:hover { transform: translateY(-1px); } .glass-pressable:active { transform: scale(0.97); transition-duration: 80ms; } /* Backdrop-filter guard: goo children lose their own filters, but standalone `.glass` surfaces keep them. Don't combine. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass-pellet { background: rgba(255, 255, 255, 0.88); } .glass-pellet--dark { background: rgba(11, 11, 11, 0.85); } .glass-pellet--verde { background: var(--verde-700); } } /* Reduced motion / reduced transparency: keep the goo off when the user has disabled animations — the merge IS the animation. */ @media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) { .glass-container, .glass-container--tight { filter: none; } .glass-pressable { transition: none; } .glass-pressable:hover, .glass-pressable:active { transform: none; } } /* Older browsers / contexts without backdrop-filter support fall back to a heavier opaque tint so the element still has identity. (`.nav` fallbacks live alongside the `.nav` rule below — source order matters for cascade.) */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass { background: rgba(250, 247, 242, 0.92); } .glass--dark { background: rgba(11, 11, 11, 0.86); } .glass--clear { background: rgba(250, 247, 242, 0.72); } .glass--verde { background: rgba(0, 166, 81, 0.28); } .glass--verde-strong { background: var(--verde-700); } } /* Honor prefers-reduced-transparency (macOS/iOS accessibility toggle). */ @media (prefers-reduced-transparency: reduce) { .glass { background: var(--hueso); } .glass--dark { background: var(--tinta-900); } .glass--verde-strong { background: var(--verde-700); } .glass::before, .glass::after { display: none; } } /* ---------- Navigation ---------- Apple macOS 26 / iOS 26 "Tahoe" Liquid Glass chrome. Three things make this a real pane of glass rather than a CSS frost effect: 1. Optical refraction. `backdrop-filter: url(#nav-liquid-glass)` runs the content scrolling beneath the pane through an SVG feTurbulence + feDisplacementMap chain, so pixels under the nav physically warp on long-wavelength noise — exactly the "liquid" behaviour iOS 26 shows when content passes through the Dynamic Island or a Control Center sheet. The filter is injected into the document by scripts/main.js (see `injectNavGlassFilter` there) so every page gets it without touching every HTML file. A `-strong` variant with scale=28 takes over once the nav materializes post-scroll — the glass visibly "gets thicker". 2. Proper blur depth. 28px rest, 40px scrolled — paired with 1.92x saturation so the warm hueso backdrop colours punch through instead of bleaching to grey frost. Notably _thicker_ than the sample (`blur(0px)`) — the sample relied on pure warp; we stack both. 3. Layered edge lighting. Four inset shadows, ported from the macOS 26 chrome spec: • upper-left 2px specular seam (the lit edge) • lower-right 2px softer return (ambient bounce) • inner 3px ring glow at 0.42 alpha (the "etched" look) • outer ambient drop shadow (depth off surface) Together they read as a single continuous 1px bevel of refracted light — the detail that separates "glass" from "translucent box". Before scroll: subtle warp, soft lighting, ~22% hueso tint so the hero art shows through. After scroll: the `nav--scrolled` class (set by scripts/main.js when window.scrollY > 8) bumps blur, swaps to the -strong refraction filter, thickens the tint to ~72% chrome, intensifies every inset, and pops the hair-thin bottom divider. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px; background: rgba(250, 247, 242, 0.22); /* Fallback declaration for browsers without SVG-filter support in backdrop-filter (Firefox as of 2026). Chrome/Safari override with the refraction-chained version on the next line. */ -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate-nav)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate-nav)) brightness(var(--glass-brightness)); -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate-nav)) brightness(var(--glass-brightness)) url(#nav-liquid-glass); backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate-nav)) brightness(var(--glass-brightness)) url(#nav-liquid-glass); border-bottom: 1px solid transparent; /* Edge-light stack — see header comment. The `inset … -2px` trick draws a crisp 2px band on only one pair of edges (not a full-perimeter shadow), which is what gives the "lit seam" its directionality. */ box-shadow: inset 2px 2px 0 -2px rgba(255, 255, 255, 0.65), inset -2px -2px 0 -2px rgba(255, 255, 255, 0.18), inset 0 0 3px 1px rgba(255, 255, 255, 0.42), 0 2px 8px rgba(11, 11, 11, 0.03); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base) var(--ease-standard), -webkit-backdrop-filter var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } /* Top-edge specular — a lit arc across the upper 55% of the chrome. Visible at rest (opacity 0.55) so the nav always reads as lit glass, intensifies to full at scroll for the materialize moment. */ .nav::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 55%, transparent 100% ); opacity: 0.55; transition: opacity var(--dur-base) var(--ease-standard); z-index: 0; } /* Bottom vignette — gives the chrome weight. At rest it's a whisper of tinta to anchor the pane; on scroll it deepens slightly so the bottom divider line reads as lit from within rather than drawn. */ .nav::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none; background: linear-gradient( 180deg, transparent 0%, rgba(11, 11, 11, 0.03) 100% ); opacity: 0.5; transition: opacity var(--dur-base) var(--ease-standard); z-index: 0; } .nav.nav--scrolled { background: var(--glass-surface-chrome); border-bottom-color: rgba(11, 11, 11, 0.05); -webkit-backdrop-filter: blur(var(--glass-blur-nav-scrolled)) saturate(2.0) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-nav-scrolled)) saturate(2.0) brightness(var(--glass-brightness)); -webkit-backdrop-filter: blur(var(--glass-blur-nav-scrolled)) saturate(2.0) brightness(var(--glass-brightness)) url(#nav-liquid-glass-strong); backdrop-filter: blur(var(--glass-blur-nav-scrolled)) saturate(2.0) brightness(var(--glass-brightness)) url(#nav-liquid-glass-strong); box-shadow: inset 2px 2px 0 -2px rgba(255, 255, 255, 0.78), inset -2px -2px 0 -2px rgba(255, 255, 255, 0.22), inset 0 0 3px 1px rgba(255, 255, 255, 0.56), 0 8px 24px -12px rgba(11, 11, 11, 0.14); } .nav.nav--scrolled::before { opacity: 1; } .nav.nav--scrolled::after { opacity: 1; } /* Nav fallbacks — placed AFTER the base `.nav` rule so source order lets them override. Without backdrop-filter the 22% hueso tint is too transparent to read as chrome; we lift to near-opaque and swap the inner-ring glow for a flat bottom hairline. The reduced- transparency variant goes fully opaque — accessibility trumps aesthetics. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav { background: rgba(250, 247, 242, 0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(11, 11, 11, 0.05); } .nav.nav--scrolled { background: var(--hueso); border-bottom-color: rgba(11, 11, 11, 0.08); } } @media (prefers-reduced-transparency: reduce) { .nav { background: var(--hueso); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(11, 11, 11, 0.06); } .nav::before, .nav::after { display: none; } } .nav-inner { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; gap: 32px; } .nav-links { display: flex; gap: 32px; margin: 0 auto; } .nav-links a { font-size: var(--fs-body); color: var(--tinta-700); font-weight: 600; transition: color var(--dur-fast) var(--ease-standard); } .nav-links a:hover { color: var(--verde-700); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* Liquid Glass segmented control — Apple `GlassEffectContainer` port. -------------------------------------------------------------------- Apple's GlassEffectContainer behavior (per developer docs): > As shapes near one another, their paths start to blend into one > another. The higher the spacing, the sooner blending begins as > the shapes approach each other. In SwiftUI, each `glassEffect(...)` child in a container contributes a shape to one rendered material. When the ACTIVE state moves, the dark indicator slides between positions and — because neighbors are inside the goo threshold — its path literally morphs continuously. CSS port: 1. `.lang-toggle-indicator` is the single animated shape — a dark absolute-positioned pill that JS slides over whichever anchor is active. 2. Under the `#liquid-goo-tight` filter, as the indicator slides past the hovered anchor, the two shapes' alpha halos fuse into one continuous contour for the duration of the transit. 3. Hover anticipation: pointer on the idle anchor moves the indicator fully over IT first, then the page load completes the navigation. Users see the commit before the URL changes. See `scripts/main.js` for the positioning logic. */ .lang-toggle { position: relative; display: inline-flex; align-items: center; padding: 4px; font-size: var(--fs-caption); font-weight: 600; isolation: isolate; /* Baseline toggle-container background — glass hueso pill. The goo filter is INTENTIONALLY not applied here: it would threshold the anchor glyphs into invisibility (labels are alpha-antialiased and don't survive the 18/-7 alpha clamp). The sliding indicator alone gives Apple's segmented-control feel; we keep `#liquid-goo-tight` available via `.glass-container--tight` for surfaces where the children are solid shapes without text. */ background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04); border-radius: var(--glass-radius-pill); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); } /* The animated dark indicator. Two animation contexts both drive this element: • IN-PAGE (hover preview): CSS transition animates --x / --w via `scripts/main.js` mouseover. • CROSS-PAGE (commit): the `view-transition-name` below tags the element as a shared surface. When the user clicks to switch language, the browser snapshots the indicator's position on the old page and interpolates to the new page's position natively — no JS bridge required. Both paths use the same cubic-bezier so they feel like one motion. The initial-paint flash we had (indicator rendering at 0,34 for one frame before JS corrects it) is prevented by the new `.lang-toggle[data-ready="false"]` rule: transitions are suppressed until the first rAF, then enabled. */ .lang-toggle-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 34px); transform: translate3d(var(--x, 0px), 0, 0); background: var(--tinta-900); border-radius: var(--glass-radius-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.22); pointer-events: none; z-index: 1; will-change: transform, width; transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1), width 440ms cubic-bezier(0.16, 1, 0.3, 1); } /* Only the NAV's toggle participates in the cross-document view transition — a `view-transition-name` must be globally unique per document, and the footer also contains a `.lang-toggle-indicator`. The nav version is above-fold, visible on every scroll depth, and is the one users interact with most; the footer toggle still works, it just doesn't do the cross-page slide. */ .nav .lang-toggle-indicator { view-transition-name: lang-indicator; } /* Suppress the initial-paint glide. The JS in main.js sets data-ready="true" after it has positioned the indicator over the active anchor; only then do in-page hover transitions activate. (The cross-document transition is unaffected — it uses view- transition snapshots, not the CSS `transition` property.) */ .lang-toggle[data-ready="false"] .lang-toggle-indicator { transition: none; } .lang-toggle a { position: relative; padding: 4px 10px; border-radius: var(--glass-radius-pill); color: var(--tinta-500); z-index: 2; transition: color 320ms cubic-bezier(0.2, 0, 0, 1); } .lang-toggle a:hover { color: var(--tinta-900); } .lang-toggle a.lang-toggle--active { color: var(--blanco); } /* While the indicator is over a non-active anchor (hover anticipation), lighten the hovered link to show focus intent without flickering the non-hovered link's color. JS sets data-preview="" on the host when a hover is in flight. */ .lang-toggle[data-preview="es"] a[data-lang="es"], .lang-toggle[data-preview="en"] a[data-lang="en"] { color: var(--blanco); } .lang-toggle[data-preview="es"] a[data-lang="en"].lang-toggle--active, .lang-toggle[data-preview="en"] a[data-lang="es"].lang-toggle--active { color: var(--tinta-500); } /* Reduced motion: the indicator still reflects the active anchor's position, but without the transit animation — jumps to it. Still visually a glass pill, still readable, just no morph. */ @media (prefers-reduced-motion: reduce) { .lang-toggle-indicator { transition: none; } } @media (prefers-reduced-transparency: reduce) { .lang-toggle { filter: none; } .lang-toggle-indicator { box-shadow: none; } } .nav-hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--tinta-900); } .nav-hamburger:hover { background: var(--verde-050); } @media (max-width: 1023px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-actions .btn-primary { display: none; } /* Desktop relies on `.nav-links { margin: 0 auto }` to push the actions to the far right. With .nav-links hidden on tablet / mobile that margin disappears, so the actions collapse next to the logo. Re-anchor them to the right edge so the hamburger sits flush with the container. */ .nav-actions { margin-left: auto; } } @media (max-width: 480px) { .nav-inner { gap: 16px; } .nav-actions { gap: 12px; } .nav-actions .btn-ghost { display: none; } } .nav-sheet { position: fixed; inset: 0; background: var(--hueso); z-index: 200; display: flex; flex-direction: column; padding: 88px 24px 32px; transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-decelerate); overflow-y: auto; } .nav-sheet.nav-sheet--open { transform: translateY(0); } /* Direct-child selector only — the actions-row anchors inside .nav-sheet-actions are buttons, not menu links, and should NOT inherit the 22px / hairline-border list styling that would clobber their padding, colour, and add stray underlines. */ .nav-sheet > a { font-size: 22px; font-weight: 700; padding: 18px 0; border-bottom: 1px solid rgba(11, 11, 11, 0.08); color: var(--tinta-900); } .nav-sheet > a:first-of-type { border-top: 1px solid rgba(11, 11, 11, 0.08); } .nav-sheet-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } .nav-sheet-actions .btn { justify-content: center; width: 100%; padding: 16px 24px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 128px 0 96px; /* The hero has its own bloom pass laid on top of the body's aurora — a tight verde halo under the copy, a soft oro behind the device, a cream wash down the middle. These read as "the product sits in a lit room" rather than "floats on a gradient." Alpha stays ≤ 18% so the body copy never loses contrast. */ isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(68vw 42vw at 18% 32%, rgba(0, 166, 81, 0.14) 0%, transparent 60%), radial-gradient(54vw 42vw at 80% 56%, rgba(212, 169, 74, 0.14) 0%, transparent 62%), radial-gradient(40vw 32vw at 48% 12%, rgba(255, 252, 244, 0.5) 0%, transparent 65%); mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%); } .hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; position: relative; } .hero-copy { grid-column: span 7; } .hero-art { grid-column: span 5; position: relative; } .hero h1 { margin-top: 24px; color: var(--tinta-900); /* A whisper-fine text-shadow anchors the display type over the translucent aurora without making it look "shadowed". Only kicks in where the bloom brightens the surface under big type. */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } .hero h1 .oro-dot { color: var(--oro); } .hero-sub { margin-top: 24px; color: var(--tinta-500); max-width: 480px; } .hero-ctas { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .hero-store-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } /* Hero store badges — glass pill. Clear variant so the hero art behind them still reads (when present), with a hair-thin warm stroke so the edges define against the hueso canvas. */ .store-badge { position: relative; display: inline-flex; flex-direction: column; padding: 10px 18px; border-radius: var(--glass-radius-pill); border: 1px solid var(--glass-edge-stroke-warm); background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-sm); font-size: 11px; line-height: 1.2; color: var(--tinta-500); font-weight: 600; min-width: 160px; transition: transform var(--dur-fast) var(--ease-emphasized), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .store-badge:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-md); } .store-badge strong { font-size: 15px; font-weight: 700; color: var(--tinta-900); letter-spacing: -0.005em; } /* Phone mockup composition — three independent motion channels, each on a separate element so they don't fight over `transform`: ────────────────────────────────────────────────────────────── 1. `.hero-device-wrap` — perspective parent; owns the ambient float (translateY, pre-existing). 2. `.hero-device` — owns the cursor-tracking tilt (rotateY/rotateX via CSS custom props `--tilt-x` / `--tilt-y`, written by JS). 3. `[data-balance]` / `[data-contact]` — per-element SVG animations (balance pulse, staggered avatar heartbeat) that compose over the top without touching the parent transform stack. This separation is deliberate: putting float + tilt on the SAME element would require both to write to `transform`, causing one to clobber the other. Split across parent → child, they multiply cleanly. */ .hero-device-wrap { /* Transparent to layout — just an inline-block that gives the child SVG a perspective context + a non-transform-y animation channel so the float doesn't fight the tilt. Inherits sizing from its parent `.hero-art` grid column. */ display: block; perspective: 1200px; transform-style: preserve-3d; position: relative; animation: hero-float 6s ease-in-out infinite; will-change: transform; } .hero-device { /* `--tilt-x` / `--tilt-y` are written by `scripts/main.js` from pointermove. Both default to 0 so the phone is neutral at rest. The 320ms transition smooths abrupt input (pointer entering / leaving the hero) without feeling laggy during continuous move. */ --tilt-x: 0deg; --tilt-y: 0deg; width: 100%; max-width: 520px; margin-left: auto; transform: rotateY(var(--tilt-x)) rotateX(var(--tilt-y)); transform-style: preserve-3d; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Balance pulse — the `$12,450` text gently brightens every ~4.2s. Keyed off a child SVG `text` element rather than the whole device so the ambient reflection animations don't interfere. */ .hero-device [data-balance] { animation: saldo-pulse 4200ms cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 32px 210px; } @keyframes saldo-pulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(0, 214, 50, 0)); } 45% { opacity: 1; filter: drop-shadow(0 0 4px rgba(0, 214, 50, 0.35)); } } /* Contact avatar heartbeat — four staggered pulses. Each avatar pulses scale 1 → 1.06 → 1 with a 900ms tick; offsets of 0s, 0.7s, 1.4s, 2.1s so the row feels like a rolling heartbeat rather than a synchronized blink. */ .hero-device [data-contact] { animation: contact-heartbeat 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; transform-box: fill-box; } .hero-device [data-contact="0"] { animation-delay: 0s; } .hero-device [data-contact="1"] { animation-delay: 0.7s; } .hero-device [data-contact="2"] { animation-delay: 1.4s; } .hero-device [data-contact="3"] { animation-delay: 2.1s; } @keyframes contact-heartbeat { 0%, 18%, 100% { transform: scale(1); filter: brightness(1); } 8% { transform: scale(1.08); filter: brightness(1.12); } } /* Reduced motion: strip ALL phone animations. The phone becomes a static image — still readable, still beautiful, just silent. */ @media (prefers-reduced-motion: reduce) { .hero-device, .hero-device [data-balance], .hero-device [data-contact] { animation: none !important; transform: none !important; } } /* Big ambient verde halo behind the phone — the "the product is emitting light" effect. Layered gradient blooms (verde core + oro warm + cream center) that breathe with the phone's float animation so the aura feels attached to the device. */ .hero-ambient { position: absolute; right: -80px; top: -120px; width: 540px; height: 540px; pointer-events: none; z-index: -1; background: radial-gradient(circle at 40% 42%, rgba(0, 214, 104, 0.32) 0%, transparent 55%), radial-gradient(circle at 68% 48%, rgba(212, 169, 74, 0.22) 0%, transparent 62%), radial-gradient(circle at 50% 50%, rgba(255, 252, 244, 0.24) 0%, transparent 60%); filter: blur(6px); animation: hero-ambient-breathe 8s ease-in-out infinite; will-change: transform, opacity; } @keyframes hero-ambient-breathe { 0%, 100% { transform: scale(1) translateY(0); opacity: 0.9; } 50% { transform: scale(1.04) translateY(-4px); opacity: 1; } } /* A secondary red pin-light, bottom-left of the hero art. Small, saturated, soft — the Mexican-flag accent. Keeps the hero from reading as monochrome verde + oro. */ .hero-ambient-dot { position: absolute; left: 24px; bottom: 28px; width: 28px; height: 28px; background: radial-gradient(circle, rgba(206, 17, 38, 0.7) 0%, rgba(206, 17, 38, 0) 70%); filter: blur(2px); border-radius: 50%; pointer-events: none; } /* Add a deep ground-shadow under the device so it has weight. Sits on the device-wrap so it tracks the float animation. */ .hero-device-wrap::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -28px; height: 48px; background: radial-gradient(ellipse at center, rgba(0, 61, 38, 0.32) 0%, transparent 70%); filter: blur(18px); pointer-events: none; z-index: -1; opacity: 0.8; } @media (prefers-reduced-motion: reduce) { .hero-ambient { animation: none; } } @media (prefers-reduced-transparency: reduce) { .hero-ambient { display: none; } .hero::before { display: none; } } @media (max-width: 1023px) { .hero-copy, .hero-art { grid-column: span 12; } .hero-device { max-width: 340px; margin: 0 auto; } .hero-ambient { display: none; } } @media (max-width: 768px) { .hero { padding: 88px 0 32px; min-height: 100svh; } .hero h1 { margin-top: 16px; } .hero-sub { margin-top: 20px; } .hero-ctas { margin-top: 24px; gap: 12px; } .hero-store-row { margin-top: 20px; gap: 10px; } .hero-art { margin-top: 28px; height: auto; } .hero-device { max-width: 240px; height: auto; aspect-ratio: unset; } .hero-ambient-dot { display: none; } .store-badge { min-width: 0; flex: 1 1 0; padding: 10px 14px; } } /* ---------- No-bank section ---------- A three-column clarity section that sits between the hero and the feature pillars, spelling out how Pesito works without a bank. Glass cards on the warm hueso ground, each with a gold-accented icon chip that picks up the aurora wash behind it. Note: this section exists in HTML for every locale but had no matching CSS before v2 — it was rendering as bare defaults. */ .no-bank { position: relative; background: transparent; } .no-bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .no-bank-item { position: relative; padding: 32px; background: var(--glass-surface-luminous); border: 1px solid var(--glass-edge-luminous); border-radius: var(--glass-radius-md); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(11, 11, 11, 0.03), var(--glass-shadow-md); isolation: isolate; transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .no-bank-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 70% ); z-index: 0; } .no-bank-item > * { position: relative; z-index: 1; } .no-bank-item:hover { transform: translateY(-3px); background: var(--glass-surface-luminous-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(11, 11, 11, 0.04), var(--glass-shadow-lg), var(--halo-verde-sm); } .no-bank-item-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--glass-radius-sm); background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, var(--verde-500) 0%, var(--verde-700) 100%); color: var(--blanco); margin-bottom: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 6px 16px -4px rgba(0, 104, 71, 0.32), 0 0 24px -4px rgba(0, 166, 81, 0.22); } .no-bank-item h3 { font-size: var(--fs-headline); font-weight: 700; color: var(--tinta-900); margin-bottom: 10px; letter-spacing: -0.005em; line-height: 1.25; } .no-bank-item p { color: var(--tinta-500); line-height: 1.55; font-size: var(--fs-body); } @media (max-width: 1023px) { .no-bank-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .no-bank-grid { grid-template-columns: 1fr; } .no-bank-item { padding: 24px; } } /* ---------- Trust strip ---------- */ .trust { position: relative; background: radial-gradient(80vw 40vw at 50% 0%, rgba(0, 166, 81, 0.38) 0%, transparent 60%), radial-gradient(60vw 34vw at 10% 100%, rgba(212, 169, 74, 0.18) 0%, transparent 60%), linear-gradient(180deg, var(--verde-900) 0%, #002A1A 100%); color: var(--blanco); overflow: hidden; isolation: isolate; } .trust::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; mix-blend-mode: overlay; opacity: 0.4; pointer-events: none; z-index: 0; } .trust > * { position: relative; z-index: 1; } /* Legacy `.trust` override (solid verde-900) — retired. */ .trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); padding: 56px 0; } .trust-cell { text-align: center; padding: 0 16px; position: relative; } /* Gradient-fade dividers — fade to transparent at top + bottom so they read as "ruled" rather than hard-cut. Brighter through the middle to catch the aurora bloom. */ .trust-cell + .trust-cell::before { content: ''; position: absolute; left: 0; top: 10%; height: 80%; width: 1px; background: linear-gradient( 180deg, transparent 0%, rgba(212, 169, 74, 0.38) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(212, 169, 74, 0.38) 70%, transparent 100% ); } .trust-value { color: var(--blanco); margin-bottom: 6px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24); } .trust-label { color: rgba(250, 247, 242, 0.78); font-size: var(--fs-caption); letter-spacing: 0.02em; font-weight: 500; } @media (max-width: 768px) { .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 40px 0; } .trust-cell + .trust-cell::before { display: none; } } /* ---------- Generic section header ---------- */ .section-head { text-align: center; margin-bottom: 72px; max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 24px; } .section-head .eyebrow { /* Inline chips already float; just center + add a little breathing room above the big title. */ margin-bottom: 20px; } .section-head h2 { color: var(--tinta-900); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32); } .section-head .kicker { max-width: 560px; margin: 18px auto 0; color: var(--tinta-500); line-height: 1.55; } @media (max-width: 768px) { .section-head { margin-bottom: 48px; } } /* ---------- Pillars ---------- */ .pillars { position: relative; background: transparent; } .pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Feature pillars — glass cards that pick up the body aurora. The extra `::after` pseudo below draws a verde halo ring that intensifies on hover, giving each card a subtle "lit" state. */ .pillar { position: relative; background: var(--glass-surface-luminous); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-edge-luminous); border-radius: var(--glass-radius-md); padding: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(0, 0, 0, 0.03), var(--glass-shadow-sm); isolation: isolate; transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .pillar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 72% ); z-index: 0; } .pillar > * { position: relative; z-index: 1; } .pillar:hover { transform: translateY(-3px); background: var(--glass-surface-luminous-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-md), var(--halo-verde-sm); } /* Each pillar gets a gradient-chip icon — verde for 1/3/4 and oro for 2 (the OXXO-cash pillar) via the dot data-attribute in HTML. Since the HTML doesn't carry a dot today, ALL icons share the verde chip treatment, which reads as more cohesive than v1's pale verde-100 wash. */ .pillar-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--glass-radius-sm); background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, var(--verde-500) 0%, var(--verde-700) 100%); color: var(--blanco); margin-bottom: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 6px 16px -4px rgba(0, 104, 71, 0.32), 0 0 28px -6px rgba(0, 166, 81, 0.26); } /* Second pillar (OXXO-cash): an oro-accent dot appears in the HTML. Re-paint the chip in oro so the warmth bleeds into the surrounding glass. */ .pillar:nth-child(2) .pillar-icon { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, var(--oro-soft) 0%, var(--oro) 100%); color: var(--tinta-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 6px 16px -4px rgba(212, 169, 74, 0.4), 0 0 28px -6px rgba(212, 169, 74, 0.32); } .pillar-title { color: var(--tinta-900); margin-bottom: 8px; } .pillar-body { color: var(--tinta-500); } @media (max-width: 1023px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pillars-grid { grid-template-columns: 1fr; } } /* ---------- How it works (home page mini-version) ---------- */ .how { position: relative; background: transparent; } .how::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60vw 40vw at 50% 50%, rgba(212, 169, 74, 0.08) 0%, transparent 60%), radial-gradient(60vw 40vw at 0% 50%, rgba(0, 166, 81, 0.06) 0%, transparent 60%); } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .how-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; background: var(--glass-surface-luminous); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-edge-luminous); border-radius: var(--glass-radius-md); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.03), var(--glass-shadow-sm); isolation: isolate; transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-standard); } .how-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 72% ); z-index: 0; } .how-card > * { position: relative; z-index: 1; } .how-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-md), var(--halo-verde-sm); } .how-num { font-size: var(--fs-display-m); font-weight: 800; color: transparent; background: linear-gradient(135deg, var(--verde-500) 0%, var(--verde-900) 100%); -webkit-background-clip: text; background-clip: text; line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; filter: drop-shadow(0 2px 8px rgba(0, 104, 71, 0.18)); } .how-title { color: var(--tinta-900); } .how-body { color: var(--tinta-500); } .how-device { width: 120px; aspect-ratio: 9 / 18; margin-top: 8px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--tinta-300); } .how-cta { text-align: center; margin-top: 56px; } @media (max-width: 768px) { .how-grid { grid-template-columns: 1fr; } } /* ---------- App showcase ---------- */ .showcase-band { position: relative; padding: 96px 0; background: transparent; isolation: isolate; } /* Alternate bands pick up a faint warm/cool tint from the aurora behind them, so the rhythm reads as "the stage lighting shifts" rather than "alternating flat colors". */ .showcase-band:nth-child(even)::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient( 60vw 40vw at 30% 50%, rgba(212, 169, 74, 0.08) 0%, transparent 65% ); } .showcase-band:nth-child(odd)::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient( 60vw 40vw at 70% 50%, rgba(0, 166, 81, 0.09) 0%, transparent 65% ); } .showcase-inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; align-items: center; position: relative; } .showcase-copy { grid-column: 2 / span 5; } .showcase-art { grid-column: 8 / span 4; display: flex; justify-content: center; position: relative; } .showcase-band--reverse .showcase-copy { grid-column: 7 / span 5; order: 2; } .showcase-band--reverse .showcase-art { grid-column: 2 / span 4; order: 1; } .showcase-copy h2 { color: var(--tinta-900); margin-top: 16px; } .showcase-copy p { margin-top: 20px; color: var(--tinta-500); max-width: 480px; } /* Showcase device — wrapped in a subtle gold/verde halo so each mockup reads as "picked up by the stage light". The halo sits on a ::before pseudo of .showcase-art so it doesn't fight the device's own crisp 24px rounded frame. */ .showcase-art::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 340px; height: 540px; pointer-events: none; z-index: -1; background: radial-gradient(circle at 50% 50%, rgba(0, 166, 81, 0.28) 0%, transparent 60%), radial-gradient(circle at 60% 48%, rgba(212, 169, 74, 0.18) 0%, transparent 65%); filter: blur(8px); opacity: 0.8; } .showcase-device { width: 280px; aspect-ratio: 9 / 18; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 40px -8px rgba(11, 11, 11, 0.24), 0 36px 80px -20px rgba(0, 61, 38, 0.28), 0 0 60px -12px rgba(0, 166, 81, 0.22); } @media (prefers-reduced-transparency: reduce) { .showcase-band:nth-child(even)::before, .showcase-band:nth-child(odd)::before, .showcase-art::before { display: none; } } @media (max-width: 1023px) { /* Collapse the 12-track grid to a single column on tablet / mobile. Leaving it at `repeat(12, 1fr)` made the 11 inter-column gaps (11 × 40px = 440px) a hard minimum grid width — wider than the viewport on any phone — which forced `.showcase-band` to scroll horizontally. Because the body overflowed, the fixed `.nav` (`left: 0; right: 0`) and `.nav-sheet` (`inset: 0`) inherited the document's scrollable width instead of the layout viewport, so the top chrome and the footer chrome visibly misaligned with the rest of the page on mobile. One track, one gap dimension — no phantom column gaps, no overflow. */ .showcase-inner { grid-template-columns: 1fr; gap: 32px; } .showcase-copy, .showcase-art, .showcase-band--reverse .showcase-copy, .showcase-band--reverse .showcase-art { grid-column: 1 / -1; order: initial; } .showcase-art { margin-top: 0; } } /* ---------- Pricing ---------- The "$0. In every column that matters" section. A verde stage with a gold spotlight bloom behind the headline, glass pill surrounds on the $0 columns, and a subtle paper grain to keep the gradient from reading as flat CSS. */ .pricing { position: relative; background: radial-gradient(85vw 55vw at 50% -14%, rgba(0, 214, 104, 0.28) 0%, transparent 58%), radial-gradient(70vw 48vw at 20% 100%, rgba(212, 169, 74, 0.22) 0%, transparent 62%), radial-gradient(70vw 48vw at 80% 100%, rgba(0, 132, 85, 0.24) 0%, transparent 60%), linear-gradient(180deg, var(--verde-900) 0%, var(--verde-700) 40%, #00583C 100%); color: var(--blanco); text-align: center; overflow: hidden; isolation: isolate; } /* Paper grain for the pricing ground — same recipe as cta-final::before. */ .pricing::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; mix-blend-mode: overlay; opacity: 0.5; pointer-events: none; z-index: 0; } /* Gold spotlight bloom centered behind the headline — mirrors the cta-final gold spotlight so the page's aurora language carries. */ .pricing::after { content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 68vw; max-width: 720px; aspect-ratio: 1; background: radial-gradient( circle, rgba(212, 169, 74, 0.32) 0%, rgba(212, 169, 74, 0.14) 35%, transparent 72% ); pointer-events: none; z-index: 0; filter: blur(1px); } .pricing > * { position: relative; z-index: 1; } .pricing .eyebrow { color: var(--oro-soft); } .pricing .eyebrow::before { background: var(--oro-soft); box-shadow: 0 0 0 3px rgba(212, 169, 74, 0.22); } .pricing h2 { color: var(--blanco); margin-top: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .pricing-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; max-width: 820px; margin-left: auto; margin-right: auto; } /* Each $0 column is now a dark glass pill — the verde ground shows through a translucent tinta surface with an oro edge glow, so the "$0" stack feels like three lit tiles floating over the stage. */ .pricing-col { position: relative; padding: 28px 20px; border-radius: var(--glass-radius-md); background: rgba(11, 11, 11, 0.2); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); border: 1px solid rgba(212, 169, 74, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 8px 24px -8px rgba(0, 0, 0, 0.28), 0 0 40px -8px rgba(212, 169, 74, 0.22); transition: transform var(--dur-fast) var(--ease-emphasized), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .pricing-col:hover { transform: translateY(-2px); background: rgba(11, 11, 11, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 14px 32px -10px rgba(0, 0, 0, 0.36), 0 0 56px -8px rgba(212, 169, 74, 0.32); } /* Retire the v1 divider lines — glass-pill columns make a gap instead, which reads cleaner on the dimensional ground. */ .pricing-col + .pricing-col::before { display: none; } .pricing-amount { font-size: var(--fs-display-l); font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--blanco); font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); } .pricing-label { margin-top: 10px; color: rgba(250, 247, 242, 0.82); font-size: var(--fs-body-l); font-weight: 500; } .pricing-note { margin-top: 48px; max-width: 620px; margin-left: auto; margin-right: auto; font-size: var(--fs-caption); color: rgba(230, 244, 236, 0.72); line-height: 1.6; } @media (max-width: 640px) { .pricing-cols { grid-template-columns: 1fr; gap: 24px; } .pricing-col + .pricing-col::before { display: none; } } /* ---------- Security ---------- */ .security { position: relative; background: transparent; } .security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .security-body { margin-top: 20px; color: var(--tinta-500); max-width: 560px; } .security-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; /* `minmax(0, 1fr)` so the tracks may shrink below their intrinsic content width. Without this, the longest badge label (e.g. the "AES-256-GCM" run, which the browser treats as one unbreakable token) sets a minimum track width, and on narrow viewports the grid spills past the container — which on the /en/ homepage was dragging 2–3px of horizontal overflow into the document. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 520px) { /* Stack badges on a phone. Two-wide at 375–390px cramped the text to ~145px/track once icon + padding + gap were accounted for; the resulting two-line clamp looked like a layout bug rather than a deliberate card. */ .security-badges { grid-template-columns: 1fr; } } .security-badge { position: relative; background: var(--glass-surface-luminous); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-edge-luminous); border-radius: var(--glass-radius-md); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(11, 11, 11, 0.03), var(--glass-shadow-sm); isolation: isolate; transition: transform var(--dur-fast) var(--ease-emphasized), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .security-badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 72% ); z-index: 0; } .security-badge > * { position: relative; z-index: 1; } .security-badge:hover { transform: translateY(-2px); background: var(--glass-surface-luminous-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-md), var(--halo-verde-sm); } .security-badge-icon { color: var(--blanco); flex-shrink: 0; width: 36px; height: 36px; padding: 6px; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, var(--verde-500) 0%, var(--verde-700) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 4px 12px -2px rgba(0, 104, 71, 0.32); } .security-badge-text { font-size: var(--fs-body); color: var(--tinta-900); font-weight: 600; line-height: 1.4; letter-spacing: -0.003em; } @media (max-width: 1023px) { .security-grid { grid-template-columns: 1fr; gap: 40px; } } /* ---------- Audience scenarios ---------- */ .audiences { position: relative; background: transparent; } .audiences::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(58vw 40vw at 22% 50%, rgba(212, 169, 74, 0.1) 0%, transparent 60%), radial-gradient(58vw 40vw at 82% 50%, rgba(0, 166, 81, 0.08) 0%, transparent 60%); } .audiences-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .scenario { position: relative; background: var(--glass-surface-luminous); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-edge-luminous); border-radius: var(--glass-radius-md); padding: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.03), var(--glass-shadow-sm); isolation: isolate; transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .scenario::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 72% ); z-index: 0; } .scenario > * { position: relative; z-index: 1; } .scenario:hover { transform: translateY(-3px); background: var(--glass-surface-luminous-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-md), var(--halo-verde-sm); } .scenario-icon { width: 48px; height: 48px; padding: 10px; margin-bottom: 20px; color: var(--verde-700); border-radius: var(--glass-radius-sm); background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 58%), rgba(0, 166, 81, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 4px 10px -2px rgba(0, 104, 71, 0.16); } .scenario h3 { color: var(--tinta-900); margin-bottom: 10px; letter-spacing: -0.005em; } .scenario p { color: var(--tinta-500); line-height: 1.55; } @media (max-width: 1023px) { .audiences-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .audiences-grid { grid-template-columns: 1fr; } } /* ---------- FAQ ---------- */ .faq { position: relative; background: transparent; } .faq .container { max-width: 780px; position: relative; } .faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 10px; } /* Each FAQ is a glass pill. Closed: a tight glassy row. Open: expands, switches the border stroke to an oro tint, and picks up a warm inner highlight so the answer panel reads as lit from within. */ .faq-item { position: relative; background: var(--glass-surface-luminous); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-edge-luminous); border-radius: var(--glass-radius-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(0, 0, 0, 0.03), var(--glass-shadow-sm); overflow: hidden; transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-emphasized); } .faq-item:hover { transform: translateY(-1px); background: var(--glass-surface-luminous-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(0, 0, 0, 0.03), var(--glass-shadow-md), var(--halo-verde-sm); } .faq-item[open] { background: rgba(255, 253, 248, 0.88); border-color: rgba(212, 169, 74, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 36px -10px rgba(11, 11, 11, 0.12), var(--halo-oro-sm); } .faq-item[open]:hover { transform: none; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: var(--fs-body-l); font-weight: 600; color: var(--tinta-900); cursor: pointer; list-style: none; letter-spacing: -0.005em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--verde-900); } .faq-chev { flex-shrink: 0; transition: transform var(--dur-slow) var(--ease-emphasized); color: var(--tinta-500); } .faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--verde-700); } .faq-answer { padding: 0 24px 22px; color: var(--tinta-500); line-height: 1.65; animation: faq-fade var(--dur-slow) var(--ease-emphasized); } @keyframes faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- FAQ hub (/preguntas, /en/faq) ---------- Editorial-directory layout. The old hub squeezed three white boxes into a 640px `.container.reading` column, creating a 2+1 orphan grid and reading like a generic admin shell rather than Pesito chrome. The new hub treats the page as a book's table of contents: 1. A wide `.container-inner` (1040px) so the three category cards have room to breathe side-by-side on desktop. 2. Big display-font tabular numerals as chapter markers, inked in a verde-700 → oro gradient so each card feels stamped by the brand rather than numbered by a spreadsheet. 3. Three glass cards (the same material family as `.pillar` and `.scenario`) with hover lift + oro hairline + arrow slide. 4. An ambient verde aurora bleeding in from the top-right, mirroring `.how-hero`, so the two "guide" pages read as one chapter family. 5. Most-asked list as a quiet companion strip beneath a single gold capsule ornament — no bolted-on oro-bordered box. ═══════════════════════════════════════════════════════════════ */ .faq-hub { padding: 128px 0 96px; background: radial-gradient( 1200px 600px at 100% -10%, rgba(0, 166, 81, 0.10) 0%, transparent 60% ), var(--hueso); } @media (max-width: 768px) { .faq-hub { padding: 96px 0 64px; } } /* Hero block — breadcrumb, eyebrow, h1, lede. Width-capped so the display title wraps at a readable 2-3 lines rather than stretching across the 1040px container into one long river. */ .faq-hub-head { max-width: 720px; margin-bottom: 72px; } @media (max-width: 768px) { .faq-hub-head { margin-bottom: 48px; } } .faq-hub-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--tinta-500); margin-bottom: 24px; transition: color var(--dur-fast) var(--ease-standard); } .faq-hub-crumb:hover { color: var(--verde-700); } .faq-hub-crumb svg { transition: transform var(--dur-fast) var(--ease-emphasized); } /* Arrow slides LEFT on hover — signalling "going back". Inverse of the forward-arrow pattern used on primary CTAs. */ .faq-hub-crumb:hover svg { transform: translateX(-2px); } .faq-hub-title { margin-top: 16px; color: var(--tinta-900); max-width: 20ch; text-wrap: balance; } .faq-hub-lede { margin-top: 24px; color: var(--tinta-700); max-width: 58ch; } .faq-hub-mail { color: var(--verde-700); text-decoration: underline; text-underline-offset: 2px; } .faq-hub-mail:hover { color: var(--verde-900); } /* Category grid — explicit 3-col so rhythm holds. `auto-fit` would drop to 2+1 on sub-1040px widths, which is the exact "weird orphan" bug the old layout had. Collapse to 1-col at tablet. */ .faq-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 960px) { .faq-hub-grid { grid-template-columns: 1fr; gap: 16px; } } /* Glass category card. Composes the site-wide `.pillar` / `.scenario` glass material: hueso-tinted backdrop, warm hairline stroke, top- specular gradient, hover lift + oro border + deeper shadow. On hover the chapter numeral scales 4% and the CTA arrow slides 4px right. `min-height` keeps all three cards vertically flush even when body copy length varies across categories. */ .faq-category { position: relative; display: flex; flex-direction: column; padding: 36px 32px 28px; background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-edge-stroke-warm); border-radius: var(--glass-radius-md); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(0, 0, 0, 0.03), var(--glass-shadow-sm); isolation: isolate; text-decoration: none; color: inherit; min-height: 260px; transition: transform var(--dur-base) var(--ease-emphasized), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .faq-category::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70% ); z-index: 0; } .faq-category > * { position: relative; z-index: 1; } .faq-category:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.78); border-color: rgba(212, 169, 74, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow-md); } .faq-category:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 3px; } /* Chapter marker — display-font numeric in a verde→oro gradient. Tabular-nums so 01/02/03 share the same advance width; the card grid stays optically aligned no matter which number is shown. Text is clipped to the gradient via background-clip so the same glyph reads as heritage metal, not flat type. */ .faq-category-num { display: inline-block; font-family: var(--font-display); font-size: clamp(56px, 4.6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: linear-gradient( 180deg, var(--verde-700) 0%, var(--verde-500) 55%, var(--oro) 140% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 28px; transition: transform var(--dur-base) var(--ease-emphasized); } .faq-category:hover .faq-category-num { transform: scale(1.04); } .faq-category-title { font-size: var(--fs-headline); font-weight: 700; color: var(--tinta-900); letter-spacing: -0.005em; margin: 0 0 8px; } .faq-category-body { font-size: var(--fs-body-s); color: var(--tinta-500); line-height: 1.55; max-width: 30ch; } /* `margin-top: auto` pushes the CTA to the bottom of the card even when body copy is short, so all three "See questions →" links sit on the same baseline across the grid. */ .faq-category-cta { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-s); font-weight: 600; color: var(--verde-700); letter-spacing: -0.005em; transition: color var(--dur-fast) var(--ease-standard); } .faq-category-cta svg { transition: transform var(--dur-fast) var(--ease-emphasized); } .faq-category:hover .faq-category-cta { color: var(--verde-900); } .faq-category:hover .faq-category-cta svg { transform: translateX(4px); } /* Most-asked strip — a second table of contents for visitors who know what they want to find. Anchored by a single oro capsule ornament at the top-left of the divider rule, which matches the `.eyebrow::before` hairline language elsewhere on the site. */ .faq-hub-most { margin-top: 96px; padding-top: 48px; border-top: 1px solid rgba(212, 169, 74, 0.35); position: relative; } @media (max-width: 768px) { .faq-hub-most { margin-top: 64px; padding-top: 36px; } } .faq-hub-most::before { content: ""; position: absolute; top: -5px; left: 0; width: 48px; height: 9px; background: var(--oro); border-radius: 9999px; box-shadow: 0 0 0 4px rgba(212, 169, 74, 0.14); } .faq-hub-most-head { max-width: 560px; margin-bottom: 32px; } .faq-hub-most-title { margin-top: 12px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; color: var(--tinta-900); letter-spacing: -0.01em; text-wrap: balance; } .faq-hub-most-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; list-style: none; padding: 0; } @media (max-width: 720px) { .faq-hub-most-grid { grid-template-columns: 1fr; gap: 0; } } .faq-hub-most-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; border-bottom: 1px solid rgba(11, 11, 11, 0.08); color: var(--tinta-900); font-weight: 600; font-size: var(--fs-body); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), padding-left var(--dur-fast) var(--ease-emphasized); } /* Hanging arrow — tinta-300 at rest, verde on hover. Slides 4px right on hover while the item itself indents 8px left-padding, creating a subtle pull-toward-you effect. */ .faq-hub-most-item::after { content: "→"; flex-shrink: 0; color: var(--tinta-300); font-weight: 400; font-size: 18px; transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-emphasized); } .faq-hub-most-item:hover { color: var(--verde-900); border-color: var(--verde-500); padding-left: 8px; } .faq-hub-most-item:hover::after { color: var(--verde-500); transform: translateX(4px); } .faq-hub-most-item:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; border-radius: 4px; } /* ---------- Final CTA — "closing-credit boarding card" ---------- A cinematic end-of-page moment. The verde gradient is the stage; a soft gold radial spotlight sits behind the headline; a dotted ornamental constellation anchors the top-right. The waitlist form and the "sign in to the Flutter app" door live side-by-side inside a warm hueso card that feels like a boarding pass rather than a web form — two intentional doors divided by a vertical rule with an "o" chip. The `.waitlist` / `.waitlist-input` / `.waitlist-submit` / `.waitlist-error` / `.waitlist-success` class names are preserved verbatim because `scripts/main.js` (shared with /lista-espera) reads them directly; only the visual treatment changes. The old 3-column grid that wedged the consent text into a narrow lane is gone — consent now lives on its own centered line under the row. -------------------------------------------------------------------- */ .cta-footer-wrap { /* structural wrapper kept in HTML; no visual role */ } .cta-final { position: relative; background: radial-gradient(90vw 60vw at 50% -8%, rgba(0, 214, 104, 0.28) 0%, transparent 60%), radial-gradient(70vw 48vw at 14% 100%, rgba(212, 169, 74, 0.22) 0%, transparent 62%), radial-gradient(70vw 48vw at 86% 110%, rgba(0, 132, 85, 0.28) 0%, transparent 62%), linear-gradient(180deg, #005E3E 0%, var(--verde-700) 48%, var(--verde-900) 100%); color: var(--blanco); padding: 140px 0 120px; overflow: hidden; isolation: isolate; } @media (max-width: 768px) { .cta-final { padding: 88px 0 72px; } } .cta-final::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; opacity: 0.45; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* Gold spotlight behind the headline — bigger, softer, more dimensional than v1. Two stacked gradients (warm oro core + a wider cream halo) so the bloom reads as a real projector rather than a flat gradient. */ .cta-final::after { content: ""; position: absolute; top: -14%; left: 50%; width: 78vw; max-width: 880px; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle at 50% 50%, rgba(233, 211, 154, 0.22) 0%, transparent 55%), radial-gradient(circle at 50% 52%, rgba(212, 169, 74, 0.34) 0%, rgba(212, 169, 74, 0.14) 32%, transparent 70%); pointer-events: none; z-index: 0; filter: blur(2px); animation: cta-spot-breathe 12s ease-in-out infinite; } @keyframes cta-spot-breathe { 0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .cta-final::after { filter: none; animation: none; } } .cta-final-inner { position: relative; z-index: 1; text-align: center; } /* CTA-final eyebrow — the shared dark-section rule above already handles background/border/box-shadow via `.cta-final .eyebrow`. Here we just nudge the dot color specifically (matches the gold spotlight bloom behind the headline). */ .cta-final-eyebrow::before { background: var(--oro-soft); box-shadow: 0 0 0 3px rgba(212, 169, 74, 0.22); } .cta-final h2, .cta-final-title { color: var(--blanco); margin-top: 20px; max-width: 16ch; margin-left: auto; margin-right: auto; } .cta-final-title .oro-dot { color: var(--oro); } .cta-final-sub { margin-top: 20px; color: rgba(250, 247, 242, 0.82); font-size: var(--fs-body-l); line-height: 1.55; max-width: 44ch; margin-left: auto; margin-right: auto; } /* Faint dotted constellation anchoring the top-right corner of the section. Pure CSS — no asset dependency. */ .cta-final-dots { position: absolute; top: 48px; right: 8%; width: 180px; height: 120px; z-index: 0; opacity: 0.35; background-image: radial-gradient(circle, var(--oro-soft) 1px, transparent 1.5px); background-size: 18px 18px; pointer-events: none; mask-image: linear-gradient(135deg, #000 0%, transparent 80%); -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 80%); } @media (max-width: 900px) { .cta-final-dots { display: none; } } /* ----- The dual-door boarding card --------------------------------- */ .finale-card { position: relative; margin: 56px auto 0; max-width: 860px; /* The finale card lives on top of a richly saturated verde gradient. To prevent the verde from bleeding through the glass and tinting the warm hueso surface sage-green, we use: • Higher alpha (0.90 → near-opaque warm white base) • Lower saturation (1.1×, NOT 1.8×) — we still want a trace of the backdrop light, but not enough to visually recolor the card • Controlled brightness (1.0 rather than 1.06) for the same reason The specular/edge lighting are still in ::before/::after. */ background: rgba(252, 249, 244, 0.90); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.1) brightness(1.0); backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.1) brightness(1.0); border: 1px solid rgba(255, 255, 255, 0.62); border-radius: var(--glass-radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 40px -12px rgba(0, 0, 0, 0.32), 0 36px 80px -20px rgba(0, 61, 38, 0.42); display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; text-align: left; color: var(--tinta-900); overflow: hidden; isolation: isolate; } /* Top-edge specular — lit arc on the upper 40%. */ .finale-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 70% ); z-index: 0; } /* Warm verde under-glow — card reads as if the stage lamp behind it is bleeding through from below. */ .finale-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, transparent 65%, rgba(0, 104, 71, 0.08) 100% ); z-index: 0; } .finale-card > * { position: relative; z-index: 1; } .finale-card-half { padding: 40px 40px 36px; display: flex; flex-direction: column; min-width: 0; } .finale-card-half--signin { /* Subtle verde wash on the right half — now the card is near-opaque this tint reads as an intentional color distinction rather than verde bleed-through. Stays gentle (≤8%) for readability. */ background: linear-gradient( 180deg, rgba(0, 104, 71, 0.04) 0%, rgba(0, 104, 71, 0.08) 100% ); } .finale-halflabel { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-500); display: inline-flex; align-items: center; gap: 8px; } .finale-halflabel::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--oro); box-shadow: 0 0 0 3px rgba(212, 169, 74, 0.18); } .finale-card-half--signin .finale-halflabel { color: var(--verde-700); } .finale-card-half--signin .finale-halflabel::before { background: var(--verde-500); box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.18); } .finale-halftitle { margin-top: 12px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; color: var(--tinta-900); text-wrap: balance; } .finale-halfsub { margin-top: 10px; font-size: var(--fs-body); color: var(--tinta-500); line-height: 1.5; max-width: 32ch; } /* ----- Waitlist half (left) ----- */ .finale-waitlist-cta { margin-top: 22px; width: 100%; justify-content: center; } /* Legacy waitlist form rules kept for /lista-espera dedicated page. */ .cta-final .waitlist-error { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--rojo-050); color: var(--rojo-700); font-size: var(--fs-body-s); font-weight: 600; line-height: 1.45; border: 1px solid var(--rojo-200); text-align: left; } .cta-final .waitlist.is-error .waitlist-row { border-color: var(--rojo-500); box-shadow: 0 0 0 4px rgba(206, 17, 38, 0.12); } .cta-final .waitlist-success { display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--verde-100); color: var(--verde-900); font-size: var(--fs-body); font-weight: 600; line-height: 1.45; border: 1px solid rgba(0, 104, 71, 0.15); text-align: left; } .cta-final .waitlist.is-submitting .waitlist-submit { opacity: 0.6; cursor: wait; } .cta-final .waitlist.is-success .waitlist-row, .cta-final .waitlist.is-success .form-consent { display: none; } /* `~` rather than `+` — a `.waitlist-error` element may sit between the form and the success banner, so adjacent-sibling would miss. */ .cta-final .waitlist.is-success ~ .waitlist-success { display: block; } /* ----- Sign-in half (right) ----- */ /* The "o / or" rule: a 1px vertical line with the chip dropped over the middle. `overflow: visible` lets the chip extend past the 1px column; the chip's own hueso background covers the rule underneath so it reads as a break, not a layered label. */ .finale-card-rule { position: relative; width: 1px; margin: 32px 0; background: linear-gradient( 180deg, transparent 0%, rgba(11, 11, 11, 0.14) 20%, rgba(11, 11, 11, 0.14) 80%, transparent 100% ); display: flex; align-items: center; justify-content: center; overflow: visible; } .finale-card-rule span { padding: 6px 8px; /* Match the card's near-white surface so the chip reads as a natural break in the divider line, not a floating label. */ background: #faf8f4; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-500); white-space: nowrap; } .finale-signin-cta { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 14px 18px 14px 22px; border-radius: var(--glass-radius-pill); /* Dark glass pill — tint-900 with a 60% layer and a saturate-2x backdrop so the verde behind the card modulates through. A 1px top-highlight makes it read as a "lit" jet-black surface, not flat paint. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #0e0e11 0%, #050506 100%); color: var(--hueso); font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.005em; align-self: flex-start; border: 1px solid rgba(255, 255, 255, 0.08); transition: transform var(--dur-fast) var(--ease-emphasized), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1), 0 10px 24px -6px rgba(0, 0, 0, 0.45); } .finale-signin-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.12), 0 18px 32px -10px rgba(0, 0, 0, 0.55); } .finale-signin-cta:active { transform: scale(0.98); } .finale-signin-cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%), var(--app-green); color: var(--tinta-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 214, 50, 0.35); transition: transform var(--dur-fast) var(--ease-emphasized); } .finale-signin-cta:hover .finale-signin-cta-arrow { transform: translateX(3px); } .finale-signup-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: var(--fs-caption); font-weight: 600; color: var(--verde-700); text-decoration: none; align-self: flex-start; transition: color var(--dur-fast) var(--ease-standard); } .finale-signup-link svg { transition: transform var(--dur-fast) var(--ease-emphasized); } .finale-signup-link:hover { color: var(--verde-900); } .finale-signup-link:hover svg { transform: translateX(2px); } /* ----- Store badges row (under the card) ----- */ .finale-stores { margin: 28px auto 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .finale-store { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 16px; border-radius: var(--glass-radius-pill); background: rgba(11, 11, 11, 0.32); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 24px -8px rgba(0, 0, 0, 0.35); color: var(--hueso); transition: transform var(--dur-fast) var(--ease-emphasized), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); min-width: 172px; } .finale-store:hover { transform: translateY(-1px); background: rgba(11, 11, 11, 0.44); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.14), 0 18px 32px -10px rgba(0, 0, 0, 0.45); } .finale-store-glyph { width: 22px; height: 22px; flex: 0 0 auto; } .finale-store-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .finale-store-text span { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250, 247, 242, 0.7); } .finale-store-text strong { font-size: 14px; font-weight: 700; color: var(--hueso); letter-spacing: -0.005em; } /* ----- Trust strip ----- */ .cta-final-trust { margin: 28px auto 0; max-width: 640px; font-size: var(--fs-caption); color: rgba(250, 247, 242, 0.6); line-height: 1.6; text-align: center; } .cta-final-trust strong { color: rgba(250, 247, 242, 0.85); font-weight: 600; } .cta-final-trust .cta-trust-dot { display: inline-block; margin: 0 8px; color: var(--oro); opacity: 0.7; } /* ----- Responsive collapse ----- */ @media (max-width: 860px) { .finale-card { grid-template-columns: 1fr; max-width: 480px; } .finale-card-half { padding: 32px 28px 28px; } .finale-halfsub { max-width: none; } .finale-card-rule { width: auto; height: 1px; margin: 0 28px; background: linear-gradient( 90deg, transparent 0%, rgba(11, 11, 11, 0.12) 20%, rgba(11, 11, 11, 0.12) 80%, transparent 100% ); } .finale-card-rule span { position: static; } .finale-signin-cta { width: 100%; justify-content: space-between; } } @media (max-width: 520px) { .finale-card { margin-top: 36px; border-radius: var(--glass-radius-md); } .finale-card-half { padding: 28px 20px 24px; } .finale-stores { gap: 8px; } .finale-store { flex: 1 1 0; min-width: 0; padding: 10px 14px; justify-content: center; } .finale-halftitle { font-size: clamp(20px, 5.5vw, 24px); } } /* ---------- Footer ---------- */ .footer { position: relative; background: #000; color: var(--hueso); padding: 88px 0 40px; overflow: hidden; } .footer::after { content: none; } .footer::before { content: none; } .footer > * { position: relative; z-index: 1; } @media (max-width: 768px) { .footer { padding: 56px 0 32px; } .footer-bottom { margin-top: 40px; flex-direction: column; align-items: flex-start; } } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .footer-col h4 { font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250, 247, 242, 0.6); margin-bottom: 16px; } .footer-col a { display: block; padding: 6px 0; font-size: var(--fs-body); color: var(--hueso); transition: color var(--dur-fast) var(--ease-standard); } .footer-col a:hover { color: var(--verde-300); } .footer-bottom { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(250, 247, 242, 0.1); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-mouseprint { margin-top: 24px; font-size: var(--fs-caption); color: rgba(250, 247, 242, 0.5); line-height: 1.6; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.05); color: rgba(250, 247, 242, 0.7); } .footer-social a:hover { color: var(--verde-300); background: rgba(255, 255, 255, 0.08); } @media (max-width: 1023px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr; } } /* ---------- Wordmark (inline SVG-free, just type) ---------- */ .wordmark { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: -0.03em; color: var(--verde-700); } .wordmark-dot { width: 6px; height: 6px; background: var(--oro); border-radius: 50%; margin-left: 3px; align-self: flex-end; margin-bottom: 6px; } .wordmark--on-dark { color: var(--hueso); } /* Brand mark: the app icon + Pesito wordmark lockup used in chrome (nav + footer). The icon has its own identity — bright grass-green gradient + peso-₱ glyph — so the heritage `--verde-700` of the wordmark needs to drop one step to avoid clashing with the brighter green beside it. That's what `.brand-mark-text` does. */ .brand-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand-mark-icon { width: 32px; height: 32px; display: block; flex-shrink: 0; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 104, 71, 0.18); } /* Only the NAV's brand icon is a shared element across navigations. `view-transition-name` must be globally unique per document, so we intentionally scope this to `.nav .brand-mark-icon`. If you ever render a second brand-mark inside the page body, it'll simply not participate in the cross-document morph (still works visually). */ .nav .brand-mark-icon { view-transition-name: brand-icon; } .brand-mark-icon--sm { width: 26px; height: 26px; border-radius: 6px; } .brand-mark-text { font-weight: 800; letter-spacing: -0.025em; color: var(--tinta-900); } .nav .brand-mark-text { view-transition-name: brand-text; } .brand-mark--on-dark .brand-mark-text { color: var(--hueso); } @media (max-width: 480px) { .brand-mark-icon { width: 28px; height: 28px; border-radius: 6px; } } /* ---------- Reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-deliberate) var(--ease-emphasized), transform var(--dur-deliberate) var(--ease-emphasized); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ---------- Legal documents (privacidad, terminos, en/privacy, en/terms) ---- Shared typography + callout vocabulary so legal pages don't each ship their own inline `