/* =====================================================================
   CARAVANA MOTORHOMES. Rediseño especulativo (atelier)
   "afuera la ruta, adentro tu casa"
   La pagina es una caja de luz: noche -> arena -> noche.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --noche:   #14110D;
  --noche-2: #100d0a;
  --arena:   #F4EFE7;
  --tinta-d: #F4EFE7;   /* texto sobre oscuro */
  --tinta-c: #1A1712;   /* texto sobre claro */
  --ambar:   #E0A155;
  --ambar-d: #8a5a16;   /* bronce: pasa WCAG AA como texto sobre arena */
  --grafito: #3A3A3F;
  --euca:    #8A9A8E;

  /* el fondo vivo que migra; el JS lo tweenea, CSS pone el inicial */
  --bg: var(--noche);

  /* easing: UNA familia (4 curvas), espejo exacto del GSAP CustomEase */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-lg: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:   cubic-bezier(0.33, 0, 0.2, 1);

  /* duraciones */
  --d-micro: 0.32s;
  --d-comp:  0.6s;
  --d-hero:  1.1s;

  /* espaciado base 8 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 200px;

  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 120px);
  --section-gap: clamp(56px, 8vh, 110px);
  --section-pad: clamp(48px, 7vh, 88px);

  --measure: 620px;
  --measure-s: 460px;

  --ff-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --ff-text: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* fallback size-adjusted para que el swap no reflowee (CLS 0) */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 96%;
  ascent-override: 92%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 100%;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  color-scheme: light only;          /* opt-out del force-dark (FIELD-NOTES #1) */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;             /* Lenis se encarga; nunca smooth nativo */
}
html, body {
  overflow-x: clip;                  /* clip, no hidden (FIELD-NOTES #24) */
  width: 100%;
}
body {
  font-family: var(--ff-text);
  color: var(--tinta-d);
  background: var(--noche);          /* base; el bg-stage pinta arriba */
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* guard anti-flash de transiciones en la carga (FIELD-NOTES #25) */
html.preload * { transition: none !important; animation: none !important; }

/* ---------- Fondo migratorio (layer fijo detras de todo) ---------- */
.bg-stage {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg);
  transition: background-color 0.6s linear; /* solo para reduced-motion / no-JS */
  pointer-events: none;
}
/* con motion, el color lo maneja GSAP scrub; sin transicion CSS */
.js-motion .bg-stage { transition: none; }

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: fixed; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--ambar); color: var(--noche);
  padding: 12px 20px; border-radius: 999px; font-weight: 600;
  transition: top var(--d-micro) var(--ease-soft);
}
.skip-link:focus { top: 14px; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 2px; }

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

.eyebrow {
  font-family: var(--ff-text);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  line-height: 1.2; margin: 0 0 var(--s-4);
  color: var(--ambar);
}
.h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  line-height: 0.98; letter-spacing: -0.015em;
  font-weight: 360; margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.02; letter-spacing: -0.01em;
  font-weight: 400; margin: 0;
}
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5; font-weight: 400; margin: 0;
}
.body { font-size: 1rem; line-height: 1.6; margin: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* =====================================================================
   BOTONES Y LINKS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
  font-family: var(--ff-text); font-weight: 600;
  letter-spacing: 0.01em;
  padding: 16px 28px; border-radius: 999px;
  transition: transform var(--d-micro) var(--ease-soft),
              background-color var(--d-micro) var(--ease-soft),
              color var(--d-micro) var(--ease-soft);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn--amber {
  background-color: var(--ambar) !important;  /* !important: gana al inline force-dark (FIELD-NOTES #1) */
  color: var(--noche);
}
.btn--amber:hover { background-color: var(--ambar-d) !important; transform: translateY(-2px); }
.btn--ghost {
  border: 1px solid currentColor; color: inherit;
  padding: 12px 22px;
  background-color: transparent !important;  /* gana al force-dark del navegador (FIELD-NOTES #1) */
}
[data-theme="light"] .btn--ghost:hover { background-color: var(--tinta-c) !important; color: var(--arena) !important; border-color: var(--tinta-c); }
[data-theme="dark"] .btn--ghost:hover  { background-color: var(--arena) !important; color: var(--noche) !important; border-color: var(--arena); }

/* link con underline ambar que crece desde la izquierda */
.link-amber {
  position: relative; display: inline-block;
  font-weight: 600; padding-bottom: 3px;
  color: inherit;
}
.link-amber::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--ambar);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-micro) var(--ease-soft);
}
.link-amber:hover::after, .link-amber:active::after, .link-amber:focus-visible::after { transform: scaleX(1); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 28px 0;
  transition: padding var(--d-comp) var(--ease-inout),
              background-color var(--d-comp) var(--ease-inout),
              backdrop-filter var(--d-comp) var(--ease-inout),
              box-shadow var(--d-comp) var(--ease-inout);
}
.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}
.nav__logo { height: 30px; width: auto; transition: filter var(--d-comp) var(--ease-inout); }
.nav__links { display: flex; gap: var(--s-5); margin-left: auto; }
.nav__links a {
  font-weight: 500; letter-spacing: 0.04em; font-size: 0.95rem;
  position: relative; padding-bottom: 2px;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: var(--ambar); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-micro) var(--ease-soft);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__cta { padding: 11px 22px; }

