/* =============================================================
   César Broshely — Auditoría digital
   1. Paleta y tokens semánticos

   Paleta monocromática (blanco, negro y tres grises intermedios).
   Cada sección declara su "piel" con data-theme y TODOS los
   componentes leen tokens semánticos (--surface, --title, --text,
   --brand…). El golpe de color ya no es un tono — es el SALTO DE
   VALOR entre negro, gris y blanco.
   ============================================================= */
:root {
  /* --- Paleta (los 5 colores, sin tocar) --- */
  --white:      #FFFFFF;
  --grey-light: #E1E1E1;
  --grey-mid:   #8D8D8D;
  --grey-dark:  #3A3A3A;
  --ink:        #181818;

  /* --- Derivados: pasos intermedios sobre el negro --- */
  --ink-2:      #242424;   /* tarjetas y bloques anidados */
  --ink-3:      #2E2E2E;   /* hover de esos bloques */
  --paper:      #FFFFFF;   /* claro máximo */
  --paper-2:    #E1E1E1;   /* claro secundario, tarjetas sobre blanco */

  /* Resplandor neutro (sin matiz) para el efecto firma del cursor */
  --glow: rgba(255, 255, 255, 0.4);

  /* --- Tokens semánticos: valores por defecto = piel OSCURA --- */
  --surface:    var(--ink);
  --surface-2:  var(--ink-2);
  --surface-3:  var(--ink-3);
  --title:      var(--white);
  --text:       rgba(225, 225, 225, 0.78);
  --text-dim:   rgba(225, 225, 225, 0.72);
  --rule:       rgba(225, 225, 225, 0.16);
  --rule-soft:  rgba(225, 225, 225, 0.09);
  --brand:      var(--white);    /* relleno de marca sobre esta piel */
  --on-brand:   var(--ink);      /* texto que va ENCIMA de ese relleno */
  --brand-text: var(--white);    /* blanco para texto pequeño de detalle */

  /* --- Tipografía --- */
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Helvetica, Arial, sans-serif;
  --w-regular: 400;
  --w-bold: 700;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell:  1320px;
  --nav-h:  76px;
}

/* --- Piel BLANCA: el máximo salto de valor — la sección "punch" --- */
[data-theme="blanco"] {
  --surface:    var(--paper);
  --surface-2:  var(--paper-2);
  --surface-3:  #D4D4D4;
  --title:      var(--ink);
  --text:       rgba(24, 24, 24, 0.76);
  --text-dim:   rgba(24, 24, 24, 0.62);
  --rule:       rgba(24, 24, 24, 0.16);
  --rule-soft:  rgba(24, 24, 24, 0.08);
  --brand:      var(--ink);      /* aquí el relleno de marca es negro */
  --on-brand:   var(--white);
  --brand-text: var(--ink);
}

/* --- Piel CLARA: gris suave, para los bloques que hay que leer --- */
[data-theme="claro"] {
  --surface:    var(--grey-light);
  --surface-2:  var(--paper);
  --surface-3:  #D4D4D4;
  --title:      var(--ink);
  --text:       rgba(24, 24, 24, 0.72);
  --text-dim:   rgba(24, 24, 24, 0.63);
  --rule:       rgba(24, 24, 24, 0.16);
  --rule-soft:  rgba(24, 24, 24, 0.08);
  --brand:      var(--ink);
  --on-brand:   var(--white);
  --brand-text: var(--ink);
}
[data-theme="claro"].section-quotes { --surface: var(--paper); --surface-2: var(--paper-2); }

/* --- Piel CARBÓN: gris oscuro, la banda de cifras --- */
[data-theme="carbon"] {
  --surface:    var(--grey-dark);
  --surface-2:  rgba(255, 255, 255, 0.07);
  --surface-3:  rgba(255, 255, 255, 0.12);
  --title:      var(--white);
  --text:       rgba(225, 225, 225, 0.82);
  --text-dim:   rgba(225, 225, 225, 0.70);
  --rule:       rgba(225, 225, 225, 0.22);
  --rule-soft:  rgba(225, 225, 225, 0.12);
  --brand:      var(--white);
  --on-brand:   var(--ink);
  --brand-text: var(--white);
}

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 38%; }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: var(--w-regular);
  line-height: 1.62;
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ol, ul { list-style: none; padding: 0; }

