/* ============================================================================
   RARA · home.css - landing page (Slice 4d).
   Composes shared primitives (.btn, .grid, card, badge, .marquee) and adds the
   home-only layout: an asymmetric hero split, the featured authenticity band,
   the burgundy ethos block, and the page's ONE marquee (verification ticker).
   Accent stays burgundy; on the dark burgundy surfaces we use light neutrals
   (--cream / --cream-2) for AA text - no gold outside the Colección badge.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1 · Hero - editorial "acta bodegón" as the fold ground.
   The owned-commissioned hero asset (cool ink + steel guilloché, one burgundy seal)
   spans the fold; the copy overlays the image's own clear left third. Retires the
   warm product-box hero (owner warmth + hollow escalations). Fills the viewport
   below the sticky 72px header; dvh (never vh) for mobile.
   --------------------------------------------------------------------------- */
.home-hero{
  --hdr-h:72px;
  position:relative;
  display:flex;align-items:center;
  min-height:66dvh;
  max-width:var(--wrap);
  margin:0 auto;
  /* Match the .wrap gutter so the hero's left edge lines up with every section below. */
  padding:28px clamp(20px,4vw,48px) 22px;
}

/* Editorial hero image: the fold ground. object-fit:contain keeps the FULL 16:9
   composition (no crop of the acta) — the art's own left third is white, so copy
   overlaid there reads on clean white. Always visible (LCP); never data-revealed.
   overflow:hidden guards the ambient breathe below from ever spilling past the
   fold edge into the copy column. */
.home-hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.home-hero-media img{width:100%;height:100%;object-fit:contain;object-position:center}

/* Hero's one sanctioned ambient touch (BRAND_BRIEF: "at most one slow ambient
   touch"). A near-imperceptible breathing scale on the acta plate — communicates
   "the fold is alive", not decoration for its own sake. transform-only, 38s so it
   reads as stillness-with-a-pulse rather than motion; disabled under reduced
   motion below (motion.css's global reduce query only covers [data-reveal]/.card/
   .btn, so the hero breathe gets its own override in this file's reduce block). */
@keyframes hero-breathe{
  from{transform:scale(1)}
  to{transform:scale(1.016)}
}
.home-hero-media img{animation:hero-breathe 38s var(--ease-soft) infinite alternate}

/* ---- Video hero variant (home-v1-spec §8, gated by HERO_VIDEO_ENABLED) ----
   The silent looping clip and its poster still cover-fill the SAME frame as the
   static plate (object-fit:cover, not the plate's contain) so the fold is unchanged
   in size. The <video>'s own poster attr paints the LCP, so the sibling
   .home-hero-poster <img> is display:none on the motion path; it flips to the visible
   still ONLY under prefers-reduced-motion (reduce block below), where the <video> is
   hidden. The poster never breathes (it's a frozen fallback, not the ambient plate);
   the clip carries its own motion, so hero-breathe is not applied to it either. */
.home-hero-media video{width:100%;height:100%;object-fit:cover;object-position:center}
.home-hero-media img.home-hero-poster{
  width:100%;height:100%;object-fit:cover;object-position:center;
  animation:none;display:none;
}

/* Full-bleed treatment (owner A/B pick → spec §8 "near-full-bleed middle path").
   ONLY the video variant goes edge-to-edge: it breaks the --wrap cap and fills the
   viewport under the sticky 72px header (object-fit:cover), and the copy stack
   anchors BOTTOM-LEFT, re-contained to --wrap, staying ink-on-cream. The launch
   "Marea" clip's lower-left is turquoise sea (not the retired D3 clip's cream), so a
   soft LIGHT bottom-left veil (media::after below) lifts the ink copy to AA without a
   heavy scrim or darkening the airy beach mood. The static "acta bodegón" hero
   (flag OFF, no --video modifier) keeps every rule above, unchanged. */
.home-hero--video{
  max-width:none;             /* drop the contained wrap cap → fill full-width <main> */
  margin:0;
  min-height:82vh;            /* fills the viewport, references matched */
  align-items:flex-end;       /* anchor the copy stack to the bottom */
  padding:0 0 clamp(32px,6vh,72px);
  /* Re-contain the copy to --wrap: left edge lands on the page gutter (narrow) or the
     --wrap container edge (wide), so it lines up with every .wrap section below. */
  padding-inline:max(clamp(20px,4vw,48px), calc(50% - var(--wrap) / 2));
}
.home-hero--video .home-hero-copy{max-width:34ch}   /* §8: ≤34ch over the busier ground */

