/* ===== tokens (web-architect, LEDGER NOIR) ===== */
:root{
  /* ============ LEDGER NOIR — COLOR (near-blacks cálidos en capas) ============ */
  --bg:#0C0B0F;            /* base de página */
  --bg-2:#100E14;          /* banda alternativa */
  --bg-pit:#080709;        /* escenario de la historia (más hondo, máx. tensión) */
  --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,.16);
  --line-soft:rgba(245,240,232,.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(.22,1,.36,1);
  --ease-dramatic:cubic-bezier(.7,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,.05), 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -12px rgba(0,0,0,.65), 0 0 40px -20px rgba(232,192,105,.18);
  --glow-gold:0 0 40px -18px rgba(232,192,105,.35);
  --glow-money:0 0 90px -24px rgba(232,192,105,.5);     /* el contador sangrando */
  --glow-red:0 0 60px -24px rgba(192,57,43,.5);          /* solo llamada perdida */
  --glow-ok:0 0 30px -10px rgba(74,222,128,.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:.01ms !important;animation-iteration-count:1 !important;transition-duration:.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), .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), .10), transparent 70%),
    radial-gradient(50% 55% at 84% 78%, rgba(var(--gold-rgb), .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), .07), transparent 32%, rgba(199, 159, 99, .05) 62%, transparent 86%);
  filter:blur(80px);border-radius:50%;opacity:.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:.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), .06), transparent 60%);
  transition:background .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), .05), transparent 60%),
    radial-gradient(80% 60% at 75% 80%, rgba(var(--gold-rgb), .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:.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), .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), .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,.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), .06), transparent 58%),
    radial-gradient(70% 60% at 80% 90%, rgba(var(--gold-rgb), .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:.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:.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:.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(.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,.55); /* --bg-pit en rgba: legibilidad sobre el vídeo */
  box-shadow:var(--glow-red), inset 0 0 18px rgba(var(--red-rgb), .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(.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,.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,.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), .22), transparent 72%);
  opacity:.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:.1} to{opacity:.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), .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), .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), .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:.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,.96) 0%, rgba(12,11,15,.96) 44%, rgba(12,11,15,.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), .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), .05), transparent 60%),
    radial-gradient(75% 55% at 78% 82%, rgba(var(--gold-rgb), .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:.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:.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,.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), .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), .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:.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:.2em;
  border:2px solid var(--line); border-top-color:var(--ink);
  border-radius:var(--radius-pill);
  animation:pls-spin .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:.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 .32s var(--ease-out) both;
}
@keyframes pls-pop{
  from{ transform:scale(.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), .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), .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), .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), .30));
}
.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), .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), .45);
  box-shadow:var(--shadow-card), var(--glow-gold);
}
.svc__card--featured:hover{border-color:rgba(var(--gold-rgb), .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), .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:.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 .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), .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), .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), .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: .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), .5);
}

.faq__item[open] .faq__chev {
  transform: rotate(180deg);
  border-color: rgba(var(--gold-rgb), .5);
  background: rgba(var(--gold-rgb), .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), .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), .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), .5) 18%,
    rgba(var(--gold-rgb), .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), .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), .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 .75fr .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,.24);
  --line-soft:rgba(245,240,232,.10);
  --shadow-card:
    inset 0 1px 0 rgba(245,240,232,.09),        /* highlight superior interno */
    inset 0 0 0 1px rgba(232,192,105,.06),      /* filo dorado interno sutil */
    0 1px 2px rgba(0,0,0,.45),
    0 14px 32px -14px rgba(0,0,0,.7),
    0 0 44px -22px rgba(232,192,105,.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,.05), transparent 55%),
    radial-gradient(150% 120% at 50% 50%, transparent 58%, rgba(8,7,9,.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:.5; }

/* la textura de libro mayor respira un poco más sobre el carbón claro */
.ledger-tex{ opacity:.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,.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,.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), .62) 18%,
      rgba(var(--gold-rgb), .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,.28), rgba(8,7,9,.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:.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:.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:.062 }
@supports (color: color-mix(in srgb, red 50%, blue)){
  .c2-ghost--band .c2-ghost__num{ opacity:.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:.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:.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), .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), .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:.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, .05) 0%,
    rgba(255, 243, 214, .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, .06),
    0 18px 40px -22px rgba(0, 0, 0, .65),
    0 6px 28px -18px rgba(var(--gold-rgb), .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, .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), .14) 22%,
    rgba(var(--gold-rgb), .5) 44%,
    rgba(255, 243, 214, .65) 50%,
    rgba(var(--gold-rgb), .5) 56%,
    rgba(var(--gold-rgb), .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, .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, .07),
    0 -16px 36px -20px rgba(0, 0, 0, .6),
    0 -4px 24px -16px rgba(var(--gold-rgb), .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), .16) 24%,
    rgba(var(--gold-rgb), .5) 46%,
    rgba(255, 243, 214, .6) 50%,
    rgba(var(--gold-rgb), .5) 54%,
    rgba(var(--gold-rgb), .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}
}