/* Montserrat es ancha y redonda: los titulares piden peso 700 para
   tener autoridad, y menos apretado (-0.02em) para respirar. */
h1, h2, h3, h4 {
  font-weight: var(--w-bold);
  color: var(--title);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

em { font-style: normal; color: var(--brand-text); }
strong { font-weight: var(--w-bold); color: var(--title); }

::selection { background: var(--ink); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -120px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--white); color: var(--ink);
  z-index: 9999; border-radius: 4px; font-weight: var(--w-bold);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Cada sección pinta su propia piel */
.section, .stats-band, .hero, .footer { background: var(--surface); color: var(--text); }

/* Revelado al hacer scroll — sólo se oculta si hay JavaScript que lo revele.
   Sin JS (sin la clase `js`) todo se ve desde el primer momento. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* DEFENSIVO (gotcha A.4.5): reveal + split juntos nunca deben quedar invisibles */
.js [data-reveal][data-split] { opacity: 1; transform: none; }

.split-word { display: inline-block; will-change: transform; }

/* Grano global — textura, no ruido visible */
.grain {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Barra de progreso de lectura — blanca, siempre visible sobre el nav oscuro */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 300; background: rgba(225,225,225,.1); pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: var(--white);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .1s linear;
}

/* Fotografía en blanco y negro — todas las imágenes, de origen distinto,
   quedan dentro de la misma familia tonal monocromática. */
.figure-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  isolation: isolate;
}
.figure-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.92);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease-out);
}
.figure-frame::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(24,24,24,.06), rgba(24,24,24,.38));
  mix-blend-mode: multiply;
}
@media (hover: hover) and (pointer: fine) {
  .figure-frame:hover img { transform: scale(1.04); filter: grayscale(1) contrast(1.05) brightness(1); }
}

/* =============================================================
   4. Nav — barra flotante oscura, constante sobre todas las pieles
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .5s var(--ease-out),
              border-color .5s var(--ease-out),
              backdrop-filter .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(24, 24, 24, .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(225,225,225,.12);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background: rgba(24, 24, 24, .98); }
}

.nav-inner { display: flex; align-items: center; gap: 2rem; }

.nav-brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.nav-mark {
  display: grid; place-items: center; font-weight: var(--w-bold);
  width: 34px; height: 34px;
  background: var(--white); color: var(--ink);
  font-size: .74rem; letter-spacing: .02em;
  transition: transform .4s var(--ease-out);
}
.nav-brand:hover .nav-mark { transform: rotate(-8deg) scale(1.06); }
.nav-name { color: var(--white); font-size: .95rem; font-weight: var(--w-bold); letter-spacing: -0.01em; }

.nav-links { display: none; gap: 2rem; }
.nav-link {
  position: relative; font-size: .88rem; color: rgba(225,225,225,.8);
  transition: color .35s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--white);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Selector de 2 clases: debe ganar a `.btn { display: inline-flex }` */
.nav-inner .nav-cta { display: none; }

.nav-toggle {
  display: grid; gap: 6px; align-content: center;
  width: 40px; height: 40px; padding: 0 8px;
  margin-right: -8px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; background: var(--white);
  transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* Menú a pantalla completa — blanco puro, el mayor salto de valor posible */
.menu {
  position: fixed; inset: 0; z-index: 190;
  background: var(--white);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2.5rem;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-out);
}
.menu[aria-hidden="false"] { clip-path: inset(0); }
.menu[aria-hidden="true"] { pointer-events: none; }
.menu-inner { display: grid; gap: .2rem; }
.menu-inner a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .8rem 0;
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  color: var(--ink); font-weight: var(--w-bold); letter-spacing: -0.03em;
  border-bottom: 1px solid rgba(24,24,24,.16);
}
.menu-inner a span { font-size: .74rem; letter-spacing: .18em; color: rgba(24,24,24,.6); }
.menu-cta { align-self: start; background: var(--ink); color: var(--white); }
.menu-cta::before { background: var(--grey-dark); }
.menu-cta:hover { color: var(--white); }

html.menu-open, html.menu-open body { overflow: hidden; }

