/* ===== tokens (web-architect, LEDGER NOIR) ===== */
:root {
  /* ============ LEDGER NOIR — COLOR (near-blacks cálidos en capas) ============ */
  --bg: #15120d; /* base de página (warm near-black, menos frío/plano) */
  --bg-2: #1c1711; /* banda alternativa (un punto más clara y cálida) */
  --bg-pit: #0e0b08; /* escenario de la historia (más hondo, cálido) */
  --panel: #17130f; /* superficie cálida */
  --panel-2: #1c1610; /* superficie elevada */
  --ink: #f5f0e8; /* texto primario warm-white */
  --soft: #bdb6ad; /* texto secundario */
  --mute: #8b857d; /* metadatos */
  /* ORO — EXCLUSIVO para dinero/contador/CTA principal. Nada más lo usa saturado. */
  --gold: #e8c069;
  --gold-deep: #c79f63;
  --gold-rgb: 232, 192, 105;
  /* USO ÚNICO EN TODA LA WEB */
  --red-missed: #c0392b; /* SOLO el sello LLAMADA PERDIDA (historia, 1 vez) */
  --red-rgb: 192, 57, 43;
  --ok-live: #4ade80; /* SOLO el instante 'respondido' (pulso + éxito form) */
  --ok-rgb: 74, 222, 128;
  --line: rgba(232, 192, 105, 0.16);
  --line-soft: rgba(245, 240, 232, 0.08);

  /* ============ TIPOGRAFÍA ============ */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  --text-2xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
  --text-3xl: clamp(2.75rem, 1.9rem + 4.5vw, 5.5rem); /* H1 hero */
  --text-money: clamp(5.5rem, 3rem + 16vw, 13.75rem); /* contador 88->220px */
  --text-countdown: clamp(3.5rem, 2rem + 8vw, 7.5rem); /* 60->0 del pulso */
  --leading-tight: 1.02;
  --leading-snug: 1.18;
  --leading-body: 1.6;
  --tracking-display: -0.03em; /* Fraunces display grande */
  --tracking-money: -0.02em; /* cifras gigantes */
  --tracking-label: 0.24em; /* eyebrows uppercase */
  --tracking-mono: 0.08em; /* timestamps mono */
  /* aplicar en .money y .mono: font-variant-numeric:tabular-nums lining-nums */

  /* ============ ESPACIADO base-8 ============ */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --section-pad: clamp(4.5rem, 11vw, 9rem);
  --content-max: 66ch;
  --layout-max: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* ============ RADIOS ============ */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-dramatic: cubic-bezier(
    0.7,
    0,
    0.16,
    1
  ); /* la historia: entradas pesadas */
  --dur-micro: 180ms;
  --dur-ui: 240ms;
  --dur-reveal: 560ms;

  /* ============ SOMBRAS / GLOWS (glow de color, nunca gris) ============ */
  --shadow-card:
    inset 0 1px 0 rgba(245, 240, 232, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 28px -12px rgba(0, 0, 0, 0.65),
    0 0 40px -20px rgba(232, 192, 105, 0.18);
  --glow-gold: 0 0 40px -18px rgba(232, 192, 105, 0.35);
  --glow-money: 0 0 90px -24px rgba(232, 192, 105, 0.5); /* el contador sangrando */
  --glow-red: 0 0 60px -24px rgba(192, 57, 43, 0.5); /* solo llamada perdida */
  --glow-ok: 0 0 30px -10px rgba(74, 222, 128, 0.55); /* solo 'respondido' */

  /* ============ FOCUS / CAPAS ============ */
  --focus-ring: 2px solid var(--gold);
  --focus-offset: 3px;
  --z-nav: 60;
  --z-sticky-cta: 55;
  --z-overlay: 80;
  --mx: 50%;
  --my: 32%;
}

/* ===== base-global ===== */
/* ============================================================
   base-global — capa base de LEDGER NOIR (orden 0)
   Los tokens :root los inyecta el ensamblador ANTES de este bloque.
   Aqui: @font-face autohosteadas, reset, atmosfera, utilidades.
   ============================================================ */

/* ---- FUENTES CRITICAS autohosteadas (preload en el head) ----
   Definidas DESPUES del stylesheet de Google Fonts: a igual descriptor
   (familia+peso+estilo) gana esta declaracion => el preload se usa.   */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/public/fonts/fraunces-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/public/fonts/archivo-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- MOTION: apagado global (las secciones ademas degradan en JS) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- RESET / BASE ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}
body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
img,
video {
  background: var(--bg-2);
} /* reserva visual mientras carga (CLS) */
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
h3 {
  font-weight: 500;
}
em {
  font-style: italic;
  color: var(--gold);
}
::selection {
  background: rgba(var(--gold-rgb), 0.28);
  color: var(--ink);
}

/* ---- TIPOGRAFIA UTILITARIA (protagonistas: las cifras) ---- */
.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.money {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-money);
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- ATMOSFERA GLOBAL (decorativa, aria-hidden en el HTML) ---- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg);
  background-image: url("/public/art-gold.jpg");
  background-image: image-set(
    url("/public/art-gold.webp") type("image/webp"),
    url("/public/art-gold.jpg") type("image/jpeg")
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      125% 100% at 50% 26%,
      color-mix(in srgb, var(--bg) 32%, transparent),
      color-mix(in srgb, var(--bg) 76%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 50%, transparent),
      color-mix(in srgb, var(--bg) 62%, transparent)
    );
}
.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(
      45% 50% at 18% 16%,
      rgba(var(--gold-rgb), 0.1),
      transparent 70%
    ),
    radial-gradient(
      50% 55% at 84% 78%,
      rgba(var(--gold-rgb), 0.06),
      transparent 72%
    );
}
.atmos__aurora {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 200deg,
    rgba(var(--gold-rgb), 0.07),
    transparent 32%,
    rgba(199, 159, 99, 0.05) 62%,
    transparent 86%
  );
  filter: blur(80px);
  border-radius: 50%;
  opacity: 0.7;
  animation: aurora 80s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurora {
  0% {
    transform: translate(-52%, -52%) scale(1.05) rotate(0);
  }
  100% {
    transform: translate(-46%, -44%) scale(1.14) rotate(8deg);
  }
}
.atmos__grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 160px 160px;
  animation: grain 8s steps(6) infinite;
}
@keyframes grain {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -26px 14px;
  }
  100% {
    background-position: 18px -22px;
  }
}
.spotlight {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    440px circle at var(--mx) var(--my),
    rgba(var(--gold-rgb), 0.06),
    transparent 60%
  );
  transition: background 0.2s ease-out;
}
@media (hover: none), (pointer: coarse) {
  .spotlight {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmos__aurora,
  .atmos__grain {
    animation: none;
  }
}

/* Textura de libro mayor — la usan historia y pulso como capa estatica */
/* regla Adrian 2026-06-10: SIN retículas. Relleno atmosférico permitido: glow + grano */
.ledger-tex {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      90% 70% at 28% 22%,
      rgba(var(--gold-rgb), 0.05),
      transparent 60%
    ),
    radial-gradient(
      80% 60% at 75% 80%,
      rgba(var(--gold-rgb), 0.04),
      transparent 65%
    );
}
.ledger-tex::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ---- LAYOUT ---- */
.container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-pad);
  position: relative;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 600;
  border: 1px solid var(--line-soft);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
}
.kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}

/* Grids compartidos (mobile-first) */
.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- BOTONES (oro = SOLO el CTA principal) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    background var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn:hover {
  background: rgba(var(--gold-rgb), 0.08);
  border-color: var(--line);
}
.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--bg-pit);
  border-color: transparent;
  box-shadow: var(--glow-gold);
}
.btn--gold:hover {
  transform: translateY(-2px);
}

/* ---- SUPERFICIES ---- */
.card {
  background: linear-gradient(165deg, var(--panel), var(--bg-pit));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}
@media (min-width: 768px) {
  .card {
    padding: var(--space-lg);
  }
}

/* ---- A11Y: foco + skip-link + contacto gateado ---- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3.5rem;
  background: var(--panel);
  color: var(--ink);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--dur-ui) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-sm);
}

/* Protocolo de contacto: los botones tel/WhatsApp nacen con [hidden];
   base-global.js los activa SOLO si window.DT_CONTACT tiene valor. */
[data-contact][hidden] {
  display: none !important;
}

/* ---- REVEAL estatico de respaldo (si una seccion lo usa sin GSAP) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ===== nav ===== */
/* ============================================================
   NAV — Ledger Noir
   Header sticky (is-stuck / is-hidden) + overlay móvil + CTA sticky bottom.
   Solo tokens globales. Mobile-first (768 / 1100; 820 = corte explícito
   del CTA sticky según spec).
   ============================================================ */

.nav-root {
  display: contents;
  /* prop scoped (no es token global): altura del header para sincronizar overlay */
  --nav-h: 64px;
}

/* ---------- Header ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition:
    transform var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
  will-change: transform;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav.is-hidden {
  transform: translateY(-100%);
}
.nav.is-menu-open {
  z-index: calc(var(--z-overlay) + 1);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: var(--nav-h);
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Lockup de marca: anillo-reloj + wordmark (calidad pedida 2026-06-10) ---------- */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.22rem + 0.3vw, 1.45rem);
  letter-spacing: -0.018em;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.nav__brand-mark {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.28));
}
.nav__brand-word em {
  font-style: italic;
  padding-right: 0.05em; /* el clip no recorta la cursiva */
  background: linear-gradient(
    118deg,
    #fff3d6 0%,
    var(--gold) 52%,
    var(--gold-deep) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Links desktop (ocultos en móvil) ---------- */
.nav__links {
  display: none;
}

/* ---------- Cluster derecho ---------- */
.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav__lang {
  display: none; /* en móvil vive dentro del overlay */
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
  transition:
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}
.nav__lang:hover,
.nav__lang:focus-visible {
  color: var(--ink);
  border-color: var(--line);
}

.nav__cta {
  display: none;
}

/* ---------- Hamburguesa ---------- */
.nav__burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__burger-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-out);
  will-change: transform;
}
.nav__burger[aria-expanded="true"] .nav__burger-line:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-line:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* ---------- Fallback .btn (especificidad 0: el .btn global SIEMPRE gana) ---------- */
:where(.nav-root .btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.35rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
:where(.nav-root .btn--gold) {
  background: var(--gold);
  color: var(--bg-pit);
}
:where(.nav-root .btn--gold:hover),
:where(.nav-root .btn--gold:focus-visible) {
  background: var(--gold-deep);
  box-shadow: var(--glow-gold);
}
.nav-cta-arrow {
  transform: translateY(-1px);
}

/* ---------- Focus visible ---------- */
.nav-root a:focus-visible,
.nav-root button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- Overlay móvil ---------- */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.nav-menu[hidden] {
  display: none;
}
.nav-menu.is-open {
  opacity: 1;
}

.nav-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-lg)) var(--gutter)
    calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.nav-menu__links {
  display: flex;
  flex-direction: column;
}
.nav-menu__links a {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--soft);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav-menu__links a:first-child {
  border-top: 0;
}
.nav-menu__links a:hover,
.nav-menu__links a:focus-visible {
  color: var(--ink);
}

.nav-menu__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--mute);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 2.4ch;
}

.nav-menu__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.nav-menu__lang {
  display: inline-flex;
  align-self: flex-start;
}
.nav-menu__cta {
  width: 100%;
  min-height: 56px;
  font-size: var(--text-base);
}

