/* ==========================================================================
   DGS · dgsaceleradora.com
   Base: DGS Design System V1 · Tipografía y énfasis: referencia iUROP
   Versión clara: fondo hueso (crema) en lugar del negro.
   ========================================================================== */

:root {
  /* Paleta original DGS (se conserva como referencia) */
  --dgs-black:#0e0b09; --dgs-black-2:#15110e;
  --cream:#f2ebda; --cream-2:#ddd2bc; --cream-3:#8b7e68;
  --accent:#7a1e2e; --accent-2:#591722; --accent-hover:#8c2436; --accent-soft:rgba(122,30,46,.12);
  --brand-rose:#f2dada;

  /* Superficies (claro) */
  --bg:#f2ebda;          /* hueso: fondo general */
  --bg-2:#f8f4ea;        /* tarjetas */
  --bg-3:#ebe2cd;        /* mini-interfaces, campos */
  --bg-4:#e2d7bf;        /* rellenos dentro de mockups */

  /* Texto (claro) */
  --ink:#0e0b09;
  --ink-2:#3b322b;
  --ink-3:#6e6352;

  --line:rgba(14,11,9,.12); --line-strong:rgba(14,11,9,.24);

  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* Énfasis */
  --title-base:#4a3f36;  /* parte "plana" del título */
  --title-emph:var(--ink); /* palabra en itálica: máximo contraste */
  --mark:var(--accent);  /* sobre fondo claro el bordó se lee: etiquetas, números de fase, activos */

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --container:1180px; --gutter:clamp(1.25rem,4vw,3rem);
  --radius-sm:6px; --radius-field:10px; --radius-card:18px; --radius-pill:999px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }
button, input, select, textarea { font:inherit; color:inherit; }
ul { margin:0; padding:0; list-style:none; }
h1,h2,h3,p { margin:0; }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section { padding:clamp(4.5rem,10vw,8rem) 0; }
.section--tight { padding-top:clamp(2rem,5vw,3rem); }

/* ---------- Tipografía ---------- */
.title { font-family:var(--serif); font-weight:400; color:var(--title-base); }
.title em { font-style:italic; color:var(--title-emph); }

.h-hero { font-size:clamp(2.75rem,7.5vw,5.25rem); line-height:1.0; letter-spacing:-0.02em; }
.h2 { font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-0.015em; }
.h3 { font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.1; letter-spacing:-0.01em; }

.subtitle { font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.55; }
p { color:var(--ink-2); }
p strong, li strong { font-weight:600; color:var(--ink); }
.small { font-size:.875rem; line-height:1.5; color:var(--ink-3); }

.label {
  display:inline-block; font-family:var(--mono); font-weight:500; font-size:.72rem;
  line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--mark);
}

.section-head { text-align:center; max-width:820px; margin:0 auto clamp(2.5rem,6vw,4rem); }
.section-head .label { margin-bottom:1.25rem; }
.section-head__sub { max-width:600px; margin:1.25rem auto 0; }

/* ---------- Botones ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px; padding:.95rem 1.5rem; border-radius:var(--radius-pill);
  font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1; letter-spacing:-0.005em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out), opacity .2s, transform .2s var(--ease-out);
}
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--accent); color:var(--cream); }
.btn--primary:hover { background:var(--accent-hover); }
.btn--secondary { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--secondary:hover { border-color:var(--ink); }
.btn--whatsapp { background:#25d366; color:#0b2e17; }
.btn--whatsapp:hover { background:#1fbe5b; }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.4; cursor:not-allowed; transform:none; }
.btn--primary:disabled:hover { background:var(--accent); }
.btn--whatsapp:disabled:hover { background:#25d366; }
.btn--block { width:100%; }
.btn .arrow { font-weight:500; }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Marcador de pendientes ---------- */
.pending {
  display:inline-block; font-family:var(--mono); font-size:.72rem; line-height:1.4; letter-spacing:.02em;
  color:#7a4b00; background:#fff1c9; border:1px dashed #c99a2e; border-radius:var(--radius-sm);
  padding:.15em .5em; font-style:normal; font-weight:500;
}

