/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/apple/tokens.css
 *
 * Structured token bindings for the Apple-inspired design system —
 * a precision editorial language built around white-space discipline,
 * SF Pro typography, and a single restrained blue accent. This file
 * is the *machine-readable* form of the values described in
 * `DESIGN.md`. Agents are expected to paste the `:root { … }` block
 * verbatim into the first `<style>` of every artifact they generate
 * against this design system, then reference everything via
 * var(--name) from then on.
 *
 * Why this file exists:
 *   DESIGN.md tells humans that Apple uses "Pale Apple Gray (#f5f5f7)
 *   as the main light surface" and "Apple Action Blue (#0071e3) as the
 *   primary accent", but agents have to translate those prose names
 *   into the standard token names the lint enforces (`--surface`,
 *   `--accent`). That translation step is where token misuse happens.
 *   This file pre-translates the brand once, so agents copy structure
 *   instead of inventing it.
 *
 * Brand-specific schema decisions (non-obvious bindings worth flagging
 * for reviewers and downstream brand authors):
 *   1. We bind --surface-warm to a real intermediate tier (#fbfbfd),
 *      NOT an alias of --surface. Apple's surface ladder genuinely has
 *      three light stops — pure white retail canvas, near-white
 *      brightness-shifted bands, and pale Apple gray feature fields —
 *      so collapsing surface-warm would erase a real brand feature.
 *   2. We bind --fg-2, --meta, and --border-soft to independent values
 *      rather than aliases. Apple's neutral text ramp is famously
 *      four-stop (Near-Black Ink → Utility Dark Gray → Secondary
 *      Neutral Gray → Mid Border Gray) and the schema's B-slots map
 *      onto it cleanly.
 *   3. --radius-pill is bound to 980px, not 9999px. Apple's signature
 *      capsule CTA literally uses 980px in published CSS, and the
 *      number is itself a brand-recognisable detail; we keep it.
 *   4. --accent-hover lifts (#0077ed) instead of darkening. Apple's
 *      live blue buttons brighten slightly on hover rather than mix
 *      toward black; the schema's default formula would fight that.
 *      --accent-active darkens to #0066cc — the documented Body Link
 *      Blue — so the active state aligns with Apple's read-link tone.
 *   5. --tracking-display is -0.015em. The DESIGN.md hierarchy lists
 *      -1.2px on 80px hero (-0.015em); tighter than that breaks at
 *      smaller display sizes, looser loses Apple's machined feel.
 *   6. --section-y-desktop is 100px. Apple's billboard chapters lean
 *      noticeably more generous than the schema default of 80px — the
 *      breathing room is what lets product imagery do the talking.
 *   7. --ease-standard is cubic-bezier(0.28, 0, 0.22, 1), an Apple-
 *      flavoured smooth-out instead of the schema default. Apple
 *      transitions decelerate hard then settle, never bounce.
 *
 * Contract sources:
 *   - Standard token names: design-systems/_schema/tokens.schema.ts
 *       (TOKEN_SCHEMA — every name below appears there or as an
 *        explicit B-slot alias.)
 *   - A2 fallback values: design-systems/_schema/defaults.css
 *       (We override --motion-base, --ease-standard, --elev-raised,
 *        --focus-ring, --radius-pill; the rest match defaults.)
 *   - Lint enforcement: apps/daemon/src/lint-artifact.ts
 *       (raw-hex >12 outside :root → P1; non-token accent → P0)
 *
 * Keep this file additive: never invent token names not also documented
 * in DESIGN.md or the shared schema. New Apple-derived sub-brands
 * cloning this template should overwrite values, not rename keys.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface (3 levels) ──────────────────────────────────────────
   * Apple's binary section rhythm alternates pure white retail/hero
   * canvases with pale Apple gray feature fields. We bind --bg to
   * the white canvas (the most common default Apple page background)
   * and --surface to the pale gray that cards and feature bands lift
   * onto. --surface-warm is bound to a real third tier (#fbfbfd) —
   * the near-white brightness shift that appears between hero and
   * pale-gray bands on apple.com. Collapsing it to var(--surface)
   * would erase a real brand feature, so we keep it independent. */
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-warm: #fbfbfd;

  /* ─── Foreground ramp (4 levels) ─────────────────────────────────
   * Apple's text neutrals are explicitly named in DESIGN.md §2:
   * Near-Black Ink (primary), Utility Dark Gray (secondary text /
   * dark-neutral surfaces in store contexts), Secondary Neutral Gray
   * (helper copy / tertiary metadata), Mid Border Gray (the strongest
   * neutral, used for stronger field outlines and the most-restrained
   * caption tier). We bind all four — Apple genuinely walks the full
   * ramp, so collapsing --fg-2 or --meta to siblings would flatten
   * the brand.
   *
   * Note that none of these are pure black (#000000). #000000 is
   * reserved for hero canvases and dark chapters; for body type on
   * white, #1d1d1f gives the slight warmth that reads as Apple. */
  --fg: #1d1d1f;
  --fg-2: #424245;
  --muted: #6e6e73;
  --meta: #86868b;

  /* ─── Border (2 levels) ──────────────────────────────────────────
   * Soft Border Gray (#d2d2d7) is Apple's default divider weight and
   * card-edge color. --border-soft is bound to a lighter near-neutral
   * (#e8e8ed) for inner row separators in dense retail tables and
   * configurator option lists, where the d2d2d7 hairline would
   * over-compete with the option labels. */
  --border: #d2d2d7;
  --border-soft: #e8e8ed;

  /* ─── Accent ──────────────────────────────────────────────────────
   * Apple Action Blue — the system's only persistent chromatic move.
   * DESIGN.md §7 ("Don't introduce broad secondary accent palettes
   * that compete with Apple blue") makes this a one-color brand for
   * action and link semantics; the schema's hard cap of ≤2 visible
   * accent uses per screen aligns naturally. */
  --accent: #0071e3;
  --accent-on: #ffffff; /* white label on the blue fill */

  /* ─── Accent states ───────────────────────────────────────────────
   * Apple's live primary buttons LIGHTEN on hover (the blue gains
   * luminance) and darken on press. The schema's default black-mix
   * formula would fight that motion, so we hand-pick both values:
   *   - hover: #0077ed (≈ 4% brighter than --accent)
   *   - active: #0066cc (the documented Body Link Blue from DESIGN.md
   *             §2, which doubles cleanly as the press tone)
   *
   * Schema rule: every brand provides --accent-hover and
   * --accent-active. The binding strategy (formula / hand-picked /
   * identity) is brand-decided. Default uses formulas; kami uses
   * identity + hand-picked; Apple uses hand-picked in both
   * directions. */
  --accent-hover: #0077ed;
  --accent-active: #0066cc;

  /* ─── Semantic ────────────────────────────────────────────────────
   * Apple's DESIGN.md §2 explicitly notes "no distinct semantic
   * palette was consistently visible in the extracted surface set" —
   * so we inherit the schema defaults verbatim. Apple artifacts
   * almost never need success / warn / danger; when they do, the
   * defaults are restrained enough not to fight the blue accent.
   * Reserve under 5% of any surface area regardless. */
  --success: #16a34a;
  --warn:    #eab308;
  --danger:  #dc2626;

  /* ─── Typography ──────────────────────────────────────────────────
   * Apple's documented split is two SF Pro families: SF Pro Display
   * for hero / merchandising headings, SF Pro Text for navigation,
   * controls, and dense commerce copy. We mirror the exact published
   * fallback chain (SF Pro Icons → Helvetica Neue → Helvetica → Arial
   * → sans-serif) so artifacts rendered on non-macOS clients land on
   * the closest practical substitute.
   *
   * SF Mono leads the monospace stack — Apple's brand mono — with
   * the schema fallbacks behind it for portability. */
  --font-display:
    "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:
    "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:
    "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
   * Apple's body baseline is 17px (NOT the 16px web norm) because
   * SF Pro Text was metrically tuned at 17 for Retina; rebinding
   * --text-base to anything else collapses the brand's reading
   * texture. The display ceiling is the 80px Hero Display XL. */
  --text-xs:   12px;   /* Micro UI — fine print, micro labels */
  --text-sm:   14px;   /* Control Label — buttons, helper labels */
  --text-base: 17px;   /* Body Primary — Apple's reading baseline */
  --text-lg:   21px;   /* Link/Action Heading — large promo links */
  --text-xl:   28px;   /* Card/Product Title — tile-level naming */
  --text-2xl:  40px;   /* Product Heading — campaign section titles */
  --text-3xl:  56px;   /* Hero Display L — homepage hero moments */
  --text-4xl:  80px;   /* Hero Display XL — Environment / store hero */

  /* Apple's leading envelope is unusually tight at the top of the
   * scale (display sizes ride at 1.00–1.10) and unusually airy in
   * the body (1.47, well above the web 1.4 default). Both numbers
   * come straight from DESIGN.md §3. */
  --leading-body:  1.47;   /* SF Pro Text body, 17px */
  --leading-tight: 1.05;   /* Hero Display XL ceiling */

  /* Display tracking compresses to -0.015em — the famous Apple
   * machined-headline feel. DESIGN.md §3 lists -1.2px on 80px
   * (≈ -0.015em); we bind a single em-value so the same rule applies
   * across the display tiers. Body type runs at 0 / -0.374px and is
   * left to component-level rules so as not to hurt readability. */
  --tracking-display: -0.015em;

  /* ─── Spacing ─────────────────────────────────────────────────────
   * Apple's underlying grid is 8px (DESIGN.md §5), with utility
   * micro-steps (2/4/6/7/8/9/10) for precision alignment. The shared
   * schema's 4-8-12-16-20-24-32-48 scale fits cleanly — we inherit
   * the defaults. Component-internal values that don't match a token
   * (Apple's 14px or 17px utility intervals) stay inline at the
   * call site rather than spawning extra spacing tokens. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── Section rhythm ──────────────────────────────────────────────
   * Apple's billboard chapters lean noticeably more generous than the
   * schema default of 80px — broad top/bottom breathing room is what
   * lets product imagery dominate the page. We bind 100/64/40, a
   * slightly wider envelope than default's 80/48/32. */
  --section-y-desktop: 100px;
  --section-y-tablet:  64px;
  --section-y-phone:   40px;

  /* ─── Radius ──────────────────────────────────────────────────────
   * Apple uses purposeful radius tiers (DESIGN.md §5 §7 — "don't
   * flatten all corners to a single radius"). The mapping:
   *   --radius-sm   → 8px   compact controls and fields
   *   --radius-md   → 12px  standard buttons, configurator chips
   *   --radius-lg   → 18px  cards, module frames, commerce panels
   *   --radius-pill → 980px Apple's signature capsule CTA — we keep
   *                          the literal value rather than collapse
   *                          to 9999px because the number itself is
   *                          a brand-recognisable detail in Apple's
   *                          published CSS.
   *
   * The 28-36px spotlight tier and the 56px capsule sub-tier are
   * component-internal one-offs and stay inline — they do not earn
   * their own tokens until a second use appears. */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 980px;

  /* ─── Elevation (3 levels) ────────────────────────────────────────
   * Apple uses depth sparingly (DESIGN.md §6 — "depth is intentionally
   * restrained"). Three sanctioned levels:
   *   - flat   → none (the default; tonal contrast does the work)
   *   - ring   → 0 0 0 1px var(--border) (border-led containment in
   *              dense retail contexts)
   *   - raised → 0 12px 32px rgba(0,0,0,0.08) (the soft Apple card
   *              shadow; rgba 0.08 is the lower bound from DESIGN.md
   *              §6's "0.08 → 0.22" range, which keeps cards from
   *              feeling Material-flavoured)
   *
   * No fourth level — that would be the Material/neumorphism stack
   * Apple consciously avoids. */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* ─── Focus ring ──────────────────────────────────────────────────
   * Apple's keyboard-focus signal is a soft blue glow at the action
   * accent (DESIGN.md §6 — "Blue focus signal (#0071e3) for keyboard
   * and selection emphasis"). We use a 4px ring at ~35% accent
   * opacity, slightly larger than the schema's 3px default so it
   * reads as the deliberate Apple halo rather than a generic outline.
   * Implemented as a box-shadow so it layers outside the element
   * without affecting layout. */
  --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);

  /* ─── Motion ──────────────────────────────────────────────────────
   * Apple transitions decelerate hard and settle — never bounce,
   * never spring past the target. We override the schema default
   * easing with cubic-bezier(0.28, 0, 0.22, 1), the curve Apple
   * uses on apple.com for hover and section reveals; --motion-base
   * is bumped from 200ms → 220ms because Apple's micro-interactions
   * carry slightly more cinematic weight than the web default.
   * --motion-fast stays at 150ms for true micro-states (hover tints,
   * focus, kbd press feedback). */
  --motion-fast:   150ms;
  --motion-base:   220ms;
  --ease-standard: cubic-bezier(0.28, 0, 0.22, 1);

  /* ─── Layout ──────────────────────────────────────────────────────
   * Apple's marketing core is a constrained readable column with
   * generous outer margins (DESIGN.md §5). 1024px max keeps lines
   * inside the SF Pro Text comfortable-measure ceiling (~80ch at
   * 17px) while leaving the chapter band full-bleed. Gutters step
   * 22 → 18 → 16 across desktop / tablet / phone — slightly tighter
   * than default to honor Apple's "broad horizontal breathing room
   * but column-disciplined content" balance. */
  --container-max:            1024px;
  --container-gutter-desktop: 22px;
  --container-gutter-tablet:  18px;
  --container-gutter-phone:   16px;
}

/* Texto fijo sobre capítulos negros (hero, atelier, footer, nav): siempre
   pálido, independiente del tema, porque esos fondos nunca cambian.
   No es un token de marca: es una constante de tema que evita repetir
   oklch(0.955 0.003 250) veinte veces. */
:root { --on-dark: oklch(0.955 0.003 250); }

/* Capítulos negros (hero, cinema, atelier, footer, nav) y su texto.
   En modo claro se invierten a superficie/fg claros para que el toggle
   produzca una interfaz clara de verdad, no solo en 4 secciones. */
:root {
  --chapter-bg: oklch(0 0 0);
  --chapter-fg: var(--on-dark);
  --chapter-border: color-mix(in srgb, oklch(1 0 0) 14%, transparent);
  --chapter-scrim-a: oklch(0 0 0 / 0.45);
  --chapter-scrim-b: oklch(0 0 0 / 0.55);
  --chapter-eyebrow: oklch(0.74 0.012 250);
  --nav-bg: color-mix(in srgb, oklch(0.14 0.004 250) 72%, transparent);
  --nav-border: color-mix(in srgb, oklch(1 0 0) 8%, transparent);
}
:root[data-theme="light"] {
  --chapter-bg: var(--bg);
  --chapter-fg: var(--fg);
  --chapter-border: var(--border);
  --chapter-scrim-a: oklch(1 0 0 / 0.5);
  --chapter-scrim-b: oklch(1 0 0 / 0.62);
  --chapter-eyebrow: var(--muted);
  --nav-bg: color-mix(in srgb, var(--bg) 82%, transparent);
  --nav-border: color-mix(in srgb, var(--fg) 10%, transparent);
}

/* ── Tema oscuro ────────────────────────────────────────────────
   Los capítulos negros se mantienen negros; solo se invierten las
   superficies claras (colección, configurador, visita, tarjetas). */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --surface-warm: #222222;
  --fg: #f0f0f0;
  --fg-2: #cccccc;
  --muted: #727272;
  --meta: #8a8a8a;
  --border: #333333;
  --border-soft: #2a2a2a;
  --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-warm: #fbfbfd;
  --fg: #111111;
  --fg-2: #424245;
  --muted: #666666;
  --meta: #86868b;
  --border: #d2d2d7;
  --border-soft: #e8e8ed;
  --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ── Base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--fg); text-decoration: none; }
ul { list-style: none; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--fg); color: var(--surface);
  padding: 12px 20px; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: var(--space-3); top: var(--space-3); }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