/* ---------- CTA sticky móvil (solo <820px, según spec) ---------- */
.nav-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-cta);
  padding: var(--space-xs) var(--gutter)
    calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) var(--ease-out),
    visibility 0s linear var(--dur-ui);
}
.nav-sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) var(--ease-out),
    visibility 0s;
}
.nav-sticky-cta__btn {
  width: 100%;
  min-height: 52px;
  font-size: var(--text-base);
}

/* ============ ≥768: nav completa de escritorio ============ */
@media (min-width: 768px) {
  .nav-root {
    --nav-h: 72px;
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 0.25rem + 2.2vw, 2.5rem);
  }
  .nav__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--soft);
    text-decoration: none;
    transition: color var(--dur-micro) var(--ease-out);
  }
  /* underline-grow oro (patrón existente) */
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 9px;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-ui) var(--ease-out);
  }
  .nav__links a:hover,
  .nav__links a:focus-visible {
    color: var(--ink);
  }
  .nav__links a:hover::after,
  .nav__links a:focus-visible::after {
    transform: scaleX(1);
  }

  .nav__lang {
    display: inline-flex;
  }
  .nav__cta {
    display: inline-flex;
  }
  .nav__burger {
    display: none;
  }
  .nav-menu {
    display: none;
  }
}

/* ============ ≥820: el CTA sticky desaparece ============ */
@media (min-width: 820px) {
  .nav-sticky-cta {
    display: none;
  }
}

/* ============ ≥1100: más aire entre links ============ */
@media (min-width: 1100px) {
  .nav__links {
    gap: var(--space-lg);
  }
  .nav__right {
    gap: var(--space-sm);
  }
}

/* ============ Reduced motion: estados directos, sin transiciones ============ */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav__lang,
  .nav__burger-line,
  .nav__links a,
  .nav__links a::after,
  .nav-menu,
  .nav-menu__links a,
  .nav-sticky-cta,
  :where(.nav-root .btn) {
    transition: none;
  }
}

/* ===== hero ===== */
/* ============================================================
   HERO — la promesa + el reloj (Ledger Noir)
   Mobile-first. Breakpoints: 768 / 1100. Solo tokens :root.
   ============================================================ */

.hero {
  position: relative;
  min-height: 90svh;
  display: grid;
  align-items: center;
  /* móvil: top compacto — el primer fold debe contener H1 + CTA (auditoría) */
  padding: calc(var(--space-xl) + var(--space-md)) var(--gutter)
    var(--space-2xl);
  background: var(--bg);
}

.hero__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .hero {
    padding-top: calc(var(--space-2xl) + var(--space-lg));
  }
  .hero__inner {
    gap: var(--space-xl);
  }
}

/* ---------- Columna copy (centrada en móvil) ---------- */

.hero__copy {
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
}

.hero__title {
  margin: var(--space-md) auto 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}

.hero__title em {
  font-style: italic;
  font-weight: 500;
}

.hero__lede {
  margin: var(--space-md) auto 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* ---------- CTAs ---------- */

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem; /* target >= 48px */
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}

.hero .btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.hero .btn--gold {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg-pit);
  box-shadow: var(--glow-gold);
}

.hero .btn--gold:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

.hero .btn--ghost {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--soft);
}

.hero .btn--ghost:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* ---------- Badge <60s ---------- */

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: var(--space-lg) 0 0;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-size: var(--text-sm);
  color: var(--soft);
}

.hero__badge-text b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

.hero__badge-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok-live);
  animation: hero-dot-pulse 2.4s var(--ease-out) infinite;
}

@keyframes hero-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(var(--ok-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0);
  }
}

/* ---------- El reloj ---------- */

.hero__clock-wrap {
  order: -1; /* móvil: reloj arriba */
  display: grid;
  justify-items: center;
}

.hero__clock {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
}

.hero__clock-dial {
  position: relative;
  /* móvil: compacto para que H1 + CTA entren en el primer fold (lección de la auditoría) */
  width: min(42vw, 170px);
  aspect-ratio: 1; /* reserva: cero CLS */
}

@media (min-width: 768px) {
  .hero__clock-dial {
    width: min(64vw, 420px);
  }
}

/* glow oro tras el anillo (color, nunca gris) */
.hero__clock-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--gold-rgb), 0.07),
    transparent 72%
  );
  box-shadow: var(--glow-gold);
  pointer-events: none;
}

.hero__clock-svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.hero__clock-ring {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

.hero__tick {
  stroke: var(--mute);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.55;
}

.hero__tick--major {
  opacity: 0.9;
}

.hero__clock-hand line {
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.hero__clock-hand circle {
  fill: var(--gold);
}

/* barrido: 360 grados en 60s lineales, CSS puro */
.hero__clock-hand {
  transform-origin: 220px 220px;
  animation: hero-clock-sweep 60s linear infinite;
}

@keyframes hero-clock-sweep {
  to {
    transform: rotate(360deg);
  }
}

.hero__clock-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  letter-spacing: var(--tracking-money);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold);
  text-shadow: 0 0 32px rgba(var(--gold-rgb), 0.3);
  pointer-events: none;
}

.hero__clock-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--mute);
  text-align: center;
}

/* ---------- Reduced motion: estados estáticos ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__clock-hand {
    animation: none;
    transform: rotate(282deg); /* congelada a los 47/60 */
  }
  .hero__badge-dot {
    animation: none;
    box-shadow: var(--glow-ok);
  }
  .hero .btn {
    transition: none;
  }
}

/* ============ >= 768px: dos columnas, reloj a la derecha ============ */

@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--space-xl);
  }

  .hero__copy {
    text-align: left;
  }

  .hero__title,
  .hero__lede {
    margin-inline: 0;
  }

  .hero__ctas {
    justify-content: flex-start;
  }

  .hero__clock-wrap {
    order: 0;
  }

  .hero__clock-dial {
    width: min(100%, 420px);
  }
}

/* ============ >= 1100px: respiro de layout completo ============ */

@media (min-width: 1100px) {
  .hero__inner {
    gap: var(--space-2xl);
  }

  .hero__clock-dial {
    width: min(36vw, 420px);
  }
}

/* ===== historia ===== */
/* ============================================================
   historia.css — "Cada Llamada Cuenta" (sección firma, scroll-telling)
   Ledger Noir: el escenario se hunde a --bg-pit; oro SOLO en cifras.
   Arquitectura de modos:
   · base (sin .hst--scroll) = 5 beats estáticos apilados → sirve a
     no-JS y a prefers-reduced-motion (req 6) sin duplicar contenido.
   · .hst--scroll (la añade historia.js) = patrón sticky-graphic con
     pin GSAP. Solo tokens :root — nada redefinido. Mobile-first.
   ============================================================ */

.hst {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--bg-pit) 6%,
    var(--bg-pit) 94%,
    var(--bg) 100%
  );
  padding-block: var(--section-pad);
  overflow: clip;
}

/* ---- capas de fondo: textura ledger (opacity .08) + viñeta ---- */
.hst__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* sin textura de líneas (regla Adrian 2026-06-10) — la viñeta ::after se conserva */
}
.hst__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* viñeta: mismo near-black del token --bg-pit (#080709) en rgba */
  background: radial-gradient(
    120% 90% at 50% 38%,
    transparent 42%,
    rgba(8, 7, 9, 0.92) 100%
  );
}

/* overlay B4 "negro casi puro" — opacity la scrubea GSAP */
.hst__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.hst--scroll .hst__dim {
  display: block;
}

.hst__layout {
  position: relative;
  z-index: 2;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* sr-only local (no depende de utilidades globales) */
.hst-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ STAGE (oculto en modo estático) ============ */
.hst__stagecol {
  display: none;
}
.hst--scroll .hst__stagecol {
  display: block;
}

.hst__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm) var(--space-md);
  /* móvil: el stage pineado enmascara el texto que pasa por detrás */
  background: linear-gradient(
    180deg,
    var(--bg-pit) 0%,
    var(--bg-pit) 76%,
    transparent 100%
  );
}

/* marco de vídeo 16:9 — aspect-ratio fijo = cero CLS */
.hst__frame {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-pit);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hst__clips {
  position: absolute;
  inset: 0;
}
.hst__clip {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.hst__clip.is-on {
  opacity: 1;
}
.hst__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.hst__clip.is-ready .hst__video {
  opacity: 1;
}
.hst__clip.is-novideo .hst__video {
  display: none;
}

/* ---- composiciones fallback (poster-CSS hasta que exista cada mp4) ---- */
.hst-comp {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-pit) 0%, var(--panel) 140%);
}
/* relleno interior de escena: glow cálido + grano (sin retículas — regla Adrian) */
.hst-comp::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 90% at 50% 30%,
      rgba(var(--gold-rgb), 0.06),
      transparent 58%
    ),
    radial-gradient(
      70% 60% at 80% 90%,
      rgba(var(--gold-rgb), 0.04),
      transparent 62%
    );
}
.hst-comp::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* B1 — dot rojo llamando (el manifest lo permite: es la llamada perdida) */
.hst-comp--call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.hst-comp__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--red-missed);
  box-shadow: var(--glow-red);
  animation: hst-ring 1.4s ease-in-out infinite;
}
@keyframes hst-ring {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}
.hst-comp__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--soft);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

/* B2 — búsqueda con 3 resultados ghost (sin oro: no es dinero) */
.hst-comp--search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: clamp(1rem, 0.5rem + 3vw, 2.5rem);
}
.hst-comp__query {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.hst-comp__results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hst-comp__results li {
  padding-block: var(--space-2xs);
  border-top: 1px solid var(--line-soft);
  color: var(--soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  opacity: 0.55;
}
.hst-comp__results li.is-chosen {
  opacity: 1;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 5px;
}

/* B5 — mockup de teléfono + burbuja SMS */
.hst-comp--sms {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hst-comp__phone {
  position: relative;
  height: 84%;
  aspect-ratio: 9 / 17;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-pit) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2xs);
  padding: var(--space-xs);
}
.hst-comp__bubble {
  margin: 0;
  padding: 0.5em 0.7em;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.45;
  opacity: 0; /* aparece al activarse el clip; en estático se muestra fija (override abajo) */
}
.hst--scroll .hst__clip.is-on .hst-comp__bubble {
  animation: hst-sms 0.6s var(--ease-out) 0.5s both;
}
@keyframes hst-sms {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hst:not(.hst--scroll) .hst-comp__bubble {
  opacity: 1;
}
.hst-comp__time {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- sello LLAMADA PERDIDA — el ÚNICO rojo de toda la web ---- */
.hst__stamp {
  position: absolute;
  top: 9%;
  right: 5%;
  z-index: 3;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(
    1.5rem,
    1.35rem + 0.7vw,
    1.9rem
  ); /* ≥24px → AA en texto grande sobre --bg-pit */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--red-missed);
  border: 2px solid var(--red-missed);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.55em;
  background: rgba(
    8,
    7,
    9,
    0.55
  ); /* --bg-pit en rgba: legibilidad sobre el vídeo */
  box-shadow:
    var(--glow-red),
    inset 0 0 18px rgba(var(--red-rgb), 0.12);
  transform: rotate(-8deg) scale(1.15);
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-dramatic),
    transform var(--dur-reveal) var(--ease-dramatic);
  pointer-events: none;
}
.hst--scroll .hst__frame.is-stamped .hst__stamp {
  opacity: 1;
  transform: rotate(-8deg) scale(1);
}
.hst--scroll .hst__frame.is-stamped.is-unstamped .hst__stamp {
  opacity: 0;
  transform: rotate(-8deg) scale(0.96);
}

/* ---- botón pausa (req 6) — target 44px ---- */
.hst__pause {
  position: absolute;
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(8, 7, 9, 0.72); /* --bg-pit en rgba */
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-ui) var(--ease-out);
}
.hst__pause:hover {
  background: rgba(8, 7, 9, 0.92);
}
.hst__pause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.hst__pause .ic-play {
  display: none;
}
.hst__pause[data-state="paused"] .ic-pause {
  display: none;
}
.hst__pause[data-state="paused"] .ic-play {
  display: block;
}
.hst__pause[data-state="paused"] .hst__lbl-pause {
  display: none;
}
.hst__pause[data-state="playing"] .hst__lbl-play {
  display: none;
}