/* ---------- Navegación ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(242,235,218,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px; }
.logo { display:inline-flex; align-items:center; text-decoration:none; }
.logo img { height:44px; width:auto; border-radius:10px; }
.footer .logo img { height:52px; }
.logo__text { font-family:var(--serif); font-size:1.75rem; line-height:1; color:var(--ink); letter-spacing:.02em; }
.nav__links { display:none; gap:2rem; }
.nav__links a { text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink-2); transition:color .2s; }
.nav__links a:hover { color:var(--ink); }
.nav__actions { display:flex; align-items:center; gap:.5rem; }
.nav .btn { min-height:42px; padding:.75rem 1.2rem; }
.nav__toggle {
  width:42px; height:42px; border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display:block; width:16px; height:1.5px; background:var(--ink); position:relative; content:""; transition:transform .25s var(--ease-out);
}
.nav__toggle span::before { position:absolute; top:-5px; }
.nav__toggle span::after { position:absolute; top:5px; }
.nav.is-open .nav__toggle span { background:transparent; }
.nav.is-open .nav__toggle span::before { transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform:translateY(-5px) rotate(-45deg); }
.nav__mobile { display:none; border-top:1px solid var(--line); padding:.5rem 0 1rem; }
.nav.is-open .nav__mobile { display:block; }
.nav__mobile a { display:block; padding:.85rem 0; text-decoration:none; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line); }

@media (min-width:768px) {
  .nav__links { display:flex; }
  .nav__toggle, .nav__mobile, .nav.is-open .nav__mobile { display:none; }
}

/* ---------- Hero ---------- */
.hero { padding:clamp(4rem,11vw,8.5rem) 0 clamp(3.5rem,8vw,6rem); text-align:center; }
.hero .h-hero { max-width:15ch; margin:0 auto; }
@media (min-width:768px) { .hero .h-hero { max-width:none; } .hero__line { display:block; } }
.hero .subtitle { max-width:640px; margin:1.75rem auto 0; }
.hero__ctas { display:flex; flex-direction:column; gap:.75rem; justify-content:center; margin-top:2.25rem; }
@media (min-width:520px) { .hero__ctas { flex-direction:row; } }

/* ---------- VSL (oculto por defecto) ---------- */
.vsl[hidden] { display:none; }
.vsl__frame {
  aspect-ratio:16/9; width:100%; max-width:960px; margin:0 auto; border-radius:var(--radius-card);
  background:var(--bg-3); border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.vsl__frame iframe, .vsl__frame video { width:100%; height:100%; border:0; }

/* ---------- Franja de clientes ---------- */
.clients__track {
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1rem,3vw,1.75rem);
}
/* Con 3 o más cuentas pasa a carrusel horizontal con scroll-snap (sin loop) */
.clients__track.is-carousel {
  flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter);
  scrollbar-width:thin;
}
.clients__track.is-carousel .client { scroll-snap-align:center; flex:0 0 min(260px, 72vw); }
@media (min-width:700px) {
  .clients__track.is-carousel .client { flex:1 1 0; max-width:260px; min-width:0; }
}

.client {
  position:relative; width:min(260px, 100%); flex:0 1 260px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:.75rem; cursor:default; outline:none;
}
.client__name { display:flex; align-items:center; gap:.35rem; padding:.25rem .25rem .75rem; font-weight:600; font-size:.95rem; color:var(--ink); min-width:0; }
.client__handle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.client__name .ig__verified { width:15px; height:15px; flex:0 0 auto; }
.client__photo {
  aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#cfc7b8;
  display:flex; align-items:center; justify-content:center;
}
.client__photo { background:var(--bg-3); }
.client__photo img { width:78%; max-height:78%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; box-shadow:0 10px 24px -12px rgba(14,11,9,.35); }
.client--linkedin .client__photo img { border-radius:14px; }
@media (min-width:768px) { .client__photo { aspect-ratio:4/5; } }
.client__photo--empty::after {
  content:""; width:42%; aspect-ratio:1; border-radius:50%; background:#bdb4a4;
}