/* Copy-legibility veil (video variant only): a soft warm-cream wash anchored bottom-left,
   fading to fully transparent before mid-frame so the bottle/rock (right) and sky (top) stay
   clear. Tuned to the "Marea" clip — lifts the turquoise sea behind the ink copy to a
   comfortable AA contrast. Lives on .home-hero-media (decorative, aria-hidden, clipped to
   the fold by its overflow:hidden), painting over the video/poster but under the z1 copy. */
.home-hero--video .home-hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,
    rgba(246,242,235,.80) 0%,
    rgba(246,242,235,.40) 24%,
    rgba(246,242,235,0) 50%);
}

/* Copy tokens over the photographic ground: the muted / warm-grey label colours are tuned for
   the white static hero; over the moving beach clip they'd drop under AA on the darker sea
   frames. The video variant renders the eyebrow, sub-copy and trust line in --ink instead
   (≥9:1 on every frame over the veil above), with hierarchy carried by scale/weight, not colour
   lightness. The h1 base + proof rail are already --ink; the h1 em keeps its --burgundy accent. */
.home-hero--video .eyebrow,
.home-hero--video .home-hero-copy p,
.home-hero--video .home-hero-trust{color:var(--ink)}

/* WCAG 2.2.2 pause/play control — a small glass pill in the video hero's bottom-right corner.
   Ships [hidden]; augurea-motion.js reveals it once wired and re-hides it under reduced motion.
   z2 keeps it above the copy (z1) so it's always focusable/clickable. */
.home-hero-motion-toggle{
  position:absolute;z-index:2;
  right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);
  width:40px;height:40px;padding:0;
  display:grid;place-items:center;
  border-radius:999px;cursor:pointer;
  color:#fff;background:rgba(26,21,24,.48);
  border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s var(--ease-soft),transform .18s var(--ease-soft);
}
.home-hero-motion-toggle:hover{background:rgba(26,21,24,.66)}
.home-hero-motion-toggle:active{transform:scale(.94)}
.home-hero-motion-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Icon: two bars = playing (click to pause); a triangle under .is-paused = click to play. */
.home-hero-motion-icon{position:relative;display:block;width:14px;height:14px}
.home-hero-motion-icon::before,
.home-hero-motion-icon::after{
  content:"";position:absolute;top:1px;width:4px;height:12px;background:currentColor;border-radius:1px;
}
.home-hero-motion-icon::before{left:2px}
.home-hero-motion-icon::after{right:2px}
.home-hero-motion-toggle.is-paused .home-hero-motion-icon::before{
  left:3px;top:0;width:0;height:0;background:none;border-radius:0;
  border-style:solid;border-width:6px 0 6px 11px;
  border-color:transparent transparent transparent currentColor;
}
.home-hero-motion-toggle.is-paused .home-hero-motion-icon::after{content:none}

.home-hero-copy{position:relative;z-index:1;max-width:33ch}
.home-hero-copy h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,4.5vw,56px);line-height:1.0;letter-spacing:-.01em;
  margin:12px 0 12px;
}
.home-hero-copy h1 em{font-style:italic;font-weight:400;color:var(--burgundy)}
.home-hero-copy p{color:var(--muted);font-size:17px;line-height:1.5;max-width:38ch;margin-bottom:18px}
.home-hero-trust{
  margin-top:12px;font-size:11px;letter-spacing:.06em;color:var(--warm-grey);
}

/* Verified-evidence rail — real proof points, ink type + a single burgundy tick
   (the one sanctioned accent, token-driven; no gold, no invented numbers). */
.home-hero-proof{list-style:none;display:flex;flex-wrap:wrap;gap:9px 22px;margin:16px 0 0;padding:0}
.home-hero-proof li{
  position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);padding-left:18px;
}
.home-hero-proof li::before{
  content:"";position:absolute;left:0;top:.55em;width:10px;height:1px;background:var(--burgundy);
}

/* ---------------------------------------------------------------------------
   2 · Featured references - section head, burgundy authenticity band, grid.
   --------------------------------------------------------------------------- */
.home-featured{padding-top:8px}

/* The refined "burgundy edge": a slim authenticity band under the heading. */
.home-band{
  border-left:3px solid var(--burgundy);
  padding:9px 0 9px 20px;
  margin:2px 0 30px;
}
.home-band p{
  color:var(--ink);font-size:15px;line-height:1.45;max-width:62ch;
}

.home-grid{gap:34px 24px}
.home-featured-cta{margin-top:30px}
/* Community-favorites social-proof line under a card (favorite_n ≥ 5). Mono, muted,
   tight to the card it annotates — mirrors the Próximamente apartado line. */
.home-fave-apartado{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--warm-grey);margin:8px 2px 0}

/* ---------------------------------------------------------------------------
   3 · Brand-ethos band - burgundy conviction block + the page's ONE marquee.
   --------------------------------------------------------------------------- */
.home-edge{background:var(--burgundy)}
/* Single-voice band (owner ruling 2026-07-13: GC-MS chip removed): the copy column
   owns the full band width — the old 1.4fr/.9fr chip track collapsed, the paragraph
   measure widened 52→60ch so the band stays composed with no dead right void. */
.home-edge-in{padding-bottom:40px}
.home-edge h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.08;margin-bottom:16px;color:var(--cream)}
.home-edge p{color:var(--cream-2);max-width:60ch;font-size:16px;line-height:1.55}

/* Footer seam (owner gap ruling 2026-07-13): home ends on this burgundy band, so the
   footer's global 72px top margin (base.css .ftr) painted a full-width white strip
   between two dark surfaces. Zero it only when the band is on the page (:has guard —
   home.css also loads on nosotros/autenticidad, whose light endings keep the margin);
   the hairline seam keeps the ticker framed against the footer's identical burgundy. */
body:has(.home-edge) .ftr{margin-top:0;border-top:1px solid rgba(242,239,234,.16)}

/* The verification ticker - the single marquee. Slow, low-key, decorative-off
   under reduced motion (motion.css freezes .marquee-track). */
.home-ticker{border-top:1px solid rgba(242,239,234,.16)}
.home-ticker .marquee-track{
  animation-duration:48s;
  padding:16px 0;gap:0;
}
.home-ticker span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-2);padding:0 26px;
}
.home-ticker span::after{content:"·";margin-left:52px;color:rgba(233,229,220,.5)}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  /* Stack: copy first, the editorial hero as a static full-width figure below it. */
  .home-hero{flex-direction:column;align-items:stretch;gap:22px;min-height:auto;padding-top:40px}
  .home-hero-copy{max-width:none;order:1}
  .home-hero-media{position:static;order:2;width:100%}
  .home-hero-media img{width:100%;height:auto;aspect-ratio:16/10;object-position:center}
  /* Full-bleed video hero stays a full-viewport OVERLAY on mobile too (drop the
     stacked figure): the clip covers the frame and the copy overlays bottom-left.
     object-position:left keeps the clip's bright cream left third — where the copy
     sits — surviving the portrait crop, so the ink copy stays legible with no scrim. */
  .home-hero--video{
    flex-direction:row;align-items:flex-end;justify-content:flex-start;
    min-height:82dvh;
    padding:0 0 clamp(26px,7vh,60px);
    padding-inline:clamp(20px,5vw,28px);
  }
  .home-hero--video .home-hero-copy{order:0;max-width:none}
  .home-hero--video .home-hero-media{position:absolute;inset:0;order:0;width:auto}
  .home-hero--video .home-hero-media video,
  .home-hero--video .home-hero-media img.home-hero-poster{
    width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:left center;
  }
}
@media(max-width:600px){
  .home-band{margin-bottom:22px}
}

/* ---------------------------------------------------------------------------
   4 · Próximamente strip (Slice 5b) — a horizontal, snap-scrolling rail of
   coming-soon references. A distinct layout family from the featured grid.
   --------------------------------------------------------------------------- */
.home-soon-lead{color:var(--muted);font-size:15px;line-height:1.5;max-width:54ch;margin:-14px 0 24px}
.home-soon-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 4px 14px;margin:0 -4px;scrollbar-width:thin}
.soon-card{flex:0 0 clamp(240px,80vw,300px);scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line)}
.soon-card-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(150deg,var(--cream-2),var(--ph-1))}
.soon-card-media img{width:100%;height:100%;object-fit:contain;background:#FFFFFF;
  transition:transform var(--dur-slow,.7s) var(--ease-out,ease)}
.soon-card:hover .soon-card-media img{transform:scale(1.04)}
.soon-card-chip{position:absolute;top:12px;left:12px}
.soon-card-body{display:flex;flex-direction:column;padding:16px 16px 18px;flex:1}
.soon-card-house{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);margin-bottom:6px}
.soon-card-name{font-family:var(--serif);font-size:20px;line-height:1.1;color:var(--ink);margin-bottom:14px;
  transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.soon-card-name:hover{color:var(--burgundy)}
.soon-card-facts{margin:0 0 16px}
.soon-card-facts div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:8px 0 0;margin-top:8px}
.soon-card-facts div:first-child{margin-top:0}
.soon-card-facts dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-grey)}
.soon-card-facts dd{margin:0;font-size:13px;color:var(--ink);text-align:right}
.soon-card-price{color:var(--burgundy);font-weight:500}
.soon-card-cta{margin-top:auto;align-self:flex-start}

/* ---------------------------------------------------------------------------
   5 · Verification showcase — the acta thesis as the visual centerpiece.
   Left: the real acta a verified reference carries (reused _acta.html). Right:
   the numbered process. The reused acta's guilloché inherits the GLOBAL
   --brand-guillo — no local override (design-lead ruling: a hardcode would diverge
   from the palette system). Palette-revision B repoints --gold→--burgundy-deep, so
   the guilloché auto-renders OXBLOOD; this section SEQUENCES after palette B merges.
   --------------------------------------------------------------------------- */
.home-showcase{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.home-showcase-in{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:56px;align-items:center}
.home-showcase-acta{width:100%;max-width:420px;justify-self:center}
.home-showcase-cap{margin-top:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-grey);text-align:center}
.home-showcase-head{margin-bottom:26px}
.home-showcase-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.01em;margin:10px 0 12px}
.home-showcase-head p{color:var(--muted);font-size:16px;line-height:1.55;max-width:46ch}

/* Numbered process — a vertical checklist; each step's rule "draws in" (motion.css). */
.home-steps{list-style:none;display:grid;gap:0;margin:0;padding:0}
.home-step{padding:16px 0 14px}
.home-step:last-child{border-bottom:1px solid var(--line)}
.home-step-n{display:block;font-size:12px;letter-spacing:.14em;color:var(--burgundy);margin-bottom:8px}
.home-step h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.15;margin-bottom:6px}
.home-step p{color:var(--muted);font-size:14px;line-height:1.55;max-width:52ch}

/* Hairline "draw-in" (sanctioned motion): each step's top rule scales itself in
   left→right when the step reveals — the engraving drawing itself. transform-only
   (scaleX), CLS-safe (pseudo, no layout); same JS-gated contract as the reveal
   system; frozen full under reduced motion (below). */
.rule-draw{position:relative}
.rule-draw::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--burgundy);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-reveal,800ms) var(--ease-out,ease);
}
[data-reveal].is-revealed.rule-draw::before{transform:scaleX(1)}

/* ---------------------------------------------------------------------------
   5b · Verified-evidence stat rail — real live curation counts (never invented).
   Big serif numerals over a mono label; staggered reveal. Ink + hairline, no gold.
   --------------------------------------------------------------------------- */
.home-stats-head{margin-bottom:24px}
.home-stats-lead{color:var(--muted);font-size:15px;line-height:1.5;max-width:52ch}
.home-stats-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0}
.home-stat{border-top:1px solid var(--line-2);padding-top:16px}
.home-stat-n{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,58px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.home-stat-label{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey)}

/* ---------------------------------------------------------------------------
   5c · Casas strip — a compact index of the houses behind the catalog (real
   counts), each a link to its house page. Tag/index layout (mirrors familias).
   --------------------------------------------------------------------------- */