/* ============ EL CONTADOR ============ */
.hst__counter {
  position: relative;
  display: grid;
  place-items: center;
  line-height: var(--leading-tight);
  transform-origin: 50% 60%;
}
.hst__counter > * {
  grid-area: 1 / 1;
}
.hst__halo {
  z-index: 0;
  width: 130%;
  height: 120%;
  border-radius: var(--radius-pill);
  background: radial-gradient(
    closest-side,
    rgba(var(--gold-rgb), 0.22),
    transparent 72%
  );
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}
.hst__halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}
.hst__counter.is-bleeding .hst__halo::after {
  animation: hst-bleed 2.2s ease-in-out infinite alternate;
}
@keyframes hst-bleed {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 0.85;
  }
}

.hst__money {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-money);
  letter-spacing: var(--tracking-money);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold);
  min-width: 6ch;
  text-align: center; /* reserva: cero CLS */
  /* --glow-money es formato box-shadow (lleva spread, inválido en text-shadow):
     se reconstruye el mismo glow con los tokens rgb */
  text-shadow: 0 0 90px rgba(var(--gold-rgb), 0.5);
  transition:
    opacity var(--dur-reveal) var(--ease-dramatic),
    transform var(--dur-reveal) var(--ease-dramatic);
}
.hst__count60 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-countdown);
  letter-spacing: var(--tracking-money);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold); /* oro estable: glow contenido, sin sangrado */
  text-shadow: 0 0 40px rgba(var(--gold-rgb), 0.35);
  opacity: 0;
  transform: translateY(8%);
  transition:
    opacity var(--dur-reveal) var(--ease-dramatic),
    transform var(--dur-reveal) var(--ease-dramatic);
}
/* B5: el dinero se congela y muta a cuenta 60→0 */
.hst__stage[data-beat="5"] .hst__money {
  opacity: 0;
  transform: translateY(-6%);
}
.hst__stage[data-beat="5"] .hst__count60 {
  opacity: 1;
  transform: none;
}

.hst__ts {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============ LOS 5 BEATS ============ */
.hst__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hst__step {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line-soft); /* asientos del libro mayor (modo estático) */
}
.hst__step:first-child {
  border-top: 0;
}

.hst__step-ts {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--dur-reveal) var(--ease-out);
}
.hst__step.is-active .hst__step-ts {
  color: var(--soft);
}

.hst__step-body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  max-width: 40ch;
  text-wrap: balance;
}

.hst__step-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  max-width: 52ch;
  font-variant-numeric: tabular-nums lining-nums;
}

.hst__sealed {
  margin: 0;
  display: inline-block;
  width: max-content;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.55em 1.1em;
  font-variant-numeric: tabular-nums lining-nums;
}

.hst__live {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* target ≥44px */
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}
.hst__live:hover {
  text-decoration-color: var(--gold);
} /* CTA: uso legítimo del oro */

/* ---- piezas SOLO del modo estático (posters + cifras finales + sello fijo) ---- */
.hst--scroll .hst__static {
  display: none !important;
}
.hst__step-poster {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-pit);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hst__step-figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-money);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(var(--gold-rgb), 0.35);
}
.hst__step-stamp {
  display: inline-block;
  width: max-content;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(
    1.5rem,
    1.4rem + 0.5vw,
    1.75rem
  ); /* ≥24px → AA texto grande */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-missed);
  border: 2px solid var(--red-missed);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.55em;
  transform: rotate(-4deg);
  box-shadow: var(--glow-red);
}

.hst__honest {
  position: relative;
  z-index: 2;
  max-width: var(--layout-max);
  margin: var(--space-2xl) auto 0;
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
}

/* ============ MODO SCROLL (lo activa historia.js) ============ */
/* móvil: stage pineado arriba; el texto de cada beat vive en el tercio inferior */
.hst--scroll .hst__step {
  border-top: 0;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-block: 0 6svh;
  opacity: 0.35;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.hst--scroll .hst__step.is-active {
  opacity: 1;
}
.hst--scroll .hst__step:first-child {
  min-height: 42svh;
}

/* focus visible con los tokens */
.hst a:focus-visible,
.hst button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ============ BREAKPOINTS ============ */

/* móvil/tablet — legibilidad del modo scroll (feedback Adrian 2026-06-10):
   el contador gigante desbordaba la máscara del stage pineado y el texto
   de los beats se montaba encima, con fantasmas de pasos inactivos. */
@media (max-width: 1099px) {
  .hst--scroll {
    --text-money: clamp(3.25rem, 2rem + 9vw, 5.75rem);
  }
  .hst--scroll .hst__count60 {
    font-size: clamp(2.5rem, 1.6rem + 6vw, 4.5rem);
  }
  .hst--scroll .hst__stage {
    /* máscara extendida: el contador nunca asoma tras el texto */
    background: linear-gradient(
      180deg,
      var(--bg-pit) 0%,
      var(--bg-pit) 86%,
      transparent 100%
    );
  }
  .hst--scroll .hst__step {
    /* solo el beat activo es visible (sin fantasmas) + velo propio bajo el texto */
    opacity: 0;
    background: linear-gradient(
      0deg,
      rgba(12, 11, 15, 0.96) 0%,
      rgba(12, 11, 15, 0.96) 44%,
      rgba(12, 11, 15, 0.8) 60%,
      transparent 80%
    );
  }
  .hst--scroll .hst__step.is-active {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  /* modo estático en pantallas medias: columna de lectura centrada */
  .hst:not(.hst--scroll) .hst__layout {
    max-width: 760px;
  }
  .hst__frame {
    width: min(100%, 560px);
  }
}

@media (min-width: 1100px) {
  .hst--scroll .hst__layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: start;
  }
  .hst--scroll .hst__stage {
    height: 100svh;
    justify-content: center;
    background: transparent;
    padding-block: 0;
  }
  .hst--scroll .hst__step {
    min-height: 96svh;
    justify-content: center;
    padding-block: 0;
  }
  .hst--scroll .hst__step:first-child {
    min-height: 72svh;
  }
}

/* ============ REDUCED MOTION (cinturón extra; el modo estático ya cubre el layout) ============ */
@media (prefers-reduced-motion: reduce) {
  .hst__stamp,
  .hst__money,
  .hst__count60,
  .hst__clip,
  .hst__video,
  .hst__step {
    transition: none;
  }
  .hst-comp__dot {
    animation: none;
  }
  .hst-comp__bubble {
    opacity: 1;
    animation: none;
  }
  .hst__counter.is-bleeding .hst__halo::after {
    animation: none;
  }
}

/* ===== pulso ===== */
/* ============================================================
   pulso.css — EL PULSO: command center + form real (conversión)
   Ledger Noir: panel #0A0908 (spec: entre --bg-pit y --panel);
   oro SOLO contador/dot/CTA · verde SOLO el destello 'respondido'.
   Solo tokens :root. Mobile-first; split de columnas a 880px (spec).
   Estado por defecto = estático (no-JS / reduced-motion): los 4
   checks visibles y el contador fijo en 0:47. pulso.js anima encima.
   ============================================================ */

.pls {
  position: relative;
}

/* ancla legacy #auditoria: compensa el header sticky */
.pls__anchor {
  position: absolute;
  top: -72px;
  left: 0;
  width: 1px;
  height: 1px;
}

/* sr-only local (no depende de utilidades globales) */
.pls-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ CABECERA ============ */
.pls__head {
  max-width: var(--content-max);
  margin-bottom: var(--space-xl);
}
.pls__eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--soft);
  font-variant-numeric: tabular-nums lining-nums;
}
.pls__title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-2xl);
  color: var(--ink);
  text-wrap: balance;
}
.pls__lede {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--soft);
  max-width: 56ch;
}

/* ============ PANEL COMMAND-CENTER (full-bleed dentro del container) ============ */
.pls__panel {
  position: relative;
  background: #0a0908; /* spec: entre --bg-pit y --panel */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* hairline oro superior — patrón Ledger Noir */
.pls__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 4%,
    rgba(var(--gold-rgb), 0.5) 50%,
    transparent 96%
  );
  pointer-events: none;
}
/* textura de libro mayor, capa estática */
.pls__tex {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      85% 70% at 30% 25%,
      rgba(var(--gold-rgb), 0.05),
      transparent 60%
    ),
    radial-gradient(
      75% 55% at 78% 82%,
      rgba(var(--gold-rgb), 0.035),
      transparent 65%
    );
}
.pls__tex::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}
.pls__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr; /* móvil: apilado, demo arriba */
  gap: var(--space-xl);
  padding: clamp(1.25rem, 0.9rem + 2.5vw, 3rem);
}

/* ============ LA DEMO VIVA (izquierda) ============ */
.pls-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.pls-demo__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.pls-demo__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  box-shadow: var(--glow-gold);
  animation: pls-beat 1.6s ease-in-out infinite;
}
@keyframes pls-beat {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
.pls-demo__label {
  flex: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
  font-variant-numeric: tabular-nums lining-nums;
}

/* pausa accesible (timeline + ticker) — target 44px */
.pls-demo__pause {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  padding: 0;
  transition:
    color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}
.pls-demo__pause[hidden] {
  display: none;
}
.pls-demo__pause:hover {
  color: var(--ink);
  border-color: var(--line);
}
.pls-demo__pause svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.pls-demo__pause .ic-play {
  display: none;
}
.pls-demo__pause[data-state="paused"] .ic-pause {
  display: none;
}
.pls-demo__pause[data-state="paused"] .ic-play {
  display: block;
}
.pls-demo__pause[data-state="paused"] .pls-demo__lbl-pause {
  display: none;
}
.pls-demo__pause[data-state="playing"] .pls-demo__lbl-play {
  display: none;
}

/* escenario: pantalla interna del command center */
.pls-demo__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(8, 7, 9, 0.5); /* --bg-pit en rgba */
  padding: var(--space-md);
}
.pls-demo__event {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--soft);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* el contador — oro EXCLUSIVO de la cifra */
.pls-demo__count {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-countdown);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-money);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold);
  /* --glow-money es formato box-shadow (lleva spread): se reconstruye en text-shadow */
  text-shadow: 0 0 40px rgba(var(--gold-rgb), 0.4);
}