/* estado 2: scrolleado */
.nav.is-stuck { padding: 16px 0; }
.nav.is-stuck[data-theme="dark"] {
  background: rgba(20, 17, 13, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(244, 239, 231, 0.08);
}
.nav.is-stuck[data-theme="light"] {
  background: rgba(244, 239, 231, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(26, 23, 18, 0.08);
}
/* color de texto/logo segun theme de la seccion activa */
.nav[data-theme="dark"]  { color: var(--tinta-d); }
.nav[data-theme="light"] { color: var(--tinta-c); }
/* el logo es blanco; sobre claro lo invertimos a tinta */
.nav[data-theme="light"] .nav__logo { filter: brightness(0) saturate(100%); }

/* burger mobile */
.nav__burger { display: none; flex-direction: column; gap: 5px; align-items: flex-end; margin-left: auto; }
.nav__burger span:not(.nav__burger-label) { display: block; width: 26px; height: 2px; background: currentColor; transition: transform var(--d-micro) var(--ease-soft), opacity var(--d-micro) var(--ease-soft); }
.nav__burger-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }

/* overlay menu mobile */
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--noche);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--s-3); padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-comp) var(--ease-inout), visibility var(--d-comp);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: var(--s-2); }
.menu__links a {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1.05;
  color: var(--tinta-d);
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--d-comp) var(--ease-out), transform var(--d-comp) var(--ease-out);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.06s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.12s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.18s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.24s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.30s; }
.menu__cta { margin-top: var(--s-5); align-self: stretch; }

/* =====================================================================
   SECCIONES (genericas)
   ===================================================================== */
.section { position: relative; padding-block: var(--section-pad); }
/* fondos solidos por seccion (capitulos claros/oscuros), bordes limpios, sin morph animado */
.hero[data-theme="dark"], .section[data-theme="dark"], .footer[data-theme="dark"] { background-color: var(--noche); }
.section[data-theme="light"] { background-color: var(--arena); }
.section + .section { margin-top: 0; }
[data-theme="light"] { color: var(--tinta-c); }
[data-theme="dark"]  { color: var(--tinta-d); }
[data-theme="light"] .eyebrow { color: var(--ambar-d); }

/* content-visibility en below-fold largas (covenant) */
.modelos, .usados { content-visibility: auto; contain-intrinsic-size: auto 1200px; }

/* =====================================================================
   REVEAL DE MEDIA (el tell #1)
   ===================================================================== */
.js-motion .reveal-media {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.985);
  clip-path: inset(0 0 8% 0);
  transition: opacity var(--d-hero) var(--ease-out),
              transform var(--d-hero) var(--ease-out),
              clip-path var(--d-hero) var(--ease-out);
  will-change: opacity, transform;
}
.js-motion .reveal-media.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0% 0); }

