/* APACHI · página comercial (apachi.musoqpe.com). Carbón, grafito, lima y neutros; letras OFL
   servidas desde /apachi/fuentes (Archivo 800 al 112 %, Instrument Sans y Geist Mono) e íconos de
   Phosphor (MIT) en el sprite del HTML. Sin dependencias. Las ilustraciones usan datos de ejemplo. */

@font-face { font-family: "Archivo APACHI"; font-weight: 800; font-display: swap; src: url("/apachi/fuentes/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap; src: url("/apachi/fuentes/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-display: swap; src: url("/apachi/fuentes/geist-mono.woff2") format("woff2"); }

:root {
  --carbon: #0E100F;
  --grafito: #1A1D1B;
  --grafito-2: #232724;
  --negro: #0A0C0B;
  --linea-o: #2E3330;
  --hueso: #F1F3EE;
  --hueso-2: #A3ABA5;
  --lima: #C6F432;
  --lima-hover: #D6F86A;
  --papel: #F5F6F1;
  --arena: #EAECE5;
  --blanco: #FFFFFF;
  --tinta: #0E100F;
  --texto: #2A2F2C;
  --gris: #5B635E;
  --musgo: #3F5A00;
  --linea-c: rgba(14, 16, 15, .12);
  --ambar: #F2B33D;
  --coral: #FF7A66;

  --f-titulo: "Archivo APACHI", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --cab: 72px;
  --env: 1240px;
  --lado: 32px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--carbon); color: var(--hueso); font: 400 17px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-synthesis: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }
kbd { font: 600 .82em/1 var(--f-mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--linea); background: var(--sup); }

[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.titulo { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.025em; line-height: 1; text-wrap: balance; }
.i { width: 1em; height: 1em; flex: none; fill: currentColor; }
.env { width: 100%; max-width: calc(var(--env) + var(--lado) * 2); margin: 0 auto; padding: 0 var(--lado); }

:focus-visible { outline: 3px solid var(--foco, var(--lima)); outline-offset: 3px; border-radius: 4px; }
.saltar { position: fixed; left: 16px; top: -80px; z-index: 50; background: var(--lima); color: var(--carbon); font-weight: 600; padding: 12px 18px; border-radius: var(--r-pill); text-decoration: none; transition: top .2s var(--ease); }
.saltar:focus { top: 12px; }

/* Temas de sección: cada uno define su fondo, su texto y su acento */
.t-carbon  { --fondo: var(--carbon); --tx: var(--hueso); --tx-2: var(--hueso-2); --linea: var(--linea-o); --sup: var(--grafito); --acento: var(--lima); --foco: var(--lima); }
.t-grafito { --fondo: #151816; --tx: var(--hueso); --tx-2: var(--hueso-2); --linea: var(--linea-o); --sup: var(--grafito-2); --acento: var(--lima); --foco: var(--lima); }
.t-papel   { --fondo: var(--papel); --tx: var(--tinta); --tx-2: var(--gris); --linea: var(--linea-c); --sup: var(--blanco); --acento: var(--musgo); --foco: var(--carbon); }
.t-blanco  { --fondo: var(--blanco); --tx: var(--tinta); --tx-2: var(--gris); --linea: var(--linea-c); --sup: var(--papel); --acento: var(--musgo); --foco: var(--carbon); }
.t-arena   { --fondo: var(--arena); --tx: var(--tinta); --tx-2: #535A55; --linea: rgba(14, 16, 15, .14); --sup: var(--blanco); --acento: var(--musgo); --foco: var(--carbon); }
.t-carbon, .t-grafito, .t-papel, .t-blanco, .t-arena { background: var(--fondo); color: var(--tx); }
.acento { color: var(--acento); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-pill); font: 600 17px/1 var(--f-texto); text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn .i { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn--lima { background: var(--lima); color: var(--carbon); }
.btn--lima:hover { background: var(--lima-hover); }
.btn--lima:hover .i { transform: translateX(3px); }
.btn--borde { border-color: var(--linea); color: var(--tx); }
.btn--borde:hover { border-color: var(--hueso-2); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15.5px; }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 18px; }
.btn:active { transform: translateY(1px); }

/* Chips de estado: siempre con texto */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 10px; border-radius: var(--r-pill); font: 600 12.5px/1.2 var(--f-texto); white-space: nowrap; }
.chip--ok-c { background: #EEF8D2; color: var(--musgo); }
.chip--lote-c { background: var(--arena); color: #4A514C; }
.chip--venc-c { background: #FCF0D6; color: #7A5200; }

/* Cejas y cabeceras de sección */
.ceja { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--tx); }
.hero .ceja { min-height: 34px; padding: 6px 14px 6px 12px; border: 1px solid var(--linea); border-radius: var(--r-pill); }
.ceja-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 4px rgba(198, 244, 50, .16); }
.ceja--sec { font: 600 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.ceja--sec::before { content: ""; width: 10px; height: 10px; background: currentColor; border-radius: 2px; }
.ceja--mini { font: 600 12.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); gap: 8px; }
.ceja--mini .i { width: 16px; height: 16px; }

.sec { padding: clamp(80px, 10vw, 136px) 0; position: relative; }
.sec-cab { max-width: 820px; margin-bottom: clamp(44px, 6vw, 72px); }
.h2 { font-size: clamp(36px, 4.6vw, 60px); margin-top: 18px; }
.h3 { font-size: clamp(24px, 2.3vw, 30px); letter-spacing: -.015em; line-height: 1.08; }
.entrada { font-size: 19px; color: var(--tx-2); margin-top: 22px; max-width: 640px; }
.nota { font-size: 14.5px; color: var(--tx-2); }

/* ---------- Cabecera ---------- */
.cab { position: sticky; top: 0; z-index: 30; background: var(--carbon); border-bottom: 1px solid var(--linea-o); --foco: var(--lima); --linea: var(--linea-o); --tx: var(--hueso); }
.cab-in { height: var(--cab); display: flex; align-items: center; gap: 14px; }
.marca { display: inline-flex; border-radius: 6px; }
.marca img { width: 128px; height: auto; }
.de-musoq { font: 600 11.5px/1 var(--f-texto); color: var(--hueso-2); border: 1px solid var(--linea-o); border-radius: var(--r-pill); padding: 6px 9px; text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.de-musoq:hover { color: var(--hueso); border-color: var(--hueso-2); }
.nav { margin-left: auto; display: flex; align-items: center; }
.nav ul { display: flex; gap: 6px; }
.nav li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--hueso-2); text-decoration: none; font-size: 15.5px; font-weight: 500; border-radius: var(--r-pill); }
.nav li a:hover, .nav li a[aria-current="true"] { color: var(--hueso); }
.nav li a[aria-current="true"] { background: rgba(241, 243, 238, .06); }
.nav-cta { display: none; }
.cab-cta { margin-left: 14px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--linea-o); place-items: center; margin-left: auto; }
.menu-btn .i { width: 22px; height: 22px; }
.menu-cerrar { display: none; }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; padding: 64px 0 56px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 0 46%; background: repeating-linear-gradient(90deg, rgba(241, 243, 238, .05) 0 1px, transparent 1px 24px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 80%, transparent); pointer-events: none; }
.hero-in { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 48px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(44px, 5.4vw, 72px); margin: 26px 0 24px; }
.hero h1 .acento { display: block; }
.bajada { font-size: 19px; line-height: 1.55; color: var(--hueso-2); max-width: 470px; }
.bajada strong { color: var(--hueso); font-weight: 600; }
.ctas { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.ctas .btn { padding: 0 20px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; font-size: 14.5px; color: var(--hueso-2); }
.checks li { display: inline-flex; align-items: center; gap: 7px; }
.checks .i { width: 15px; height: 15px; color: var(--lima); }

.hero-arte { position: relative; }
.comp { position: relative; height: 560px; }
.doc { border-radius: var(--r-3); }
.comp .doc { position: absolute; }
.fact { left: 0; top: 0; width: 362px; background: var(--grafito); border: 1px solid var(--linea-o); padding: 16px 18px 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.doc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--hueso-2); }
.doc-h b { color: var(--hueso); font-size: 14px; font-weight: 600; }
.fila { display: grid; grid-template-columns: 18px 1fr 74px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea-o); font-size: 13px; }
.caja { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--linea-o); display: grid; place-items: center; color: transparent; }
.caja.si { background: var(--lima); border-color: var(--lima); color: var(--carbon); }
.caja .i { width: 11px; height: 11px; }
.fila .q b, .tx .q b { font: 500 12.5px/1.2 var(--f-mono); color: var(--hueso); }
.fila .q > span, .tx .q > span { color: var(--hueso-2); font-size: 12.5px; display: block; margin-top: 3px; }
.fila .q em, .tx em { font-style: normal; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; white-space: nowrap; }
.fila .q em::before, .tx em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.e-ok { color: var(--lima); } .e-venc { color: var(--ambar); } .e-sin { color: var(--coral); }
.fila .m { text-align: right; font: 500 13px/1 var(--f-mono); color: var(--hueso); }
.fila.no { opacity: .62; }