/* filas de eventos: asientos del libro mayor */
.pls-demo__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pls-demo__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  border-top: 1px solid var(--line-soft);
}
.pls-demo__check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  font-size: var(--text-xs);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--soft);
  transition:
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out);
}
/* el ÚNICO verde: el instante 'respondido' (lo enciende y apaga pulso.js) */
.pls-demo__check.is-flash {
  color: var(--ok-live);
  border-color: rgba(var(--ok-rgb), 0.55);
  box-shadow: var(--glow-ok);
}
.pls-demo__row-text {
  font-size: var(--text-sm);
  color: var(--ink);
}
.pls-demo__row-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* ---- ticker mono infinito (marquee CSS; hover o pausa lo detienen) ---- */
.pls-ticker {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  padding-block: var(--space-2xs);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.pls-ticker__track {
  display: flex;
  width: max-content;
  animation: pls-marquee 32s linear infinite;
}
.pls-ticker:hover .pls-ticker__track,
.pls--paused .pls-ticker__track {
  animation-play-state: paused;
}
@keyframes pls-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.pls-ticker__seq {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding-right: var(--space-md);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mute);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.pls-ticker__sep {
  color: var(--line);
}

/* ============ EL FORM REAL (derecha) ============ */
.pls-form-col {
  min-width: 0;
}
.pls-form__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xl);
  color: var(--ink);
}
.pls-form__sub {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--mute);
}

.pls-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.pls-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pls-form__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--soft);
  width: max-content;
}
/* asterisco requerido vía CSS: sobrevive al swap de i18n */
.pls-form__label--req::after {
  content: " *";
  color: var(--soft);
}

.pls-form__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--bg-pit);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.pls-form__input::placeholder {
  color: var(--mute);
  opacity: 1;
}
.pls-form__input:hover {
  border-color: var(--line);
}
.pls-form__input:focus-visible {
  border-color: var(--line);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* inválido: borde más presente, sin tocar el rojo reservado al sello */
.pls-form__input[aria-invalid="true"] {
  border-color: var(--soft);
}

.pls-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238B857D' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.pls-form__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: var(--leading-body);
}

/* honeypot fuera de pantalla */
.pls-form__hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pls-form__submit {
  width: 100%;
  margin-top: var(--space-2xs);
}
.pls-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* live region: alto reservado = cero CLS al cambiar de estado */
.pls-form__status {
  margin: 0;
  min-height: 1.7em;
  font-size: var(--text-sm);
}
.pls-form__msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  color: var(--soft);
}
.pls-form__msg[hidden] {
  display: none;
}

.pls-form__spinner {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: var(--radius-pill);
  animation: pls-spin 0.7s linear infinite;
}
@keyframes pls-spin {
  to {
    transform: rotate(360deg);
  }
}

/* check oro pop del éxito (oro legítimo: el momento de conversión) */
.pls-form__okcheck {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.06em;
  font-size: var(--text-sm);
  background: var(--gold);
  color: var(--bg-pit);
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: var(--glow-gold);
  animation: pls-pop 0.32s var(--ease-out) both;
}
@keyframes pls-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.pls-form__mail {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.pls-form__mail:hover {
  text-decoration-color: var(--gold);
}

/* contacto directo gateado (ghost; solo existen si DT_CONTACT tiene valor) */
.pls__direct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.pls__direct-btn {
  border: 1px solid var(--line-soft);
  color: var(--soft);
}
.pls__direct-btn:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* foco visible con los tokens (cinturón local) */
.pls a:focus-visible,
.pls button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ============ BREAKPOINTS ============ */
@media (min-width: 768px) {
  .pls-demo__stage {
    padding: var(--space-lg);
  }
}

/* split de columnas — la spec de la sección fija el apilado <880px */
@media (min-width: 880px) {
  .pls__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-xl);
    align-items: start;
  }
  .pls-form-col {
    border-left: 1px solid var(--line-soft);
    padding-left: var(--space-xl);
  }
}

@media (min-width: 1100px) {
  .pls__grid {
    padding: var(--space-2xl);
  }
}

/* ============ REDUCED MOTION (cinturón extra al kill global) ============ */
@media (prefers-reduced-motion: reduce) {
  .pls-demo__dot {
    animation: none;
  }
  .pls-ticker__track {
    animation: none;
  }
  .pls-form__spinner {
    animation: none;
  }
  .pls-form__okcheck {
    animation: none;
  }
}

/* ===== calculadora ===== */
/* ============================================================
   calculadora.css — "¿Cuánto se te está escapando cada mes?"
   Ledger Noir: el oro SOLO en la cifra, el thumb y el CTA.
   Mobile-first · breakpoints 768 / 1100 · tokens :root globales.
   ============================================================ */

/* ---- sr-only local (misma técnica que el resto de secciones) ---- */
.calc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- cabecera ---- */
.calc__head {
  max-width: var(--content-max);
  margin-bottom: var(--space-xl);
}
.calc__title {
  font-size: var(--text-2xl);
  margin-top: var(--space-md);
  text-wrap: balance;
}
.calc__lede {
  margin-top: var(--space-sm);
  color: var(--soft);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* ---- card: controles arriba, resultado debajo (lado a lado en 1100) ---- */
.calc__card {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

/* ---- tabs de nicho (radios nativos = teclado/SR gratis) ---- */
.calc__tabs {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
}
.calc__tabs-legend {
  display: block;
  padding: 0;
  margin-bottom: var(--space-xs);
}
.calc__tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.calc__tab {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.calc__tab input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.calc__tab span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--soft);
  transition:
    background var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
}
.calc__tab:hover span {
  border-color: var(--line);
}
.calc__tab input:checked + span {
  background: rgba(var(--gold-rgb), 0.08);
  border-color: var(--line);
  color: var(--ink);
}
.calc__tab input:focus-visible + span {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---- sliders ---- */
.calc__field + .calc__field {
  margin-top: var(--space-md);
}
.calc__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}
.calc__field-head label {
  font-size: var(--text-sm);
  color: var(--soft);
  line-height: var(--leading-snug);
}
.calc__out {
  font-size: var(--text-base);
  color: var(--ink);
  min-width: 4.5ch;
  text-align: right;
  flex-shrink: 0;
}

/* input range nativo estilizado: track --line, relleno oro tenue, thumb oro.
   --p (porcentaje del valor) lo actualiza el JS; el HTML trae el inicial. */
.calc__range {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px; /* target táctil >=44px */
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.calc__range:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.calc__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    rgba(var(--gold-rgb), 0.55) var(--p),
    var(--line) var(--p)
  );
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border: 2px solid var(--bg-pit);
  box-shadow: var(--glow-gold);
  transition: transform var(--dur-micro) var(--ease-out);
}
.calc__range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
.calc__range::-webkit-slider-thumb:active {
  transform: scale(1.04);
}

.calc__range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.calc__range::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(var(--gold-rgb), 0.55);
}
.calc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border: 2px solid var(--bg-pit);
  box-shadow: var(--glow-gold);
  transition: transform var(--dur-micro) var(--ease-out);
}
.calc__range::-moz-range-thumb:hover {
  transform: scale(1.12);
}

/* ---- resultado: la cifra protagonista ---- */
.calc__result {
  align-self: center;
}
.calc__figure-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
}
.calc__figure {
  /* cap del token --text-money: dentro de un card a 2 columnas no caben 220px */
  font-size: clamp(3.25rem, 1.9rem + 6.5vw, 7rem);
  min-width: 6ch;
  white-space: nowrap; /* reserva: "$2,260" sin JS = cero CLS */
  filter: drop-shadow(0 0 32px rgba(var(--gold-rgb), 0.3));
}
.calc__suffix {
  color: var(--soft);
  font-size: var(--text-lg);
}
.calc__formula {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--mute);
  line-height: var(--leading-body);
  max-width: 46ch;
}

/* ---- CTA ---- */
.calc__cta {
  margin-top: var(--space-lg);
}
.calc__reassure {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--mute);
}

/* ============ 768: más aire en el card ============ */
@media (min-width: 768px) {
  .calc__head {
    margin-bottom: var(--space-2xl);
  }
  .calc__card {
    padding: var(--space-xl);
  }
}

/* ============ 1100: controles | resultado ============ */
@media (min-width: 1100px) {
  .calc__card {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .calc__tabs {
    margin-bottom: var(--space-xl);
  }
  .calc__field + .calc__field {
    margin-top: var(--space-lg);
  }
}

/* ===== servicios ===== */
/* ============ SERVICIOS — la escalera de valor (Ledger Noir) ============
   Usa los helpers globales .section/.container/.eyebrow/.card/.btn.
   Oro saturado SOLO donde la spec lo asigna: dash de valor, borde/glow de la
   card destacada y el CTA principal. Mobile-first; el grid apila <768px. */

/* ---- Cabecera ---- */
.svc__head {
  max-width: var(--content-max);
  margin-bottom: var(--space-xl);
}
.svc__title {
  margin: var(--space-md) 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.svc__lede {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* ---- Grid 2x2 (apila en móvil) ---- */
.svc__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .svc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Card ---- */
.svc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.svc__card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.34);
}

.svc__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--mute);
  font-variant-numeric: tabular-nums lining-nums;
}
.svc__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
}
.svc__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* Línea de valor: border-top + dash oro, anclada al pie de la card */
.svc__value {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-sm);
}
.svc__dash {
  flex: none;
  width: 20px;
  height: 2px;
  margin-top: 0.62em;
  border-radius: 1px;
  background: var(--gold);
}
.svc__value-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink);
}

/* ---- Card destacada (04): borde oro + glow + tag pill ---- */
.svc__card--featured {
  border-color: rgba(var(--gold-rgb), 0.45);
  box-shadow: var(--shadow-card), var(--glow-gold);
}
.svc__card--featured:hover {
  border-color: rgba(var(--gold-rgb), 0.62);
}
.svc__tag {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gold-deep);
}

/* ---- CTA al pie ---- */
.svc__cta {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.svc__cta-text {
  margin: 0;
  max-width: var(--content-max);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}
@media (min-width: 768px) {
  .svc__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  .svc__cta .btn {
    flex: none;
  }
}

/* ---- Reveal agrupado (patrón de la casa): el JS añade .svc--anim y, al
   entrar el contenedor (IO once), .is-in. Stagger interno 90ms vía delay.
   Tras asentarse, el JS retira .svc--anim para que el hover del .card
   no herede los delays. Sin JS la sección nace visible. ---- */
.svc--anim .svc__head,
.svc--anim .svc__card,
.svc--anim .svc__cta {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.svc--anim.is-in .svc__head,
.svc--anim.is-in .svc__card,
.svc--anim.is-in .svc__cta {
  opacity: 1;
  transform: none;
}
.svc--anim.is-in .svc__card:nth-child(1) {
  transition-delay: 90ms;
}
.svc--anim.is-in .svc__card:nth-child(2) {
  transition-delay: 180ms;
}
.svc--anim.is-in .svc__card:nth-child(3) {
  transition-delay: 270ms;
}
.svc--anim.is-in .svc__card:nth-child(4) {
  transition-delay: 360ms;
}
.svc--anim.is-in .svc__cta {
  transition-delay: 450ms;
}

@media (prefers-reduced-motion: reduce) {
  .svc--anim .svc__head,
  .svc--anim .svc__card,
  .svc--anim .svc__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .svc__card:hover,
  .svc__card--featured:hover {
    transform: none;
  }
}

/* ===== como-funciona ===== */
/* ============================================================
   COMO FUNCIONA — 3 pasos (Ledger Noir)
   Texto-sobre-fondo: respira entre las cards de servicios y casos.
   Mobile-first. Breakpoints: 768 / 1100. Solo tokens :root.
   Estado por defecto = estático completo (conectores a scaleX(1));
   el JS solo añade la coreografía cuando hay GSAP + motion OK.
   ============================================================ */

.hiw {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg-2);
}

/* ---------- Cabecera centrada ---------- */

.hiw__head {
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
}

.hiw__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
}