.section { padding-block: var(--section-y-desktop); }
.dark { background: var(--chapter-bg); color: var(--chapter-fg); }

.eyebrow {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.dark .eyebrow { color: var(--chapter-eyebrow); }
.muted { color: var(--muted); }
.dark .muted { color: color-mix(in srgb, var(--chapter-fg) 70%, transparent); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--fg);
}
.dark h1, .dark h2, .dark h3 { color: var(--chapter-fg); }
h1 { font-size: clamp(44px, 6vw, 64px); }
h2 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.012em; }
h3 { font-size: var(--text-xl); }
.lead { font-size: var(--text-lg); color: var(--muted); max-width: 52ch; }
.dark .lead { color: color-mix(in srgb, var(--chapter-fg) 72%, transparent); }

.section-head { margin-bottom: var(--space-12); }
.section-head h2 { margin-top: var(--space-4); }
.section-head .lead { margin-top: var(--space-4); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em;
  border: 0; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-dark { background: color-mix(in srgb, var(--chapter-fg) 14%, transparent); color: var(--chapter-fg); }
.btn-dark:hover { background: color-mix(in srgb, var(--chapter-fg) 22%, transparent); }
.btn-dark:active { background: color-mix(in srgb, var(--chapter-fg) 30%, transparent); }
.btn-lg { min-height: 48px; padding: 0 30px; }

.btn:focus-visible,
.chip:focus-visible,
a:focus-visible,
button:focus-visible,
.nav-burger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--nav-border);
}
.nav-inner {
  height: 56px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-6);
}
.nav-brand {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.24em; color: var(--chapter-fg);
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--chapter-fg) 82%, transparent);
  transition: color var(--motion-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--chapter-fg); }
