/* LAS LETRAS, GUARDADAS AQUÍ Y NO PEDIDAS A GOOGLE.
   Antes esto era un @import a fonts.googleapis.com y NUNCA funcionó: la
   propia regla de seguridad de la web (la CSP, que sólo deja cargar cosas
   de este mismo sitio) lo bloqueaba, así que las tres fuentes no llegaban
   y todo caía a la letra del sistema. Se veía distinto en cada teléfono.
   Servirlas desde aquí lo arregla sin abrirle la puerta a nadie — y de
   paso Google deja de enterarse de quién visita una web donde la gente
   sube su RFC. Sólo el subconjunto «latin»: cubre todo el español
   (á é í ó ú ñ ü ¿ ¡) y pesa la mitad que incluir «latin-ext». */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/Sora-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/Sora-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fuentes/Sora-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fuentes/Sora-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fuentes/Inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/JetBrainsMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--bg:#0a0a12;--bg2:#0d0d18;--card:#14141f;--card2:#1a1a28;--ink:#f3f3fb;--muted:#a6a6c6;
/* --soft era #72728f y daba 3.93 sobre las tarjetas: por debajo del mínimo
   legible (4.5). No era un detalle estético — de ese color eran TODAS las
   etiquetas del formulario de datos fiscales, las que uno lee mientras
   teclea su RFC. #8484a3 da 5.46 sobre el fondo y 5.05 sobre tarjeta. */
--soft:#8484a3;
--line:#25253a;--line2:#33334d;
--purple:#8b5cf6;--purple-lt:#a78bfa;--purple-soft:#1a1533;
--blue:#3b82f6;--blue-lt:#60a5fa;--blue-soft:#111e3a;
--grad:linear-gradient(120deg,#8b5cf6,#5b8bf6);--grad-btn:linear-gradient(120deg,#8356e7,#4b72ca);
--ok:#34d399;--ok-soft:#0f2a22;--pend:#fbbf24;--pend-soft:#2a2410;--bad:#f87171;--bad-soft:#2a1618;
--brand:var(--purple);--brand-lt:var(--purple-lt);--brand-soft:var(--purple-soft);--brand-ink:var(--purple-lt);
--sh:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
--glow:0 0 0 1px rgba(139,92,246,.5),0 0 26px rgba(139,92,246,.35);
--ease:cubic-bezier(.22,.61,.36,1);
--fdisp:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
--fbody:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--fmono:'JetBrains Mono',ui-monospace,monospace;}
/* ---------------------------------------------------------------------------
   MODO CLARO
   Se cambian SÓLO las variables; ni una regla del resto del CSS se toca. Por
   eso esto cabe en 20 líneas en vez de ser un rediseño: los colores ya estaban
   centralizados (636 usos de var(--...)), y lo único que hacía falta era darles
   otro valor.

   Dos decisiones que no son obvias:

   · El fondo NO es blanco puro, es un gris con una pizca de morado (#f6f5fb).
     El blanco puro contra tarjetas blancas deja los bordes invisibles y la
     pantalla se siente plana; con esta pizca las tarjetas flotan y el conjunto
     se ve de la misma familia que el modo oscuro.

   · Los acentos se OSCURECEN. En fondo negro, «purple-lt» es un morado claro
     que brilla; en fondo blanco ese mismo morado no se lee. Aquí «lt» pasa a
     ser el más oscuro, porque su trabajo —texto sobre fondo pálido— es el
     contrario. Copiar los colores del modo oscuro tal cual era dejar texto
     morado clarito sobre blanco, ilegible.
   --------------------------------------------------------------------------- */
:root[data-tema=claro]{
  --bg:#f6f5fb;--bg2:#eeedf6;--card:#ffffff;--card2:#faf9fe;
  --ink:#16162a;--muted:#52526e;--soft:#666680;   /* medido: 5.13 sobre el fondo,
     5.56 sobre tarjeta blanca y 4.78 sobre las tarjetas de morado pálido, que
     era el único fondo donde no llegaba (4.43). El gris que se copia del modo
     oscuro (#7b7b96) da 3.79: se ve «bonito» y no se lee. */
  --line:#e5e4f0;--line2:#d4d3e4;
  --purple:#7c3aed;--purple-lt:#6d28d9;--purple-soft:#f1ebfe;
  /* EL DEGRADADO TAMBIÉN SE OSCURECE. Aquí su trabajo es ser TEXTO sobre fondo
     pálido (los números de la calculadora, los KPI, el «em» del titular), no
     fondo bajo letra blanca. No se redefinía en claro y salía con los colores
     del modo oscuro: el extremo azul daba 2.99 sobre el fondo, por debajo hasta
     del mínimo de texto grande. Ahora 5.26 y 5.23.
     Los BOTONES usan `--grad-btn`, que va al revés y ya estaba bien. No se toca. */
  --grad:linear-gradient(120deg,#7c3aed,#3b63bd);
  --blue:#2563eb;--blue-lt:#1d4ed8;--blue-soft:#e8efff;
  --ok:#047857;--ok-soft:#e3f6ee;
  --pend:#b45309;--pend-soft:#fdf1dd;
  --bad:#dc2626;--bad-soft:#fdeaea;
  --sh:0 1px 2px rgba(22,22,42,.06),0 8px 24px rgba(22,22,42,.08);
  --glow:0 0 0 1px rgba(124,58,237,.35),0 0 22px rgba(124,58,237,.16);
  color-scheme:light;
}
:root{color-scheme:dark}

/* El botón del interruptor. Estaba en la web del cliente y por eso en el
   panel salía como un cuadrito vacío: llegaba el botón pero no su estilo. */
.tema{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--line2);background:var(--card);color:var(--muted);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s}
.tema:hover{color:var(--ink);border-color:var(--brand);background:var(--card2)}
.tema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tema .luna{display:none}
:root[data-tema=claro] .tema .luna{display:block}
:root[data-tema=claro] .tema .sol{display:none}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fbody);line-height:1.55;-webkit-font-smoothing:antialiased}
/* ambiente Velox: luz morada arriba + azul lejano — da profundidad a TODAS las páginas */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(900px 480px at 18% -8%,rgba(139,92,246,.14),transparent 62%),
             radial-gradient(760px 420px at 96% 12%,rgba(59,130,246,.08),transparent 60%)}