.lote { right: 0; top: 70px; width: 366px; z-index: 2; background: var(--papel); color: var(--texto); padding: 20px 22px 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04); }
.lote-h .n { display: block; font: 600 12px/1 var(--f-mono); color: var(--gris); letter-spacing: .04em; }
.lote-t { display: block; font: 800 24px/1.05 var(--f-titulo); color: var(--tinta); margin-top: 7px; letter-spacing: -.01em; }
.lote-h p { font-size: 13px; color: var(--gris); margin-top: 6px; }
.mini-carril { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 14px; position: relative; }
.mini-carril::before, .mini-carril::after { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: rgba(14, 16, 15, .15); }
.mini-carril::after { background: var(--tinta); transform-origin: left; }
.mini-carril span { position: relative; z-index: 1; display: grid; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--tinta); }
.mini-carril span:nth-child(2) { justify-items: center; text-align: center; transform: translateX(-12%); }
.mini-carril span:nth-child(3) { justify-items: center; text-align: center; transform: translateX(12%); }
.mini-carril span:last-child { text-align: right; justify-items: end; }
.mini-carril i { width: 20px; height: 20px; border-radius: 50%; background: var(--tinta); color: var(--lima); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--papel); }
.mini-carril i .i { width: 12px; height: 12px; }
.pago { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea-c); font-size: 13.5px; }
.pago .k { font: 600 12px/1 var(--f-mono); color: var(--gris); }
.pago b { color: var(--tinta); font-weight: 600; display: block; }
.pago small { color: var(--gris); font-size: 12px; }
.pago .m { font: 600 13.5px/1 var(--f-mono); color: var(--tinta); }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--tinta); padding-top: 12px; margin-top: 2px; }
.total span { font-size: 13px; color: var(--gris); }
.total b { font: 700 20px/1 var(--f-mono); color: var(--tinta); white-space: nowrap; }
.sello { position: absolute; right: -16px; top: -30px; transform: rotate(6deg); background: var(--carbon); border: 2.5px solid var(--lima); color: var(--lima); border-radius: 10px; padding: 10px 15px 9px; display: grid; gap: 5px; text-align: center; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); }
.sello b { font: 800 22px/1 var(--f-titulo); letter-spacing: .1em; }
.sello span { font: 500 11.5px/1 var(--f-mono); }

.arch { left: 22px; top: 356px; width: 326px; background: var(--negro); border: 1px solid var(--linea-o); padding: 14px 16px 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.arch-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linea-o); font: 500 12px/1.2 var(--f-mono); color: var(--hueso-2); }
.arch-h b { color: var(--hueso); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.arch-h b .i { width: 15px; height: 15px; color: var(--lima); }
.flecha { position: absolute; color: var(--lima); opacity: .9; }
.flecha .i { width: 22px; height: 22px; }
.f1 { left: 384px; top: 34px; transform: rotate(20deg); }
.f2 { left: 352px; top: 480px; transform: rotate(160deg); }
.hero-pie { display: flex; align-items: center; gap: 16px; min-height: 40px; margin-top: 8px; padding-left: 24px; }
.ejemplo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx-2, var(--hueso-2)); }
.ejemplo-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--lima); }
.ejemplo--claro .ejemplo-punto { background: var(--musgo); }
.repetir { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--hueso); border: 1px solid var(--linea-o); }
.repetir .i { width: 15px; height: 15px; }
.repetir:hover { border-color: var(--hueso-2); }

/* Trama: el archivo de ancho fijo dibujado por posiciones */
.trama { display: grid; gap: 6px; }
.trama-l { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; }
.trama-l b { font: 600 11px/1 var(--f-mono); color: var(--lima); }
.trama-s { display: flex; gap: 3px; height: 9px; }
.trama-s.corta { width: 46%; }
.trama-s i { display: block; height: 100%; border-radius: 2px; background: rgba(241, 243, 238, .16); flex: 1; }
.trama-s i.k { background: rgba(198, 244, 50, .55); }
.trama-s i.m { background: rgba(241, 243, 238, .34); }
.w2 { flex-grow: 2 !important; } .w4 { flex-grow: 4 !important; } .w5 { flex-grow: 5 !important; } .w8 { flex-grow: 8 !important; }
.w10 { flex-grow: 10 !important; } .w12 { flex-grow: 12 !important; } .w13 { flex-grow: 13 !important; } .w15 { flex-grow: 15 !important; }
.w18 { flex-grow: 18 !important; } .w20 { flex-grow: 20 !important; } .w25 { flex-grow: 25 !important; } .w30 { flex-grow: 30 !important; } .w58 { flex-grow: 58 !important; }

/* La secuencia del hero, una sola vez (unos 6 s): se marcan las facturas, se agrupan, avanza el
   carril, se dibuja el archivo y cae el sello. Es CSS puro: sin JavaScript también termina en su
   estado final, y con «reducir movimiento» no se anima. «Ver de nuevo» la repite (apachi.js). */