/* la <img> interna hace fade desde su tono al decodificar */
.reveal-media img { opacity: 1; transition: opacity 0.8s var(--ease-out); }
.js-motion .reveal-media img { opacity: 0; }
.js-motion .reveal-media img.is-loaded { opacity: 1; }

/* =====================================================================
   1. HERO / LA LLEGADA
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.hero__poster, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__media video { opacity: 0; transition: opacity var(--d-hero) var(--ease-inout); z-index: 1; }
.hero__media video.is-ready { opacity: 1; }

/* bloom de luz ambar = gesto firma (CSS, no depende del video) */
.hero__bloom {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(42% 40% at 38% 62%,
              rgba(224, 161, 85, 0.85) 0%,
              rgba(224, 161, 85, 0.35) 35%,
              rgba(224, 161, 85, 0) 70%);
  mix-blend-mode: screen;
  filter: blur(14px);
  opacity: 0.9; transform: scale(1);  /* base: prendido (reduced-motion / no-JS) */
  transform-origin: 38% 62%;
}
/* con motion arranca apagado; el JS lo enciende en la llegada */
.js-motion .hero__bloom { opacity: 0; transform: scale(0.4); }

.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(20,17,13,0.78) 0%, rgba(20,17,13,0.25) 45%, rgba(20,17,13,0.1) 100%),
              linear-gradient(to right, rgba(20,17,13,0.6) 0%, rgba(20,17,13,0) 55%);
}

.hero__content { position: relative; z-index: 4; padding-bottom: clamp(48px, 9vh, 110px); }
.hero__title {
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 11vw, 11rem);
  line-height: 0.92; letter-spacing: -0.02em;
  font-weight: 340; margin: 0;
  text-transform: lowercase;
  max-width: 16ch;
}
.hero__title .line { display: block; overflow: clip; }
.js-motion .hero__title .line > span { display: inline-block; will-change: transform; }
.hero__lead {
  margin: var(--s-4) 0 0; max-width: 540px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5;
  color: rgba(244, 239, 231, 0.88);
}
.hero__cta { margin-top: var(--s-5); }
/* estados reservados (CLS 0): el JS los anima por opacity/transform */
.js-motion .hero__lead, .js-motion .hero__cta { opacity: 0; transform: translateY(16px); }

/* =====================================================================
   INTRO overlay (la llegada, una vez por sesion)
   ===================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 300;
  background: var(--noche);
  display: grid; place-items: center;
  overflow: clip;
}
.intro[hidden] { display: none; }
.intro__poster {
  position: absolute; inset: 0;
  background: var(--noche) center/cover no-repeat;
  background-image: image-set(url("../assets/web/hero-poster.webp") type("image/webp"), url("../assets/web/hero-poster.jpg") type("image/jpeg"));
  opacity: 0.85;   /* visible desde el primer frame: nunca pantalla negra */
}
.intro__bloom {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 40% at 50% 58%,
              rgba(224,161,85,0.9) 0%, rgba(224,161,85,0.35) 38%, rgba(224,161,85,0) 72%);
  mix-blend-mode: screen; filter: blur(16px);
  opacity: 0; transform: scale(0.4); transform-origin: 50% 58%;
}
.intro__logo {
  position: relative; z-index: 2;
  width: min(58vw, 420px); height: auto;
  opacity: 0;
}
.intro__veil {
  position: absolute; inset: 0; background: var(--noche);
  opacity: 0; pointer-events: none; z-index: 3;
}
.intro__skip {
  position: absolute; right: 22px; bottom: 20px; z-index: 4;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-d);
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(244,239,231,0.4);
  background: rgba(20,17,13,0.4); backdrop-filter: blur(4px);
}
.intro__skip:hover { background: rgba(244,239,231,0.16); }

/* logo volador (FLIP), solo desktop */
.fly-logo {
  position: fixed; z-index: 301; pointer-events: none;
  height: 30px; width: auto;
}

/* =====================================================================
   2. LA PROMESA
   ===================================================================== */
.promesa__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.promesa__text { padding-block: clamp(20px, 6vh, 80px); }
.promesa__photo {
  margin: 0; overflow: clip; border-radius: 4px;
  align-self: stretch;
}
.promesa__photo img { width: 100%; height: 100%; object-fit: cover; min-height: 60vh; }