/* =============================================================
   5. Botones
   ============================================================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.4rem;   /* más aire lateral: la forma ovalada lo pide */
  font-size: .95rem; font-weight: var(--w-bold); letter-spacing: -0.01em;
  border: 2px solid transparent;
  border-radius: 999px;      /* píldora completa */
  isolation: isolate; overflow: hidden;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out),
              transform .45s var(--ease-soft);
}
.btn-sm { padding: .68rem 1.45rem; font-size: .85rem; border-width: 1px; }

/* Relleno = color de marca de la piel actual; el barrido de hover usa
   surface-2 (siempre distinto del relleno base) para que el cambio
   se note, y el texto pasa a --title al terminar el barrido. */
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-2);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary:hover { color: var(--title); }
.btn:active { transform: translateY(1px); }

.btn-ghost { border-color: var(--rule); color: var(--title); }
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brand);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--on-brand); }
.btn-ghost:hover::before { transform: translateY(0); }

/* =============================================================
   6. Hero — foto a pantalla completa de fondo (estilo "landing solar")
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3rem));
  overflow: hidden;
  isolation: isolate;
}

/* La foto ocupa toda la sección; el texto va encima */
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* el lienzo se amplió a la izquierda al preparar la foto: mostrar esa
     zona deja el lado del texto despejado y a César a la derecha */
  object-position: 50% 26%;
  /* Zoom fijo centrado en la cara — independiente del ancho de pantalla,
     así el encuadre no varía entre dispositivos. Calculado con la fórmula
     real de object-fit:cover + transform, no a ojo (ver notas de proyecto). */
  transform: scale(1.32);
  transform-origin: 80% 24%;
  filter: contrast(1.05) brightness(.8) saturate(.92);
}
/* Móvil: la caja es mucho más alta y estrecha (el texto apila a pantalla
   completa encima), así que el recorte de escritorio deja la cara fuera
   del encuadre. Aquí no hace falta desplazar nada por el texto —ocupa
   todo el ancho igualmente— así que se prioriza que la cara se vea. */
@media (max-width: 719px) {
  .hero-bg img {
    object-position: 63% 20%;
    transform: none;
  }
}

/* Capa de lectura: oscurece más donde va el texto (izquierda) y en los
   bordes superior/inferior; a la derecha, donde está la foto, se aclara
   para que la imagen siga reconociéndose. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(24,24,24,.94) 0%,
      rgba(24,24,24,.86) 26%,
      rgba(24,24,24,.55) 48%,
      rgba(24,24,24,.22) 68%,
      rgba(24,24,24,.06) 88%),
    linear-gradient(180deg,
      rgba(24,24,24,.5) 0%, transparent 24%,
      transparent 68%, rgba(24,24,24,.65) 100%);
}

/* Firma del proyecto: resplandor neutro que sigue al cursor, sobre la foto */
.hero-glow, .contact-glow {
  position: absolute; inset: -20% -10%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at var(--mx) var(--my),
      rgba(255, 255, 255, .16), transparent 62%),
    radial-gradient(46vw 40vw at calc(var(--mx) + 16%) calc(var(--my) + 14%),
      rgba(58, 58, 58, .55), transparent 66%),
    radial-gradient(30vw 30vw at calc(var(--mx) - 18%) calc(var(--my) + 6%),
      rgba(255, 255, 255, .07), transparent 60%);
  filter: blur(46px);
  opacity: .7;
}
.contact-glow { position: absolute; inset: -20% -10%; z-index: -1; }

.hero-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225,225,225,.25), transparent);
  z-index: 1;
}

.hero-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  padding-block: clamp(2.5rem, 8vh, 5rem);
}

.hero-copy { position: relative; max-width: 640px; }

/* Sin fondo: sólo el texto, alineado a ras con el titular */
.status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--brand-text);
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  animation: pulseDot 2.6s var(--ease-soft) infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 var(--glow); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.hero-title {
  font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  max-width: 22ch;
}

.hero-sub {
  font-size: clamp(1rem, 1.55vw, 1.2rem);
  color: var(--text);
  max-width: 52ch;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding-top: clamp(1.6rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-soft);
}
.fact dt {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .35rem;
}
.fact dd { font-size: 1.05rem; font-weight: var(--w-bold); color: var(--title); }

/* La tarjeta de dato: cristal esmerilado sobre la foto, no un bloque
   blanco sólido — dedja intuir la imagen detrás y se integra con ella
   en vez de taparla. Fallback sólido si el navegador no soporta blur.
   En móvil va en el flujo normal, debajo del texto (no hay sitio para
   flotarla sin tapar la cara); a partir de tablet se despega y se
   ancla abajo a la derecha, como en el ejemplo de referencia. */
.badge-card {
  position: relative;
  z-index: 1;
  width: min(290px, calc(100% - 2 * var(--gutter)));
  margin-inline: var(--gutter);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(24, 24, 24, .62);           /* fallback sin blur */
  border: 1px solid rgba(255, 255, 255, .14);
  border-top-color: rgba(255, 255, 255, .24);   /* leve luz superior, más "cristal" */
  color: var(--white);
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.6);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .badge-card {
    background: rgba(24, 24, 24, .30);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
  }
}
.badge-kicker {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); font-weight: var(--w-bold);
  margin-bottom: .6rem;
}
.badge-num {
  font-size: 3.2rem; line-height: .95; color: var(--white);
  font-weight: var(--w-bold); letter-spacing: -0.04em; margin-bottom: .5rem;
}
.badge-txt { font-size: .85rem; color: rgba(255,255,255,.82); line-height: 1.45; font-weight: var(--w-regular); }

/* Marquee de sectores — banda discreta, apoyada en la piel de la sección */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1rem;
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.marquee-track {
  display: inline-flex; align-items: center; gap: 2.2rem;
  white-space: nowrap; will-change: transform;
  padding-right: 2.2rem;
}
.marquee-track span {
  font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text); font-weight: var(--w-bold);
}
.marquee-track i { color: var(--grey-mid); font-style: normal; }
/* Reserva por si GSAP no carga */
.marquee-track.is-css-marquee { animation: marqueeSlide 42s linear infinite; }
@keyframes marqueeSlide { to { transform: translateX(-50%); } }

/* =============================================================
   7. Secciones — estructura común
   ============================================================= */
.section { padding-block: clamp(4.5rem, 12vh, 9rem); position: relative; }

.chapter {
  display: flex; align-items: center; gap: .8rem;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--text-dim);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.chapter span { color: var(--brand-text); }
.chapter::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.section-title { font-size: clamp(1.75rem, 3.4vw, 2.9rem); max-width: 20ch; }
.section-lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--text);
  max-width: 46ch;
}

/* =============================================================
   8. El problema (piel oscura)
   ============================================================= */
.problem-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.statement { font-size: clamp(1.75rem, 3.6vw, 3rem); max-width: 19ch; }
.problem-side { display: grid; gap: 1.1rem; max-width: 44ch; }
.problem-side p { color: var(--text); }

.symptoms {
  display: grid; grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(3rem, 7vw, 5rem);
  background: var(--rule-soft);
  border-block: 1px solid var(--rule-soft);
}
.symptom {
  background: var(--surface);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.4rem, 2.5vw, 2rem);
  transition: background-color .5s var(--ease-out);
}
.symptom:hover { background: var(--surface-2); }
.symptom-n {
  display: block; font-size: 1.6rem; font-weight: var(--w-bold);
  letter-spacing: -0.03em; color: var(--brand-text); margin-bottom: .8rem;
}
.symptom h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.symptom p { font-size: .95rem; color: var(--text); }

.wide-figure { margin-top: clamp(3rem, 7vw, 5rem); }
/* Tope al ancho nativo del archivo (1024 px): por encima se vería blanda. */
.wide-figure .figure-frame { aspect-ratio: 16 / 9; max-width: 1024px; }
.wide-figure figcaption,
.proceso-figure figcaption {
  margin-top: 1rem; font-size: .84rem; color: var(--text-dim);
  max-width: 52ch;
}

/* =============================================================
   9. Ventajas — LA SECCIÓN BLANCA (el mayor salto de valor)
   ============================================================= */
.adv-head {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem;
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
}

.adv { border-top: 2px solid var(--rule); }
.adv-item { border-bottom: 2px solid var(--rule); isolation: isolate; }
.adv-item h3 { font-size: 1rem; font-weight: var(--w-regular); letter-spacing: normal; line-height: inherit; }