::selection{background:rgba(139,92,246,.4);color:#fff}
html{scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.num{font-family:var(--fmono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
a{color:var(--brand-lt)}
/* revelado al hacer scroll (se activa solo con JS; sin JS todo se ve normal) */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
/* divisor con el rayo Velox (la firma) */
.vx-div{display:flex;align-items:center;gap:14px;margin:56px auto 0;max-width:520px;color:var(--purple-lt);opacity:.85}
.vx-div::before,.vx-div::after{content:'';flex:1;height:1px}
.vx-div::before{background:linear-gradient(90deg,transparent,var(--line2))}
.vx-div::after{background:linear-gradient(90deg,var(--line2),transparent)}
.wrap{max-width:920px;margin:0 auto;padding:22px 20px 80px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 2px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .m{width:31px;height:31px;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:19px;color:#fff;flex:0 0 auto;box-shadow:0 4px 16px rgba(139,92,246,.4)}
.logo .w{font-family:var(--fdisp);font-weight:800;font-size:17px;letter-spacing:-.02em}.logo .w i{font-style:normal;font-weight:500;color:var(--muted)}
.salir{font-size:13px;color:var(--soft);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}.salir:hover{color:var(--ink)}
.btn{display:inline-block;position:relative;overflow:hidden;border:0;border-radius:12px;background:var(--grad-btn);color:#fff;font-size:15px;font-weight:700;cursor:pointer;padding:14px 24px;text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s;font-family:var(--fbody)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(139,92,246,.45)}
.btn:not(.ghost)::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);transform:translateX(-130%);pointer-events:none}
.btn:not(.ghost):hover::after{transform:translateX(130%);transition:transform .65s var(--ease)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
.btn.ghost:hover{border-color:var(--purple);box-shadow:none}
.btn:focus-visible{outline:none;box-shadow:var(--glow)}
/* ===== landing ===== */
.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:38px;align-items:center;padding:52px 0 8px;position:relative}
.hero-txt{max-width:560px}
.hero-mini{display:flex;gap:18px;margin-top:24px;font-size:12.5px;color:var(--soft);align-items:center;flex-wrap:wrap}
.hero-mini .iic{color:var(--ok);vertical-align:-.22em;margin-right:4px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding-top:40px}.mock{max-width:500px}}
/* --- mockup del panel (el producto, real) --- */
.mock{position:relative;border-radius:18px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(139,92,246,.16);
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);animation:mkfloat 7s ease-in-out infinite}
@keyframes mkfloat{0%,100%{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(-9px)}}
@media(max-width:900px){.mock{transform:none;animation:none}}
.mk-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.mk-bar i:nth-child(1){background:rgba(248,113,113,.7)}.mk-bar i:nth-child(2){background:rgba(251,191,36,.7)}.mk-bar i:nth-child(3){background:rgba(52,211,153,.7)}
.mk-bar span{margin-left:8px;font-family:var(--fmono);font-size:10.5px;color:var(--soft)}
.mk-body{padding:14px}
.mk-imp{display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 24%,var(--card)),color-mix(in srgb,var(--blue) 18%,var(--card)));border:1px solid color-mix(in srgb,var(--purple) 36%,transparent);border-radius:12px;padding:12px 14px}
.mk-zap{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#fff;flex:0 0 auto}
.mk-imp b{font-family:var(--fdisp);font-size:12.5px;display:block}
.mk-imp span{font-family:var(--fmono);font-size:11px;color:var(--purple-lt)}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.mk-kpis>div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.mk-kpis b{font-family:var(--fmono);font-size:13.5px;display:block}
.mk-kpis span{font-size:9.5px;color:var(--soft)}
.mk-rows{display:flex;flex-direction:column;gap:6px}
.mk-row{display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:11.5px}
.mk-row i{width:20px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--c,#a78bfa) 22%,transparent);color:var(--c,#a78bfa);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:10px;font-family:var(--fdisp);flex:0 0 auto}
.mk-row span{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row b{font-family:var(--fmono);font-size:11px}
.mk-row em{font-style:normal;font-size:9.5px;color:var(--ok);background:var(--ok-soft);border-radius:99px;padding:2px 8px;font-weight:600;white-space:nowrap}
.mk-row em.p{color:var(--pend);background:var(--pend-soft)}
.mk-cap{text-align:center;font-size:12px;color:var(--soft);padding:0 0 10px}
/* --- de la foto a tu factura (escaneo) --- */
.scan{display:flex;align-items:center;justify-content:center;gap:20px;margin:36px auto 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 28px;max-width:680px;flex-wrap:wrap}
.sc-item{display:flex;flex-direction:column;align-items:center;gap:9px}
.sc-item b{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.sc-tk{position:relative;width:46px;height:60px;border-radius:6px;overflow:hidden;background:repeating-linear-gradient(var(--bg2),var(--bg2) 6px,var(--card2) 6px,var(--card2) 8px);border:1px solid var(--line2)}
.sc-tk span{position:absolute;top:4px;left:0;right:0;text-align:center;font-family:var(--fmono);font-size:7px;color:var(--soft)}
.sc-tk i{position:absolute;left:0;right:0;height:16px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.6),transparent);animation:scanline 2.4s ease-in-out infinite}
@keyframes scanline{0%,100%{top:-16px}50%{top:60px}}
.sc-flow{display:flex;gap:5px}
.sc-flow span{width:5px;height:5px;border-radius:50%;background:var(--purple);opacity:.25;animation:flow 1.4s infinite}
.sc-flow span:nth-child(2){animation-delay:.2s}.sc-flow span:nth-child(3){animation-delay:.4s}
@keyframes flow{0%,100%{opacity:.2}50%{opacity:1}}
.sc-bot{width:44px;height:44px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 0 24px rgba(139,92,246,.5);animation:botpulse 2.4s ease-in-out infinite}
@keyframes botpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.sc-ok{width:44px;height:44px;border-radius:50%;background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok);display:grid;place-items:center}
@media(prefers-reduced-motion:reduce){.sc-tk i,.sc-flow span,.sc-bot,.mock{animation:none}}
.hero .kick{display:inline-flex;align-items:center;gap:7px;font-family:var(--fmono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-lt);font-weight:600;background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 30%,transparent);border-radius:999px;padding:6px 13px}
.hero h1{font-family:var(--fdisp);font-weight:800;font-size:clamp(34px,7.5vw,58px);line-height:1.03;margin:18px 0 0;letter-spacing:-.02em}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:var(--muted);margin:18px 0 0;max-width:52ch}
.hero .ctas{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}
/* demo animada ticket->factura */
.demo{margin:30px 0 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;align-items:center;gap:18px;box-shadow:var(--sh);overflow:hidden}
.demo .tk{flex:0 0 auto;width:78px;height:104px;border-radius:8px;background:repeating-linear-gradient(var(--bg2),var(--bg2) 7px,var(--card2) 7px,var(--card2) 9px);border:1px solid var(--line2);position:relative}
.demo .tk::after{content:'TICKET';position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--fmono);font-size:9px;color:var(--soft)}
.demo .arrow{color:var(--purple-lt);font-size:24px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
.demo .fx{flex:1;min-width:0}
.demo .fx .bar{height:9px;border-radius:5px;background:var(--line2);margin:7px 0}
.demo .fx .bar.g{background:var(--grad);width:60%}
.demo .fx .ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ok);font-weight:600;margin-top:6px}
/* marquee */
.mq{margin:34px 0 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq .track{display:flex;gap:12px;width:max-content;animation:scroll 26s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.mq .item{white-space:nowrap;font-family:var(--fmono);font-size:13px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.mqcap{text-align:center;font-size:13px;color:var(--soft);margin-top:12px}
/* buscador público "¿facturamos donde compras?" */
.bsc{max-width:560px;margin:22px auto 0}
.bsc form{display:flex;gap:10px}
.bsc input{flex:1;min-width:0;padding:13px 16px;border:1.5px solid var(--line2);border-radius:12px;
  background:var(--card);color:var(--ink);font-size:15px;font-family:var(--fbody)}
.bsc input::placeholder{color:var(--soft)}
.bsc input:focus{outline:none;border-color:var(--purple);box-shadow:var(--glow)}
.bscr{display:none;margin-top:14px;padding:14px 16px;border-radius:12px;font-size:14px;
  line-height:1.5;background:var(--card);border:1px solid var(--line2);color:var(--muted)}
.bscr.abierto{display:block}
.bscr b{display:block;margin-bottom:2px;color:var(--ink)}
.bscr.si{background:var(--ok-soft);border-color:transparent}.bscr.si b{color:var(--ok)}
.bscr.prep{background:var(--brand-soft);border-color:transparent}.bscr.prep b{color:var(--brand-ink)}
.bscr a{font-weight:650}
@media(max-width:520px){.bsc form{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.mq .track{animation:none}.demo .arrow{animation:none}}
/* secciones */
.sec{margin-top:56px}
.sec h2{font-family:var(--fdisp);font-weight:700;font-size:clamp(24px,4vw,32px);margin:0 0 6px;letter-spacing:-.01em;text-align:center}
.sec .lead{color:var(--muted);font-size:15.5px;text-align:center;max-width:52ch;margin:0 auto 26px}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.paso{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;transition:border-color .2s,transform .2s}
.paso:hover{border-color:color-mix(in srgb,var(--purple) 45%,var(--line));transform:translateY(-3px)}
.paso .ic{width:42px;height:42px;border-radius:11px;background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 30%,transparent);display:grid;place-items:center;color:var(--purple-lt);margin-bottom:12px}
.paso b{font-family:var(--fdisp);display:block;font-size:16px;margin:0 0 4px}.paso div{font-size:13.5px;color:var(--muted)}
@media(max-width:640px){.pasos{grid-template-columns:1fr}}
/* calculadora */
.calc{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--sh)}
.calc .q{font-family:var(--fdisp);font-size:17px;font-weight:600;text-align:center;margin-bottom:6px}
.calc .gasto{text-align:center;font-family:var(--fmono);font-size:34px;font-weight:600;color:var(--ink);margin:2px 0 16px}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--purple) 0%,var(--blue) calc(var(--p,20)*1%),var(--line2) calc(var(--p,20)*1%))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--purple);box-shadow:0 0 18px rgba(139,92,246,.65);transition:transform .15s}
.calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--purple);box-shadow:0 0 18px rgba(139,92,246,.65)}
.calc .marks{display:flex;justify-content:space-between;font-size:11px;color:var(--soft);font-family:var(--fmono);margin-top:6px}
.calc .res{margin-top:24px;text-align:center;background:var(--bg2);border-radius:14px;padding:22px}
.calc .res .l{font-size:13px;color:var(--muted)}
.calc .res .big{font-family:var(--fdisp);font-weight:800;font-size:clamp(34px,7vw,50px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0}
.calc .res .s{font-size:12.5px;color:var(--soft)}
/* comparativa */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp .col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.cmp .col.win{border-color:color-mix(in srgb,var(--purple) 50%,transparent);box-shadow:var(--glow)}
.cmp h4{font-family:var(--fdisp);font-size:15px;margin:0 0 14px}
.cmp .col.win h4{color:var(--purple-lt)}
.cmp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cmp li{font-size:13.5px;color:var(--muted);padding-left:24px;position:relative}
.cmp .col li::before{content:'✕';position:absolute;left:0;color:var(--bad)}
.cmp .col.win li{color:var(--ink)}.cmp .col.win li::before{content:'✓';color:var(--ok)}
@media(max-width:560px){.cmp{grid-template-columns:1fr}}
/* precios */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column}
.plan.pop{border-color:var(--purple);box-shadow:var(--glow);position:relative}
.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--grad-btn);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:999px}
.plan .nm{font-family:var(--fdisp);font-size:16px;font-weight:700}
.plan .pr{font-family:var(--fdisp);font-size:34px;font-weight:800;margin:6px 0 2px}.plan .pr span{font-size:14px;color:var(--soft);font-weight:500}
.plan .inc{font-size:13px;color:var(--muted);margin:2px 0 16px}
.plan ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plan li{font-size:13px;color:var(--muted);padding-left:22px;position:relative}.plan li::before{content:'✓';position:absolute;left:0;color:var(--ok)}
.plan{transition:transform .2s var(--ease),border-color .2s}
.plan:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 45%,var(--line))}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
@media(max-width:640px){.planes{grid-template-columns:1fr}}
/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:10px;padding:2px 18px}
.faq summary{font-family:var(--fdisp);font-size:15px;font-weight:600;cursor:pointer;padding:15px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--purple-lt);font-size:20px;font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq p{margin:0 0 16px;font-size:14px;color:var(--muted)}
.finalcta{margin-top:56px;background:var(--grad-btn);border-radius:22px;padding:44px 30px;text-align:center}
.finalcta h2{font-family:var(--fdisp);font-weight:800;font-size:clamp(26px,5vw,38px);color:#fff;margin:0 0 10px}
.finalcta p{color:#fff;font-size:16px;margin:0 0 22px}
.finalcta .btn{background:#fff;color:#1a1030}
.finalcta .btn:hover{box-shadow:0 10px 30px rgba(0,0,0,.3)}
.landfoot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--soft)}
.landfoot a{color:var(--muted);text-decoration:none;margin-left:16px}.landfoot a:hover{color:var(--ink)}
/* footer completo (landing) */
.bigfoot{margin-top:60px;border-top:1px solid var(--line);padding-top:36px}
.bf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.bf-brand p{font-size:13.5px;color:var(--soft);max-width:36ch;margin:12px 0 10px;line-height:1.6}
.bf-mty{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--purple-lt);font-weight:600}
.bf-col{display:flex;flex-direction:column;gap:9px}
.bf-col b{font-family:var(--fdisp);font-size:13px;margin-bottom:3px;color:var(--ink)}
.bf-col a{font-size:13.5px;color:var(--soft);text-decoration:none}.bf-col a:hover{color:var(--ink)}
.bf-base{margin-top:28px;padding:16px 0 6px;border-top:1px solid var(--line);font-size:12.5px;color:var(--soft)}
@media(max-width:700px){.bf-grid{grid-template-columns:1fr;gap:22px}}
/* gráficas: entrada animada */
.charts .rv .b{transform:scaleY(0);transform-origin:bottom}
.charts .rv.in .b{animation:growbar .85s var(--ease) forwards}
.charts .rv.in .barc:nth-child(2) .b{animation-delay:.07s}
.charts .rv.in .barc:nth-child(3) .b{animation-delay:.14s}
.charts .rv.in .barc:nth-child(4) .b{animation-delay:.21s}
.charts .rv.in .barc:nth-child(5) .b{animation-delay:.28s}
.charts .rv.in .barc:nth-child(6) .b{animation-delay:.35s}
@keyframes growbar{to{transform:scaleY(1)}}
.charts .rv.in .donut svg{animation:donain .9s var(--ease) both}
@keyframes donain{from{transform:rotate(-70deg) scale(.92);opacity:0}to{transform:none;opacity:1}}
/* avatar del comercio en la lista */
.row .av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--c,#a78bfa) 20%,transparent);color:var(--c,#a78bfa);font-style:normal;font-weight:700;font-size:11px;font-family:var(--fdisp);margin-right:9px;vertical-align:-6px}
/* línea de estado de cada archivo al subir */
.upln{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px}
/* sección seguridad (landing) */
.segur{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sg{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;transition:border-color .2s,transform .2s}
.sg:hover{border-color:color-mix(in srgb,var(--purple) 40%,var(--line));transform:translateY(-3px)}
.sg-i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--purple-lt);margin-bottom:11px;
  background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));border:1px solid color-mix(in srgb,var(--purple) 26%,transparent)}