/* =====================================================================
   3. LA VIDA ADENTRO
   ===================================================================== */
.vida__head { max-width: 760px; padding-bottom: var(--section-pad); }
.vida__ctas { display: flex; gap: var(--s-5); margin-top: var(--s-4); flex-wrap: wrap; }

.vida__hero {
  position: relative; margin: 0 0 clamp(40px, 6vh, 80px);
  width: 100%; height: clamp(52vh, 70vh, 82vh);
  overflow: clip;
}
.vida__hero picture { display: block; width: 100%; height: 100%; }
.vida__hero img { width: 100%; height: 100%; object-fit: cover; }
.js-motion [data-kenburns] img { will-change: transform; }
.vida__cap {
  position: absolute; left: var(--gutter); bottom: clamp(24px, 5vh, 56px);
  font-family: var(--ff-display); font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.05; color: var(--tinta-d);
  text-shadow: 0 2px 24px rgba(20,17,13,0.6);
  max-width: 14ch;
}

.vida__pair {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: start;
  margin-bottom: clamp(40px, 6vh, 90px);
}
.vida__pair--rev { grid-template-columns: 1fr 1.5fr; }
.vida__pair--rev .vida__big { order: 2; }
.vida__pair--rev .vida__small { order: 1; margin-top: 0; }
.vida__big, .vida__small { margin: 0; overflow: clip; border-radius: 4px; }
.vida__big img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.vida__small { margin-top: clamp(24px, 5vh, 64px); }
.vida__small img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* =====================================================================
   4. LOS MODELOS
   ===================================================================== */
.modelos__head { max-width: 760px; padding-bottom: var(--section-pad); }

.modelo {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: clamp(28px, 5vh, 56px) var(--gutter);
  position: relative;
}
.modelo--lead { padding-block: clamp(36px, 6vh, 72px); }
.modelo[data-side="right"] { grid-template-columns: 0.9fr 1.1fr; }
.modelo[data-side="right"] .modelo__media { order: 2; }
.modelo[data-side="right"] .modelo__text { order: 1; }

.modelo__media {
  position: relative; overflow: clip; border-radius: 4px;
  align-self: stretch;
}
.modelo__media img {
  width: 100%; height: 100%; min-height: 50vh; object-fit: cover;
  transition: transform var(--d-comp) var(--ease-soft);
}
@media (hover: hover) { .modelo__media:hover img { transform: scale(1.03); } }
.modelo__media:active img { transform: scale(1.03); }

/* panel tipografico para lineas sin foto limpia (Maxi): numeral calado sobre noche */
.modelo__media--type {
  display: grid; place-items: center;
  background: var(--noche); min-height: 46vh; align-self: stretch;
}
.modelo__type-num {
  font-family: var(--ff-display); font-weight: 400; line-height: 1;
  font-size: clamp(9rem, 24vw, 22rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(244,239,231,0.45);
  font-variant-numeric: tabular-nums;
}

.modelo__num {
  position: absolute; top: -0.3em; left: -0.1em; z-index: 0;
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(8rem, 20vw, 18rem); line-height: 1;
  color: var(--grafito); opacity: 0.06;
  pointer-events: none; font-variant-numeric: tabular-nums;
}
.modelo__text { max-width: 540px; position: relative; z-index: 1; padding-block: var(--s-4); }
.modelo__name { margin-bottom: var(--s-2); }
.modelo__tag {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem); margin: 0 0 var(--s-4);
  color: var(--ambar-d);
}
[data-theme="dark"] .modelo__tag { color: var(--ambar); }
.modelo__text .body { margin-bottom: var(--s-4); }
.spec {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--grafito); margin: 0 0 var(--s-4);
}
[data-theme="dark"] .spec { color: rgba(244,239,231,0.65); }
.spec .num { font-size: 1.05rem; font-weight: 600; }
.modelo__ctas { display: flex; gap: var(--s-5); flex-wrap: wrap; margin: 0; }
.modelo__ctas--center { justify-content: center; margin-top: var(--s-5); }

