/* =========================================================================== 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; /* ---- Secondary note ink ------------------------------------- The ONE token for de-emphasised body copy: compliance mouseprint, plan notes, form disclosures, slider scales, unit tags. Previously each of these dimmed itself with `opacity`, which is not a color operation — it composites the text toward whatever is behind it, so the SAME rule measured 8.8:1 on cream and 3.7:1 on the verde pricing panel. Contrast then depended on which panel the note happened to land in, and dark mode made it worse (the deepened verde-vivo fill leaves ink at 4.89:1 with zero headroom — ANY dimming drops it under AA). A token instead of opacity means the surface decides the value and each value is contrast-validated once. Never re-introduce `opacity` to dim text; it silently re-couples legibility to the background. Decorative pseudo-element washes may still use it. */ --note-ink: var(--tinta-500); /* ---- 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(). */ --fs-display-xxl: clamp(56px, 7.4vw, 120px); --fs-display-xl: clamp(44px, 5.6vw, 84px); --fs-display-l: clamp(38px, 4.8vw, 72px); --fs-display-m: clamp(30px, 3.6vw, 52px); --fs-title: clamp(26px, 2.6vw, 40px); --fs-headline: 24px; --fs-body-l: 18px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 13px; --fs-eyebrow: 12px; /* Icon masks. Colourless by construction: the shape lives here, the colour comes from whatever paints the element, so these carry no fixed fill to drift from the theme. */ --icon-cap: url("data:image/svg+xml;utf8,"); /* 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: 16px; } } /* ---------- Reset ---------- */ /* ═══════════════════════════════════════════════════════════════════ Cross-Document View Transitions — the web platform's native answer to SwiftUI's `matchedGeometryEffect`. Supported in Chrome 126+, Edge 126+, Safari 18.2+; browsers without support silently fall back to a hard navigation. That's the whole progressive-enhancement story — no JS needed for the fallback. How it works: 1. `@view-transition { navigation: auto }` opts the origin into cross-document transitions for same-origin same-type nav. 2. Any element with a `view-transition-name` is captured on BOTH the outgoing and incoming page. 3. Between unload and first paint of the new page the browser interpolates the shared element's position + size + opacity, and crossfades the remainder via the implicit `root` group. We tag THREE things: • `.lang-toggle-indicator` — the dark ES/EN pill slides from the old language's position to the new one's, natively, regardless of what JavaScript did or didn't do. • `.brand-mark-icon` + `.brand-mark-text` — the nav wordmark stays pinned across page loads so the nav reads as continuous chrome rather than a reloaded element. Animation speeds are tuned via the `::view-transition-group(…)` pseudo-elements below; they use the Apple sheet-enter curve (`cubic-bezier(0.16, 1, 0.3, 1)`) so the feel matches the hover-anticipation motion the pill already uses within a page. ═══════════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } /* Default root transition — a soft crossfade, ~260ms, slightly asymmetric (old fades faster than new so the incoming content "arrives" rather than "swaps"). */ ::view-transition-old(root) { animation: pesito-vt-fade-out 200ms cubic-bezier(0.3, 0, 1, 1) both; } ::view-transition-new(root) { animation: pesito-vt-fade-in 280ms cubic-bezier(0, 0, 0, 1) both; } @keyframes pesito-vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes pesito-vt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* The lang-toggle pill — the centerpiece shared element. Animation timing matches the in-page hover slide so the commit moment feels like a direct continuation of the anticipation motion. */ ::view-transition-group(lang-indicator) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* The brand wordmark — stays EXACTLY in place across nav. If the icon+text don't shift between pages (they shouldn't — the nav is fixed), the group animates effectively to a no-op, but it's still captured so the element doesn't repaint. */ ::view-transition-group(brand-icon), ::view-transition-group(brand-text) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); } /* Reduced motion: browsers should already short-circuit view transitions, but we set a `prefers-reduced-motion` block to be explicit — durations drop to near-zero so the transition still fires (preserves layout stability) but is imperceptibly fast. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(lang-indicator), ::view-transition-group(brand-icon), ::view-transition-group(brand-text) { animation-duration: 1ms !important; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; /* 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 24px; } .container-inner { width: 100%; max-width: var(--container-inner); margin: 0 auto; padding: 0 24px; } .reading { width: 100%; max-width: var(--reading-max); margin: 0 auto; } /* Eyebrow — the small uppercase label that sits above every section title. v2 promotes it to a glass chip: a translucent pill with a soft verde halo so it reads as a "lit nameplate" floating over the section, matching the rest of the Liquid Glass material family. Remains an inline element so existing HTML (``) doesn't need to change. ─────────────────────────────────────────────────────────────── */ .eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: var(--glass-radius-pill); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-700); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 166, 81, 0.18); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(11, 11, 11, 0.02), 0 1px 2px rgba(0, 61, 38, 0.06), 0 0 24px -8px rgba(0, 166, 81, 0.22); font-feature-settings: "ss01" 1; } .eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.18); flex-shrink: 0; } /* Dark-section eyebrows (pricing, cta-final, gallery): flip the glass tint to a dim 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. On Apple devices these resolve to SF Pro Display (or SF Pro Rounded where `ui-rounded` is available), matching macOS 26 / iOS 26 headline rendering. Tight tracking + `text-wrap: balance` to avoid orphans at breakpoints. */ .display-xxl { font-family: var(--font-display); font-size: var(--fs-display-xxl); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; } .display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .display-l { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; } .display-m { font-family: var(--font-display); font-size: var(--fs-display-m); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; } .title { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--tinta-700); text-wrap: balance; } .headline { font-size: var(--fs-headline); font-weight: 700; line-height: 1.25; color: var(--tinta-700); text-wrap: balance; } .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; } /* Keeps a hyphenated compound or abbreviation (PRE-LAUNCH, 2-minute, É.-U.) on one line inside eyebrows, headings and pills, so the break never lands on the hyphen. */ .nobr { white-space: nowrap; } /* .eyebrow is an inline-flex row with a gap, so a .nobr placed directly inside one would become its own flex item and add a gap before it. display: contents keeps the nowrap (its text inherits it) and drops the gap, as .eyebrow-seg does in editorial-system.css. */ .eyebrow > .nobr { display: contents; } /* ---------- 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); } /* Hover-only fills sit behind (hover: hover): a touch screen keeps :hover on the last tapped element, which left pills, rows and the theme toggle painted in their hover state after a tap. */ @media (hover: hover) { .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. 2026-09-02: was `2px solid var(--verde-500)`, which measures 2.99:1 on --hueso — a hair under the 3:1 that WCAG 2.2 SC 1.4.11 requires of a non-text indicator, and the weaker of the two rings this file already shipped (the button-scoped override below used verde-700 at 6.4:1). The default now matches the override, and cobalto is the ring the other two Pesito surfaces use, so focus looks the same across all three. */ :focus-visible { outline: 3px solid var(--azul-700); 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 { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; 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-links a[aria-current="page"] { color: var(--verde-ink); border-bottom: 2px solid 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 sets the visual pill; `min-height` guarantees the HIG 44pt touch target without inflating the pill's look on wide viewports where the flag + code + chevron already fill it. */ min-height: 44px; 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; min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--tinta-900); font-weight: 600; font-size: var(--fs-caption); } @media (hover: hover) { .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. The link then shrinks to the icon's 28px, so give it the 44pt width back — this is the narrowest screen we support and the easiest place to mistap the home link into the theme toggle beside it. */ @media (max-width: 339.98px) { .brand-mark-text { display: none; } .brand-mark { min-width: 44px; justify-content: center; } } /* 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; /* 44×44 HIG minimum; the 22px glyph inside is unchanged. */ width: 44px; height: 44px; 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[aria-current="page"] { color: var(--verde-ink); box-shadow: inset 4px 0 0 var(--verde-700); padding-left: 12px; } .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 ---------- */ .hero { position: relative; padding: 128px 0 96px; /* The hero has its own bloom pass laid on top of the body's aurora — a tight verde halo under the copy, a soft oro behind the device, a cream wash down the middle. These read as "the product sits in a lit room" rather than "floats on a gradient." Alpha stays ≤ 18% so the body copy never loses contrast. */ isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(68vw 42vw at 18% 32%, rgba(0, 166, 81, 0.14) 0%, transparent 60%), radial-gradient(54vw 42vw at 80% 56%, rgba(111, 207, 151, 0.14) 0%, transparent 62%), radial-gradient(40vw 32vw at 48% 12%, rgba(250, 254, 251, 0.5) 0%, transparent 65%); mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%); } .hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; position: relative; } .hero-copy { grid-column: span 7; } .hero-art { grid-column: span 5; position: relative; } .hero h1 { margin-top: 24px; color: var(--tinta-900); /* A whisper-fine text-shadow anchors the display type over the translucent aurora without making it look "shadowed". Only kicks in where the bloom brightens the surface under big type. */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } .hero h1 .brand-dot { color: var(--brand-dot); } .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 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); } /* Phone mockup composition — three independent motion channels, each on a separate element so they don't fight over `transform`: ────────────────────────────────────────────────────────────── 1. `.hero-device-wrap` — perspective parent; owns the ambient float (translateY, pre-existing). 2. `.hero-device` — owns the cursor-tracking tilt (rotateY/rotateX via CSS custom props `--tilt-x` / `--tilt-y`, written by JS). 3. `[data-balance]` / `[data-contact]` — per-element SVG animations (balance pulse, staggered avatar heartbeat) that compose over the top without touching the parent transform stack. This separation is deliberate: putting float + tilt on the SAME element would require both to write to `transform`, causing one to clobber the other. Split across parent → child, they multiply cleanly. */ .hero-device-wrap { /* Transparent to layout — just an inline-block that gives the child SVG a perspective context + a non-transform-y animation channel so the float doesn't fight the tilt. Inherits sizing from its parent `.hero-art` grid column. */ display: block; perspective: 1200px; transform-style: preserve-3d; position: relative; animation: hero-float 6s ease-in-out infinite; will-change: transform; } .hero-device { /* `--tilt-x` / `--tilt-y` are written by `scripts/main.js` from pointermove. Both default to 0 so the phone is neutral at rest. The 320ms transition smooths abrupt input (pointer entering / leaving the hero) without feeling laggy during continuous move. */ --tilt-x: 0deg; --tilt-y: 0deg; width: 100%; max-width: 520px; margin-left: auto; transform: rotateY(var(--tilt-x)) rotateX(var(--tilt-y)); transform-style: preserve-3d; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes saldo-pulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(0, 214, 50, 0)); } 45% { opacity: 1; filter: drop-shadow(0 0 4px rgba(0, 214, 50, 0.35)); } } @keyframes contact-heartbeat { 0%, 18%, 100% { transform: scale(1); filter: brightness(1); } 8% { transform: scale(1.08); filter: brightness(1.12); } } /* Reduced motion: strip ALL phone animations. The phone becomes a static image — still readable, still beautiful, just silent. */ @media (prefers-reduced-motion: reduce) { .hero-device, .hero-device [data-balance], .hero-device [data-contact] { animation: none !important; transform: none !important; } } /* Add a deep ground-shadow under the device so it has weight. Sits on the device-wrap so it tracks the float animation. */ .hero-device-wrap::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -28px; height: 48px; background: radial-gradient(ellipse at center, rgba(0, 61, 38, 0.32) 0%, transparent 70%); filter: blur(18px); pointer-events: none; z-index: -1; opacity: 0.8; } @media (prefers-reduced-transparency: reduce) { .hero::before { display: none; } } @media (max-width: 1023px) { .hero-copy, .hero-art { grid-column: span 12; } .hero-device { max-width: 340px; margin: 0 auto; } } @media (max-width: 768px) { .hero { padding: 88px 0 32px; min-height: 100svh; } .hero h1 { margin-top: 16px; } .hero-sub { margin-top: 20px; } .hero-ctas { margin-top: 24px; gap: 12px; } .hero-art { margin-top: 28px; height: auto; } .hero-device { max-width: 240px; height: auto; aspect-ratio: unset; } } /* ---------- 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-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; } @media (hover: hover) { .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; /* Standalone back-control, not a link in running prose, so it carries the 44pt target. Padding rather than min-height alone, so the hit area extends past the short "Volver" label. */ min-height: 44px; padding: 4px 8px; margin-inline-start: -8px; 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; } /* h3, not h4: the last heading before the footer is an h2 on every page, so an h4 here skipped a level and broke the document outline (WCAG 1.3.1). The visual treatment is unchanged — these are still the smallest labels on the page; only the rank they claim in the outline moved. `h4` stays in the selector for any page not yet re-synced. */ .footer-col :is(h3, 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 { /* Footer links are the site's secondary navigation and on mobile they're a stack of flush-adjacent targets — the case the 44pt floor exists for. `display:block` + 6px padding gave 35.3px with no gap between neighbours, so a mistap landed on the wrong page. Flex + min-height grows the target without moving the label. */ display: flex; align-items: center; min-height: 44px; 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; } .footer-mouseprint { margin-top: 24px; /* Legal copy is the text most likely to be read start-to-finish by someone who needs it, so it gets a measure like any other prose. Uncapped it ran past 140 characters on a desktop footer. */ max-width: 96ch; font-size: var(--fs-caption); color: rgba(250, 247, 242, 0.5); line-height: 1.6; } @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; /* Home link in the nav: a control, so it carries the 44pt target. The 32px icon and the wordmark are unchanged — only the hit area grows, using the nav's existing 68px height. */ min-height: 44px; 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. main.js still adds the class; it is now a no-op. */ /* ---------- Legal documents (privacidad, terminos, en/privacy, en/terms) ---- Shared typography + callout vocabulary so legal pages don't each ship their own inline `