/* ==========================================================================
   TrueFold · landing /lp/auditoria
   HTML y CSS planos. Sin build. Hero centrado con tabla de producto sobre foto. Tema OSCURO: negros cálidos de la marca
   (neutral-900/950) con crema como texto y naranja como único acento.
   ========================================================================== */

/* ---------- Fuentes (archivos ya servidos por el sitio principal) ---------- */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Fondos: del más profundo al más alto */
  --bg: #0a0a08; /* neutral-950 */
  --bg-raise: #141410; /* neutral-900 */
  --surface: #1c1c18;
  --surface-hi: #24241f;

  /* Texto */
  --text: #f5f3ee; /* crema de la marca */
  --text-soft: #c9c7bf;
  --muted: #8f8d84;
  --faint: #5c5a53;

  /* Líneas: crema con transparencia, nunca gris plano */
  --line: rgba(245, 243, 238, 0.1);
  --line-strong: rgba(245, 243, 238, 0.16);

  /* Único acento. Botón y, a lo más, un detalle por sección. */
  --accent: #e06a10;
  --accent-hover: #f58a3a;
  --accent-soft: #ffb070;

  /* Semánticos: sólo dentro de imágenes de producto. */
  --ok: #5cc45c;
  --ok-bg: rgba(92, 196, 92, 0.14);
  --warn: #f06a6a;
  --warn-bg: rgba(240, 106, 106, 0.14);
  --gold: #d4be7a;

  --font-head: "Host Grotesk", "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-logo: "Instrument Sans", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: 28px;
  --bar-h: 68px;
  --radius: 14px;
  --radius-btn: 10px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Piezas compartidas ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(224, 106, 16, 0.18);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 28px;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: #0a0a08; /* texto oscuro: el crema sobre naranja no llegaba al contraste mínimo (3.2:1 vs 4.5:1) */
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 30px -10px rgba(224, 106, 16, 0.65);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.btn::after {
  content: "→";
  font-size: 18px;
  line-height: 1;
  transition: transform 180ms ease;
}
.btn:hover {
  background: var(--accent-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 38px -10px rgba(245, 138, 58, 0.7);
}
.btn:hover::after {
  transform: translateX(3px);
}
.btn:active {
  transform: translateY(1px);
}
.btn--sm {
  height: 42px;
  padding-inline: 18px;
  font-size: 14.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn--sm::after {
  display: none;
}

/* ==========================================================================
   0 · Barra fija — logo + un botón, sin menú
   ========================================================================== */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--bar-h);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  /* Como el sitio principal: la línea de abajo no se ve arriba de todo y
     aparece al bajar (clase .scrolled, la pone el script del final). */
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.bar.scrolled {
  border-bottom-color: var(--line);
}
.bar__in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.logo__mark {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.logo__text {
  font-family: var(--font-logo);
  font-size: 23px;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* ==========================================================================
   1 · Hero — todo centrado: etiqueta, titular, apoyo, botón
   ========================================================================== */
.hero {
  padding: 56px 14px 0;
  text-align: center;
}
.hero__copy {
  max-width: 1100px; /* el titular en dos líneas, no tres (Andrés, 2026-09-22) */
  margin-inline: auto;
  padding-inline: 20px;
}
/* Etiqueta arriba del titular: rectángulo plano y gris con un cuadrito naranja.
   Sin borde, sin punto que late, sin adornos. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  border-radius: 6px;
  background: rgba(245, 243, 238, 0.07);
  font-size: 13.5px;
  color: var(--text-soft);
}
.tag i {
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.hero__title {
  margin-top: 26px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.hero__title > span {
  display: block; /* segunda línea; todo el titular en blanco (Andrés, 2026-09-22). motion.js envuelve cada palabra en span, por eso el selector es hijo directo. */
}
.hero__lead {
  margin: 24px auto 0;
  max-width: 31em;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: pretty;
}
.cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cta__risk {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
}
.cta__risk span + span::before {
  content: "·";
  margin-inline: 9px;
  color: var(--faint);
}

/* ==========================================================================
   1b · Qué hacemos — una sola frase grande en dos tonos, debajo del hero.
   Patrón de Amperos (serif grande a la izquierda), Papermark (primera oración
   en tinta, el resto en gris) y Rulebase (frase que se apaga hacia el final).
   Sin etiqueta, sin botón: sólo el enunciado.
   ========================================================================== */
.what {
  padding-block: 112px 96px;
}
.what__t {
  max-width: 24em;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: rgba(245, 243, 238, 0.46);
  text-wrap: pretty;
}
.what__t b {
  font-weight: 400;
  color: var(--text);
}
@media (max-width: 700px) {
  .what {
    padding-block: 72px 56px;
  }
}

/* ==========================================================================
   2 · Logos — carrusel que gira solo, con una línea fina sólo por abajo
   ========================================================================== */
.logos {
  width: min(1180px, 100%);
  margin: 52px auto 0;
  padding-block: 0 22px;
  border-bottom: 1px solid var(--line);
}
.marquee {
  position: relative;
  margin: 0 auto;
  max-width: 1080px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
/* Marcador de logo. Al poner logos reales: <img> en blanco, alto 26px. */
.marquee__group span {
  display: grid;
  place-items: center;
  width: 132px;
  height: 40px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.marquee__group img {
  display: block;
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

/* ==========================================================================
   La foto en banda baja y, montada sobre su borde, la tabla de producto.
   La foto vive en img/escena.webp; para cambiarla basta reemplazar el archivo.
   ========================================================================== */
.band {
  width: min(1180px, 100%);
  height: 300px;
  margin: 0 auto;
  background:
    linear-gradient(0deg, rgba(10, 10, 8, 0.55), rgba(10, 10, 8, 0.15)),
    url("/lp/auditoria/img/escena.webp") center 72% / cover no-repeat;
}
.app {
  position: relative;
  width: min(940px, calc(100% - 32px));
  margin: -170px auto 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #131310;
  text-align: left;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.app__title {
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: -0.02em;
}
.app__title span {
  margin-left: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--accent-soft);
}
.app__scroll {
  overflow-x: auto;
}

/* ---------- Tabla de producto ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.tbl th {
  padding: 10px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  white-space: nowrap;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tbl .num {
  text-align: right;
  color: var(--text);
}
.tbl .dim {
  color: var(--muted);
}
.st {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.st::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.st--warn {
  color: #ffb070;
}
.st--warn::before {
  background: var(--accent-hover);
}
.sample {
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}


/* ---------- Ancla provisional del agendador ---------- */
.stub {
  padding-block: 120px;
  text-align: center;
}
.stub__text {
  margin-top: 12px;
  color: var(--muted);
}

/* ==========================================================================
   Entrada suave
   ========================================================================== */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.hero__copy > *,
.logos,
.band,
.app {
  animation: rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero__copy > :nth-child(2) { animation-delay: 60ms; }
.hero__copy > :nth-child(3) { animation-delay: 120ms; }
.hero__copy > :nth-child(4) { animation-delay: 180ms; }
.logos { animation-delay: 260ms; }
.band { animation-delay: 320ms; }
.app { animation-delay: 420ms; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 700px) {
  :root {
    --gutter: 20px;
    --bar-h: 60px;
  }
  body {
    font-size: 16px;
  }
  .hero {
    padding: 36px 8px 0;
  }
  .hero__copy {
    padding-inline: 12px;
  }
  .hero__lead {
    font-size: 17.5px;
  }
  .cta {
    align-items: stretch;
  }
  .cta__risk {
    flex-wrap: nowrap;
    font-size: 12.5px;
  }
  .cta__risk span + span::before {
    margin-inline: 6px;
  }
  .logos {
    margin-top: 40px;
  }
  .marquee__group {
    gap: 28px;
    padding-right: 28px;
  }
  .marquee__group span {
    width: 108px;
  }
  .band {
    height: 220px;
  }
  .app {
    margin-top: -110px;
  }
  .logo__text {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  .marquee__group[aria-hidden="true"] {
    display: none;
  }
}



/* ===== secciones.css ===== */
/* ==========================================================================
   Exploración de la sección 3 · Beneficios. Cinco acomodos.
   Mismas reglas del hero: sin vidrio, sin brillos, sin degradados de adorno.
   Se apoya en landing.css (tokens, barra, .tag, .tbl, .st, .sample).
   ========================================================================== */
:root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; }

.sec { padding-block: 112px 140px; }
.sec__head { max-width: 760px; }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__title {
  margin-top: 22px; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(34px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -0.04em;
}
.sec__title span { color: rgba(245, 243, 238, 0.46); }
.sec__lead { margin-top: 20px; max-width: 34em; font-size: 18.5px; color: var(--text-soft); }
.sec__head--center .sec__lead { margin-inline: auto; }

p.num, span.num { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; color: var(--muted); }
.h3 { font-family: var(--font-head); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; }
.p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-soft); max-width: 30em; }
.pts { margin-top: 22px; display: grid; gap: 10px; font-size: 15px; color: var(--text-soft); }
.pts li { display: flex; align-items: center; gap: 12px; }
.pts li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }

/* ---------- Visuales de producto reusables ---------- */
.vis {
  position: relative; border: 1px solid var(--line); border-radius: 16px; background: #131310;
  padding: 26px; text-align: left; overflow: hidden;
}
.vis__cap { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* barras: muestra vs todo */
.cmp { margin-top: 26px; display: grid; gap: 22px; }
.cmp__row p { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-soft); }
.cmp__row b { font-family: var(--font-head); font-weight: 400; font-size: 26px; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.cmp__bar { margin-top: 10px; height: 10px; border-radius: 2px; background: rgba(245,243,238,.08); }
.cmp__bar i { display: block; height: 100%; border-radius: 2px; background: rgba(245,243,238,.35); }
.cmp__row--us .cmp__bar i { background: var(--text); }
.cmp__row--us b { color: var(--accent-soft); }

/* 30 rayitas con hitos */
.days { margin-top: 26px; }
.days__t { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.days__t i { height: 34px; border-radius: 2px; background: rgba(245,243,238,.09); }
.days__t i.on { background: var(--text); }
.days__t i.mk { background: var(--accent); }
.days__l { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.days__l span:nth-child(2) { text-align: center; } .days__l span:nth-child(3) { text-align: right; }
.days__l b { display: block; margin-bottom: 4px; font-weight: 400; color: var(--text); }

/* hoja del informe */
.paper { width: min(100%, 300px); aspect-ratio: 1 / 1.28; margin-inline: auto; padding: 26px 24px 20px;
  border-radius: 4px; background: linear-gradient(180deg, #fbf9f4, #f1eee6); color: #1e1e1a;
  display: flex; flex-direction: column; transform: rotate(1.6deg);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.9); }
.paper__k { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: #7a786f; }
.paper__t { margin-top: 18px; font-family: var(--font-head); font-size: 23px; line-height: 1; letter-spacing: -0.03em; }
.paper__r { margin-top: 16px; border-top: 1px solid #1e1e1a; font-size: 10.5px; }
.paper__r li { display: flex; justify-content: space-between; padding-block: 7px; border-bottom: 1px solid #d6d4cc; }
.paper__r li span:last-child { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #1a4a1a; }
.paper__r li.w span:last-child { color: #b85510; }
.paper__s { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.paper__s svg { width: 120px; height: 40px; fill: none; stroke: #1e1e1a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.paper__s p { padding-top: 4px; border-top: 1px solid #1e1e1a; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: #4a4840; }
.paper__seal { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #a8923c; outline: 1px solid #a8923c; outline-offset: 3px;
  display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 5.5px; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: #5c4a20; transform: rotate(-12deg); }

/* programa de trabajo con estados (mockup de la metodología) */
.wp { margin-top: 14px; }
.wp li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text-soft); }
.wp li:last-child { border-bottom: 0; }
.wp .code { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.wp .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st--dim { color: var(--muted); }
.st--dim::before { background: var(--faint); }
.mini .wp { margin: 0; padding: 2px 16px 6px; }
.mini .wp li { font-size: 12.5px; padding: 10px 0; gap: 10px; grid-template-columns: 40px minmax(0, 1fr) auto; }

/* lista corta de hallazgos */
.vis .tbl { margin-top: 14px; }
.vis .tbl th:first-child, .vis .tbl td:first-child { padding-left: 0; }
.vis .tbl th:last-child, .vis .tbl td:last-child { padding-right: 0; }

/* ---------- Selector, sólo para revisar ---------- */
.switch { position: fixed; left: 50%; bottom: 18px; z-index: 90; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(20,20,16,.94); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); font-size: 13px; }
.switch a { padding: 8px 14px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.switch a[aria-current="page"] { background: var(--text); color: var(--bg); }
.note { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 700px) { .sec { padding-block: 72px 120px; } .h3 { font-size: 25px; } .switch { font-size: 11.5px; } .switch a { padding: 7px 9px; } }

/* ===== prueba.css ===== */
/* ==========================================================================
   Exploración de secciones 4 (números) y 5 (testimonios + botón de media página).
   Nombres, citas y cifras de clientes van como marcadores: nada inventado.
   ========================================================================== */
.ph { color: var(--faint); }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-hi);
  border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.who { display: flex; align-items: center; gap: 12px; }
.who b { display: block; font-weight: 500; font-size: 14.5px; color: var(--text); }
.who span { font-size: 13px; color: var(--muted); }
.stars { letter-spacing: 3px; font-size: 13px; color: var(--accent-soft); }

/* Botón de media página (compartido) */
.mid { margin-top: 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.mid__t { font-family: var(--font-head); font-size: 26px; letter-spacing: -0.03em; }
.mid .cta__risk { justify-content: center; }

/* ---------- A · Banda de números + tres tarjetas "número + cita" ---------- */
.nums { border-block: 1px solid var(--line); }
.nums__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.nums__row div { padding: 44px 28px; }
.nums__row div + div { border-left: 1px solid var(--line); }
.nums__row b { display: block; font-family: var(--font-head); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.nums__row b small { font-size: 0.45em; letter-spacing: -0.02em; color: var(--muted); margin-left: 4px; }
.nums__row p { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.tcards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcard { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #0f0f0d; }
.tcard__n { font-family: var(--font-head); font-size: 44px; line-height: 1; letter-spacing: -0.04em; color: var(--accent-soft); }
.tcard__n small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0; color: var(--muted); }
.tcard__q { margin: 26px 0 28px; font-size: 17px; line-height: 1.5; color: var(--text-soft); flex: 1; }
.tcard .who { padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- B · Una cita grande con retrato + números pegados ---------- */
.big { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #0f0f0d; }
.big__pic { position: relative; min-height: 460px; background: linear-gradient(180deg, #24241f, #161613); display: grid; place-items: center; }
.big__pic span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: center; line-height: 1.6; border: 1px dashed var(--line-strong); padding: 10px 14px; border-radius: 10px; }
.big__txt { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px 52px; }
.big__q { font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -0.03em; }
.big__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dots { display: flex; gap: 6px; } .dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(245,243,238,.16); } .dots i.on { background: var(--text); }
.big__nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); grid-column: 1 / -1; }
.big__nums div { padding: 26px 32px; } .big__nums div + div { border-left: 1px solid var(--line); }
.big__nums b { font-family: var(--font-head); font-weight: 400; font-size: 34px; letter-spacing: -0.04em; }
.big__nums p { margin-top: 4px; font-size: 14px; color: var(--muted); }

/* ---------- C · Muro de reseñas con números en el encabezado ---------- */
.inline { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; font-size: 15px; color: var(--text-soft); }
.inline span { padding-inline: 20px; } .inline span + span { border-left: 1px solid var(--line-strong); }
.inline b { font-weight: 500; color: var(--text); margin-right: 6px; }
.wall { position: relative; margin-top: 56px; columns: 3; column-gap: 16px; max-height: 760px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.rev { break-inside: avoid; margin-bottom: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #0f0f0d; }
.rev__q { margin: 14px 0 20px; font-size: 15.5px; line-height: 1.5; color: var(--text-soft); }
.wall + .mid { margin-top: -90px; position: relative; z-index: 2; }

@media (max-width: 900px) {
  .nums__row { grid-template-columns: repeat(2, 1fr); } .nums__row div:nth-child(3) { border-left: 0; } .nums__row div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tcards { grid-template-columns: 1fr; } .big { grid-template-columns: 1fr; } .big__pic { min-height: 260px; } .big__txt { padding: 32px 24px; }
  .big__nums { grid-template-columns: 1fr; } .big__nums div + div { border-left: 0; border-top: 1px solid var(--line); }
  .wall { columns: 1; max-height: 900px; } .inline span + span { border-left: 0; }
}

/* ===== secciones-b.css ===== */
/* ==========================================================================
   Secciones 6 (la diferencia), 7 (cómo funciona) y 10 (preguntas).
   ========================================================================== */

/* ---------- 6 · La diferencia: la única banda de otro tono ---------- */
.diff { background: var(--bg-raise); border-block: 1px solid var(--line); }
.diff .sec__head { max-width: 820px; }
.cmpt { margin-top: 56px; border-top: 1px solid var(--line-strong); }
.cmpt__h, .cmpt__r { display: grid; grid-template-columns: 1.1fr 1fr 1.25fr; gap: 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cmpt__h { padding-block: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmpt__h span:last-child { color: var(--accent-soft); }
.cmpt__r .k { font-size: 16px; color: var(--text-soft); }
.cmpt__r .old { font-size: 16.5px; color: var(--muted); }
.cmpt__r .new { font-family: var(--font-head); font-size: 25px; line-height: 1.12; letter-spacing: -0.03em; }

.people { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.people__pic { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong);
  background: linear-gradient(0deg, rgba(10,10,8,.55), rgba(10,10,8,.1)), url("/lp/auditoria/img/escena.webp") 20% 60% / 160% no-repeat; }
.people__pic span { position: absolute; left: 16px; bottom: 16px; padding: 7px 11px; border: 1px dashed rgba(245,243,238,.45); border-radius: 10px;
  background: rgba(10,10,8,.5); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,243,238,.8); }
.split { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.split div { padding: 20px 22px; } .split div + div { border-left: 1px solid var(--line); }
.split p.num { margin-bottom: 8px; }
.split b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 20px; letter-spacing: -0.03em; }
.split ul { margin-top: 12px; display: grid; gap: 6px; font-size: 14.5px; color: var(--text-soft); }
.split div:last-child p.num { color: var(--accent-soft); }

/* ---------- 7 · Cómo funciona: cuatro pasos con conector ---------- */
.steps { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--line-strong); }
.step { position: relative; padding: 0 28px 0 0; }
.step + .step { padding-left: 28px; }
.step__n { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--bg); font-family: var(--mono); font-size: 12px; color: var(--text); }
.step:first-child .step__n { background: var(--accent); border-color: var(--accent); color: #0a0a08; }
.step .h3 { margin-top: 22px; font-size: 22px; }
.step .p { font-size: 15.5px; margin-top: 10px; }
.step__meta { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- 10 · Preguntas: acordeón ---------- */
.faq { max-width: 760px; margin: 56px auto 0; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-family: var(--font-head); font-size: 20px; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: var(--mono); font-size: 15px; color: var(--muted); transition: transform 160ms ease; }
.faq details[open] summary::after { content: "−"; color: var(--text); }
.faq details p { margin: -6px 0 24px; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--text-soft); }
.faq summary:hover { color: var(--accent-soft); }

@media (max-width: 900px) {
  .cmpt__h { display: none; } .cmpt__r { grid-template-columns: 1fr; gap: 6px; }
  .people { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }
  .split { grid-template-columns: 1fr; } .split div + div { border-left: 0; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; gap: 36px; } .steps::before { display: none; }
  .step, .step + .step { padding: 0; }
  .faq summary { font-size: 18px; }
}

/* ===== secciones-c.css ===== */
/* ==========================================================================
   Secciones 8 (para quién es), 9 (sellos), 11 (cierre + agendador) y 12 (footer).
   ========================================================================== */

/* ---------- 8 · Para quién es ---------- */
.who-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.who-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: #0f0f0d; display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--text-soft); }
.who-card svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Tres tarjetas iguales (patrón Ramp): sin borde, un tono arriba del fondo,
   la pieza de producto centrada adentro y el texto afuera, abajo. */
.who3 { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.who3__card { height: 440px; padding: 32px; border-radius: 18px; background: var(--bg-raise); display: grid; place-items: center; overflow: hidden; }
.who3__k { margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.who3 .h3 { margin-top: 10px; font-size: 24px; }
.who3 .p { margin-top: 10px; font-size: 16px; }
.who3 .paper { width: 250px; transform: rotate(1.6deg); }
/* Ventana chica de la app, siempre oscura, sirva en fondo claro u oscuro. */
.mini {
  --text: #f5f3ee; --text-soft: #c9c7bf; --muted: #8f8d84; --faint: #5c5a53;
  --line: rgba(245, 243, 238, 0.1); --line-strong: rgba(245, 243, 238, 0.16);
  width: 100%; max-width: 330px; border-radius: 12px; overflow: hidden; color: var(--text);
  background: #131310; border: 1px solid rgba(245, 243, 238, 0.14); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.mini .app__head { padding: 14px 16px; }
.mini .app__title { font-size: 15px; }
.mini .app__title span { margin-left: 8px; font-size: 12px; }
.mini .tbl td { padding: 11px 16px; font-size: 13px; }
.mini__body { padding: 18px 16px 16px; }
.mini .days { margin-top: 0; }
.mini .days__t i { height: 28px; }
.mini .days__l { font-size: 9.5px; }
.qualify { margin: 48px auto 0; max-width: 760px; padding: 22px 26px; border-left: 2px solid var(--accent); font-size: 17px; line-height: 1.5; color: var(--text); }
.qualify .ph { color: var(--faint); }

/* ---------- 9 · Sellos ---------- */
.seals { padding-block: 40px; border-block: 1px solid var(--line); }
.seals .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
.seals__t { font-size: 15px; color: var(--muted); max-width: 32em; }
.seals__row { display: flex; flex-wrap: wrap; gap: 12px; }
.seals__row span { display: grid; place-items: center; height: 44px; padding-inline: 18px; border: 1px dashed var(--line-strong); border-radius: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* ---------- 11 · Cierre con agendador ---------- */
.close { padding-block: 120px 96px; text-align: center; }
.close .sec__title { font-size: clamp(38px, 4.6vw, 64px); }
.close__proof { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 14.5px; color: var(--text-soft); }
.close__proof li { display: inline-flex; align-items: center; gap: 8px; }
.close__proof li::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.cal { margin: 48px auto 0; max-width: 1080px; min-height: 640px; border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; background: #0f0f0d; }
.cal > div { min-height: 640px; }
/* Mientras Cal.com carga (se pide al acercarse), el recuadro dice que viene en camino. */
.cal { position: relative; }
.cal::before { content: attr(data-loading); position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--muted); }
.cal > div { position: relative; z-index: 1; }

/* ---------- 12 · Footer: ahora vive en pie.css ---------- */

@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; }
  .who3 { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .who3__card { height: 380px; padding: 24px; }
  .seals .wrap { grid-template-columns: 1fr; gap: 20px; }
  .close { padding-block: 80px 64px; }
  .cal, .cal > div { min-height: 720px; }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
}

/* ===== hero-producto.css ===== */
/* ==========================================================================
   Variante de hero: captura real del producto montada sobre la foto.
   Referencia: Papermark (ventana de la app dentro de un marco oscuro), Ramp
   (la ventana se asoma y se corta por abajo).
   ========================================================================== */
.shot {
  position: relative;
  width: min(1180px, 100%);
  height: 620px;
  margin: 64px auto 0; /* sin la fila de logos (quitada 2026-09-22 hasta tener logos reales) el marco necesita su propio aire */
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(0deg, rgba(10, 10, 8, 0.7), rgba(10, 10, 8, 0.2)),
    url("/lp/auditoria/img/escena-1200.webp") center 70% / cover no-repeat;
}
.shot__app {
  position: absolute;
  left: 50%;
  top: 64px;
  width: min(1040px, 90%);
  transform: translateX(-50%);
  border-radius: 14px;
  border: 1px solid rgba(245, 243, 238, 0.22);
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 60px 120px -30px rgba(0, 0, 0, 0.95),
    0 20px 40px -20px rgba(0, 0, 0, 0.8);
}
.shot__app img {
  display: block;
  width: 100%;
  height: auto;
}
/* Etiqueta chica sobre la ventana, como el "Datos de muestra" de la tabla */
.shot__tag {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 2;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(10, 10, 8, 0.6);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  color: var(--text-soft);
}
@media (max-width: 700px) {
  .shot { height: 420px; border-radius: 20px;
    background-image: linear-gradient(0deg, rgba(10, 10, 8, 0.7), rgba(10, 10, 8, 0.2)), url("/lp/auditoria/img/escena-800.webp"); }
  .shot__app { top: 40px; width: 94%; border-radius: 10px; }
}

/* ===== claro.css ===== */
/* ==========================================================================
   Secciones claras. Patrón de Papermark: hero oscuro → un bloque claro
   (crema, luego un gris claro) → el resto oscuro hasta el cierre.
   Una sección se vuelve clara con la clase .light; .light--alt es el segundo
   tono. Sólo se cambian los tokens; las piezas siguen siendo las mismas.
   Las imágenes de producto (.vis) se quedan oscuras adentro del bloque claro.
   ========================================================================== */
.light {
  --bg: #f5f3ee;
  --bg-raise: #ecebe6;
  --surface: #ffffff;
  --surface-hi: #e6e4dd;
  --text: #1e1e1a;
  --text-soft: #4a4840;
  --muted: #7a786f;
  --faint: #a8a69d;
  --line: rgba(30, 30, 26, 0.1);
  --line-strong: rgba(30, 30, 26, 0.18);
  background: var(--bg);
  color: var(--text);
}
.light--alt {
  --bg: #ecebe6;
}
.light .tag {
  background: rgba(30, 30, 26, 0.06);
}
.light .sec__title span {
  color: rgba(30, 30, 26, 0.42);
}
.light .row::before {
  background: linear-gradient(90deg, transparent, rgba(30, 30, 26, 0.12) 18%, rgba(30, 30, 26, 0.12) 82%, transparent);
}

/* Imagen de producto: recupera el tema oscuro dentro de la sección clara. */
.light .vis {
  --text: #f5f3ee;
  --text-soft: #c9c7bf;
  --muted: #8f8d84;
  --faint: #5c5a53;
  --line: rgba(245, 243, 238, 0.1);
  --line-strong: rgba(245, 243, 238, 0.16);
  color: var(--text);
  border-color: rgba(30, 30, 26, 0.12);
}

/* Para quién es: tarjetas blancas sobre crema. */
.light .who-card {
  background: var(--surface);
}
.light .who-card svg {
  stroke: var(--text);
}
.light.seals {
  border-block: 1px solid var(--line);
}

/* Testimonio sin foto todavía: monograma grande en lugar del retrato. */
.big__mono {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 128px);
  letter-spacing: -0.06em;
  color: rgba(30, 30, 26, 0.22);
}

/* Testimonio: la tarjeta pasa a blanco sobre el gris claro. */
.light .big {
  background: var(--surface);
}
.light .big__pic {
  background: linear-gradient(180deg, #e9e7e0, #d8d6ce);
}
.light .big__pic span {
  color: var(--muted);
}
.light .avatar {
  background: var(--surface-hi);
}
.light .dots i {
  background: rgba(30, 30, 26, 0.14);
}
.light .dots i.on {
  background: var(--text);
}

/* ===== como.css ===== */
/* ==========================================================================
   7 · Cómo funciona — rediseño (2026-09-21).
   Patrón de Agiloft ("01 Move Faster · 02 Decide Smarter · 03 Improve
   Continuously"): pestañas numeradas arriba a la izquierda, la activa con
   subrayado naranja, y abajo un panel con titular + párrafo a la izquierda y
   la captura real del producto a la derecha, asomándose por la esquina.
   Mismo sistema: negros cálidos, crema, un solo naranja, líneas finas.
   ========================================================================== */
.tabs {
  margin-top: 56px;
  display: flex;
  gap: 40px;
  border-bottom: 1px solid var(--line);
  overflow: visible; /* antes overflow-x:auto: el margen de -1px de las pestañas creaba un scroll vertical de 1px (Andrés, 2026-09-22) */
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 18px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.tab .code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.tab:hover { color: var(--text-soft); }
.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.tab[aria-selected="true"] .code { color: var(--accent-soft); }

.panel {
  position: relative;
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  min-height: 520px;
  padding: 48px 0 48px 48px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-raise);
  overflow: hidden;
}
.panel[hidden] { display: none; }
.panel .h3 { font-size: 32px; }
.panel .p { margin-top: 16px; font-size: 17px; }
.panel__meta {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* La ventana de la app se asoma por la esquina inferior derecha del panel. */
.panel__shot {
  align-self: end;
  justify-self: end;
  width: 100%;
  margin-bottom: -48px;
  border: 1px solid rgba(245, 243, 238, 0.2);
  border-right: 0;
  border-bottom: 0;
  border-radius: 14px 0 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.9);
}
/* Las tres capturas miden lo mismo aunque el archivo original no: caja fija
   16:10 y la imagen recortada desde la esquina superior izquierda. */
.panel__shot { aspect-ratio: 16 / 10; }
.panel__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---------- 6b · Implementación: tres columnas sobre una hairline ---------- */
.impl__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid var(--line-strong);
}
.impl__grid > div { padding-top: 28px; }
.impl__grid .h3 { margin-top: 12px; font-size: 24px; }
.impl__grid .p { margin-top: 10px; font-size: 15.5px; }
@media (max-width: 900px) {
  .impl__grid { grid-template-columns: 1fr; gap: 0; }
  .impl__grid > div { padding-block: 24px; border-bottom: 1px solid var(--line); }
  .impl__grid > div:last-child { border-bottom: 0; }
}

.como__note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
.como__note b { font-weight: 500; color: var(--text-soft); }

@media (max-width: 900px) {
  .tabs { gap: 28px; margin-top: 40px; }
  .panel {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    padding: 28px 0 0 24px;
    border-radius: 16px;
  }
  .panel .h3 { font-size: 25px; padding-right: 24px; }
  .panel .p { padding-right: 24px; }
  .panel__shot { margin: 8px 0 0; width: calc(100% - 0px); border-radius: 12px 0 0 0; }
}

/* ===== motion.css ===== */
/* ==========================================================================
   Capa de movimiento de la v1 (2026-09-21). Lo que hacen Rulebase, Agiloft,
   Papermark y Amperos: hero que entra palabra por palabra, bloques que
   aparecen al bajar, pestañas que avanzan solas con barra de progreso,
   transiciones cortas en todo lo que se toca. Sin puntos que laten, sin
   cambios de color del texto, sin degradados. Sin JS nada se oculta:
   las clases de reveal las pone motion.js.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- Barra: entra con el hero ---------- */
.bar { animation: bar-fade 700ms ease-out both; }
@keyframes bar-fade { from { opacity: 0; } }

/* ---------- Hero: titular palabra por palabra, el resto en cascada ---------- */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .w > span {
  display: inline-block;
  transform: translateY(110%);
  animation: word-rise 850ms var(--ease-out) both;
  animation-delay: calc(80ms + var(--i) * 45ms);
}
@keyframes word-rise { to { transform: translateY(0); } }
.hero__copy > .hero__title { animation: none; }
.hero__copy > .tag { animation-delay: 0ms; }
.hero__copy > .hero__lead { animation-delay: 420ms; }
.hero__copy > .cta { animation-delay: 520ms; }
.logos { animation-delay: 640ms; }
.shot { animation: shot-in 900ms var(--ease-out) 560ms both; }
@keyframes shot-in { from { opacity: 0; transform: translateY(24px) scale(0.985); } }

/* ---------- Logos: más lento ---------- */
.marquee__track { animation-duration: 64s; }

/* ---------- Reveal al bajar (la clase .rv la pone motion.js) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }
.rv.in.done { will-change: auto; }

/* ---------- Transiciones en lo que se toca ---------- */
.btn { transition: background-color 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft), transform 220ms var(--ease-soft); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.who3__card { transition: background-color 260ms var(--ease-soft); }
.who3 > div:hover .who3__card { background: #e6e4dd; }
.cmpt__r { transition: background-color 200ms var(--ease-soft); }
.cmpt__r:hover { background: rgba(245, 243, 238, 0.025); }
.faq summary { transition: color 200ms var(--ease-soft); }
.faq details[open] > p { animation: fade-in 360ms var(--ease-soft) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } }
.foot__links a { transition: color 200ms var(--ease-soft); }
.tab { transition: color 200ms var(--ease-soft), border-color 200ms var(--ease-soft); }

/* ---------- Pestañas: avanzan solas con barra de progreso ---------- */
.tab { position: relative; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.tabs.auto .tab[aria-selected="true"] { border-bottom-color: rgba(224, 106, 16, 0.25); }
.tabs.auto .tab[aria-selected="true"]::after { animation: tab-progress var(--tab-ms, 7000ms) linear both; }
@keyframes tab-progress { to { transform: scaleX(1); } }
.panel { animation: panel-in 420ms var(--ease-soft) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero__title .w > span { transform: none; animation: none; }
  .shot, .bar, .panel { animation: none; }
}

/* ===== piezas.css ===== */
/* ==========================================================================
   Piezas de producto (2026-09-21). Siete mockups distintos, al estilo de las
   tarjetas de Rulebase, Amperos y Agiloft: tarjeta blanca con detalle, sobre
   un panel claro. Chat con el agente, bitácora, línea de tiempo, hoja con
   resultados, cifras, biblioteca de metodologías y hallazgo con gráfica.
   Un solo naranja; verde y gris sólo como estado.
   ========================================================================== */

/* Panel claro donde flota la pieza (filas de beneficios) */
.pz { height: 460px; padding: 28px; border-radius: 18px; background: #ecebe6; display: grid; place-items: center; overflow: hidden; }
.light--alt .pz { background: #e4e2db; }

/* Tarjeta base */
.card { width: 100%; max-width: 400px; background: #fff; border-radius: 14px; border: 1px solid rgba(30, 30, 26, 0.08); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.05); color: #1e1e1a; font-size: 14px; line-height: 1.4; overflow: hidden; text-align: left; }
.card small { display: block; font-size: 12.5px; color: #7a786f; }
.card__h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(30, 30, 26, 0.08); }
.card__h b { font-weight: 500; }
.card__h .pill { margin-left: auto; }
.av { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #1e1e1a; display: grid; place-items: center; color: #fff; font-family: var(--mono); font-size: 10px; }
.av--agent { background: var(--accent); }
.av--agent::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff8f0; }
.av--logo { background: #1e1e1a; }
.av--logo::before { content: ""; width: 12px; height: 12px; background: radial-gradient(circle, #fff 45%, transparent 48%) 0 0 / 6px 6px; }
.av--xls { background: #1f8a4c; font-weight: 600; }
.pill { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #4a4840; background: #f0eee8; white-space: nowrap; }
.pill--soft { color: #8a3f08; background: #fde9d9; }
.pill--ok { color: #1f6a34; background: #e3f2e6; }
.pill--agent { color: #8a3f08; background: #fde9d9; }
.ink { padding: 8px 14px; border: 0; border-radius: 7px; background: #1e1e1a; color: #fff; font: inherit; font-size: 13px; font-weight: 500; }
.ghost { padding: 8px 14px; border: 1px solid rgba(30, 30, 26, 0.16); border-radius: 7px; background: #fff; color: #1e1e1a; font: inherit; font-size: 13px; }

/* Dos tarjetas apiladas (Amperos) */
.stack { width: 100%; max-width: 400px; display: grid; gap: 10px; }
.card--mini { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.card--mini b { display: block; font-weight: 500; }
.card--mini.card--ok b { color: #1f6a34; }
.card--mini .av--ok { background: #1f6a34; }
.card--mini .av--ok::before { content: "✓"; color: #fff; font-size: 12px; }

/* 1 · Chat con el agente (Rulebase) */
.chat { padding-bottom: 14px; }
.chat__b { margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px; background: #f4f3ef; max-width: 88%; font-size: 14px; }
.chat__b--me { margin-left: auto; background: #1e1e1a; color: #fff; border-bottom-right-radius: 4px; }
.chat__b--ai { border-bottom-left-radius: 4px; }
.chat__in { margin: 14px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid rgba(30, 30, 26, 0.12); border-radius: 10px; color: #8f8d84; }
.chat__in i { width: 30px; height: 30px; border-radius: 7px; background: #1e1e1a; position: relative; }
.chat__in i::before { content: "↑"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-style: normal; }

/* 2 · Bitácora del agente (Amperos) */
.log__h, .log__r { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; }
.log__h { font-size: 12.5px; color: #7a786f; border-bottom: 1px solid rgba(30, 30, 26, 0.08); }
.log__r { border-bottom: 1px solid rgba(30, 30, 26, 0.06); }
.log__r:last-child { border-bottom: 0; }
.log__r > span:first-child { font-family: var(--mono); font-size: 12px; color: #7a786f; }

/* 3 · Línea de tiempo (Amperos / Rulebase) */
.tl { padding: 8px 16px 12px; }
.tl__r { position: relative; display: flex; gap: 14px; padding: 10px 0 10px 24px; }
.tl__r::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(30, 30, 26, 0.12); }
.tl__r:first-child::before { top: 18px; }
.tl__r:last-child::before { bottom: auto; height: 18px; }
.tl__r i { position: absolute; left: 2px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #c6c3ba; }
.tl__r.done i { background: #3f9d3f; }
.tl__r.now i { background: var(--accent); box-shadow: 0 0 0 3px #fde9d9; }
.tl__r b { display: block; font-weight: 500; }

/* 4 · Hoja con resultados + aprobar (Agiloft) */
.sheet table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sheet th { padding: 8px 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #7a786f; text-align: right; background: #faf9f6; border-bottom: 1px solid rgba(30, 30, 26, 0.08); }
.sheet th:first-child, .sheet td:first-child { text-align: left; }
.sheet td { padding: 9px 12px; text-align: right; border-bottom: 1px solid rgba(30, 30, 26, 0.06); color: #4a4840; }
.sheet td:first-child { color: #1e1e1a; }
.sheet td.hot { color: #b85510; background: #fff3ea; font-weight: 500; }
.sheet__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #faf9f6; border-top: 1px solid rgba(30, 30, 26, 0.08); color: #7a786f; font-size: 13px; }

/* 5 · Cifras (Rulebase) */
.stats { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 16px 16px 14px; }
.stat b { display: block; margin-top: 18px; font-family: var(--font-head); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.stat b.hot { color: var(--accent); }
.stat span { display: block; margin-top: 6px; font-size: 12.5px; color: #7a786f; }
.stat--wide { grid-column: 1 / -1; }

/* 6 · Biblioteca de metodologías */
.list__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(30, 30, 26, 0.06); }
.list__r:last-child { border-bottom: 0; }
.list__r b { grid-column: 1; font-weight: 500; }
.list__r small { grid-column: 1; }
.list__r .pill { grid-column: 2; grid-row: 1 / span 2; }

/* 7 · Hallazgo con gráfica y acciones (Rulebase) */
.issue { padding: 16px 16px 14px; }
.issue > b { display: block; font-weight: 500; }
.issue > p { margin-top: 6px; font-size: 13.5px; color: #4a4840; }
.issue > small { margin-top: 8px; }
.issue__chart { margin-top: 14px; height: 64px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; border-bottom: 1px solid rgba(30, 30, 26, 0.12); }
.issue__chart i { display: block; background: #d9d7cf; border-radius: 2px 2px 0 0; }
.issue__chart i.hot { background: var(--accent); }
.issue__m { margin-top: 6px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8d84; }
.issue__a { margin-top: 14px; display: flex; gap: 8px; }

@media (max-width: 900px) {
  .pz { height: auto; min-height: 0; padding: 22px; }
}

/* ===== llamada.css ===== */
/* ==========================================================================
   10b · Llamada final — tarjeta naranja después de las preguntas (2026-09-21).
   Una sola tarjeta redondeada sobre el fondo oscuro: degradados naranjas
   difuminados que se mueven muy despacio, grano fino, titular en pregunta,
   botón de tinta. Sin tira de pasos ni "sin compromiso" (Andrés los quitó).
   ========================================================================== */
.llamada { padding-block: 0 112px; }
.llamada__card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px;
  padding: 104px 40px;
  text-align: center;
  color: #fff8f0;
  background-color: #c4560b;
  background-image:
    radial-gradient(90% 70% at 15% 20%, #f7a457 0%, rgba(247, 164, 87, 0) 60%),
    radial-gradient(70% 60% at 85% 80%, #ffd7a3 0%, rgba(255, 215, 163, 0) 55%),
    radial-gradient(80% 90% at 55% 15%, #e06a10 0%, rgba(224, 106, 16, 0) 65%),
    radial-gradient(60% 50% at 90% 10%, #8a3306 0%, rgba(138, 51, 6, 0) 60%);
}
/* Grano fino, como foto desenfocada. */
.llamada__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Dos manchas de luz que derivan despacio. */
.llamada__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.llamada__bg span {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  filter: blur(80px); opacity: 0.85; will-change: transform;
}
.llamada__bg span:first-child { width: 52%; left: -12%; top: -34%; background: #ffc27a; animation: llamada-a 26s ease-in-out infinite alternate; }
.llamada__bg span:last-child { width: 62%; right: -20%; bottom: -44%; background: #8a2f05; animation: llamada-b 30s ease-in-out infinite alternate; }
@keyframes llamada-a { to { transform: translate(14%, 18%) scale(1.12); } }
@keyframes llamada-b { to { transform: translate(-12%, -16%) scale(1.08); } }

.llamada__in { position: relative; max-width: 860px; margin-inline: auto; }
.llamada .tag { background: rgba(255, 248, 240, 0.16); color: #fff8f0; }
.llamada .tag i { background: #fff8f0; }
.llamada__title {
  margin: 26px auto 0; max-width: 22ch;
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.04em;
}
.llamada__lead { margin: 22px auto 0; max-width: 32em; font-size: 18.5px; line-height: 1.5; color: rgba(255, 248, 240, 0.86); }
.llamada .btn { margin-top: 36px; }

/* Botón de tinta: sobre naranja el botón naranja desaparece. */
.btn--ink {
  background: #1e1e1a; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 34px -12px rgba(40, 20, 4, 0.7);
}
.btn--ink:hover {
  background: #2b2b25;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 40px -12px rgba(40, 20, 4, 0.75);
}

@media (max-width: 900px) {
  .llamada { padding-block: 0 80px; }
  .llamada__card { border-radius: 22px; padding: 72px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .llamada__bg span { animation: none; }
}

/* ===== pie.css ===== */
/* ==========================================================================
   12 · Pie — tarjeta clara que sube desde el borde de abajo (2026-09-21).
   Como el pie de Unify pero mínimo, a pedido de Andrés: sólo la marca grande
   con el nombre, Legal (aviso y términos del sitio principal), Contacto
   (agenda una demo, hi@truefoldhq.com) y el ©. Sin frase, sin sitio web,
   sin redes. Al entrar en pantalla la tarjeta sube desde el borde inferior,
   como la captura del hero.
   ========================================================================== */
.foot { padding: 0; overflow: hidden; }
.foot__card {
  background: #f5f3ee; color: #1e1e1a;
  border-radius: 28px 28px 0 0;
  padding: 56px 48px 32px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 40px 80px; align-items: start;
}
.foot__brand { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 32px; }
.foot__logo { display: inline-flex; align-items: center; gap: 14px; color: #1e1e1a; }
.foot__logo svg { width: 56px; height: 56px; fill: currentColor; }
.foot__logo span { font-family: var(--font-logo); font-size: 46px; letter-spacing: -1.3px; line-height: 1; }
.foot__copy { margin: 0; font-size: 13px; color: #7a786f; }
.foot__h { margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #7a786f; }
.foot__col a { display: block; width: fit-content; padding-block: 5px; font-size: 15.5px; color: #4a4840; transition: color 160ms ease; }
.foot__col a:hover { color: #1e1e1a; }

/* Sube desde abajo (la clase .rv la pone motion.js; .foot oculta lo que asoma por debajo). */
.foot__card.rv { transform: translateY(88px); transition: opacity 950ms var(--ease-out), transform 950ms var(--ease-out); }
.foot__card.rv.in { transform: none; }

@media (max-width: 900px) {
  .foot__card { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 40px 24px 28px; border-radius: 22px 22px 0 0; }
  .foot__brand { grid-column: 1 / -1; align-self: auto; gap: 20px; }
  .foot__logo svg { width: 44px; height: 44px; }
  .foot__logo span { font-size: 36px; letter-spacing: -1px; }
}
@media (prefers-reduced-motion: reduce) {
  .foot__card.rv { transform: none; transition: none; }
}

/* ===== movil.css ===== */
/* ==========================================================================
   Ajustes móviles (2026-09-21). Revisión pantalla por pantalla a 375 px en
   el Chrome de Andrés. Va al final de la cascada para ganar sin subir
   especificidad. Cada bloque dice qué arregla.
   ========================================================================== */
.tab__s { display: none; }

@media (max-width: 700px) {
  /* 1 · Hero: la ventana de la app centrada sobre la foto y el panel más
     bajo (antes la ventana quedaba arriba con 180 px de foto vacía abajo). */
  .shot { height: 300px; width: calc(100% - 24px); }
  .shot__app { top: 50%; width: 92%; transform: translate(-50%, -50%); }

  /* 3 · Bitácora: menos aire para que la columna de acción tenga ancho. */
  .log__h, .log__r { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }

  /* 3 · Hoja WP-5.10: se recortaba la columna de diferencia. Se oculta
     "Contabilidad" y se aprieta el resto; el pie no parte el botón. */
  .sheet table { font-size: 12.5px; }
  .sheet th, .sheet td { padding: 8px 9px; }
  .sheet th:nth-child(3), .sheet td:nth-child(3) { display: none; }
  .sheet__f { flex-wrap: wrap; }
  .sheet__f .ink { white-space: nowrap; }

  /* 4 · Testimonio: el monograma no ocupa media pantalla. */
  .big__pic { min-height: 150px; }

  /* 7 · Cómo funciona: las tres pestañas a la vista con etiqueta corta
     (antes se salían por la derecha y la tercera no se veía). */
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; overflow: visible; }
  .tab { gap: 8px; padding-bottom: 14px; font-size: 15px; }
  .tab__l { display: none; }
  .tab__s { display: inline; }

  /* 8 · Para quién es: la tarjeta crece con su pieza; el hallazgo se
     recortaba por abajo con el alto fijo. */
  .who3__card { height: auto; min-height: 0; padding: 22px; }

  /* 12 · Pie: Legal y Contacto apilados; a dos columnas partían
     "Términos y condiciones" (caben 287 px y piden 321). */
  .foot__card { grid-template-columns: 1fr; gap: 28px; }
  .foot__col a { font-size: 14.5px; }
}

/* ===== porque.css ===== */
/* ==========================================================================
   6 · Por qué TrueFold — tres propuestas (2026-09-22). Andrés: la tabla
   "hoy vs con TrueFold" ya no convence; falta decir que la metodología se
   documenta y versiona en la plataforma (lo que hace un Caseware) y que hay
   un Drive inteligente además del agente. Implementación se pliega aquí.
   V1 .pil  = cuatro pilares en tarjetas 2×2 con captura real + banda "la montamos contigo".
   V2 .edit = editorial: frase fija a la izquierda, lista numerada a la derecha, sin imágenes.
   V3 .one  = una sola captura grande con cuatro etiquetas debajo + banda.
   ========================================================================== */

/* ---------- V1 · Pilares ---------- */
.pil { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pil > div { display: flex; flex-direction: column; min-height: 540px; padding: 32px 32px 0; border-radius: 18px; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; }
.pil .h3 { margin-top: 12px; font-size: 26px; max-width: 16em; }
.pil .p { margin-top: 10px; max-width: 34em; }
.pil__shot { margin-top: 28px; flex: 1; min-height: 230px; border-radius: 12px 12px 0 0; border: 1px solid var(--line-strong); border-bottom: 0; background: #fff; overflow: hidden; }
.pil__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---------- Banda "la montamos contigo" (V1 y V3) ---------- */
.monta { margin-top: 24px; padding: 30px 32px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raise); display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.monta__t { font-family: var(--font-head); font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; }
.monta__t small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 14px; line-height: 1.45; letter-spacing: 0; color: var(--muted); }
.monta b { display: block; margin-top: 8px; font-weight: 500; font-size: 16.5px; line-height: 1.3; }
.monta .s { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- V2 · Editorial ---------- */
.edit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
.edit__st { position: sticky; top: calc(var(--bar-h) + 40px); }
.edit__st .sec__title { max-width: 12em; }
.edit__st > p { margin-top: 20px; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--text-soft); }
.edit__st > p.edit__close { padding-top: 20px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--muted); }
.edit__list { border-top: 1px solid var(--line-strong); }
.edit__list > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.edit__list .num { padding-top: 8px; }
.edit__list .h3 { font-size: 28px; max-width: 16em; }
.edit__list .p { margin-top: 10px; max-width: 36em; }

/* ---------- V3 · Una captura grande ---------- */
.one { margin-top: 56px; }
.one__frame { height: 560px; padding: 28px 28px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: #0f0f0d; overflow: hidden; }
.one__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 12px 12px 0 0; border: 1px solid var(--line-strong); border-bottom: 0; background: #fff; }
.one__labels { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 0 0 22px 22px; background: var(--bg-raise); }
.one__labels > div { padding: 26px 28px 30px; border-left: 1px solid var(--line); }
.one__labels > div:first-child { border-left: 0; }
.one__labels .num { text-transform: uppercase; }
.one__labels b { display: block; margin-top: 10px; font-weight: 500; font-size: 17px; line-height: 1.3; }
.one__labels p:not(.num) { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

@media (max-width: 900px) {
  .pil { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .pil > div { min-height: 0; padding: 24px 22px 0; }
  .pil__shot { min-height: 200px; height: 220px; flex: none; margin-top: 22px; }
  .monta { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .edit { grid-template-columns: 1fr; gap: 40px; }
  .edit__st { position: static; }
  .edit__list > div { grid-template-columns: 40px 1fr; gap: 14px; padding: 24px 0; }
  .edit__list .h3 { font-size: 24px; }
  .one { margin-top: 40px; }
  .one__frame { height: 300px; padding: 16px 16px 0; border-radius: 16px 16px 0 0; }
  .one__labels { grid-template-columns: 1fr; border-radius: 0 0 16px 16px; }
  .one__labels > div { padding: 18px 20px; border-left: 0; border-top: 1px solid var(--line); }
  .one__labels > div:first-child { border-top: 0; }
}

/* ===== testi.css ===== */
/* ==========================================================================
   4 · Testimonio — tres propuestas con la foto en segundo plano (2026-09-22).
   Andrés: menos protagonismo a la imagen de la persona. Referencias: Glide
   (cita grande centrada, avatar chico) y Agiloft (frase grande a la
   izquierda, cita y foto chica a la derecha, comilla naranja).
   V1 .t1 = cita centrada, avatar redondo de 64 px, sin H2.
   V2 .t2 = frase clave en grande a la izquierda, cita completa y foto chica a la derecha.
   V3 .t3 = tarjeta blanca con comilla naranja, cita y pie con avatar y contexto.
   Todas conservan el bloque .mid (botón de media página) debajo.
   ========================================================================== */
.t1, .t2 figure, .t3 { margin: 0; }
.t1 blockquote, .t2 blockquote, .t3 blockquote { margin: 0; }

/* ---------- V1 · Cita centrada ---------- */
.t1 { max-width: 920px; margin: 44px auto 0; text-align: center; }
.t1__q { font-family: var(--font-head); font-weight: 400; font-size: clamp(25px, 3vw, 38px); line-height: 1.22; letter-spacing: -0.03em; color: var(--text); }
.t1__who { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.t1__who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.t1__who b { display: block; font-weight: 500; font-size: 16px; color: var(--text); }
.t1__who span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--muted); }

/* ---------- V2 · Frase grande + cita ---------- */
.t2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.t2__big { margin: 26px 0 0; max-width: 11em; font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -0.04em; color: var(--text); }
.t2__r { padding-top: 8px; }
.t2__q { font-family: var(--font-head); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.32; letter-spacing: -0.02em; color: var(--text-soft); }
.t2__mark { display: block; margin-top: 10px; font-family: var(--font-head); font-size: 72px; line-height: 0.5; color: var(--accent); }
.t2__who { margin-top: 44px; display: flex; align-items: center; gap: 16px; }
.t2__who img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.t2__who b { display: block; font-weight: 500; font-size: 16px; color: var(--text); }
.t2__who span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--muted); }

/* ---------- V3 · Tarjeta con comilla ---------- */
.t3 { position: relative; max-width: 1040px; margin: 56px auto 0; padding: 64px 64px 40px; border-radius: 22px; background: var(--surface); border: 1px solid rgba(30, 30, 26, 0.08); box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.35); }
.t3__mark { position: absolute; top: 28px; left: 56px; font-family: var(--font-head); font-size: 110px; line-height: 1; color: var(--accent); }
.t3__q { position: relative; padding-top: 64px; font-family: var(--font-head); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; letter-spacing: -0.025em; color: var(--text); }
.t3__foot { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(30, 30, 26, 0.1); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.t3__who { display: flex; align-items: center; gap: 14px; }
.t3__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.t3__who b { display: block; font-weight: 500; font-size: 15.5px; color: var(--text); }
.t3__who span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.t3__ctx { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .t1 { margin-top: 32px; }
  .t1__who { margin-top: 30px; }
  .t2 { grid-template-columns: 1fr; gap: 32px; }
  .t2__big { max-width: none; }
  .t2__who { margin-top: 32px; }
  .t3 { margin-top: 40px; padding: 48px 24px 28px; border-radius: 18px; }
  .t3__mark { top: 18px; left: 22px; font-size: 84px; }
  .t3__q { padding-top: 52px; }
  .t3__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ===== equipo.css ===== */
/* ==========================================================================
   6c · Trabajo en equipo (2026-09-22). Andrés: mostrar que los papeles son
   multicolaborativos (varias personas y el agente a la vez), que hay historial
   y versiones, que hay un sistema de tareas por auditoría, y que todo sale en
   Excel, Word y PowerPoint. Sección clara entre "Por qué TrueFold" y "Cómo
   funciona", con la rejilla .who3 y piezas de producto nuevas.
   ========================================================================== */
/* Pieza 1 · hoja con cursores de varias personas y del agente */
.coop { position: relative; width: 100%; max-width: 380px; }
.coop table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.coop th { padding: 7px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7a786f; text-align: right; background: #faf9f6; border-bottom: 1px solid rgba(30, 30, 26, 0.08); }
.coop th:first-child, .coop td:first-child { text-align: left; }
.coop td { padding: 9px 10px; text-align: right; color: #4a4840; border-bottom: 1px solid rgba(30, 30, 26, 0.06); }
.coop td:first-child { color: #1e1e1a; }
.coop td.sel { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.cur { position: absolute; display: inline-flex; align-items: center; gap: 4px; pointer-events: none; }
.cur svg { width: 14px; height: 14px; fill: var(--c); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.cur span { padding: 2px 7px; border-radius: 4px 999px 999px 999px; background: var(--c); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; }
.cur--a { --c: #2f6fdd; }
.cur--b { --c: #8a3fb5; }
.cur--agent { --c: var(--accent); }
.coop td.sel--a { --c: #2f6fdd; }
.coop td.sel--b { --c: #8a3fb5; }
.coop td.sel--agent { --c: var(--accent); }
.coop__f { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #faf9f6; border-top: 1px solid rgba(30, 30, 26, 0.08); font-size: 12px; color: #7a786f; }
.coop__f .av { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; margin-left: -6px; border: 2px solid #fff; }
.coop__f .av:first-child { margin-left: 0; }
.coop__f .av--a { background: #2f6fdd; }
.coop__f .av--b { background: #8a3fb5; }

/* Pieza 2 · historial de versiones */
.ver { width: 100%; max-width: 380px; }
.ver__r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid rgba(30, 30, 26, 0.06); }
.ver__r b { display: block; font-weight: 500; }
.ver__r small { display: block; font-size: 12px; color: #7a786f; }
.ver__r > span:last-child { font-family: var(--mono); font-size: 11px; color: #7a786f; }
.ver__r.now { background: #fffaf5; }
.ver__f { display: flex; justify-content: flex-end; padding: 10px 14px; background: #faf9f6; border-top: 1px solid rgba(30, 30, 26, 0.08); }

/* Pieza 3 · tareas de la auditoría */
.task { width: 100%; max-width: 380px; }
.task__r { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(30, 30, 26, 0.06); font-size: 13.5px; }
.task__r:last-child { border-bottom: 0; }
.task__r i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #c6c3ba; }
.task__r.done i { border-color: #1f6a34; background: #1f6a34; position: relative; }
.task__r.done i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; }
.task__r.done b { color: #7a786f; text-decoration: line-through; }
.task__r b { font-weight: 500; font-size: 13px; line-height: 1.3; }
.task__r .av { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; }
.task__r .av--a { background: #2f6fdd; }
.task__r .av--b { background: #8a3fb5; }

@media (max-width: 900px) {
  .task__r { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .task__r .av { display: none; }
}

/* ===== equipo V1 (bento, elegida por Andrés 2026-09-22) ===== */
/* Cuatro tarjetas con la misma anatomía: panel de pieza de alto fijo arriba y texto abajo, para que las tarjetas de cada fila queden alineadas. */
.office { display: flex; gap: 22px; }
.office > div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.office img { width: 52px; height: 52px; display: block; }
.eq1 { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.eq1__c { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid rgba(30, 30, 26, 0.08); overflow: hidden; }
.eq1__c--7 { grid-column: span 7; }
.eq1__c--5 { grid-column: span 5; }
.eq1__pz { flex: none; height: 390px; padding: 28px; background: var(--bg-raise); display: grid; place-items: center; }
.eq1__c--7 .coop { max-width: 440px; }
.eq1__c--7 .coop table { font-size: 13.5px; }
.eq1__pz .office { gap: 44px; }
.eq1__pz .office img { width: 76px; height: 76px; }
.eq1__pz .office > div { font-size: 14px; gap: 12px; }
.eq1__t { flex: 1; padding: 22px 28px 26px; }
.eq1__t .h3 { margin-top: 8px; font-size: 22px; }
.eq1__t .p { margin-top: 8px; font-size: 15.5px; }
@media (max-width: 900px) {
  .eq1 { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .eq1__c--7, .eq1__c--5 { grid-column: auto; }
  .eq1__pz { height: auto; min-height: 0; padding: 22px; }
  .eq1__pz .office { gap: 24px; }
  .eq1__pz .office img { width: 56px; height: 56px; }
  .office { gap: 18px; }
  .office img { width: 44px; height: 44px; }
}

/* ===== selector de idioma en la barra (2026-09-23): pastilla ES | EN con el idioma activo en crema ===== */
.bar__r { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(245, 243, 238, 0.06); font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1; transition: border-color 160ms ease, background-color 160ms ease; }
.lang span { padding: 6px 10px; border-radius: 999px; color: var(--muted); transition: color 160ms ease; }
.lang .on { background: var(--text); color: var(--bg); }
.lang:hover { border-color: rgba(245, 243, 238, 0.3); background: rgba(245, 243, 238, 0.1); }
.lang:hover span:not(.on) { color: var(--text); }
/* Iniciar sesión: secundario, sólo borde, para no competir con "Agenda una demo". */
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: rgba(245, 243, 238, 0.06); border-color: rgba(245, 243, 238, 0.3); box-shadow: none; }
@media (max-width: 700px) { .btn--ghost { display: none; } } /* en celular no cabe; se entra a la plataforma desde la compu */
@media (max-width: 700px) { .bar__r { gap: 10px; } .lang { font-size: 11.5px; } .lang span { padding: 5px 9px; color: var(--text); } .lang .on { display: none; } /* en celular sólo cabe el idioma al que cambias */ }

/* Texto sólo para lectores de pantalla (p. ej. el nombre completo del botón de idioma). */
.vh, .lang .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }