/* ============================================================
   AutFlow — Sistema visual v3
   Industrial y editorial: grafito + marfil, azul como único acento.
   El degradado vive solo en el logotipo.
   ------------------------------------------------------------
   1. Tokens          6. Hero            11. Preguntas
   2. Base            7. Secciones       12. Pie de página
   3. Utilidades      8. Cotizador       13. Responsive
   4. Botones         9. Soluciones      14. Movimiento reducido
   5. Cabecera       10. Cómo trabajamos
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Paleta */
  --graphite:   #0C111B;
  --graphite-2: #141B28;   /* superficies sobre grafito */
  --graphite-3: #1C2433;   /* superficies elevadas / hover */
  --ivory:      #F5F5F2;
  --ivory-2:    #EAEAE4;   /* superficies sobre marfil */
  --blue:       #2855E8;   /* acento: botones, selección, estado */
  --blue-hover: #1F46C9;
  --blue-text:  #7C95FF;   /* azul legible sobre grafito (6,8:1) */
  --gray:       #9299A5;   /* texto secundario sobre grafito (6,6:1) */
  --gray-light: #5E6573;   /* texto secundario sobre marfil (5,4:1) */

  /* Tipografía: dos familias */
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: clamp(2.4rem, 1.2rem + 4.2vw, 4.6rem);
  --t-h2:      clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  --t-h3:      clamp(1.2rem, 1rem + .7vw, 1.55rem);
  --t-h4:      1.08rem;
  --t-lead:    clamp(1.02rem, .96rem + .3vw, 1.18rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-label:   .75rem;

  /* Espaciado (base 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Contenedor y retícula */
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --col-gap: clamp(16px, 2vw, 32px);
  --sec-y: clamp(72px, 10vw, 128px);
  --header-h: 68px;

  /* Radios: contenidos */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Movimiento */
  --ease: cubic-bezier(.2,.7,.2,1);
  --d-hover: 180ms;
  --d-trans: 320ms;
  --d-enter: 560ms;
}

/* Tonos por sección */
:root,
[data-tone="dark"]{
  --bg: var(--graphite);
  --surface: var(--graphite-2);
  --surface-2: var(--graphite-3);
  --ink: var(--ivory);
  --ink-soft: var(--gray);
  --line: rgba(245,245,242,.1);
  --line-2: rgba(245,245,242,.2);
  --accent-text: var(--blue-text);
}
[data-tone="light"]{
  --bg: var(--ivory);
  --surface: #ffffff;
  --surface-2: var(--ivory-2);
  --ink: var(--graphite);
  --ink-soft: var(--gray-light);
  --line: rgba(12,17,27,.1);
  --line-2: rgba(12,17,27,.22);
  --accent-text: var(--blue);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
}
body{
  background:var(--graphite);
  color:var(--ivory);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  min-height:100svh;
}
body.is-locked{ overflow:hidden; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:var(--t-display); letter-spacing:-.035em; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.2; }
h4{ font-size:var(--t-h4); line-height:1.3; letter-spacing:-.01em; }
p{ color:var(--ink-soft); text-wrap:pretty; }
h2[tabindex]:focus{ outline:none; }

