/* Dirección A en claro · papel cálido, tinta carbón y cobre oscuro. Generado desde web.css (ver PROPUESTA.md). */
:root {
  --bg: #f3f2ee;
  --bg-2: #eae8e2;
  --bg-3: #e1ded6;
  --line: rgba(40, 32, 24, 0.10);
  --line-2: rgba(40, 32, 24, 0.18);
  --ink: #1d1b18;
  --ink-2: #57524a;   /* 7,0:1 sobre --bg */
  --ink-3: #7e776c;   /* 4,1:1, solo texto grande o decorativo */
  --cu: #86603d;      /* cobre oscuro: 5,2:1 sobre --bg */
  --cu-2: #b08a62;
  --cu-ink: #fffaf3;
  --paper: #fdfbf7;
  --paper-ink: #1b1a17;
  --ok: #2f6b3c;
  --warn: #8a5a10;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--cu); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

/* Grano fijo, fuera del flujo de scroll */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Liquid glass ---------- */
.lg {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: rgba(255,253,249,0.56);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(70,48,28,0.112),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 1px rgba(70,48,28,0.096),
    0 24px 60px -18px rgba(70,48,28,0.208);
}
.has-refract .lg.lg--refract {
  -webkit-backdrop-filter: var(--lg-filter) blur(5px) saturate(170%) brightness(1.04);
  backdrop-filter: var(--lg-filter) blur(5px) saturate(170%) brightness(1.04);
  background: rgba(255,253,249,0.48);
}
/* canto de luz */
.lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(158deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 52%, rgba(255,255,255,.04) 74%, rgba(255,255,255,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* brillo especular que sigue al puntero */
.lg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,0.42000000000000004), transparent 60%);
}
@media (prefers-reduced-transparency: reduce) {
  .lg, .has-refract .lg.lg--refract { background: #fbf9f5; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--cu { background: var(--cu); color: var(--cu-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -10px rgba(134,96,61,0.55); }
.btn--cu:hover { background: #6f4e30; }
.btn--ghost { background: rgba(40,32,24,0.051); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: rgba(40,32,24,0.085); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--xs { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- Navegación ---------- */
.nav-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; }
.nav {
  display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 10px 0 18px; border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.brand__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--paper); color: #3b2314; padding: 4px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.nav__links a { text-decoration: none; transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav__links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- Tipografía ---------- */
.display { font-weight: 600; font-size: clamp(46px, 6.1vw, 90px); line-height: .95; letter-spacing: -0.045em; }
.h2 { font-weight: 560; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; max-width: 24ch; }
.h2 .mute, .display .mute { color: var(--ink-3); }
.h2 .mute { display: block; }
.h3 { font-weight: 560; font-size: 19px; letter-spacing: -0.015em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); line-height: 1.5; max-width: 36ch; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 18px; }

.section { padding: clamp(96px, 12vw, 168px) 0; position: relative; }

/* ---------- Portada ---------- */
.hero { min-height: 100dvh; display: grid; align-items: center; padding: 112px 0 64px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: center; }
.hero__head { display: grid; gap: 28px; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

.stage { position: relative; height: 600px; }
@media (max-width: 980px) { .stage { height: 560px; } }
@media (max-width: 560px) { .stage { height: 600px; } }

/* documentos detrás del cristal */
.doc { position: absolute; border-radius: 6px; will-change: transform; }
.doc--invoice {
  left: 0; top: 34px; width: 330px; padding: 26px 26px 22px; background: var(--paper); color: var(--paper-ink);
  transform: rotate(-5deg); box-shadow: 0 40px 70px -30px rgba(70,48,28,0.256), 0 2px 0 rgba(70,48,28,0.064);
}
.doc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.doc__brand { font-weight: 700; letter-spacing: -0.02em; font-size: 15px; line-height: 1.15; }
.doc__brand small { display: block; font-weight: 400; font-size: 11px; color: #5d5a54; letter-spacing: 0; }
.doc__k { font-family: var(--mono); font-size: 10.5px; color: #5d5a54; text-align: right; line-height: 1.5; }
.doc__title { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5d5a54; }
.doc__rows { margin-top: 10px; border-top: 1px solid #1b1a1726; }
.doc__rows div { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid #1b1a171a; font-size: 12.5px; }
.doc__rows b { font-family: var(--mono); font-weight: 500; font-size: 12px; }
.doc__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 12px; color: #5d5a54; }
.doc__total b { font-size: 24px; letter-spacing: -0.03em; color: var(--paper-ink); font-weight: 600; }

.doc--po {
  right: 4px; top: 0; width: 230px; padding: 18px; background: #fbf8f3; border: 1px solid var(--line-2); color: var(--ink);
  transform: rotate(4deg); box-shadow: 0 30px 60px -30px rgba(70,48,28,0.256);
}
.doc--po .doc__k { text-align: left; color: var(--ink-2); }
.doc--po p + p { margin-top: 6px; }
.doc--po .num { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.doc--erp {
  right: 26px; bottom: 30px; width: 250px; padding: 16px 18px; border-radius: 14px;
  background: var(--cu); color: var(--cu-ink); transform: rotate(-3deg); box-shadow: 0 30px 60px -30px rgba(70,48,28,0.288);
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
}
.doc--erp svg { width: 40px; height: 40px; fill: var(--cu-ink); }
.doc--erp b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.doc--erp span { font-family: var(--mono); font-size: 11px; }

.console {
  position: absolute; left: 64px; right: 0; top: 96px; padding: 0; border-radius: var(--r-xl);
}
@media (max-width: 560px) { .console { left: 0; right: 0; top: 150px; } .doc--invoice { width: 270px; } .doc--po { width: 190px; } }
.win__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.win__t { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.win__t .ico { color: var(--cu); }
.state { font-family: var(--mono); font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: rgba(40,32,24,0.06); color: var(--ink-2); white-space: nowrap; }
.state.is-wait { background: rgba(134,96,61,0.16); color: var(--cu); }
.state.is-done { background: rgba(47,107,60,0.14); color: var(--ok); }

.run { position: relative; z-index: 3; padding: 8px 20px 4px; }
.step { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: start; }
.step:last-child { border-bottom: 0; }
.step__dot { width: 10px; height: 10px; margin: 6px 0 0 4px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 4px rgba(40,32,24,0.034); transition: background .3s; }
.step.is-on .step__dot { background: var(--ink); }
.step.is-gate .step__dot { background: var(--cu); box-shadow: 0 0 0 5px rgba(134,96,61,0.18); }
.step__t { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.step__m { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.step__time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding-top: 3px; }
.kv { display: grid; grid-template-columns: auto auto; gap: 2px 26px; margin-top: 8px; width: max-content; }
.kv dt { font-size: 11px; color: var(--ink-3); }
.kv dd { font-family: var(--mono); font-size: 13px; }
.gate { display: flex; gap: 8px; margin-top: 10px; }
.console__foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); position: relative; z-index: 3; }
.linkbtn { background: none; border: 0; padding: 6px 0; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 11.5px; min-height: 32px; }
.linkbtn:hover { color: var(--ink); }
[data-approve].is-pulse { animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(134,96,61,0.55); } 80%,100% { box-shadow: 0 0 0 12px rgba(134,96,61,0.0); } }

/* ---------- El lío que se ordena ---------- */
.sort { position: relative; }
.sort__pin { min-height: 100dvh; display: grid; align-content: center; gap: 56px; padding: 96px 0 64px; }
.sort__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.col { --col-a: 1; background: rgba(30, 29, 27, calc(.38 * var(--col-a))); padding: 20px 16px 16px; min-height: 340px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; }
.col::before { opacity: var(--col-a); }
.has-refract .col.lg--refract { background: rgba(30, 29, 27, calc(.3 * var(--col-a))); }
.col__h { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; position: relative; z-index: 3; }
.col__h .ico { color: var(--cu); width: 20px; height: 20px; }
.col__h h3 { font-size: 18px; font-weight: 560; letter-spacing: -0.02em; }
.col__n { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.chip {
  position: relative; z-index: 4; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.35;
  background: #fbf9f5; border: 1px solid var(--line-2); color: var(--ink); will-change: transform;
}
.chip::before { content: "«"; color: var(--cu); margin-right: 1px; }
.chip::after { content: "»"; color: var(--cu); margin-left: 1px; }
.sort__foot { display: flex; gap: 22px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sort__foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .sort__cols { grid-template-columns: 1fr 1fr; }
  .col { min-height: 0; }
}
@media (max-width: 520px) { .sort__cols { grid-template-columns: 1fr; } }

/* ---------- Áreas ---------- */
.areas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; margin-top: 72px; align-items: start; }
.tabs { display: grid; gap: 4px; }
.tab {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; padding: 18px 18px 16px; border-radius: 16px;
  border: 0; background: transparent; cursor: pointer; position: relative; color: var(--ink-2); transition: background .3s, color .3s;
}
.tab:hover { background: rgba(40,32,24,0.025); }
.tab[aria-selected="true"] { background: rgba(40,32,24,0.043); color: var(--ink); }
.tab__n { font-size: 22px; font-weight: 560; letter-spacing: -0.03em; }
.tab__src { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tab__ico { width: 22px; height: 22px; color: var(--ink-3); align-self: center; }
.tab[aria-selected="true"] .tab__ico { color: var(--cu); }
.tab__bar { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 1px; background: transparent; overflow: hidden; }
.tab__bar i { display: block; height: 100%; width: 100%; background: var(--cu); transform-origin: left; transform: scaleX(0); }
.areas__ctl { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding-left: 18px; }

.bench { position: relative; min-height: 460px; }
.bench__src { position: absolute; top: -30px; right: 150px; z-index: 0; padding: 12px 16px 40px; border-radius: 14px; font-family: var(--mono); font-size: 12px; transform: rotate(3deg); transition: background .5s, color .5s; display: inline-flex; gap: 8px; align-items: center; }
.bench__src .ico { width: 16px; height: 16px; }
.bench__src[data-k="ventas"] { background: var(--paper); color: var(--paper-ink); }
.bench__src[data-k="cx"] { background: #2f6f4e; color: #eaf5ee; }
.bench__src[data-k="ops"] { background: var(--cu); color: var(--cu-ink); }
.bench__src[data-k="fin"] { background: #2b3142; color: #e6e9f2; }
.bench__win { position: relative; z-index: 1; border-radius: var(--r-xl); min-height: 460px; display: flex; flex-direction: column; }
.bench__body { position: relative; flex: 1; padding: 22px; z-index: 3; }
.demo { position: absolute; inset: 22px; display: grid; align-content: start; gap: 14px; visibility: hidden; }
.demo.is-active { visibility: visible; }

.card { background: rgba(255,253,249,0.73); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.k { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.who { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; background: #ece6dc; color: var(--ink); border: 1px solid var(--line-2); }
.who b { display: block; font-size: 14.5px; font-weight: 560; letter-spacing: -0.01em; }
.who span { font-size: 13px; color: var(--ink-2); }
.q { margin-top: 10px; font-size: 15px; }
.checks { display: grid; gap: 2px; }
.checks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.checks li .ico { color: var(--ok); width: 18px; height: 18px; }
.checks li em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.pipe__col { border-radius: 12px; border: 1px dashed var(--line-2); padding: 10px; min-height: 76px; }
.pipe__col p { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
.deal { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fbf9f5; border: 1px solid var(--line-2); font-size: 13px; position: absolute; top: 34px; left: 10px; width: calc(33.333% - 25px); }
.deal svg { width: 16px; height: 16px; fill: #ff7a59; flex: none; }
.tag { font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 999px; background: rgba(40,32,24,0.06); color: var(--ink-2); white-space: nowrap; }
.tag--ok { background: rgba(47,107,60,0.14); color: var(--ok); }
.tag--cu { background: rgba(134,96,61,0.16); color: var(--cu); }
.tag--warn { background: rgba(138,90,16,0.14); color: var(--warn); }
.out { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(40,32,24,0.043); border: 1px solid var(--line-2); font-size: 14px; }
.out svg { width: 20px; height: 20px; fill: var(--ink); }

/* atención */
.thread { display: grid; gap: 10px; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; position: relative; }
.bubble--in { background: #fbf9f5; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble--out { justify-self: end; width: 78%; background: rgba(134,96,61,0.1); border: 1px solid rgba(134,96,61,0.4); border-bottom-right-radius: 4px; }
.bubble .k { display: block; margin-bottom: 4px; }
.bubble__meta { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); align-items: center; }
.ticks { color: var(--ink-3); display: inline-flex; }
.ticks.is-read { color: #2f6fd1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.approve { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.cursor { position: absolute; width: 22px; height: 22px; z-index: 9; pointer-events: none; opacity: 0; }
.cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(70,48,28,0.192)); }

/* operaciones */
.ops { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.pdf { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 6px; padding: 14px 12px; aspect-ratio: 3 / 4; overflow: hidden; }
.pdf p { font-size: 9.5px; font-weight: 700; letter-spacing: -.01em; }
.pdf i { display: block; height: 5px; border-radius: 2px; background: #1b1a1730; margin-top: 7px; }
.pdf i.w6 { width: 60%; } .pdf i.w8 { width: 80%; } .pdf i.w4 { width: 40%; }
.pdf .ln { display: grid; grid-template-columns: 1fr 22px; gap: 6px; margin-top: 9px; font-family: var(--mono); font-size: 7.5px; color: #3d3a35; }
.scan { position: absolute; left: 0; right: 0; height: 26px; top: 0; background: linear-gradient(180deg, transparent, rgba(134,96,61,0.45), transparent); mix-blend-mode: multiply; opacity: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--ink-3); padding: 0 8px 8px; border-bottom: 1px solid var(--line-2); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.tbl td:first-child { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.tbl td:last-child { text-align: right; font-family: var(--mono); }
.tbl tr.is-hit td { background: rgba(134,96,61,0.08); }

/* finanzas */
.recon { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 64px; }
.recon__h { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.mv { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(255,253,249,0.73); border: 1px solid var(--line); font-size: 13.5px; position: relative; z-index: 2; }
.mv b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.mv.is-odd { border-color: rgba(138,90,16,0.5); }
.mv.is-none { color: var(--ink-3); border-style: dashed; justify-content: center; }
.recon svg.links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.recon svg.links path { fill: none; stroke: var(--cu); stroke-width: 1.5; }

/* ---------- Cómo trabajamos ---------- */
.how { position: relative; }
.how__pin { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; padding: 104px 0 48px; }
.how__side { display: grid; gap: 40px; align-content: center; }
.how__side .h2 { font-size: clamp(30px, 3.2vw, 46px); }
.rail { position: relative; display: grid; gap: 0; padding-left: 22px; }
.rail::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.rail__fill { position: absolute; left: 0; top: 8px; width: 1px; height: calc(100% - 16px); background: var(--cu); transform-origin: top; transform: scaleY(0); }
.rail li { padding: 12px 0; color: var(--ink-3); transition: color .4s var(--ease); position: relative; }
.rail li::before { content: ""; position: absolute; left: -26px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink-3); transition: background .3s, box-shadow .3s; }
.rail li.is-on { color: var(--ink); }
.rail li.is-on::before { background: var(--cu); box-shadow: 0 0 0 4px rgba(134,96,61,0.18); }
.rail li.is-past::before { background: var(--ink-2); box-shadow: none; }
.rail b { display: block; font-size: 22px; font-weight: 560; letter-spacing: -0.03em; }
.rail span { font-size: 14px; color: inherit; opacity: .85; }

.case { position: relative; border-radius: var(--r-xl); min-height: 480px; display: flex; flex-direction: column; }
.case__back { display: none; }
.case__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.case__body { position: relative; flex: 1; z-index: 3; }
.pane { position: relative; padding: 22px; display: grid; align-content: start; gap: 18px; border-bottom: 1px solid var(--line); }
.pane:last-child { border-bottom: 0; }
:root:not(.motion) .pane__title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
:root:not(.motion) .pane__title b { font-size: 22px; font-weight: 560; letter-spacing: -0.03em; }
:root:not(.motion) .pane > .pend { display: none; }
:root:not(.motion) .stamp { opacity: 1; }
@media (min-width: 981px) {
  .motion .pane { position: absolute; inset: 0; border-bottom: 0; }
  :root:not(.motion) .how__pin { align-items: start; }
  :root:not(.motion) .how__side { position: sticky; top: 110px; }
}
.pane__who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.who-cell { padding: 14px 16px; border-radius: 14px; background: rgba(255,253,249,0.68); border: 1px solid var(--line); }
.who-cell .k { display: flex; align-items: center; gap: 8px; }
.who-cell .k .ico { width: 15px; height: 15px; }
.who-cell p:last-child { margin-top: 6px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.who-cell--us { border-color: rgba(134,96,61,0.35); }
.who-cell--us .k { color: var(--cu); }
.pane__title { display: none; }
.pend { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.pend::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }

/* mapa de procesos */
.map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; align-items: center; position: relative; padding: 34px 0 10px; }
.node { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--ink-2); padding: 0 4px; }
.node__i { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fbf9f5; border: 1px solid var(--line-2); color: var(--ink); position: relative; z-index: 2; }
.node__i .ico { width: 22px; height: 22px; }
.node--hand .node__i { border-color: rgba(134,96,61,0.55); }
.node small { font-family: var(--mono); font-size: 10.5px; color: var(--cu); }
.node:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 1px; background: var(--line-2); transform-origin: left; transform: scaleX(var(--k, 1)); }
.bracket { position: absolute; top: 0; height: 120px; border: 1px solid var(--cu); border-bottom: 0; border-radius: 14px 14px 0 0; left: 20%; right: 20%; display: flex; justify-content: center; }
.bracket span { transform: translateY(-50%); background: var(--bg-3); padding: 2px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; color: var(--cu); border: 1px solid rgba(134,96,61,0.4); height: max-content; }

/* piloto en paralelo */
.para { display: grid; gap: 8px; }
.para__row { display: grid; grid-template-columns: 110px 1fr 1fr 90px; gap: 10px; align-items: center; font-size: 13px; }
.para__row.is-head { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.para__row .doc-id { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.cell { padding: 9px 11px; border-radius: 10px; background: rgba(255,253,249,0.68); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; }
.cell--agent { border-color: rgba(134,96,61,0.35); }
.verdict { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; }
.verdict .ico { width: 16px; height: 16px; }
.verdict.ok { color: var(--ok); }
.verdict.rev { color: var(--warn); }

/* vuestro sí */
.sign { display: grid; gap: 14px; padding: 20px; border-radius: 18px; background: rgba(255,253,249,0.73); border: 1px solid var(--line-2); max-width: 520px; position: relative; }
.sign h4 { margin: 0; font-size: 20px; font-weight: 560; letter-spacing: -0.02em; }
.perm { display: grid; gap: 0; }
.perm li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); align-items: center; }
.sign__act { display: flex; gap: 8px; align-items: center; }
.stamp { position: absolute; right: 18px; top: 18px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; background: rgba(47,107,60,0.14); color: var(--ok); display: inline-flex; gap: 6px; align-items: center; opacity: 0; }

/* soporte */
.watch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: rgba(40,32,24,0.051); }
.heat i.l1 { background: rgba(134,96,61,0.22); } .heat i.l2 { background: rgba(134,96,61,0.45); } .heat i.l3 { background: rgba(134,96,61,0.8); }
.feed li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.feed time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.feed li.is-new { color: var(--ink); }
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ok); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(47,107,60,0.15); }

.needs { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.needs p { font-size: 14px; color: var(--ink-2); margin-right: 6px; }
.needs__l { display: contents; }
.needs li { font-size: 13.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); }

/* Pane estático en móvil y sin movimiento */
@media (max-width: 980px) {
  .areas { grid-template-columns: 1fr; gap: 28px; }
  .tabs { grid-template-columns: repeat(2, 1fr); }
  .how__pin { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .rail { display: none; }
  .case { min-height: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .case::before, .case::after, .case__bar, .case__back { display: none; }
  .case__body { display: grid; gap: 18px; }
  .pane { position: relative; inset: auto; padding: 20px; border-radius: var(--r-lg); background: #f6f2eb; border: 1px solid var(--line); }
  .pane__title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .pane > .pend { display: none; }
  .pane__title b { font-size: 22px; font-weight: 560; letter-spacing: -0.03em; }
}
@media (max-width: 640px) {
  .map { grid-template-columns: 1fr; gap: 14px; justify-items: start; padding-top: 10px; }
  .node { grid-template-columns: 52px 1fr; justify-items: start; text-align: left; align-items: center; }
  .node:not(:last-child)::after, .bracket { display: none; }
  .node small { grid-column: 2; margin-top: -8px; }
  .para__row { grid-template-columns: 1fr 1fr; }
  .para__row .doc-id { grid-column: 1 / -1; }
  .watch { grid-template-columns: 1fr; }
  .recon { gap: 8px 22px; }
  .ops { grid-template-columns: 1fr; }
  .pdf { width: 150px; }
  .bench, .bench__win { min-height: 600px; }
  .pane__who { grid-template-columns: 1fr; }
}

/* ---------- Cierre ---------- */
.close { padding: 120px 0 56px; border-top: 1px solid var(--line); }
.close__in { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 96px; font-size: 13px; color: var(--ink-3); }

/* Selector de direcciones (herramienta de revisión, no forma parte de la web) */
.dirs { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,253,249,0.92); border: 1px solid var(--line-2); font: 500 12.5px/1 var(--sans); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dirs a, .dirs span { white-space: nowrap; padding: 9px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-2); }
.dirs span { color: var(--ink-3); }
.dirs a[aria-current] { background: var(--ink); color: var(--bg); }

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

@media (max-width: 640px) { .dirs [data-long] { display: none; } }

/* ================= Página completa: secciones que no están en la dirección A ================= */
.section > .wrap > .h2 { margin-bottom: 64px; }

/* Hoy / con */
.lanes { display: grid; gap: 16px; }
.lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 24px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); }
.lane--new { border: 0; }
.lane__l { font-size: 18px; font-weight: 560; letter-spacing: -0.02em; color: var(--ink-2); position: relative; z-index: 3; }
.lane--new .lane__l { color: var(--ink); }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; z-index: 3; }
.flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fnode { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding-right: 14px; }
.fnode__i { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fbf9f5; border: 1px solid var(--line-2); position: relative; z-index: 2; }
.fnode__i .ico { width: 20px; height: 20px; }
.fnode b { font-size: 14px; font-weight: 560; letter-spacing: -0.01em; line-height: 1.25; }
.fnode small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.fnode--hand .fnode__i { border-color: rgba(134,96,61,0.5); color: var(--ink-2); }
.fnode--hand small { color: var(--cu); }
.fnode--auto .fnode__i { background: var(--paper); color: var(--paper-ink); border-color: transparent; }
.fnode--gate .fnode__i { background: var(--cu); color: var(--cu-ink); border-color: transparent; }
.fnode--gate small { color: var(--cu); }
@media (max-width: 1000px) {
  .lane { grid-template-columns: 1fr; }
  .flow, .flow--4 { grid-template-columns: 1fr; gap: 12px; }
}

/* Qué hacemos: bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { grid-column: span 2; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 14px 14px 22px; border-radius: var(--r-xl); background: var(--bg-2); border: 1px solid var(--line); }
.tile--wide { grid-column: span 4; grid-row: span 1; }
.tile--labs { grid-column: span 2; grid-row: span 2; }
.tile .h3, .tile__p { padding: 0 8px; }
.tile__p { font-size: 14.5px; color: var(--ink-2); }
.tile__shot { position: relative; height: 230px; border-radius: 18px; background: #f6f2eb; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; margin-bottom: 8px; }
.tile--wide .tile__shot { height: 300px; }
.tile__shot--photo { height: auto; aspect-ratio: auto; background: none; border: 0; }
.tile--labs .tile__shot--photo { height: 100%; min-height: 420px; }
.tile__shot--photo img { width: 100%; height: 100%; object-fit: cover; }
.tile__obj { position: absolute; left: 28px; top: 26px; width: 220px; padding: 16px 18px; border-radius: 6px; transform: rotate(-4deg); font-size: 13px; line-height: 1.9; }
.tile__obj--paper { background: var(--paper); color: var(--paper-ink); }
.tile__obj--paper .k { color: #5d5a54; }
.tile__win { position: absolute; right: 24px; bottom: 22px; width: min(480px, 78%); border-radius: 18px; }
.perm2 { position: relative; z-index: 3; padding: 4px 16px 8px; }
.perm2 li { display: grid; grid-template-columns: 1fr auto 34px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.perm2 li:last-child { border-bottom: 0; }
.sw { width: 34px; height: 20px; border-radius: 999px; background: rgba(40,32,24,0.119); position: relative; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); transition: transform .4s var(--ease), background .4s; }
.sw.is-on { background: rgba(47,107,60,0.35); }
.sw.is-on::after { transform: translateX(14px); background: var(--ink); }
.sw.is-gate { background: rgba(134,96,61,0.35); }
.sw.is-gate::after { transform: translateX(7px); background: var(--cu); }
.sync2 { display: grid; gap: 10px; width: 86%; }
.sync2__row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; }
.sync2__row span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; background: #f8f5ef; border: 1px solid var(--line-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.sync2__row svg { width: 15px; height: 15px; fill: var(--ink-2); flex: none; }
.sync2__row i { height: 1px; background: var(--line-2); position: relative; overflow: visible; }
.sync2__row i::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--cu); animation: travel 2.4s var(--ease) infinite; }
.sync2__row:nth-child(2) i::after { animation-delay: .8s; }
.sync2__row:nth-child(3) i::after { animation-delay: 1.6s; }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(36px); opacity: 0; } }
.site2 { width: 84%; border-radius: 10px; overflow: hidden; background: var(--paper); color: var(--paper-ink); box-shadow: 0 20px 40px -20px rgba(70,48,28,0.256); }
.site2__bar { display: flex; gap: 5px; align-items: center; padding: 8px 10px; background: #d9d4c9; font-family: var(--mono); font-size: 10px; color: #5d5a54; }
.site2__bar i { width: 7px; height: 7px; border-radius: 50%; background: #b9b3a6; }
.site2__bar span { margin-left: 8px; }
.site2__body { padding: 14px 16px 18px; display: grid; gap: 10px; }
.site2__nav { display: flex; justify-content: space-between; font-size: 10.5px; color: #5d5a54; }
.site2__nav b { color: var(--paper-ink); }
.site2__h { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; max-width: 14ch; }
.site2__btn { justify-self: start; font-size: 11px; padding: 6px 10px; border-radius: 999px; background: #3b2314; color: var(--paper); }
.agenda2 { display: grid; gap: 10px; width: 84%; }
.agenda2 li { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: #f8f5ef; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.agenda2 li.is-done { color: var(--ink); }
.agenda2 li.is-done .ico { color: var(--ok); }
.agenda2 li .ico { width: 18px; height: 18px; color: var(--cu); }
@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile, .tile--wide, .tile--labs { grid-column: span 2; grid-row: auto; }
  .tile--labs .tile__shot--photo { min-height: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  .tile__obj { display: none; }
  .tile__win { right: 12px; left: 12px; width: auto; bottom: 12px; }
  .tile--wide .tile__shot { height: 260px; }
  .perm2 li { font-size: 12.5px; }
}

/* Control */
.control { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.control .h2 { margin: 0; }
.promises { display: grid; gap: 4px; margin-top: 36px; }
.promises li { display: flex; gap: 14px; align-items: center; font-size: 20px; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line); }
.promises .ico { color: var(--cu); width: 22px; height: 22px; }
.control .pend { margin-top: 20px; }
.log { border-radius: var(--r-xl); }
.log__rows { position: relative; z-index: 3; padding: 6px 20px; }
.log__rows li { display: grid; grid-template-columns: 78px 120px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.log__rows time { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.log__rows li > span:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.log__rows li.is-gate { color: var(--cu); }
.log__rows li.is-gate > span:nth-child(2) { color: var(--cu); }
.log__rows li.is-deny > span:last-child { color: var(--warn); }
.log__cap { position: relative; z-index: 3; padding: 12px 20px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 980px) { .control { grid-template-columns: 1fr; } .log__rows li { grid-template-columns: 70px 1fr; } .log__rows li > span:last-child { grid-column: 1 / -1; } }

/* Casos */
.cases { border-top: 1px solid var(--line-2); }
.cases li { display: grid; grid-template-columns: 230px minmax(0, 1fr) 24px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); transition: background .3s; }
.cases li:hover { background: rgba(40,32,24,0.017); }
.cases__s { display: inline-flex; gap: 12px; align-items: center; font-size: 18px; font-weight: 560; letter-spacing: -0.02em; }
.cases__s .ico { color: var(--cu); width: 20px; height: 20px; }
.cases__b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(126,119,108,0.6); font-size: 15px; }
.cases__ar { color: var(--ink-3); }
.cases__a { font-size: 17px; letter-spacing: -0.01em; }
@media (max-width: 900px) { .cases li { grid-template-columns: 1fr; gap: 8px; } .cases__ar { display: none; } }

/* Integraciones */
.logos { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.logos li { aspect-ratio: 1.3; display: grid; place-items: center; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); transition: background .3s, border-color .3s; }
.logos li:hover { background: #ece6dc; border-color: var(--line-2); }
.logos svg { width: 30px; height: 30px; fill: var(--ink-2); transition: fill .3s; }
.logos li:hover svg { fill: var(--ink); }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Foundation */
.found__brand { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
.found__brand svg { width: 22px; height: 22px; fill: var(--cu); }
.found { display: grid; grid-template-columns: 1.15fr 1fr 0.9fr; gap: 16px; align-items: start; }
.site-card { display: grid; gap: 12px; text-decoration: none; }
.browser { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #ece6dc; transition: transform .5s var(--ease); }
a.site-card:hover .browser { transform: translateY(-4px); }
.browser__bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfc8bb; }
.browser__bar span { margin-left: 10px; }
.browser img { width: 100%; height: auto; display: block; }
.site-card__cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.site-card__cap .ico { color: var(--cu); }
.cms { padding: 20px; border-radius: var(--r-xl); display: grid; gap: 14px; }
.cms > * { position: relative; z-index: 3; }
.cms__h { font-size: 17px; font-weight: 560; letter-spacing: -0.02em; }
.cms .bubble { max-width: 100%; }
.cms__draft { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: rgba(255,253,249,0.73); border: 1px solid var(--line-2); font-size: 14px; }
.cms__draft .k { display: flex; gap: 6px; align-items: center; }
.cms__m { color: var(--ink-2); }
.cms .sign__act { margin-top: 8px; }
@media (max-width: 1000px) { .found { grid-template-columns: 1fr 1fr; } .cms { grid-column: 1 / -1; } }
@media (max-width: 640px) { .found { grid-template-columns: 1fr; } }

/* Preguntas */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.faq .h2 { margin: 0; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; min-height: 44px; cursor: pointer; font-size: 18px; letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico { color: var(--ink-3); transition: transform .3s var(--ease); }
.qa[open] summary .ico { transform: rotate(45deg); color: var(--cu); }
.qa p { padding: 0 0 22px; color: var(--ink-2); max-width: 60ch; }
.qa .pend { margin-left: 8px; }
.lead a { color: var(--ink); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 24px; } }

/* Cierre y pie */
.close__act { display: grid; gap: 22px; justify-items: start; }
.next { display: grid; gap: 8px; }
.next li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.next span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-2); color: var(--ink); }
.fcols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line); }
.fcols__brand p { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.fcols__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fcols__nav ul { margin-top: 12px; display: grid; gap: 4px; }
.fcols__nav a, .fcols__nav span { font-size: 14px; color: var(--ink-2); text-decoration: none; display: inline-block; padding: 6px 0; }
.fcols__nav a:hover { color: var(--ink); }
.foot { margin-top: 48px; }
.foot__legal { display: flex; gap: 18px; }
.foot__legal a { color: var(--ink-3); text-decoration: none; padding: 6px 0; }
@media (max-width: 900px) { .fcols { grid-template-columns: 1fr; } .fcols__nav { grid-template-columns: 1fr 1fr; } }
.section > .wrap > .h2 + .areas { margin-top: 0; }

/* ================= v7.1 · Ajustes tras elegir la dirección A ================= */

/* Fondo vivo: retícula que reacciona al puntero (fx.js) */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .close { position: relative; z-index: 1; }

/* Portada: planos separados. El ticket sale de detrás del texto y la consola es cristal oscuro. */
.stage { height: 640px; }
.doc--invoice { left: auto; right: 0; top: 0; width: 280px; transform: rotate(4deg); filter: brightness(.8) saturate(.9); }
.doc--po { right: auto; left: 8px; top: 46px; transform: rotate(-4deg); }
.doc--erp { right: 0; bottom: 0; }
.console { left: 0; right: 64px; top: 158px; background: rgba(255,253,249,0.92); }
.has-refract .console.lg--refract { background: rgba(255,253,249,0.88); }
@media (max-width: 560px) {
  .stage { height: 700px; }
  .doc--invoice { width: 230px; right: -8px; }
  .doc--po { width: 180px; }
  .console { left: 0; right: 0; top: 170px; }
}

/* Sistema de botones: borde fino con luz que lo recorre, relleno que entra, flecha que se desplaza, etiqueta en mono */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: stretch; gap: 0; padding: 0; min-height: 50px;
  border-radius: 10px; border: 0; box-shadow: none;
  background: rgba(255,253,249,0.73); color: var(--ink);
  font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--line-2), var(--line-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn--cu::before {
  background: conic-gradient(from var(--ang), rgba(134,96,61,0.28) 0deg 250deg, #b08a62 292deg, #e3caa9 312deg, rgba(134,96,61,0.28) 345deg);
  animation: btn-ang 4.8s linear infinite;
}
@keyframes btn-ang { to { --ang: 360deg; } }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cu);
  transform: scaleX(0); transform-origin: right center; transition: transform .55s var(--ease);
}
.btn--ghost::after { background: var(--ink); }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.btn--cu:hover, .btn--cu:focus-visible { color: var(--cu-ink); background: rgba(255,253,249,0.73); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); background: rgba(255,253,249,0.73); }
.btn:active { transform: scale(.98); }
.btn__l { display: inline-flex; align-items: center; padding: 0 20px; white-space: nowrap; }
.btn__a { display: grid; place-items: center; width: 50px; border-left: 1px solid var(--line-2); position: relative; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; }
.btn--cu .btn__a { background: var(--cu); color: var(--cu-ink); border-left-color: transparent; }
.btn--cu:hover .btn__a { background: var(--cu-ink); color: var(--cu); }
.btn__a .ico { width: 17px; height: 17px; }
.btn:hover .btn__a .ico, .btn:focus-visible .btn__a .ico { animation: btn-arrow .6s var(--ease); }
@keyframes btn-arrow { 0% { transform: translate(0, 0); } 45% { transform: translate(140%, 0); opacity: 0; } 46% { transform: translate(-140%, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
.btn--sm { min-height: 40px; }
.btn--sm .btn__l { padding: 0 14px; font-size: 11.5px; }
.btn--sm .btn__a { width: 40px; }
.btn--lg { min-height: 60px; }
.btn--lg .btn__l { padding: 0 26px; font-size: 13.5px; }
.btn--lg .btn__a { width: 60px; }
/* Botones dentro de las pantallas de producto: compactos, sin luz ni relleno */
.btn--xs { min-height: 32px; padding: 0 12px; gap: 6px; align-items: center; border-radius: 7px; font-size: 11px; letter-spacing: 0.04em; }
.btn--xs::after { display: none; }
.btn--xs.btn--cu { background: var(--cu); color: var(--cu-ink); }
.btn--xs.btn--cu::before { animation: none; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); }
.btn--xs.btn--ghost { background: rgba(40,32,24,0.043); }
.btn--xs .ico { width: 14px; height: 14px; }

/* Navegación: se esconde al bajar, vuelve al subir, y marca la sección */
.nav-wrap { transition: transform .5s var(--ease); }
.nav-wrap.is-hidden { transform: translateY(-110%); }
.nav__links a { position: relative; padding: 8px 0; }
.nav__links a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--cu); transform: translateX(-50%) scale(0); transition: transform .35s var(--ease); }
.nav__links a.is-on { color: var(--ink); }
.nav__links a.is-on::after { transform: translateX(-50%) scale(1); }

/* Costura entre secciones: una línea que se dibuja y un pulso de cobre que la recorre */
.seam { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; z-index: 2; }
.seam i { position: absolute; inset: 0; background: var(--line); transform: scaleX(0); transform-origin: left; }
.seam b { position: absolute; top: -1px; left: 0; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--cu), transparent); opacity: 0; }

/* Microinteracciones */
.tile { transition: border-color .4s var(--ease), background .4s var(--ease); }
.tile:hover { border-color: var(--line-2); background: #f7f3ec; }
.tile__shot { transition: transform .6s var(--ease); }
.tile:hover .tile__shot { transform: translateY(-4px); }
.tile__shot--photo img { transition: transform 1.2s var(--ease); }
.tile:hover .tile__shot--photo img { transform: scale(1.04); }
.tile__obj { transition: transform .6s var(--ease); }
.tile:hover .tile__obj { transform: rotate(-7deg) translate(-6px, -4px); }
.cases li { transition: background .3s, padding .5s var(--ease); }
.cases li:hover { padding-left: 14px; padding-right: 14px; background: rgba(40,32,24,0.021); }
.cases__ar { transition: transform .5s var(--ease), color .3s; }
.cases li:hover .cases__ar { transform: translateX(6px); color: var(--cu); }
.cases li:hover .cases__b { color: var(--ink-2); }
.logos li { transition: transform .45s var(--ease), background .3s, border-color .3s; }
.logos li:hover { transform: translateY(-3px); }
.tab { transition: background .3s, color .3s, transform .4s var(--ease); }
.tab:hover { transform: translateX(4px); }
.promises li { transition: padding .4s var(--ease), color .3s; }
.promises li:hover { padding-left: 8px; }
.qa summary:hover { color: var(--cu); }
.qa p { overflow: hidden; }
.site-card__cap .ico { transition: transform .4s var(--ease); }
a.site-card:hover .site-card__cap .ico { transform: translate(3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .btn--cu::before { animation: none; }
  .nav-wrap { transition: none; }
}

/* El canal de entrada asoma por encima de la ventana, sin quedar emborronado detrás del título */
.bench__src { top: -24px; padding: 8px 14px 18px; right: 170px; }
@media (max-width: 560px) { .nav .btn--sm .btn__l { padding: 0 10px; font-size: 10.5px; letter-spacing: .04em; } .nav .btn--sm .btn__a { width: 34px; } }

/* ================= v7.2 ================= */
.cta-sec, .footer, .found-strip { position: relative; z-index: 1; }

/* Foundation, breve */
.found-strip { padding: 0 0 clamp(72px, 9vw, 120px); }
.found-strip__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 26px; border-radius: var(--r-lg); }
.found-strip__in > * { position: relative; z-index: 3; }
.found-strip__k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.found-strip__k svg { width: 20px; height: 20px; fill: var(--cu); }
.found-strip__h { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.found-strip__a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 8px 0; }
.found-strip__a .ico { color: var(--cu); transition: transform .4s var(--ease); }
.found-strip__a:hover .ico { transform: translate(3px, -3px); }
.found-strip__tag { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
@media (max-width: 900px) { .found-strip__in { grid-template-columns: 1fr; gap: 12px; } .found-strip__a { white-space: normal; flex-wrap: wrap; } }

/* Cierre con la estética del CTA de la v4: cristal sobre un disco de cobre */
.cta { position: relative; padding: 48px 0; }
.cta__disc { position: absolute; width: 440px; height: 440px; right: -30px; top: -10px; border-radius: 50%; background: var(--cu-2); }
.cta__bar { position: absolute; left: 6%; bottom: 18px; width: 220px; height: 22px; border-radius: 6px; background: #ece6dc; }
.cta__panel { position: relative; z-index: 1; padding: clamp(32px, 6vw, 76px); display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; border-radius: var(--r-xl); background: rgba(255,253,249,0.78); }
.has-refract .cta__panel.lg--refract { background: rgba(255,253,249,0.7); }
.cta__panel > * { position: relative; z-index: 3; }
.cta__copy { display: grid; gap: 20px; justify-items: start; }
.cta__h { margin: 0; font-size: clamp(44px, 6vw, 84px); max-width: 12ch; }
.cta__acts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.cta__mail { color: var(--ink-2); font-size: 15px; text-underline-offset: 4px; }
.cta__mail:hover { color: var(--ink); }
.cta__steps { display: grid; gap: 10px; }
.cta__steps li { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 14px; background: rgba(255,253,249,0.73); box-shadow: inset 0 0 0 1px var(--line); font-weight: 520; transition: transform .45s var(--ease), box-shadow .3s; }
.cta__steps li:hover { transform: translateX(-6px); box-shadow: inset 0 0 0 1px var(--line-2); }
.cta__steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--mono); font-size: 12.5px; color: var(--cu-ink); background: var(--cu); flex: none; }
.cta__steps li + li span { color: var(--ink); background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 900px) { .cta__panel { grid-template-columns: 1fr; } .cta__disc { width: 280px; height: 280px; right: -70px; top: -20px; } }

/* Pie de la v4, en carbón y cobre */
.footer { padding: clamp(80px, 10vw, 128px) 0 0; overflow: hidden; }
.footer__panel { padding: clamp(28px, 4vw, 48px) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px 48px; }
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand p { color: var(--ink-2); max-width: 32ch; font-size: 15px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__h { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.footer__cols ul { display: grid; gap: 4px; }
.footer__cols a, .footer__cols span { display: inline-block; padding: 5px 0; color: var(--ink-2); text-decoration: none; font-size: 14.5px; transition: color .25s; }
.footer__cols a:hover { color: var(--cu); }
.footer__lines { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.footer__lines a { color: var(--ink-2); }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 13px; }
.footer__legal-links { display: flex; gap: 20px; }
.footer__legal a { color: var(--ink-3); }
.wordmark { margin: clamp(24px, 4vw, 48px) 0 -0.14em; text-align: center; white-space: nowrap; user-select: none; font-weight: 600; letter-spacing: -0.06em; line-height: .9; font-size: clamp(4rem, 18.4vw, 18rem); color: color-mix(in srgb, var(--cu) 62%, var(--bg)); text-shadow: 0 0 60px color-mix(in srgb, var(--cu) 22%, transparent); }
@media (max-width: 900px) { .footer__panel { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: 1fr 1fr; } }

.cta-sec { overflow-x: clip; }

/* v7.3 · Cierre: el cristal de la v4 solo sobre la seda, con el texto de la v7 */
.cta__disc { display: none; }
.cta__panel { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
.cta__panel .h2 { margin: 0; max-width: 18ch; }
.cta__panel .close__act { justify-items: start; }
.cta__panel .next li { transition: transform .45s var(--ease), color .3s; }
.cta__panel .next li:hover { transform: translateX(4px); color: var(--ink); }
@media (max-width: 900px) { .cta__panel { grid-template-columns: 1fr; align-items: start; } }
.seam { overflow: hidden; height: 3px; top: -1px; }

/* Conmutador de tema (oscuro / claro) en la barra de revisión */
.dirs__div { width: 1px; padding: 0 !important; margin: 6px 4px; background: var(--line-2); }
.dirs a.tema { color: var(--ink-2); }
.dirs a.tema.is-on { color: var(--cu); box-shadow: inset 0 0 0 1px var(--line-2); }


/* ================= Ajustes propios del tema claro ================= */
body::after { opacity: .035; mix-blend-mode: multiply; }
/* Cristal lechoso: blanco translúcido, canto de luz y sombra de profundidad cálida */
.lg {
  background: rgba(255, 253, 249, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(120, 90, 60, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(70, 48, 28, 0.06),
    0 26px 60px -24px rgba(70, 48, 28, 0.28);
}
.has-refract .lg.lg--refract { background: rgba(255, 253, 249, 0.44); -webkit-backdrop-filter: var(--lg-filter) blur(6px) saturate(140%); backdrop-filter: var(--lg-filter) blur(6px) saturate(140%); }
.lg::before { background: linear-gradient(158deg, rgba(255,255,255,1), rgba(255,255,255,.35) 26%, rgba(134,96,61,.10) 55%, rgba(255,255,255,.2) 74%, rgba(255,255,255,.9)); }
.lg::after { background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.55), transparent 60%); }
.console, .has-refract .console.lg--refract { background: rgba(255, 253, 249, 0.66); }
.cta__panel, .has-refract .cta__panel.lg--refract { background: rgba(255, 253, 249, 0.5); }
.has-refract .col.lg--refract, .col { background: rgba(255, 253, 249, calc(.5 * var(--col-a))); }
@media (prefers-reduced-transparency: reduce) { .lg, .has-refract .lg.lg--refract { background: #fbf9f5; } }

/* Documentos: el ticket blanco sobre papel necesita sombra para separarse */
.doc--invoice { background: #fffdf9; filter: none; box-shadow: 0 30px 60px -28px rgba(70,48,28,.35), 0 1px 0 rgba(70,48,28,.08); }
.doc--po { box-shadow: 0 30px 60px -30px rgba(70,48,28,.3); }
.doc--erp { box-shadow: 0 30px 60px -30px rgba(70,48,28,.35); }

/* Botones */
.btn { background: rgba(255, 253, 249, 0.6); }
.btn--cu:hover, .btn--cu:focus-visible { color: var(--cu-ink); background: rgba(255, 253, 249, 0.6); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); background: rgba(255, 253, 249, 0.6); }
.btn--cu:hover .btn__a { background: var(--cu-ink); color: var(--cu); }
.btn--cu::before { background: conic-gradient(from var(--ang), rgba(134,96,61,.25) 0deg 250deg, #b08a62 292deg, #fff 312deg, rgba(134,96,61,.25) 345deg); }

/* Marcas y logos en tinta */
.brand__mark { background: #2a1a10; color: #f6efe4; }
.deal svg { fill: #d1502d; }
.bench__src[data-k="ventas"] { background: #fffdf9; box-shadow: 0 10px 30px -14px rgba(70,48,28,.3); }
.bench__src[data-k="cx"] { background: #2f6f4e; color: #f4fbf6; }
.bench__src[data-k="fin"] { background: #2b3142; color: #f2f4f9; }
.tile__shot { background: #f6f2eb; }
.fnode--auto .fnode__i { background: #1d1b18; color: #f6efe4; }
.site2 { box-shadow: 0 20px 40px -20px rgba(70,48,28,.35); }
.wordmark { color: color-mix(in srgb, var(--cu) 58%, var(--bg)); text-shadow: none; }
.dirs { background: rgba(255,253,249,.88); }
.dirs a[aria-current] { background: var(--ink); color: var(--bg); }