.hiw__title {
  margin: var(--space-md) auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- Los 3 pasos (apilan en móvil, 3 columnas ≥768) ---------- */

.hiw__steps {
  counter-reset: hiw-step;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.hiw__step {
  position: relative;
  max-width: 46ch;
}

/* Número 01-03: Fraunces gigante + regla de libro mayor (oro tenue).
   El "/ ''" oculta el contenido decorativo del árbol de accesibilidad
   (el <ol> ya numera semánticamente); fallback sin slash para navegadores viejos. */
.hiw__step::before {
  counter-increment: hiw-step;
  content: "0" counter(hiw-step);
  content: "0" counter(hiw-step) / "";
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-money);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-md);
}

.hiw__step-title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.hiw__step-body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* Conector hairline entre columnas: cruza el gap a la altura de la regla
   del número. Estado base scaleX(1) — el JS lo lleva de 0→1 al revelar. */
.hiw__connector {
  display: none;
}

/* ---------- CTA fantasma centrado (el oro saturado vive en servicios) ---------- */

.hiw__cta {
  margin: var(--space-2xl) 0 0;
  text-align: center;
}

.hiw .btn--ghost {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--soft);
}

.hiw .btn--ghost:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* ---------- ≥768: 3 columnas + conectores visibles ---------- */

@media (min-width: 768px) {
  .hiw__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  .hiw__connector {
    display: block;
    position: absolute;
    /* alinea con la regla bajo el número: alto del número + su padding inferior */
    top: calc(var(--text-3xl) * var(--leading-tight) + var(--space-xs));
    left: calc(-1 * var(--space-lg));
    width: var(--space-lg);
    height: 1px;
    background: var(--line);
    transform: scaleX(1);
    transform-origin: left center;
    pointer-events: none;
  }
}

@media (min-width: 1100px) {
  .hiw__steps {
    gap: var(--space-xl);
  }

  .hiw__connector {
    left: calc(-1 * var(--space-xl));
    width: var(--space-xl);
  }
}

/* ---------- Reduced motion: todo quieto y visible (cinturón extra al del JS) ---------- */

@media (prefers-reduced-motion: reduce) {
  .hiw__connector {
    transform: scaleX(1) !important;
  }
}

/* ===== casos ===== */
/* ============ CASOS — case files del libro mayor (Ledger Noir) ============
   Usa los helpers globales .section/.container/.eyebrow/.card/.ledger-tex.
   Oro saturado SOLO en la cifra de tiempo (0:47s) — el resto del expediente
   es tinta (ink/soft/mute) y hairlines. Mobile-first; el grid interno del
   expediente vivo pasa a 1.1fr/.9fr a partir de 768px. El CSS es el estado
   estático completo: sin JS (o con reduced-motion) todo nace visible. */

/* ---- Cabecera de sección ---- */
.cf__head {
  max-width: var(--content-max);
  margin-bottom: var(--space-xl);
}
.cf__title {
  margin: var(--space-md) 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.cf__lede {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* ---- Pila de expedientes (003+ se añaden aquí sin tocar CSS) ---- */
.cf__files {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* ---- Expediente: patrón base repetible ---- */
.casefile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.casefile > * {
  position: relative;
  z-index: 1;
}
.casefile .ledger-tex {
  z-index: 0;
  opacity: 0.05;
}

/* Cabecera pericial: sello mono del expediente */
.casefile__head {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: var(--leading-body);
  color: var(--mute);
  font-variant-numeric: tabular-nums lining-nums;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line-soft);
}
.casefile--live .casefile__head {
  color: var(--soft);
  border-bottom-color: var(--line);
}

/* ---- Expediente vivo: grid claim / métricas ---- */
.casefile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .casefile__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .casefile__grid {
    gap: var(--space-2xl);
  }
}

.casefile__claim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.casefile__claim-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.casefile__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--line);
  transition:
    color var(--dur-micro) var(--ease-out),
    text-decoration-color var(--dur-micro) var(--ease-out);
}
.casefile__link:hover {
  color: var(--gold-deep);
  text-decoration-color: rgba(var(--gold-rgb), 0.5);
}

/* Asientos reciclados (lista): hairline-dash de tinta, nunca oro */
.casefile__items {
  margin: 0;
  padding: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-self: stretch;
}
.casefile__items li {
  position: relative;
  padding-left: calc(20px + var(--space-xs));
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}
.casefile__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 20px;
  height: 1px;
  background: var(--line);
}

/* ---- Métricas formato ledger ---- */
.casefile__metrics {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.casefile__metric {
  padding-block: var(--space-sm);
  border-top: 1px solid var(--line-soft);
}
.casefile__metric:first-child {
  border-top: 0;
  padding-top: 0;
}
.casefile__metric:last-child {
  padding-bottom: 0;
}
.casefile__metric dt {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}
.casefile__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-money);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
/* La ÚNICA cifra en oro de la sección: el tiempo de respuesta */
.casefile__value--time {
  font-size: var(--text-2xl);
  color: var(--gold);
  text-shadow: 0 0 38px rgba(var(--gold-rgb), 0.32);
}
.casefile__value-note {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--mute);
  line-height: var(--leading-body);
  text-transform: none;
}

/* ---- Slot pendiente (002): borde dashed, sin glow — espera honesta ---- */
.casefile--pending {
  border: 1px dashed var(--line);
  background: transparent;
  box-shadow: none;
}
.casefile__pending-body {
  margin: 0;
  max-width: var(--content-max);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}
.casefile__stamp {
  margin: 0;
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--soft);
  transform: rotate(-1.1deg);
}

@media (prefers-reduced-motion: reduce) {
  .casefile__stamp {
    transform: none;
  }
}

/* ===== confianza ===== */
/* ============================================================
   CONFIANZA — prueba honesta: garantías verificables (Ledger Noir)
   Sin testimonios inventados; tono sobrio. El ÚNICO oro de la
   sección son los puntos divisores editoriales (patrón problema).
   Banda --bg-2: respiro quieto antes del escenario hondo del pulso.
   Mobile-first. Breakpoints: 768 / 1100. Solo tokens :root.
   Estado por defecto = estático completo (dots visibles); el JS
   añade la coreografía solo con GSAP + motion OK.
   ============================================================ */

.trust {
  background: var(--bg-2);
}

/* ---------- Cabecera centrada ---------- */

.trust__head {
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
}

.trust__title {
  margin: var(--space-md) auto 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}

.trust__lede {
  margin: var(--space-sm) auto 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--soft);
  text-wrap: balance;
}

/* ---------- Los 3 pilares (apilan en móvil, 3 columnas ≥768) ---------- */

.trust__pillars {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.trust__pillar {
  position: relative;
  max-width: 46ch;
}

.trust__pillar-title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.trust__pillar-body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* ---------- Divisor editorial punto-oro (pilares 2 y 3) ----------
   Móvil: hairline horizontal centrada en el gap sobre el pilar.
   El punto se centra con inset+margin:auto (sin transform) para que
   el scale del JS no pise el centrado. El ring --bg-2 recorta la
   hairline alrededor del punto (detalle editorial). */

.trust__divider {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-xl) / -2);
  height: 1px;
  background: var(--line-soft);
  pointer-events: none;
}

.trust__dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--bg-2);
}

/* ---------- Cierre fantasma centrado (sin oro: el CTA dorado vive en pulso) ---------- */

.trust__close {
  margin: var(--space-2xl) 0 0;
  text-align: center;
}

.trust__close-btn {
  max-width: 100%;
  height: auto;
  text-align: center;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--soft);
}

.trust__close-btn:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: var(--line);
  color: var(--ink);
}

/* ---------- ≥768: 3 columnas + divisores verticales en el gap ---------- */

@media (min-width: 768px) {
  .trust__pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  .trust__divider {
    top: 0.25rem;
    bottom: 0.25rem;
    left: calc(var(--space-lg) / -2);
    right: auto;
    width: 1px;
    height: auto;
  }
}

@media (min-width: 1100px) {
  .trust__pillars {
    gap: var(--space-xl);
  }

  .trust__divider {
    left: calc(var(--space-xl) / -2);
  }
}

/* ---------- Reduced motion: todo quieto y visible (cinturón extra al del JS) ---------- */

@media (prefers-reduced-motion: reduce) {
  .trust__dot {
    transform: none !important;
  }
}

/* ===== faq ===== */
/* ============================================================
   FAQ — mata-objeciones en acordeón editorial (Ledger Noir)
   <details>/<summary> nativos (a11y + teclado gratis). Patrón
   conservado: chevron oro rotando, altura animada con el truco
   grid-template-rows 0fr→1fr (anima abrir Y cerrar; height:auto
   no es transicionable), hairline oro que se enciende al abrir.
   Usa los helpers globales .section/.container/.eyebrow/.card.
   Mobile-first. Breakpoints: 768 / 1100. Solo tokens :root.
   Estado por defecto = visible (el JS solo añade el reveal).
   ============================================================ */

/* ---------- Cabecera ---------- */

.faq__head {
  max-width: var(--content-max);
  margin-bottom: var(--space-xl);
}

.faq__title {
  margin: var(--space-md) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}

.faq__lede {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}

/* ---------- Lista ---------- */

.faq__list {
  display: grid;
  gap: var(--space-xs);
}

/* Card editorial: hereda la superficie cálida de .card, padding propio.
   (Sección posterior a base-global en el bundle → este padding:0 gana.) */
.faq__list .faq__item {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.faq__list .faq__item:hover {
  border-color: rgba(var(--gold-rgb), 0.28);
}

/* Hairline oro vertical: se enciende SOLO al abrir = vida sin ruido */
.faq__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
  pointer-events: none;
}

.faq__item[open]::before {
  opacity: 0.55;
}

/* ---------- SUMMARY = la pregunta clicable (target ≥44px) ---------- */

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Mata el marker UA (triángulo) en todos los motores */
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::marker {
  content: "";
}

/* Solo el TEXTO crece; el chevron NO (evita que se elipse) */
.faq__q-text {
  flex: 1;
  min-width: 0;
}

/* Chevron oro propio: rota 180° al abrir */
.faq__chev {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--gold);
  transition:
    transform var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    background var(--dur-ui) var(--ease-out);
}

.faq__chev svg {
  width: 13px;
  height: 13px;
}

.faq__q:hover .faq__chev {
  border-color: rgba(var(--gold-rgb), 0.5);
}

.faq__item[open] .faq__chev {
  transform: rotate(180deg);
  border-color: rgba(var(--gold-rgb), 0.5);
  background: rgba(var(--gold-rgb), 0.08);
}

/* ---------- Panel animado: grid 0fr→1fr ----------
   El hijo necesita min-height:0 + overflow:hidden para colapsar limpio. */

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-reveal) var(--ease-out);
}

.faq__item[open] .faq__panel {
  grid-template-rows: 1fr;
}

.faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__a {
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
  max-width: 62ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--soft);
  /* fade sincronizado: entra al abrir, se va al cerrar */
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.faq__item[open] .faq__a {
  opacity: 1;
  transition-delay: 120ms;
}

/* Links internos de respuesta → #pulso, con hairline oro */
.faq__a a {
  color: var(--ink);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  padding-bottom: 1px;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.faq__a a:hover {
  border-color: var(--gold);
}

/* ---------- CTA fantasma (el botón oro saturado vive en servicios/pulso) ---------- */

.faq__cta {
  margin: var(--space-xl) 0 0;
  text-align: center;
}

.faq__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  padding-bottom: 3px;
  transition:
    border-color var(--dur-micro) var(--ease-out),
    gap var(--dur-micro) var(--ease-out);
}