.sg b{font-family:var(--fdisp);font-size:14.5px;display:block;margin-bottom:4px}
.sg div:last-child{font-size:14px;color:var(--soft);line-height:1.6}
@media(max-width:820px){.segur{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.segur{grid-template-columns:1fr}}
/* ===== panel tipo APP: navegación de 4 vistas ===== */
.pnav{display:flex;gap:6px;margin:0 0 18px;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);border-radius:14px;padding:6px;position:sticky;top:10px;z-index:60;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--soft);text-decoration:none;transition:background .18s,color .18s}
.pn:hover{color:var(--ink)}
.pn.on{background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));color:var(--purple-lt)}
.vista.oculta{display:none}
@media(max-width:700px){
  .pnav{position:fixed;left:10px;right:10px;bottom:10px;top:auto;margin:0;box-shadow:0 12px 44px rgba(0,0,0,.65);z-index:80}
  .pn{flex-direction:column;gap:3px;padding:8px 4px}
  .pn span{font-size:10px}
  .wrap{padding-bottom:130px}
}
/* gasto por giro */
.giros{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.gi{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.gi .gl{color:var(--muted);font-weight:600}
.gi .gb{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden}
.gi .gb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--c,#a78bfa) 75%,transparent),var(--c,#a78bfa))}
.gi .gv{color:var(--soft);white-space:nowrap}
@media(max-width:520px){.gi{grid-template-columns:84px 1fr auto}}
/* recordatorios por vencer */
.recor{border-color:color-mix(in srgb,var(--pend) 45%,transparent);margin-top:14px}
.recor .c2h .iic{color:var(--pend)}
.rc-i{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:7px 0;border-top:1px dashed var(--line)}
.rc-i .iic{color:var(--pend)}
/* meta anual dentro de Tu impacto */
.metaw{position:relative;margin-top:13px;padding-top:11px;border-top:1px solid color-mix(in srgb,var(--purple) 16%,transparent)}
.meta-l{font-size:12.5px;color:var(--muted)}
.meta-l b{color:var(--ink)}
.meta-l a{margin-left:8px;font-size:11.5px;color:var(--purple-lt)}
.meta-b{height:9px;border-radius:99px;background:rgba(0,0,0,.3);overflow:hidden;margin-top:7px}
.meta-b i{display:block;height:100%;background:var(--grad);border-radius:99px}
.meta-cta{font-size:13px;color:var(--purple-lt);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.meta-edit{display:none;gap:8px;margin-top:9px;align-items:center}
.meta-edit input{width:130px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);color:var(--ink);font-size:13.5px}
/* candado de perfil incompleto + selects del capturado manual */
.up.incompleto{border-style:solid;border-color:color-mix(in srgb,var(--pend) 45%,transparent)}
/* la pregunta del uso de CFDI: opciones grandes, fáciles de picar en el celular */
.usoleido{background:var(--card2);border:1px solid var(--line2);border-radius:10px;
  padding:10px 12px;font-size:13px;color:var(--muted);margin-bottom:12px;text-align:left}
.usomal{background:color-mix(in srgb,var(--pend) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--pend) 45%,transparent);border-radius:10px;
  padding:10px 12px;font-size:13px;margin-bottom:12px;text-align:left}
.usoq{font-weight:700;font-size:14.5px;margin:0 0 8px;text-align:left}
.usoop{display:flex;gap:10px;align-items:center;border:1px solid var(--line2);
  border-radius:10px;padding:11px 13px;margin-bottom:7px;cursor:pointer;font-size:13.5px;
  text-align:left;background:var(--card2)}
.usoop:hover{border-color:var(--purple)}
.usoop input{accent-color:var(--purple);width:17px;height:17px;flex:none}
.selp{padding:10px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--bg2);color:var(--ink);font-size:13.5px;font-family:var(--fbody)}
/* alta en 2 pasos */
.steps{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.st{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--soft)}
.st i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);border:1.5px solid var(--line2);font-style:normal;font-size:12px;font-family:var(--fmono)}
.st.on{color:var(--ink)}.st.on i{border-color:var(--purple);color:var(--purple-lt);box-shadow:0 0 12px rgba(139,92,246,.35)}
.st.ok i{background:var(--grad);border-color:transparent;color:#fff}
.stline{flex:1;height:1.5px;background:var(--line2);max-width:90px}
.why{display:flex;gap:12px;background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 30%,transparent);border-radius:13px;padding:14px 16px;font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.why b{color:var(--ink)}
.why-i{flex:0 0 auto;color:var(--purple-lt);margin-top:2px}
.modos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 15px}
.mo{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px 12px;border-radius:13px;border:1.5px solid var(--line2);background:var(--bg2);color:var(--soft);font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .18s;font-family:var(--fbody);text-align:center;line-height:1.25}
.mo .iic{color:var(--soft);transition:color .18s}
.mo .mtx{display:flex;flex-direction:column;gap:2px;align-items:center}
.mo small{font-size:10.5px;font-weight:600;color:var(--soft)}
.mo:hover{border-color:color-mix(in srgb,var(--purple) 55%,transparent);color:var(--ink);transform:translateY(-1px)}
.mo.on{border-color:var(--purple);color:var(--purple-lt);background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft))}
.mo.on .iic{color:var(--purple-lt)}
.mo .reco{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--grad-btn);color:#fff;font-size:9px;font-weight:800;letter-spacing:.4px;padding:2px 8px;border-radius:99px;white-space:nowrap}
.mo .mcheck{position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:50%;background:var(--grad);color:#fff;display:none;place-items:center}
.mo.on .mcheck{display:grid}
@media(max-width:480px){
  .modos{grid-template-columns:1fr;gap:8px}
  .mo{flex-direction:row;text-align:left;padding:12px 14px}
  .mo .mtx{align-items:flex-start}
  .mo .reco{left:auto;right:12px;top:-7px;transform:none}
}
/* dropzone de la Constancia */
.drop{display:flex;align-items:center;justify-content:center;gap:13px;border:1.5px dashed var(--line2);border-radius:14px;padding:22px 16px;cursor:pointer;margin-bottom:10px;background:rgba(139,92,246,.04);transition:border-color .18s,background .18s}
.drop:hover,.drop.hover{border-color:var(--purple);background:var(--purple-soft)}
.drop .dr-ic{color:var(--purple-lt);display:grid;place-items:center}
.drop .dr-t{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.drop .dr-t b{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.drop .dr-t small{font-size:11.5px;color:var(--soft)}
.drop.listo{border-style:solid;border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.drop.listo .dr-ic{color:var(--ok)}
/* tutorial "sácala en 2 minutos" */
.tuto{margin:10px 0 4px;border:1px dashed var(--line2);border-radius:12px;padding:4px 14px;font-size:13px;color:var(--muted)}
.tuto summary{cursor:pointer;font-weight:700;padding:10px 0;list-style:none;display:flex;align-items:center;gap:7px;color:var(--purple-lt)}
.tuto summary::-webkit-details-marker{display:none}
.tuto summary::after{content:'▾';margin-left:auto;color:var(--soft);transition:transform .2s}
.tuto[open] summary::after{transform:rotate(180deg)}
.tpasos{display:flex;flex-direction:column;gap:11px;margin:6px 0 12px}
.tp{display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.tp i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 40%,transparent);color:var(--purple-lt);font-style:normal;font-size:11px;font-weight:800;font-family:var(--fmono);margin-top:1px}
.tp b{color:var(--ink)}
.tlink{color:var(--purple-lt);font-weight:700;text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--purple) 50%,transparent)}
.tlink:hover{color:var(--ink)}
.tnote{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--soft);background:rgba(0,0,0,.18);border-radius:9px;padding:9px 11px;margin:0 0 12px;line-height:1.5}
.tnote .iic{flex:0 0 auto;margin-top:1px;color:var(--ok)}
.tnote b{color:var(--muted)}
/* mini-Constancia de ejemplo (datos FICTICIOS) */
.mconst{margin:0 0 13px}
.mc-cap{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--soft);margin-bottom:7px}
.mc-doc{border:1px solid var(--line2);border-radius:11px;background:rgba(255,255,255,.03);padding:11px 13px;font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.mc-head{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:1.1px;color:var(--soft);font-weight:800;margin-bottom:2px}
.mc-logo{background:var(--bg2);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;font-size:9px}
.mc-row{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.mc-row span{flex:0 0 64px;color:var(--soft)}
.mc-row b{font-family:var(--fmono);font-weight:600;font-size:11px;color:var(--purple-lt);background:var(--purple-soft);border-radius:5px;padding:1px 6px}
.okc{border-color:color-mix(in srgb,var(--ok) 65%,transparent)!important}
.verbtn{position:absolute;right:8px;top:8px;border:1px solid var(--line2);background:var(--bg2);color:var(--muted);font-size:12px;font-weight:700;border-radius:8px;padding:6px 10px;cursor:pointer}
.verbtn:hover{color:var(--ink);border-color:var(--purple)}
label.file.listo{border-color:var(--ok);color:var(--ok)}
/* checklist primer uso */
.checklist{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 16px}
.ck-h{display:flex;align-items:center;gap:8px;font-family:var(--fdisp);font-weight:700;font-size:15px;margin-bottom:6px}
.ck-h .iic{color:var(--purple-lt)}
.ck{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px dashed var(--line)}
.ck:first-of-type{border-top:0}
.ck i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);color:transparent;flex:0 0 auto;margin-top:2px}
.ck.ok i{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.ck b{font-size:13.5px;display:block}.ck span{font-size:12.5px;color:var(--soft)}
/* festejo primera factura */
.fiesta{display:none;align-items:center;gap:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 15%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);border-radius:16px;padding:14px 18px;margin-bottom:14px}
.fi-i{width:36px;height:36px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex:0 0 auto}
.fi-t b{font-family:var(--fdisp);display:block;font-size:14.5px}
.fi-t span{font-size:12.5px;color:var(--soft)}
.fiesta button{margin-left:auto;border:0;background:none;color:var(--soft);font-size:15px;cursor:pointer}
/* tarjetas nuevas del panel: contador / mis datos / ayuda */
.pnl2{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.card2{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.card2 summary.c2h{cursor:pointer}
.card2 summary::-webkit-details-marker{display:none}
.c2h{display:flex;align-items:center;gap:9px;font-family:var(--fdisp);font-weight:700;font-size:15.5px;list-style:none}
.c2h .iic{color:var(--purple-lt)}
.c2p{font-size:13px;color:var(--soft);margin-top:6px;line-height:1.55}
.c2row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
.c2row input{flex:1;min-width:190px;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2);color:var(--ink);font-size:14px}
.c2msg{font-size:12.5px;margin-top:8px;display:block;min-height:16px}
.md-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.md-rows>div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.md-rows span{color:var(--soft)}
.md-edit{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 12px}
/* --- mis cuentas de portales --- */
.cprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.cprow:last-of-type{border-bottom:0}
.cpn{font-weight:600;min-width:120px;flex:0 0 auto}
.cpu{color:var(--soft);font-size:13px;flex:1;min-width:120px}
.cpu2,.cpp{flex:1;min-width:120px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:13px}
.cprow .btn{padding:7px 13px;font-size:13px}
@media(max-width:600px){.cpn{min-width:100%}.cprow{gap:6px}}
.md-edit label{font-size:13px;color:var(--soft);display:flex;flex-direction:column;gap:5px;font-weight:600}
.md-edit input,.md-edit select{padding:10px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--bg2);color:var(--ink);font-size:14px;width:100%;min-width:0}
.md-edit.md2{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.md-edit,.md-edit.md2{grid-template-columns:1fr}}
.ayfaq details{border-bottom:1px solid var(--line);padding:2px 0}
.ayfaq details:last-child{border-bottom:0}
.ayfaq summary{cursor:pointer;font-size:13.5px;font-weight:600;padding:9px 0;list-style:none}
.ayfaq summary::-webkit-details-marker{display:none}
.ayfaq p{font-size:13px;color:var(--soft);margin:0 0 10px;line-height:1.55}
/* chip de delta mes vs mes */
.delta{font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 8px;margin-left:4px;font-family:var(--fmono);white-space:nowrap}
.delta.up{color:var(--ok);background:var(--ok-soft)}
.delta.down{color:var(--bad);background:var(--bad-soft)}
/* botón flotante de cámara (solo móvil, en el panel) */