/* Especiales: cierre noche, contenido centrado, foto chica */
.modelo--special {
  display: block; min-height: 52vh;
  background: var(--noche); color: var(--tinta-d);
  border-radius: 6px;
  margin: clamp(40px, 8vh, 96px) var(--gutter) 0;
  padding: clamp(48px, 9vh, 110px) clamp(24px, 6vw, 96px);
  text-align: center; overflow: clip; position: relative;
}
.modelo__num--center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--arena); opacity: 0.05;
}
.modelo__special-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-5);
  max-width: 640px; margin-inline: auto;
}
.modelo__special-photo { margin: 0; width: min(82vw, 560px); overflow: clip; border-radius: 6px; }
.modelo__special-photo img { width: 100%; height: auto; }
.modelo__special-text .modelo__name,
.modelo__special-text .modelo__tag { text-align: center; }
.modelo__special-text .body { margin-inline: auto; }

/* =====================================================================
   5. EL OFICIO
   ===================================================================== */
.oficio__manifesto { max-width: 900px; padding-bottom: clamp(36px, 5vh, 72px); }
.oficio__h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.04; }
.oficio__pin { position: relative; }
.oficio__stage {
  min-height: 100svh;
  display: grid; place-items: center;
  position: relative;
}
.oficio__gauge {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(80px, 14vh, 140px);
  width: min(60vw, 320px); height: 3px;
  background: rgba(58,58,63,0.18); border-radius: 999px; overflow: clip;
}
.oficio__gauge-fill { display: block; height: 100%; width: 0%; background: var(--ambar); }

.oficio__pillars {
  display: flex; gap: clamp(32px, 6vw, 96px);
  justify-content: center; align-items: flex-start;
  flex-wrap: wrap; text-align: center;
  max-width: var(--wrap); padding-inline: var(--gutter);
}
.oficio__pillar { max-width: 320px; flex: 1 1 240px; }
.oficio__big {
  display: block; font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem); line-height: 1;
  letter-spacing: -0.01em; color: var(--tinta-c);
  margin-bottom: var(--s-2);
}
.oficio__big.num { color: var(--ambar-d); }
.oficio__big--word { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; }
.oficio__plabel {
  font-family: var(--ff-text); font-size: 0.9rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grafito); margin: 0 0 var(--s-3);
}
.oficio__pillar .body { color: var(--tinta-c); opacity: 0.78; margin-inline: auto; }

/* en pin (desktop motion), los pilares 2 y 3 entran por JS */
.js-motion .oficio--pinned .oficio__pillar:not(.is-first) { opacity: 0; }

/* =====================================================================
   6. LA PRUEBA
   ===================================================================== */
.prueba__grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 7vw, 120px); align-items: start;
}
.prueba__big {
  font-family: var(--ff-text); font-weight: 600;
  font-size: clamp(3.5rem, 9vw, 8rem); line-height: 1;
  color: var(--ambar); margin: var(--s-5) 0 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.prueba__big-label {
  font-size: 0.95rem; letter-spacing: 0.04em;
  color: rgba(244,239,231,0.8); margin: var(--s-2) 0 var(--s-5);
  text-transform: uppercase;
}
.prueba__side { padding-top: var(--s-6); }
.prueba__press-title { margin-bottom: var(--s-3); }
.prueba__press {
  display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center;
  font-size: 0.98rem; letter-spacing: 0.03em;
  color: rgba(244,239,231,0.82); margin-bottom: var(--s-6);
}
.prueba__press li { position: relative; padding: 0 16px; }
.prueba__press li:first-child { padding-left: 0; }
.prueba__press li:not(:last-child)::after {
  content: "·"; position: absolute; right: 0; transform: translateX(50%);
  color: var(--ambar);
}
.prueba__quote {
  margin: 0 0 var(--s-5); padding-left: var(--s-4);
  border-left: 2px solid var(--ambar);
}
.prueba__quote p {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.35; margin: 0 0 var(--s-2);
}
.prueba__quote cite {
  font-family: var(--ff-text); font-style: normal; font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,239,231,0.6);
}

.prueba__videos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4); margin-top: var(--section-pad);
}