:focus-visible{
  outline:2px solid var(--blue-text);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
[data-tone="light"] :focus-visible{ outline-color:var(--blue); }

/* ---------- 3. Utilidades ---------- */
.wrap{
  width:100%;
  max-width:calc(var(--max) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.kicker{
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.skip{
  position:fixed; left:var(--s-4); top:-60px; z-index:200;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:var(--blue); color:#fff; font-weight:600;
}
.skip:focus{ top:var(--s-4); }

/* Aparición al hacer scroll: 12 px, sin escalas ni desenfoques */
.js .rv{ opacity:0; transform:translateY(12px); }
.rv{ transition:opacity var(--d-enter) var(--ease), transform var(--d-enter) var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px;
  padding:0 var(--s-5);
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-size:.95rem; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
  transition:background-color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn .arr{ transition:transform var(--d-hover) var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-hover); }
.btn-primary:disabled{ background:var(--graphite-3); color:var(--gray); cursor:not-allowed; }
[data-tone="light"] .btn-primary:disabled{ background:var(--ivory-2); color:var(--gray-light); }

.btn-quiet{ color:var(--ink); border-color:var(--line-2); }
.btn-quiet:hover{ border-color:var(--ink); }

.btn-sm{ min-height:40px; padding:0 var(--s-4); font-size:.875rem; }
.btn-lg{ min-height:52px; padding:0 var(--s-6); font-size:1rem; }
.btn-block{ width:100%; }

/* ---------- 5. Cabecera ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  height:var(--header-h);
  background:rgba(12,17,27,.92);
  border-bottom:1px solid transparent;
  transition:background-color var(--d-trans) var(--ease), border-color var(--d-trans) var(--ease), color var(--d-trans) var(--ease);
}
.hdr.scrolled{ border-bottom-color:rgba(245,245,242,.08); }
.hdr.on-light{ background:rgba(245,245,242,.95); border-bottom-color:rgba(12,17,27,.08); color:var(--graphite); }
@supports (backdrop-filter:blur(1px)){
  .hdr{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
}
.nav{ height:100%; display:flex; align-items:center; gap:var(--s-6); }
.brand{ display:flex; align-items:center; gap:10px; flex:none; min-height:44px; }
.brand img{ width:30px; height:auto; }
.brand b{ font-family:var(--f-display); font-weight:600; font-size:1.08rem; letter-spacing:-.02em; }

.nav-links{ display:flex; gap:var(--s-1); margin-left:auto; }
.nav-links a{
  position:relative;
  padding:var(--s-2) var(--s-3);
  font-size:.9rem; font-weight:500;
  color:var(--gray);
  border-radius:var(--r-sm);
  transition:color var(--d-hover) var(--ease);
}
.hdr.on-light .nav-links a{ color:var(--gray-light); }
.nav-links a:hover,.nav-links a.on{ color:var(--ivory); }
.hdr.on-light .nav-links a:hover,.hdr.on-light .nav-links a.on{ color:var(--graphite); }
.nav-links a.on::after{
  content:""; position:absolute; left:var(--s-3); right:var(--s-3); bottom:2px;
  height:2px; background:var(--blue);
}
.nav-act{ display:flex; align-items:center; gap:var(--s-2); }

.burger{
  display:none; place-items:center;
  width:44px; height:44px; border-radius:var(--r-md);
  border:1px solid rgba(245,245,242,.18);
  position:relative;
}
.hdr.on-light .burger{ border-color:rgba(12,17,27,.18); }
.burger i{
  position:absolute; width:18px; height:1.5px; background:currentColor;
  transition:transform var(--d-trans) var(--ease), opacity var(--d-trans) var(--ease);
}
.burger i:nth-child(1){ transform:translateY(-6px); }
.burger i:nth-child(3){ transform:translateY(6px); }
.burger[aria-expanded="true"] i:nth-child(1){ transform:rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--header-h) 0 0; z-index:99;
  display:flex; flex-direction:column; gap:var(--s-1);
  padding:var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  background:var(--graphite);
  border-top:1px solid rgba(245,245,242,.08);
}
.drawer[hidden]{ display:none; }
.drawer .dl{
  padding:var(--s-4) 0;
  font-family:var(--f-display); font-size:1.5rem; font-weight:600; letter-spacing:-.02em;
  border-bottom:1px solid rgba(245,245,242,.08);
}
.drawer .dl.on{ color:var(--blue-text); }
.drawer .btn{ margin-top:auto; }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + var(--s-6)) 0 var(--s-7);
  background:var(--graphite);
  overflow:hidden;
}
/* Retícula técnica muy tenue: contexto de "plano", sin decorar */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(245,245,242,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(245,245,242,.035) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 70% at 72% 50%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 50%, #000 20%, transparent 75%);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--col-gap);
  align-items:center;
}
.hero-copy{ grid-column:1 / span 6; }
.hero-visual{ grid-column:7 / span 6; position:relative; }

.hero-copy .kicker{ margin-bottom:var(--s-5); }
.hero-copy h1{ max-width:13ch; }
.hero-copy h1 span{ color:var(--gray); }
.hero-sub{
  margin-top:var(--s-5);
  max-width:48ch;
  font-size:var(--t-lead);
  line-height:1.55;
  color:#C5CAD3;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }

.hero-facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-5);
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
  max-width:560px;
}
.hero-facts li{ font-size:var(--t-small); line-height:1.45; color:var(--gray); }
.hero-facts b{ display:block; font-family:var(--f-display); font-size:1.05rem; font-weight:600; color:var(--ivory); margin-bottom:2px; }

/* Marco del brazo: la escena 3D se encuadra sola dentro */
.arm-frame{
  position:relative;
  width:100%;
  height:clamp(460px, 78svh, 760px);
}
.hand3d{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 700ms var(--ease);
}
.hero-visual.has-3d .hand3d{ opacity:1; }
.hand3d-canvas{ width:100%; height:100%; }
/* Respaldo SVG (sin WebGL) */
.robot-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity var(--d-trans) var(--ease);
}
.robot-svg{ height:88%; width:auto; }
/* Con JS el respaldo empieza oculto: solo aparece si el 3D no puede
   arrancar (boot.js añade .no-3d). Así no se ve un dibujo distinto
   durante el segundo que tarda en cargar el brazo. */
.js .robot-stage{ opacity:0; visibility:hidden; }
.hero-visual.no-3d .robot-stage{ opacity:1; visibility:visible; }

/* ---------- 7. Secciones ---------- */
.sec{
  position:relative;
  padding-block:var(--sec-y);
  background:var(--bg);
  color:var(--ink);
}
/* Cabecera asimétrica: título a la izquierda, contexto a la derecha */
.sec-head{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:var(--s-4);
  align-items:end;
  margin-bottom:var(--s-8);
}
.sec-head > div{ grid-column:1 / span 7; }
.sec-head .kicker{ margin-bottom:var(--s-4); }
.sec-lead{
  grid-column:9 / span 4;
  font-size:var(--t-lead);
  line-height:1.55;
}
.sec-lead b{ color:var(--ink); font-weight:600; }

/* ---------- 8. Cotizador ---------- */
.cot{ background:var(--graphite); border-top:1px solid rgba(245,245,242,.06); }

.calc{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:var(--s-4);
  align-items:start;
}
.calc-main{
  grid-column:1 / span 8;
  display:flex; flex-direction:column;
  min-height:520px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.calc-top{
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-5) var(--s-6);
  border-bottom:1px solid var(--line);
}
.ring{ position:relative; width:44px; height:44px; flex:none; }
.ring svg{ width:44px; height:44px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:3; }
.ring .rbg{ stroke:var(--line-2); }
.ring .rfg{
  stroke:var(--blue);
  stroke-linecap:round;
  stroke-dasharray:126; stroke-dashoffset:126;
  transition:stroke-dashoffset var(--d-trans) var(--ease);
}
.ring b{ position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums; }
.calc-top-txt b{ display:block; font-family:var(--f-display); font-weight:600; }
.calc-top-txt span{ font-size:var(--t-small); color:var(--ink-soft); }
.calc-reset{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 var(--s-3);
  border-radius:var(--r-md);
  font-size:var(--t-small); color:var(--ink-soft);
  transition:color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.calc-reset:hover{ color:var(--ink); background:var(--surface-2); }
.calc-reset svg{ width:15px; height:15px; }

.calc-body{ flex:1; padding:var(--s-6); }
.cstep{ display:none; }
.cstep.on{ display:block; animation:stepIn var(--d-trans) var(--ease) both; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.cstep h3{ margin-bottom:var(--s-1); }
.chint{ font-size:var(--t-small); margin-bottom:var(--s-5); }

.copts{ display:grid; gap:var(--s-2); }
.copt{
  position:relative;
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; min-height:52px;
  padding:var(--s-3) var(--s-4);
  text-align:left;
  font-size:.95rem; font-weight:500; line-height:1.35;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:transparent;
  transition:border-color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.copt:hover{ border-color:var(--line-2); background:var(--surface-2); }
.copt.sel{ border-color:var(--blue); background:rgba(40,85,232,.12); }

/* Opciones de lista: letra de atajo */
.copts.list{ counter-reset:opt; }
.copts.list .copt::before{
  counter-increment:opt;
  content:counter(opt, upper-alpha);
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:.75rem; font-weight:600; color:var(--ink-soft);
  transition:all var(--d-hover) var(--ease);
}
.copts.list .copt.sel::before{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* Paso 1: categorías con ícono + vista previa */
.cat-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,280px);
  gap:var(--s-4);
}
.copts.cats{ grid-template-columns:repeat(2, minmax(0,1fr)); align-content:start; }
.copt.cat{ padding-left:var(--s-3); }
.copt.cat .ci{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--gray);
  transition:color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.copt.cat .ci svg{ width:18px; height:18px; }
.copt.cat:hover .ci,.copt.cat.pv-on .ci{ color:var(--blue-text); }
.copt.cat.pv-on{ border-color:var(--line-2); background:var(--surface-2); }
.copt.cat.sel .ci{ background:var(--blue); color:#fff; }

/* Holder de vista previa (ejemplos ilustrativos) */
.cprev{
  --c:var(--blue-text);
  position:relative;
  min-height:300px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--graphite);
  overflow:hidden;
}
.pv{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4);
  font-size:.75rem; color:#C5CAD3;
  opacity:0; visibility:hidden;
  transition:opacity var(--d-trans) var(--ease), visibility var(--d-trans);
}
.pv.on{ opacity:1; visibility:visible; }
.pv > *{ min-width:0; }
.pv-cap{ margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--line); font-size:.8rem; color:var(--ivory); }
.pv-idle-in{ margin:auto; display:grid; justify-items:center; gap:var(--s-2); text-align:center; max-width:22ch; }
.pv-idle-in svg{ width:26px; height:26px; color:var(--gray); }
.pv-idle-in b{ font-family:var(--f-display); font-size:.95rem; color:var(--ivory); }
.pv-idle-in span{ font-size:.8rem; color:var(--gray); line-height:1.45; }

.pv-bar{
  display:flex; align-items:center; gap:5px;
  padding:6px 8px; border-radius:var(--r-sm);
  background:var(--graphite-2);
  font-size:.7rem; color:var(--gray);
}
.pv-bar i{ width:7px; height:7px; border-radius:50%; background:#3A4254; }
.pv-bar span{ margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-bar em{ margin-left:auto; font-style:normal; color:var(--c); white-space:nowrap; }
.pv-bar .url{ flex:1; padding:2px 6px; border-radius:3px; background:var(--graphite); }

.mail,.chat,.check,.chain,.flow-log{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.mail li{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:var(--r-sm);
  background:var(--graphite-2);
}
.mail .av{
  width:24px; height:24px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  font-size:.6rem; font-weight:600; color:var(--ivory); background:var(--graphite-3);
}
.mail div{ flex:1; min-width:0; }
.mail b,.mail small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail b{ font-size:.72rem; color:var(--ivory); font-weight:600; }
.mail small{ font-size:.68rem; color:var(--gray); }
.mail .tag{ flex:none; font-size:.62rem; font-weight:600; color:var(--c); }

.doc{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:var(--s-3); }
.doc-page{
  position:relative; height:120px; padding:10px 9px;
  display:grid; gap:7px; align-content:start;
  border-radius:3px; background:#E6E7E3; overflow:hidden;
}
.doc-page i{ display:block; height:4px; border-radius:2px; background:#BFC3CA; }
.doc-page .w40{ width:40%; } .doc-page .w55{ width:55%; } .doc-page .w60{ width:60%; }
.doc-page .w70{ width:70%; background:#8A919D; } .doc-page .w85{ width:85%; }
.doc-page .scan{ display:none; }
.doc-out{ display:grid; gap:5px; }
.doc-out div{ padding:5px 7px; border-radius:var(--r-sm); background:var(--graphite-2); }
.doc-out dt{ font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); }
.doc-out dd{ font-size:.74rem; font-weight:600; color:var(--ivory); font-variant-numeric:tabular-nums; }

.sheet{ width:100%; border-collapse:collapse; font-size:.66rem; font-variant-numeric:tabular-nums; }
.sheet th,.sheet td{ padding:5px 6px; border:1px solid var(--line); text-align:right; }
.sheet th{ color:var(--ivory); font-weight:600; background:var(--graphite-2); }
.sheet td:first-child{ text-align:left; color:var(--gray); }
.bars{ display:flex; align-items:flex-end; gap:5px; height:48px; border-bottom:1px solid var(--line-2); }
.bars i{ flex:1; height:var(--h); background:var(--graphite-3); border-radius:2px 2px 0 0; }
.bars i:nth-child(5){ background:var(--blue); }

.form{ position:relative; display:grid; gap:7px; }
.form label{ display:grid; gap:3px; font-size:.66rem; color:var(--gray); }
.typed{ padding:6px 8px; border-radius:var(--r-sm); background:var(--graphite-2); color:var(--ivory); font-size:.74rem; }
.fbtn{ justify-self:start; padding:6px 12px; border-radius:var(--r-sm); background:var(--blue); color:#fff; font-weight:600; font-size:.68rem; }
.ptr{ display:none; }

.flow{ display:flex; align-items:center; gap:4px; padding:var(--s-2) 0; }
.flow .node{ flex:none; padding:6px 8px; border-radius:var(--r-sm); background:var(--graphite-2); border:1px solid var(--line-2); font-size:.66rem; font-weight:600; color:var(--ivory); }
.flow .link{ flex:1; height:1px; background:var(--line-2); }
.flow .link i{ display:none; }
.flow-log span{ position:relative; padding-left:14px; font-size:.7rem; color:#C5CAD3; }
.flow-log span::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--c); }

.chat p{ max-width:88%; padding:7px 10px; border-radius:var(--r-md); font-size:.7rem; line-height:1.4; }
.chat .in{ justify-self:start; background:var(--graphite-2); color:#C5CAD3; }
.chat .out{ justify-self:end; background:rgba(40,85,232,.28); color:var(--ivory); }
.chat .typing{ display:flex; gap:3px; }
.chat .typing i{ width:5px; height:5px; border-radius:50%; background:var(--ivory); opacity:.6; }

.win{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.win-t{ padding:6px 8px; font-size:.66rem; font-weight:600; color:var(--ivory); background:var(--graphite-2); }
.win-b{ display:grid; gap:7px; padding:9px 8px; }
.win .row{ display:flex; justify-content:space-between; gap:8px; font-size:.68rem; padding-bottom:6px; border-bottom:1px solid var(--line); }
.win .row em{ font-style:normal; color:var(--gray); }
.win .row b{ color:var(--ivory); font-weight:500; font-variant-numeric:tabular-nums; }
.win .prog{ height:4px; border-radius:2px; background:var(--graphite-3); }
.win .prog i{ display:block; width:72%; height:100%; background:var(--blue); border-radius:2px; }

.chain{ counter-reset:ch; }
.chain li{
  counter-increment:ch;
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:var(--r-sm);
  background:var(--graphite-2); font-size:.72rem; color:var(--ivory);
}
.chain li::before{ content:counter(ch); width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); font-size:.6rem; }
.check li{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--r-sm); background:var(--graphite-2); font-size:.72rem; color:var(--ivory); }
.check li::before{ content:""; width:14px; height:14px; flex:none; border-radius:3px; border:1.5px solid var(--gray); }

.calc-nav{
  display:flex; gap:var(--s-3);
  padding:var(--s-4) var(--s-6);
  border-top:1px solid var(--line);
}
.calc-nav .btn{ flex:1; }
.calc-nav .hid{ display:none; }

/* Resultado */
.cres{ text-align:left; }
.cres-tier{ font-size:var(--t-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.cres-price{
  margin:var(--s-2) 0 var(--s-1);
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  letter-spacing:-.03em; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.cres-cur{ font-size:var(--t-small); color:var(--ink-soft); }
.cres-sum{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  margin:var(--s-5) 0;
  border-top:1px solid var(--line);
}
.cres-sum div{ padding:var(--s-3) 0; border-bottom:1px solid var(--line); }
.cres-sum div:nth-child(odd){ padding-right:var(--s-4); }
.cres-sum dt{ font-size:var(--t-label); color:var(--ink-soft); }
.cres-sum dd{ font-weight:600; font-size:.92rem; }
.cres-note{ margin-top:var(--s-3); font-size:var(--t-small); }

/* Panel lateral */
.calc-side{
  grid-column:9 / span 4;
  position:sticky; top:calc(var(--header-h) + var(--s-5));
  display:grid; gap:var(--s-3);
}
.live{ padding:var(--s-5); border:1px solid var(--line); border-radius:var(--r-lg); }
.live-k{ font-size:var(--t-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--s-3); }
.live-note{ text-transform:none; letter-spacing:0; font-weight:400; }
.live-v{ font-family:var(--f-display); font-size:1.6rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.live-v.idle{ color:var(--ink-soft); }
.live-s{ margin-top:var(--s-1); font-size:var(--t-small); color:var(--ink-soft); }
.live-bar{ height:3px; margin-top:var(--s-4); background:var(--line); border-radius:2px; overflow:hidden; }
.live-bar i{ display:block; height:100%; width:8%; background:var(--blue); transition:width var(--d-trans) var(--ease); }
.live-rows{ display:grid; }
.live-row{
  display:flex; align-items:baseline; gap:var(--s-2);
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-small); color:var(--ink-soft);
}
.live-row:last-child{ border-bottom:0; }
.live-row dt{ color:var(--ink-soft); }
.live-row dd{ margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.live-row .lr-i{
  width:18px; height:18px; flex:none; align-self:center;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  font-size:.62rem; font-variant-numeric:tabular-nums;
}
.live-row.done .lr-i{ background:var(--blue); border-color:var(--blue); color:#fff; }
.live-row .lr-v{ margin-left:auto; max-width:55%; text-align:right; font-weight:600; color:var(--ink); }

/* ---------- Slides ---------- */

.slide[hidden]{ display:none; }
.slide.is-open > .wrap{ animation:slideIn 480ms var(--ease) both; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }

.slide-nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3);
  margin-top:var(--s-8);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
}
.slide-dots{ display:flex; gap:var(--s-1); margin-left:auto; }
.slide-dots a{ display:grid; place-items:center; width:32px; height:32px; }
.slide-dots a::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--line-2);
  transition:background-color var(--d-hover) var(--ease), width var(--d-hover) var(--ease);
}
.slide-dots a.on::before{ width:20px; border-radius:4px; background:var(--blue); }

/* ---------- 9. Soluciones (tabla editorial) ---------- */
.sol-table{ border-top:1px solid var(--line-2); }
.sol-row{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--col-gap);
  padding:var(--s-5) 0;
  border-bottom:1px solid var(--line);
}
.sol-row > :nth-child(1){ grid-column:1 / span 5; }
.sol-row > :nth-child(2){ grid-column:6 / span 4; }
.sol-row > :nth-child(3){ grid-column:10 / span 3; }
.sol-headrow{ padding:var(--s-3) 0; }
.sol-headrow span{ font-size:var(--t-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.sol-row span{ color:var(--ink-soft); line-height:1.5; }
.sol-row .sol-p{
  display:flex; gap:var(--s-4);
  font-family:var(--f-display); font-size:1.2rem; font-weight:600; letter-spacing:-.015em; line-height:1.3;
  color:var(--ink);
}
.sol-p i{ font-style:normal; font-family:var(--f-body); font-size:var(--t-small); font-weight:600; color:var(--blue); padding-top:3px; font-variant-numeric:tabular-nums; }
.sol-row .sol-r{ color:var(--ink); font-weight:500; }
.sol-foot{ margin-top:var(--s-6); font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.02em; color:var(--ink); max-width:26ch; }

/* ---------- 10. Cómo trabajamos ---------- */
.demo{
  position:relative;
  padding:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.demo-flow{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-5); }
.dstep{ position:relative; display:flex; flex-direction:column; gap:var(--s-3); }
.dstep:not(:last-child)::after{
  content:""; position:absolute; top:10px; left:calc(100% + 4px); width:calc(var(--s-5) - 8px); height:1px;
  background:var(--line-2);
}
.dn{ font-size:var(--t-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.dcard{
  flex:1;
  padding:var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--graphite);
  font-size:var(--t-small);
  transition:border-color var(--d-trans) var(--ease), opacity var(--d-trans) var(--ease);
}
.dcard p{ font-size:var(--t-small); }
.dcard b{ color:var(--ivory); font-weight:600; }
.dcard .dmeta{ font-size:var(--t-label); letter-spacing:.04em; margin-bottom:var(--s-1); }
.dfile{
  display:inline-block; margin-top:var(--s-3);
  padding:3px 8px; border-radius:var(--r-sm);
  background:var(--graphite-3); font-size:.75rem; color:var(--ivory);
}
.dfields{ display:grid; gap:var(--s-2); }
.dfields dt{ font-size:var(--t-label); color:var(--gray); }
.dfields dd{ color:var(--ivory); font-weight:600; font-variant-numeric:tabular-nums; }
.dsheet{ width:100%; border-collapse:collapse; font-size:.78rem; font-variant-numeric:tabular-nums; }
.dsheet th,.dsheet td{ padding:5px 4px; text-align:left; border-bottom:1px solid var(--line); }
.dsheet th{ color:var(--gray); font-weight:500; }
.dsheet td{ color:#C5CAD3; }
.dsheet td:last-child,.dsheet th:last-child{ text-align:right; }
.dsheet .dnew td{ color:var(--ivory); font-weight:600; }

/* Secuencia: con JS cada paso se enciende en orden al entrar en pantalla */
.js .demo .dcard{ opacity:.35; }
.js .demo .dsheet .dnew{ opacity:0; }
.demo .dsheet .dnew{ transition:opacity var(--d-trans) var(--ease); }
.demo.play .dcard{ opacity:1; border-color:var(--line-2); }
.demo.play .dstep:nth-child(2) .dcard{ transition-delay:700ms; }
.demo.play .dstep:nth-child(3) .dcard{ transition-delay:1400ms; }
.demo.play .dstep:nth-child(4) .dcard{ transition-delay:2100ms; border-color:var(--blue); }
.demo.play .dsheet .dnew{ opacity:1; transition-delay:1700ms; }
.demo-replay{ margin-top:var(--s-5); }

.method{ margin-top:var(--s-9); }
.method-t{ margin-bottom:var(--s-6); }
.method-list{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  column-gap:var(--col-gap);
  counter-reset:m;
}
.method-list li{
  counter-increment:m;
  position:relative;
  padding-top:var(--s-7);
  border-top:1px solid var(--line-2);
}
.method-list li::before{
  content:counter(m, decimal-leading-zero);
  position:absolute; top:-1px; left:0;
  padding-top:var(--s-3);
  border-top:2px solid var(--blue);
  font-size:var(--t-small); font-weight:600; color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.m-when{ display:block; margin-bottom:var(--s-2); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.method-list h4{ margin-bottom:var(--s-2); }
.method-list p{ font-size:.94rem; }
.method-list .m-out{ margin-top:var(--s-3); color:var(--ink); font-weight:500; }

/* ---------- 11. Preguntas ---------- */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:var(--s-6);
  align-items:start;
}
.faq-head{ grid-column:1 / span 4; display:block; margin-bottom:0; position:sticky; top:calc(var(--header-h) + var(--s-6)); }
.faq-head .sec-lead{ margin:var(--s-4) 0 var(--s-5); }
.faq-list{ grid-column:6 / span 7; border-top:1px solid var(--line-2); }
.faq-i{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; min-height:64px;
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-4) 0;
  text-align:left;
  font-family:var(--f-display); font-size:1.12rem; font-weight:600; letter-spacing:-.01em;
  color:var(--ink);
}
.pm{ position:relative; width:14px; height:14px; flex:none; margin-left:auto; }
.pm::before,.pm::after{ content:""; position:absolute; left:50%; top:50%; background:currentColor; transform:translate(-50%,-50%); transition:transform var(--d-trans) var(--ease), opacity var(--d-trans) var(--ease); }
.pm::before{ width:14px; height:1.5px; }
.pm::after{ width:1.5px; height:14px; }
.faq-i.open .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-trans) var(--ease); }
.faq-i.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding-bottom:var(--s-5); max-width:62ch; }

/* ---------- 12. Pie de página ---------- */
.ft{ background:var(--graphite); color:var(--ivory); border-top:1px solid rgba(245,245,242,.08); padding-top:var(--s-8); }
.ft-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--col-gap); row-gap:var(--s-6);
}
.ft-brand{ grid-column:1 / span 5; }
.ft-brand p{ margin-top:var(--s-3); max-width:40ch; font-size:var(--t-small); }
.ft-links{ grid-column:7 / span 2; display:grid; gap:var(--s-1); align-content:start; }
.ft-links a{ font-size:var(--t-small); color:var(--gray); min-height:32px; display:flex; align-items:center; }
.ft-links a:hover{ color:var(--ivory); }
.ft-contact{ grid-column:9 / span 4; }
.ft-contact p{ margin-top:var(--s-2); font-size:var(--t-small); }
.ft-bot{ margin-top:var(--s-8); padding-block:var(--s-5); border-top:1px solid rgba(245,245,242,.08); font-size:var(--t-small); color:var(--gray); }

.wa-float{
  position:fixed; z-index:90;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:#1FAF55; color:#fff;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8);
  opacity:0; visibility:hidden;
  transition:opacity var(--d-trans) var(--ease), visibility var(--d-trans);
}
.wa-float.on{ opacity:1; visibility:visible; }
.wa-float svg{ width:24px; height:24px; }

.file-note{
  position:fixed; left:50%; bottom:16px; z-index:300; transform:translateX(-50%);
  max-width:min(92vw,520px); padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md); border:1px solid var(--line-2);
  background:var(--graphite-2); color:var(--ivory); font-size:var(--t-small);
}

/* ---------- 13. Responsive ---------- */
@media (max-width:1180px){
  .hero-copy{ grid-column:1 / span 7; }
  .hero-visual{ grid-column:8 / span 5; }
  .arm-frame{ height:clamp(420px, 70svh, 640px); }
  .calc-main{ grid-column:1 / span 12; }
  .calc-side{ grid-column:1 / span 12; position:static; grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:1024px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
  .nav-act{ margin-left:auto; }

  .sec-head > div{ grid-column:1 / span 12; }
  .sec-lead{ grid-column:1 / span 8; }

  .demo-flow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dstep:nth-child(2)::after{ display:none; }
  .method-list{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:var(--s-7); }

  .faq-head{ grid-column:1 / span 12; position:static; }
  .faq-list{ grid-column:1 / span 12; }

  .ft-brand{ grid-column:1 / span 12; }
  .ft-links{ grid-column:1 / span 4; }
  .ft-contact{ grid-column:5 / span 8; }
}

/* Una columna en el hero solo cuando el brazo ya no cabe al lado */
@media (max-width:900px){
  .hero{ min-height:auto; }
  .hero-copy{ grid-column:1 / span 12; }
  .hero-visual{ grid-column:1 / span 12; margin-top:var(--s-6); }
  .arm-frame{ height:clamp(420px, 62svh, 620px); max-width:620px; margin-inline:auto; }
}

@media (max-width:768px){
  :root{ --header-h:64px; }
  .sec-head{ margin-bottom:var(--s-7); }
  .sec-lead{ grid-column:1 / span 12; }

  .calc-side{ grid-template-columns:1fr; }
  .cat-layout{ grid-template-columns:1fr; }
  .cprev{ display:none; }   /* sin cursor la vista previa no aporta */

  .sol-headrow{ display:none; }
  .sol-row{ grid-template-columns:1fr; row-gap:var(--s-2); }
  .sol-row > :nth-child(n){ grid-column:1; }
  .sol-row > :nth-child(2),.sol-row > :nth-child(3){ padding-left:calc(var(--s-4) + 1.3em); }
  .sol-r::before{ content:"→ "; color:var(--blue); }

  .demo{ padding:var(--s-4); }
  .demo-flow{ grid-template-columns:1fr; gap:var(--s-4); }
  .dstep::after{ display:none; }

  .slide-dots{ margin-left:0; width:100%; justify-content:center; }
}

@media (max-width:600px){
  .nav-act .btn span{ display:none; }
  .nav-act .btn{ width:44px; padding:0; }
  .hero{ padding-top:calc(var(--header-h) + var(--s-6)); }
  .hero-cta .btn{ width:100%; }
  .hero-facts{ grid-template-columns:1fr; gap:var(--s-3); }
  .hero-facts li{ display:flex; gap:var(--s-3); align-items:baseline; }
  .hero-facts b{ min-width:5.5em; margin:0; }
  .arm-frame{ height:clamp(360px, 56svh, 480px); }

  .calc-top{ padding:var(--s-4); gap:var(--s-3); }
  .calc-reset span{ display:none; }
  .calc-body{ padding:var(--s-5) var(--s-4); }
  .calc-nav{ padding:var(--s-3) var(--s-4); }
  .copts.cats{ grid-template-columns:1fr; }
  .cres-sum{ grid-template-columns:1fr; }
  .cres-sum div:nth-child(odd){ padding-right:0; }

  .method-list{ grid-template-columns:1fr; }
  .slide-nav .btn{ width:100%; }
  .ft-links,.ft-contact{ grid-column:1 / span 12; }
}

@media (max-width:360px){
  .brand b{ display:none; }
  .copt{ font-size:.9rem; }
}

/* ---------- 14. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important; }
  .js .rv{ opacity:1; transform:none; }
  .js .demo .dcard{ opacity:1; }
  .js .demo .dsheet .dnew{ opacity:1; }
}

/* Objetivos táctiles de 44 px en pantallas sin puntero fino */
@media (pointer:coarse){
  .slide-dots a{ width:44px; height:44px; }
  .ft-links a{ min-height:44px; }
}

/* ---------- Selector de idioma ---------- */
.lang-toggle{
  display:inline-flex; align-items:center;
  height:40px; padding:3px;
  border:1px solid rgba(245,245,242,.18);
  border-radius:var(--r-md);
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
}
.hdr.on-light .lang-toggle{ border-color:rgba(12,17,27,.18); }
.lang-toggle span{
  display:grid; place-items:center;
  min-width:32px; height:100%;
  border-radius:5px;
  color:var(--gray);
  transition:background-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.hdr.on-light .lang-toggle span{ color:var(--gray-light); }
.lang-toggle span.on{ background:var(--graphite-3); color:var(--ivory); }
.hdr.on-light .lang-toggle span.on{ background:var(--graphite); color:var(--ivory); }
.lang-toggle:hover span:not(.on){ color:var(--ivory); }
.hdr.on-light .lang-toggle:hover span:not(.on){ color:var(--graphite); }
@media (pointer:coarse){ .lang-toggle{ height:44px; } }

/* ---------- Redes sociales ---------- */
.social{ display:flex; gap:var(--s-2); }
.social a{
  display:grid; place-items:center;
  width:44px; height:44px;
  border:1px solid rgba(245,245,242,.14);
  border-radius:var(--r-md);
  color:var(--gray);
  transition:color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.social svg{ width:20px; height:20px; }
.social a:hover{ color:var(--ivory); border-color:rgba(245,245,242,.4); background:var(--graphite-2); }

.ft-bot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }

.drawer-foot{ margin-top:auto; display:grid; gap:var(--s-4); }
.drawer-foot .btn{ margin-top:0; }
.social-drawer{ justify-content:center; }
.social-drawer a{ width:52px; height:52px; }
.social-drawer svg{ width:22px; height:22px; }