@media(max-width:700px){.up{padding:18px 16px}.up .btn{width:100%;justify-content:center}.up .txt{min-width:100%}}

/* ===== cards / forms ===== */
.card{max-width:430px;margin:6vh auto 0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 30px;box-shadow:var(--sh)}
.card h1{font-family:var(--fdisp);font-weight:700;font-size:25px;margin:18px 0 6px}.card p{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.inp{width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--ink);font-size:16px;margin-bottom:10px;font-family:var(--fbody)}
.inp:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.inp.cod{font-family:var(--fmono);font-size:22px;text-align:center;letter-spacing:.3em}
.card .btn{width:100%;margin-top:4px}
.err{color:var(--bad);font-size:13.5px;margin-top:10px;text-align:center}
.hint{font-size:12.5px;color:var(--soft);margin-top:18px;text-align:center;line-height:1.6}
label.file{display:block;border:1.5px dashed var(--line2);border-radius:12px;padding:16px;text-align:center;font-size:14px;color:var(--muted);cursor:pointer;margin-bottom:10px}
label.file:hover{border-color:var(--purple);color:var(--ink)}
/* ===== dashboard ===== */
.hd{margin:22px 0 18px}.hd .who{font-size:12px;color:var(--soft);font-family:var(--fmono);letter-spacing:.03em}
.hd h1{font-family:var(--fdisp);font-weight:700;font-size:clamp(23px,4vw,31px);margin:5px 0 0;letter-spacing:-.01em}
.up{position:relative;overflow:hidden;background:var(--card);border:1px solid color-mix(in srgb,var(--brand) 38%,var(--line));border-radius:18px;padding:20px;margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 30px color-mix(in srgb,var(--brand) 13%,transparent);transition:border-color .2s,box-shadow .2s}.up::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 62%)}.up>*{position:relative}.up:hover{border-color:color-mix(in srgb,var(--brand) 60%,var(--line))}.up .btn{font-size:15px;padding:13px 22px}
.up:hover{border-color:var(--purple)}
.up .upi{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;color:var(--purple-lt);
  background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));border:1px solid color-mix(in srgb,var(--purple) 26%,transparent)}