@media (prefers-reduced-motion: no-preference) {
  .comp.anima .fact .caja.si { animation: marcar .22s var(--ease) both; }
  .comp.anima .fact .fila:nth-child(2) .caja { animation-delay: .5s; }
  .comp.anima .fact .fila:nth-child(3) .caja { animation-delay: .8s; }
  .comp.anima .fact .fila:nth-child(4) .caja { animation-delay: 1.1s; }
  .comp.anima .fact .fila:nth-child(5) .caja { animation-delay: 1.4s; }
  .comp.anima .fact .fila.no { animation: apagar .5s ease 1.7s both; }
  .comp.anima .lote { animation: subir .6s var(--ease) 1.6s both; }
  .comp.anima .pago { animation: entrar .4s var(--ease) both; }
  .comp.anima .pago:nth-of-type(1) { animation-delay: 2.1s; }
  .comp.anima .pago:nth-of-type(2) { animation-delay: 2.3s; }
  .comp.anima .pago:nth-of-type(3) { animation-delay: 2.5s; }
  .comp.anima .total { animation: entrar .4s var(--ease) 2.8s both; }
  .comp.anima .mini-carril::after { animation: avanzar 2.3s linear 3s both; }
  .comp.anima .mini-carril i { animation: encender .25s var(--ease) both; }
  .comp.anima .mini-carril span:nth-child(1) i { animation-delay: 3s; }
  .comp.anima .mini-carril span:nth-child(2) i { animation-delay: 3.7s; }
  .comp.anima .mini-carril span:nth-child(3) i { animation-delay: 4.5s; }
  .comp.anima .mini-carril span:nth-child(4) i { animation-delay: 5.3s; }
  .comp.anima .arch { animation: subir .5s var(--ease) 3.9s both; }
  .comp.anima .arch .trama-s { animation: dibujar .3s var(--ease) both; transform-origin: left; }
  .comp.anima .arch .trama-l:nth-child(1) .trama-s { animation-delay: 4.1s; }
  .comp.anima .arch .trama-l:nth-child(2) .trama-s { animation-delay: 4.2s; }
  .comp.anima .arch .trama-l:nth-child(3) .trama-s { animation-delay: 4.3s; }
  .comp.anima .arch .trama-l:nth-child(4) .trama-s { animation-delay: 4.4s; }
  .comp.anima .arch .trama-l:nth-child(5) .trama-s { animation-delay: 4.5s; }
  .comp.anima .arch .trama-l:nth-child(6) .trama-s { animation-delay: 4.6s; }
  .comp.anima .arch .trama-l:nth-child(7) .trama-s { animation-delay: 4.7s; }
  .comp.anima .arch .trama-l:nth-child(8) .trama-s { animation-delay: 4.8s; }
  .comp.anima .f1 { animation: aparecer .4s ease 1.6s both; }
  .comp.anima .f2 { animation: aparecer .4s ease 3.8s both; }
  .comp.anima .sello { animation: sellar .45s cubic-bezier(.3, 1.4, .5, 1) 5.4s both; }
}
@keyframes marcar { from { background: transparent; border-color: var(--linea-o); color: transparent; transform: scale(.8); } }
@keyframes apagar { from { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes entrar { from { opacity: 0; transform: translateX(-10px); } }
@keyframes avanzar { from { transform: scaleX(0); } }
@keyframes encender { from { background: var(--papel); color: transparent; box-shadow: 0 0 0 3px var(--papel), inset 0 0 0 2px rgba(14, 16, 15, .25); } }
@keyframes dibujar { from { transform: scaleX(0); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes sellar { from { opacity: 0; transform: rotate(6deg) scale(1.7); } }

/* ---------- 2 · Banda de bancos ---------- */
.banda { border-top: 1px solid var(--linea-o); border-bottom: 1px solid var(--linea-o); }
.banda-in { display: flex; align-items: center; gap: 28px 44px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.banda-t { font: 500 15px/1.3 var(--f-texto); color: var(--hueso-2); }
.banda-bancos { display: flex; gap: 14px 40px; flex-wrap: wrap; }
.banda-bancos li { display: flex; align-items: baseline; gap: 10px; }
.banda-bancos b { font: 800 26px/1 var(--f-titulo); letter-spacing: -.01em; color: var(--hueso); }
.banda-bancos span { font-size: 12px; color: var(--hueso-2); letter-spacing: .02em; }
.banda-nota { margin-left: auto; font-size: 14px; color: var(--hueso-2); }
.banda-nota .mono { color: var(--lima); }

/* ---------- 3 · El problema ---------- */
.problema-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.problema-cab { position: sticky; top: calc(var(--cab) + 48px); }
.problema .h2 { font-size: clamp(34px, 4vw, 54px); }
.fricciones { border-top: 1px solid var(--linea); }
.friccion { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 30px 0; border-bottom: 1px solid var(--linea); }
.friccion-n { font-size: 14px; font-weight: 600; color: var(--acento); padding-top: 5px; }
.friccion h3 { font: 600 21px/1.3 var(--f-texto); color: var(--tx); letter-spacing: -.01em; }
.friccion p { color: var(--tx-2); margin-top: 8px; max-width: 540px; }
.friccion p::before { content: "APACHI · "; font: 600 13px/1 var(--f-mono); color: var(--acento); letter-spacing: .02em; }

/* ---------- 4 · Cómo funciona ---------- */
.como-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pasos { position: relative; }
.paso { position: relative; padding: 0 0 36px 0; }
.paso-btn { display: flex; align-items: baseline; gap: 18px; width: 100%; text-align: left; padding: 6px 0; border-radius: 8px; }
.paso-n { font-size: 14px; font-weight: 600; color: var(--lima); min-width: 26px; }
.paso-t { font: 800 clamp(22px, 2.2vw, 28px)/1.12 var(--f-titulo); letter-spacing: -.015em; color: var(--hueso); text-wrap: balance; }
.paso-p { color: var(--hueso-2); margin: 10px 0 0 44px; max-width: 470px; }
.escenario { position: relative; }
.escena { position: relative; }
.escena + .escena { margin-top: 24px; }
.escena::after { content: "Datos de ejemplo"; display: block; margin-top: 14px; padding-left: 14px; font-size: 12.5px; color: var(--hueso-2); background: radial-gradient(circle at 3px 50%, var(--lima) 3px, transparent 3.5px) no-repeat; }

/* Las escenas: documentos del programa con datos de ejemplo */
.escena .doc { position: relative; padding: 20px 22px; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8); }
.doc--osc { background: var(--grafito); border: 1px solid var(--linea-o); }
.doc--negro { background: var(--negro); border: 1px solid var(--linea-o); }
.doc--clr { background: var(--papel); color: var(--texto); }
.doc--clr .doc-h { color: var(--gris); }
.doc--clr .doc-h b { color: var(--tinta); font-size: 15px; }
.doc-sub { font-size: 13px; color: var(--gris); margin: -2px 0 12px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.filtros span { font-size: 12px; font-weight: 600; color: var(--hueso-2); border: 1px solid var(--linea-o); border-radius: var(--r-pill); padding: 4px 10px; }
.filtros .on { color: var(--carbon); background: var(--hueso); border-color: var(--hueso); }
.tx { display: grid; grid-template-columns: 1fr auto 78px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-o); font-size: 13px; }
.tx em { margin-left: 0; }
.tx .m { text-align: right; font: 500 13px/1 var(--f-mono); }
.doc-pie { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hueso-2); border-top: 1px solid var(--linea-o); padding-top: 12px; margin-top: 2px; }
.doc-pie .i { width: 15px; height: 15px; color: var(--lima); }
.pasitos { display: inline-flex; gap: 6px; }
.pasitos span { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); background: var(--arena); color: var(--gris); }
.pasitos .on { background: var(--tinta); color: var(--hueso); }
.campos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin: 6px 0 14px; }
.campo { display: grid; gap: 5px; padding: 10px 12px; border-radius: var(--r-2); background: var(--blanco); border: 1px solid var(--linea-c); }
.campo span { font-size: 11.5px; color: var(--gris); font-weight: 600; }
.campo b { font-size: 13.5px; color: var(--tinta); font-weight: 600; }
.campo--grande b { font-size: 22px; letter-spacing: .02em; }
.imp { display: grid; grid-template-columns: 1fr 90px 120px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linea-c); font-size: 13px; }
.imp-cab { font-size: 11.5px; font-weight: 600; color: var(--gris); border-top: 0; padding-top: 0; }
.imp > :nth-child(n+2) { text-align: right; }
.imp b { color: var(--tinta); font-weight: 600; }
.entrada-n { display: block; padding: 6px 10px; border-radius: var(--r-1); border: 1.5px solid var(--linea-c); background: var(--blanco); color: var(--tinta); }
.doc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--tinta); padding-top: 12px; margin-top: 4px; font-size: 13px; color: var(--gris); }
.doc-total b { font: 700 19px/1 var(--f-mono); color: var(--tinta); white-space: nowrap; }
.boton-falso { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; min-height: 38px; padding: 0 16px; border-radius: var(--r-pill); background: var(--tinta); color: var(--hueso); font-size: 13.5px; font-weight: 600; }
.boton-falso .i { width: 15px; height: 15px; }
.boton-falso--osc { margin: 0; background: var(--lima); color: var(--carbon); min-height: 34px; }
.grp { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linea-c); font-size: 13.5px; }
.grp .k { font-size: 12px; font-weight: 600; color: var(--gris); }
.grp b { color: var(--tinta); font-weight: 600; display: block; }
.grp small { color: var(--gris); font-size: 12px; }
.grp .m { font-weight: 600; color: var(--tinta); }
.lineas { display: grid; gap: 4px; }
.lin { display: grid; grid-template-columns: 30px 1fr 84px; align-items: center; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; }
.lin b { font-size: 11px; color: var(--lima); }
.lin .trama-s { height: 9px; }
.lin small { font: 500 11.5px/1 var(--f-mono); color: var(--hueso-2); text-align: right; white-space: nowrap; }
.lin:hover { background: rgba(241, 243, 238, .05); }
.arch-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea-o); font-size: 12.5px; color: var(--hueso-2); }
.arch-pie > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.arch-pie .i { width: 15px; height: 15px; }
.arch-pie > span:first-child .i { color: var(--lima); }
.confirmar { padding-top: 22px; }
.pagadas { margin: 14px 0 12px; display: grid; gap: 0; }
.pagadas li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--linea-c); font-size: 13px; color: var(--gris); }
.pagadas li span:first-child { color: var(--tinta); font-weight: 600; }
.sello--fijo { right: 22px; top: 70px; transform: rotate(-5deg); }
.confirmar .campo--grande { max-width: calc(100% - 156px); }