.home-casas-lead{color:var(--muted);font-size:15px;line-height:1.5;max-width:50ch;margin:-14px 0 22px}
.home-casas-wrap{display:flex;flex-wrap:wrap;gap:12px}
.home-casa-tag{display:inline-flex;flex-direction:column;gap:5px;padding:13px 18px;
  border:1px solid var(--line-2);background:var(--surface);
  transition:border-color var(--dur-fast,.2s),background var(--dur-fast,.2s)}
.home-casa-tag:hover{border-color:var(--burgundy);background:var(--cream)}
.home-casa-tag-name{font-family:var(--serif);font-size:18px;line-height:1.1;color:var(--ink);transition:color var(--dur-fast,.2s)}
.home-casa-tag:hover .home-casa-tag-name{color:var(--burgundy)}
.home-casa-tag-meta{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-grey)}

/* ---------------------------------------------------------------------------
   6 · Familias showcase — an index of olfactive families (with counts), each a
   link to the catalog filtered per family. A tag/index layout family.
   --------------------------------------------------------------------------- */
.home-fam-lead{color:var(--muted);font-size:15px;line-height:1.5;max-width:50ch;margin:-14px 0 22px}
.home-fam-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.home-fam-tag{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:start;gap:4px 10px;min-height:74px;padding:13px 14px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  transition:border-color var(--dur-fast,.2s),background var(--dur-fast,.2s)}
.home-fam-tag:hover{border-color:var(--burgundy);background:var(--cream)}
.home-fam-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;border:1px solid rgba(25,22,20,.16)}
.home-fam-name{font-family:var(--serif);font-size:18px;line-height:1.12;color:var(--ink);transition:color var(--dur-fast,.2s)}
.home-fam-gloss{grid-column:2/4;font-size:12px;line-height:1.35;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-fam-n{font-size:11px;line-height:1.3;color:var(--warm-grey);justify-self:end;margin-top:2px}
.home-fam-tag:hover .home-fam-name,
.home-fam-tag:hover .home-fam-n{color:var(--burgundy)}

/* ---------------------------------------------------------------------------
   7 · Casa spotlight — asymmetric split (media + facts) for the house RARA
   represents. Verified facts only. Shares the "split" family with the hero but
   with a distinct fact-row + reference-list treatment.
   --------------------------------------------------------------------------- */
.home-casa-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:56px;align-items:center}
/* Casa spotlight shares the hero's framed-certificate double-bezel; aspect set
   inline from the trimmed asset (plate_aspect), 4/5 here is only the fallback. */
.home-casa-figure{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;box-sizing:border-box;
  background:var(--brand-mat);border:1px solid var(--line-2);border-radius:6px;padding:12px}
.home-casa-figure img{width:100%;height:100%;object-fit:contain;background:#FFFFFF;
  border:1px solid var(--line);border-radius:3px;
  transition:transform var(--dur-slow,.7s) var(--ease-out,ease)}
.home-casa-figure:hover img{transform:scale(1.03)}
.home-casa-copy{max-width:46ch}
.home-casa-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,44px);letter-spacing:-.01em;margin:14px 0 16px}
.home-casa-copy p{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:22px}   /* justify moved to .prose-just (components.css) */
.home-casa-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 22px;padding:0}
.home-casa-facts li{position:relative;font-size:12px;letter-spacing:.06em;color:var(--warm-grey);padding-left:16px}
.home-casa-facts li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--burgundy);border-radius:50%}
.home-casa-refs{margin-bottom:26px}
.home-casa-ref{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
  border-top:1px solid var(--line);font-family:var(--serif);font-size:18px;color:var(--ink);
  transition:color var(--dur-fast,.2s),padding-left var(--dur-fast,.2s)}
.home-casa-ref:hover{color:var(--burgundy);padding-left:6px}

/* ---- Responsive (home richness sections) ---- */
@media(max-width:760px){
  .home-showcase-in{grid-template-columns:1fr;gap:32px}
  .home-showcase-acta{max-width:340px}
  .home-casa-in{grid-template-columns:1fr;gap:28px}
}
@media(max-width:520px){
  .home-stats-grid{grid-template-columns:1fr;gap:0}
  .home-stat{padding:14px 0}
}