.faq__cta-link:hover {
  border-color: var(--gold);
  gap: var(--space-xs);
}

.faq__cta-arr {
  transition: transform var(--dur-micro) var(--ease-out);
}

.faq__cta-link:hover .faq__cta-arr {
  transform: translateX(2px);
}

/* ---------- ≥768: respiración editorial ---------- */

@media (min-width: 768px) {
  .faq__head {
    margin-bottom: var(--space-2xl);
  }

  .faq__q {
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-lg);
  }

  .faq__a {
    padding: 0 var(--space-lg) var(--space-lg);
  }

  .faq__cta {
    margin-top: var(--space-2xl);
  }
}

/* ---------- ≥1100: cabecera pinned a la izquierda, libro a la derecha ---------- */

@media (min-width: 1100px) {
  .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 34ch) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: start;
  }

  .faq__head {
    grid-column: 1;
    position: sticky;
    top: var(--space-2xl);
    margin-bottom: 0;
  }

  .faq__list {
    grid-column: 2;
  }

  .faq__cta {
    grid-column: 2;
    text-align: left;
    margin-top: var(--space-xl);
  }
}

/* ---------- Reduced motion: todo quieto, abierto/cerrado instantáneo ---------- */

@media (prefers-reduced-motion: reduce) {
  .faq__panel,
  .faq__chev,
  .faq__a,
  .faq__item::before,
  .faq__cta-link,
  .faq__cta-arr {
    transition: none;
  }
}

/* ===== footer ===== */
/* ============================================================
   footer.css — Ledger Noir footer (orden 11): cierre + legales vivos.
   Wash oscuro translúcido sobre la atmósfera fija + hairline oro top.
   Mobile-first; breakpoints 768 / 1100. Solo tokens :root.
   ============================================================ */

.ft-root {
  position: relative;
}

.ft {
  position: relative;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-pit) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg-pit) 86%, transparent) 36%,
    color-mix(in srgb, var(--bg-pit) 94%, transparent) 100%
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Hairline oro superior (estado estático completo; GSAP solo la dibuja) */
.ft__hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--gold-rgb), 0.5) 18%,
    rgba(var(--gold-rgb), 0.5) 82%,
    transparent
  );
  pointer-events: none;
}

/* ---------- CTA de refuerzo ---------- */
.ft__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--line-soft);
}
.ft__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  max-width: 24ch;
}
.ft__cta-btn {
  flex: none;
}

/* ---------- Grilla asimétrica ---------- */
.ft__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--line-soft);
}

/* Wordmark tipográfico (mismo componente que el nav) */
.ft__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.ft__brand-mark {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.28));
}
.ft__brand-word em {
  font-style: italic;
  padding-right: 0.05em;
  background: linear-gradient(
    118deg,
    #fff3d6 0%,
    var(--gold) 52%,
    var(--gold-deep) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ft__desc {
  margin-top: var(--space-xs);
  color: var(--soft);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  max-width: 44ch;
}

/* Cabeceras de columna */
.ft__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: var(--leading-body);
  color: var(--mute);
  margin-bottom: var(--space-2xs);
}

/* Listas de enlaces (targets ≥44px) */
.ft__list {
  display: flex;
  flex-direction: column;
}
.ft__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--soft);
  transition: color var(--dur-micro) var(--ease-out);
}
.ft__list a:hover {
  color: var(--ink);
}

.ft__contact {
  margin-top: var(--space-md);
}
.ft__contact-email {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* ---------- Barra legal ---------- */
.ft__legalbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-md);
}
.ft__copy {
  font-size: var(--text-xs);
  color: var(--mute);
}
.ft__legalbar-links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.ft__legalbar-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  color: var(--mute);
  transition: color var(--dur-micro) var(--ease-out);
}
.ft__legalbar-links a:hover {
  color: var(--ink);
}
.ft__sep {
  color: var(--mute);
}

.ft__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--soft);
  cursor: pointer;
  transition:
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background var(--dur-micro) var(--ease-out);
}
.ft__lang:hover {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(var(--gold-rgb), 0.06);
}

/* ---------- 768+ ---------- */
@media (min-width: 768px) {
  .ft__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  .ft__grid {
    grid-template-columns: 1.5fr 0.75fr 0.75fr;
    gap: var(--space-lg);
  }
}

/* ---------- 1100+ ---------- */
@media (min-width: 1100px) {
  .ft__grid {
    gap: var(--space-xl);
  }
  .ft__desc {
    max-width: 48ch;
  }
}

/* ===== variante-fondo: v2 hilos-de-oro (eleccion Adrian 2026-06-10) ===== */
/* ============================================================
   VARIANTE 2 — "Hilos de oro"
   Tesis: la página es un telar — filamentos de oro fluyen lentos
   por un campo de ruido sobre negro cálido profundo, y cada
   tarjeta flota en una capa CLARAMENTE más clara (carbón cálido
   con hairline dorado e highlight superior interno).
   Se carga DESPUÉS de styles.css: selectores planos pisan tokens.
   ============================================================ */

:root {
  /* SUPERFICIES — visiblemente más claras que el fondo (#0C0B0F).
     Rango de referencia aprobado: #1A1611 – #221C15. */
  --panel: #1a1611; /* superficie cálida, un paso claro sobre el lienzo */
  --panel-2: #221c15; /* superficie elevada, dos pasos */
  --bg-pit: #1a1510; /* escenario de la historia: carbón cálido, NO negro plano */

  /* Filo dorado + highlight: las capas se leen como objetos */
  --line: rgba(232, 192, 105, 0.24);
  --line-soft: rgba(245, 240, 232, 0.1);
  --shadow-card:
    inset 0 1px 0 rgba(245, 240, 232, 0.09),
    /* highlight superior interno */ inset 0 0 0 1px rgba(232, 192, 105, 0.06),
    /* filo dorado interno sutil */ 0 1px 2px rgba(0, 0, 0, 0.45),
    0 14px 32px -14px rgba(0, 0, 0, 0.7),
    0 0 44px -22px rgba(232, 192, 105, 0.2);
}

/* ---- FONDO: lienzo profundo para los hilos (fuera la foto estática) ----
   v2.js inyecta el canvas de filamentos como hijo de .page-bg;
   el ::after pinta POR ENCIMA del canvas: halo cálido arriba + viñeta. */
.page-bg {
  background: var(--bg);
}
.page-bg::after {
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(232, 192, 105, 0.05),
      transparent 55%
    ),
    radial-gradient(
      150% 120% at 50% 50%,
      transparent 58%,
      rgba(8, 7, 9, 0.62) 100%
    );
}

/* canvas de filamentos (decorativo, aria-hidden lo pone v2.js) */
.page-bg .v2-threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* El hero pintaba un --bg opaco idéntico al lienzo: lo hacemos
   transparente para que los hilos vivan también en la primera
   pantalla (cero cambio visual de color, solo deja pasar el canvas).
   Las bandas alternas en --bg-2 se mantienen opacas a propósito. */
#hero {
  background: transparent;
}

/* ---- ATMÓSFERA: el aurora cede protagonismo a los hilos ---- */
.atmos__aurora {
  opacity: 0.5;
}

/* la textura de libro mayor respira un poco más sobre el carbón claro */
.ledger-tex {
  opacity: 0.07;
}

/* Con motion reducido los hilos quedan como composición estática
   (lo resuelve v2.js); aquí solo garantizamos que nada parpadee. */
@media (prefers-reduced-motion: reduce) {
  .page-bg .v2-threads {
    animation: none;
    transition: none;
  }
}

/* ===== concepto c1 (cosecha MotionSites, aprobado) ===== */
/* ============================================================
   c1 — STACKING CARDS en #servicios (Ledger Noir)
   Las 4 cards de la escalera se apilan al hacer scroll: cada una
   queda fijada (position:sticky, sin pin-spacers de GSAP) y la
   siguiente se desliza encima dejando visible una banda de 24px
   de la anterior, coronada por su hairline dorado. El JS (c1.js)
   añade el scrub sutil (escala + velo) con ScrollTrigger.

   Todo vive bajo #servicios.c1-stack — sin la clase, la página
   queda EXACTAMENTE como estaba (cero layout shift en carga).
   reduced-motion: ninguna regla aplica → diseño original estático.
   ============================================================ */

#servicios.c1-stack {
  /* 64px de nav fija + aire; paso de apilado visible por card */
  --c1-top: calc(64px + var(--space-lg));
  --c1-step: 24px;
}

/* índice de profundidad por card (4 cards en el ol) */
#servicios.c1-stack .svc__card:nth-child(1) {
  --c1-i: 0;
}
#servicios.c1-stack .svc__card:nth-child(2) {
  --c1-i: 1;
}
#servicios.c1-stack .svc__card:nth-child(3) {
  --c1-i: 2;
}
#servicios.c1-stack .svc__card:nth-child(4) {
  --c1-i: 3;
}

/* ---------- DESKTOP: sticky-stack ---------- */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* el grid 2x2 pasa a columna única centrada: la pista del stack */
  #servicios.c1-stack .svc__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 56rem;
    margin-inline: auto;
  }

  #servicios.c1-stack .svc__card {
    position: sticky;
    top: calc(var(--c1-top) + var(--c1-i, 0) * var(--c1-step));
    z-index: calc(var(--c1-i, 0) + 1);
    min-height: clamp(280px, 42vh, 440px);
    overflow: hidden; /* velo y hairline respetan el radio */
    will-change: transform;
    /* sombra superior: la card que entra "proyecta" sobre la banda inferior */
    box-shadow:
      var(--shadow-card),
      0 -18px 40px -18px rgba(12, 11, 15, 0.8);
    /* sin transition de transform: GSAP scrub manda (evita lag/tirones) */
    transition: border-color var(--dur-ui) var(--ease-out);
  }
  /* la destacada (04, cima del stack) conserva su glow oro */
  #servicios.c1-stack .svc__card--featured {
    box-shadow:
      var(--shadow-card),
      var(--glow-gold),
      0 -18px 40px -18px rgba(12, 11, 15, 0.8);
  }
  /* pineada, el lift de hover no tiene sentido (y pelearía con el scrub) */
  #servicios.c1-stack .svc__card:hover,
  #servicios.c1-stack .svc__card--featured:hover {
    transform: none;
  }

  /* hairline dorado en el borde superior: es lo que se ve de cada
     card apilada en su banda de 24px. Por encima del velo (z:4 > 3). */
  #servicios.c1-stack .svc__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(var(--gold-rgb), 0) 0%,
      rgba(var(--gold-rgb), 0.62) 18%,
      rgba(var(--gold-rgb), 0.62) 82%,
      rgba(var(--gold-rgb), 0) 100%
    );
    z-index: 4;
    pointer-events: none;
  }

  /* velo de profundidad: GSAP anima su opacity 0→1 (solo compositor)
     mientras la siguiente card se desliza encima. Más denso abajo para
     que la banda superior (hairline + número) siga leyéndose. */
  #servicios.c1-stack .c1-veil {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(8, 7, 9, 0.28),
      rgba(8, 7, 9, 0.62)
    );
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }
}

/* ---------- MÓVIL (<768px): sin pin (marea). Scroll normal con
   reveal por card — IO once desde c1.js, solo opacity/transform. ---------- */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  #servicios.c1-stack .svc__card.c1-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
  }
  #servicios.c1-stack .svc__card.c1-reveal.c1-in {
    opacity: 1;
    transform: none;
  }
}