/* Con JavaScript: en escritorio el escenario se queda fijo y muestra el paso que está en el centro;
   en celular, los pasos se tocan y la escena va dentro del paso abierto. Sin JS se ve todo. */
.js .escenario-in { position: relative; display: grid; }
.js .escenario-in > .escena { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; transform: translateY(10px); }
.js .como[data-activo="1"] .escena[data-paso="1"], .js .como[data-activo="2"] .escena[data-paso="2"],
.js .como[data-activo="3"] .escena[data-paso="3"], .js .como[data-activo="4"] .escena[data-paso="4"],
.js .como[data-activo="5"] .escena[data-paso="5"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .paso-btn::after { content: ""; position: absolute; left: -24px; top: 12px; width: 3px; height: calc(100% - 24px); border-radius: 2px; background: transparent; transition: background-color .3s var(--ease); }
.js .paso-t, .js .paso-p, .js .paso-n { transition: color .3s var(--ease); }

@media (min-width: 1024px) {
  .js .pasos { padding-left: 24px; border-left: 1px solid var(--linea-o); }
  .js .paso { min-height: 46vh; padding-bottom: 0; }
  .js .paso:not(.activo) .paso-t { color: var(--hueso-2); }
  .js .paso:not(.activo) .paso-p { color: #7D857F; }
  .js .paso:not(.activo) .paso-n { color: #7D857F; }
  .js .paso:last-child { min-height: 30vh; }
  .js .paso.activo .paso-btn::after { background: var(--lima); }
  .js .paso-btn { position: static; }
  .js .paso { position: relative; }
  .js .paso::before { content: ""; position: absolute; left: -25px; top: 6px; width: 3px; height: 36px; border-radius: 2px; background: transparent; transition: background-color .3s var(--ease); }
  .js .paso.activo::before { background: var(--lima); }
  .js .paso-btn::after { display: none; }
  .js .escenario { position: sticky; top: max(calc(var(--cab) + 24px), calc(50vh - 250px)); }
}

/* ---------- 5 · Funciones ---------- */
.bloque { border-radius: var(--r-4); padding: clamp(28px, 4vw, 52px); }
.bloque + .bloque, .bloques-par, .bloque-csv, .apoyo { margin-top: 20px; }
.bloque .h3 { margin: 14px 0 14px; }
.bloque p + p { margin-top: 12px; }
.bloque-texto p:not(.ceja) { color: var(--tx-2); }
.bloque-visor { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.visor { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; }
.visor-arch { background: var(--negro); border: 1px solid var(--linea-o); border-radius: var(--r-3); padding: 16px 18px; }
.lineas--visor .lin { grid-template-columns: 30px 1fr 100px; }
.versiones { display: grid; gap: 10px; align-content: start; }
.version { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px; border-radius: var(--r-3); border: 1px solid var(--linea-o); background: var(--grafito); }
.version .v { font-size: 13px; font-weight: 600; color: var(--hueso-2); }
.version b { font-size: 13.5px; font-weight: 600; }
.version p { font-size: 12.5px; color: var(--hueso-2); line-height: 1.45; margin-top: 4px; }
.huella { display: block; font-size: 11px; color: var(--hueso-2); margin-top: 8px; }
.version--actual { border-color: rgba(198, 244, 50, .45); }
.version--actual .v, .version--actual b { color: var(--lima); }

.bloques-par { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; }
.bloques-par .bloque + .bloque { margin-top: 0; }
.frase { font-size: clamp(34px, 3.8vw, 50px); line-height: .98; letter-spacing: -.025em; }
.bloque-reserva > p:not(.ceja) { color: var(--tx-2); max-width: 470px; }
.mini-lista { margin-top: 26px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); padding: 6px 16px; }
.ml-fila { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 12px; padding: 12px 0; font-size: 13.5px; }
.ml-fila + .ml-fila { border-top: 1px solid var(--linea); }
.ml-fila b { color: var(--tinta); font-weight: 600; }
.ml-fila .chip { justify-self: end; }
.caja--c { border-color: rgba(14, 16, 15, .3); }
.caja--c.si { background: var(--tinta); border-color: var(--tinta); color: var(--lima); }
.caja--lock { border: 0; color: var(--gris); }
.caja--lock .i { width: 15px; height: 15px; }
.bloqueada b { color: var(--gris); }
.bloque-reglas > p:not(.ceja):not(.nota) { color: var(--tx-2); }
.reglas { width: 100%; margin: 22px 0 16px; font-size: 14.5px; background: var(--blanco); border-radius: var(--r-3); overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.reglas th, .reglas td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--linea); vertical-align: top; }
.reglas thead th { border-top: 0; font: 600 11.5px/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--tx-2); background: var(--sup); }
.reglas tbody th { font-weight: 700; color: var(--tinta); }
.reglas td.mono { font-weight: 600; color: var(--tinta); text-align: right; }
.reglas thead th:last-child { text-align: right; }
.bloque-csv { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.csv { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); padding: 8px 0 0; overflow: hidden; font-size: 12.5px; }
.csv-h, .csv-f { display: grid; grid-template-columns: 108px 88px 92px 52px 1fr; gap: 10px; padding: 9px 16px; align-items: center; }
.csv-h { font-size: 11.5px; font-weight: 600; color: var(--gris); }
.csv-h span:last-child, .csv-f > span:nth-child(5) { text-align: right; }
.csv-f { border-top: 1px solid var(--linea); color: var(--tinta); row-gap: 6px; }
.csv-f em { grid-column: 1 / -1; display: inline-flex; align-items: flex-start; gap: 6px; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.35; }
.csv-f em .i { width: 14px; height: 14px; margin-top: 1px; }
.csv-f.ok em { color: var(--musgo); }
.csv-f.adv em { color: #7A5200; }
.csv-f.err { background: #FDF3F1; }
.csv-f.err em { color: #A3311F; }
.csv-f.err > span { color: #6B4740; }
.csv-pie { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linea); background: var(--papel); color: var(--gris); font-size: 13px; }
.csv-pie b { color: var(--tinta); }
.csv-pie .ejemplo { margin-left: auto; }

.apoyo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); margin-top: clamp(48px, 6vw, 72px); }
.apoyo li { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-content: start; }
.apoyo li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--linea); }
.apoyo-i { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; background: var(--papel); display: grid; place-items: center; color: var(--tinta); }
.apoyo-i .i { width: 21px; height: 21px; }
.apoyo h3 { font: 600 17px/1.3 var(--f-texto); color: var(--tinta); }
.apoyo p { font-size: 15px; color: var(--gris); margin-top: 4px; }