.nav-links .nav-cta { color: var(--chapter-fg); }
.nav-cta { padding-block: 6px; border-bottom: 1px solid color-mix(in srgb, var(--chapter-fg) 40%, transparent); }
.nav-burger {
  display: none; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { width: 20px; height: 2px; background: var(--chapter-fg); border-radius: 2px; transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard); }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Theme toggle ─────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: none; border: 0; border-radius: 50%;
  color: var(--chapter-fg); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.theme-toggle:hover { background: color-mix(in srgb, var(--chapter-fg) 14%, transparent); }
.theme-toggle:active { background: color-mix(in srgb, var(--chapter-fg) 22%, transparent); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  padding-block: calc(var(--space-12) + 56px) var(--section-y-desktop);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; }
.hero .eyebrow { margin-bottom: var(--space-6); }
.hero-sub {
  margin-top: var(--space-6); max-width: 46ch;
  font-size: var(--text-lg); line-height: 1.4;
  color: color-mix(in srgb, var(--chapter-fg) 72%, transparent);
}
.hero-ctas { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.hero-note { margin-top: var(--space-6); font-size: var(--text-xs); color: color-mix(in srgb, var(--chapter-fg) 50%, transparent); letter-spacing: 0.02em; }

.hero h1 .gold {
  color: oklch(0.72 0.13 85);
  background: linear-gradient(115deg, oklch(0.86 0.13 88), oklch(0.60 0.13 82) 46%, oklch(0.82 0.13 92) 62%, oklch(0.52 0.11 75));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-figure {
  position: relative; width: 100%; max-width: 460px; margin-inline: auto;
  aspect-ratio: 4 / 5; max-height: 78svh;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chapter-fg) 16%, transparent);
  background: #000;
  box-shadow: 0 30px 80px -24px color-mix(in srgb, oklch(0.72 0.13 85) 45%, transparent), var(--elev-raised);
}
.hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-copy { animation: hero-rise 720ms var(--ease-standard) both; }
.hero-visual { animation: hero-rise 720ms var(--ease-standard) 140ms both; }