/* ============================================================================
   Home V1 (slice 1) — density additions. Composes shipped primitives only
   (_bar.html .fbars, .badge, .btn). No new motion; every hover/reveal inherits
   the existing reduced-motion contract (frozen in the block at the file end).
   ============================================================================ */

/* ---- 8 · "Referencia documentada" spotlight — one reference in full (spec §5.2).
   Asymmetric split mirroring .home-casa-in; the right column stacks the ficha
   density blocks (accords · Carácter · Cuándo · price ladder), each render-when-
   present. Headline only, no eyebrow. ---- */
.home-spot{margin:2px 0 34px}
.home-spot-head{margin-bottom:22px}
.home-spot-head h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.01em;margin:0 0 8px}
.home-spot-head p{color:var(--muted);font-size:15px;line-height:1.5;max-width:54ch}
.home-spot-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:56px;align-items:start}
.home-spot-figure{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;box-sizing:border-box;
  background:var(--brand-mat);border:1px solid var(--line-2);border-radius:6px;padding:12px;position:sticky;top:96px}
.home-spot-figure img{width:100%;height:100%;object-fit:contain;background:#FFFFFF;border:1px solid var(--line);border-radius:3px;
  transition:transform var(--dur-slow,.7s) var(--ease-out,ease)}
.home-spot-figure:hover img{transform:scale(1.03)}
.home-spot-facts{display:flex;flex-direction:column;gap:24px;min-width:0}
.home-spot-house{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);margin-bottom:6px}
.home-spot-name{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.05;letter-spacing:-.01em;margin:0 0 8px}
.home-spot-tagline{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 14px;max-width:50ch}
.home-spot-rating{display:flex;align-items:baseline;gap:8px;margin:0 0 14px}
.home-spot-rating-v{font-family:var(--serif);font-size:26px;line-height:1;color:var(--burgundy)}
.home-spot-rating-n{font-size:11px;letter-spacing:.04em;color:var(--warm-grey)}
.home-spot-badges{display:flex;flex-wrap:wrap;gap:8px}
.home-spot-block-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);
  margin:0 0 13px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.home-spot-ladder{list-style:none;margin:0;padding:0}
.home-spot-size{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line)}
.home-spot-size:first-child{border-top:0;padding-top:0}
.home-spot-size-ml{font-size:14px;color:var(--ink)}
.home-spot-size-kind{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-grey);margin-left:4px}
.home-spot-size-price{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap}
.home-spot-size-price s{color:var(--warm-grey);margin-right:6px;text-decoration-thickness:1px}
.home-spot-size-off{color:var(--burgundy);margin-left:6px}
.home-spot-cta{align-self:flex-start}

/* ---- 9 · [SLOT-1] Full-bleed verification band (spec §5.3) — breaks .wrap edge
   to edge; copy re-contained bottom-left over a soft white scrim (AA). The image
   fills via object-fit:cover; the V1 placeholder is a cool-steel field carrying
   the burgundy wax seal with the left third kept clear for copy. ---- */
.home-vband{position:relative;overflow:hidden;min-height:clamp(360px,52vh,640px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-vband-media{position:absolute;inset:0;z-index:0}
.home-vband-img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.home-vband.is-placeholder .home-vband-media{
  background:linear-gradient(112deg,var(--cream) 0%,var(--cream-2) 52%,var(--line-2) 100%);
  display:flex;align-items:center;justify-content:flex-end}
.home-vband-seal{margin-right:11%;filter:drop-shadow(0 6px 18px rgba(74,22,34,.18))}
.home-vband-seal svg{width:clamp(96px,13vw,168px);height:auto}
.home-vband-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.66) 32%,rgba(255,255,255,0) 64%)}
.home-vband.is-placeholder .home-vband-scrim{background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 56%)}
.home-vband-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-block:clamp(30px,5vh,60px)}
.home-vband-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.06;letter-spacing:-.01em;color:var(--ink);max-width:15ch;margin:0 0 10px}
.home-vband-lead{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--burgundy);margin:0 0 16px}
.home-vband-cta{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--burgundy);padding-bottom:3px;transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.home-vband-cta:hover{color:var(--burgundy)}

