/* common.css — design system tokens, shared components (buttons, chips, sections, helpers) */ /* Public Sans se carga desde el de cada página junto a JetBrains Mono (link combinado + preconnect, QA #56). El @import que vivía aquí era una cadena en serie (HTML → common.css → CSS de Google → fuente) que retrasaba el primer render ~300-500ms en 4G. */ :root { /* ────────────────────────────────────────────────────────────────── PRIMITIVES — full color names (2026-04 DS-Web rename) · Each ramp is 9 steps. Step 5 is the brand canonical for that color. · Short aliases (--g-1, --y-5, etc.) live below for transitional compatibility — same value, shorter handle. ────────────────────────────────────────────────────────────────── */ /* Gray — photographic neutral · 13 steps (white + 11 + black) */ --gray-white: #FFFFFF; --gray-1: #F2F2F2; --gray-2: #CCCCCC; --gray-3: #B3B3B3; --gray-4: #999999; --gray-5: #808080; --gray-6: #666666; --gray-7: #3A3A3A; --gray-8: #282828; --gray-9: #1F1F1F; --gray-10: #141414; --gray-11: #0A0A0A; --gray-black: #000000; /* Yellow — brand + action · step 5 is the logo yellow #FED925 */ --yellow-1: #FFF7D3; --yellow-2: #FFF0A8; --yellow-3: #FEE87C; --yellow-4: #FEDD3B; --yellow-5: #FED925; --yellow-6: #CBAE1E; --yellow-7: #988216; --yellow-8: #66570F; --yellow-9: #332B07; /* Red — alert · step 5 is the logo orange #FF4D00 */ --red-1: #FFDBCC; --red-2: #FFB899; --red-3: #FF9466; --red-4: #FF7133; --red-5: #FF4D00; --red-6: #CC3E00; --red-7: #992E00; --red-8: #661F00; --red-9: #330F00; /* Lightblue — text links + interactive accents · step 6 is canonical */ --lightblue-1: #DBF3F9; --lightblue-2: #B7E6F3; --lightblue-3: #92DAEC; --lightblue-4: #6ECDE6; --lightblue-5: #4AC1E0; --lightblue-6: #3B9AB3; --lightblue-7: #2C7486; --lightblue-8: #1E4D5A; --lightblue-9: #0F272D; /* Blue — logo only · step 5 is the logo blue #2689F8 (never used in UI) */ --blue-1: #D4E7FE; --blue-2: #A8D0FC; --blue-3: #7DB8FB; --blue-4: #51A1F9; --blue-5: #2689F8; --blue-6: #1E6EC6; --blue-7: #175295; --blue-8: #0F3763; --blue-9: #081B32; /* Orange — warm accent · reserved, rarely surfaced */ --orange-1: #FFE4D0; --orange-2: #FFC9A1; --orange-3: #FFAD73; --orange-4: #FF9244; --orange-5: #FF7715; --orange-6: #CC5F11; --orange-7: #99470D; --orange-8: #663008; --orange-9: #331804; /* Green — success · reserved for form/checkout flows */ --green-1: #CDF3E1; --green-2: #9BE6C2; --green-3: #6ADAA4; --green-4: #38CD85; --green-5: #06C167; --green-6: #059A52; --green-7: #04743E; --green-8: #024D29; --green-9: #012715; /* Short aliases (--g-/--y-/--r-/--lb-/--b-/--o-/--gr-) RETIRED 2026-05. Cada consumer migrado al nombre completo (--gray-/--yellow-/--red-/ --lightblue-/--blue-/--orange-/--green-). Si algo todavía referencia un alias corto, fallará en silencio — re-añadir solo si hay razón. */ /* ── Semantic — Backgrounds ── Trimmed 2026-05 to only the slots with active consumers. Retired: --bg-neutral-subtle/-soft/-strong, --bg-primary-weak, --bg-tertiary-soft. Re-add a slot when a real component needs it (don't preempt). */ --bg-neutral-default: var(--gray-10); /* .section-dark · cards · containers */ --bg-neutral-bold: var(--gray-11); /* page canvas (body) */ --bg-primary-default: var(--yellow-5); /* brand fill — yellow */ --bg-primary-strong: var(--yellow-6); /* .btn-primary:active */ --bg-tertiary-default: var(--gray-8); /* tertiary surface (used in 1 component) */ --bg-tertiary-strong: var(--gray-8); --bg-tertiary-bold: var(--gray-9); /* ── Semantic — Text ── Note: `--content-text-accent` (cyan) was retired 2026-04. Cyan is for LINKS only — not for highlighting text. To emphasise a word inside a paragraph use yellow (--yellow-5) or white (--gray-white). */ --content-text-default: var(--gray-white); /* Bumped from g-4 (#999) to g-3 (#B3B3B3) on 2026-05 — same role, better contrast on dark surfaces (~10:1 vs ~7.4:1). */ --content-text-default-weak: var(--gray-3); --content-text-default-inverted: var(--gray-9); --content-text-label: var(--gray-3); --content-text-label-weak: var(--gray-4); --content-text-subtitle: var(--gray-2); --content-text-highlight: var(--yellow-5); /* yellow highlight inside body copy */ --content-text-brandbook-label: var(--gray-3); --content-hint: var(--gray-3); /* ── Semantic — Links ── */ /* Links — yellow + underlined (2026-05). Cyan retired as link colour; yellow now owns both Action and Interactive text. */ --content-link-default: var(--yellow-5); --content-link-hover: var(--yellow-4); --content-link-pressed: var(--yellow-6); --content-link-disabled: var(--yellow-8); /* ── Semantic — Borders ── */ /* `--border-neutral-default` (opaque --g-6) retired 2026-04 — only had 1 usage. The 50%-transparent --border-neutral-soft below is the canonical hairline used across the system. */ /* White-on-dark hairline at 16% opacity. Bumped from 12% — the lower value rendered visibly thinner at rounded corners on some browsers because alpha-blending compounds at the antialiased edge. 16% reads as a clean, even 1px line all the way around. */ --border-neutral-soft: color-mix(in srgb, var(--gray-white) 16%, transparent); --border-secondary-accent: var(--yellow-5); /* `--border-primary-accent` (cyan) retired 2026-04 — never used in any real component. Yellow (--border-secondary-accent) is the only accent border the system needs. */ /* `--border-tertiary-accent` retired 2026-04 — its single usage (.info-tip border) migrated to --border-neutral-soft. */ /* ── Semantic — Brand ── */ --brand-yellow: var(--yellow-5); --brand-red: var(--red-5); --brand-blue: var(--blue-5); --brand-black: var(--gray-9); --brand-white: var(--gray-white); /* ── Semantic — Aliases (signal/success/warning/error/info) ── */ --signal-default: var(--red-5); --signal-hover: var(--red-4); --signal-pressed: var(--red-6); --signal-on: var(--gray-white); --success-default: var(--green-5); --warning-default: var(--yellow-5); --error-default: var(--red-5); --info-default: var(--blue-5); /* ── Semantic — Magic hours (fases de luz) ── Colores de marca de PhotoPills para las fases de luz del día. NO son roles de UI (acción/alerta/etc.): son una PALETA DE DATO. Cualquier visualización o pieza que represente Day / Golden hour / Blue hour / Night DEBE usar estos tokens — no re-elegir a ojo. Mapean 1:1 a primitivas existentes. (Decisión de Irene · 2026-07-22.) */ --lightphase-day: var(--lightblue-3); /* Day light · #92DAEC */ --lightphase-golden: var(--red-5); /* Golden hour · #FF4D00 */ --lightphase-blue: var(--blue-5); /* Blue hour · #2689F8 */ --lightphase-night: var(--gray-black); /* Night · #000000 */ /* ────────────────────────────────────────────────────────────────── DESIGNER ALIASES (2026-04 · DS-Web rename) A friendlier vocabulary for design-time thinking. These are pure aliases — they layer on top of the primitives + semantic tokens above. Devs can use either; designers should reach for these. ────────────────────────────────────────────────────────────────── Naming rules: · `--color--` for accents (action, link, alert) · Intensity scale: subtle → soft → default → strong → bold · `--bg-` for the tonal cascade of section backgrounds ────────────────────────────────────────────────────────────────── */ /* Action — yellow ramp · covers BOTH primary CTAs and inline text links (unified 2026-05: yellow owns Action + Identity + Interactive text). */ --color-action-subtle: var(--yellow-2); --color-action-soft: var(--yellow-3); --color-action-default: var(--yellow-5); /* brand yellow ★ */ --color-action-strong: var(--yellow-6); --color-action-bold: var(--yellow-7); /* `--color-link-*` retired 2026-05 — use `--color-action-*` instead. Links and CTAs share the same hue family in this system. */ /* Alert — red ramp · errors, validation, attention */ --color-alert-subtle: var(--red-2); --color-alert-soft: var(--red-3); --color-alert-default: var(--red-5); /* brand alert ★ */ --color-alert-strong: var(--red-6); --color-alert-bold: var(--red-7); /* ───────────────────────────────────────────────────────────────── SURFACE FAMILIES (2026-04 DS-Web rename) Three orthogonal layers compose any section's atmosphere: 1. `--bg-*` Solid backgrounds (no gradient). 2. `--gradient-*` Directional vertical fades (light top → dark bottom). Each one creates a clear seam against the next section. 3. `--vignette-*` Atmospheric overlays applied via ::before. Don't change the base tone — only add character (warm-right, cool-left, central glow, band…). A section = surface + (optional) vignette. ───────────────────────────────────────────────────────────────── */ /* ── Backgrounds — solids ─────────────────────────────────────── */ --bg-bold: var(--gray-black); /* Solid #000 — anchor (footer, statements) */ /* Light surface · off-white con tinte azul-gris sutil. Para sales letters largas y secciones de lectura sostenida (Overview, How It Works, Itinerary, FAQs). El tilt azul (B>G>R, +5 puntos sobre rojo) arma con los gradients dark del DS (blue tilt B>G>R) y evita el blanco puro #FFF que genera fatiga. Patrón validado en Linear, Figma marketing, Vercel docs. */ --bg-light-default: #F5F7FA; --content-text-on-light-default: var(--gray-11); /* near-black */ --content-text-on-light-weak: var(--gray-6); /* medium gray */ --border-on-light: rgba(10, 10, 10, 0.12); /* ── Gradients — directional vertical fades ───────────────────── */ /* Each gradient ranges from a "light top" to a "dark bottom". Stacked sections produce a visible "lift" at every seam. All three share a clear blue tilt (B > G > R in every stop). */ --gradient-subtle: linear-gradient(180deg, #25282e 0%, #16181e 100%); /* range #25 → #16 — card on dark surface */ --gradient-soft: linear-gradient(180deg, #181c26 0%, #0c1018 100%); /* range #18 → #0c — content band, blue-tinted, gentle delta */ --gradient-strong: linear-gradient(180deg, #14161e 0%, #02030a 100%); /* range #14 → #02 — deep band, near-black bottom */ /* ── Vignettes — atmospheric overlay color (single, blue-gray) ── One vignette family with two intensities. Position is set by modifier classes (.has-vignette--right/--left/--top/--bottom) on the consumer element. See `.has-vignette` utility in common.css. */ --vignette-soft: rgba(95, 105, 128, 0.20); /* atmospheric ambiental */ --vignette-strong: rgba(95, 105, 128, 0.50); /* character pronunciado */ /* ── Scrims — legibility overlays over photography (2026-07 audit) ── Distintos de --gradient-* (fondos de sección) y de --vignette-* (carácter atmosférico): un scrim oscurece la foto para que el texto encima pase contraste AA. Se aplican en el ::after/overlay del media. · hero → oscurece leve arriba (nav) + fuerte abajo (title block). · soft → fade inferior medio, para captions/diptychs sobre foto. · strong→ cobertura completa creciente, para heroes con mucho copy. */ --scrim-hero: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.75) 100%); --scrim-photo-soft: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.65) 100%); --scrim-photo-strong: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.82) 100%); /* `--gradient-default`, `--bg-subtle/-soft/-default/-strong/-elevated/ -loop/-deep/-atmospheric/-pre-anchor/-anchor` were aliases retired 2026-05 (zero consumers). Use `--gradient-subtle/-soft/-strong` and `--bg-bold/-neutral-bold/-neutral-default` directly. */ /* ── Shadows ── */ --shadow-md: 0 4px 16px color-mix(in srgb, var(--gray-black) 20%, transparent); --shadow-device-light: 0 50px 80px -20px color-mix(in srgb, var(--gray-black) 22%, transparent); --shadow-device-dark: 0 60px 100px -20px color-mix(in srgb, var(--gray-black) 65%, transparent); /* ── Typography ── */ /* Font families (the only two used across the site) */ --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace; /* `--font-brand` · solo para el wordmark "PhotoPills" (logo lockup). Gibson es la tipografía oficial del wordmark; cae a Public Sans si no está disponible. NO usar fuera del lockup — para todo lo demás, `--font-sans`. */ --font-brand: Gibson, 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* ────────────────────────────────────────────────────────────────── TEXT — typography scale (2026-04 DS-Web rename) · Prefix `--text-*` for everything readable. · Suffix tells the role (display/heading/body/mono) + size (xs–xl). · `--fs-*` shortnames RETIRED 2026-05 — every consumer migrated to `--text-*`. ────────────────────────────────────────────────────────────────── */ /* Display — hero / statement */ --text-display-xl: 96px; /* hero h1 */ --text-display-lg: 78px; /* secondary display */ --text-display-md: 64px; /* tertiary display */ /* Heading — section titles */ --text-heading-xl: 56px; /* big section title */ --text-heading-lg: 40px; /* default section title */ --text-heading-md: 32px; /* subheading */ --text-heading-sm: 24px; /* compact subheading */ /* Body — editorial copy */ --text-lead: 28px; /* hero subtitle / lead paragraph */ --text-body-lg: 22px; /* large body */ --text-body-md: 18px; /* default body (md) — minimum legible for prose */ --text-body-sm: 16px; /* small body — still safe for reading */ --text-body-xs: 14px; /* legal / smallest body — captions, never paragraphs */ /* Mono — metadata, technical labels */ --text-mono-xs: 10px; /* tiny mono — timer digits */ --text-mono-sm: 12px; /* photo credits, footer meta */ --text-mono-md: 14px; /* eyebrows */ --text-mono-lg: 16px; /* author credit, paginator */ --text-mono-xl: 18px; /* author name (avatar+autor) · mono destacado */ /* Editorial fluid sizes — FUENTE ÚNICA del subtítulo/body editorial (section-header / editorial-stack / product-copy · patrón "mirror de la home"). Esta receta estaba copiada por todo el repo; ahora vive aquí. Cambiar el tamaño editorial = tocar solo estas 2 líneas. */ --text-editorial-subtitle: clamp(var(--text-heading-sm), 3vw, var(--text-heading-md)); --text-editorial-body: clamp(var(--text-body-md), 1.7vw, var(--text-body-lg)); /* Product hero title — tamaño del H1 "PhotoPills Premium Beta" (Pricing + Premium comparten el componente `.pricing-intro__title-v2`). Tokenizado (petición Irene 2026-08): tocar el tamaño del hero = estas 2 líneas. Desktop: display-md (64) → display-lg (78). Móvil: heading-xl (56) → 78. */ --text-hero-title: clamp(var(--text-display-md), 7vw, var(--text-display-lg)); --text-hero-title-sm: clamp(var(--text-heading-xl), 8vw, var(--text-display-lg)); /* Line-heights + tracking (shared across the scale) */ --lh-display: 1.08; --lh-heading: 1.18; --lh-body: 1.47; --tracking-display: -0.022em; --tracking-heading: -0.018em; /* `--fs-*` aliases retired (mayo 2026). Every consumer migrated to the canonical `--text-*` tokens. If something still references --fs-... it'll fail loudly — re-add the alias only if there's a real reason. */ /* ── Motion easings · canonical ramp (4 steps) ── `--ease` (legacy default) retired 2026-05; consumers migrated to `--ease-out` (UI default). */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1); --ease-reveal: cubic-bezier(0.23, 0.98, 0.34, 0.99); /* `--dur-reveal` (800ms) was unified into `--dur-cinema` (1100ms) in mayo 2026 — both lived in the "long, intentional" bucket and the perceptual delta wasn't worth a separate token. Section .reveal entries now play at the same tempo as The Loop. */ /* Legacy duration tokens (--dur-fast/normal/slow/hover) retired in 2026-04 coherence pass. Use the canonical ramp below (--dur-instant/soft/glide/cinema). */ /* ── DS · Avatar sizes ── */ --avatar-sm: 32px; --avatar-md: 40px; /* canonical author-credit avatar */ --avatar-lg: 48px; /* ── DS · Section vertical padding ── Catálogo cerrado de 4 escalones. Padding SIEMPRE simétrico arriba/abajo; la única excepción documentada es el hero (xl) que admite asimetría justificada en su comentario CSS. sm → módulos compactos (reservado) md → editorial default — la mayoría de secciones lg → statement / bandas con peso visual xl → heroes (home, pricing), 100vh/svh */ --section-pad-y-sm: clamp(48px, 6vw, 80px); --section-pad-y-md: clamp(64px, 8vw, 112px); --section-pad-y-lg: clamp(96px, 12vw, 180px); --section-pad-y-xl: clamp(120px, 22vh, 220px); /* `--bg-section-photographic/-loop/-deep/-elevated`, `--bg-final-cta`, `--bg-footer` — todos retirados 2026-05. Eran 6 gradients radial+linear custom para secciones de la homepage; sustituidos por las 3 bandas canónicas `--gradient-subtle/-soft/-strong` + viñetas opcionales vía `.has-vignette`. Cero consumers actuales. */ /* ── DS · Breakpoints (4 canonical, mobile-first cascade) ── CSS uses literal values (custom properties don't work inside @media queries). These tokens are documentation references only. */ --bp-xs: 480px; /* compact phone — type micro-adjust */ --bp-sm: 720px; /* phone / portrait — full mobile layout */ --bp-md: 1024px; /* tablet / landscape — stack diptychs, hamburger nav */ --bp-lg: 1200px; /* small desktop max-width gate */ /* ── DS · Radius extras `--radius-pill` retired 2026-04 → use `--radius-full` (same effect). */ --radius-circle: 50%; /* avatar, dot, icon button — geometrically distinct from --radius-full */ /* ── DS · Shadows (3 elevations, 2026-04 simplification) `--shadow-card`, `--shadow-mockup`, `--shadow-popover` consolidated into 2 downward shadows (soft + strong). The upward `--shadow-stage` was renamed to `--shadow-stage-up` for explicitness. */ --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-strong: 0 16px 36px -12px rgba(0, 0, 0, 0.55); --shadow-stage-up: 0 -40px 90px -20px rgba(0, 0, 0, 0.85); /* ── Glow — halo de acción en yellow-5 (2026-07 audit) ── Receta compartida entre el Loop de la home y Capabilities de App. En HTML se aplica como box-shadow vía estos tokens; en SVG el mismo halo va como `filter: drop-shadow(0 0 Npx color-mix(in srgb, var(--yellow-5) N%, transparent))` porque drop-shadow no acepta un token de box-shadow. Mantener AMBAS recetas con los mismos valores. */ --glow-action-soft: 0 0 4px color-mix(in srgb, var(--yellow-5) 45%, transparent); --glow-action-strong: 0 0 12px color-mix(in srgb, var(--yellow-5) 85%, transparent); /* ── Glass — receta backdrop-filter unificada (2026-07 audit) ── Dos intensidades cierran el catálogo: la canónica del chrome (.btn-ghost / .icon-btn) y la fuerte para paneles, barras de filtros y tooltips grandes. El blur del nav (20px/180%) queda como receta propia del site chrome, documentada en .nav. */ --glass-filter: blur(2.5px) saturate(120%); --glass-filter-strong: blur(12px) saturate(140%); /* ── Glass surfaces (tint) · 2026-08 ── El FILTRO ya está tokenizado arriba; esto tokeniza el FONDO translúcido del glass. Tres roles, uno por contexto: --glass-bg: tinte claro sobre superficies OSCURAS (chrome: btn-ghost, icon-btn) · va con --glass-filter. --glass-bg-panel: oscuro casi opaco para paneles de contenido (panel--glass) · va con --glass-filter-strong. --glass-bg-dark: oscuro TRANSLÚCIDO sobre FOTO (deja ver la imagen, p.ej. buscador del 404) · va con --glass-filter-strong. */ --glass-bg: rgba(255, 255, 255, 0.16); --glass-bg-panel: rgba(10, 13, 18, 0.82); --glass-bg-dark: rgba(10, 13, 18, 0.42); /* Aliases — old names kept for transitional compat. */ --shadow-card: var(--shadow-soft); --shadow-mockup: var(--shadow-strong); --shadow-popover: var(--shadow-strong); --shadow-stage: var(--shadow-stage-up); /* ── DS · Z-index stack (canonical) ── */ --z-base: 0; --z-overlay: 5; /* photo credit, paginator overlay */ --z-chip: 10; /* chip strips above scrim */ --z-modal: 50; --z-nav: 100; /* sticky topbar */ --z-toast: 1000; --z-grain: 9999; /* film grain overlay (always on top) */ /* ── DS · Motion durations · canonical ramp (4 steps) ── `--dur-snap` (200ms) and `--dur-instant` (100ms) unified 2026-05: kept the name "instant" at the snap value (200ms). `--dur-reveal` (800ms) absorbed by `--dur-cinema` (1100ms). Legacy `--dur-fast/ normal/slow/hover` retired 2026-04. */ --dur-instant: 200ms; /* hover, focus, micro-interactions */ --dur-soft: 320ms; /* opacity / colour transitions */ --dur-glide: 600ms; /* per-element reveal */ --dur-cinema: 1100ms; /* the loop arc, loop crossfade */ /* ── Spacing ── */ --sp-tiny: 1px; --sp-2xs: 2px; --sp-xs: 4px; --sp-s: 8px; --sp-ds: 12px; --sp-default: 16px; --sp-m: 24px; --sp-l: 32px; --sp-xl: 40px; /* ── Radius ── `--radius-xs` (4px) retired 2026-04 — usages migrated to --radius-s. The system intentionally has 4 radii: small (8) · medium (16) · large (24) · full (9999, capsule). Plus --radius-circle (50%) above for true circles regardless of size. */ --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-full: 9999px; /* ── Layout ── */ --max-article: 720px; --max-content: 980px; --max-wide: 1240px; --max-full: 1440px; --nav-height: 48px; --nav-bg: var(--gray-black); /* negro sólido (2026-07 · antes glass rgba 0.85 que se transparentaba con el scroll) */ /* Gutter lateral · ÚNICO margen horizontal de sección para todo el sitio. Auditoría 2026-08: convivían 4 valores (12/16/24/32) → unificado a un token responsive: 16px en móvil (densidad + foto expansiva + convención iOS) que escala a 24px en tablet/desktop (aire editorial donde sobra espacio). Todas las secciones y `.container` lo usan; los bleeds full-bleed escapan por calc(-1 * var(--gutter)) y escalan solos. Curva: 16 hasta ~500px · llega a 24 a ~750px · 24 por encima. */ --gutter: clamp(16px, 3.2vw, 24px); } .container { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--gutter); } .container.narrow { max-width: var(--max-content); } .section-dark, .section-darkest, .section-stars, .section-glow { position: relative; isolation: isolate; } .section-dark, .section-darkest { color: var(--content-text-default); } .section-dark { background: var(--bg-neutral-default); } .section-darkest { background: var(--bg-neutral-bold); } /* Ambient top-glow — very subtle radial spotlight that gives dark sections depth without visible texture. Inspired by Apple's product pages: you notice the air, not the gradient. */ .section-dark::before, .section-darkest::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 60%); pointer-events: none; z-index: -1; } /* ── Buttons ────────────────────────────────────────────────────────── Sizes: .btn-s (40px) · .btn-m (52px) · .btn-l (62px) Variants: .btn-primary (yellow) · .btn-tertiary (glass) States: :hover · :active · :focus-visible · :disabled (all variants) ─────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); font-weight: 600; border-radius: var(--radius-full); transition: background-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out); cursor: pointer; text-decoration: none; white-space: nowrap; border: 0; } /* Focus ring uses layered box-shadows instead of outline so it follows the button's border-radius (pill) consistently across all browsers. First ring matches the canvas (the offset); second is the yellow ring. */ .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gray-black), 0 0 0 5px var(--yellow-5); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Sizes — height + horizontal padding + body font size */ .btn-s { height: 40px; padding: 10px 18px; font-size: var(--text-body-sm); } .btn-m { height: 52px; padding: 14px 22px; font-size: var(--text-body-md); } .btn-l { height: 62px; padding: 18px 24px; font-size: var(--text-body-md); } /* `.btn-tertiary` · solid grey (NO glass). Diferenciado de `.btn-ghost`, que sí es glass (white 0.16 + blur). El gris opaco simula el efecto que el glass deja sobre fondo negro pero sin transparencia — útil cuando hay que destacar acción secundaria sobre fondos heterogéneos (foto, satélite, gradientes) donde el glass podría no leer bien. Diferencia clave entre las tres variantes glass-ish: - .btn-ghost → transparente, blur, alpha (mezcla con el fondo) - .btn-tertiary → gris opaco gray-8 (independiente del fondo) - .btn-dark → near-black gray-11 (más sólido, contraste máximo) */ .btn-tertiary { background: var(--gray-8); color: var(--gray-white); } .btn-tertiary:hover { background: var(--gray-7); color: var(--gray-white); } .btn-tertiary:active { background: var(--gray-6); } /* ── Icon button · acción de un solo icono (cerrar, toggle, FAB) ─────── Sizes: .icon-btn-s (32px) · .icon-btn-m (40px) · .icon-btn-l (44px) Apariencia única · glass (white alpha + backdrop blur), mirror exacto de `.btn-ghost`. Funciona sobre superficies oscuras del DS y sobre fotos por igual (el blur ancla el botón sin necesidad de scrim sólido). El catálogo NO incluye variante "primary" porque las acciones destacadas usan `.btn-primary` (pill con label). El icon-btn cubre solo UI chrome (cerrar, expandir, FAB de menú, scroll-to-top). ─────────────────────────────────────────────────────────────────── */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); border: 0; background: rgba(255, 255, 255, 0.16); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); color: var(--gray-white); cursor: pointer; padding: 0; flex-shrink: 0; transition: background-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out); } .icon-btn:hover { background: rgba(255, 255, 255, 0.22); color: var(--gray-white); } .icon-btn:active { background: rgba(255, 255, 255, 0.28); } /* Focus ring · misma técnica que .btn (box-shadow capas) para que el anillo siga el radius circle en todos los navegadores. */ .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gray-black), 0 0 0 4px var(--yellow-5); } .icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Sizes · cuadrado fijo, icono centrado vía flex. SVG hereda currentColor. */ .icon-btn-s { width: 32px; height: 32px; } .icon-btn-m { width: 40px; height: 40px; } .icon-btn-l { width: 44px; height: 44px; } /* Variant · tertiary: solid gray-8 (no glass), espejo de `.btn-tertiary`. Para FABs sobre fotos o superficies heterogéneas donde el glass puede leer mal. El sólido ancla el botón independientemente del fondo. */ .icon-btn-tertiary { background: var(--gray-8); backdrop-filter: none; -webkit-backdrop-filter: none; } .icon-btn-tertiary:hover { background: var(--gray-7); color: var(--gray-white); } .icon-btn-tertiary:active { background: var(--gray-6); } .photo-credit { position: absolute; bottom: 1rem; right: 1.5rem; /* Mono caption — shared component used by the hero and any photo gallery on the page (e.g. Experiences). */ font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 400; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.65); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); z-index: var(--z-overlay); pointer-events: none; margin: 0; } /* Top-right variant — used inside the Experiences gallery so the credit doesn't compete with the paginator at the bottom. */ .photo-credit--top { top: clamp(12px, 1.6vw, 20px); right: clamp(14px, 1.8vw, 22px); bottom: auto; } @keyframes scrollHintFade { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Calm vertical bounce — a 5px wink to invite scrolling without distracting. Keeps `translateX(-50%)` from the base centering and adds a gentle Y oscillation. ease-in-out + 2.6s feel intentional rather than restless. */ @keyframes scrollHintBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(9px); } } .app-rating { margin-top: 2.25rem; display: inline-flex; align-items: center; gap: 0.6rem; color: var(--gray-white); font-size: var(--text-body-sm); } .app-rating-score { font-weight: 600; font-size: var(--text-heading-sm); letter-spacing: -0.02em; line-height: 1; color: var(--gray-white); } .app-rating-stars { display: inline-flex; gap: 2px; color: var(--brand-yellow); align-items: center; } .app-rating-stars svg { width: 16px; height: 16px; display: block; } .app-rating-count { font-family: var(--font-mono); font-size: var(--text-body-xs); letter-spacing: 1.2px; text-transform: uppercase; color: var(--content-text-subtitle); padding-left: 0.65rem; border-left: 1px solid rgba(255, 255, 255, 0.2); line-height: 1.4; } /* Reviews · downloads · en DESKTOP van en una línea, separados por el MISMO divider (border-left) que separa las estrellas del contenido. */ .app-rating-count__item + .app-rating-count__item { margin-left: 0.65rem; padding-left: 0.65rem; border-left: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 720px) { /* Móvil · los dos datos APILADOS en 2 líneas, sin divider entre ellos (se mantiene el divider estrellas│bloque del .app-rating-count). */ .app-rating-count { display: inline-flex; flex-direction: column; } .app-rating-count__item + .app-rating-count__item { margin-left: 0; padding-left: 0; border-left: 0; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .section-header { text-align: center; max-width: var(--max-content); margin: 0 auto 2.5rem; } /* Match the typographic scale used in product-copy sections (The App, Premium) so titles, subtitles and pitch bodies render identically across the page — only alignment changes (centered here vs left there). */ .section-header > .section-subtitle { font-size: var(--text-editorial-subtitle); line-height: 1.125; font-weight: 300; margin-bottom: 0; } .section-header > .section-rule { margin: 2rem auto; } .section-header > .pitch-body { font-size: var(--text-editorial-body); line-height: 1.2; font-weight: 300; max-width: 56ch; margin: 0 auto; } @keyframes baHint { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-8px); } 70% { transform: translateX(8px); } } .plans-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; } /* (Legacy .loop-dots / .loop-dot rules removed — the live Loop uses .loop-stop instead.) */ .section-rule { display: block; width: 64px; height: 2px; margin: 0; padding: 0; border: 0; background: var(--gray-6); } /* ───────────────────────────────────────────────────────────────────── Inline text links — yellow + underlined (2026-05) Default `a` style is no underline (set in reset.css) so styled buttons / nav / icons stay clean. Inline text links inside editorial copy get the canonical link treatment automatically; anywhere else, opt in with the `.text-link` class. ───────────────────────────────────────────────────────────────────── */ .pitch-body a, .faq__a a, .includes__group-note a, p a, .text-link { color: var(--content-link-default); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .pitch-body a:hover, .faq__a a:hover, .includes__group-note a:hover, p a:hover, .text-link:hover { color: var(--content-link-hover); } /* ───────────────────────────────────────────────────────────────────── .info-tip — small "i" with hover/focus tooltip bubble (2026-05) Inline icon-button used to attach contextual help to a label (typically inside fineprint, captions, form fields). The bubble is a CSS-only popover — opens on hover, focus and focus-within. Markup: i Notes: · `tabindex="0"` makes it keyboard-focusable; `role="img"` keeps the SR description simple. The bubble's text is duplicated as `aria-label` so screen readers always announce it. · The bubble uses --shadow-strong + the canonical hairline + radius-s. · Opens via `.info-tip:hover/:focus-visible/:focus-within`. ───────────────────────────────────────────────────────────────────── */ .info-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border: 1px solid var(--border-neutral-soft); border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-mono-xs); line-height: 1; color: var(--content-text-default-weak); cursor: help; position: relative; vertical-align: middle; transition: border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out); } .info-tip:hover, .info-tip:focus-visible { border-color: var(--border-secondary-accent); color: var(--content-text-default); outline: none; } .info-tip__bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 10px 14px; background: var(--bg-neutral-default); border: 1px solid var(--border-neutral-soft); border-radius: var(--radius-s); box-shadow: var(--shadow-strong); font-family: var(--font-sans); font-size: var(--text-body-sm); letter-spacing: 0; font-weight: 400; line-height: 1.45; color: var(--content-text-default); text-align: left; text-transform: none; cursor: default; opacity: 0; visibility: hidden; transition: opacity var(--dur-soft) var(--ease-out), visibility 0s linear var(--dur-soft); z-index: var(--z-popover, 50); pointer-events: none; } .info-tip:hover .info-tip__bubble, .info-tip:focus-visible .info-tip__bubble, .info-tip:focus-within .info-tip__bubble { opacity: 1; visibility: visible; transition-delay: 0s; } /* ───────────────────────────────────────────────────────────────────── .faq — accordion canónico de preguntas frecuentes (2026-07 audit) Promocionado desde premium-pricing (.faq-item) y experiences (.exp-faq), que mantenían dos copias espejo de la misma receta. Consumido por: premium-pricing, premium, app, experiences. Markup:
Question?

Answer.

Notas: · La summary funciona con o sin la clase `.faq__q` (el selector `.faq > summary` cubre ambos casos). · La respuesta admite wrapper `.faq__a` (permite varios párrafos, listas, links) o `

` directos hijos del details. · El indicador +/− es amarillo (el toggle es el action signifier). · Question default: --text-body-lg. Páginas de lectura densa pueden bajarla un peldaño a --text-body-md con un override page-scoped (ver experiences). ───────────────────────────────────────────────────────────────────── */ .faq { border-bottom: 1px solid var(--border-neutral-soft); padding: 18px 0; } .faq > summary { position: relative; list-style: none; /* Hide default disclosure triangle */ cursor: pointer; font-family: var(--font-sans); font-size: var(--text-body-lg); /* Mismo peso que el cuerpo (400): la jerarquía pregunta↔respuesta ya la dan el color (pregunta blanca / respuesta weak) y el tamaño (21 vs 18). El 600 sobraba. (Decisión Irene 2026-08 · antes accordion titles = 600.) */ font-weight: 400; color: var(--content-text-default); padding-right: 32px; line-height: 1.4; transition: color var(--dur-instant) var(--ease-out); } .faq > summary::-webkit-details-marker { display: none; } /* Custom + / − indicator — yellow (the toggle is the action signifier). */ .faq > summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--text-body-lg); /* decorative '+' marker */ font-weight: 400; line-height: 1; color: var(--content-text-highlight); transition: transform var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out); } .faq[open] > summary::after { content: '−'; color: var(--content-text-highlight); } .faq > summary:hover { color: var(--content-text-highlight); } .faq__a { margin-top: 10px; color: var(--content-text-default-weak); font-size: var(--text-body-md); line-height: 1.6; } .faq__a p { margin: 0 0 12px; line-height: 1.6; font-style: normal; /* blockquote/em nunca italic (regla DS) */ } .faq__a p:last-child { margin-bottom: 0; } /* Variante sin wrapper — párrafos directos dentro del details. */ .faq > p { margin: 10px 0 12px; font-family: var(--font-sans); font-size: var(--text-body-md); font-style: normal; line-height: 1.6; color: var(--content-text-default-weak); } .faq > p:last-of-type { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────────────── .acc-toggle — pill de toggle para accordions (2026-07) Promocionado desde Dolomites v8 (.exp-hero-shot__plan-summary-icon), donde vivía sin documentar. Pill mono uppercase con label dinámico (data-attributes) + chevron que rota al abrir. Vive DENTRO del

de un
(aria-hidden: el summary ya es el control). Markup:
…contenido del summary… …
Modo de superficie: · Default → on-dark (hairline --border-neutral-soft, texto weak). · `.acc-toggle--on-light` → superficies claras (--border-on-light). · Páginas con secciones que alternan dark/light pueden re-mapear las custom props (--acc-toggle-*) a sus tokens semánticos de sección (así lo hace Dolomites con --exp-*). ───────────────────────────────────────────────────────────────────── */ .acc-toggle { --acc-toggle-color: var(--content-text-default-weak); /* Stroke a white 40% (no el hairline 16% decorativo): es el borde de un CONTROL interactivo y debe pasar el contraste no-textual de WCAG 1.4.11 (≥3:1 sobre el fondo). White 40% sobre las bandas oscuras del catálogo ≈ 3.7:1 (2026-07, feedback usuaria). */ --acc-toggle-border: color-mix(in srgb, var(--gray-white) 40%, transparent); --acc-toggle-color-hover: var(--content-text-default); --acc-toggle-border-hover: color-mix(in srgb, var(--gray-white) 55%, transparent); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 1px solid var(--acc-toggle-border); border-radius: var(--radius-full); color: var(--acc-toggle-color); font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; transition: color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out); } /* Label dinámico · lee data-attributes; el details[open] ancestro conmuta closed → open sin CSS específico por accordion. */ .acc-toggle::before { content: attr(data-label-closed); } details[open] > summary .acc-toggle::before { content: attr(data-label-open); } /* Chevron · rotación animada al abrir. */ .acc-toggle::after { content: ''; width: 7px; height: 7px; margin-top: -2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-soft) var(--ease-out), margin-top var(--dur-soft) var(--ease-out); } details[open] > summary .acc-toggle::after { margin-top: 2px; transform: rotate(225deg); } @media (prefers-reduced-motion: reduce) { .acc-toggle::after { transition: none; } } details > summary:hover .acc-toggle { color: var(--acc-toggle-color-hover); border-color: var(--acc-toggle-border-hover); } /* Superficies claras (light mode del componente). */ .acc-toggle--on-light { --acc-toggle-color: var(--content-text-on-light-weak); /* Mismo criterio WCAG 1.4.11: black 45% sobre off-white ≈ 3.4:1. */ --acc-toggle-border: rgba(10, 10, 10, 0.45); --acc-toggle-color-hover: var(--content-text-on-light-default); --acc-toggle-border-hover: rgba(10, 10, 10, 0.6); } /* ───────────────────────────────────────────────────────────────────── .has-vignette — atmospheric overlay utility (2026-04 DS-Web) Single radial vignette in the canonical blue-gray cinematic tint. Add `.has-vignette` to any section that needs atmospheric character. Intensity (default = soft): .has-vignette--strong Position is NOT part of the documented API — it's set ad-hoc per section via the CSS custom properties `--vignette-x` and `--vignette-y` (default 50% / 50%). Each page positions the vignette behind a key visual element of that section (a logo, a hero word, a device mockup) by overriding the variables in page-specific CSS. Example (in a page's style.css): .product-section--app { --vignette-x: 70%; --vignette-y: 50%; } ───────────────────────────────────────────────────────────────────── */ .has-vignette { position: relative; isolation: isolate; --vignette-color: var(--vignette-soft); --vignette-x: 50%; --vignette-y: 50%; } .has-vignette::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 70% 60% at var(--vignette-x) var(--vignette-y), var(--vignette-color), transparent 75% ); } /* Direct children stack above the vignette · `.photo-credit` y `.hero-scroll-hint` se excluyen porque son `position: absolute` canónicos con anclaje propio (bottom-right y bottom-center respectivamente). El selector general los forzaba a `relative` → perdían su posicionamiento. IMPORTANTE: los `:not(...)` van envueltos en `:where()` para que no aporten especificidad. Si no, la regla pasaría de (0,1,0) a (0,3,0) y machacaría declaraciones page-scoped como `position: absolute` en `.exp-hero__media` / `.exp-movement__media`, descuadrando los hero full-bleed. */ .has-vignette > *:where(:not(.photo-credit):not(.hero-scroll-hint)) { position: relative; z-index: 1; } /* Intensity (the only documented modifier) */ .has-vignette--strong { --vignette-color: var(--vignette-strong); } /* ───────────────────────────────────────────────────────────────── .badge — unified contextual label (2026-04 DS-Web rename) Replaces .eyebrow-tag (mono pill), .plan-tier (sans pill in author credits), and .beta-badge (SVG inline with section title). ───────────────────────────────────────────────────────────────── */ /* Default badge — yellow outline pill, mono uppercase. Used standalone or inline with body text. Mono is the canonical typography for badges (firma técnica) — 2026-05. */ .badge { display: inline-block; padding: 3px 12px; background: transparent; border: 1px solid var(--yellow-5); border-radius: var(--radius-full); color: var(--yellow-5); font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; vertical-align: middle; } /* `.badge--mono` retired 2026-05 — mono is now the default. Selector kept as a no-op alias so older markup still validates. */ .badge--mono { /* intentionally empty — same as .badge default */ } /* Inline-with-title — sized RELATIVE to the parent heading so it shrinks/grows with the title. Combine with .badge--mono for the classic kicker-on-title pattern (e.g. "Captured Plans · BETA"). */ .badge--inline-title { font-size: 0.28em; padding: 0.35em 0.9em; letter-spacing: 2px; margin-left: 0.4em; position: relative; top: -0.4em; } /* `.badge--brand` y `.badge--huge` retirados 2026-05 — el SVG-Beta-mark se sustituyó por badge de texto mono (`Beta`) para mantener la coherencia tipográfica. Si en el futuro vuelve a hacer falta un badge tipo SVG/imagen, reintroducir el modifier. */ /* ── Legacy aliases — keep until all pages migrate to .badge. Both selectors behave identically to .badge for now. */ .eyebrow-tag, .plan-tier { display: inline-block; padding: 4px 14px; background: transparent; border: 1px solid var(--yellow-5); border-radius: var(--radius-full); color: var(--yellow-5); font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 500; letter-spacing: 0; line-height: 1.2; white-space: nowrap; vertical-align: middle; } /* `.section-title .badge--brand` y `.section-title .beta-badge` retirados 2026-05 junto con la migración SVG → texto mono (`.badge--inline-title`). Si vuelve a hacer falta un badge-imagen, restaurar estas reglas. */ /* =========================================================================== CARD · contenedor de contenido canónico (promovido al DS · 2026-08 · refundado sobre auditoría transversal de las 12 hojas · docs/DS-COMPONENT-AUDIT.md) Consolida la docena de cards que vivían sueltas por página (.mis-card, .review-card, .showcase-card, .award-card, .plan-card, .feature-tile, .sr-card…): todas resolvían lo mismo (foto opcional + tipo + título + texto en una caja) con recetas ligeramente distintas. Base tomada de `.mis-card` (la más completa del sitio); superficie unificada a `--gradient-subtle` (decisión Irene 2026-08 · el gradient "card on dark" del catálogo). Esta es la única card del sistema; las demás se migran poco a poco. Superficie = `--gradient-subtle` + filete `--border-neutral-soft` + `--radius-l`. Hover (solo en --link): lift 2px + filete más claro + shadow-soft + zoom 1.04 de la foto (patrón .mis-card). Media opcional. Reutiliza otros componentes por dentro — NO duplicar: tags → `.badge`, autor → `.author-credit`, rating → `.app-rating`. Anatomía: .card contenedor (columna: media opcional + body) .card--link toda la card es · lift + zoom de foto + foco al hover .card--compact grids densos (resultados, listados): padding y tipo un paso más pequeños; mismo radius para coherencia .card--light superficie CLARA (blanca) · para bandas on-light (guías, artículo, mapas Dolomites) .card__media franja de imagen/vídeo arriba · ratio vía --card-ratio .card__play afordancia de play (overlay) para media de vídeo .card__icon icono (alternativa al media · feature-tile) .card__body padding + columna + gap .card__eyebrow metadato mono (tipo/categoría) · yellow uppercase .card__meta-row fila eyebrow + meta (space-between) .card__meta píldora mono de dato (duración, tiempo de lectura) .card__title sans 600 (título) .card__text sans weak (descripción) .card__footer meta mono separada por filete (fecha, fuente…) .card__actions fila de botones/CTA al pie (ver regla de interacción) Extensiones de dominio (NO en la base) que viven en su página: los datos de misión (.card--mission → facts/availability/sold-out) y los de precio (chip/amount/per). Ver el documento de auditoría. =========================================================================== */ .card { display: flex; flex-direction: column; background: var(--gradient-subtle); border: 1px solid var(--border-neutral-soft); border-radius: var(--radius-l); overflow: hidden; color: var(--content-text-default); } /* Card enlazada — toda la tarjeta es un . Sin subrayado + el hover canónico de .mis-card: lift 2px + filete más claro + shadow-soft. */ a.card, .card--link { text-decoration: none; transition: border-color var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out); } a.card:hover, .card--link:hover { border-color: color-mix(in srgb, var(--gray-white) 24%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-soft); } a.card:focus-visible, .card--link:focus-visible { outline: 2px solid var(--yellow-5); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { a.card:hover, .card--link:hover { transform: none; } } /* Media — imagen o vídeo arriba. Ratio configurable por instancia con --card-ratio (default 16/10 · usa 4/3, 1/1… según el listado). */ .card__media { position: relative; margin: 0; aspect-ratio: var(--card-ratio, 16 / 10); overflow: hidden; background: var(--gradient-subtle); } .card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-glide) var(--ease-out); } /* Zoom sutil de la foto al hover de una card enlazada (patrón .mis-card). */ a.card:hover .card__media img, a.card:hover .card__media video, .card--link:hover .card__media img, .card--link:hover .card__media video { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { a.card:hover .card__media img, a.card:hover .card__media video, .card--link:hover .card__media img, .card--link:hover .card__media video { transform: none; } } /* Afordancia de play — para cards de vídeo (icono SVG dentro, sin literal). */ .card__play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: var(--radius-circle); background: rgba(0, 0, 0, 0.55); color: var(--gray-white); display: flex; align-items: center; justify-content: center; } .card__play svg { width: 18px; height: 18px; display: block; } /* Body */ .card__body { display: flex; flex-direction: column; gap: var(--sp-s); padding: clamp(18px, 1.8vw, 24px); } /* Icono — alternativa al media para cards sin foto (feature-tile: icono + nombre + desc). Va arriba del body. Color de acento por defecto. */ .card__icon { width: 32px; height: 32px; color: var(--content-text-highlight); } .card__icon svg { width: 100%; height: 100%; display: block; } /* Icono desde un asset SVG vía mask-image, tintado con el acento (reutiliza el SVG sin tocarlo · feature-tiles). La URL va por inline `style="--icon:url()"`. */ .card__icon--mask { background-color: var(--content-text-highlight); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* Eyebrow / tipo — metadato mono pequeño (categoría, tipo de contenido). Mono es correcto aquí: es metadato, no acción ni título. */ .card__eyebrow { font-family: var(--font-mono); /* 14px (2026-08 · decisión de Irene): el eyebrow es lo que ORDENA la card — dice de qué tipo es — y a 12 se leía como una nota al pie. Sube un peldaño del ramp mono. La píldora `.card__meta` NO le acompaña: se queda en 12 porque es dato secundario, y esa diferencia de tamaño es jerarquía deliberada dentro de `.card__meta-row`, no un descuadre. */ font-size: var(--text-mono-md); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--content-text-highlight); margin: 0; } /* Meta-row — antetítulo + dato mono a la derecha, en la MISMA fila. Es la cabecera de metadatos de una card de listado (Videos, Guides, Search). */ .card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Meta — píldora mono compacta con el dato del item ("28 min", "14 min read"). Promovida al DS 2026-08 desde `.vid-duration` (Videos) + `.gd-readtime` (Guides), que eran idénticas; Search es el tercer uso. Distinta de `.chip` (píldora sans, más grande, es etiqueta/filtro clicable): ésta es metadato pasivo dentro de una card. */ .card__meta { flex: none; font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--content-text-default); background: color-mix(in srgb, var(--gray-white) 10%, transparent); border-radius: var(--radius-full); padding: 2px 8px; letter-spacing: 0.02em; white-space: nowrap; } .card--light .card__meta { background: color-mix(in srgb, var(--gray-black) 8%, transparent); color: var(--content-text-on-light-default); } /* Título — sans 600 (regla universal de títulos del DS). */ .card__title { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--content-text-default); margin: 0; } /* Texto / descripción */ .card__text { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 300; line-height: 1.5; color: var(--content-text-default-weak); margin: 0; } /* Footer — meta mono separada por filete (autor, fecha, fuente, rating…). */ .card__footer { margin-top: var(--sp-xs); padding-top: var(--sp-default); border-top: 1px solid var(--border-neutral-soft); font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.02em; color: var(--content-text-default-weak); } .card__footer strong { color: var(--content-text-default); font-weight: 500; } /* Actions — fila de botones/CTA al pie del body (masters "Conócele", pricing, misiones con 2 CTAs). Reutiliza `.btn` / `.cta-row` por dentro. ⚠️ REGLA DE INTERACCIÓN: una card con `.card__actions` (botones reales) NO puede ser `` / `.card--link` — un / El comportamiento (swap del contenido al pulsar, auto-advance) lo gestiona JS en cada página. ════════════════════════════════════════════════════════════════════════════ */ .tablist { display: inline-flex; padding: 4px; background: var(--gradient-subtle); border: 1px solid var(--border-neutral-soft); border-radius: var(--radius-full); gap: 2px; } .tablist__item { appearance: none; background: transparent; border: 0; color: var(--content-text-default-weak); font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 500; letter-spacing: 0; padding: 10px 18px; border-radius: var(--radius-full); cursor: pointer; transition: color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out); } .tablist__item:hover { color: var(--content-text-default); background: rgba(255, 255, 255, 0.04); } .tablist__item.is-active, .tablist__item[aria-selected="true"] { color: var(--bg-bold); background: var(--color-action-default); } /* La tab ACTIVA se queda en el amarillo vivo también al hover. NO oscurecer con `--color-action-bold`: sobre amarillo, "bold" (#988216) vira a mostaza oliva y la tab parece deshabilitada (bug recurrente de tabs — oct 2026). Una tab ya seleccionada no necesita feedback de hover. */ .tablist__item.is-active:hover, .tablist__item[aria-selected="true"]:hover { background: var(--color-action-default); } .product-grid--reverse .laptop-showcase { order: 1; } .product-copy { max-width: 48ch; } .product-copy .section-title { text-align: left; margin-bottom: 1.25rem; } .product-copy .pitch-cta { /* Visuals from .cta-row + .cta-row--start; only the section-specific bottom margin lives here. */ margin: 0 0 1rem; } .product-copy .store-price { text-align: left; margin: 0; } .product-copy > .section-rule { margin: 0 0 2rem; } .pitch-cta { /* Visuals from .cta-row in common.css; just the top spacing here. */ margin-top: 2.5rem; } .pm-chip-active { color: var(--gray-9); } .product-copy .section-subtitle { font-size: var(--text-editorial-subtitle); line-height: 1.125; font-weight: 300; text-align: left; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 2rem; } .product-section--app .product-copy .section-subtitle { font-weight: 300; } .pm-icon { color: var(--yellow-5); } .pm-ar-delta { color: var(--yellow-5); } .pm-shoot-time { color: var(--yellow-5); } .section-lead { line-height: var(--lh-body); } .pitch-body { font-size: clamp(var(--text-body-lg), 2.2vw, var(--text-lead)); line-height: var(--lh-body); font-weight: 300; color: var(--content-text-subtitle); } .product-copy .pitch-body { font-size: var(--text-editorial-body); line-height: 1.2; font-weight: 300; text-align: left; margin: 0 0 2rem; } .product-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: clamp(48px, 6vw, 96px); } .product-grid--reverse { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } @media (max-width: 1024px) { .product-grid { /* minmax(0, 1fr) — NO `1fr` a secas (QA #72): un `1fr` crece hasta el min-content de su contenido, y el showcase de móviles de The App (~354px, dos teléfonos) forzaba la columna a 354 en un área de 311 → arrastraba la columna de copy y el párrafo se CORTABA por la derecha ("...imagined" / "Exact" recortados). minmax(0,...) fija la pista al área disponible (igual que el grid de escritorio). */ grid-template-columns: minmax(0, 1fr); gap: 3rem; min-height: auto; } .product-grid--reverse .product-copy { order: 1; } .product-grid--reverse .laptop-showcase { order: 2; } .product-copy { max-width: 100%; text-align: center; } .product-copy .eyebrow, .product-copy .section-title, .product-copy .section-subtitle, .product-copy .pitch-body, .product-copy .store-price { text-align: center; } .product-copy .pitch-cta { justify-content: center; } .product-copy > .section-rule { margin-left: auto; margin-right: auto; } .app-showcase { justify-content: center; gap: 12px; } .laptop-showcase { justify-content: center; } .laptop-mockup { transform: none; /* Capeamos el mockup al 88% del column track para que la .laptop-base (que es 112% del mockup con margin-left -6%) NO sobresalga del track ni del .container. Sin esto, el body overflow-x: hidden recorta el base por la derecha en viewports estrechos. 88% × 1.12 = 98.56% del track → base cabe entera. */ width: 88%; max-width: 480px; margin-left: 0; } } /* ════════════════════════════════════════════════════════════════════════════ STATEMENT SLIDE ════════════════════════════════════════════════════════════════════════════ */ .statement-slide { position: relative; background: var(--bg-neutral-bold, #010B18); min-height: 100svh; padding: clamp(64px, 7vw, 96px) var(--gutter); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; } .statement-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; width: 100%; } .statement-logo { display: inline-block; margin-bottom: 2.5rem; opacity: 0; transform: translateY(16px) scale(0.95); filter: blur(8px); transition: opacity var(--dur-glide) var(--ease-soft), transform var(--dur-glide) var(--ease-soft), filter var(--dur-glide) var(--ease-soft); } .statement-slide.is-visible .statement-logo { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* Shared hero tagline — used by home and landing heroes. Top of the weight hierarchy (500 > section-title 400 > statement-headline 300). Overridable per page if a softer tone is needed (experiences: 300). */ .hero-tagline { font-family: var(--font-sans); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--lh-display); font-feature-settings: 'ss01' on; font-size: clamp(var(--text-heading-xl), 8vw, var(--text-display-lg)); color: var(--gray-white); margin: 0 0 2rem; } .statement-headline { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; font-feature-settings: 'ss01' on; font-size: clamp(var(--text-heading-lg), 6.5vw, var(--text-display-lg)); color: var(--gray-white); margin: 0; } .statement-line { display: block; } .statement-line-2 { margin-top: 0.5em; } .statement-headline .word { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(10px); transition: opacity var(--dur-glide) var(--ease-soft), transform var(--dur-glide) var(--ease-soft), filter var(--dur-glide) var(--ease-soft); } .statement-slide.is-visible .word { opacity: 1; transform: translateY(0); filter: blur(0); } /* Per-word transition-delay is assigned by script.js at runtime so the stagger works for any language / word count. See: "Statement headline dynamic delays" in script.js. */ @media (prefers-reduced-motion: reduce) { .statement-logo, .statement-headline .word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* Bridge variant — a standalone transition statement between two sections, set against pure black so it reads as the dramatic pause-point of the page. */ .statement-slide--bridge { background: var(--gray-black); } .statement-slide--bridge .statement-inner { max-width: var(--max-wide); } /* ============================================================================= LEAFLET · CONTROLES UNIFICADOS DEL DS Patrón compartido para CUALQUIER mapa Leaflet de la web (Missions, plan maps de expedición, futuros mapas editoriales). Antes vivía duplicado en `missions/style.css` y `dolomites-068-oct-2027/style.css` — al unificarlo aquí garantizamos que todos los mapas hablen el mismo idioma visual (zoom como tab capsule `.btn-dark`, atribución mono discreta, contenedor con bg-bold). Si una página necesita variaciones (e.g. atribución full-width con text-shadow en Missions, o tunning específico de tiles), las hace localmente sobre estos defaults. NO redefinir el control de zoom por página — debe ser idéntico en toda la web. ============================================================================= */ /* Contenedor base · fondo bold del DS + fuente sans para overlays. */ .leaflet-container { background: var(--bg-bold); font-family: var(--font-sans); } /* Controles de zoom (+/−) · diseño TAB CAPSULE estilo `.btn-dark` (gray-11 + hover flip a blanco). Iconos SVG inyectados por JS (los caracteres tipográficos `+` y `−` no se centran consistentemente entre fuentes — el SVG centra por viewBox). ATENCIÓN: Leaflet aplica border-radius asimétrico a :first-child y :last-child con especificidad (0,2,2). Para ganarle usamos selectores con la clase específica de cada botón (.leaflet-control-zoom-in / .leaflet-control-zoom-out → 0,2,1 → empata pero gana por orden de carga, ya que `common.css` siempre va DESPUÉS de `leaflet.css`). */ .leaflet-control-zoom { border: 0; box-shadow: var(--shadow-strong); background: transparent; margin: clamp(12px, 1.6vw, 18px); border-radius: var(--radius-full); overflow: hidden; } .leaflet-bar a.leaflet-control-zoom-in, .leaflet-bar a.leaflet-control-zoom-out { background: var(--gray-11); color: var(--gray-white); border: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; border-radius: 0; transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), opacity var(--dur-instant) var(--ease-out); } .leaflet-bar a.leaflet-control-zoom-in { border-bottom: 1px solid var(--border-neutral-soft); } .leaflet-bar a.leaflet-control-zoom-in:hover, .leaflet-bar a.leaflet-control-zoom-out:hover { background: var(--gray-white); color: var(--gray-9); } .leaflet-bar a.leaflet-control-zoom-in:active, .leaflet-bar a.leaflet-control-zoom-out:active { background: var(--gray-1); color: var(--gray-9); } /* Disabled · atenua al llegar al zoom mínimo/máximo. NO se oculta — el affordance siempre visible permite al usuario entender los límites. */ .leaflet-bar a.leaflet-control-zoom-in.leaflet-disabled, .leaflet-bar a.leaflet-control-zoom-out.leaflet-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .leaflet-bar a.leaflet-control-zoom-in.leaflet-disabled:hover, .leaflet-bar a.leaflet-control-zoom-out.leaflet-disabled:hover { background: var(--gray-11); color: var(--gray-white); } /* Atribución · estilo discreto mono del DS. Por defecto Leaflet pone bg blanco con texto oscuro — lo invertimos. Variaciones (e.g. Missions con text-shadow + full-width) se hacen localmente sobre este default. */ .leaflet-control-attribution { background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.6); font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: 0.04em; padding: 4px 10px; } .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.75); } .leaflet-control-attribution a:hover { color: var(--content-text-highlight); } /* ============================================================================= COOKIE / CMP · banner de consentimiento + panel de preferencias granular Chrome global (LSSI 22.2 · "Aceptar" y "Rechazar" al mismo nivel, sin casillas no esenciales premarcadas). Se muestra en la 1ª visita (JS · sin consentimiento guardado) y se reabre desde "Cookie settings" del footer. ========================================================================== */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); padding: 16px var(--gutter); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--bg-bold); /* negro puro */ border-top: 1px solid var(--border-neutral-soft); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4); } .cookie-banner[hidden] { display: none; } .cookie-banner__inner { max-width: var(--max-wide); margin: 0 auto; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; } .cookie-banner__text { flex: 1 1 320px; min-width: 0; } .cookie-banner__title { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 600; color: var(--content-text-default); margin: 0 0 4px; } .cookie-banner__body { font-family: var(--font-sans); font-size: var(--text-body-xs); line-height: 1.45; color: var(--content-text-default-weak); margin: 0; max-width: 68ch; } .cookie-banner__body a { color: var(--content-link-default); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } /* Panel de preferencias (modal) */ .cookie-prefs { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 1); } .cookie-prefs[hidden] { display: none; } .cookie-prefs__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .cookie-prefs__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 520px); max-height: min(86vh, 640px); overflow-y: auto; background: var(--bg-neutral-default); border: 1px solid var(--border-neutral-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-strong); padding: clamp(20px, 3vw, 32px); } .cookie-prefs__title { font-family: var(--font-sans); font-size: var(--text-heading-sm); font-weight: 600; color: var(--content-text-default); margin: 0 0 8px; } .cookie-prefs__intro { font-size: var(--text-body-sm); color: var(--content-text-default-weak); line-height: 1.5; margin: 0 0 20px; } .cookie-prefs__list { list-style: none; margin: 0 0 20px; padding: 0; } .cookie-cat { padding: 14px 0; border-top: 1px solid var(--border-neutral-soft); } .cookie-cat:first-child { border-top: 0; } .cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cookie-cat__name { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 600; color: var(--content-text-default); } .cookie-cat__always { font-family: var(--font-mono); font-size: var(--text-mono-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--content-text-default-weak); } .cookie-cat__desc { font-size: var(--text-body-xs); color: var(--content-text-default-weak); line-height: 1.45; margin: 6px 0 0; max-width: 52ch; } .cookie-prefs__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } /* Interruptor (switch) */ .cookie-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; } .cookie-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .cookie-switch__track { position: absolute; inset: 0; background: var(--gray-7); border-radius: var(--radius-full); transition: background var(--dur-instant) var(--ease-out); } .cookie-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--gray-white); transition: transform var(--dur-instant) var(--ease-out); } .cookie-switch input:checked + .cookie-switch__track { background: var(--yellow-5); } .cookie-switch input:checked + .cookie-switch__track::after { transform: translateX(18px); } .cookie-switch input:focus-visible + .cookie-switch__track { outline: 2px solid var(--yellow-5); outline-offset: 2px; } @media (max-width: 720px) { .cookie-banner__actions { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .cookie-switch__track, .cookie-switch__track::after { transition: none; } }