/* Tarjeta flotante tipo perfil de Instagram — la única pieza blanca de la web */
.ig {
  position:absolute; left:50%; bottom:calc(100% - 3.5rem); width:min(300px, calc(100vw - 2.5rem));
  transform:translate(-50%, 8px); opacity:0; pointer-events:none;
  background:#fff; color:#262626; border-radius:14px; padding:1rem 1.1rem;
  box-shadow:0 18px 40px rgba(14,11,9,.18), 0 2px 6px rgba(14,11,9,.08);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  z-index:5;
}
.client:hover .ig, .client:focus-within .ig, .client.is-active .ig { opacity:1; transform:translate(-50%, 0); }
.ig__top { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
.ig__ring {
  flex:0 0 auto; width:58px; height:58px; border-radius:50%; padding:2.5px;
  background:conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.ig__avatar { width:100%; height:100%; border-radius:50%; border:2.5px solid #fff; background:#dbdbdb; overflow:hidden; }
.ig__avatar img { width:100%; height:100%; object-fit:cover; }
.ig__info { min-width:0; }
.ig__user { display:flex; align-items:center; justify-content:center; gap:.3rem; font-weight:600; font-size:.92rem; color:#262626; overflow-wrap:anywhere; }
.ig__fullname { font-size:.8rem; color:#262626; margin-top:.2rem; line-height:1.35; }
.ig__verified { flex:0 0 auto; width:15px; height:15px; }
.ig__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; margin-top:.9rem; text-align:center; }
.ig__stats b { display:block; font-size:.95rem; color:#262626; }
.ig__stats span { font-size:.75rem; color:#737373; }
.ig .pending { font-size:.62rem; }

/* Variante LinkedIn de la tarjeta flotante */
.client__net { width:16px; height:16px; flex:0 0 auto; }
.li { padding:0 0 1rem; overflow:hidden; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.li__banner { height:44px; background:linear-gradient(90deg, #a0b4b7, #c9d3d5); }
.li__avatar { width:62px; height:62px; border-radius:50%; border:3px solid #fff; background:#dbdbdb; overflow:hidden; margin:-31px 0 0 1rem; }
.li__avatar img { width:100%; height:100%; object-fit:cover; }
.li__name { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; padding:.5rem 1rem 0; font-weight:600; font-size:.95rem; color:rgba(0,0,0,.9); }
.li__desc { padding:.15rem 1rem 0; font-size:.8rem; line-height:1.4; color:rgba(0,0,0,.6); }
.li__avatar { border-radius:8px; }

/* En carrusel la tarjeta flotante va dentro de la tarjeta (el scroll horizontal recortaría lo que sobresale) */
.clients__track.is-carousel .client:first-child { margin-left:auto; }
.clients__track.is-carousel .client:last-child { margin-right:auto; }
.clients__track.is-carousel .ig { bottom:auto; top:3rem; width:calc(100% - 1rem); }

/* ---------- Tarjetas genéricas ---------- */
.card {
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:clamp(1.5rem,3vw,2.5rem);
}

/* ---------- Problema ---------- */
.autopsy__card { display:grid; gap:clamp(1.25rem,3vw,2.5rem); align-items:center; }
.autopsy__text { display:flex; flex-direction:column; gap:1rem; }
.autopsy__text p { font-size:clamp(1rem,1.4vw,1.1rem); }
.autopsy__fig {
  order:-1; background:var(--bg-3); border:1px solid var(--line-strong); border-radius:14px;
  aspect-ratio:16/9; max-height:260px; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.autopsy__fig svg { width:100%; height:100%; display:block; }
@media (min-width:900px) {
  .autopsy__card { grid-template-columns:1fr 1fr; }
  .autopsy__fig { order:0; }
}
.autopsy__num { font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--mark); font-weight:500; }
.autopsy__rule { height:1px; background:var(--line); }

/* ---------- Método ---------- */

.phase { display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.phase__ui { order:-1; }
.phase__num { font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--mark); font-weight:500; margin-bottom:1rem; display:block; }
.phase .h3 { margin-bottom:1rem; }
@media (min-width:900px) {
  .phase { grid-template-columns:1fr 1.1fr; }
  .phase__ui { order:0; }
  .phase:nth-child(even) .phase__ui { order:-1; }
}

/* Mini-interfaces (mockups de producto) */
.mock {
  background:var(--bg-3); border:1px solid var(--line-strong); border-radius:14px; overflow:hidden;
  font-size:.75rem; color:var(--ink-2); min-width:0;
}
.mock__bar { display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; border-bottom:1px solid var(--line-strong); }
.mock__dot { width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.mock__title { margin-left:.4rem; font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.mock__body { padding:1rem; display:grid; gap:.75rem; position:relative; }
.mock__sk { height:8px; border-radius:4px; background:var(--bg-4); }
.mock__sk--w40 { width:40%; } .mock__sk--w60 { width:60%; } .mock__sk--w75 { width:75%; } .mock__sk--w90 { width:90%; }
.mock__lbl { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* 01 calculadora */
.mock-calc__row { display:grid; gap:.4rem; }
.mock-calc__track { height:6px; border-radius:3px; background:var(--bg-4); position:relative; }
.mock-calc__fill { position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--line-strong); }
.mock-calc__knob { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line-strong); transform:translate(-50%,-50%); }
.mock-calc__out { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.25rem; }
.mock-calc__box { border:1px solid var(--line-strong); border-radius:8px; padding:.6rem; display:grid; gap:.45rem; background:var(--bg-2); }
.mock-calc__box--hl { border-color:var(--accent); }
.mock-calc__box--hl .mock__sk { background:var(--accent); opacity:.85; }

/* 02 tablero avatar y oferta */
.mock-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.mock-board__col { border:1px solid var(--line-strong); border-radius:8px; padding:.6rem; display:grid; gap:.5rem; align-content:start; background:var(--bg-2); }
.mock-board__chip { height:22px; border-radius:6px; background:var(--bg-4); }
.mock-board__chip--hl { background:var(--accent-soft); border:1px solid var(--accent); }

/* 03 pipeline */
.mock-pipe { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; position:relative; }
.mock-pipe__col { display:grid; gap:.45rem; align-content:start; }
.mock-pipe__head { display:flex; justify-content:space-between; align-items:center; padding-bottom:.4rem; border-bottom:1px solid var(--line-strong); }
.mock-pipe__card { border:1px solid var(--line-strong); border-radius:7px; background:var(--bg-2); padding:.45rem; display:grid; gap:.35rem; }
.mock-pipe__card .mock__sk { height:6px; }
.mock-pipe__card--hl { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* 04 flujo de tareas */
.mock-flow { display:grid; gap:.55rem; }
.mock-flow__item { display:grid; grid-template-columns:18px 1fr auto; gap:.6rem; align-items:center; border:1px solid var(--line-strong); border-radius:8px; padding:.55rem .65rem; background:var(--bg-2); }
.mock-flow__check { width:16px; height:16px; border-radius:5px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.mock-flow__check--done { background:var(--bg-4); }
.mock-flow__check--done::after { content:""; width:7px; height:4px; border-left:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(-45deg) translate(1px,-1px); }
.mock-flow__tag { height:16px; width:44px; border-radius:var(--radius-pill); background:var(--bg-4); }
.mock-flow__tag--hl { background:var(--accent); }
.mock-flow__arrow { justify-self:center; width:1px; height:12px; background:var(--line-strong); }

/* ---------- Qué tienes ---------- */
.includes { display:grid; gap:0; max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.includes li { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1.35rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.includes__num { font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; color:var(--mark); font-weight:500; }
.includes p { font-size:1.05rem; }

/* ---------- Calculadora ---------- */
.calc { display:grid; gap:1.25rem; max-width:1000px; margin:0 auto; }
@media (min-width:900px) { .calc { grid-template-columns:1.1fr 1fr; align-items:stretch; } }
.calc__inputs { display:grid; gap:1.6rem; }
.field-range { display:grid; gap:.6rem; }
.field-range__top { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.field-range label { font-weight:500; color:var(--ink-2); font-size:.95rem; }
.field-range__value {
  display:flex; align-items:center; gap:.25rem; background:var(--bg-3); border-radius:var(--radius-field); padding:.35rem .6rem;
  font-family:var(--mono); font-size:.9rem; color:var(--ink); border:1px solid transparent;
}
.field-range__value:focus-within { border-color:var(--accent); }
.field-range__value input { width:5.5ch; border:0; background:transparent; text-align:right; font-family:var(--mono); outline:none; -moz-appearance:textfield; }
.field-range__value input::-webkit-outer-spin-button, .field-range__value input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

input[type="range"] {
  -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer;
  --pct:50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height:4px; border-radius:2px; background:linear-gradient(to right, var(--accent) var(--pct), var(--bg-4) var(--pct));
}
input[type="range"]::-moz-range-track { height:4px; border-radius:2px; background:var(--bg-4); }
input[type="range"]::-moz-range-progress { height:4px; border-radius:2px; background:var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; margin-top:-8px;
  background:var(--bg-2); border:2px solid var(--accent); box-shadow:0 1px 4px rgba(14,11,9,.15);
}
input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--bg-2); border:2px solid var(--accent); }

.calc__result { display:flex; flex-direction:column; gap:1rem; }
.calc__row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.calc__row span:first-child { color:var(--ink-2); font-size:.95rem; }
.calc__row b { font-family:var(--mono); font-weight:500; color:var(--ink); font-size:1rem; white-space:nowrap; }
.calc__diff { background:var(--accent); color:var(--cream); border-radius:14px; padding:1.25rem; display:grid; gap:.9rem; }
.calc__diff .label { color:var(--brand-rose); }
.calc__diff-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.calc__diff-row > span:first-child { font-size:.9rem; color:var(--brand-rose); }
.calc__big { font-family:var(--serif); font-size:clamp(2rem,5vw,2.6rem); line-height:1; color:var(--cream); }
.calc__mid { font-family:var(--serif); font-size:clamp(1.5rem,3.5vw,1.9rem); line-height:1; color:var(--cream); }
.calc__note { margin-top:auto; }
.calc__cta { text-align:center; margin-top:2.5rem; }

/* ---------- Modelo ---------- */
.model { max-width:820px; margin:0 auto; text-align:center; }
.model p { font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.6; margin-top:1.5rem; }
.model__cap {
  margin-top:2.25rem; display:inline-flex; align-items:flex-start; gap:.75rem; text-align:left;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-card); padding:1.1rem 1.35rem;
}
.model__cap p { margin:0; font-size:1rem; }
.model__dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:.55rem; }

/* ---------- Para quién ---------- */
.fit { display:grid; gap:1.25rem; }
@media (min-width:900px) { .fit { grid-template-columns:1fr 1fr; } }
.fit .h3 { margin-bottom:.4rem; }
.fit__intro { color:var(--ink-3); margin-bottom:1.25rem; font-size:.95rem; }
.fit__list li { display:grid; grid-template-columns:1.5rem 1fr; gap:.75rem; padding:.9rem 0; border-top:1px solid var(--line); }
.fit__icon { font-family:var(--mono); font-weight:500; color:var(--mark); line-height:1.6; }
.fit__list a { color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.fit__list a:hover { color:var(--accent-hover); }
.fit .card--alt { background:transparent; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding:2.5rem 0; }
.footer__inner { display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; }
.footer__links { display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center; font-size:.95rem; }
.footer__links a { text-decoration:none; color:var(--ink-2); }
.footer__links a:hover { color:var(--ink); }
.footer__social { display:inline-flex; align-items:center; gap:.45rem; }
.footer__social svg { width:18px; height:18px; }
@media (min-width:768px) { .footer__inner { flex-direction:row; justify-content:space-between; align-items:center; } }

/* ---------- Modal formulario ---------- */
body.modal-open { overflow:hidden; }
.modal {
  position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(14,11,9,.45); opacity:0; visibility:hidden; transition:opacity .25s var(--ease-out), visibility .25s;
}
.modal.is-open { opacity:1; visibility:visible; }
.modal__panel {
  position:relative; width:100%; max-width:640px; max-height:94vh; max-height:94dvh; overflow-y:auto;
  background:var(--bg-2); border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:clamp(1.5rem,4vw,2.5rem); transform:translateY(16px); transition:transform .35s var(--ease-out);
  overscroll-behavior:contain;
}
.modal.is-open .modal__panel { transform:none; }
@media (min-width:768px) {
  .modal { align-items:center; padding:2rem; }
  .modal__panel { border-radius:var(--radius-card); max-height:90vh; }
}
.modal__close {
  position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--bg-2); cursor:pointer; font-size:1.25rem; line-height:1; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.modal__close:hover { border-color:var(--ink); }
.modal__head { padding-right:2.5rem; margin-bottom:1.75rem; }
.modal__head .h2 { margin-bottom:.9rem; }

.form { display:grid; gap:1.15rem; }
.field { display:grid; gap:.45rem; min-width:0; }
.field label { font-weight:500; font-size:.92rem; color:var(--ink-2); line-height:1.4; }
.input, .select, .textarea {
  width:100%; min-width:0; background:var(--bg-3); border:1px solid transparent; border-radius:var(--radius-field);
  padding:.85rem 1rem; font-size:1rem; color:var(--ink); outline:none; transition:border-color .2s;
}
.input:focus, .select:focus, .textarea:focus { border-color:var(--accent); }
.input::placeholder, .textarea::placeholder { color:var(--ink-3); opacity:.8; }
.textarea { min-height:110px; resize:vertical; line-height:1.5; }
.select {
  -webkit-appearance:none; appearance:none; padding-right:2.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233b322b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.select:invalid { color:var(--ink-3); }
.phone { display:grid; grid-template-columns:7.25rem 1fr; gap:.5rem; }
.form__actions { display:grid; gap:.75rem; margin-top:.5rem; }
.form__alt { text-align:center; font-size:.9rem; color:var(--ink-3); margin-top:.25rem; }
.form__hint { text-align:center; }
.form__error { text-align:center; color:var(--accent); font-size:.9rem; }

/* ---------- Página de gracias ---------- */
.thanks { min-height:calc(100vh - 68px - 120px); padding:clamp(4rem,10vw,7rem) 0; }
.thanks__inner { max-width:760px; margin:0 auto; text-align:center; }
.thanks .h2 { margin-bottom:1.25rem; }
.thanks .subtitle { max-width:560px; margin:0 auto; }
.thanks__route[hidden] { display:none; }
.booking {
  margin-top:2.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
}
.booking iframe { display:block; width:100%; height:1100px; border:0; }
@media (min-width:768px) { .booking iframe { height:760px; } }
.booking--empty { background:var(--bg-2); padding:3rem 1.5rem; }
.thanks .btn { margin-top:2rem; }

/* ---------- Movimiento ---------- */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.is-visible { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; }
  .motion, .motion * { animation:none !important; }
  .stack__card { transform:none !important; }
  .js .reveal { opacity:1; transform:none; }
}


/* ==========================================================================
   Tarjetas apiladas al hacer scroll (patrón iUROP)
   Cada tarjeta queda fija 16px por debajo de la anterior; la que queda
   debajo se reduce levemente (lo controla main.js).
   ========================================================================== */
.stack { --stack-top:88px; display:grid; gap:clamp(1.5rem,4vh,2.5rem); padding-bottom:clamp(2rem,10vh,6rem); }
.stack__card {
  position:sticky; top:calc(var(--stack-top) + var(--i, 0) * 16px);
  transform-origin:50% 0; will-change:transform;
  box-shadow:0 -1px 0 rgba(14,11,9,.02), 0 -12px 32px -18px rgba(14,11,9,.18);
}
.stack__card.no-stick { position:relative; top:auto; }

/* ==========================================================================
   Motion graphics dentro de las tarjetas
   Solo corren cuando la tarjeta está a la vista (.is-playing, lo pone main.js).
   El estado base (sin animación) es el estado "completo".
   ========================================================================== */
.motion * { animation-play-state:paused !important; }
.motion.is-playing * { animation-play-state:running !important; }

/* ---------- Salto 03 · la pieza a medida encaja ---------- */
.fig-fit__slot { fill:var(--bg-4); stroke:var(--line-strong); stroke-width:1.5; }
.fig-fit__piece path { fill:var(--bg-2); stroke:var(--ink-3); stroke-width:1.5; }
.fig-fit__piece { transform:translateY(22px); animation:fitIn 4s var(--ease-out) infinite; }
.fig-fit__glow { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; opacity:1; animation:fitGlow 4s ease-out infinite; }
@keyframes fitIn {
  0%, 10%  { transform:translate(0,-10px); }
  38%      { transform:translate(0,22px); }
  42%      { transform:translate(0,19px); }
  46%,82%  { transform:translate(0,22px); }
  100%     { transform:translate(0,-10px); }
}
@keyframes fitGlow { 0%,40% { opacity:0; } 48%,80% { opacity:1; } 92%,100% { opacity:0; } }

/* ---------- Salto 01 · de picos a una línea ---------- */
.fig-peaks__axis { stroke:var(--line-strong); stroke-width:1.5; }
.fig-peaks__spikes { fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; animation:drawSpikes 5s ease-in-out infinite; }
.fig-peaks__line { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:0; animation:drawLine 5s ease-in-out infinite; }
.fig-peaks__dot { fill:var(--accent); transform-box:fill-box; transform-origin:center; animation:popDot 5s ease-in-out infinite; }
@keyframes drawSpikes { 0% { stroke-dashoffset:1; opacity:1; } 40% { stroke-dashoffset:0; opacity:1; } 60%, 90% { stroke-dashoffset:0; opacity:.22; } 100% { stroke-dashoffset:0; opacity:0; } }
.fig-peaks__spikes { opacity:.22; }
@keyframes drawLine   { 0%, 45% { stroke-dashoffset:1; } 75%, 90% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes popDot     { 0%, 72% { transform:scale(0); } 78% { transform:scale(1.5); } 84%, 90% { transform:scale(1); opacity:1; } 100% { transform:scale(1); opacity:0; } }

/* ---------- Salto 02 · del centro al equipo ---------- */
.fig-hub__lines line { stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:3 4; }
.fig-hub__nodes circle { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5; animation:nodeOn 3s ease-out infinite; animation-delay:var(--d); }
.fig-hub__dots circle { fill:var(--accent); opacity:0; animation:hubOut 3s cubic-bezier(.25,.6,.3,1) infinite; animation-delay:var(--d); }
.fig-hub__core { fill:var(--ink-2); transform-box:fill-box; transform-origin:center; animation:hubCalm 3s ease-in-out infinite; }
@keyframes hubOut  { 0% { transform:translate(0,0); opacity:0; } 8% { opacity:1; } 30% { transform:translate(var(--dx),var(--dy)); opacity:1; } 36%,100% { transform:translate(var(--dx),var(--dy)); opacity:0; } }
@keyframes nodeOn  { 0%,26% { fill:var(--bg-2); stroke:var(--line-strong); } 32%,80% { fill:var(--accent-soft); stroke:var(--accent); } 100% { fill:var(--bg-2); stroke:var(--line-strong); } }
@keyframes hubCalm { 0%,100% { transform:scale(1); } 50% { transform:scale(.92); } }

/* ---------- Fase 01 · sliders del diagnóstico ---------- */
.mock-calc__fill.m-a { width:62%; animation:slideA 6s ease-in-out infinite; }
.mock-calc__knob.m-a { left:62%; animation:knobA 6s ease-in-out infinite; }
.mock-calc__fill.m-b { width:28%; animation:slideB 6s ease-in-out infinite; }
.mock-calc__knob.m-b { left:28%; animation:knobB 6s ease-in-out infinite; }
.mock-calc__fill.m-c { width:45%; animation:slideC 6s ease-in-out infinite; }
.mock-calc__knob.m-c { left:45%; animation:knobC 6s ease-in-out infinite; }
@keyframes slideA { 0%,100% { width:30%; } 25%,75% { width:62%; } }
@keyframes knobA  { 0%,100% { left:30%; }  25%,75% { left:62%; } }
@keyframes slideB { 0%,15%,100% { width:12%; } 40%,80% { width:28%; } }
@keyframes knobB  { 0%,15%,100% { left:12%; }  40%,80% { left:28%; } }
@keyframes slideC { 0%,30%,100% { width:20%; } 55%,85% { width:45%; } }
@keyframes knobC  { 0%,30%,100% { left:20%; }  55%,85% { left:45%; } }
.mock-calc__now  { width:60%; animation:barNow 6s ease-in-out infinite; }
.mock-calc__base { width:90%; animation:barBase 6s ease-in-out infinite; }
@keyframes barNow  { 0%,100% { width:20%; } 25%,75% { width:60%; } }
@keyframes barBase { 0%,55%,100% { width:15%; } 70%,88% { width:90%; } }
.mock-calc__box--hl { animation:boxGlow 6s ease-in-out infinite; }
@keyframes boxGlow { 0%,60%,100% { box-shadow:0 0 0 0 var(--accent-soft); } 72%,86% { box-shadow:0 0 0 4px var(--accent-soft); } }

/* ---------- Fase 02 · tablero que se arma + cursor ---------- */
.mock-board__chip { animation:chipIn 6s var(--ease-out) infinite; }
.mock-board__col:nth-child(1) .mock-board__chip:nth-of-type(1) { animation-delay:0s; }
.mock-board__col:nth-child(1) .mock-board__chip:nth-of-type(2) { animation-delay:.15s; }
.mock-board__col:nth-child(1) .mock-board__chip:nth-of-type(3) { animation-delay:.3s; }
.mock-board__col:nth-child(2) .mock-board__chip:nth-of-type(1) { animation-delay:.45s; }
.mock-board__col:nth-child(2) .mock-board__chip:nth-of-type(2) { animation-delay:.6s; }
.mock-board__col:nth-child(3) .mock-board__chip:nth-of-type(1) { animation-delay:.75s; }
.mock-board__col:nth-child(3) .mock-board__chip:nth-of-type(2) { animation-delay:.9s; }
.mock-board__col:nth-child(3) .mock-board__chip:nth-of-type(3) { animation-delay:1.05s; }
@keyframes chipIn { 0% { opacity:0; transform:translateY(6px); } 8%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; transform:translateY(-4px); } }
.mock-board__chip--hl { animation:chipIn 6s var(--ease-out) infinite, chipPick 6s ease-in-out infinite !important; }
@keyframes chipPick { 0%,45% { box-shadow:0 0 0 0 var(--accent-soft); } 52%,85% { box-shadow:0 0 0 4px var(--accent-soft); } 95%,100% { box-shadow:0 0 0 0 transparent; } }
.mock-cursor {
  position:absolute; width:14px; height:18px; left:70%; top:70%; z-index:2;
  fill:var(--ink); stroke:var(--bg-2); stroke-width:1.2; filter:drop-shadow(0 2px 3px rgba(14,11,9,.25));
  animation:cursorMove 6s var(--ease-out) infinite;
}
@keyframes cursorMove {
  0%,15%  { left:78%; top:78%; transform:scale(1); }
  42%     { left:22%; top:34%; transform:scale(1); }
  47%     { left:22%; top:34%; transform:scale(.8); }
  52%,70% { left:22%; top:34%; transform:scale(1); }
  92%,100%{ left:78%; top:78%; transform:scale(1); }
}

/* ---------- Fase 03 · un lead avanza por el pipeline ---------- */
.mock-pipe__mover {
  position:absolute; left:0; top:27px; width:calc((100% - 1.5rem) / 4);
  border:1px solid var(--accent); border-radius:7px; background:var(--bg-2); padding:.45rem;
  display:grid; gap:.35rem; box-shadow:0 0 0 3px var(--accent-soft), 0 8px 18px -8px rgba(14,11,9,.3);
  transform:translateX(calc(200% + 1rem)); animation:pipeMove 7s cubic-bezier(.65,0,.35,1) infinite; z-index:2;
}
.mock-pipe__mover .mock__sk { height:6px; background:var(--accent); opacity:.75; }
@keyframes pipeMove {
  0%      { transform:translateX(0) translateY(-4px); opacity:0; }
  6%,18%  { transform:translateX(0); opacity:1; }
  30%,42% { transform:translateX(calc(100% + .5rem)); opacity:1; }
  54%,66% { transform:translateX(calc(200% + 1rem)); opacity:1; }
  78%,92% { transform:translateX(calc(300% + 1.5rem)); opacity:1; }
  100%    { transform:translateX(calc(300% + 1.5rem)) translateY(-4px); opacity:0; }
}

/* ---------- Fase 04 · tareas que se completan ---------- */
.mock-flow__check { position:relative; }
.mock-flow__check::after {
  content:""; width:7px; height:4px; border-left:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg) translate(1px,-1px);
}
.mock-flow__check.f-1, .mock-flow__check.f-2, .mock-flow__check.f-3 { background:var(--bg-4); }
.mock-flow__check.f-1 { animation:chkBg1 7s infinite; } .mock-flow__check.f-1::after { animation:chk1 7s infinite; }
.mock-flow__check.f-2 { animation:chkBg2 7s infinite; } .mock-flow__check.f-2::after { animation:chk2 7s infinite; }
.mock-flow__check.f-3 { animation:chkBg3 7s infinite; } .mock-flow__check.f-3::after { animation:chk3 7s infinite; }
@keyframes chk1 { 0%,12% { opacity:0; } 16%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes chk2 { 0%,36% { opacity:0; } 40%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes chk3 { 0%,60% { opacity:0; } 64%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes chkBg1 { 0%,12% { background:transparent; } 16%,92% { background:var(--bg-4); } 100% { background:transparent; } }
@keyframes chkBg2 { 0%,36% { background:transparent; } 40%,92% { background:var(--bg-4); } 100% { background:transparent; } }
@keyframes chkBg3 { 0%,60% { background:transparent; } 64%,92% { background:var(--bg-4); } 100% { background:transparent; } }
.mock-flow__tag.f-3 { background:var(--accent); animation:tagHl 7s infinite; }
@keyframes tagHl { 0%,60% { background:var(--bg-4); } 64%,92% { background:var(--accent); } 100% { background:var(--bg-4); } }
.mock-flow__progress { height:4px; border-radius:2px; background:var(--bg-4); overflow:hidden; margin-top:.25rem; }
.mock-flow__progress span { display:block; height:100%; width:100%; background:var(--ink-3); transform-origin:0 50%; animation:flowProg 7s infinite; }
@keyframes flowProg { 0%,12% { transform:scaleX(0); } 16%,36% { transform:scaleX(.33); } 40%,60% { transform:scaleX(.66); } 64%,92% { transform:scaleX(1); } 100% { transform:scaleX(0); } }