.adv-trigger {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3.4vw, 2.3rem) 0;
  text-align: left;
  cursor: pointer;
  transition: padding-inline .5s var(--ease-out);
}
/* El barrido usa el color de marca de la piel: en blanco, es negro */
.adv-trigger::before {
  content: ""; position: absolute; inset: 0 -1.4rem; z-index: -1;
  background: var(--brand);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease-out);
}

.adv-n {
  flex: 0 0 auto;
  font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: var(--w-bold);
  letter-spacing: -0.02em; color: var(--brand-text);
  transition: color .4s var(--ease-out);
}
.adv-title {
  flex: 1;
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  color: var(--title);
  font-weight: var(--w-bold); letter-spacing: -0.03em; line-height: 1.15;
  transition: color .4s var(--ease-out);
}
.adv-icon {
  flex: 0 0 auto;
  position: relative; width: 18px; height: 18px;
  transition: transform .5s var(--ease-out);
}
.adv-icon::before, .adv-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--title);
  transition: background-color .4s var(--ease-out), transform .5s var(--ease-out);
}
.adv-icon::after { transform: rotate(90deg); }
.adv-trigger[aria-expanded="true"] .adv-icon::after { transform: rotate(0deg); }

@media (hover: hover) and (pointer: fine) {
  .adv-trigger:hover::before { transform: scaleY(1); }
  .adv-trigger:hover { padding-inline: 1.4rem; }
  .adv-trigger:hover .adv-title,
  .adv-trigger:hover .adv-n { color: var(--on-brand); }
  .adv-trigger:hover .adv-icon::before,
  .adv-trigger:hover .adv-icon::after { background: var(--on-brand); }
}

/* Plegado determinista: 1fr → 0fr.
   Sin JavaScript todo queda abierto y legible; el JS sólo lo pliega. */
.adv-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.adv-item.is-collapsed .adv-body { grid-template-rows: 0fr; }
/* El primer plegado (al cargar) se aplica sin animación: evita que los
   seis paneles se cierren a la vez y da a la transición un valor
   de partida ya resuelto. */
.adv.no-anim .adv-body { transition: none; }
.adv-body-in {
  overflow: hidden;
  min-height: 0;
  max-width: 62ch;
  margin-left: clamp(0rem, 6vw, 5.4rem);
}
.adv-body-in p {
  color: var(--text);
  font-size: clamp(.97rem, 1.3vw, 1.08rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

/* =============================================================
   10. Banda de cifras (piel carbón)
   ============================================================= */
.stats-band {
  padding-block: clamp(3.5rem, 9vh, 5.5rem);
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 15% 0%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
.stats-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
}
.stat-num {
  font-size: clamp(2.8rem, 6.4vw, 4.6rem);
  line-height: .95; color: var(--title);
  font-weight: var(--w-bold); letter-spacing: -0.045em; margin-bottom: .5rem;
}
.stat-num small { font-size: .42em; color: var(--brand-text); margin-left: .06em; }
.stat-label {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); font-weight: var(--w-bold);
}

/* =============================================================
   11. Proceso (piel clara)
   ============================================================= */
.proceso-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  margin-top: clamp(2.6rem, 6vw, 4rem);
  align-items: start;
}
.proceso-figure .figure-frame { aspect-ratio: 16 / 9; }

.steps { display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 4vw, 2.8rem); }
.step { border-top: 2px solid var(--rule); padding-top: 1.5rem; }
.step-n {
  display: block; font-size: 1.7rem; font-weight: var(--w-bold);
  letter-spacing: -0.03em; color: var(--brand-text); margin-bottom: .7rem;
}
.step h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: .7rem; }
.step p { font-size: .96rem; color: var(--text); max-width: 40ch; }

/* =============================================================
   12. Testimonios (piel clara)
   ============================================================= */
.quotes-head {
  display: grid; gap: .9rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.placeholder-note {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--text-dim);
  border-left: 3px solid var(--brand);
  padding-left: .8rem;
}

.quotes { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); }

.quote {
  background: var(--surface);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex; flex-direction: column; gap: 1.8rem;
  transition: background-color .55s var(--ease-out);
  position: relative;
}
.quote::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand);
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease-out);
}
.quote:hover { background: var(--surface-2); }
.quote:hover::before { transform: scaleY(1); }

.quote blockquote {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: var(--title);
  letter-spacing: -0.015em;
  flex: 1;
}
.quote blockquote::before { content: "“"; color: var(--brand-text); margin-right: .1em; }
.quote blockquote::after  { content: "”"; color: var(--brand-text); }

/* Sin avatares: una regla ancla la firma sin inventar caras */
.quote figcaption { display: grid; gap: .15rem; }
.quote-rule { display: block; width: 30px; height: 3px; background: var(--brand); margin-bottom: .8rem; }
.quote-name { font-size: .95rem; font-weight: var(--w-bold); color: var(--title); }
.quote-role { font-size: .8rem; color: var(--text-dim); }

/* =============================================================
   13. Contacto (piel oscura)
   ============================================================= */
.section-contact { position: relative; overflow: hidden; isolation: isolate; }
.contact-glow { opacity: .55; }

.contact-title {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  max-width: 19ch;
  margin-bottom: clamp(.9rem, 2vw, 1.1rem);
}
.contact-lead {
  color: var(--text);
  max-width: 46ch;
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
}

.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.6rem, 6vw, 4.5rem); }

.contact-mail {
  display: inline-block;
  position: relative;
  font-size: clamp(1rem, 2.2vw, 1.55rem);
  color: var(--title); font-weight: var(--w-bold); letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
  word-break: break-word;
}
.contact-mail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--brand);
  transform: scaleX(1); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.contact-mail:hover::after { transform: scaleX(0); transform-origin: right; }

.contact-note { color: var(--text); max-width: 38ch; margin-bottom: 1.8rem; }
.contact-list { display: grid; gap: .8rem; }
.contact-list li {
  position: relative; padding-left: 1.6rem;
  font-size: .93rem; color: var(--text);
}
.contact-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 10px; height: 2px; background: var(--brand);
}

/* Calculadora de auditoría en vivo */
.contact-formwrap { position: relative; }

.calc {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  min-height: 280px;
  display: grid;
  align-content: center;
}

.calc-step[hidden] { display: none; }

/* Paso 1 — entrada de URL */
.calc-label {
  display: block;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--text-dim);
  margin-bottom: .6rem;
}
.calc-input-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.calc-input-row input {
  flex: 1 1 220px;
  font: inherit; font-size: 1rem;
  color: var(--title);
  background: transparent;
  border: 0; border-bottom: 2px solid var(--rule);
  padding: .7rem 0;
  transition: border-color .4s var(--ease-out);
}
.calc-input-row input:focus { outline: none; border-bottom-color: var(--brand); }
.calc-input-row input::placeholder { color: var(--grey-mid); }
.calc-input-row .btn { flex: 0 0 auto; align-self: flex-end; }

.calc-trust { margin-top: 1rem; font-size: .78rem; color: var(--text-dim); }
.calc-error {
  margin-top: .8rem; font-size: .88rem; color: var(--title);
  border-left: 3px solid var(--brand); padding-left: .7rem;
}

/* Paso 2 — analizando */
.calc-step-loading { justify-items: center; text-align: center; gap: 1.1rem; display: grid; }
.calc-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--rule); border-top-color: var(--brand);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.calc-loading-text { font-size: .92rem; color: var(--text); min-height: 1.4em; }

/* Paso 3 — resultados */
.calc-analyzed-url {
  font-size: .78rem; letter-spacing: .08em; color: var(--text-dim);
  margin-bottom: 1.2rem; word-break: break-all;
}

.calc-scores { display: grid; gap: .9rem; margin-bottom: 1.3rem; }
.calc-score-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .85rem; color: var(--text); margin-bottom: .35rem;
}
.calc-score-num { font-weight: var(--w-bold); color: var(--title); font-size: 1rem; }
.calc-score-track { height: 6px; background: var(--rule-soft); position: relative; }
/* Sin "right" — con inset:0 el ancho fijado por JS queda sobre-restringido
   (left:0 + right:0) y el navegador lo ignora, la barra nunca se rellena. */
.calc-score-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  background: var(--brand);
  transition: width 1.1s var(--ease-out);
}

.calc-verdict {
  font-size: .98rem; color: var(--title); line-height: 1.5;
  padding: 1rem 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 1.3rem;
}