/* ---------- 6 · Bancos ---------- */
.bancos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.banco { background: var(--grafito); border: 1px solid var(--linea-o); border-radius: var(--r-4); padding: 28px; display: flex; flex-direction: column; }
.banco h3 { display: grid; gap: 8px; }
.banco h3 b { font: 800 34px/1 var(--f-titulo); letter-spacing: -.015em; color: var(--hueso); }
.banco h3 span { font-size: 14.5px; font-weight: 500; color: var(--hueso-2); }
.banco-arch { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 14px; font-size: 12.5px; color: var(--hueso); overflow-wrap: anywhere; }
.banco-arch .i { width: 15px; height: 15px; color: var(--lima); }
.trama--banco { padding: 14px; background: var(--negro); border: 1px solid var(--linea-o); border-radius: var(--r-2); }
.trama--banco .trama-l { grid-template-columns: 34px 1fr; }
.banco ul { margin-top: 20px; display: grid; gap: 12px; }
.banco li { position: relative; padding-left: 20px; font-size: 15px; color: var(--hueso-2); }
.banco li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--lima); }
.formato { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-4); border: 1px solid var(--linea-o); background: repeating-linear-gradient(90deg, rgba(241, 243, 238, .025) 0 1px, transparent 1px 24px), var(--carbon); }
.formato-texto .h3 { margin-bottom: 14px; }
.formato-texto p { color: var(--hueso-2); }
.formato-texto p + p { margin-top: 12px; }
.formato-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: fp; }
.formato-pasos li { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--r-3); background: var(--grafito); border: 1px solid var(--linea-o); position: relative; }
.formato-pasos span { width: 34px; height: 34px; border-radius: 9px; background: rgba(198, 244, 50, .12); color: var(--lima); display: grid; place-items: center; }
.formato-pasos .i { width: 18px; height: 18px; }
.formato-pasos b { font-size: 16px; font-weight: 600; }
.formato-pasos small { font-size: 13px; color: var(--hueso-2); line-height: 1.45; }
.marcas { margin-top: 28px; font-size: 13px; color: var(--hueso-2); max-width: 760px; }