/* ---- 10 · Familias enrichment (spec §5.6, cheap win §7) — chips → character band.
   Larger tiles, the family `hex` promoted from a 10px dot to a full-height colour
   field, a bigger serif name. CSS-only over the existing markup. ---- */
.home-fam-wrap{grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.home-fam-tag{min-height:132px;padding:0;gap:6px 16px;grid-template-columns:10px minmax(0,1fr) auto;overflow:hidden}
.home-fam-dot{grid-row:1/3;align-self:stretch;width:10px;height:auto;margin:0;border:0;border-radius:0}
.home-fam-name{font-size:23px;padding-top:16px}
.home-fam-gloss{-webkit-line-clamp:3;font-size:12.5px;line-height:1.4;padding-bottom:16px;padding-right:6px}
.home-fam-n{font-size:12px;padding:16px 18px 0 0}

/* ---- 11 · Stats rail on a tinted burgundy band (spec §5.8) — the live counts
   carry weight and the surrounding white dead-zone closes; cream numerals for AA;
   numerals enlarged at wide tiers. ---- */
.home-stats{background:var(--burgundy)}
.home-stats .eyebrow{color:var(--cream-2)}
.home-stats-lead{color:var(--cream-2)}
.home-stat{border-top-color:rgba(242,239,234,.24)}
.home-stat-n{color:var(--cream);font-size:clamp(40px,5.4vw,72px)}
.home-stat-label{color:var(--cream-2)}

/* ---- Home V1 responsive ---- */
@media(max-width:900px){
  /* Verification band: image becomes a portrait plate, copy stacks below (ink on white). */
  .home-vband{min-height:0;border-bottom:0}
  .home-vband-media{position:relative;aspect-ratio:4/5}
  .home-vband.is-placeholder .home-vband-media{aspect-ratio:16/11}
  .home-vband-scrim{display:none}
  .home-vband-seal{margin-right:0}
  .home-vband-copy{position:static;padding-block:24px 30px;border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
  .home-spot-in{grid-template-columns:1fr;gap:26px}
  .home-spot-figure{position:static;max-width:420px}
}

/* ---- Wide-tier density (≥2560 → --wrap 2040, ≥3200 → --wrap 2400; tokens.css). The
   shared .grid already steps the home card grid to 6/7 columns at these tiers
   (components.css), so the home grid INHERITS them and neither collapses nor
   over-stretches — the density additions just keep pace: a little more grid gap so the
   richer cards breathe, and the spotlight split tightens toward the facts column so the
   documented-reference plate stays proportional (never a ~1m-tall image) while the
   density blocks gain room. Reuses the widescreen breakpoints — no new magic numbers. */
@media(min-width:2560px){
  .home-grid{gap:40px 28px}
  .home-spot-in{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:72px}
}
@media(min-width:3200px){
  .home-grid{gap:46px 32px}
  .home-spot-in{grid-template-columns:minmax(0,32fr) minmax(0,68fr)}
}

/* ---- Reduced motion: no hover zoom / travel on the new sections ---- */
@media(prefers-reduced-motion:reduce){
  /* The hero's one ambient touch: freeze the breathing scale outright (no animation,
     no transform) rather than just pausing it, per the "no travel" reduce contract. */
  .home-hero-media img{animation:none;transform:none}
  /* Video hero variant: swap the moving clip for its still poster (same freeze doctrine
     — reduced-motion users never see the loop, only the static frame). */
  .home-hero-video{display:none}
  .home-hero-media img.home-hero-poster{display:block}
  /* No motion to pause under reduce → the pause/play control is moot; hide it. (JS also
     leaves it hidden on this path and never autoplays the clip.) */
  .home-hero-motion-toggle{display:none}
  .soon-card-media img,.home-casa-figure img,.home-fam-tag,.home-casa-ref,.soon-card-name,.home-casa-tag,.home-spot-figure img,.home-vband-cta{transition:none}
  .soon-card:hover .soon-card-media img,.home-casa-figure:hover img,.home-spot-figure:hover img{transform:none}
  .home-casa-ref:hover{padding-left:0}
  /* Draw-in rules shown full (transform:none = scaleX 1), no animation. */
  .rule-draw::before{transform:none!important;transition:none!important}
}