.calc-gate-label { font-size: .9rem; color: var(--text); margin-bottom: .8rem; }
.calc-email-form { display: flex; flex-wrap: wrap; gap: .7rem; }
.calc-email-form input {
  flex: 1 1 180px;
  font: inherit; font-size: .95rem;
  color: var(--title);
  background: transparent;
  border: 0; border-bottom: 2px solid var(--rule);
  padding: .65rem 0;
}
.calc-email-form input:focus { outline: none; border-bottom-color: var(--brand); }
.calc-email-form input::placeholder { color: var(--grey-mid); }
.calc-email-form .btn { flex: 0 0 auto; }
.calc-gate-legal { margin-top: .7rem; font-size: .76rem; color: var(--text-dim); }

.calc-report-head { font-size: .9rem; font-weight: var(--w-bold); color: var(--title); margin-bottom: 1rem; }
.calc-issues { display: grid; gap: 1.1rem; }
.calc-issue { display: flex; gap: .9rem; }
.calc-issue-n {
  flex: 0 0 auto; font-size: .8rem; font-weight: var(--w-bold);
  color: var(--brand-text); padding-top: .1rem;
}
.calc-issue-title { font-size: .95rem; color: var(--title); margin-bottom: .25rem; }
.calc-issue-desc { font-size: .85rem; color: var(--text-dim); line-height: 1.5; }
.calc-restart {
  display: inline-block; margin-top: 1.4rem;
  font-size: .85rem; color: var(--brand-text);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.calc-restart:hover { border-bottom-color: currentColor; }

/* =============================================================
   14. Footer
   ============================================================= */
.footer {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(2.4rem, 5vw, 3.4rem);
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem clamp(1.5rem, 4vw, 3rem);
}
.footer-brand { color: var(--title); font-size: 1.05rem; font-weight: var(--w-bold); letter-spacing: -0.02em; }
.footer-tag { color: var(--grey-mid); font-size: .88rem; margin-right: auto; }
.footer-credits { color: var(--grey-mid); font-size: .8rem; }
.footer-legal { color: var(--grey-mid); font-size: .8rem; }

.inline-link {
  color: var(--brand-text);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease-out);
}
.inline-link:hover { border-bottom-color: currentColor; }

/* Página de créditos */
.credits-main { padding-top: calc(var(--nav-h) + clamp(2.5rem, 8vh, 5rem)); }
.credits-list {
  display: grid; gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--rule-soft);
  border-block: 1px solid var(--rule-soft);
}
.credit { background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem) 0; }
.credit-title { color: var(--title); font-weight: var(--w-bold); margin-bottom: .5rem; }
.credit-meta { font-size: .88rem; color: var(--text); }
.credit-use { font-size: .82rem; color: var(--text-dim); margin-top: .5rem; }

/* =============================================================
   15. Responsive (mobile-first)
   ============================================================= */
@media (min-width: 540px) {
  .quote figcaption { gap: 1.1rem; }
}

@media (min-width: 720px) {
  .symptoms { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }   /* tablet: en fila */
  .adv-head { grid-template-columns: 1.25fr 1fr; align-items: end; gap: 3rem; }
  .quotes-head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 2rem; }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-inner .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .menu { display: none; }
  .problem-grid { grid-template-columns: 1.3fr 1fr; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }

  /* La tarjeta se despega del flujo y flota sobre la foto, abajo a la
     derecha — como en el ejemplo de referencia. Se ancla a .hero-grid
     (no a .hero) para que su zona de anclaje termine antes del carrusel
     de sectores y nunca se solapen. */
  .badge-card {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    width: min(290px, 30%);
  }

  /* Escritorio: los 3 pasos en columna a la izquierda y la foto,
     fija, acompañando la lectura a la derecha. */
  .proceso-grid { grid-template-columns: 1.05fr 0.95fr; }
  .steps { grid-template-columns: 1fr; }
  .proceso-figure { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

@media (min-width: 1280px) {
  /* Montserrat 700 ocupa bastante más que una grotesca ligera:
     el titular crece, pero mucho menos de lo que crecería con peso 400. */
  .hero-title { font-size: clamp(2.9rem, 3.9vw, 4.3rem); }
}

/* =============================================================
   16. Reduced motion — sólo lo intrusivo
   (nunca hovers, fades, reveals ni el resplandor)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status-dot { animation: none; }
  .marquee-track.is-css-marquee { animation-duration: 120s; }
}