/* ===== concepto c2 (cosecha MotionSites, aprobado) ===== */
/* ============================================================
   c2 — Ghost-text layering (LEDGER NOIR)
   Numerales fantasma gigantes (Fraunces) detras de los titulares
   de seccion, con parallax sutil via ScrollTrigger (ver c2.js).
   Capa decorativa: aria-hidden, pointer-events:none, cero CLS.
   ============================================================ */

/* Wrapper: cubre la seccion y recorta el sangrado del numeral
   (sin tocar overflow de la seccion = no rompe pins ni sticky). */
.c2-ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  contain: layout style;
}

/* Historia: sus capas ya estan en z 0 (.hst__bg) / 1 (.hst__dim) /
   2 (.hst__layout). El fantasma entra en z1 (tras el dim en el DOM)
   = encima del fondo, debajo del contenido. */
.c2-ghost--hst {
  z-index: 1;
}

/* Eleva el contenido de la seccion por encima del fantasma.
   Verificado: ningun absoluto interno re-ancla (todos tienen
   padre posicionado propio: .pls__panel, .svc__card, .hiw__step,
   .faq__item, .casefile li, .calc__tab, .trust__pillar). */
.c2-lift {
  position: relative;
  z-index: 1;
}

/* El numeral fantasma */
.c2-ghost__num {
  position: absolute;
  top: calc(var(--section-pad, 6rem) * 0.3);
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: clamp(7.5rem, 5rem + 22vw, 23rem);
  line-height: 0.78;
  letter-spacing: var(--tracking-display, -0.03em);
  font-variant-numeric: lining-nums tabular-nums;
  color: rgba(var(--gold-rgb, 232, 192, 105), 1);
  opacity: 0.05;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
  transform: translateZ(0);
}

/* Oro desaturado (mezcla hacia --soft) donde color-mix exista */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .c2-ghost__num {
    color: color-mix(
      in srgb,
      rgb(var(--gold-rgb, 232, 192, 105)) 62%,
      var(--soft, #bdb6ad)
    );
    opacity: 0.055;
  }
}

/* Alternancia editorial: sangra ligeramente fuera del borde,
   el wrapper lo recorta (sin scroll horizontal). */
.c2-ghost__num--right {
  right: -0.04em;
}
.c2-ghost__num--left {
  left: -0.04em;
}

/* Sobre banda --bg-2 (como-funciona / confianza) un punto mas
   para percepcion equivalente. Sigue muy por debajo de romper AA. */
.c2-ghost--band .c2-ghost__num {
  opacity: 0.062;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .c2-ghost--band .c2-ghost__num {
    opacity: 0.066;
  }
}

/* Historia: fondo mas hondo (--bg-pit) y seccion muy alta; el
   numeral ancla arriba y admite un poco mas de presencia. */
.c2-ghost--hst .c2-ghost__num {
  top: clamp(2.5rem, 8vw, 5.5rem);
  opacity: 0.07;
}

@media (prefers-reduced-motion: reduce) {
  .c2-ghost__num {
    will-change: auto;
  }
}

/* ===== concepto c3 (cosecha MotionSites, aprobado) ===== */
/* ============================================================
   c3 — "Marquee del territorio" (LEDGER NOIR)
   Cinta infinita de nichos + zonas entre #historia y #pulso.
   Loop CSS sin costuras: dos grupos idénticos, translateX -50%.
   Pausa: hover / .is-paused (pestaña oculta) / .is-offscreen (IO)
   / prefers-reduced-motion (versión estática).
   ============================================================ */

.c3-marquee {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(var(--gold-rgb), 0.045),
      rgba(var(--gold-rgb), 0.015)
    ),
    var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(0.9rem, 0.72rem + 0.9vw, 1.4rem);
}

/* texto real para lectores de pantalla (la cinta en movimiento es aria-hidden) */
.c3-marquee__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* gradient-fade en los bordes */
.c3-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 clamp(1.5rem, 1rem + 6vw, 6rem),
    #000 calc(100% - clamp(1.5rem, 1rem + 6vw, 6rem)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 clamp(1.5rem, 1rem + 6vw, 6rem),
    #000 calc(100% - clamp(1.5rem, 1rem + 6vw, 6rem)),
    transparent 100%
  );
}

.c3-marquee__track {
  display: flex;
  width: max-content;
  animation: c3-marquee-scroll 60s linear infinite;
  will-change: transform;
}

/* sin gap entre grupos: el espaciado vive DENTRO de cada item/sep,
   así translateX(-50%) cae exactamente en la costura */
.c3-marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.c3-marquee__item {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 0.64rem + 0.25vw, 0.8125rem);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  /* oro desaturado: nunca compite con el oro saturado de dinero/CTA */
  color: rgba(var(--gold-rgb), 0.72);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .c3-marquee__item {
    color: color-mix(in srgb, var(--gold) 58%, var(--soft));
  }
}

.c3-marquee__sep {
  flex: none;
  margin-inline: clamp(1.1rem, 0.8rem + 1.5vw, 2.25rem);
  color: rgba(var(--gold-rgb), 0.38);
  font-size: clamp(0.5625rem, 0.54rem + 0.15vw, 0.6875rem);
  line-height: 1;
  user-select: none;
}

@keyframes c3-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* pausas: hover, pestaña oculta, fuera de viewport */
.c3-marquee:hover .c3-marquee__track,
.c3-marquee.is-paused .c3-marquee__track,
.c3-marquee.is-offscreen .c3-marquee__track {
  animation-play-state: paused;
}

/* reduced motion: cinta estática con el mismo fade lateral */
@media (prefers-reduced-motion: reduce) {
  .c3-marquee__track {
    animation: none;
    will-change: auto;
  }
}

/* ===== concepto c4 (cosecha MotionSites, aprobado) ===== */
/* ============================================================
   CONCEPTO 4 — "Crossfade de expedientes" (#casos, Ledger Noir)
   ------------------------------------------------------------
   Los .casefile se apilan en la MISMA celda de grid (deck) y
   cross-fadean con timing 650ms + un flash de grano sutil al
   cambiar. Controles (dots-tick + pausa) en estética ledger.

   TODO está scoped a #casos.c4-on / #casos.c4-solo: cargar este
   CSS sin que c4.js llame init() no cambia NADA en la página
   (cero layout shift on load). c4.js aplica/retira las clases.

   !important deliberado en opacity/visibility/transform del
   estado del deck: casos.js (reveal de sección) escribe estilos
   inline (autoAlpha/y) sobre los mismos artículos; el estado del
   carousel debe ganar siempre y se retira limpio al hacer destroy
   (se quita la clase, no queda residuo).
   ============================================================ */

/* ---- Helper local: texto solo para lectores de pantalla ---- */
.c4-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ MODO CAROUSEL (2+ expedientes) ============ */

/* Deck: todos los expedientes en la misma celda → altura = el más alto */
#casos.c4-on .cf__files {
  position: relative;
  grid-template-columns: 1fr;
}
#casos.c4-on .cf__files > .casefile {
  grid-area: 1 / 1;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) scale(0.988) !important;
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform;
  transition:
    opacity 650ms var(--ease-dramatic),
    transform 650ms var(--ease-dramatic),
    visibility 0s linear 650ms;
}
#casos.c4-on .cf__files > .casefile.is-c4-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto;
  z-index: 2;
  transition-delay: 0s;
}
/* Snap de montaje: el primer estado se aplica sin fade visible */
#casos.c4-on.c4-snap .cf__files > .casefile {
  transition: none !important;
}

/* El expediente pendiente (002) es transparente por diseño; en el deck
   necesita fondo sólido para ocultar al 001 durante el solape del fade.
   var(--bg) = mismo color que tenía detrás → visualmente idéntico.
   Como el deck mide lo que el expediente más alto (001), el contenido
   del pendiente se centra en vertical: dossier esperando datos. */
#casos.c4-on .casefile--pending {
  background: var(--bg);
  justify-content: center;
}

/* ---- Capa de grano (flash de 650ms al cambiar de expediente) ---- */
#casos.c4-on .c4-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: var(--radius);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0;
}
#casos.c4-on .c4-grain.is-flash {
  animation: c4GrainFlash 650ms var(--ease-out) both;
}
@keyframes c4GrainFlash {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

/* ---- Controles: pausa + ticks de ledger + contador mono ---- */
#casos.c4-on .c4-controls {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
#casos.c4-on .c4-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}
#casos.c4-on .c4-play:hover {
  color: var(--ink);
  border-color: var(--line);
}
#casos.c4-on .c4-play svg {
  width: 14px;
  height: 14px;
  display: block;
}

#casos.c4-on .c4-dots {
  display: flex;
  align-items: center;
}
#casos.c4-on .c4-dot {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0;
}
/* El "dot" es un tick horizontal de libro mayor, no un círculo */
#casos.c4-on .c4-dot::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--mute);
  transition:
    background var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out);
}
#casos.c4-on .c4-dot:hover::before {
  background: var(--soft);
}
#casos.c4-on .c4-dot[aria-current="true"]::before {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45);
}

#casos.c4-on .c4-count {
  margin-left: var(--space-2xs);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--mute);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============ MODO SOLO (1 expediente): reveal en hover/focus ============
   Si solo existe un caso, la card "revela" con crossfade su capa de grano
   y un lift sutil. Misma estructura lista para crecer a carousel. */
#casos.c4-solo .casefile {
  transition:
    transform 650ms var(--ease-out),
    border-color 650ms var(--ease-out);
}
#casos.c4-solo .casefile:hover,
#casos.c4-solo .casefile:focus-within {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.3);
}
#casos.c4-solo .c4-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 650ms var(--ease-out);
}
#casos.c4-solo .casefile:hover .c4-grain,
#casos.c4-solo .casefile:focus-within .c4-grain {
  opacity: 0.28;
}

/* ============ Reduced motion: versión estática elegante ============
   c4.js ni siquiera monta el carousel con reduced-motion (la sección
   queda en su layout original apilado). Cinturón y tirantes: si las
   clases llegaran a estar puestas, nada se anima ni rota. */
@media (prefers-reduced-motion: reduce) {
  #casos.c4-on .cf__files > .casefile,
  #casos.c4-solo .casefile,
  #casos.c4-solo .c4-grain {
    transition: none !important;
  }
  #casos.c4-on .cf__files > .casefile {
    transform: none !important;
  }
  #casos.c4-on .c4-grain {
    animation: none !important;
    opacity: 0 !important;
  }
  #casos.c4-solo .casefile:hover,
  #casos.c4-solo .casefile:focus-within {
    transform: none;
  }
}

/* ===== concepto c5 (cosecha MotionSites, aprobado) ===== */
/* ============================================================
   CONCEPTO 5 — "Liquid glass" noir dorado
   Header sticky (.nav) + CTA sticky móvil (.nav-sticky-cta) con
   vidrio NOCTURNO cálido: backdrop blur + saturate (el saturate
   hace brillar los hilos dorados del canvas V2 a través del
   vidrio), hairline dorada de 1px en gradiente cuyo punto de luz
   viaja con el scroll (--c5-shine, lo mueve c5.js), highlight
   interior superior y sombra cálida con halo oro. No es el glass
   frío de iOS: el vidrio absorbe el oro del lienzo.

   Scoped TODO bajo html.c5-glass (c5.js lo pone/quita) → apagar
   el toggle devuelve la página a su estado original aunque esta
   hoja siga cargada. Cero layout shift: solo pintura (los bordes
   de 1px ya existen en el diseño base, se vuelven transparentes
   y los repinta un pseudo absoluto de 1px encima).
   Fallback sin backdrop-filter: panel sólido translúcido (AA).
   ============================================================ */