.up .txt{flex:1;min-width:170px}.up .txt b{font-family:var(--fdisp);font-size:17px;letter-spacing:-.01em;display:block;margin-bottom:2px}.up .txt div{font-size:13.5px;color:var(--muted);line-height:1.5}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--purple);color:var(--purple-lt);background:var(--card)}
.flink{display:inline-flex;align-items:center;gap:3px}
.flink .iic{color:var(--soft)}
.estado-subida{width:100%;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.estado-subida div{color:var(--muted)}
.filtro{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.filtro label{font-size:13px;color:var(--soft)}
.filtro select{padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--ink);font-size:14px;font-weight:600;font-family:var(--fbody)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px;display:flex;flex-direction:column;gap:3px}
.kpi .l{font-size:12px;color:var(--soft);font-weight:600}.kpi .v{font-family:var(--fdisp);font-weight:700;font-size:25px}
.kpi .s{font-size:11.5px;color:var(--muted)}
.kpi.he{background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));border-color:color-mix(in srgb,var(--purple) 40%,transparent)}
.kpi.he .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.kpi.he .l{color:var(--purple-lt)}
@media(max-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}
/* iconos inline (Lucide) — alineados al texto, tamaño consistente */
.iic{vertical-align:-.18em;flex:0 0 auto}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.kpi .v.num,.imp3 .n{font-variant-numeric:tabular-nums}
/* transiciones y estados hover premium */
.btn,.kpi,.row,.adj,.flink,.bell,select,summary{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.kpi:hover{border-color:color-mix(in srgb,var(--purple) 30%,var(--line));transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ===== TU IMPACTO (hero del año) ===== */
.impacto{position:relative;overflow:hidden;border-radius:20px;padding:22px 24px;margin:0 0 16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 22%,var(--card)),color-mix(in srgb,var(--blue) 18%,var(--card)));
  border:1px solid color-mix(in srgb,var(--purple) 42%,transparent)}