/* ── Collection ───────────────────────────────────────────────── */
.collection { background: var(--surface); }
.collection .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); }
.collection .section-head .head-left { max-width: 560px; }
.collection .section-head .head-left h2 { margin-top: var(--space-4); }
.collection .section-head .head-left .lead { margin-top: var(--space-4); }
.head-link {
  flex: none; font-size: var(--text-sm); color: var(--fg);
  border-bottom: 1px solid var(--border); padding-block: 6px;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.head-link:hover { border-color: var(--meta); }

.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.card {
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--elev-raised); }
.card-media { background: var(--surface); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; }
.card-media svg { width: 78%; height: auto; transition: transform var(--motion-base) var(--ease-standard); }
.card:hover .card-media svg { transform: scale(1.04); }
.card-body { padding: var(--space-5); }
.card-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.card-meta { color: var(--muted); font-size: var(--text-sm); margin-top: 4px; }
.card-price { font-size: var(--text-base); font-weight: 600; margin-top: var(--space-4); }
.card-link {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--fg);
  border-bottom: 1px solid var(--border);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.card-link:hover { border-color: var(--meta); }

/* ── Atelier ──────────────────────────────────────────────────── */
.atelier { background: #0b0b0d; color: var(--on-dark); --chapter-fg: var(--on-dark); --chapter-bg: #0b0b0d; }
.atelier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
.step { border-top: 1px solid var(--chapter-border); padding-top: var(--space-6); }
.step-num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--chapter-fg) 42%, transparent); }
.step h3 { margin-top: var(--space-4); font-size: var(--text-lg); }
.step p { margin-top: var(--space-3); font-size: var(--text-base); color: color-mix(in srgb, var(--chapter-fg) 72%, transparent); }
.atelier-figure { margin-top: var(--space-12); border: 1px solid var(--chapter-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--chapter-bg); }
.atelier-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.atelier-figure figcaption { padding: var(--space-4) var(--space-6); font-size: var(--text-sm); color: color-mix(in srgb, var(--chapter-fg) 62%, transparent); border-top: 1px solid var(--chapter-border); }