/* ---------- 7 · Control ---------- */
.franja { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--linea); }
.franja:last-child { padding-bottom: 0; }
.franja-texto .h3 { margin-bottom: 14px; }
.franja-texto p { color: var(--tx-2); }
.franja-texto p + p { margin-top: 10px; }
.roles-caja { position: relative; background: var(--blanco); border-radius: var(--r-4); padding: 8px 8px 4px; box-shadow: 0 0 0 1px var(--linea); overflow-x: auto; }
.roles { width: 100%; min-width: 560px; font-size: 14.5px; }
.roles th, .roles td { padding: 12px 12px; border-top: 1px solid var(--linea); }
.roles thead th { border-top: 0; font: 600 12px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--tx-2); text-align: center; }
.roles tbody th { text-align: left; font-weight: 500; color: var(--tinta); }
.roles td { text-align: center; color: var(--musgo); }
.roles td .i { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.roles td.no { color: rgba(14, 16, 15, .3); }
.roles tr.clave th { font-weight: 700; }
.roles tr.clave td:not(.no) { background: #EEF8D2; }
.roles tr.clave td.no { background: #F7F7F3; }
.bitacora-caja { background: var(--blanco); border-radius: var(--r-4); padding: 10px 26px 8px; box-shadow: 0 0 0 1px var(--linea); }
.bitacora { position: relative; padding: 16px 0 14px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.caja-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px 0; font-size: 13px; color: var(--tx-2); }
.caja-h > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.caja-h .i { width: 20px; height: 20px; color: var(--musgo); }
.caja-pie { padding: 12px 0 10px; font-size: 13px; color: var(--tx-2); }
.bitacora li { display: grid; grid-template-columns: 96px 18px 1fr; grid-template-areas: "h p t" "h p s"; column-gap: 14px; padding: 8px 0; position: relative; }
.bitacora li::before { content: ""; grid-area: p; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--blanco); border: 2.5px solid var(--tinta); position: relative; z-index: 1; }
.bitacora li:not(:last-child)::after { content: ""; position: absolute; left: calc(96px + 14px + 5px); top: 26px; bottom: -6px; width: 2px; background: var(--linea); }
.bitacora .b-hora { grid-area: h; font-size: 12.5px; color: var(--tx-2); padding-top: 2px; }
.bitacora b { grid-area: t; font-size: 15px; font-weight: 600; color: var(--tinta); }
.bitacora small { grid-area: s; font-size: 13px; color: var(--tx-2); }
.bitacora .b-fin::before { background: var(--lima); border-color: var(--tinta); }
.copias { background: var(--blanco); border-radius: var(--r-4); padding: 10px 22px 6px; box-shadow: 0 0 0 1px var(--linea); }
.copia { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta); }
.copia small { font-size: 12.5px; color: var(--tx-2); white-space: nowrap; }
.copias .caja-pie { border-top: 1px solid var(--linea); }

/* ---------- 8 · Alcance ---------- */
.alcance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.alcance-col { border-radius: var(--r-4); padding: clamp(26px, 3.4vw, 40px); }
.alcance-col h3 { display: flex; align-items: center; gap: 10px; font: 800 26px/1 var(--f-titulo); letter-spacing: -.01em; margin-bottom: 20px; }
.alcance-col h3 .i { width: 26px; height: 26px; }
.alcance-col ul { display: grid; gap: 0; }
.alcance-col li { padding: 14px 0; border-top: 1px solid var(--linea); font-size: 16.5px; }
.alcance-col.si { background: var(--carbon); color: var(--hueso); --linea: var(--linea-o); }
.alcance-col.si h3 .i { color: var(--lima); }
.alcance-col.si li { color: var(--hueso); }
.alcance-col.no { background: var(--blanco); box-shadow: 0 0 0 1px var(--linea-c); }
.alcance-col.no h3 .i { color: #A3311F; }
.alcance-col.no li { color: var(--texto); }

/* ---------- 9 · Preguntas ---------- */
.preguntas-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.preguntas .sec-cab { position: sticky; top: calc(var(--cab) + 48px); margin-bottom: 0; }
.faq { border-top: 1px solid var(--linea); }
.faq-i { border-bottom: 1px solid var(--linea); }
.faq-i summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; border-radius: 6px; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i h3 { font: 600 19px/1.35 var(--f-texto); color: var(--tinta); }
.faq-i summary .i { width: 22px; height: 22px; color: var(--musgo); transition: transform .25s var(--ease); }
.faq-i[open] summary .i { transform: rotate(45deg); }
.faq-i summary:hover h3 { color: var(--musgo); }
.faq-i p { padding: 0 48px 24px 0; color: var(--gris); max-width: 680px; }

/* ---------- 10 · Cierre ---------- */
.cierre { overflow: hidden; text-align: center; border-bottom: 1px solid var(--linea-o); }
.cierre-trama { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(241, 243, 238, .045) 0 1px, transparent 1px 24px); -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 60%, #000 10%, transparent 70%); pointer-events: none; }
.cierre-in { position: relative; display: grid; justify-items: center; }
.cierre-icono { width: 64px; height: auto; margin-bottom: 28px; }
.cierre-t { font-size: clamp(42px, 6.4vw, 88px); max-width: 980px; }
.cierre-t .acento { display: block; }
.cierre-p { font-size: 19px; color: var(--hueso-2); margin-top: 26px; max-width: 560px; }
.contacto { margin-top: 36px; display: grid; justify-items: center; gap: 14px; }
.contacto-num { font-size: 15px; color: var(--hueso-2); }
.contacto-num .tel { font-family: var(--f-mono); color: var(--hueso); white-space: nowrap; }
.apachiy { margin-top: 44px; font-size: 14.5px; color: var(--hueso-2); }
.apachiy .mono { color: var(--lima); font-weight: 600; }

/* ---------- Pie ---------- */
.pie { padding: 56px 0 32px; }
.pie-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.pie-marca p { color: var(--hueso-2); font-size: 15px; margin-top: 18px; max-width: 340px; }
.pie-musoq a { color: var(--hueso); font-weight: 600; }
.pie-h { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hueso-2); margin-bottom: 14px; }
.pie-col li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--hueso); text-decoration: none; font-size: 15px; }
.pie-col li a:hover { color: var(--lima); }
.pie-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea-o); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: var(--hueso-2); }
.pie-base a { color: var(--hueso); }