.impacto::after{content:"";position:absolute;top:-40%;right:-10%;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--purple) 28%,transparent),transparent 70%);pointer-events:none}
.impacto .ih{display:flex;align-items:center;gap:8px;font-family:var(--fdisp);font-weight:700;font-size:15px;margin-bottom:14px;position:relative}
.impacto .ih .yr{margin-left:auto;font-family:var(--fmono);font-size:11.5px;color:var(--soft);font-weight:600;letter-spacing:.03em}
.imp3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.imp3 .c .stat-i{color:var(--purple-lt);opacity:.9;margin-bottom:6px;height:16px}
.imp3 .c .n{font-family:var(--fdisp);font-weight:800;font-size:clamp(24px,4.5vw,34px);line-height:1.05;color:var(--ink)}
.imp3 .c .n.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.imp3 .c .lb{font-size:12.5px;color:var(--ink);font-weight:600;margin-top:3px}
.imp3 .c .sub{font-size:11px;color:var(--soft);margin-top:1px}
.imp3 .c+.c{border-left:1px solid color-mix(in srgb,var(--purple) 22%,transparent);padding-left:16px}
.impacto .cav{position:relative;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--soft);margin-top:13px;padding-top:11px;
  border-top:1px solid color-mix(in srgb,var(--purple) 16%,transparent)}
.impacto .cav .iic{color:var(--purple-lt);opacity:.85}
.impacto.vacio{background:var(--card);border-style:dashed}
.impacto.vacio .n{-webkit-text-fill-color:var(--muted);color:var(--muted);background:none}
@media(max-width:640px){.imp3{grid-template-columns:1fr;gap:12px}
  .imp3 .c+.c{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--purple) 18%,transparent);padding-top:12px}}
/* menú superior de la landing */
.topnav{display:flex;align-items:center;gap:20px}
.topnav>a:not(.btn){font-size:14px;color:var(--soft);font-weight:600}
.topnav>a:not(.btn):hover{color:var(--ink)}
@media(max-width:560px){.topnav{gap:14px}.topnav>a:not(.btn){font-size:13px}}
/* ===== página de impacto (pública) ===== */
.ig-hero{text-align:center;max-width:760px;margin:34px auto 26px;padding:0 4px}
.ig-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--purple-lt);
  background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 34%,transparent);border-radius:999px;padding:5px 13px;margin-bottom:16px}
.ig-hero h1{font-family:var(--fdisp);font-weight:800;font-size:clamp(28px,5vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0}
.ig-lead{font-size:clamp(15px,2.2vw,17px);color:var(--soft);line-height:1.6;margin:16px auto 0;max-width:620px}
.ig-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:940px;margin:0 auto}
.ig-stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 18px;text-align:center}
.ig-stat .n{font-family:var(--fdisp);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ig-stat .n.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ig-stat .lb{font-size:12.5px;color:var(--soft);margin-top:8px;font-weight:600}
.ig-sub{text-align:center;color:var(--muted);font-size:13px;margin:16px auto 30px}
.ig-mission{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:940px;margin:0 auto 30px}
.ig-m{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.ig-mi{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--purple-lt);margin-bottom:12px;
  background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));border:1px solid color-mix(in srgb,var(--purple) 26%,transparent)}
.ig-m b{font-family:var(--fdisp);font-size:16px;display:block;margin-bottom:5px}
.ig-m div:last-child{font-size:13.5px;color:var(--soft);line-height:1.55}
.ig-cta{text-align:center;margin:0 auto 40px;max-width:620px}
.ig-caveat{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:16px}
.ig-caveat .iic{color:var(--purple-lt)}
@media(max-width:820px){.ig-stats{grid-template-columns:repeat(2,1fr)}.ig-mission{grid-template-columns:1fr}}
/* ===== página aprende (educación fiscal) ===== */
.ap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto 30px}
.ap-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.ap-i{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;color:var(--purple-lt);margin-bottom:13px;
  background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));border:1px solid color-mix(in srgb,var(--purple) 26%,transparent)}