/* ---------- HEADER STICKY ---------- */

/* El header base ya transiciona transform/background/border;
   se añade box-shadow para que el vidrio entre y salga suave. */
.c5-glass .nav {
  transition:
    transform var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}

.c5-glass .nav.is-stuck {
  /* ~82% de --bg: más vidrio que el 86% base sin comprometer el AA
     del texto --soft/--ink encima (la página entera es near-black,
     el backdrop difuminado nunca sube de luminancia peligrosa) */
  background-color: color-mix(in srgb, var(--bg) 82%, transparent);
  /* highlight interior superior: luz cálida resbalando por el canto */
  background-image: linear-gradient(
    180deg,
    rgba(255, 243, 214, 0.05) 0%,
    rgba(255, 243, 214, 0.015) 40%,
    transparent 72%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  /* la hairline plana base se apaga; la pinta ::after en gradiente */
  border-bottom-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 214, 0.06),
    0 18px 40px -22px rgba(0, 0, 0, 0.65),
    0 6px 28px -18px rgba(var(--gold-rgb), 0.26);
}

/* Specular que sigue el puntero (solo desktop con hover fino;
   c5.js mueve --c5-mx y togglea .c5-spec-on en enter/leave).
   z-index:-1 dentro del stacking context del header (z-nav) →
   por ENCIMA del fondo de vidrio, por DEBAJO del contenido:
   el texto nunca queda velado (AA intacto). */
.c5-glass .nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    150px 60px at var(--c5-mx, 50%) 0%,
    rgba(255, 243, 214, 0.075),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.c5-glass .nav.is-stuck.c5-spec-on::before {
  opacity: 1;
}

/* Hairline dorada de 1px: gradiente con un punto de luz blanco-oro
   que viaja por el canto según el progreso de scroll (--c5-shine).
   Repinta solo 1px × ancho, y SOLO mientras se hace scroll. */
.c5-glass .nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* exactamente sobre el slot del border-bottom base */
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--gold-rgb), 0.14) 22%,
    rgba(var(--gold-rgb), 0.5) 44%,
    rgba(255, 243, 214, 0.65) 50%,
    rgba(var(--gold-rgb), 0.5) 56%,
    rgba(var(--gold-rgb), 0.14) 78%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: var(--c5-shine, 50%) 0;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.c5-glass .nav.is-stuck::after {
  opacity: 1;
}

/* ---------- CTA STICKY MÓVIL (<820px) ---------- */

.c5-glass .nav-sticky-cta {
  /* el único texto del bar vive en el botón oro (AA propio), así
     que el vidrio puede ser un punto más transparente: 80% */
  background-color: color-mix(in srgb, var(--bg) 80%, transparent);
  background-image: linear-gradient(
    180deg,
    rgba(255, 243, 214, 0.045) 0%,
    transparent 48%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top-color: transparent; /* la repinta ::before en gradiente */
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 214, 0.07),
    0 -16px 36px -20px rgba(0, 0, 0, 0.6),
    0 -4px 24px -16px rgba(var(--gold-rgb), 0.22);
}

/* Hairline superior espejo de la del header: la luz viaja en
   sentido contrario (calc 100% - shine) → sensación de refracción */
.c5-glass .nav-sticky-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px; /* exactamente sobre el slot del border-top base */
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--gold-rgb), 0.16) 24%,
    rgba(var(--gold-rgb), 0.5) 46%,
    rgba(255, 243, 214, 0.6) 50%,
    rgba(var(--gold-rgb), 0.5) 54%,
    rgba(var(--gold-rgb), 0.16) 76%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: calc(100% - var(--c5-shine, 50%)) 0;
}

/* ---------- Fallback sin backdrop-filter: sólido translúcido ---------- */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .c5-glass .nav.is-stuck {
    background-color: color-mix(in srgb, var(--bg) 97%, transparent);
  }
  .c5-glass .nav-sticky-cta {
    background-color: color-mix(in srgb, var(--bg) 96%, transparent);
  }
}

/* ---------- Reduced motion: vidrio estático, sin viajes de luz ----------
   (c5.js además no arranca specular ni ScrollTrigger → la hairline
   queda con su punto de luz centrado, versión elegante y quieta) */
@media (prefers-reduced-motion: reduce) {
  .c5-glass .nav,
  .c5-glass .nav::before,
  .c5-glass .nav::after {
    transition: none;
  }
}

/* === app-ios — "Tu app · iOS": showpiece (iPhone + features). Ledger Noir. === */
.appx {
  position: relative;
  padding-block: var(--section-pad);
  background:
    radial-gradient(
      78% 58% at 80% 16%,
      rgba(232, 192, 105, 0.055),
      transparent 60%
    ),
    radial-gradient(
      70% 60% at 2% 96%,
      rgba(232, 192, 105, 0.022),
      transparent 55%
    ),
    var(--bg);
  overflow: hidden;
}
.appx__inner {
  max-width: var(--layout-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.appx__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
}
.appx__title {
  margin: var(--space-md) 0 var(--space-sm);
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}
.appx__lede {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--soft);
}
.appx__list {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.appx__feat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  border-radius: 14px;
  border: 1px solid transparent;
  transition:
    border-color 0.35s,
    background 0.35s,
    transform 0.35s;
}
.appx__feat:hover {
  border-color: var(--line);
  background: rgba(var(--gold-rgb), 0.03);
  transform: translateX(4px);
}
.appx__feat-ic {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold);
  flex: none;
  transition:
    transform 0.35s,
    background 0.35s;
}
.appx__feat:hover .appx__feat-ic {
  transform: scale(1.08);
  background: rgba(var(--gold-rgb), 0.18);
}
.appx__feat-ic svg {
  width: 21px;
  height: 21px;
}
.appx__feat-title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
}
.appx__feat-body {
  margin: 0;
  font-size: 13.5px;
  line-height: var(--leading-snug);
  color: var(--soft);
}
.appx__note {
  margin: var(--space-xl) 0 0;
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.appx__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  perspective: 1200px;
}
.appx__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--gold-rgb), 0.22),
    transparent 62%
  );
  filter: blur(18px);
  pointer-events: none;
}
.appx__phone {
  position: relative;
  width: 266px;
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  background: #0b0a0d;
  padding: 10px;
  box-shadow:
    0 44px 90px -30px rgba(0, 0, 0, 0.85),
    inset 0 0 0 5px #16141a,
    0 0 0 1px rgba(var(--gold-rgb), 0.22);
  transform-style: preserve-3d;
  will-change: transform;
}
.appx__phone-bar {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 7px;
  border-radius: 99px;
  background: #000;
  z-index: 3;
}
.appx__screen {
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #15181d;
  display: flex;
  flex-direction: column;
}
.appx__cover {
  /* Réplica del diseño REAL de la tarjeta /c/<slug> (pedido de Adrian
     2026-07-04): portada oscura con brillo de marca, no bloque dorado plano. */
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(var(--gold-rgb), 0.28),
      rgba(var(--gold-rgb), 0.06) 55%,
      transparent 80%
    ),
    #101318;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
  padding: 26px 16px 14px;
  text-align: center;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.appx__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0e0b08;
  color: var(--gold);
  border: 2px solid rgba(var(--gold-rgb), 0.75);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin-bottom: 6px;
}
.appx__open {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--soft);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.appx__open i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok-live);
}
.appx__hours {
  margin: 10px 12px 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}
.appx__hours p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 4px 2px;
  font-size: 10.5px;
  color: var(--soft);
}
.appx__hours b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.appx__bizname {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.appx__biztag {
  font-size: 10px;
  opacity: 0.88;
}
.appx__acts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 12px 0;
}
.appx__act {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 10px;
  background: #1e2228;
  color: #e8c069;
}
.appx__act svg {
  width: 18px;
  height: 18px;
}
.appx__save {
  margin: 10px 12px 0;
  padding: 9px;
  border-radius: 10px;
  background: var(--gold);
  color: #15120d; /* mismo contraste que el CTA .btn--gold del sitio */
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.appx__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 11px 12px 0;
}
.appx__chips span {
  font-size: 9.5px;
  padding: 4px 9px;
  border-radius: 99px;
  background: #1e2228;
  color: #d3d8df;
}
.appx__qr {
  margin: auto 12px 14px;
  align-self: center;
  width: 58px;
  height: 58px;
  padding: 6px;
  border-radius: 9px;
  background: #fff;
}
.appx__qr svg {
  width: 100%;
  height: 100%;
  color: #0b0a0d;
  display: block;
}
@media (min-width: 920px) {
  .appx__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 90px);
  }
}
@media (max-width: 919px) {
  .appx__stage {
    min-height: 0;
    margin-top: var(--space-2xl);
  }
  .appx__title,
  .appx__lede,
  .appx__note {
    margin-inline: 0;
  }
}

/* === Profundidad de sección (warm + atmósfera): glow dorado sutil y consistente.
   background-image (longhand) NO resetea el background-color → respeta cada banda. === */
.hiw,
.svc,
.cf,
.faq,
.calc,
.trust {
  background-image: radial-gradient(
    74% 54% at 80% 8%,
    rgba(232, 192, 105, 0.04),
    transparent 60%
  );
}

/* ===== promo-bar (Contrato de Contenido, Fase 1) ===== */
/* ============================================================
   Barra de promo/oferta editable desde la app DigitalTiming.
   Oculta por defecto ([hidden]); el _middleware.js la revela solo
   con una promo publicada y VIGENTE. Encima del nav sticky.
   LEDGER NOIR: fondo panel cálido, texto mono, oro SOLO en el CTA.
   ============================================================ */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-nav) + 1); /* siempre por encima del nav fijo */
  /* Fondo OPACO (el contenido pasa por debajo al hacer scroll). */
  background-color: var(--bg-2);
  background-image: linear-gradient(
    180deg,
    rgba(var(--gold-rgb), 0.12),
    rgba(var(--gold-rgb), 0.06)
  );
  border-bottom: 1px solid var(--line);
}

/* Con promo visible, main.js publica --promo-h y el nav fijo baja esa altura.
   Sin promo (barra hidden) --promo-h no existe → el nav queda como siempre. */
.nav {
  top: var(--promo-h, 0px);
}
/* Al ocultarse en scroll-down, el nav debe salir TAMBIÉN la altura de la promo
   (si no, quedaría asomando debajo de la barra sticky). Sin promo: -100% igual
   que siempre. */
.nav.is-hidden {
  transform: translateY(calc(-100% - var(--promo-h, 0px)));
}
.promo-bar[hidden] {
  display: none;
}
.promo-bar__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--ink);
  text-align: center;
}
.promo-bar__cta {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.45);
  white-space: nowrap;
  transition: border-color 160ms ease;
}
.promo-bar__cta:hover,
.promo-bar__cta:focus-visible {
  border-bottom-color: var(--gold);
}
.promo-bar__cta[hidden] {
  display: none;
}

/* ===== gal (galería editable — Contrato de Contenido, Slice 3) ===== */
/* ============================================================
   Oculta por defecto ([hidden]); el _middleware.js la revela e
   inyecta las <figure> con las fotos publicadas desde la app.
   LEDGER NOIR: grid sobrio, marco cálido, caption mono.
   ============================================================ */
.gal[hidden] {
  display: none;
}
.gal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-xs);
}
.gal__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin: 0 0 var(--space-lg);
}
.gal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}
.gal__item {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.gal__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gal__caption {
  padding: 0.55rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--soft);
}