/* facades (video / mapa / tour) */
.facade {
  position: relative; display: block; width: 100%;
  border-radius: 6px; overflow: clip;
  aspect-ratio: 16/10; background: var(--noche-2);
  text-align: left;
}
.facade--video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform var(--d-comp) var(--ease-soft), opacity var(--d-comp) var(--ease-soft); }
@media (hover: hover) { .facade--video:hover img { transform: scale(1.04); opacity: 1; } }
.facade--video:active img { transform: scale(1.04); }
.facade__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--ambar); display: grid; place-items: center;
  transition: transform var(--d-micro) var(--ease-soft);
}
.facade__play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--noche);
}
@media (hover: hover) { .facade--video:hover .facade__play { transform: translate(-50%,-50%) scale(1.08); } }
.facade__iframe { width: 100%; height: 100%; border: 0; }

.facade--tour {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-5); aspect-ratio: 16/10;
  background: linear-gradient(135deg, #241d14, #14110D);
  border: 1px solid rgba(224,161,85,0.25);
}
.facade__tour-label { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.5vw, 2rem); line-height: 1.1; color: var(--tinta-d); }
.facade__tour-sub { font-size: 0.9rem; color: var(--ambar); margin-top: var(--s-2); }

/* =====================================================================
   7. USADOS
   ===================================================================== */
.usados__head { max-width: 760px; padding-bottom: var(--section-pad); }
.usados__list { display: flex; flex-direction: column; gap: 0; }
.usado {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 4vh, 36px) 0;
  border-top: 1px solid rgba(26,23,18,0.12);
  transition: background-color var(--d-micro) var(--ease-soft);
}
.usado:last-child { border-bottom: 1px solid rgba(26,23,18,0.12); }
@media (hover: hover) { .usado:hover { background-color: rgba(26,23,18,0.025); } }
.usado__media { overflow: clip; border-radius: 4px; aspect-ratio: 16/9; }
.usado__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-comp) var(--ease-soft); }
@media (hover: hover) { .usado:hover .usado__media img { transform: scale(1.03); } }
.usado__model { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 0 0 var(--s-2); }
.usado__meta { display: flex; gap: var(--s-5); align-items: baseline; margin: 0 0 var(--s-2); }
.usado__year { font-size: 1.05rem; font-weight: 600; color: var(--grafito); }
.usado__km { font-size: 1.2rem; font-weight: 600; color: var(--tinta-c); }
.usado__note { font-size: 0.9rem; color: rgba(26,23,18,0.6); margin: 0; }
.usado__cta { white-space: nowrap; }

/* =====================================================================
   8. CONTACTO
   ===================================================================== */
.contacto__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.contacto__pull {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.2;
  color: var(--ambar); margin: var(--s-5) 0; max-width: 18ch;
}
.contacto__wa {
  display: inline-flex; flex-direction: column; gap: 2px;
  margin: var(--s-3) 0 var(--s-6);
  padding: 18px 28px; border-radius: 8px;
  background-color: var(--ambar) !important; color: var(--noche);
  transition: transform var(--d-micro) var(--ease-soft);
}
.contacto__wa:hover { transform: translateY(-2px); }
.contacto__wa:active { transform: scale(0.98); }
.contacto__wa-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.contacto__wa-num { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }
.contacto__details { margin: 0; display: grid; gap: var(--s-4); }
.contacto__details dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,231,0.55); margin-bottom: 4px; }
.contacto__details dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.contacto__details a:hover { color: var(--ambar); }