.ap-card h3{font-family:var(--fdisp);font-size:16.5px;font-weight:700;margin:0 0 7px}
.ap-card p{font-size:14px;color:var(--soft);line-height:1.6;margin:0}
.ap-card p b{color:var(--ink);font-weight:600}
@media(max-width:700px){.ap-grid{grid-template-columns:1fr}}
/* gráficas del panel */
.charts{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-top:12px}
.chart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.chart h3{font-family:var(--fdisp);font-weight:700;font-size:14.5px;margin:0 0 16px}
.bars{display:flex;align-items:flex-end;gap:12px;height:128px}
.barc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.barc .v{font-family:var(--fmono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.barc .b{width:100%;max-width:46px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--purple),var(--blue));opacity:.5;min-height:5px;transition:opacity .2s}
.barc:hover .b,.barc.hoy .b{opacity:1}
.barc.hoy .b{box-shadow:0 0 16px rgba(139,92,246,.35)}
.barc .m{font-size:11px;color:var(--soft);white-space:nowrap}
.donut{display:flex;align-items:center;gap:18px}
.donut .ctr{font-family:var(--fmono);font-size:11px;fill:var(--muted)}
.dleg{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted);flex:1;min-width:0}
.dleg .it{display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dleg .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.dleg .mm{font-family:var(--fmono);margin-left:auto;color:var(--soft);padding-left:8px}
@media(max-width:680px){.charts{grid-template-columns:1fr}}
/* línea de tiempo por factura */
.tl{display:inline-flex;align-items:center;margin-right:9px;flex:0 0 auto}
.tl i{width:7px;height:7px;border-radius:50%;background:var(--line2);display:block}
.tl i.on{background:var(--ok)}
.tl i.err{background:var(--bad)}
.tl s{width:11px;height:2px;background:var(--line2);display:block}
.tl s.on{background:var(--ok)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-top:20px;overflow:hidden}
.ph{display:flex;justify-content:space-between;align-items:baseline;padding:16px 20px 13px;border-bottom:1px solid var(--line)}
.ph h2{font-family:var(--fdisp);font-weight:700;font-size:18px;margin:0}.ph .c{font-size:13px;color:var(--soft)}
.row{display:grid;grid-template-columns:82px 1fr 100px 200px;gap:12px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);font-size:14.5px}
.row:last-child{border-bottom:0}.row .f{color:var(--muted);font-size:13px;font-family:var(--fmono)}.row .t{text-align:right;font-weight:600;font-family:var(--fmono)}
.row .e{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:5px 10px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.pend{background:var(--pend-soft);color:var(--pend)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
/* "en preparación": comercio nuevo que estamos agregando — morado de marca,
   nunca rojo: no es un error, es un robot en camino */
.chip.prep{background:var(--brand-soft);color:var(--brand-ink)}
.nofm{font-size:11.5px;color:var(--soft);margin-top:4px;line-height:1.45;max-width:270px}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}
@media(max-width:620px){.row{grid-template-columns:1fr auto}.row .f,.row .e{grid-column:span 2}}
.foot{margin-top:20px;background:linear-gradient(160deg,var(--purple-soft),var(--blue-soft));border:1px solid color-mix(in srgb,var(--purple) 25%,transparent);border-radius:14px;padding:15px 19px;font-size:14px}
.adj{border:1px solid var(--line2);background:var(--card2);border-radius:8px;cursor:pointer;font-size:13px;padding:4px 8px;margin-left:8px;color:var(--muted)}
.adj:hover{border-color:var(--purple);color:var(--ink)}
.flink{font-size:11.5px;text-decoration:none;margin-left:6px;font-weight:700;font-family:var(--fmono)}
.disc{margin-top:12px;font-size:11.5px;color:var(--soft);text-align:center}
.byline{margin-top:26px;text-align:center;font-size:12px;color:var(--soft)}
/* botón flotante de WhatsApp */
.wafab{position:fixed;right:20px;bottom:20px;z-index:900;width:56px;height:56px;border-radius:50%;
background:#25D366;display:grid;place-items:center;box-shadow:0 6px 22px rgba(37,211,102,.45);
text-decoration:none;transition:transform .18s}
.wafab:hover{transform:scale(1.07)}
.wafab svg{width:30px;height:30px;fill:#fff}
.wafab::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
animation:waping 2.4s ease-out infinite}
@keyframes waping{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.wafab::after{animation:none}}
@media(max-width:600px){.wafab{right:14px;bottom:14px;width:52px;height:52px}}
.enapp .wafab{width:46px;height:46px;background:var(--card2);border:1px solid var(--line2);box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:.72}
.enapp .wafab svg{width:22px;height:22px;fill:#25D366}
.enapp .wafab:hover{opacity:1;background:#25D366;border-color:#25D366}
.enapp .wafab:hover svg{fill:#fff}
.enapp .wafab::after{display:none}
/* Pedirle al cliente lo que falta DENTRO del ticket, sin mandarlo a otra pantalla */
.pedir{margin-top:10px;padding:13px 14px;border-radius:12px;background:var(--pend-soft);
  border:1px solid color-mix(in srgb,var(--pend) 35%,transparent)}
.pedir-t{font-size:13px;color:var(--ink);margin-bottom:10px;line-height:1.5}
.pedir-p{font-size:11.5px;color:var(--muted);margin-top:8px}
.pedir-c{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.pedir-c i{display:block;font-style:normal;font-weight:400;font-size:11.5px;
  color:var(--muted);margin:2px 0 4px}
.pedir-c input{width:100%;margin-top:4px}
.pedir .cprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.pedir .cprow input{flex:1;min-width:150px}
.pedir .btn{padding:9px 16px;font-size:13.5px}
.pedir-m,.pedir .cpmsg{font-size:12.5px;margin-left:8px}
@media(max-width:600px){.pedir .cprow input{min-width:100%}.pedir .btn{width:100%}}
.mk-ej{margin-left:auto;font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:2px 7px}

.camfab{display:none}
@media(max-width:700px){
  .camfab{display:grid;place-items:center;position:fixed;left:16px;bottom:96px;
    width:54px;height:54px;border-radius:50%;border:0;background:var(--grad);color:#fff;
    box-shadow:0 8px 26px color-mix(in srgb,var(--brand) 45%,transparent);z-index:60;
    cursor:pointer;opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .camfab.se-ve{opacity:1;transform:none;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.camfab{transition:none}}
@media(max-width:600px){.enapp .wafab{width:42px;height:42px}}
/* ===== campanita de avisos ===== */
.bellwrap{position:relative;display:flex;align-items:center;gap:14px}
.bell{position:relative;border:1px solid var(--line2);background:var(--card);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.bell:hover{border-color:var(--purple);color:var(--ink)}
.bell .bdg{position:absolute;top:-5px;right:-5px;background:var(--grad);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}
.ndrop{position:absolute;right:0;top:44px;width:min(330px,88vw);background:var(--card2);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh);z-index:50;overflow:hidden;display:none}
.ndrop.open{display:block}
.ndrop .nh{padding:12px 16px;font-family:var(--fdisp);font-weight:700;font-size:14px;border-bottom:1px solid var(--line)}
.ndrop .ni{padding:11px 16px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:flex-start}
.ndrop .ni:last-child{border-bottom:0}
.ndrop .ni .nf{font-family:var(--fmono);font-size:10.5px;color:var(--soft);white-space:nowrap;margin-left:auto;padding-left:8px}
/* ===== contador del plan ===== */
.plan-strip{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 18px;margin-bottom:16px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.plan-strip b{color:var(--ink)}
.pbar{flex:1;min-width:120px;height:7px;background:var(--bg2);border-radius:99px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--grad);border-radius:99px}
/* ===== buscador de facturas ===== */
.toolbar{display:flex;gap:8px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.binp{flex:1;min-width:150px;padding:9px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2);color:var(--ink);font-size:13.5px;font-family:var(--fbody)}
.binp:focus{outline:none;border-color:var(--purple)}
.fchip{border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--fbody)}
.fchip.on{background:var(--purple-soft);border-color:var(--purple);color:var(--purple-lt)}
/* ===== tour de bienvenida ===== */
.tour{position:fixed;inset:0;background:rgba(5,5,12,.72);backdrop-filter:blur(3px);display:none;place-items:center;z-index:100;padding:20px}
.tour.open{display:grid}
.tcard{max-width:400px;width:100%;background:var(--card2);border:1px solid var(--line2);border-radius:18px;padding:28px;text-align:center;box-shadow:var(--sh)}
.tstep{display:none}.tstep.on{display:block}
.tstep .ic{width:54px;height:54px;margin:0 auto 14px;border-radius:15px;background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 30%,transparent);display:grid;place-items:center;color:var(--purple-lt)}
.tstep h3{font-family:var(--fdisp);font-size:19px;margin:0 0 8px}
.tstep p{color:var(--muted);font-size:14px;margin:0 0 18px;line-height:1.55}
.tdots{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.tdots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.tdots i.on{background:var(--purple)}
.tcard .btn{width:100%}
.tskip{margin-top:10px;background:none;border:0;color:var(--soft);font-size:12.5px;cursor:pointer}
.tskip:hover{color:var(--ink)}
/* ===== legal ===== */
.legal{max-width:760px;margin:0 auto;padding-top:14px}
.legal h1{font-family:var(--fdisp);font-weight:800;font-size:clamp(26px,4.5vw,38px);margin:22px 0 8px;letter-spacing:-.01em}
.legal .sub{color:var(--muted);font-size:15.5px;margin:0 0 8px}
.legal .warn{background:var(--pend-soft);border:1px solid color-mix(in srgb,var(--pend) 40%,transparent);border-radius:12px;padding:14px 18px;font-size:13.5px;color:var(--muted);margin:18px 0}
.legal .warn b{color:var(--pend)}
.legal .doc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 30px 32px;margin-top:22px}
.legal .doc h2{font-family:var(--fdisp);font-weight:700;font-size:22px;margin:0 0 4px}
.legal .fecha{font-size:12.5px;color:var(--soft);font-family:var(--fmono);margin-bottom:16px}
.legal h3{font-family:var(--fdisp);font-size:16px;margin:24px 0 6px;color:var(--purple-lt)}
.legal h3 span{color:var(--soft);font-weight:400;font-family:var(--fmono);font-size:13px;margin-right:6px}
.legal p{margin:8px 0;font-size:14.5px;color:var(--muted)}
.legal ul{margin:8px 0;padding-left:22px}.legal li{margin:5px 0;font-size:14px;color:var(--muted)}
.legal b{color:var(--ink)}
.legal .box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px 17px;margin:12px 0;font-size:13.5px;color:var(--muted)}
.legal .ph{background:var(--pend-soft);color:var(--pend);border-radius:5px;padding:1px 7px;font-weight:700;font-size:13px;font-family:var(--fmono)}

/* --- guías SEO por comercio (mismo bloque que /plazos) --- */
.gu-pasos{counter-reset:gp;display:flex;flex-direction:column;gap:10px;margin:16px 0}
.gu-paso{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.gu-paso:before{counter-increment:gp;content:counter(gp);flex:0 0 30px;height:30px;border-radius:999px;background:var(--brand-soft);color:var(--brand-lt);font-weight:800;display:flex;align-items:center;justify-content:center}
.gu-paso p{margin:2px 0 0;font-size:14px}
.gu-paso h3{margin:0;font-size:15.5px}
.gu-warn{background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:16px;padding:16px 18px;margin:14px 0}
.gu-warn h3{margin:0 0 4px;font-size:15.5px;color:var(--bad)}
.gu-warn p{margin:0;font-size:14px}
.gu-plazo{background:var(--card);border:1px solid color-mix(in srgb,var(--brand) 40%,var(--line));border-radius:16px;padding:16px 18px;margin:14px 0}
.gu-plazo h3{margin:0 0 4px;font-size:15.5px;color:var(--brand-lt)}
.gu-plazo p{margin:0;font-size:14px}
.gu-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 8px}
.gu-links a{font-size:13.5px;font-weight:700;color:var(--brand-lt);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);border-radius:999px;padding:8px 16px;text-decoration:none}
h2.gu{font-size:22px;margin:34px 0 6px;text-align:center}
.vx-banner{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 16%,var(--card)),color-mix(in srgb,var(--purple) 12%,var(--card)));border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);border-radius:22px;padding:30px 26px;text-align:center;margin:34px auto;max-width:760px}
.vx-banner h2{margin:0 0 8px;font-size:24px}
.vx-banner p{margin:0 auto 18px;font-size:14.5px;color:var(--muted);max-width:560px}
.vx-banner .why{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.gu-bc{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted);margin:0 0 14px;flex-wrap:wrap}
.gu-bc a{color:var(--muted);text-decoration:none}
.gu-bc a:hover{color:var(--brand-lt)}
.gu-bc b{color:var(--ink);font-weight:650}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:20px 0}
.fb-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;transition:border-color .2s,transform .2s}
.fb-card:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));transform:translateY(-2px)}
.fb-card h3{margin:0 0 6px;font-size:16px;color:var(--ink)}
.fb-card p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.fb-go{font-size:12.5px;font-weight:750;color:var(--brand-lt)}
.gu-paso{align-items:flex-start}
.gu-media{flex:0 0 170px;margin-left:auto}
.gu-media img{width:170px;height:auto;display:block;border-radius:10px;border:1px solid var(--line)}
.gu-media-tk svg{width:150px;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.gu-abrir{display:inline-block;margin-top:8px;font-size:13px;font-weight:750;color:var(--brand-lt);text-decoration:none}
@media(max-width:640px){.gu-media{flex-basis:100%;margin:12px 0 0;display:flex;justify-content:center}}

.tk-sec{display:flex;flex-direction:column;align-items:center;margin:30px 0 6px}
.tk-sec svg{width:min(330px,88vw);height:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.28));border-radius:6px}
.tk-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:820px;margin:18px auto 0;align-items:start}
.tk-real img{width:100%;max-height:600px;object-fit:contain;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.tk-mapa svg{width:min(310px,84vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.28));border-radius:6px}
.tk-dos figcaption{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px}
.tk-dos .tk-leg{margin-top:12px}
.tk-cap{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center}
.tk-leg{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:12px;max-width:640px}
.tk-leg span{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.tk-leg b.n{flex:0 0 20px;width:20px;height:20px;border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;display:inline-flex;align-items:center;justify-content:center}
h2.gu.tk-h{margin-top:30px}
.pt-frame{max-width:780px;margin:16px auto 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.pt-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line)}
.pt-dot{width:9px;height:9px;border-radius:999px;background:var(--soft)}
.pt-url{flex:1;font-size:11.5px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:4px 12px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fmono)}
.pt-frame img{display:block;width:100%;height:auto}

