/* =========================================================================== Pesito — Marketing site, single source of truth for styles. Palette (2026-07-16, Lotería): traditional Mexican Lotería card language — flat, bright, highly saturated hues (verde, amarillo, azul cobalto, rosa mexicano, coral), every colored surface outlined in near-black ink, on warm cream card stock. Supersedes the 2026-07-11 mono-verde rationalization; the editorial panel system stays, recolored. Rojo survives ONLY as the semantic negative (errors, legal notices, comparison "cons"); festive warmth comes from coral/rosa/amarillo instead, so error-red keeps its meaning. Source of truth: docs/design-system/MASTER.md (contrast-validated). Design tokens started from docs/website-prompt.md §3–§4. =========================================================================== */ :root { /* ═════════════════════════════════════════════════════════════════ THEMING MODEL — 2026-08 (dark mode + high contrast). Every neutral is declared twice: a plain light value first, then the same token restated with `light-dark()`. Engines that don't know `light-dark()` (pre-2024) drop the second declaration and keep the light site exactly as it shipped; everything else resolves against the element's `color-scheme`, which `html` sets to `light dark` and the `data-theme` attribute pins. The dark theme is not a separate skin — it is the SAME Lotería grammar inverted: flat saturated fills inside a BONE frame on warm ink card stock, instead of inside a black frame on warm cream card stock. That is why the saturated hues below carry a single value: verde, amarillo, cobalto, rosa and coral are the deck, and the deck does not change color when you turn the lights off. Only the paper and the ink swap. ═════════════════════════════════════════════════════════════ */ /* Color tokens — the verde ladder */ --verde-900: #003D26; --verde-700: #006847; --verde-500: #00A651; --verde-300: #6FCF97; /* The two lightest rungs are TINTS (surfaces), not fills, so they invert with the paper. */ --verde-100: #DFF2E7; --verde-100: light-dark(#DFF2E7, #0A2B1A); --verde-050: #F4FAF6; --verde-050: light-dark(#F4FAF6, #0A2015); /* Semantic negative only — never decorative. 700/500 are type, 200/100/050 are surfaces; both ends invert. */ --rojo-700: #A50F20; --rojo-700: light-dark(#A50F20, #FDA19B); --rojo-500: #CE1126; --rojo-500: light-dark(#CE1126, #F66D67); --rojo-200: #F7C9CE; --rojo-200: light-dark(#F7C9CE, #4B1D1B); --rojo-100: #FBD8DC; --rojo-100: light-dark(#FBD8DC, #3B1816); --rojo-050: #FDECEE; --rojo-050: light-dark(#FDECEE, #2B1311); /* `--blanco` is the RAISED surface (cards, open FAQ rows, the calculator), one step brighter than the canvas — not "the color white". In dark it is the one step lighter than the ink stock. */ --blanco: #FFFFFF; --blanco: light-dark(#FFFFFF, #2E2921); /* Canvas + band neutrals: warm cream — Lotería card stock. */ --hueso: #FAF7F2; --hueso: light-dark(#FAF7F2, #14100A); /* 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-100: light-dark(#F6F3EB, #201C16); --hueso-200: #F2EEE0; --hueso-200: light-dark(#F2EEE0, #2E2921); --crema: #F2EEE6; --crema: light-dark(#F2EEE6, #211C14); /* Ink ramp — neutral; tinta-900 doubles as the Lotería outline. Dark values are warm bone, not pure white: a #FFF frame on near -black halates against the saturated fills. */ --tinta-900: #0B0B0B; --tinta-900: light-dark(#0B0B0B, #F7F1E6); --tinta-700: #2A2A2E; --tinta-700: light-dark(#2A2A2E, #DCD7CD); --tinta-500: #55555C; --tinta-500: light-dark(#55555C, #B3ADA3); /* `--tinta-400` 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. Held at ≥4.5:1 on hueso. */ --tinta-400: #62626A; --tinta-400: light-dark(#62626A, #A49E94); --tinta-300: #C7C7CC; --tinta-300: light-dark(#C7C7CC, #413C35); /* Lotería accents — flat, saturated, always inside an ink outline. Contrast pairs validated in docs/design-system/MASTER.md: ink type on amarillo/coral/verde-500; white type on azul-700/ verde-700/rosa. Rosa-600 is the body-copy-safe rosa. */ --amarillo-500: #FFC400; --azul-700: #0A45A6; --rosa-500: #E4007C; --rosa-600: #C4006B; --coral-500: #FF5A36; --lila-300: #C7B9F2; --app-green: #00D632; /* The green period that closes the hero headline. Deep verde reads as ink-adjacent on cream but sinks into a near-black canvas, so dark mode steps it up to the app green. */ --brand-dot: #006847; --brand-dot: light-dark(#006847, #00CC64); /* Brand green wherever it has to behave like TYPE or an ICON rather than a fill: the wordmark, and every stroked glyph on a card. `--verde-700` is 5.3:1 on cream but only 1.9:1 on ink stock, which is what made the logo look washed out in dark mode. Mint is the same hue family read at the other end of the ramp — 10.7:1 there. Calmer than `--brand-dot` on purpose: the dot is punctuation and wants to pop, a row of six icons does not. */ --accent-verde: #006847; --accent-verde: light-dark(#006847, #6FCF97); /* Hover/emphasis step for accent-verde text: darker in light, lighter in dark. */ --accent-verde-strong: light-dark(#003D26, #9ADFB8); /* Environment fills for LARGE surfaces (panels, bars) — dark mode pulls the three loud Lotería fields down a step so a full-width card is festive, not glaring, on the near-black canvas. Small pops (chips, rail cards, footer cells, buttons) keep the bright values: tiny areas carry brightness well; big fields don't. Ink stays >=4.5:1 on every deepened fill (verde 4.9, amarillo 9.4); white reads 10.4:1 on the deep cobalt. */ /* Plain hex first, light-dark() second: browsers without light-dark() (Safari ≤16 — real devices in the remittance-sender demographic) drop the second declaration and keep the light hex, so the big editorial panels never lose their fill under their fixed-white ink. The dark values are restated in the dark-theme blocks at the bottom of this file for those same engines. */ --fill-verde-vivo: #00A651; --fill-amarillo: #FFC400; --fill-azul: #0A45A6; --fill-verde-vivo: light-dark(#00A651, #0C9247); --fill-amarillo: light-dark(#FFC400, #E7B41E); --fill-azul: light-dark(#0A45A6, #05378C); /* ---- Theme-invariant ink pair ------------------------------- The dark theme flips the neutral ramp (`--tinta-*` becomes light, `--hueso`/`--blanco` become dark) so 4k lines of surface + outline rules retheme with no markup surgery. The ONE thing that must not flip is type that sits on a saturated Lotería fill: verde-500 and amarillo-500 stay bright in both themes, so their label stays near-black; azul-700, verde-700 and rosa stay deep, so their label stays white. Rule of thumb when adding CSS: • foreground on a BRIGHT fill → var(--ink-fixed) • foreground on a DEEP fill → var(--paper-fixed) • everything else → var(--tinta-*) / var(--hueso) */ --ink-fixed: #0B0B0B; --paper-fixed: #FFFFFF; /* ---- Hairlines ---------------------------------------------- Sub-outline dividers (table rows, sheet links, card edges). Declared as tokens because a literal rgba(0,0,0,0.06) is invisible on a dark canvas. The 2px Lotería outline is `--panel-border`; these are the quiet rules underneath it. */ --hairline: rgba(11, 11, 11, 0.09); --hairline: light-dark(rgba(11, 11, 11, 0.09), rgba(246, 242, 232, 0.14)); --hairline-strong: rgba(11, 11, 11, 0.16); --hairline-strong: light-dark(rgba(11, 11, 11, 0.16), rgba(246, 242, 232, 0.24)); /* ---- Canvas ------------------------------------------------- The page ground, built from color tokens so the gradient itself needs no theme-specific restatement. */ --canvas-top: #FBF9F4; --canvas-top: light-dark(#FBF9F4, #19150F); --canvas-bottom: #F4EFE6; --canvas-bottom: light-dark(#F4EFE6, #0E0B06); --canvas: linear-gradient(180deg, var(--canvas-top) 0%, var(--hueso) 40%, var(--canvas-bottom) 100%); /* Grain is a blend mode + opacity, not a color, so it is the one thing `light-dark()` can't carry — the theme block near the bottom of this file restates it. */ --grain-opacity: 0.55; --grain-blend: overlay; /* 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(). Display ceiling per accessibility/typography guidance: ≤ ~92px. */ --fs-display-xxl: clamp(44px, 6.2vw, 92px); --fs-display-xl: clamp(38px, 4.9vw, 72px); --fs-display-l: clamp(32px, 4vw, 58px); --fs-display-m: clamp(26px, 3vw, 42px); --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; --container-pad: 24px; /* Fluid section rhythm (2026-08-26): min at 375px, max at ~1430px, one clamp instead of a @media step - no 56px cliff at 768px. The ed-layer's --panel-pad/--panel-gap set the precedent; these carry the legacy shells. */ --space-section: clamp(72px, 9vw, 128px); --space-section-head: clamp(48px, 5vw, 72px); /* Measure for type that sits outside the reading column. Capped in `ch` so each cap tracks its own type size, and not shared between the two roles: a 58px poster headline and 13px fine print reach the same physical column at very different character counts, so one value would leave the headline in three-word lines or the fine print at 120 characters. Running body copy uses `--reading-max` instead — it shares a column with images and cards, so it needs to agree with them in pixels rather than characters. */ --measure-display: 26ch; /* poster headline; text-wrap: balance does the rest */ --measure-note: 84ch; /* fine print, ≈ the prose column physically */ /* 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; --dur-entrance: 620ms; --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); --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* ═════════════════════════════════════════════════════════════════ 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). */ --glass-blur-nav: 28px; --glass-blur-nav-scrolled: 40px; --glass-saturate-nav: 1.92; /* Floating nav capsule material (2026-08-26). Both themes are their own glass: light = hueso-tinted white with warm white edge light; dark = deep smoked glass with a faint cool edge. The old single material painted white lighting over dark content and let the 1.92x saturation smear whatever hue scrolled beneath — dark mode backs saturation off to a whisper and drops the brightness lift entirely (brightening blacks reads as haze, not glass). */ --nav-glass-tint: light-dark(rgba(250, 247, 242, 0.5), rgba(23, 20, 16, 0.52)); --nav-glass-edge: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.14)); --nav-glass-edge-strong: light-dark(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.2)); --nav-glass-edge-under: light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); --nav-glass-ring: light-dark(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.07)); --nav-glass-ring-strong: light-dark(rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.1)); --nav-glass-specular: light-dark(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.07)); --nav-glass-vignette: light-dark(rgba(11, 11, 11, 0.03), rgba(0, 0, 0, 0.18)); --nav-glass-drop: light-dark(rgba(11, 11, 11, 0.16), rgba(0, 0, 0, 0.55)); --nav-glass-drop-scrolled: light-dark(rgba(11, 11, 11, 0.24), rgba(0, 0, 0, 0.7)); /* Non-color knobs can't ride light-dark(); the dark theme blocks near the end of this file override them. */ --nav-glass-saturate: 1.6; --nav-glass-saturate-scrolled: 1.85; --nav-glass-brightness: 1.05; /* Surface tints — layered ON TOP of whatever the backdrop filter reveals. Hueso-biased (green-tinted white) so the glass belongs to the brand, not generic Apple-on-white. */ --glass-surface-light: rgba(250, 247, 242, 0.62); --glass-surface-light: light-dark(rgba(250, 247, 242, 0.62), rgba(28, 24, 20, 0.66)); --glass-surface-regular: rgba(250, 247, 242, 0.36); --glass-surface-regular: light-dark(rgba(250, 247, 242, 0.36), rgba(28, 24, 20, 0.44)); --glass-surface-clear: rgba(255, 255, 255, 0.12); --glass-surface-chrome: rgba(250, 247, 242, 0.74); --glass-surface-chrome: light-dark(rgba(250, 247, 242, 0.74), rgba(21, 18, 14, 0.8)); --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. 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); /* 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 --------------------- Verde-only: light on this site is always green light. */ --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-menta-core: rgba(111, 207, 151, 0.22); --aurora-menta-soft: rgba(111, 207, 151, 0.12); --aurora-cream: rgba(233, 242, 236, 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); /* ---- 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(250, 254, 251, 0.66); --glass-surface-luminous: light-dark(rgba(250, 254, 251, 0.66), rgba(32, 28, 23, 0.7)); --glass-surface-luminous-strong: rgba(250, 254, 251, 0.82); --glass-surface-luminous-strong: light-dark(rgba(250, 254, 251, 0.82), rgba(32, 28, 23, 0.86)); --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. */ /* Light aurora — soft verde top-left, menta mid-right. The default for hero + hueso sections. Verde-only light. */ --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-menta-soft) 0%, transparent 60%), linear-gradient(180deg, var(--canvas-top) 0%, var(--hueso) 50%, var(--canvas-bottom) 100%); /* Cool verde shell — for the pricing / CTA sections that live on a verde ground. Bright-green 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-menta-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 bloom 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 { /* Smooth anchor scrolling is a vestibular trigger, so it is opt-in on the preference rather than unconditional. `main.js` already forces 'instant' for the scrolls it drives; this covers the ones it doesn't (native fragment navigation, back/forward restore, no-JS). */ scroll-behavior: smooth; scroll-padding-top: 80px; /* Drives both the UA chrome (form controls, scrollbars, the pre-paint canvas) AND every `light-dark()` token above. With no `data-theme` attribute the OS preference wins, so dark mode works with JavaScript disabled; the toggle pins it per-visitor by writing `data-theme="light|dark"` onto this element. */ color-scheme: light dark; /* Never let mobile Safari inflate type on rotate — the fluid clamp() scale already handles small viewports, and the browser's own adjustment fights the 200%-zoom requirement (WCAG 1.4.4). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 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: var(--canvas); 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 • menta mid-right (96% 22%) — lighter 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 • verde bottom-right (108% 112%) — trace echo, closes the loop 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. */ /* Lotería (2026-07-16): the aurora is retired. Folk-art flatness means the canvas is plain card stock — no atmospheric blooms. The grain overlay below stays (it reads as paper, not atmosphere). The rule is kept as a disabled stub so the bloom stack can be recovered from git if a future direction wants it. */ body::after { content: none; } /* 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: var(--grain-opacity); mix-blend-mode: var(--grain-blend); } /* 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/InterVar-latin.woff2') format('woff2-variations'); } /* ---------- Utilities ---------- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .container-inner { width: 100%; max-width: var(--container-inner); margin: 0 auto; padding: 0 var(--container-pad); } .reading { width: 100%; max-width: var(--reading-max); margin: 0 auto; } /* ---------- The article column ---------- `.reading` centres a 640px column inside whatever wrapper holds it. On a page whose hero, related links, and footer all sit in a 1200px `.container`, those auto margins pushed the prose ~200px to the right of everything else, so one page carried three competing left edges and read as unrelated grids stacked on each other. `.article-col` keeps the 640px measure and drops the re-centring: the column spans its wrapper and the measure moves onto the children, so the prose starts on the wrapper's own text edge. `--inset` adds a panel's worth of padding for pages that open with a card hero, whose copy starts one `--panel-pad` in from the container edge. Cards, grids, and tables are exempt: they carry their own inner padding and their own text caps, and squeezing a three-column comparison table into a prose measure is what made those tables unreadable in the first place. `.ed-panel--prose` is the same contract for copy that lives inside a full-bleed card, so a legal page and a story page share one geometry whether or not the prose wears a frame. */ .article-col > :not(.ed-panel, .ed-grid, .ed-bar, .faq-list, table), .ed-panel--prose > * { max-width: var(--reading-max); } /* The border counts: a card's copy starts past its frame as well as its padding, so dropping the 2px leaves the column a hair off the hero. */ .article-col--inset { padding-inline-start: calc( var(--container-pad) + var(--panel-border-width) + var(--panel-pad) ); } /* A poster headline carries a wider deck than the copy under it. Capped on the display ladder only, never on a bare `h1`/`h2`: the ladder is always large, so a character count converts to a sane column, while a bare `h2` can be 24px, where the same count is a 370px ribbon. */ .article-col > :is(.display-xxl, .display-xl, .display-l, .display-m), .ed-panel--prose > :is(.display-xxl, .display-xl, .display-l, .display-m) { max-width: var(--measure-display); } /* Prose lists. The `ul, ol` reset near the top of this file strips markers, padding, and margins so that nav rows and card grids can be lists; running copy needs all three back. Without a marker or a gap the items merge into one block, and the 24px indent they carry is then a second left edge with nothing to explain it. `en/licenses` had already been patched by hand with an inline `list-style: disc`, and this is that fix generalised. `revert` rather than `disc` so an `
    ` still numbers itself. */ .article-col :is(ul, ol), .ed-panel--prose :is(ul, ol), .legal-body :is(ul, ol) { list-style: revert; padding-left: 24px; } .article-col :is(ul, ol) > li + li, .ed-panel--prose :is(ul, ol) > li + li, .legal-body :is(ul, ol) > li + li { margin-top: 8px; } /* A note that qualifies a row of cards is still body copy, so it starts on the page's copy edge rather than on the cards' frame edge. Keyed on both locales' class names because the two homepages carry the same construct under different names, and that is exactly how they drifted apart in the first place. */ .ed-chips + .plan-note, .ed-chips + .trust-note { margin-inline-start: calc(var(--panel-border-width) + var(--panel-pad)); max-width: var(--measure-note); } /* 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 menta so it reads as a lit ornament on the verde 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(111, 207, 151, 0.4); color: var(--verde-300); 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(0, 166, 81, 0.24); } /* Display classes — heroic type. Tracking and leading are paired with font-size on the same rung and never shared across rungs: letterforms read too loose as they grow and too tight as they shrink, so each step down the ladder loosens tracking and opens leading. The editorial layer swaps the family to Archivo Black but inherits this ladder, which is why the negative tracking is gentler than an Inter-era scale would want — a heavy grotesque is already tight at display sizes. */ .display-xxl { font-family: var(--font-display); font-size: var(--fs-display-xxl); font-weight: 800; letter-spacing: -0.025em; 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.02em; line-height: 1.0; text-wrap: balance; } .display-l { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: 800; letter-spacing: -0.015em; 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.01em; 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 green dot is Pesito's signature — used sparingly on headlines and paragraph breaks. (Renamed from .brand-dot in the 2026-07-11 palette rationalization: the punctuation is now brand verde.) */ .brand-dot { color: var(--brand-dot); 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); padding: 4px 0; max-width: 56ch; text-wrap: pretty; } .pullquote::before { content: "“"; display: block; font-style: normal; font-weight: 800; font-size: 1.6em; line-height: 0.6; color: var(--verde-500); margin-bottom: 8px; } .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: var(--space-section) 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(--paper-fixed); 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-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 — mint → verde → teal 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.95 0.08 145) -5%, /* pale mint */ oklch(0.9 0.17 152), /* brand verde */ oklch(0.88 0.15 172) 65%, /* teal-verde */ oklch(0.92 0.08 195) 140% /* cool aqua 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.97 0.07 145) -5%, oklch(0.95 0.16 150), oklch(0.93 0.2 170) 65%, oklch(0.95 0.1 200) 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); } /* Light/brand-colored buttons — mint→verde→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; } /* 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); } /* ---- 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; } /* 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; } } /* 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); } } /* Honor prefers-reduced-transparency (macOS/iOS accessibility toggle). */ @media (prefers-reduced-transparency: reduce) { .glass { background: var(--hueso); } .glass::before, .glass::after { display: none; } } /* ---------- Navigation ---------- Apple macOS 26 / iOS 26 "Tahoe" Liquid Glass chrome. Two things make this a real pane of glass rather than a CSS frost effect: 1. 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. ponytail: the SVG feTurbulence warp (`url(#nav-liquid-glass)` chained into backdrop-filter, injected by a since-deleted `injectNavGlassFilter` IIFE in scripts/main.js) cost 5x scroll frame time over the hero video — it forces software filtering on every scroll frame. Plain GPU-composited blur is the ceiling here; don't reintroduce the url() component. 2. 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: 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, thickens the tint to ~72% chrome, intensifies every inset, and pops the hair-thin bottom divider. */ /* Floating Liquid Glass capsule (2026-08-26). The nav detaches from the viewport edge into a rounded pill that content scrolls UNDER — a floating functional layer, not a consumed strip. Every lighting value is theme-aware: dark mode is its own dark glass (deep tint, gentler saturation boost, no brightness lift, faint top edge light), never the light material's white film over dark content. */ .nav { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); left: 12px; right: 12px; margin-inline: auto; max-width: var(--container-max); z-index: 100; height: 68px; border-radius: 999px; overflow: clip; background: var(--nav-glass-tint); -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--nav-glass-saturate)) brightness(var(--nav-glass-brightness)); backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--nav-glass-saturate)) brightness(var(--nav-glass-brightness)); /* Edge-light stack: a bright top hairline (light catching the material), a soft inner ring (the etched lip), and an ambient drop that gives the capsule float. All themed. */ box-shadow: inset 0 1px 0 var(--nav-glass-edge), inset 0 -1px 0 var(--nav-glass-edge-under), inset 0 0 3px 1px var(--nav-glass-ring), 0 8px 24px -14px var(--nav-glass-drop); transition: background 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 capsule. Visible at rest so the nav always reads as lit glass, 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, var(--nav-glass-specular) 0%, transparent 100% ); opacity: 0.55; transition: opacity var(--dur-base) var(--ease-standard); z-index: 0; } /* Bottom vignette — gives the capsule weight against what scrolls beneath it. */ .nav::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none; background: linear-gradient( 180deg, transparent 0%, var(--nav-glass-vignette) 100% ); opacity: 0.5; transition: opacity var(--dur-base) var(--ease-standard); z-index: 0; } /* Scroll: the material thickens — deeper tint, more blur, heavier drop — so the same surface reads as gaining substance, not as a different bar fading in. */ .nav.nav--scrolled { background: var(--glass-surface-chrome); -webkit-backdrop-filter: blur(var(--glass-blur-nav-scrolled)) saturate(var(--nav-glass-saturate-scrolled)) brightness(var(--nav-glass-brightness)); backdrop-filter: blur(var(--glass-blur-nav-scrolled)) saturate(var(--nav-glass-saturate-scrolled)) brightness(var(--nav-glass-brightness)); box-shadow: inset 0 1px 0 var(--nav-glass-edge-strong), inset 0 -1px 0 var(--nav-glass-edge-under), inset 0 0 3px 1px var(--nav-glass-ring-strong), 0 16px 40px -18px var(--nav-glass-drop-scrolled); } .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 a half tint is too transparent to read as chrome; lift to near-opaque. The reduced- transparency variant goes frosty-solid with a defined hairline — accessibility trumps aesthetics; the capsule shape stays. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav { /* Plain color first: the engines that lack backdrop-filter are exactly the ones that may lack light-dark() too — without this line the whole declaration drops and the fallback is inert. */ background: rgba(250, 247, 242, 0.96); background: light-dark(rgba(250, 247, 242, 0.96), rgba(24, 21, 17, 0.96)); box-shadow: inset 0 1px 0 var(--nav-glass-edge), 0 8px 24px -14px var(--nav-glass-drop); } .nav.nav--scrolled { background: var(--hueso); } } @media (prefers-reduced-transparency: reduce) { .nav { background: var(--hueso); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--hairline-strong); box-shadow: 0 8px 24px -14px var(--nav-glass-drop); } .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. */ /* Theme-aware: light = milky glass chip; dark = a recessed smoked well inside the capsule. The old hardcoded white chip made the dark theme's pale inactive label (tinta-500) sit on milky white at ~1.6:1 - the unreadable ES next to an active EN. */ background: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08)); border: 1px solid light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.14)); box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.08)), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.3)); 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; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; 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); } /* Drawn flags of the Americas (inline SVG — emoji flags render as bare letter pairs on Windows). A hairline keeps the white Canadian field visible on light surfaces and the dark canton visible on dark ones. */ .lang-flag { display: block; flex: none; border-radius: 2.5px; box-shadow: 0 0 0 0.5px light-dark(rgba(26, 18, 6, 0.22), rgba(255, 255, 255, 0.25)); } /* Five-language dropdown for the nav (landing pages). A native
    : tap toggles it with no JS (mobile), main.js adds hover-open on fine pointers plus outside-click and Escape to close. The panel materializes from its trigger (transform-origin at the summary) and drops the motion under prefers-reduced-motion. */ .lang-menu { position: relative; } /* The nav capsule clips its contents (overflow: clip) to keep the glass edges clean — which would also clip the dropdown panel. Un-clip only while the menu is open; the capsule's own contents never overflow, so nothing else changes. */ .nav:has(details.lang-menu[open]) { overflow: visible; } .lang-menu summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--fs-caption); font-weight: 600; color: var(--tinta-900); cursor: pointer; list-style: none; background: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08)); border: 1px solid light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.14)); box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.08)), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.3)); 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)); } .lang-menu summary::-webkit-details-marker { display: none; } .lang-menu summary:active { transform: scale(0.97); } .lang-menu .lang-menu-chev { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); } .lang-menu[open] .lang-menu-chev { transform: rotate(180deg); } .lang-menu ul { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; margin: 0; padding: 6px; list-style: none; min-width: 176px; z-index: 60; background: light-dark(rgba(255, 252, 245, 0.92), rgba(28, 26, 23, 0.92)); border: 1px solid light-dark(rgba(26, 18, 6, 0.12), rgba(255, 255, 255, 0.14)); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); transform-origin: top center; animation: lang-menu-in 170ms cubic-bezier(0.2, 0, 0, 1); } @keyframes lang-menu-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lang-menu ul { animation: none; } .lang-menu .lang-menu-chev { transition: none; } .lang-menu summary:active { transform: none; opacity: 0.8; } } .lang-menu ul a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--tinta-900); font-weight: 600; font-size: var(--fs-caption); } .lang-menu ul a:hover { background: light-dark(rgba(26, 18, 6, 0.06), rgba(255, 255, 255, 0.08)); } .lang-menu ul a[aria-current="true"] { font-weight: 800; } .lang-menu ul a[aria-current="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-500); } /* Very small phones: the nav capsule runs out of room and starts clipping its own controls. The pill compacts to flag + chevron (the flag is the mode's identity here) and the spacing tightens. */ @media (max-width: 419.98px) { .lang-menu .lang-menu-code { display: none; } .lang-menu summary { padding: 7px 9px; } .nav-actions { gap: 8px; } .nav-inner { gap: 14px; } } /* Fold-class widths (Galaxy Fold cover screen is 280px): the wordmark text yields and the app icon carries the brand. */ @media (max-width: 339.98px) { .brand-mark-text { display: none; } } /* 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"], .lang-toggle[data-preview="pt"] a[data-lang="pt"], .lang-toggle[data-preview="nah"] a[data-lang="nah"], .lang-toggle[data-preview="fr"] a[data-lang="fr"] { color: var(--blanco); } .lang-toggle[data-preview]:not([data-preview="es"]) a[data-lang="es"].lang-toggle--active, .lang-toggle[data-preview]:not([data-preview="en"]) a[data-lang="en"].lang-toggle--active, .lang-toggle[data-preview]:not([data-preview="pt"]) a[data-lang="pt"].lang-toggle--active, .lang-toggle[data-preview]:not([data-preview="nah"]) a[data-lang="nah"].lang-toggle--active, .lang-toggle[data-preview]:not([data-preview="fr"]) a[data-lang="fr"].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); } /* The legacy bar only ever shows its link list in the narrow band between the mobile hamburger (<1024px) and the rail (≥1280px). Five links plus the actions cluster don't fit there at the desktop 32px rhythm, so tighten the gap and drop the secondary sign-in link — it's still in the sheet, the footer and the final CTA. */ @media (min-width: 1024px) and (max-width: 1279.98px) { .nav-links { gap: 22px; } .nav-links a { font-size: var(--fs-body-s); } .nav-actions .btn-ghost { display: none; } } @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%); /* `visibility` is what actually closes this sheet. Sliding it out of view with `transform` alone left its six links, two buttons and the close control in the tab order on EVERY page at EVERY viewport — keyboard users tabbed into an invisible dialog, and `role="dialog" aria-modal="true"` told screen readers a modal was permanently open. `visibility: hidden` removes it from both the tab order and the accessibility tree; the 0s delay equal to the slide duration keeps the close animation watchable instead of snapping the sheet away on the first frame. */ visibility: hidden; transition: transform var(--dur-slow) var(--ease-decelerate), visibility 0s linear var(--dur-slow); overflow-y: auto; } .nav-sheet.nav-sheet--open { transform: translateY(0); visibility: visible; transition: transform var(--dur-slow) var(--ease-decelerate), visibility 0s; } @media (prefers-reduced-motion: reduce) { .nav-sheet { transition: visibility 0s; } } /* 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 var(--hairline); color: var(--tinta-900); } .nav-sheet > a:first-of-type { border-top: 1px solid var(--hairline); } .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 ---------- */ /* The editorial layer owns hero layout (`.ed-grid--hero`). What survives here is the copy/CTA/badge typography those panels still compose with. */ .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; } @media (max-width: 768px) { .hero-sub { margin-top: 20px; } .hero-ctas { margin-top: 24px; gap: 12px; } .hero-store-row { margin-top: 20px; gap: 10px; } .store-badge { min-width: 0; flex: 1 1 0; padding: 10px 14px; } } /* ---------- 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(111, 207, 151, 0.18) 0%, transparent 60%), linear-gradient(180deg, var(--verde-900) 0%, #002A1A 100%); color: var(--paper-fixed); 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: clamp(40px, 4vw, 56px) 0; } .trust-value { color: var(--paper-fixed); 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; } } /* ---------- Generic section header ---------- */ .section-head { text-align: center; margin-bottom: var(--space-section-head); 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; } /* ---------- 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(111, 207, 151, 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-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 ---------- The `.showcase-device` rules that lived here styled hand-drawn SVG approximations of the app. Those are gone: the showcase now renders the real captures inside `.device-frame`, further down this file. */ /* ---------- 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(111, 207, 151, 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(--paper-fixed); 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(111, 207, 151, 0.32) 0%, rgba(111, 207, 151, 0.14) 35%, transparent 72% ); pointer-events: none; z-index: 0; filter: blur(1px); } .pricing > * { position: relative; z-index: 1; } .pricing .eyebrow { color: var(--verde-300); } .pricing .eyebrow::before { background: var(--verde-300); box-shadow: 0 0 0 3px rgba(111, 207, 151, 0.22); } .pricing h2 { color: var(--paper-fixed); margin-top: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .pricing-amount { font-size: var(--fs-display-l); font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--paper-fixed); 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; } /* ---------- 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(--paper-fixed); 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; } } /* ---------- FAQ ---------- */ .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(250, 254, 251, 0.88); border-color: rgba(111, 207, 151, 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-verde-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); } /* `summary` is a flex row, so EVERY inline child becomes its own flex item and both the 16px gap and `space-between` land between them. A question carrying region-swapped figures rendered as "Why 1% with a $1 USD cap?" for that reason. `.faq-q` keeps the question one item; wrap any summary whose text contains markup. */ .faq-item summary .faq-q { min-width: 0; } .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: clamp(96px, 9vw, 128px) 0 clamp(64px, 7vw, 96px); background: radial-gradient( 1200px 600px at 100% -10%, rgba(0, 166, 81, 0.10) 0%, transparent 60% ), var(--hueso); } /* 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: clamp(48px, 5vw, 72px); } .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(--accent-verde); text-decoration: underline; text-underline-offset: 2px; } .faq-hub-mail:hover { color: var(--accent-verde-strong); } /* 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; } } /* 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: clamp(64px, 7vw, 96px); padding-top: clamp(36px, 3.5vw, 48px); border-top: 1px solid rgba(111, 207, 151, 0.35); position: relative; } .faq-hub-most::before { content: ""; position: absolute; top: -5px; left: 0; width: 48px; height: 9px; background: var(--verde-500); border-radius: 9999px; box-shadow: 0 0 0 4px rgba(111, 207, 151, 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 var(--hairline); 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; } .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(111, 207, 151, 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(--paper-fixed); padding: clamp(88px, 10vw, 140px) 0 clamp(72px, 8.5vw, 120px); overflow: hidden; isolation: isolate; } .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(111, 207, 151, 0.22) 0%, transparent 55%), radial-gradient(circle at 50% 52%, rgba(111, 207, 151, 0.34) 0%, rgba(111, 207, 151, 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 h2 { color: var(--paper-fixed); margin-top: 20px; max-width: 16ch; margin-left: auto; margin-right: auto; } /* 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) ----- */ .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); } /* ----- Store badges row (under the card) ----- */ .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); } /* ----- Responsive collapse ----- */ @media (max-width: 860px) { .finale-signin-cta { width: 100%; justify-content: space-between; } } @media (max-width: 520px) { .finale-store { flex: 1 1 0; min-width: 0; padding: 10px 14px; justify-content: center; } } /* ---------- Footer ---------- */ .footer { position: relative; background: #000; color: var(--hueso); padding: clamp(56px, 6.2vw, 88px) 0 clamp(32px, 3vw, 40px); overflow: hidden; } .footer::after { content: none; } .footer::before { content: none; } .footer > * { position: relative; z-index: 1; } @media (max-width: 768px) { .footer-bottom { 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: clamp(40px, 4.5vw, 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; } /* Capped: uncapped, the disclaimer ran the full container at 13px, which is ~180 characters a line. It is the longest single paragraph on the site and sat on every page. */ .footer-mouseprint { margin-top: 24px; font-size: var(--fs-caption); color: rgba(250, 247, 242, 0.5); line-height: 1.6; max-width: var(--measure-note); } @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(--accent-verde); } .wordmark-dot { width: 6px; height: 6px; background: var(--brand-dot); border-radius: 50%; margin-left: 3px; align-self: flex-end; margin-bottom: 6px; } /* "On dark" means on a SATURATED dark ground (the legacy verde footer), not "in dark mode" — so it must not ride the neutral ramp, or it turns near-black on a near-black footer. */ .wordmark--on-dark { color: var(--paper-fixed); } /* 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 ---------- Implemented as CSS scroll-driven animations in the motion layer at the end of this file (search "MOTION LAYER"). Content is visible by default — the old JS-gated `.is-revealed` transition shipped blank sections in headless renderers and is retired. */ /* ---------- Legal documents (privacidad, terminos, en/privacy, en/terms) ---- Shared typography + callout vocabulary so legal pages don't each ship their own inline `