.contacto__map { position: sticky; top: 100px; }
.facade--map {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--s-3); aspect-ratio: 4/3; text-align: center;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(224,161,85,0.12), transparent 70%),
    linear-gradient(160deg, #241d14, #14110D);
  border: 1px solid rgba(244,239,231,0.1);
}
.facade__map-pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  background: var(--ambar); transform: rotate(-45deg);
  box-shadow: 0 0 0 6px rgba(224,161,85,0.18);
}
.facade__map-label { font-family: var(--ff-display); font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--tinta-d); }
.facade__map-hint { font-size: 0.85rem; color: rgba(244,239,231,0.55); }
.contacto__map-open { display: inline-block; margin-top: var(--s-4); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--noche-2); color: var(--tinta-d); padding-block: clamp(64px, 9vh, 110px) var(--s-6); position: relative; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.footer__brand img { height: 34px; width: auto; margin-bottom: var(--s-3); }
.footer__tag { font-family: var(--ff-display); font-style: italic; font-size: 1rem; color: rgba(244,239,231,0.7); margin: 0; }
.footer__h { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,231,0.5); margin: 0 0 var(--s-3); }
.footer__col { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__col a { color: rgba(244,239,231,0.85); position: relative; width: fit-content; }
.footer__col a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--ambar); transform: scaleX(0); transform-origin: left; transition: transform var(--d-micro) var(--ease-soft); }
.footer__col a:hover::after, .footer__col a:active::after { transform: scaleX(1); }
.footer__note { margin: var(--s-7) auto 0; font-size: 0.82rem; color: rgba(244,239,231,0.45); max-width: var(--wrap); }

/* =====================================================================
   FAB WhatsApp (solo mobile, post-hero)
   ===================================================================== */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 56px; height: 56px; border-radius: 999px;
  background-color: var(--ambar) !important; color: var(--noche);
  display: none; place-items: center;
  box-shadow: 0 6px 24px rgba(20,17,13,0.35);
  opacity: 0; transform: translateY(16px) scale(0.9);
  transition: opacity var(--d-comp) var(--ease-out), transform var(--d-comp) var(--ease-out);
}
.fab.is-shown { opacity: 1; transform: none; }
.fab:active { transform: scale(0.94); }

/* =====================================================================
   RESPONSIVE  (mobile 390-412)
   ===================================================================== */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { gap: var(--s-3); }

  .fab { display: grid; }

  .promesa__grid { grid-template-columns: 1fr; }
  .promesa__photo img { min-height: 56vh; }

  .vida__pair, .vida__pair--rev { grid-template-columns: 1fr; }
  .vida__pair--rev .vida__big { order: 1; }
  .vida__pair--rev .vida__small { order: 2; }
  .vida__small { margin-top: 0; }

  .modelo, .modelo[data-side="right"] { grid-template-columns: 1fr; min-height: 0; }
  .modelo[data-side="right"] .modelo__media { order: 1; }
  .modelo[data-side="right"] .modelo__text { order: 2; }
  .modelo__media img { min-height: 0; aspect-ratio: 16/10; }
  .modelo__num { font-size: clamp(6rem, 28vw, 11rem); top: -0.25em; }

  .prueba__grid { grid-template-columns: 1fr; }
  .prueba__side { padding-top: 0; }
  .prueba__videos { grid-template-columns: 1fr; }

  .usado { grid-template-columns: 1fr; gap: var(--s-3); text-align: left; }
  .usado__media { aspect-ratio: 16/9; }
  .usado__cta { justify-self: start; }

  .contacto__grid { grid-template-columns: 1fr; }
  .contacto__map { position: static; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  /* mobile: apretar un poco los espacios en blanco */
  .section { padding-block: clamp(36px, 5vh, 60px); }
  .vida__head, .modelos__head, .usados__head { padding-bottom: clamp(24px, 4vh, 48px); }
  .vida__hero { height: clamp(44vh, 56vh, 64vh); }
  .vida__pair { margin-bottom: clamp(28px, 5vh, 56px); }
  .oficio__stage { min-height: auto; padding-block: clamp(8px, 3vh, 28px); }
  .oficio__gauge { display: none; }  /* indicador del pin, sin sentido en mobile flat */
  .oficio__manifesto { padding-bottom: clamp(24px, 4vh, 48px); }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.8rem, 13vw, 4.5rem); }
}

/* =====================================================================
   REDUCED MOTION: calmo, no stripped. Todo visible. Sin bloom creciente,
   sin pin, sin count-up, sin migracion scrubbeada.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal-media, .reveal-media img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__bloom { opacity: 0.85; transform: scale(1); }
  .intro { display: none !important; }
  /* transiciones cortas de opacity/color se conservan (no se tocan) */
}