.gu-hoy{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--brand-lt)}
.gu-check{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:22px 0 4px;font-size:13px;color:var(--muted)}
.gu-check b{flex-basis:100%;text-align:center;color:var(--ink);font-size:13.5px}

/* ============================================================
   El botón flotante de WhatsApp tapaba el final del contenido
   en celular (se encimaba con el texto de la última tarjeta).
   Se le deja aire abajo a la página, del alto del botón + margen.
   ============================================================ */
@media(max-width:720px){
  .wrap{padding-bottom:88px}
}

/* NINGÚN CAMPO POR DEBAJO DE 16px EN EL TELÉFONO.
   ==========================================================================
   Safari en iPhone hace zoom SOLO cuando tocas un campo cuya letra mide menos
   de 16px: la pantalla se acerca de golpe, se sale de cuadro, y hay que
   pellizcar para volver. Es una regla del sistema y no se puede desactivar —
   lo único que la evita es que la letra mida 16.
   Medido el 10-ago en la página en vivo: TODOS los campos estaban debajo. Los
   datos fiscales del registro —donde la persona teclea su RFC— a 14px.
   Va como regla general y no campo por campo, para que valga también para los
   que se escriban mañana. Se dejan fuera los que no llevan texto (deslizador,
   casillas), donde 16px sólo cambiaría su forma.                            */
@media (max-width: 900px) {
  /* `!important` a propósito. Es un MÍNIMO de accesibilidad, no un estilo: una
     clase cualquiera (.selp, .inp) le gana a un selector de elemento, y eso ya
     dejó dos listas del registro en 14px después del primer intento. Aquí lo
     que tiene que ganar siempre es el piso. */
  input:not([type=range]):not([type=checkbox]):not([type=radio]),
  select, textarea { font-size: 16px !important; }
}

/* MÍNIMO TÁCTIL EN LO PULSABLE DEL SITIO — 44 píxeles.
   ==========================================================================
   Es la medida bajo la cual un dedo empieza a fallar. En la portada quedaban
   23 cosas por debajo: los tres enlaces del menú de arriba (20px de alto), los
   botoncitos de comercios (33) y los del pie (21, con 9 de aire entre ellos).
   Son justo los que se pican con el pulgar y con prisa.

   Se agrandan con `padding` y `min-height`, no con el truco del anillo: éstos
   se ENVUELVEN en varias líneas, y dos anillos vecinos se montarían — el de
   arriba taparía al de abajo y se picaría el que no era. El padding sí empuja.

   Sólo en pantallas de teléfono: en un escritorio con ratón nada de esto hace
   falta y estiraría el diseño sin motivo.                                   */
@media (max-width: 900px) {
  .topnav a, .landfoot a, .gx-chips a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 10px;
  }
  .gx-chips { gap: 8px; }
  .landfoot a { margin-left: 8px; }
}

/* El salvavidas de las guías --------------------------------------------
   Va en el punto donde la persona se atora, no al final. Tiene que leerse
   como una SALIDA y no como un paso más de la guía — pero sin gritar: quien
   llega aquí ya está frustrado. */
.ig-rescate{background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 26%,transparent);border-radius:14px;padding:15px 17px;margin:18px 0}
.ig-rescate p{margin:0;font-size:14.5px;line-height:1.62;color:var(--soft)}
.ig-rescate p b{color:var(--ink)}
.ig-rescate p+p{margin-top:11px}
.ig-rescate a{color:var(--purple-lt);font-weight:700;text-decoration:none}
.ig-rescate a:hover{text-decoration:underline}

/* Las guías vecinas -------------------------------------------------------
   Quien termina de leer una guía hoy no tiene a dónde ir. Esto no es por
   posicionamiento —nuestros propios datos lo desmienten: la guía con MENOS
   enlaces internos es la mejor posicionada— sino porque el hub es la única
   página que gana clics: cuando a la gente se le enseña una lista de guías,
   entra. Aquí esa lista queda donde el lector ya terminó. */
.gu-vecinas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.gu-vt{width:100%;margin:0 0 4px;font-size:13px;font-weight:700;color:var(--soft)}
.gu-vecinas a{font-size:13.5px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .15s,color .15s}
.gu-vecinas a:hover{border-color:var(--purple);color:var(--purple-lt)}