/* Atelier: en tema claro se comporta como capítulo negro (vídeo + texto blanco) */
:root[data-theme="light"] .atelier.dark { --chapter-fg: var(--on-dark); --chapter-bg: #0b0b0d; }
:root[data-theme="light"] .atelier .step h3,
:root[data-theme="light"] .atelier .step p,
:root[data-theme="light"] .atelier .step-num,
:root[data-theme="light"] .atelier-figure figcaption { color: #fff; }

/* ── Configurator ─────────────────────────────────────────────── */
.configurator { background: var(--bg); }
.cfg {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-warm);
}
.cfg-preview { display: flex; align-items: center; justify-content: center; background: var(--surface); padding: var(--space-8); }
.cfg-preview svg { width: min(460px, 100%); height: auto; }
.cfg-controls { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8); }
.cfg-group .label { display: block; font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-3); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-warm);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--meta); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.cfg-foot { border-top: 1px solid var(--border-soft); padding-top: var(--space-5); }
.cfg-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.cfg-price .amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; }
.cfg-summary { margin-top: 4px; font-size: var(--text-sm); color: var(--muted); }
.cfg-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.cfg-note { font-size: var(--text-xs); color: var(--muted); }

/* ── Visit ────────────────────────────────────────────────────── */
.visit { background: var(--surface); }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.visit-copy .lead { margin-top: var(--space-6); }
.visit-actions { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.visit-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); }
.visit-card h3 { font-size: var(--text-lg); }
.visit-list { margin-top: var(--space-6); }
.visit-list li { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border-soft); }
.visit-list li:last-child { border-bottom: 0; }
.visit-list dt { color: var(--muted); font-size: var(--text-sm); min-width: 96px; }
.visit-list dd { font-size: var(--text-base); }