/* ---------- Aparecer al bajar (solo con JS y sin «reducir movimiento») ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-aparece] { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .js [data-aparece].visto { opacity: 1; transform: none; }
}

/* ---------- Tableta ---------- */
@media (max-width: 1180px) {
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-texto { max-width: 640px; }
  .bajada { max-width: 600px; }
  .hero::before { inset: 46% 0 0 0; }
  .hero-arte { max-width: 760px; }
  .comp { height: 560px; }
  .bloque-visor, .bloque-csv { grid-template-columns: 1fr; }
  .formato { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .como-grid { grid-template-columns: 1fr; }
  .js .paso { padding-bottom: 0; border-top: 1px solid var(--linea-o); }
  .js .paso:last-child { border-bottom: 1px solid var(--linea-o); }
  .js .paso-btn { padding: 18px 0; }
  .js .paso-btn::after { content: ""; display: block; position: static; margin-left: auto; width: 12px; height: 12px; border-right: 2px solid var(--hueso-2); border-bottom: 2px solid var(--hueso-2); background: none; transform: rotate(45deg); flex: none; align-self: center; transition: transform .25s var(--ease); }
  .js .paso.activo .paso-btn::after { transform: rotate(-135deg); border-color: var(--lima); }
  .js .paso-p { display: none; margin: 0 0 18px 44px; }
  .js .paso.activo .paso-p { display: block; }
  .js .paso .escenario { margin: 0 0 28px; }
  .js .como-grid > .escenario { display: none; }
  .bloques-par { grid-template-columns: 1fr; }
  .bancos-grid { grid-template-columns: 1fr; }
  .banco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 32px; }
  .banco h3, .banco-arch, .trama--banco { grid-column: 1; }
  .banco ul { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .franja { grid-template-columns: 1fr; }
  .preguntas-in { grid-template-columns: 1fr; }
  .preguntas .sec-cab, .problema-cab { position: static; }
  .problema-in { grid-template-columns: 1fr; }
  .apoyo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apoyo li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .apoyo li:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--linea); }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .js .nav { display: none; }
  .js .cab-cta { display: none; }
  .js .menu-btn { display: grid; }
  .js .cab[data-abierto] .nav { display: flex; position: fixed; inset: var(--cab) 0 0 0; z-index: 29; background: var(--carbon); flex-direction: column; align-items: stretch; padding: 24px var(--lado) 32px; overflow-y: auto; }
  .js .cab[data-abierto] .nav ul { flex-direction: column; gap: 0; }
  .js .cab[data-abierto] .nav li a { min-height: 60px; font: 800 26px/1 var(--f-titulo); letter-spacing: -.01em; color: var(--hueso); border-bottom: 1px solid var(--linea-o); border-radius: 0; padding: 0; width: 100%; }
  .js .cab[data-abierto] .nav-cta { display: inline-flex; margin-top: 28px; }
  .js .cab[data-abierto] .menu-abrir { display: none; }
  .js .cab[data-abierto] .menu-cerrar { display: contents; }
  html:not(.js) .nav { display: none; }
  html:not(.js) .cab-cta { margin-left: auto; }
}
@media (max-width: 920px) {
  .alcance-grid { grid-template-columns: 1fr; }
  .banda-nota { margin-left: 0; }
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  :root { --cab: 64px; --lado: 20px; }
  body { font-size: 16.5px; }
  .marca img { width: 112px; }
  .de-musoq { padding: 5px 7px; font-size: 11px; }
  .hero { padding: 36px 0 40px; }
  .hero h1 { font-size: clamp(38px, 11vw, 46px); margin: 20px 0 18px; }
  .bajada { font-size: 17px; }
  .ctas .btn { width: 100%; }
  .checks { font-size: 13.5px; gap: 8px 16px; }
  .comp { height: auto; display: grid; gap: 16px; padding-top: 22px; }
  .comp .doc { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .fact, .flecha { display: none; }
  .lote { padding: 16px 16px 14px; }
  .lote-t { font-size: 21px; }
  .sello { right: 6px; top: -18px; padding: 8px 11px 7px; }
  .sello b { font-size: 18px; }
  .lote-h { padding-right: 96px; }
  .arch { margin-left: 16px; }
  .hero-pie { padding-left: 0; justify-content: space-between; }
  .banda-bancos b { font-size: 22px; }
  .banda-bancos { gap: 12px 26px; }
  .friccion { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .paso-btn { gap: 14px; }
  .paso-p, .js .paso-p { margin-left: 0; }
  .escena .doc { padding: 16px; }
  .tx { grid-template-columns: 1fr 70px; }
  .tx .est { grid-column: 1; grid-row: 2; }
  .tx .m { grid-row: 1 / span 2; grid-column: 2; }
  .campos { grid-template-columns: 1fr; }
  .imp { grid-template-columns: 1fr 74px 96px; gap: 8px; }
  .lin { grid-template-columns: 28px 1fr 72px; }
  .lin small { font-size: 10.5px; }
  .sello--fijo { right: 14px; top: 64px; }
  .confirmar .campo--grande { max-width: calc(100% - 128px); }
  .campo--grande b { font-size: 19px; }
  .visor { grid-template-columns: 1fr; }
  .lineas--visor .lin { grid-template-columns: 28px 1fr 88px; }
  .bloque { border-radius: var(--r-3); padding: 24px 18px; }
  .csv { font-size: 11.5px; }
  .csv-h, .csv-f { grid-template-columns: 1fr 1fr 64px; padding-left: 12px; padding-right: 12px; }
  .csv-h > :nth-child(3), .csv-h > :nth-child(4), .csv-f > :nth-child(3), .csv-f > :nth-child(4) { display: none; }
  .reglas th, .reglas td { padding: 10px 10px; }
  .reglas { font-size: 13.5px; }
  .apoyo { grid-template-columns: 1fr; }
  .apoyo li, .apoyo li:nth-child(2n), .apoyo li:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; }
  .banco { display: flex; padding: 22px; }
  .banco ul { margin-top: 20px; }
  .banco h3 b { font-size: 30px; }
  .formato-pasos { grid-template-columns: 1fr 1fr; }
  .roles-caja { padding: 4px 2px 2px; border-radius: var(--r-3); }
  .roles { min-width: 0; font-size: 13px; }
  .roles th, .roles td { padding: 10px 4px; }
  .roles tbody th { padding-left: 10px; hyphens: auto; }
  .roles thead th { font-size: 9.5px; letter-spacing: 0; hyphens: manual; }
  .roles td .i { width: 16px; height: 16px; }
  .bitacora-caja { padding: 6px 16px 4px; }
  .bitacora li { grid-template-columns: 16px 1fr; grid-template-areas: "p h" "p t" "p s"; column-gap: 12px; }
  .bitacora li::before { margin-top: 3px; }
  .bitacora li:not(:last-child)::after { left: 5px; top: 22px; }
  .bitacora .b-hora { font-size: 11.5px; padding-top: 0; }
  .copias { padding: 8px 16px 4px; }
  .copia { font-size: 13px; }
  .faq-i h3 { font-size: 17.5px; }
  .faq-i p { padding-right: 0; }
  .cierre-t { font-size: clamp(38px, 11.5vw, 52px); }
  .cierre-p { font-size: 17px; }
  .contacto .btn { width: 100%; }
  .pie-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 400px) {
  .ml-fila { grid-template-columns: 20px 1fr; row-gap: 6px; }
  .ml-fila .chip { grid-column: 2; justify-self: start; }
}
@media (max-width: 380px) {
  .de-musoq { display: none; }
  .imp { grid-template-columns: 1fr 66px 86px; font-size: 12px; }
}

/* Con «reducir movimiento»: nada se desplaza ni se anima */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}