/* ── Footer ───────────────────────────────────────────────────── */
.footer { background: var(--chapter-bg); color: var(--chapter-fg); padding-block: var(--space-12) var(--space-8); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: space-between; }
.footer-brand { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.24em; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-links a { font-size: var(--text-sm); color: color-mix(in srgb, var(--chapter-fg) 80%, transparent); transition: color var(--motion-fast) var(--ease-standard); }
.footer-links a:hover { color: var(--chapter-fg); }
.footer-legal {
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--chapter-border);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--text-xs); color: color-mix(in srgb, var(--chapter-fg) 50%, transparent);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-visual svg { width: min(460px, 100%); }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .cfg { grid-template-columns: 1fr; }
  .cfg-preview { order: 1; }
  .cfg-controls { order: 2; }
  .visit-grid { grid-template-columns: 1fr; }
  .container { padding-inline: var(--container-gutter-tablet); }
}
@media (max-width: 680px) {
  .section { padding-block: var(--section-y-phone); }
  .container { padding-inline: var(--container-gutter-phone); }
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed; top: 56px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: var(--space-2);
    background: var(--nav-bg); padding: var(--space-6) var(--container-gutter-phone);
    border-bottom: 1px solid var(--nav-border);
    display: none;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding-block: var(--space-3); }
  .collection-grid { grid-template-columns: 1fr; }
  .atelier-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .collection .section-head { flex-direction: column; align-items: flex-start; }
  .hero { padding-top: calc(var(--space-12) + 56px); }
}

/* ── Trust strip ────────────────────────────────────────────── */
.trust { background: var(--bg); padding-block: var(--space-8); border-block: 1px solid var(--border-soft); }
.trust-list { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); justify-content: space-between; }
.trust-item { display: flex; flex-direction: column; gap: 4px; }
.trust-item strong { font-size: var(--text-base); font-weight: 600; }
.trust-item span { font-size: var(--text-xs); color: var(--muted); }

/* ── Atelier mark ──────────────────────────────────────────── */
.atelier-mark { margin-top: var(--space-8); }
.atelier-mark svg { width: 320px; height: 40px; }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--space-8); z-index: 90;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--fg); color: var(--surface);
  padding: 12px 22px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  box-shadow: var(--elev-raised);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}