/* ============================================================
   Foxta · sistema de diseño compartido (multipágina)
   ============================================================ */
:root{
  --sapphire:#1aa6ee; --teal:#0a84f0; --teal-d:#0a6bd6; --cyan:#13c6e6;
  --sand:#F7F5F1; --grad:linear-gradient(135deg,#15c8e8,#0a84f0);
  --ink:#041525; --grey:#5b6b78; --line:#e7e3dc; --white:#fff;
  --navy:#072036; --navy-2:#0c2f4e;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Etiquetas tipo "01 / sección" */
.label{font-family:var(--mono);font-size:13px;letter-spacing:.5px;color:var(--grey);text-transform:lowercase;display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
.label b{color:var(--teal);font-weight:700}
.label.center{justify-content:center;width:100%}

/* Tipografía de secciones */
h1{font-size:56px;line-height:1.05;letter-spacing:-1.8px;font-weight:800}
h2{font-size:38px;line-height:1.12;letter-spacing:-1px;font-weight:800}
h3{font-size:20px;font-weight:800}
.grad{background:linear-gradient(120deg,var(--sapphire),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.em{color:var(--teal-d)}
.lead{font-size:19px;color:var(--grey)}
.center{text-align:center}
.section{padding:84px 0}
.section.tight{padding:56px 0}
@media(max-width:760px){
  h1{font-size:38px;letter-spacing:-1px}
  h2{font-size:29px;letter-spacing:-.6px}
  .section{padding:60px 0}
}

/* ===== Barra de anuncio ===== */
.topbar{background:var(--cyan);color:#04202b;font-size:13.5px;text-align:center;padding:9px 16px}
.topbar a{color:#04202b;font-weight:800;border-bottom:1px solid rgba(4,32,43,.45);white-space:nowrap}
.topbar .sep{opacity:.5;margin:0 10px}

/* ===== Nav ===== */
nav{position:sticky;top:0;z-index:60;background:rgba(247,245,241,.82);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
nav.scrolled{border-bottom-color:var(--line);background:rgba(247,245,241,.94)}
/* Al abrir el menú móvil quitamos el backdrop-filter del nav: si no, crea un bloque
   contenedor y el cajón (position:fixed) se descoloca tras hacer scroll (bug del menú). */
.nav2.open{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Cabecera estilo make: navy sólido arriba (texto claro) → blanca al hacer scroll.
   Sin backdrop-filter para no descolocar el menú (position:fixed). */
.nav2{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.nav2.scrolled{background:#fff;border-bottom-color:var(--line);box-shadow:0 6px 22px -18px rgba(4,21,37,.55)}
.nav2 .nav-links>a,.nav2 .nav-item>button{color:#fff}
.nav2 .nav-links>a:hover{color:#fff}
.nav2 .nav-item>button:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav2 .btn-power{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.nav2 .btn-power:hover{background:rgba(255,255,255,.1)}
.nav2.scrolled .nav-links>a,.nav2.scrolled .nav-item>button{color:#33414c}
.nav2.scrolled .nav-links>a:hover,.nav2.scrolled .nav-item>button:hover{color:var(--ink)}
.nav2.scrolled .nav-item>button:hover{background:#f2efe9}
.nav2.scrolled .btn-power{background:#fff;color:var(--ink);border-color:var(--line)}
/* Módulo «Gana recomendando Foxta»: en móvil, texto arriba y números debajo (no apiñado). */
@media(max-width:760px){.afi-hero{grid-template-columns:1fr!important;padding:28px 22px!important}}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px;gap:14px}
.logo{display:flex;align-items:center;font-weight:800;font-size:22px;justify-self:start}
.logo-img{height:26px;width:auto}
.nav-links{justify-self:center;display:flex;gap:6px;align-items:center;font-size:14.5px;background:none;border:none;border-radius:0;padding:0;box-shadow:none}
.nav-links>a,.nav-item>button{position:relative;background:none;border:none;font:inherit;color:#33414c;cursor:pointer;padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;transition:color .2s,background .2s}
.nav-links>a::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav-links>a:hover{color:var(--ink)}
.nav-links>a:hover::after{transform:scaleX(1)}
.nav-item>button:hover{color:var(--ink);background:#fff}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:6px}
.nav-login{font-size:14.5px;color:#33414c;padding:9px 14px;border-radius:10px;transition:background .2s,color .2s}
.nav-login:hover{color:var(--ink);background:#ece8e1}
.nav-toggle{display:none;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:10px;width:44px;height:40px;font-size:20px;line-height:1;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
/* Cuenta (icono persona + desplegable) */
.acct{position:relative}
.acct-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#33414c;transition:background .2s,color .2s,box-shadow .2s}
.acct-btn:hover{background:#fff;color:var(--ink);box-shadow:0 8px 18px -12px rgba(15,42,63,.4)}
.acct-btn svg{width:20px;height:20px;fill:currentColor}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -30px rgba(15,42,63,.35);padding:8px;min-width:215px;display:none;flex-direction:column;gap:2px;z-index:70}
.acct:hover .acct-menu,.acct:focus-within .acct-menu{display:flex}
.acct-menu a{padding:11px 14px;border-radius:10px;font-size:14.5px;color:#33414c;display:flex;align-items:center;gap:9px}
.acct-menu a:hover{background:#f4f1ec;color:var(--ink)}
.acct-menu a.am-primary{color:var(--teal-d);font-weight:700}

/* Dropdown de funcionalidades */
.nav-item{position:relative}
.nav-item .menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -30px rgba(15,42,63,.35);padding:10px;display:none;grid-template-columns:1fr 1fr;gap:4px;width:480px}
.nav-item:hover .menu,.nav-item:focus-within .menu{display:grid}
.menu a{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:11px}
.menu a:hover{background:#f4f1ec}
.menu .mi{font-size:20px;line-height:1.1}
.menu .mt{font-weight:700;font-size:14px}
.menu .md{font-size:12.5px;color:var(--grey);line-height:1.4}
@media(max-width:900px){
  .nav-in{grid-template-columns:1fr auto;row-gap:10px}
  .logo{grid-column:1;justify-self:start}
  .nav-toggle{display:inline-flex;grid-column:2;justify-self:end}
  .nav-links{grid-column:1 / -1;display:none;flex-direction:column;gap:2px;width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -26px rgba(15,42,63,.4);padding:6px}
  .nav-links>a{justify-content:flex-end;text-align:right;width:100%;padding:13px 16px}
  .nav-links>a::after{display:none}
  .nav-cta{grid-column:1 / -1;display:none;flex-direction:column;gap:8px;width:100%}
  .nav-cta .btn,.nav-cta .btn-power{justify-content:center;width:100%}
  nav.open .nav-links,nav.open .nav-cta{display:flex}
}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;font-weight:700;padding:12px 20px;border-radius:11px;border:none;cursor:pointer;font-size:15px;font-family:inherit;transition:transform .15s,filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.05) saturate(1.08);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(10,132,240,.6)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;box-shadow:0 8px 20px -12px rgba(15,42,63,.3);filter:none}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:13px}
.btn-white{background:#fff;color:var(--ink)}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}
.cta-row.center{justify-content:center}
.microcopy{font-family:var(--mono);font-size:12.5px;color:var(--grey);margin-top:16px}

/* ===== Hero ===== */
.hero{position:relative;padding:42px 0 52px;text-align:center;overflow:hidden}
.blob{position:absolute;inset:0;z-index:0;pointer-events:none}
.blob::before,.blob::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);opacity:.28;animation:float 15s ease-in-out infinite}
.blob::before{width:420px;height:420px;background:var(--sapphire);top:-90px;left:6%}
.blob::after{width:380px;height:380px;background:var(--teal);top:30px;right:5%;animation-delay:-7s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(26px) scale(1.08)}}
/* Fondo aurora animado */
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background:
    radial-gradient(38% 46% at 18% 22%, rgba(26,166,238,.32), transparent 62%),
    radial-gradient(40% 48% at 82% 26%, rgba(19,198,230,.28), transparent 62%),
    radial-gradient(46% 52% at 50% 96%, rgba(10,132,240,.22), transparent 60%);
  animation:aurora 18s ease-in-out infinite}
@keyframes aurora{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(2%,-2%,0) scale(1.06)}66%{transform:translate3d(-2%,2%,0) scale(1.04)}}
.hero .wrap{position:relative;z-index:1}
.pill{display:inline-block;background:#e8f4ff;color:var(--teal-d);font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{max-width:820px;margin:0 auto 18px}
.hero .sub{font-size:20px;color:var(--grey);max-width:600px;margin:0 auto 30px}
@media(max-width:760px){.hero .sub{font-size:17px}
  .mic-stage{width:170px;height:150px;margin-bottom:14px}
  .mic-orb{width:88px;height:88px}.mic-orb svg{width:40px;height:40px}
  .mic-stage .ring{width:96px;height:96px}}

/* ===== Micrófono hero (valor diferencial) ===== */
.mic-stage{position:relative;width:220px;height:200px;margin:8px auto 22px;display:flex;align-items:center;justify-content:center}
.mic-stage .ring{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(19,198,230,.55);animation:ripple 2.8s ease-out infinite}
.mic-stage .ring.r2{animation-delay:.9s}
.mic-stage .ring.r3{animation-delay:1.8s}
@keyframes ripple{0%{transform:scale(.55);opacity:.85}80%{opacity:.12}100%{transform:scale(2);opacity:0}}
.mic-orb{position:relative;width:110px;height:110px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 22px 55px -12px rgba(10,132,240,.75);animation:orbPulse 2.8s ease-in-out infinite}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.mic-orb svg{width:48px;height:48px;fill:#fff;position:relative;z-index:2}
.mic-orb .eqi{position:absolute;bottom:24px;display:flex;gap:4px;align-items:flex-end;height:22px;z-index:2}
.mic-orb .eqi i{width:5px;height:8px;background:rgba(255,255,255,.92);border-radius:3px;animation:eq 1s ease-in-out infinite}
.mic-orb .eqi i:nth-child(2){animation-delay:.15s}.mic-orb .eqi i:nth-child(3){animation-delay:.3s}.mic-orb .eqi i:nth-child(4){animation-delay:.45s}.mic-orb .eqi i:nth-child(5){animation-delay:.6s}
@media(prefers-reduced-motion:reduce){.mic-stage .ring,.mic-orb{animation:none}}

/* ===== Aparición escalonada de bloques ===== */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cards.reveal .card,.reasons.reveal .reason,.plans.reveal .plan{opacity:0}
.cards.reveal.in .card,.reasons.reveal.in .reason,.plans.reveal.in .plan{animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.cards.reveal.in .card:nth-child(2),.reasons.reveal.in .reason:nth-child(2),.plans.reveal.in .plan:nth-child(2){animation-delay:.08s}
.cards.reveal.in .card:nth-child(3),.reasons.reveal.in .reason:nth-child(3),.plans.reveal.in .plan:nth-child(3){animation-delay:.16s}
.cards.reveal.in .card:nth-child(4),.reasons.reveal.in .reason:nth-child(4){animation-delay:.24s}
.cards.reveal.in .card:nth-child(5),.reasons.reveal.in .reason:nth-child(5){animation-delay:.32s}
.cards.reveal.in .card:nth-child(6),.reasons.reveal.in .reason:nth-child(6){animation-delay:.4s}
@media(prefers-reduced-motion:reduce){.cards.reveal .card,.reasons.reveal .reason,.plans.reveal .plan{opacity:1;animation:none}}

/* ===== Ventana de app (mockup) ===== */
.appwin{max-width:760px;margin:44px auto 0;background:#0a2233;border-radius:20px;box-shadow:0 50px 90px -50px rgba(4,21,37,.7);overflow:hidden;text-align:left}
.appwin .bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#0c2840;border-bottom:1px solid rgba(255,255,255,.06)}
.appwin .dots{display:flex;gap:6px}.appwin .dots i{width:10px;height:10px;border-radius:50%;background:#2c465e;display:block}
.appwin .bname{color:#9fc1dc;font-size:13px;font-weight:600}
.appwin .live{margin-left:auto;color:#6bdca0;font-size:11.5px;font-family:var(--mono)}
.appwin .body{padding:18px}
.bubble{border-radius:14px;padding:13px 15px;margin-bottom:12px;font-size:15px}
.bubble.u{background:#103a5c;color:#dbeeff;display:flex;align-items:center;gap:10px}
.bubble.a{background:#fff;color:var(--ink);box-shadow:0 10px 30px -20px rgba(0,0,0,.5)}
.mic{display:inline-flex;gap:3px;align-items:center}
.mic i{width:3px;height:14px;background:#5fd0ee;border-radius:2px;display:block;animation:eq 1s ease-in-out infinite}
.mic i:nth-child(2){animation-delay:.15s}.mic i:nth-child(3){animation-delay:.3s}.mic i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:7px}50%{height:16px}}
.inv-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:#41525f}
.inv-tot{display:flex;justify-content:space-between;font-weight:800;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.inv-stamp{display:inline-block;margin-top:10px;background:#e1f5ee;color:#0d8276;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px}
.tw-caret{display:inline-block;color:#5fd0ee;font-weight:400;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ===== Sección PROBLEMA: iconos con color + parallax de las cajas ===== */
.prob{perspective:1100px}
.prob .b{transition:transform .3s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;will-change:transform}
.prob .feat .fi{width:54px;height:54px;border-radius:15px;border:1px solid rgba(255,255,255,.4);
  box-shadow:0 10px 20px -12px rgba(4,21,37,.38),inset 0 1px 1px rgba(255,255,255,.4)}
.prob .fi.c1{background:radial-gradient(120% 120% at 30% 12%,rgba(255,255,255,.22),rgba(255,255,255,0) 46%),linear-gradient(158deg,#f36a5e,#d23a33 100%)}
.prob .fi.c2{background:radial-gradient(120% 120% at 30% 12%,rgba(255,255,255,.22),rgba(255,255,255,0) 46%),linear-gradient(158deg,#f6a838,#d97e10 100%)}
.prob .fi.c3{background:radial-gradient(120% 120% at 30% 12%,rgba(255,255,255,.2),rgba(255,255,255,0) 46%),linear-gradient(158deg,#8a70ef,#5a3ac6 100%)}
.prob .feat .fi .fxi{color:#fff;width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}
.prob .feat h3{font-size:23px;letter-spacing:-.4px;line-height:1.15}
.prob .feat p{font-size:15px}
.prob .feat p b{color:var(--ink);font-weight:700}

/* ===== Métricas ===== */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.metric{text-align:center}
.metric .v{font-size:40px;font-weight:800;letter-spacing:-1px}
.metric .k{color:var(--grey);font-size:15px;margin-top:4px}
@media(max-width:760px){.metrics{grid-template-columns:1fr;gap:26px}}

/* ===== Filas de funcionalidad alternadas ===== */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin:0 0 30px}
.frow.flip .ftext{order:2}
.ftext h2{margin:10px 0 14px}
.fsub{margin:16px 0}
.fsub .fi{display:flex;gap:12px;margin-bottom:14px}
.fsub .fi .d{font-size:22px;line-height:1.1}
.fsub .fi b{display:block;font-size:15.5px}
.fsub .fi p{font-size:14.5px;color:var(--grey)}
.flink{display:inline-flex;align-items:center;gap:6px;color:var(--teal-d);font-weight:700;font-size:15px;margin-top:4px}
.fvisual{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 30px 70px -50px rgba(15,42,63,.4)}
@media(max-width:820px){
  .frow{grid-template-columns:1fr;gap:26px}
  .frow.flip .ftext{order:0}
}

/* ===== Rejilla de tarjetas ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 20px 50px -42px rgba(15,42,63,.35)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.card h3{font-size:16.5px;margin-bottom:6px}
.card p{font-size:14px;color:var(--grey)}
@media(max-width:860px){.cards,.cards.two{grid-template-columns:1fr}}

/* ===== Razones numeradas ===== */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reason{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.reason .n{font-family:var(--mono);font-size:13px;color:var(--teal);font-weight:700;margin-bottom:10px}
.reason h3{font-size:17px;margin-bottom:8px}
.reason p{font-size:14px;color:var(--grey)}
.reason .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.reason .tags span{font-size:11.5px;background:#eef4f9;color:#3b5366;border-radius:7px;padding:3px 8px;font-weight:600}
@media(max-width:860px){.reasons{grid-template-columns:1fr}}

/* ===== Precios ===== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.plan.feat{border:2px solid var(--teal);box-shadow:0 30px 60px -40px rgba(10,132,240,.5)}
.plan .pop{align-self:flex-start;background:#e8f4ff;color:var(--teal-d);font-size:12px;font-weight:700;padding:4px 11px;border-radius:8px;margin-bottom:10px}
.plan h3{font-size:19px}
.plan .amount{font-size:38px;font-weight:800;margin:8px 0 2px;letter-spacing:-1px}
.plan .amount span{font-size:15px;font-weight:600;color:var(--grey)}
.plan .ptag{font-size:14px;color:var(--grey);margin:8px 0 16px;min-height:42px}
.plan ul{list-style:none;margin:0 0 20px;flex:1}
.plan li{display:flex;gap:9px;font-size:14.5px;padding:7px 0;color:#33414c}
.plan li::before{content:"✓";color:var(--teal-d);font-weight:800}
.plan li.off{color:#9aa7b1}.plan li.off::before{content:"—";color:#c3ccd3}
.trial-note{display:inline-block;background:#eef4f9;color:#3b5366;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

/* ===== Tabla comparativa ===== */
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{background:#f4f1ec;font-size:14px}
.cmp td.c,.cmp th.c{text-align:center;width:130px}
.cmp tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--teal-d);font-weight:800}
.cmp .no{color:#c3ccd3}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 18px;margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:20px;height:20px;position:relative;flex:0 0 auto}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--teal);border-radius:2px}
.faq summary .plus::before{left:9px;top:2px;width:2px;height:16px;transition:opacity .2s}
.faq summary .plus::after{left:2px;top:9px;width:16px;height:2px}
.faq details[open] summary .plus::before{opacity:0}
.faq .ans{font-size:15px;color:#41525f;padding:0 0 18px;line-height:1.6}

/* ===== CTA final ===== */
.cta-final{background:linear-gradient(135deg,var(--navy-2),var(--ink));color:#fff;border-radius:24px;padding:54px 32px;text-align:center}
.cta-final h2{color:#fff}
.cta-final p{color:#9fc7f5;font-size:18px;margin:12px 0 26px}

/* ===== Testimonios (placeholder honesto) ===== */
.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;max-width:760px;margin:0 auto;text-align:center}
.quote p{font-size:22px;font-weight:600;line-height:1.4}
.quote .who{margin-top:16px;color:var(--grey);font-size:14px}

/* ===== Footer ===== */
footer{border-top:1px solid rgba(255,255,255,.08);margin-top:0;padding:56px 0 42px;background:#0c2f4e;color:#cfe0ee}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot-grid h5{font-family:var(--mono);font-size:12px;color:#7e9bb5;text-transform:lowercase;margin-bottom:12px;font-weight:600}
.foot-grid a{display:block;color:#cfe0ee;font-size:14px;margin-bottom:9px;transition:color .2s}
.foot-grid a:hover{color:#fff}
.foot-grid .tag{color:#9fb6c9;font-size:14px;max-width:280px;margin-top:10px}
.stores{display:flex;gap:10px;margin-top:14px}
.stores span{display:inline-block;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12px;color:var(--grey);font-weight:600}
.foot-bottom{margin-top:38px;color:#8aa4bc;font-size:13px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.disc{font-size:12px;color:#7e95a8;max-width:760px;margin:12px 0 0;line-height:1.5}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px}.foot-grid>div:first-child{grid-column:1 / -1}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr 1fr;gap:24px 16px}.foot-grid>div:first-child{grid-column:1 / -1}}

/* ============ HOME ERP/POS · secciones nuevas ============ */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:#0a6bd6;font-weight:700;margin:0 0 12px}
.sec-head{max-width:760px;margin:0 auto 40px;text-align:center}
.sec-head h2{font-size:34px;line-height:1.12;margin:0 0 14px}
.sec-head p{font-size:17.5px;line-height:1.65;color:var(--grey);margin:0}
.section{padding:78px 0}
.section.tight{padding:54px 0}
.section.alt{background:linear-gradient(180deg,#fff,#f7f4ee)}
.section.dark{background:radial-gradient(120% 140% at 50% -20%,#0c2f4e 0%,#041525 60%);color:#eaf2f9}
.section.dark h2{color:#fff}.section.dark .sec-head p{color:#9fb6c9}

/* Hero ERP */
.erp-hero{position:relative;overflow:hidden;padding:120px 0 70px}
.erp-hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.05;margin:0 0 18px;letter-spacing:-.5px}
.erp-hero .sub{font-size:clamp(16px,2.2vw,20px);max-width:620px;color:#33414c;line-height:1.6}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px}
.hero-stats .hs b{display:block;font-size:26px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.hero-stats .hs span{font-size:12.5px;color:var(--grey);font-weight:600}

/* Mock TPV flotante */
.mock{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(4,21,37,.6);padding:16px;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.mock-top{display:flex;align-items:center;gap:6px;padding:4px 6px 12px}
.mock-top i{width:11px;height:11px;border-radius:50%;display:inline-block;background:#e7e3dc}
.mock-top i:nth-child(1){background:#ff6058}.mock-top i:nth-child(2){background:#ffbd2e}.mock-top i:nth-child(3){background:#28c840}
.mock-top span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--grey)}
.mock-body{display:grid;grid-template-columns:1fr .8fr;gap:12px}
.mk-card{background:#f7f4ee;border:1px solid var(--line);border-radius:13px;padding:13px}
.mk-card h6{margin:0 0 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey)}
.mk-line{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed #e3ddd2}
.mk-line:last-child{border-bottom:none}
.mk-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;font-weight:800;font-size:19px}
.mk-pay{background:var(--grad);color:#fff;text-align:center;border-radius:11px;padding:11px;font-weight:700;font-size:14px;margin-top:10px;box-shadow:0 14px 28px -14px rgba(10,132,240,.7)}
.mk-mini{display:flex;flex-direction:column;gap:8px}
.mk-chip{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px;font-size:12.5px;display:flex;align-items:center;gap:8px}
.mk-chip .dot{width:8px;height:8px;border-radius:50%;background:#28c840;box-shadow:0 0 0 4px rgba(40,200,64,.16)}
.mk-bars{display:flex;align-items:flex-end;gap:6px;height:62px;margin-top:4px}
.mk-bars i{flex:1;background:linear-gradient(180deg,#15c8e8,#0a6bd6);border-radius:4px 4px 0 0;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{height:0}to{height:var(--h)}}

/* Bento de módulos */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bento .b{grid-column:span 1}
.bento .b.wide{grid-column:span 2}
.feat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.feat:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(4,21,37,.5);border-color:#cfe0ee}
.feat .fi{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;background:linear-gradient(135deg,#eaf4fe,#dcecfb);margin-bottom:15px}
.feat h3{font-size:18.5px;margin:0 0 8px}
.feat p{font-size:14.5px;color:var(--grey);line-height:1.6;margin:0}
.feat .tagm{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:800;color:#0a6bd6;background:#eef4f9;padding:3px 9px;border-radius:20px}
/* Azulejos de icono con color por tarjeta (5 tonos de marca en rotación, sin morado). */
#modulos .bento .b:nth-child(5n+1) .fi{background:linear-gradient(135deg,#e7f1fd,#d8e9fb)}
#modulos .bento .b:nth-child(5n+1) .fxi{color:#0a6bd6}
#modulos .bento .b:nth-child(5n+2) .fi{background:linear-gradient(135deg,#e0f5ee,#ccecdc)}
#modulos .bento .b:nth-child(5n+2) .fxi{color:#0f9e75}
#modulos .bento .b:nth-child(5n+3) .fi{background:linear-gradient(135deg,#eaf3de,#dbebc2)}
#modulos .bento .b:nth-child(5n+3) .fxi{color:#5f8f14}
#modulos .bento .b:nth-child(5n+4) .fi{background:linear-gradient(135deg,#fbf0da,#f6e2bd)}
#modulos .bento .b:nth-child(5n+4) .fxi{color:#b9770f}
#modulos .bento .b:nth-child(5n+5) .fi{background:linear-gradient(135deg,#fbeee9,#f6d8cb)}
#modulos .bento .b:nth-child(5n+5) .fxi{color:#cf5a2f}
/* Iconos de módulos con volumen (degradado claro→oscuro, borde, relieve) */
#modulos .feat .fi{border:1px solid rgba(255,255,255,.4);box-shadow:0 9px 18px -12px rgba(4,21,37,.32),inset 0 1px 1px rgba(255,255,255,.4)}
#modulos .feat .fi .fxi{color:#fff !important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
#modulos .bento .b:nth-child(5n+1) .fi{background:radial-gradient(115% 110% at 28% 16%,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),linear-gradient(158deg,#5cc0ff,#1f7fe0 45%,#0a5bc0)}
#modulos .bento .b:nth-child(5n+2) .fi{background:radial-gradient(115% 110% at 28% 16%,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),linear-gradient(158deg,#57e0bf,#17b58c 45%,#0e8a68)}
#modulos .bento .b:nth-child(5n+3) .fi{background:radial-gradient(115% 110% at 28% 16%,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),linear-gradient(158deg,#b6e06a,#84b52f 45%,#5f8f14)}
#modulos .bento .b:nth-child(5n+4) .fi{background:radial-gradient(115% 110% at 28% 16%,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),linear-gradient(158deg,#ffd98a,#f0a63a 45%,#c47f12)}
#modulos .bento .b:nth-child(5n+5) .fi{background:radial-gradient(115% 110% at 28% 16%,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),linear-gradient(158deg,#ff9a86,#e56b48 45%,#cf5a2f)}

/* Filas alternas con texto+visual */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split.rev .sv{order:2}
.split h3{font-size:27px;line-height:1.15;margin:0 0 14px}
.split p{font-size:16.5px;color:var(--grey);line-height:1.7;margin:0 0 14px}
.split .ck{list-style:none;padding:0;margin:8px 0 0}
.split .ck li{position:relative;padding-left:30px;margin:11px 0;font-size:15.5px;line-height:1.5}
.split .ck li::before{content:"✓";position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sv{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 30px 70px -50px rgba(4,21,37,.5)}
.section.dark .sv{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}

/* Marquee integraciones */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{display:flex;gap:14px;width:max-content;animation:slide 26s linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.intg{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-weight:700;font-size:14.5px;white-space:nowrap}
.intg .d{width:9px;height:9px;border-radius:50%}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -12px rgba(10,132,240,.7)}
.step h3{font-size:18px;margin:14px 0 8px}
.step p{font-size:14.5px;color:var(--grey);line-height:1.6;margin:0}

/* Segmentos */
.segs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.segs span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:600}

/* Banda "por qué Foxta" (diferenciales) */
.why3{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.why-c{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.why-c h3{font-size:16px;margin:0 0 8px}
.why-c p{font-size:14px;color:var(--grey);line-height:1.6;margin:0}
.why-c b{color:var(--ink)}

/* Árbol de sectores */
.sector-tree{max-width:960px;margin:0 auto}
.stree-inner{transition:transform .3s ease-out;will-change:transform}
.stree-root{display:flex;justify-content:center}
.stree-root b{background:var(--grad);color:#fff;font-weight:800;font-size:15px;padding:11px 24px;border-radius:999px;box-shadow:0 16px 34px -16px rgba(10,132,240,.75)}
.stree-stem{width:2px;height:26px;margin:6px auto 0;background:linear-gradient(var(--teal),rgba(10,132,240,0))}
.stree-branch{margin:20px 0}
.stree-branch h4{text-align:center;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-d);margin:0 0 13px;font-weight:800}
.stree-leaves{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.leaf-w{display:inline-block;animation:leafFloat 6s ease-in-out infinite;will-change:transform}
.leaf-w:nth-child(2n){animation-duration:7.4s;animation-delay:-1.5s}
.leaf-w:nth-child(3n){animation-duration:5.3s;animation-delay:-3s}
.leaf-w:nth-child(5n){animation-duration:8s;animation-delay:-2.2s}
.leaf{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:14px;font-weight:600;cursor:default;transition:transform .25s,box-shadow .25s,border-color .25s}
.leaf i{font-style:normal;font-size:15px;line-height:1}
.leaf:hover{transform:translateY(-6px) scale(1.06);border-color:transparent;box-shadow:0 16px 32px -14px rgba(10,132,240,.55),0 0 0 1.5px var(--teal)}
.stree-foot{text-align:center;color:var(--grey);font-size:14.5px;margin:20px auto 0;max-width:620px;line-height:1.6}
.stree-foot b{color:var(--ink)}
@keyframes leafFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.leaf-w{animation:none}.stree-inner{transition:none}}

/* FAQ */
/* Dos columnas para aprovechar el ancho. GRID y no `columns`: con columns, al abrir
   un desplegable el contenido se recalcula y las fichas SALTAN de columna delante del
   usuario. Con grid cada ficha se queda en su sitio y solo crece hacia abajo.
   align-items:start evita que la ficha corta se estire para igualar a la abierta. */
.faq{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:0;transition:box-shadow .2s}
@media(max-width:820px){.faq{grid-template-columns:1fr;max-width:780px}}
.faq details[open]{box-shadow:0 18px 40px -30px rgba(4,21,37,.5)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:#0a6bd6;font-weight:400;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--grey);font-size:15px;line-height:1.7}

/* CTA final */
.cta-final{background:radial-gradient(125% 150% at 50% -25%,#0d3e6e 0%,#0a3a63 22%,#072844 52%,#041525 100%);color:#fff;border-radius:28px;padding:64px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:0 50px 120px -55px rgba(21,160,232,.5),0 0 0 1px rgba(255,255,255,.06)}
.cta-final h2{color:#fff;font-size:34px;margin:0 0 12px}
.cta-final p{font-size:18px;opacity:.92;max-width:560px;margin:0 auto 26px}

@media(max-width:900px){.hero-grid,.split,.split.rev .sv{grid-template-columns:1fr}.split.rev .sv{order:0}.bento{grid-template-columns:1fr 1fr}.bento .b.wide{grid-column:span 2}.steps{grid-template-columns:1fr}.erp-hero{padding:56px 0 78px;min-height:auto}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento .b.wide{grid-column:span 1}.sec-head h2{font-size:27px}.mock-body{grid-template-columns:1fr}}

/* ============ Iconografía corporativa (SVG de línea, sin emojis) ============ */
.fxi{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.16em;flex:none}
#fx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.tb-fox{width:15px;height:15px;vertical-align:-3px;margin-right:4px;border-radius:4px}
.fox-mark{width:18px;height:18px;vertical-align:-4px;margin-right:6px;border-radius:5px}
.feat .fi{color:#0a6bd6}.feat .fi .fxi{width:26px;height:26px}
.tin .ti{display:flex;align-items:center;gap:9px}.tin .ti .fxi{color:#0a6bd6;width:21px;height:21px}
.mk-chip .fxi,.mk-line .fxi{color:#0a6bd6}
.mk-pay .fxi{color:#fff;vertical-align:-.2em;margin-right:5px}
.split .sv .mk-line .fxi{margin-right:7px}

/* ============ HERO WOW (oscuro, dramático) ============ */
.erp-hero{background:radial-gradient(125% 120% at 50% -10%,#0d3e6e 0%,#072844 46%,#041525 100%);color:#fff;min-height:auto;display:flex;align-items:center;padding:72px 0 112px}
.erp-hero::before{content:"";position:absolute;top:50%;left:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0%,rgba(21,200,232,.16) 12%,transparent 28%,rgba(10,132,240,.22) 46%,transparent 62%,rgba(20,140,255,.18) 80%,transparent 100%);animation:spin 30s linear infinite;z-index:0;pointer-events:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.erp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 75% at 50% 125%,transparent 42%,rgba(4,21,37,.55) 100%);z-index:0;pointer-events:none}
.erp-hero .wrap{position:relative;z-index:2}
.erp-hero h1{color:#fff;font-size:clamp(40px,6.2vw,72px);line-height:1.02;letter-spacing:-1px}
.erp-hero .sub{color:#c1d6e8;max-width:600px}
.erp-hero .pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#dff0ff;backdrop-filter:blur(6px)}
.erp-hero .microcopy{color:#86a4bd}
.erp-hero .hero-stats .hs span{color:#9fb6c9}
.erp-hero .grad{background:linear-gradient(90deg,#15c8e8 0%,#9fe7ff 30%,#15c8e8 60%,#9fe7ff 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:220% center}}
.erp-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.04)}
.erp-hero .btn-ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}
.erp-hero .mock{box-shadow:0 50px 130px -45px rgba(21,160,232,.55),0 0 0 1px rgba(255,255,255,.05);position:relative}
.erp-hero .mock::before{content:"";position:absolute;inset:-3px;border-radius:24px;background:linear-gradient(135deg,rgba(21,200,232,.55),rgba(10,132,240,.42));filter:blur(28px);z-index:-1;opacity:.6;animation:pulseGlow 5s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:.4}50%{opacity:.85}}
.hero-rev{opacity:0;transform:translateY(30px);animation:heroUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero-rev.d1{animation-delay:.06s}.hero-rev.d2{animation-delay:.2s}.hero-rev.d3{animation-delay:.34s}.hero-rev.d4{animation-delay:.48s}.hero-rev.d5{animation-delay:.62s}
@keyframes heroUp{to{opacity:1;transform:none}}
.scrolldn{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;color:#aecbe2;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;opacity:.75}
.scrolldn svg{width:22px;height:22px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.hero-rev{opacity:1;transform:none;animation:none}.erp-hero::before,.erp-hero .grad,.scrolldn svg,.erp-hero .mock::before{animation:none}}

/* Botón de encendido (Entrar) */
.btn-power{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:11px;font-weight:700;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s}
.btn-power svg{width:18px;height:18px;color:#0a84f0;transition:filter .2s}
.btn-power:hover{transform:translateY(-2px);border-color:#bfe0fb;box-shadow:0 12px 26px -12px rgba(10,132,240,.5);color:var(--ink)}
.btn-power:hover svg{filter:drop-shadow(0 0 5px rgba(10,132,240,.75))}

/* ============ Subpáginas: hero corto + tarifas ============ */
.erp-hero.short{min-height:auto;padding:132px 0 66px;text-align:center}
.erp-hero.short .sub{margin-left:auto;margin-right:auto}
.erp-hero.short .hero-stats{justify-content:center}
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
@media(hover:hover){.plan:hover{transform:translateY(-5px);box-shadow:0 30px 60px -40px rgba(4,21,37,.45)}}
.plan ul li::before{content:none}
.plan.feat{position:relative;overflow:hidden;border:3px solid #0a6bd6;background:linear-gradient(180deg,#f2f8ff,#ffffff);box-shadow:0 30px 70px -30px rgba(10,107,214,.6)}
.plan .badge{position:absolute;top:0;right:0;margin:0;padding:7px 10px 0 0;width:62px;height:62px;display:flex;align-items:flex-start;justify-content:flex-end;background:linear-gradient(135deg,#0a6bd6,#1aa0e6);clip-path:polygon(0 0,100% 0,100% 100%);color:#fff;font-size:20px;line-height:1;border:none;border-radius:0;box-shadow:none;pointer-events:none;font-weight:400}
.plan .pn{font-size:18px;font-weight:800}
.plan .pp{font-size:32px;font-weight:800;letter-spacing:-1px;margin:6px 0 2px}
.plan .pp span{font-size:14px;color:var(--grey);font-weight:600;letter-spacing:0}
.plan .pd{font-size:13.5px;color:var(--grey);margin-bottom:16px;min-height:36px}
.plan ul{list-style:none;padding:0;margin:0 0 18px;font-size:14px;line-height:1.45;flex:1}
/* OJO: la .plan li de arriba sigue poniendo display:flex y aquí nadie lo deshacía.
   Con el icono ya en position:absolute, el flex sobra y encima parte el texto:
   <b>, el "·", el enlace y el resto se volvían columnas que se salían de la tarjeta.
   display:block devuelve el texto a un flujo normal que envuelve como debe. */
.plan ul li{display:block;position:relative;padding-left:25px;margin:10px 0}
.plan ul li svg{position:absolute;left:0;top:2px;width:15px;height:15px;color:#0a84f0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan .btn,.plan .btn-power{width:100%;justify-content:center}
.price-note{text-align:center;color:var(--grey);font-size:14.5px;margin:22px auto 0;max-width:640px}
@media(max-width:980px){.pricing{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.pricing{grid-template-columns:1fr}}

/* ============ Hero centrado + hover glow (JS) ============ */
.erp-hero.center{text-align:center}
.erp-hero.center .pill,.erp-hero.center .sub{margin-left:auto;margin-right:auto}
.erp-hero.center .cta-row{justify-content:center}
.erp-hero.center .sub{max-width:660px}
/* glow que sigue al cursor en tarjetas */
.feat,.plan,.step{position:relative}
.feat::after,.plan::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(10,132,240,.13),transparent 62%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:0}
.feat:hover::after,.plan:hover::after,.step:hover::after{opacity:1}
.feat>*,.plan>*,.step>*{position:relative;z-index:1}
.section.dark .feat::after,.section.dark .plan::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(21,200,232,.16),transparent 62%)}
/* botones con brillo que cruza al hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn:hover::after{left:140%}

.article-img{width:100%;max-width:740px;margin:6px auto 8px;display:block;border-radius:16px;border:1px solid var(--line)}

/* ── Captura de lead (guía / newsletter) ───────────────────────── */
.lead-capture{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border-radius:26px;padding:60px 64px;display:grid;grid-template-columns:1fr minmax(320px,400px);
  gap:56px;align-items:center;box-shadow:0 34px 80px -34px rgba(7,32,54,.65)}
.lead-capture::before{content:"";position:absolute;inset:-50% -25% auto auto;width:70%;height:190%;
  background:radial-gradient(closest-side,rgba(19,198,230,.22),transparent 70%);pointer-events:none}
.lead-capture::after{content:"";position:absolute;left:-10%;bottom:-60%;width:50%;height:150%;
  background:radial-gradient(closest-side,rgba(10,132,240,.16),transparent 70%);pointer-events:none}
.lc-text{position:relative;z-index:1}
.lc-text h2{color:#fff;font-size:clamp(25px,2.5vw,34px);line-height:1.18;letter-spacing:-.01em;
  margin:18px 0 14px;max-width:15ch}
.lc-text p{color:#c7dceb;margin:0;font-size:17px;line-height:1.62;max-width:44ch}
.lc-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#08243c;background:var(--grad);padding:6px 13px;border-radius:999px}
.lc-form{position:relative;z-index:1;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:20px;padding:26px;backdrop-filter:blur(2px)}
.lc-row{display:flex;flex-direction:column;gap:12px}
.lc-row input{width:100%;padding:16px 17px;border-radius:13px;border:1px solid rgba(255,255,255,.2);
  background:#fff;color:var(--ink);font-size:15.5px;font-family:inherit;transition:box-shadow .15s,border-color .15s}
.lc-row input::placeholder{color:#9aa9b5}
.lc-row input:focus{outline:none;border-color:var(--sapphire);box-shadow:0 0 0 4px rgba(26,166,238,.28)}
.lc-row .btn{width:100%;padding:16px;font-size:16px;border-radius:13px}
.lc-note{color:#92aabe;font-size:12.5px;margin:14px 2px 0;line-height:1.55;text-align:center}
.lc-note a{color:#bfe3f2;text-decoration:underline}
.lc-msg{margin:14px 2px 0;font-size:14.5px;color:#eaf6ff;font-weight:600;text-align:center}
.lc-msg a{color:#9fe7ff;text-decoration:underline}
@media(max-width:820px){.lead-capture{grid-template-columns:1fr;gap:30px;padding:38px 28px}
  .lc-text h2{max-width:100%}.lc-text p{max-width:100%}}

/* ===== Nav v2: 4 ítems + submenús + drawer móvil (derecha) ===== */
.nav2 .nav-in{display:flex;align-items:center;justify-content:space-between;position:relative;height:66px;gap:12px}
.nav2 .logo{flex:none;justify-self:auto}
.nav2 .nav-panel{display:contents}
/* menú centrado en la página (absoluto: no lo empujan logo ni CTA) */
.nav2 .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-self:auto;margin:0;display:flex;align-items:center;gap:2px}
.nav2 .nav-cta{flex:none;justify-self:auto;display:flex;align-items:center;gap:8px}
.nav2 .nav-cta .btn,.nav2 .nav-cta .btn-power{white-space:nowrap}
/* caret de desplegable (visible + rota al abrir) */
.nav2 .cv{font-size:12px;opacity:.7;margin-left:5px;display:inline-block;transition:transform .2s,opacity .2s}
.nav2 .nav-item:hover .cv,.nav2 .nav-item.sub-open .cv{transform:rotate(180deg);opacity:1}
/* subrayado unificado en TODOS los ítems (enlaces y desplegables) */
.nav2 .nav-item>button::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav2 .nav-item:hover>button::after,.nav2 .nav-item:focus-within>button::after,.nav2 .nav-item.sub-open>button::after{transform:scaleX(1)}
/* submenú desktop: sin hueco (top:100%) + control por clase .sub-open (JS con margen) */
.nav2 .nav-item .menu{display:grid;top:100%;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,visibility .16s,transform .16s ease}
.nav2 .nav-item:hover .menu,.nav2 .nav-item:focus-within .menu,.nav2 .nav-item.sub-open .menu{opacity:1;visibility:visible;transform:none}
.nav2 .nav-item .menu.one{grid-template-columns:1fr;width:250px;padding:8px}
.nav2 .menu a{padding:10px 12px;font-size:14px;color:#33414c}
.nav2 .nav-backdrop{display:none}
@media(max-width:900px){
  .nav2 .nav-in{justify-content:space-between;gap:16px}
  .nav2 .nav-toggle{display:inline-flex;z-index:4;position:relative}
  /* Logo y botón flotan POR ENCIMA del panel (que cubre desde arriba) */
  .nav2 .logo{position:relative;z-index:4}

  /* Menú estilo make.com: se despliega DEBAJO de la cabecera fija (el JS fija el
     top = borde inferior de la cabecera). El fondo sigue el estado del nav:
     navy arriba, blanco al hacer scroll. La cabecera se queda en su sitio. */
  /* El panel blanco cubre TODA la pantalla desde arriba (top:0) y la cabecera flota
     encima (z-index mayor): así es imposible que quede un hueco entre ambos o que se
     vea el fondo de la web al estirar. El contenido arranca bajo la cabecera (padding-top). */
  .nav2 .nav-panel{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;width:100vw;background:var(--navy);transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .24s ease,transform .28s ease,visibility .28s;flex-direction:column;align-items:stretch;gap:0;padding:72px 0 32px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:0;z-index:1}
  .nav2.open .nav-panel{transform:none;opacity:1;visibility:visible}
  /* Al abrir, cabecera y menú forman un bloque BLANCO integrado (texto navy) y la
     cabecera se ANCLA arriba (position:fixed): así el menú nunca se separa de ella
     y solo se hace scroll dentro del propio menú (el body queda bloqueado). */
  .nav2.open{background:#fff;border-bottom-color:transparent;box-shadow:none;position:fixed;top:0;left:0;right:0;border-radius:0}
  /* Barra de cabecera OPACA por encima del menú (z:2 > panel z:1, < logo/botón z:4):
     el contenido del menú se oculta DETRÁS de ella al hacer scroll y el header
     queda siempre arriba. Cubre exactamente el alto de la cabecera (66px). */
  .nav2.open::after{content:"";position:fixed;top:0;left:0;right:0;height:66px;background:#fff;z-index:2;pointer-events:none}
  .nav2.scrolled .nav-panel,.nav2.open .nav-panel{background:#fff}
  .nav2 .nav-backdrop{display:none}

  /* Lista vertical con líneas separatorias RECTAS y CUADRADAS (de borde a borde) */
  .nav2 .nav-links{position:static;left:auto;top:auto;transform:none;margin:0;flex-direction:column;align-items:stretch;gap:0;width:100%;padding:0;background:none;border:none;border-radius:0;box-shadow:none}
  .nav2 .nav-links>a,.nav2 .nav-item{border-top:1px solid rgba(255,255,255,.13);margin:0}
  .nav2 .nav-links>a:first-child,.nav2 .nav-item:first-child{border-top:none}
  .nav2 .nav-links>a{padding:13px 22px;text-align:left;justify-content:flex-start;font-size:15px;color:#fff;font-weight:600;border-radius:0;-webkit-tap-highlight-color:transparent}
  .nav2 .nav-links>a:active{background:rgba(4,21,37,.05)}
  .nav2 .nav-links>a::after{display:none}
  .nav2 .nav-item{position:static;width:auto;padding:10px 0 4px}
  /* El botón del desplegable pasa a ser un TÍTULO de sección */
  .nav2 .nav-item>button{width:100%;justify-content:flex-start;gap:6px;padding:12px 22px 6px;border-radius:0;font-size:11.5px;color:rgba(255,255,255,.55);font-weight:700;text-transform:uppercase;letter-spacing:1.4px;cursor:default;pointer-events:none;background:none}
  .nav2 .nav-item>button::after{display:none}
  .nav2 .nav-item>button .cv{display:none}
  /* Submenús siempre desplegados (sin acordeón) */
  .nav2 .nav-item .menu,.nav2 .nav-item .menu.one{position:static;display:grid;opacity:1;visibility:visible;transform:none;grid-template-columns:1fr;width:100%;box-shadow:none;border:none;border-radius:0;padding:0;background:none;top:auto;left:auto;max-height:none;overflow:visible}
  .nav2 .nav-item .menu a{padding:11px 22px;font-size:15px;border-radius:0;color:rgba(255,255,255,.9);font-weight:500;-webkit-tap-highlight-color:transparent}
  .nav2 .nav-item .menu a:hover{color:#fff}
  .nav2 .nav-item .menu a:active{background:rgba(4,21,37,.05)}
  .nav2 .nav-item .menu .md{display:none}

  /* Estado claro (scrolled o menú abierto): texto navy y líneas grises */
  .nav2.scrolled .nav-links>a,.nav2.scrolled .nav-item .menu a,
  .nav2.open .nav-links>a,.nav2.open .nav-item .menu a{color:var(--navy)}
  .nav2.scrolled .nav-links>a,.nav2.scrolled .nav-item,
  .nav2.open .nav-links>a,.nav2.open .nav-item{border-top-color:var(--line)}
  .nav2.scrolled .nav-item>button,.nav2.open .nav-item>button{color:var(--grey)}

  /* CTAs */
  .nav2 .nav-cta{flex:0 0 auto;margin:18px 22px 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);flex-direction:column;justify-content:flex-start;gap:11px;width:auto}
  .nav2.scrolled .nav-cta,.nav2.open .nav-cta{border-top-color:var(--line)}
  .nav2 .nav-cta .btn,.nav2 .nav-cta .btn-power{width:100%;justify-content:center;font-size:15px;padding:13px}
  .nav2 .nav-cta .btn-power{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff}
  .nav2.scrolled .nav-cta .btn-power,.nav2.open .nav-cta .btn-power{background:#f2efe9;border:1px solid var(--line);color:var(--navy)}
}
body.nav-locked{overflow:hidden}

/* ===== Hamburguesa estilo make: botón de marca (bloques) → X al abrir ===== */
.nav2 .nav-toggle{position:relative;align-items:center;justify-content:center;background:var(--grad);border:none;border-radius:11px;width:40px;height:40px;color:#fff;box-shadow:0 8px 20px -8px rgba(10,132,240,.65);transition:transform .18s ease,box-shadow .2s ease}
.nav2 .nav-toggle:hover{box-shadow:0 10px 26px -8px rgba(10,132,240,.8)}
.nav2 .nav-toggle:active{transform:scale(.93)}
.nav2 .nav-toggle .fxi{display:none}
.fx-tiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3.5px;width:18px;height:18px;transition:opacity .2s ease}
.fx-tiles i{display:block;background:#fff;border-radius:3px}
.fx-tiles i:nth-child(1){border-top-left-radius:6px}
.fx-tiles i:nth-child(2){border-top-right-radius:6px}
.fx-tiles i:nth-child(3){border-bottom-left-radius:6px}
.fx-tiles i:nth-child(4){border-bottom-right-radius:6px}
.fx-x{position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);display:none}
.fx-x b{position:absolute;top:50%;left:50%;width:20px;height:2.5px;border-radius:2px;background:#fff;transform-origin:center}
.fx-x b:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.fx-x b:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.nav2.open .nav-toggle{box-shadow:0 4px 14px -6px rgba(10,132,240,.7)}
.nav2.open .fx-tiles{display:none}
.nav2.open .fx-x{display:block}

/* ===== Hero: constelación de módulos conectados (estilo make, marca Foxta) ===== */
.hero-rev.d6{animation-delay:.78s}
.fx-net{max-width:560px;margin:34px auto 0}
.fx-net svg{width:100%;height:auto;display:block;overflow:visible}
.fx-net .ln{stroke:url(#fxln);stroke-width:2;fill:none;opacity:.42}
.fx-net .ring{stroke:url(#fxln);stroke-width:1.5;fill:none;opacity:.32}
.fx-net .pulse{fill:var(--cyan)}
.fx-net .nd{transform-box:fill-box;transform-origin:center;animation:fxFloat 6s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(9,54,92,.16))}
.fx-net .nd.n2{animation-delay:-1s}.fx-net .nd.n3{animation-delay:-2s}.fx-net .nd.n4{animation-delay:-3s}.fx-net .nd.n5{animation-delay:-4s}.fx-net .nd.n6{animation-delay:-5s}
.fx-net .chip{fill:#fff;stroke:rgba(7,32,54,.09)}
.fx-net .nlabel{fill:var(--ink);font-size:16px;font-weight:700;text-anchor:middle;font-family:inherit}
.fx-net .hub{transform-box:fill-box;transform-origin:center;animation:fxHub 3.6s ease-in-out infinite}
.fx-net .hub text{fill:#fff;font-size:20px;font-weight:800;text-anchor:middle;font-family:inherit;letter-spacing:-.3px}
.fx-net .fx-cap{font-family:var(--mono);font-size:12.5px;color:var(--grey);text-align:center;margin-top:14px}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fxHub{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.fx-net .nd,.fx-net .hub{animation:none}.fx-net .pulse{display:none}}

/* ===== Hero animado: ecosistema que se integra en Foxta (ciclo) ===== */
.fx-hero{max-width:720px;margin:0 auto 4px}
.fx-hero svg{width:100%;height:auto;display:block;overflow:visible}
.fx-hero .fxh-node{filter:drop-shadow(0 10px 20px rgba(9,54,92,.18))}
.fx-hero .fxh-label{fill:var(--ink);font-weight:700;font-family:inherit}
.fx-hero .fxh-hubtx{fill:#fff;font-family:inherit;letter-spacing:-.3px}
.fx-hero .fxh-ln{stroke:url(#gLn);stroke-width:2;fill:none;stroke-linecap:round;opacity:0}
.fx-hero .fxh-pu{fill:var(--cyan);opacity:0;filter:drop-shadow(0 0 4px rgba(19,198,230,.9))}
.fx-hero .fxh-burst{fill:none;stroke:url(#gLn);stroke-width:2;opacity:0}
@media(max-width:560px){.fx-hero{margin-bottom:2px}}

/* Hero animado v2: bisel + glow + construcción por capas (anti-parpadeo) */
.fx-hero .fxh-node{opacity:0}
.fx-hero .glow{filter:blur(9px);opacity:0}
.fx-hero .col,.fx-hero .bev,.fx-hero .rim,.fx-hero .icW{opacity:0}
.fx-hero .fxh-hubtx{fill:#fff;letter-spacing:-.3px;font-weight:800}

/* Hero animado v3 (horizontal, círculo que se dibuja) · overrides */
.fx-hero{max-width:780px;margin:14px auto 18px}
.fx-hero .fxh-node{opacity:1;filter:drop-shadow(0 9px 18px rgba(9,54,92,.18))}
.fx-hero .draw{opacity:0;stroke-linecap:round}
@media(max-width:560px){.fx-hero{margin:10px auto 14px}}

/* Hero v4: líneas cian tipo láser + pulso blanco-caliente */
.fx-hero .fxh-ln{stroke:url(#gLn);stroke-width:2.4;fill:none;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 4px rgba(35,205,240,.95)) drop-shadow(0 0 10px rgba(35,205,240,.5))}
.fx-hero .fxh-pu{fill:#eafcff;opacity:0;filter:drop-shadow(0 0 5px rgba(40,220,255,1)) drop-shadow(0 0 11px rgba(40,220,255,.7))}

/* ===== Fase 2: flujo dato→decisión, iconos «de un vistazo», mockup informe, precios ===== */
.flow3{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 36px}
.flow3 .flow-step{flex:1 1 220px;max-width:300px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.flow3 .flow-ic{width:44px;height:44px;border-radius:13px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.flow3 .flow-ic svg{width:22px;height:22px;color:#fff}
.flow3 .flow-step b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}
.flow3 .flow-step>span{color:#9fb6c9;font-size:13.5px;line-height:1.55}
.flow3 .flow-arrow{align-self:center;color:#62b8ff;font-size:24px;font-weight:800;flex:none}
@media(max-width:760px){.flow3{flex-direction:column;align-items:stretch}.flow3 .flow-step{max-width:none}.flow3 .flow-arrow{transform:rotate(90deg)}}

.why-c .why-ic{display:inline-flex;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#eaf4fe,#dcecfb);color:var(--blued);align-items:center;justify-content:center;margin-bottom:12px}
.why-c .why-ic svg{width:21px;height:21px}

.report-mock{max-width:520px;margin:34px auto 8px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(4,21,37,.55)}
.report-mock .rm-head{background:linear-gradient(135deg,#0c2f4e,#062036);padding:20px 22px;color:#fff}
.rm-eyebrow{font-size:10.5px;letter-spacing:1.2px;color:#7fb9e6}
.rm-hi{font-size:19px;font-weight:800;margin-top:5px}
.rm-sub{font-size:13px;color:#c9dcec;margin-top:5px;line-height:1.5}
.rm-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
.rm-kpi{background:#0c2f4e;border-radius:12px;padding:11px 13px;color:#fff}
.rm-kpi span{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:#9db4cc}
.rm-kpi b{display:block;font-size:20px;font-weight:800;margin-top:5px}
.rm-kpi i{display:block;font-size:10.5px;font-style:normal;margin-top:2px}
.rm-kpi b.up,.rm-kpi i.up{color:#37d39a}.rm-kpi b.warn{color:#f6a96b}.rm-kpi b.bad{color:#f27a6b}
.rm-fox{display:flex;gap:9px;align-items:flex-start;margin:0 14px 12px;background:#0c2f4e;border-radius:12px;padding:12px 13px}
.rm-fox .rm-foxic{width:26px;height:26px;border-radius:7px;flex:none}
.rm-fox span{color:#dfeaf3;font-size:12.5px;line-height:1.5}
.rm-checks{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 16px}
.rm-checks span{font-size:11.5px;font-weight:700;border-radius:20px;padding:5px 10px}
.rm-checks .ok{background:#eafaf2;color:#0f6e56}.rm-checks .warn{background:#fdf4e3;color:#a06a12}

.price-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.pm-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px;box-shadow:0 30px 60px -50px rgba(4,21,37,.4)}
.pm-card.featured{border:2px solid #0a6bd6;box-shadow:0 30px 70px -40px rgba(10,107,214,.5)}
.pm-badge{position:absolute;top:-11px;left:20px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;padding:4px 11px;border-radius:20px}
.pm-name{font-size:15px;font-weight:800;color:var(--ink)}
.pm-price{font-size:26px;font-weight:800;color:var(--navy);margin:4px 0 2px}
.pm-price small{font-size:14px;font-weight:700;color:var(--grey)}
.pm-desc{font-size:12.5px;color:var(--grey);min-height:34px}
.pm-list{list-style:none;padding:0;margin:12px 0 16px;font-size:13px;line-height:1.5;color:#33414c}
.pm-list li{position:relative;padding-left:20px;margin:7px 0}
.pm-list li::before{content:"\2713";position:absolute;left:0;color:#0a6bd6;font-weight:800}
.pm-btn{width:100%;margin-top:auto}
.lnk-more{color:var(--blued);font-weight:800;font-size:14.5px;text-decoration:none}
.lnk-more:hover{text-decoration:underline}
@media(max-width:900px){.price-mini{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.price-mini{grid-template-columns:1fr}}

/* ===== Capturas «míralo por dentro» ===== */
#capturas .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;align-items:start}
.shot{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 44px 84px -50px rgba(4,21,37,.5)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#f3f1ea;border-bottom:1px solid var(--line)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#d7d2c7}
.shot-bar span{margin-left:6px;font-size:11px;color:var(--grey);font-weight:800}
.shot-body{padding:14px}
.shot-body .sc-title{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px}
.sc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.sc-tab{font-size:10.5px;font-weight:700;border-radius:9px;padding:6px 8px;background:#eef2f7;color:var(--grey);white-space:nowrap}
.sc-tab.on{background:linear-gradient(135deg,#062036,#0a3a66);color:#fff}
.sc-row{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:7px}
.sc-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:none}
.sc-row b{font-size:12.5px;color:var(--ink);display:block;line-height:1.25}
.sc-row span{font-size:11px;color:var(--grey);line-height:1.35}
.sc-search{background:#f3f1ea;border-radius:9px;padding:8px 10px;font-size:11.5px;color:#9aa7b3;margin-bottom:8px}
.sc-prod{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1efe9}
.sc-thumb{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#eaf4fe,#dcecfb);flex:none}
.sc-prod .nm{flex:1;font-size:12.5px;color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-prod .pr{font-size:12.5px;font-weight:800;color:var(--navy)}
.sc-badge{font-size:10px;font-weight:800;border-radius:20px;padding:2px 7px;margin-left:6px;flex:none}
.sc-badge.ok{background:#eafaf2;color:#0f6e56}.sc-badge.low{background:#fdf4e3;color:#a06a12}
.sc-line{display:flex;justify-content:space-between;font-size:12.5px;color:#33414c;padding:7px 0;border-bottom:1px solid #f1efe9}
.sc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px}
.sc-total b{font-size:24px;font-weight:800}
.sc-total .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sc-cobrar{margin-top:12px;text-align:center;background:var(--grad);color:#fff;border-radius:10px;padding:11px;font-size:13px;font-weight:800}
@media(max-width:900px){#capturas .shots{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}

/* Ancla del héroe: qué es Foxta, en una línea (héroes oscuros → texto claro) */
.hero-anchor{font-size:19px;font-weight:700;color:#eaf3fb;max-width:760px;margin:0 auto 6px;line-height:1.4}
.erp-hero .hero-anchor{margin-left:auto;margin-right:auto}
@media(max-width:760px){.hero-anchor{font-size:16.5px}}

/* ¿Qué necesito para empezar? */
.need{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.need>h3{margin:0 0 16px;font-size:19px;color:var(--ink)}
.need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.need-c{display:flex;flex-direction:column;gap:5px}
.need-c b{font-size:15px;color:var(--ink)}
.need-c span{font-size:14px;color:var(--grey);line-height:1.5}
@media(max-width:760px){.need-grid{grid-template-columns:1fr}.need{padding:22px 20px}}

/* Índice de funcionalidades (TOC) */
.toc-fn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;max-width:1000px;margin:0 auto}
.toc-fn .toc-lb{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--grey);margin-right:4px}
.toc-fn a{font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none;background:#f2efe9;border:1px solid var(--line);border-radius:20px;padding:6px 12px;transition:background .15s,color .15s}
.toc-fn a:hover{background:var(--navy);color:#fff}
.bento h3[id]{scroll-margin-top:90px}

/* ===== Héroe a dos columnas con vídeo + métricas ===== */
.erp-hero.has-media{padding:104px 0 92px}
.hero-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;width:100%}
.hero-copy{text-align:left}
.erp-hero.has-media .hero-copy .hero-anchor{margin-left:0;margin-right:0}
.erp-hero.has-media .hero-copy .sub{margin-left:0;margin-right:0}
.erp-hero.has-media .cta-row{justify-content:flex-start}
.hero-media{position:relative;aspect-ratio:1/1;background:none;border:none;box-shadow:none;overflow:visible}
/* El vídeo (fondo #061431) va sobre una capa de ese mismo color y se difumina
   radialmente hacia el héroe: así no se ve ningún borde ni caja. */
.hero-vidwrap{position:absolute;inset:0;background:#061431;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,rgba(0,0,0,0) 76%);mask-image:radial-gradient(circle at 50% 50%,#000 40%,rgba(0,0,0,0) 76%)}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Maqueta 3D del panel en el hero (captura del producto inclinada + glow azul). */
.hero-media{perspective:1500px;position:relative}
/* Halo grande DETRÁS del panel (dentro de hero-media, sin tapar el texto). */
.hero-media::before{display:none}
.hero-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .25s ease;z-index:1}
.hp{position:relative;width:114%;aspect-ratio:16/10.2;display:flex;background:linear-gradient(155deg,#0a1f38 0%,#061426 100%);border-radius:16px;overflow:hidden;transform:rotateY(-18deg) rotateX(8deg) rotate(.5deg);transform-style:preserve-3d;box-shadow:0 70px 150px -40px rgba(21,140,255,.6),0 12px 44px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(120,180,255,.18);animation:hpFloat 7s ease-in-out infinite;will-change:transform}
.hp::before{content:"";position:absolute;inset:-18px;border-radius:34px;background:radial-gradient(58% 58% at 74% 82%,rgba(10,132,240,.85),transparent 70%),linear-gradient(135deg,rgba(21,200,232,.7),rgba(10,132,240,.55) 60%,rgba(10,90,200,.42));filter:blur(50px);z-index:-1;opacity:.85;animation:pulseGlow 5s ease-in-out infinite}
@keyframes hpFloat{0%,100%{transform:rotateY(-18deg) rotateX(8deg) translateY(0)}50%{transform:rotateY(-15.5deg) rotateX(6.5deg) translateY(-12px)}}
.hp-side{width:31%;max-width:120px;background:#041525;color:#fff;padding:9px 8px;display:flex;flex-direction:column;gap:9px}
.hp-logo{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:2px 3px}
.hp-drop{width:9px;height:11px;background:#29b3ff;border-radius:3px 3px 6px 6px;flex:none}
.hp-nav{display:flex;flex-direction:column;gap:2px}
.hp-i{display:flex;align-items:center;gap:6px;font-size:8.5px;font-weight:600;color:#9fb3c4;padding:4px 6px;border-radius:5px;white-space:nowrap}
.hp-i svg{width:11px;height:11px;flex:none;color:#9fb3c4}
.hp-i.on{background:linear-gradient(135deg,#0a6bd6,#15c8e8);color:#fff}
.hp-i.on svg{color:#fff}
.hp-main{flex:1;min-width:0;background:#07182b;display:flex;flex-direction:column}
.hp-top{height:26px;flex:none;background:#0c2f4e;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.hp-tt{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#fff}
.hp-tt svg{width:11px;height:11px;color:#8fc6ff}
.hp-av{width:16px;height:16px;border-radius:5px;background:#29b3ff;color:#041525;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hp-content{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.hp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hp-card{background:rgba(255,255,255,.045);border:1px solid rgba(140,190,255,.16);border-radius:8px;padding:7px 8px}
.hp-card span{display:block;font-size:7.5px;color:#93afc8;font-weight:600}
.hp-card b{display:block;font-size:21px;font-weight:800;color:#f2f7fc;margin-top:2px;letter-spacing:-.4px;line-height:1.05}
.hp-num.hp-pop{animation:hpPop .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes hpPop{0%{transform:scale(.72);opacity:.4}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.hp-card b.pos{color:#3fd99a}
.hp-charts{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1;min-height:0}
.hp-chart{background:rgba(255,255,255,.045);border:1px solid rgba(140,190,255,.16);border-radius:8px;padding:8px 8px 4px;min-height:0;display:flex;flex-direction:column}
.hp-chart-t{font-size:7.5px;color:#93afc8;font-weight:600;margin-bottom:3px;white-space:nowrap}
.hp-chart svg{width:100%;flex:1;min-height:0;display:block}
.hp-b{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:hpBarGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
.hp-b:nth-child(2){animation-delay:.05s}.hp-b:nth-child(3){animation-delay:.15s}.hp-b:nth-child(4){animation-delay:.25s}.hp-b:nth-child(5){animation-delay:.35s}
@keyframes hpBarGrow{to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.hp-b{animation:none;transform:none}}
/* Chips de garantías bajo los CTA */
.hero-chips{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:16px}
.hero-chips span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#c1d6e8;font-weight:600}
.hero-chips svg{width:16px;height:16px;color:#15c8e8;flex:none}
/* Cinta de luz azul que fluye detrás del panel (sustituye el aura cónica vieja). */
.hero-aura{position:absolute;right:-12%;top:-8%;width:90%;height:124%;z-index:0;pointer-events:none;opacity:.55;filter:blur(5px);
  -webkit-mask-image:radial-gradient(66% 60% at 58% 48%,#000 44%,transparent 86%);
  mask-image:radial-gradient(66% 60% at 58% 48%,#000 44%,transparent 86%)}
.hero-aura svg{width:100%;height:100%;display:block}
.erp-hero.has-media::before{opacity:.45}
.erp-hero.has-media .aurora{opacity:.4}
@media(max-width:900px){.hero-aura{right:-22%;top:auto;bottom:-4%;width:130%;height:56%;opacity:.75}}
@media(max-width:900px){.hp{width:100%;animation:none;transform:rotateY(-9deg) rotateX(5deg)}.hero-chips{gap:10px 16px}.hero-chips span{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.hp{animation:none;transform:rotateY(-12deg) rotateX(6deg)}.hp::before{animation:none}}
/* El héroe se oscurece hacia la zona del vídeo para casar con su fondo */
.erp-hero.has-media{background:radial-gradient(115% 120% at 30% 4%,#123a5e 0%,#0c2c49 38%,#0a2036 70%,#08182b 100%)}

/* Mensajes de venta flotantes sobre el panel (sin caja, al aire, loop infinito) */
.hero-fx{position:absolute;inset:-8% -6% -6% -10%;z-index:6;pointer-events:none;overflow:visible}
.hero-fx b{position:absolute;font-size:8.5px;font-weight:700;white-space:nowrap;opacity:0;letter-spacing:.2px;
  text-shadow:0 2px 12px rgba(2,10,24,.75),0 0 2px rgba(2,10,24,.6);font-variant-numeric:tabular-nums;
  animation:fxRise 3.6s ease-in-out infinite;will-change:transform,opacity}
.hero-fx .up{color:#57e6a2}
.hero-fx .down{color:#ff7a7a}
.hero-fx .neo{color:#8ad4ff}
.hero-fx i{font-style:normal;margin-right:4px;opacity:.9}
@keyframes fxRise{
  0%{opacity:0;transform:translateY(12px) scale(.9)}
  20%{opacity:1;transform:translateY(1px) scale(1)}
  55%{opacity:1;transform:translateY(-9px) scale(1)}
  100%{opacity:0;transform:translateY(-24px) scale(1)}
}
.hero-fx b:nth-child(1){top:8%;left:2%;animation-delay:0s;animation-duration:3.4s}
.hero-fx b:nth-child(2){top:20%;left:60%;animation-delay:1.4s;animation-duration:3.8s}
.hero-fx b:nth-child(3){top:36%;left:10%;animation-delay:2.9s;animation-duration:3.5s}
.hero-fx b:nth-child(4){top:52%;left:70%;animation-delay:4.3s;animation-duration:3.7s}
.hero-fx b:nth-child(5){top:66%;left:4%;animation-delay:5.6s;animation-duration:3.4s}
.hero-fx b:nth-child(6){top:14%;left:34%;animation-delay:6.9s;animation-duration:3.6s}
.hero-fx b:nth-child(7){top:46%;left:40%;animation-delay:3.4s;animation-duration:3.6s}
.hero-fx b:nth-child(8){top:78%;left:52%;animation-delay:2.1s;animation-duration:3.8s}
.hero-fx b:nth-child(9){top:30%;left:82%;animation-delay:6.2s;animation-duration:3.4s}
.hero-fx b:nth-child(10){top:60%;left:24%;animation-delay:7.6s;animation-duration:3.7s}
.hero-fx b:nth-child(11){top:88%;left:14%;animation-delay:.7s;animation-duration:3.5s}
.hero-fx b:nth-child(12){top:4%;left:78%;animation-delay:5.0s;animation-duration:3.6s}
@media(max-width:900px){.hero-fx{display:none}}
@media(prefers-reduced-motion:reduce){.hero-fx{display:none}}

/* Vídeo del héroe (vuelve a la cabecera, integrado con máscara radial, sin caja) */
.hero-media--vid{transform:translateY(-11%)}
.hero-media--vid .hero-vidwrap{-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 42%,rgba(0,0,0,0) 74%);mask-image:radial-gradient(circle at 50% 46%,#000 42%,rgba(0,0,0,0) 74%);background:#0a2036}
.hero-media--vid .hero-vid{object-position:center 38%}

/* El hero con vídeo apila en columna: copy+vídeo arriba, logos abajo a todo el ancho */
.erp-hero.has-media{flex-direction:column;justify-content:center;align-items:stretch}
/* Tira de logos de canales en el hero: marquee infinito, al aire, monocromo (estilo Make) */
.hero-logos{position:relative;z-index:2;margin-top:52px;width:100%}
.hl-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hl-track{display:flex;align-items:center;gap:156px;width:max-content;color:#a9c1d8;will-change:transform}
.hl-track .hl{height:40px;width:auto;opacity:.72;flex:none}
.hl-track .hl-woo{height:80px}
.hl-txt{font-size:22px;font-weight:700;letter-spacing:.2px;color:#a9c1d8;opacity:.72;white-space:nowrap;flex:none}
.hl-ico-wrap{display:inline-flex;align-items:center;opacity:.72;flex:none}
.hl-ico{height:40px;width:40px;display:block}
@media(max-width:700px){.hl-track{gap:96px}.hl-track .hl,.hl-ico{height:30px}.hl-track .hl-woo{height:60px}.hl-ico{width:30px}.hl-txt{font-size:18px}}

/* Panel de ventas (movido a "Una sola verdad") */
.sv-media{position:relative;aspect-ratio:16/12;perspective:1500px;overflow:visible}
.sv-media .hero-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
.sv-media .hp{width:104%;animation:hpFloat 7s ease-in-out infinite}
.sv-media .hero-fx{inset:0}
@media(max-width:900px){.sv-media{aspect-ratio:16/13}.sv-media .hp{width:100%;transform:rotateY(-9deg) rotateX(5deg)}}
/* En la sección clara: TPV blanco (como es de verdad), sin caja, con glow celeste */
.sv-media .hp{background:#fff;box-shadow:0 40px 90px -42px rgba(10,60,120,.42)}
.sv-media .hp-main{background:#fff}
.sv-media .hp-top{background:#f4f8fd;border-bottom:1px solid #e6eef7}
.sv-media .hp-tt{color:#0a2540}
.sv-media .hp-tt svg{color:#0a6bd6}
.sv-media .hp-card{background:#f5f9fd;border-color:#e4eef8}
.sv-media .hp-card span{color:#647d94}
.sv-media .hp-card b{color:#0a2540}
.sv-media .hp-card b.pos{color:#0f9d58}
.sv-media .hp-chart{background:#f5f9fd;border-color:#e4eef8}
.sv-media .hp-chart-t{color:#647d94}
/* Barra lateral clara para que todo el panel sea del mismo color (blanco) */
.sv-media .hp-side{background:#fff;color:#0a2540;border-right:1px solid #e9eff6}
.sv-media .hp-logo b{color:#0a2540}
.sv-media .hp-i{color:#5f7d95}
.sv-media .hp-i svg{color:#5f7d95}
.sv-media .hp-i.on,.sv-media .hp-i.on svg{color:#fff}
.sv-media .hero-fx b{text-shadow:0 2px 10px rgba(255,255,255,.85),0 0 2px rgba(255,255,255,.9)}
.sv-media .hero-fx .up{color:#12a05e}
.sv-media .hero-fx .down{color:#d83a3a}
.sv-media .hero-fx .neo{color:#0a6bd6}
/* Sin caja blanca de fondo en esta sección (el panel va suelto) */
#una-verdad .split .sv{background:none;border:0;box-shadow:none;padding:0}
/* Invertir: imagen a la izquierda, texto a la derecha */
#una-verdad .split .sv{order:0}
#una-verdad .split>div:not(.sv){order:1}
@media(max-width:900px){#una-verdad .split .sv{order:1}#una-verdad .split>div:not(.sv){order:0}}
/* Tarjeta de métrica flotante */
.hero-metric{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.96);border-radius:16px;padding:13px 16px;box-shadow:0 20px 44px -18px rgba(0,0,0,.5);min-width:190px;backdrop-filter:blur(4px)}
.hm-top{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--grey)}
.hm-dot{width:8px;height:8px;border-radius:50%;background:#1f9d57;box-shadow:0 0 0 0 rgba(31,157,87,.5);animation:hmPulse 1.8s infinite}
.hm-num{font-size:26px;font-weight:800;color:#1f9d57;line-height:1.1;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.hm-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin:6px 0 4px}
.hm-bars i{width:11px;background:linear-gradient(180deg,#15c8e8,#0a84f0);border-radius:4px 4px 0 0;height:20%;transform-origin:bottom;animation:hmGrow 5s ease-in-out infinite}
.hm-bars i:nth-child(1){animation-delay:.0s}.hm-bars i:nth-child(2){animation-delay:.15s}.hm-bars i:nth-child(3){animation-delay:.3s}.hm-bars i:nth-child(4){animation-delay:.45s}.hm-bars i:nth-child(5){animation-delay:.6s}.hm-bars i:nth-child(6){animation-delay:.75s}
.hm-foot{font-size:12px;font-weight:700;color:#1f9d57}
@keyframes hmPulse{0%{box-shadow:0 0 0 0 rgba(31,157,87,.5)}70%{box-shadow:0 0 0 8px rgba(31,157,87,0)}100%{box-shadow:0 0 0 0 rgba(31,157,87,0)}}
@keyframes hmGrow{0%{height:18%}45%{height:var(--h,80%)}70%{height:var(--h,80%)}100%{height:18%}}
.hm-bars i:nth-child(1){--h:55%}.hm-bars i:nth-child(2){--h:72%}.hm-bars i:nth-child(3){--h:48%}.hm-bars i:nth-child(4){--h:90%}.hm-bars i:nth-child(5){--h:66%}.hm-bars i:nth-child(6){--h:100%}
@media(max-width:900px){
  .erp-hero.has-media{padding:44px 0 72px}
  .hero-2col{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero-copy{text-align:center}
  .erp-hero.has-media .hero-copy .hero-anchor,.erp-hero.has-media .hero-copy .sub{margin-left:auto;margin-right:auto}
  .erp-hero.has-media .cta-row{justify-content:center}
  .hero-media{max-width:460px;margin:0 auto;width:100%}
}
@media(prefers-reduced-motion:reduce){.hm-dot,.hm-bars i{animation:none}}

/* ===== Iconos monocolor al inicio de cada enlace del menú (heredan el color del
   texto vía currentColor: blancos en cabecera navy, navy en móvil y desplegables) ===== */
.nav-links a{align-items:center}
.nav2 .nav-item .menu a{display:flex;align-items:center}
.nav-links>a{gap:0}
/* En la BARRA de escritorio (enlaces de primer nivel) NO queremos iconos: solo en los
   desplegables. En móvil sí se muestran, porque allí son ítems de lista. */
.nav-links>a::before{display:none}
@media(max-width:900px){.nav2 .nav-links>a::before{display:block}}
.nav-links a::before{content:"";flex:none;width:17px;height:17px;margin-right:9px;background-color:currentColor;-webkit-mask-image:var(--i,url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E"));mask-image:var(--i,url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.nav-links a[href$="funcionalidades.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%273.5%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2713.5%27%20y%3D%273.5%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273.5%27%20y%3D%2713.5%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2713.5%27%20y%3D%2713.5%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="tpv.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%275%27%20width%3D%2719%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M2.5%209.5h19%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="fox.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5l1.7%204.9%204.8%201.6-4.8%201.6L12%2016.5l-1.7-4.9L5.5%2010l4.8-1.6z%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="multicanal.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2712%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%276%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M8.1%2010.9l7.8-3.8M8.1%2013.1l7.8%203.8%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="verifactu.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2l7%202.8v5c0%204.4-3%207.4-7%209-4-1.6-7-4.6-7-9V6z%27%2F%3E%3Cpath%20d%3D%27M9%2011.7l2%202%204-4%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="foxta-a-fondo.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%276%27%2F%3E%3Cpath%20d%3D%27M20%2020l-3.8-3.8%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="precios.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17.5%206.6a6.5%206.5%200%201%200%200%2010.8%27%2F%3E%3Cpath%20d%3D%27M4.5%2010.5h9M4.5%2013.5h8%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="demo.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M10%208.4l6%203.6-6%203.6z%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="afiliados.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M3.6%2019a5.4%205.4%200%200%201%2010.8%200%27%2F%3E%3Cpath%20d%3D%27M15.5%205.1a3.2%203.2%200%200%201%200%205.8%27%2F%3E%3Cpath%20d%3D%27M17.4%2019a5.4%205.4%200%200%200-2.2-4.3%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="directorio.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.5%206h12M8.5%2012h12M8.5%2018h12%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2712%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2718%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E")}

/* ===== HOME · Puntos clave del TPV (absorbidos de la antigua sección TPV) ===== */
.tpv-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.tk{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
@media(hover:hover){.tk:hover{transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(4,21,37,.5);border-color:#cfe0ee}}
.tk-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:0 10px 22px -10px rgba(10,132,240,.7);margin-bottom:13px}
.tk-ic svg{width:22px;height:22px;display:block;color:#fff;stroke:#fff}
.tk b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
/* :not(.tk-ic) es OBLIGATORIO. El icono también es un <span> dentro de .tk, y
   ".tk span" tiene más especificidad que ".tk-ic" (clase+elemento vs clase sola):
   sin esto, su display:block anula el display:flex del icono y se va arriba a la
   izquierda en vez de centrarse. Mismo fallo que teníamos en .plan li. */
.tk span:not(.tk-ic){display:block;font-size:14px;color:var(--grey);line-height:1.55}
@media(max-width:900px){.tpv-keys{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tpv-keys{grid-template-columns:1fr}}

/* ===== HOME · Informe diario dentro de la sección Fox (fondo oscuro) ===== */
.fox-report{margin-top:54px;align-items:center}
.fox-report .report-mock{box-shadow:0 40px 80px -40px rgba(0,0,0,.7);border-color:rgba(255,255,255,.14)}

/* ===== HOME · Cierre unificado: la guía vive dentro del CTA final ===== */
.cta-lead{margin:30px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);max-width:660px}
.cta-lead .lc-badge{display:inline-block;margin-bottom:10px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.cta-lead-t{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.6;margin:0 0 14px}
.cta-lead .lc-row{display:flex;gap:9px}
.cta-lead .lc-row input{flex:1;min-width:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:12px;padding:13px 15px;font:inherit;font-size:15px}
.cta-lead .lc-row input::placeholder{color:rgba(255,255,255,.55)}
.cta-lead .lc-row input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.16)}
.cta-lead .lc-row .btn{flex:none;white-space:nowrap}
.cta-lead .lc-note{font-size:12px;color:rgba(255,255,255,.6);margin:10px 0 0;line-height:1.5}
.cta-lead .lc-note a{color:rgba(255,255,255,.88)}
.cta-lead .lc-msg{color:#fff;margin-top:10px;font-weight:600}
@media(max-width:560px){.cta-lead .lc-row{flex-direction:column}}

/* ===== HOME · Animación de los mockups ===== */
.sync-card .sy{opacity:0}
.sync-card.in-view .sy{animation:syIn .5s ease forwards;animation-delay:var(--d)}
@keyframes syIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.syok{color:#1f9d57;font-weight:700}
.sc-cobrar.pulse{animation:cobPulse 2.6s ease-in-out infinite}
@keyframes cobPulse{0%,100%{box-shadow:0 0 0 0 rgba(10,132,240,.45)}50%{box-shadow:0 0 0 8px rgba(10,132,240,0)}}
.sc-badge.low{animation:lowBlink 2s ease-in-out infinite}
@keyframes lowBlink{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.sync-card .sy{opacity:1;animation:none}.sc-cobrar.pulse,.sc-badge.low{animation:none}}

/* ===== MEGA-MENÚ «Producto» (estructura por categorías, estilo Odoo) ===== */
.nav2 .nav-item .menu.mega{grid-template-columns:repeat(3,minmax(196px,1fr));gap:22px 36px;width:728px;padding:22px 26px}
.nav2 .menu.mega .mcol{display:flex;flex-direction:column}
.nav2 .menu.mega .mtit{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey);padding:8px 12px 5px}
.nav2 .menu.mega a{padding:8px 12px;border-radius:9px}
.nav2 .menu.mega a:hover{background:#f4f1ec}

@media(max-width:900px){
  /* En móvil el mega se aplana: cada grupo es un título de sección y sus enlaces, la
     lista completa. El botón «Producto» sobra porque los grupos ya dan la estructura. */
  .nav2 .nav-item .menu.mega{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;width:100%;padding:4px 12px 8px;grid-template-columns:1fr 1fr}
  .nav2 .nav-item.mega-item>button{display:none}
  .nav2 .menu.mega .mcol{display:block;border-top:1px solid var(--line);padding:12px 0 6px;min-width:0}
  .nav2 .menu.mega .mcol:nth-child(1),.nav2 .menu.mega .mcol:nth-child(2){border-top:none}
  .nav2 .menu.mega .mtit{display:block;padding:10px 10px 6px;font-size:11px;letter-spacing:1.2px}
  .nav2 .menu.mega a{padding:9px 10px;border-radius:8px;font-size:14.5px;line-height:1.3}
  .nav2 .menu.mega a:hover{background:none}
  .nav2 .menu.mega a:active{background:rgba(4,21,37,.05)}
}

/* Iconos de los módulos nuevos del mega-menú */
.nav-links a[href$="citas.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275%27%20width%3D%2717%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3.5%2010h17M8%203v4M16%203v4%27%2F%3E%3Cpath%20d%3D%27M9%2015l2%202%204-4%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="inventario.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%207.5l8.5-4.3%208.5%204.3v9L12%2020.8%203.5%2016.5z%27%2F%3E%3Cpath%20d%3D%27M3.5%207.5L12%2011.8l8.5-4.3M12%2011.8v9%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="almacen.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%209.5L12%204l8.5%205.5v11h-17z%27%2F%3E%3Cpath%20d%3D%27M8%2020.5v-6h8v6M8%2014.5h8%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="compras.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%204h2.2l2.3%2011.2a1.6%201.6%200%200%200%201.6%201.3h8.3a1.6%201.6%200%200%200%201.6-1.3L21%208H6%27%2F%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%2720%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2720%27%20r%3D%271.3%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="crm.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M5%2020a7%207%200%200%201%2014%200%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="marketing.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%209.5h3l9-5v15l-9-5h-3z%27%2F%3E%3Cpath%20d%3D%27M6.5%2014.5v4a1.5%201.5%200%200%200%203%200v-3%27%2F%3E%3Cpath%20d%3D%27M19%209.5a3.5%203.5%200%200%201%200%205%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="automatizaciones.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M8.4%206H14a4%204%200%200%201%204%204v5.6%27%2F%3E%3Cpath%20d%3D%27M12.5%2012.5l-4%204M8.5%2012.5v4h4%27%20transform%3D%27translate%280%2C0%29%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="conexiones.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.5%2014.5l-2.6%202.6a3.7%203.7%200%200%201-5.2-5.2l3.4-3.4%27%2F%3E%3Cpath%20d%3D%27M14.5%209.5l2.6-2.6a3.7%203.7%200%200%201%205.2%205.2l-3.4%203.4%27%20transform%3D%27translate%28-1%2C0%29%27%2F%3E%3Cpath%20d%3D%27M9%2015l6-6%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="integraciones/index.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.5%203.5h5v2.6a1.6%201.6%200%200%200%203.2%200V3.5%27%2F%3E%3Cpath%20d%3D%27M14.5%203.5v3.6a1.6%201.6%200%200%201-1.6%201.6H9.5%27%2F%3E%3Crect%20x%3D%273.5%27%20y%3D%278.7%27%20width%3D%277.5%27%20height%3D%277.5%27%20rx%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M13%2012.5h4.5a3%203%200%200%201%203%203v5h-7.5v-4.6%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="hardware.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%279.5%27%20rx%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M6.5%207.5v3.5M9%207.5v3.5M11.5%207.5v3.5M14.5%207.5v3.5M17.5%207.5v3.5%27%2F%3E%3Cpath%20d%3D%27M8%2018.5h8M12%2014v4.5%27%2F%3E%3C%2Fsvg%3E")}

/* ===== BLOG · Índice de contenidos del artículo ===== */
.art-toc{background:#f7f5f0;border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:26px 0 30px}
.art-toc-t{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.art-toc ol{margin:0;padding-left:20px}
.art-toc li{margin:6px 0;font-size:15px}
.art-toc a{color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.art-toc a:hover{border-bottom-color:var(--navy)}
.article-body h2{scroll-margin-top:90px}

/* ── Bloques destacados dentro de un artículo ── */
.art-note{background:#eef6ff;border:1px solid #d6e8fb;border-left:3px solid var(--blue,#0a84f0);border-radius:0 12px 12px 0;padding:14px 18px;margin:24px 0}
.art-note p{margin:0;font-size:15px;line-height:1.65}
.art-quote{background:#f7f5f0;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:24px 0}
.art-quote p{margin:0;font-size:15px;line-height:1.9;color:var(--navy)}


/* ===== «Sigue leyendo»: enlaces al blog desde las páginas de producto ===== */
.slgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.slc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.slc:hover{transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(4,21,37,.5);border-color:#cfe0ee}
.slc-k{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#0a6bd6;background:#eef4f9;padding:3px 9px;border-radius:20px;margin-bottom:11px}
.slc b{font-size:16px;color:var(--ink);line-height:1.3;letter-spacing:-.01em;margin-bottom:6px}
.slc span:not(.slc-k){font-size:14px;color:var(--grey);line-height:1.55}
@media(max-width:900px){.slgrid{grid-template-columns:1fr}}

/* ===== Home · chips de sector ===== */
.seg-links{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px}
.segl{font-size:14px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;transition:transform .15s ease,border-color .2s,box-shadow .2s}
.segl:hover{transform:translateY(-2px);border-color:#0a84f0;box-shadow:0 12px 26px -18px rgba(10,132,240,.7)}
.segl.all{background:var(--grad);color:#fff;border-color:transparent}

/* ===== Tabla de comparativa ===== */
.cmp-wrap{overflow-x:auto;margin-top:8px}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.cmp thead th{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);background:#faf8f4}
.cmp thead th.me{color:#0a6bd6;background:#eef4f9}
.cmp tbody td:first-child{color:var(--grey);width:30%}
.cmp tbody td:nth-child(2){background:#f6fafd;color:var(--ink)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp b{color:var(--ink)}

/* ===== Aviso legal de las comparativas ===== */
.legal-note{max-width:860px;margin:0 auto;background:#faf8f4;border:1px solid var(--line);border-radius:14px;padding:22px 26px}
.legal-note p{font-size:13px;color:var(--grey);line-height:1.65;margin:0 0 11px}
.legal-note p:last-child{margin-bottom:0}
.legal-note strong{color:var(--ink);font-weight:600}
.legal-note a{color:#0a6bd6}

/* ===== HERRAMIENTAS · Calculadora ===== */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.tool-in,.tool-out{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.tool-out{background:linear-gradient(160deg,#0e3557,#06172a);border-color:transparent;color:#fff}
.fld{margin-bottom:26px}
.fld:last-of-type{margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.fld-val{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px}
.fld input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:#e7e3dc;outline:none}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 6px 16px -6px rgba(10,132,240,.9);border:3px solid #fff}
.fld input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:#0a84f0;cursor:pointer}
.fld-hint{display:flex;justify-content:space-between;font-size:12px;color:var(--grey);margin-top:7px}
.fld-note{font-size:13px;color:var(--grey);line-height:1.6;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.res-main{text-align:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.14)}
.res-lbl{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#7fb9e6}
.res-big{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:6px 0 4px;color:#ff8a8a}
.res-sub{font-size:14px;color:#9fb6c9}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.res-c{background:rgba(255,255,255,.06);border-radius:12px;padding:13px 15px;text-align:center}
.res-c span{display:block;font-size:12px;color:#9fb6c9;margin-bottom:3px}
.res-c b{font-size:20px;font-weight:800;color:#fff}
.res-cmp{background:rgba(255,255,255,.06);border-radius:13px;padding:16px 18px}
.rc-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#c9dcec;padding:7px 0}
.rc-row b{color:#fff;font-weight:700}
.rc-row.good b{color:#22d38a}
.rc-save{margin-top:11px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:14.5px;color:#c9dcec}
.rc-save strong{color:#22d38a;font-size:19px;font-weight:800}
.res-cmp.neg .rc-save strong{color:#ffbd2e}
.res-note{font-size:13px;color:#9fb6c9;line-height:1.6;margin:16px 0 0;text-align:center}
@media(max-width:860px){.tool{grid-template-columns:1fr}.res-big{font-size:42px}}

/* ===== HERRAMIENTAS · Test ===== */
.quiz{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.q-head{margin-bottom:22px}
.q-head span{font-size:12.5px;font-weight:700;color:var(--grey)}
.q-bar{height:6px;background:#eee9e1;border-radius:6px;margin-top:8px;overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:6px;transition:width .3s ease}
.q{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:none}
.q-t{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink);line-height:1.45;font-weight:500}
.q-n{flex:none;width:24px;height:24px;border-radius:50%;background:#f2efe9;color:var(--grey);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.q-btns{display:flex;gap:7px;flex:none}
.q-b{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font:inherit;font-size:14px;font-weight:700;color:var(--grey);cursor:pointer;transition:all .18s}
.q-b:hover{border-color:#0a84f0;color:var(--navy)}
.q-b.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px rgba(10,132,240,.8)}
.q-note{font-size:13px;color:var(--grey);text-align:center;margin:20px 0 0}
.quiz-res{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;text-align:center}
.quiz-res .res-lbl{display:inline-block;padding:5px 13px;border-radius:999px;font-size:11.5px}
.res-lbl.s0{background:#eafaf2;color:#0f7a52}
.res-lbl.s1{background:#fdf4e3;color:#a06a12}
.res-lbl.s2{background:#fdeee7;color:#c05621}
.res-lbl.s3{background:#fdecec;color:#c0392b}
.quiz-res h2{font-size:27px}
.res-list{text-align:left;margin-top:24px}
.rl-t{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);margin:0 0 12px}
.rl-i{background:#faf8f4;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:9px}
.rl-i b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.rl-i span{font-size:13.5px;color:var(--grey);line-height:1.55}
.q-again{margin-top:20px;background:none;border:none;font:inherit;font-size:13.5px;color:var(--grey);text-decoration:underline;cursor:pointer}

/* ===== Centro de ayuda: pasos ===== */
.step-b{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:12px}
.step-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(10,132,240,.8)}
.step-b h3{font-size:17px;margin:4px 0 6px;color:var(--ink)}
.step-b p{font-size:14.5px;color:var(--grey);line-height:1.6;margin:0}
.step-b code{background:#f2efe9;padding:2px 6px;border-radius:5px;font-size:13px;color:var(--navy)}

/* ===== Glosario ===== */
.gl-idx{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.gl-idx a{font-size:13.5px;font-weight:600;color:var(--navy);background:#faf8f4;border:1px solid var(--line);border-radius:999px;padding:6px 13px;text-decoration:none;transition:border-color .2s,color .2s}
.gl-idx a:hover{border-color:#0a84f0;color:#0a6bd6}
.gl-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gl-i{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;scroll-margin-top:100px}
.gl-i h3{font-size:17px;margin:0 0 7px;color:var(--ink)}
.gl-i p{font-size:14.5px;color:var(--grey);line-height:1.6;margin:0}
@media(max-width:860px){.gl-list{grid-template-columns:1fr}}

/* ===== Novedades ===== */
.rel{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start}
.rel-m{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0a6bd6;background:#eef4f9;border-radius:999px;padding:7px 14px;text-align:center;margin-top:4px}
.rel-b{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.rel-b h2{font-size:21px}
@media(max-width:760px){.rel{grid-template-columns:1fr;gap:12px}.rel-m{justify-self:start}}

/* Iconos del menú: Aprende, Sectores y Blog (selectores específicos por ruta) */
.nav-links a[href$="blog/index.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203.2h8l5%205v12.6H6z%27%2F%3E%3Cpath%20d%3D%27M14%203.2v5h5%27%2F%3E%3Cpath%20d%3D%27M9%2013h6.5M9%2016.5h4.5%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="ayuda/index.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.6%27%2F%3E%3Cpath%20d%3D%27M9.6%209.4a2.5%202.5%200%201%201%203.4%202.3c-.6.3-1%20.9-1%201.6v.3%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717%27%20r%3D%27.9%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="glosario.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%205.5h6a2.5%202.5%200%200%201%202.5%202.5v11a2%202%200%200%200-2-2h-6.5z%27%2F%3E%3Cpath%20d%3D%27M20.5%205.5h-6A2.5%202.5%200%200%200%2012%208v11a2%202%200%200%201%202-2h6.5z%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="herramientas/index.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%207.5a4%204%200%200%201-5.2%205.2L5%2018l1.5%201.5%205.3-5.3a4%204%200%200%200%205.2-5.2l-2.3%202.3-2.1-2.1z%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="comparativas/index.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020V9M10%2020V4M16%2020v-7M22%2020V6%27%20%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="migracion.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%277%27%20width%3D%277%27%20height%3D%2710%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714.5%27%20y%3D%277%27%20width%3D%277%27%20height%3D%2710%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M10.5%2012h3M12.5%2010.5l1.5%201.5-1.5%201.5%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="novedades.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.5l1.6%204.6%204.6%201.6-4.6%201.6L12%2015l-1.6-4.7L5.8%208.7l4.6-1.6z%27%2F%3E%3Cpath%20d%3D%27M18.5%2015l.8%202.2%202.2.8-2.2.8-.8%202.2-.8-2.2-2.2-.8%202.2-.8z%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="sectores/index.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%209.5L5%204.5h14l1.5%205a2.5%202.5%200%200%201-4.7%201.2%202.5%202.5%200%200%201-4.6%200%202.5%202.5%200%200%201-4.6%200A2.5%202.5%200%200%201%203.5%209.5z%27%2F%3E%3Cpath%20d%3D%27M5%2012v7.5h14V12%27%2F%3E%3C%2Fsvg%3E")}
.nav-links a[href$="moda.html"]::before,.nav-links a[href$="zapateria.html"]::before,.nav-links a[href$="alimentacion.html"]::before,.nav-links a[href$="vinoteca.html"]::before,.nav-links a[href$="libreria.html"]::before,.nav-links a[href$="ferreteria.html"]::before,.nav-links a[href$="optica.html"]::before,.nav-links a[href$="deporte.html"]::before{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%209.5L5%204.5h14l1.5%205a2.5%202.5%200%200%201-4.7%201.2%202.5%202.5%200%200%201-4.6%200%202.5%202.5%200%200%201-4.6%200A2.5%202.5%200%200%201%203.5%209.5z%27%2F%3E%3Cpath%20d%3D%27M5%2012v7.5h14V12%27%2F%3E%3C%2Fsvg%3E")}

/* ── Iconos de sector ── (mask + currentColor: heredan el color del contexto) */
.af-ic{width:46px;height:46px;border-radius:13px;background:rgba(21,200,232,.13);border:1px solid rgba(21,200,232,.32);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.af-ic::before,.slc-ic::before{content:"";display:block;background-color:currentColor;-webkit-mask:var(--i) no-repeat center/contain;mask:var(--i) no-repeat center/contain}
.af-ic{color:var(--cy)}.af-ic::before{width:25px;height:25px}
.slc-ic{width:36px;height:36px;border-radius:10px;background:#eef4f9;color:#0a6bd6;display:flex;align-items:center;justify-content:center;margin-bottom:13px;flex:none;transition:background .3s,color .3s}
.slc-ic::before{width:20px;height:20px}
.slc:hover .slc-ic{background:#0a6bd6;color:#fff}
[data-ic="moda"],.nav-links a[href$="moda.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%203%204%205.5l2%203.5%202-1V21h8V8l2%201%202-3.5L15.5%203a3.5%203.5%200%200%201-7%200Z%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="zapateria"],.nav-links a[href$="zapateria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2018v-6h4l3%202h5l4.5%201.8A3%203%200%200%201%2020.5%2021H2v-3Z%22%2F%3E%3Cpath%20d%3D%22M6.5%2014.2%207.5%2012M9.5%2016l1-2M13%2016.6l1-2%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="alimentacion"],.nav-links a[href$="alimentacion.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18l-1.6%2011.1A2%202%200%200%201%2017.4%2021H6.6a2%202%200%200%201-2-1.9L3%208Z%22%2F%3E%3Cpath%20d%3D%22M8.5%208%2010.5%203M15.5%208%2013.5%203%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="vinoteca"],.nav-links a[href$="vinoteca.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10l-.7%206.2a4.4%204.4%200%200%201-8.6%200L7%203Z%22%2F%3E%3Cpath%20d%3D%22M12%2013.6V20M8.5%2020h7%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="libreria"],.nav-links a[href$="libreria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206.4C10.4%205%208.4%204.3%204%204.3V19c4.4%200%206.4.7%208%202.2%201.6-1.5%203.6-2.2%208-2.2V4.3c-4.4%200-6.4.7-8%202.1Z%22%2F%3E%3Cpath%20d%3D%22M12%206.4v14.8%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="ferreteria"],.nav-links a[href$="ferreteria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.9%204.6a4.5%204.5%200%200%201-5.7%205.7L6.4%2019.2a2%202%200%201%201-2.8-2.8l8.9-8.8a4.5%204.5%200%200%201%205.7-5.7L15%204.7l.6%203%203%20.6%202.3-3.7Z%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="optica"],.nav-links a[href$="optica.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2214.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2214.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M9.5%2014.5h5%22%2F%3E%3Cpath%20d%3D%22M2.5%2014%204.8%208.4A1%201%200%200%201%205.7%207.8H8%22%2F%3E%3Cpath%20d%3D%22M21.5%2014%2019.2%208.4a1%201%200%200%200-.9-.6H16%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="deporte"],.nav-links a[href$="deporte.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%206.5v11M3.5%209v6M17.5%206.5v11M20.5%209v6M6.5%2012h11%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="bicicletas"],.nav-links a[href$="bicicletas.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%225%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%2017.5V14l-3-3%204-3%202%203h2%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="joyeria"],.nav-links a[href$="joyeria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%203h11l3.5%205.8L12%2021%201.5%208.8%205%203Z%22%2F%3E%3Cpath%20d%3D%22M1.5%208.8h20%22%2F%3E%3Cpath%20d%3D%22M9%203%207.2%208.8%2012%2021l4.8-12.2L15%203%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="jugueteria"],.nav-links a[href$="jugueteria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M7.2%209V7.2a2%202%200%201%201%204%200V9M13%209V7.2a2%202%200%201%201%204%200V9%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="mascotas"],.nav-links a[href$="mascotas.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.7%22%20cy%3D%2210.2%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210.2%22%20cy%3D%226.4%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2215.6%22%20cy%3D%226.4%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2210.6%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12.4%2012.2c-2.4%200-4.4%201.6-5.3%203.6-1%202.2.5%204.4%202.9%204.4h5.2c2.4%200%203.9-2.2%202.9-4.4-.9-2-3.3-3.6-5.7-3.6Z%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="floristeria"],.nav-links a[href$="floristeria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226.3%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2216.7%22%20cy%3D%229.7%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2214.9%22%20cy%3D%2215.2%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%229.1%22%20cy%3D%2215.2%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%227.3%22%20cy%3D%229.7%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2211.4%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M12%2017.5V22%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="perfumeria"],.nav-links a[href$="perfumeria.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%229%22%20width%3D%2210%22%20height%3D%2212%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M10%209V6.6h4V9%22%2F%3E%3Cpath%20d%3D%22M9.6%204h4.8M12%204v2.6%22%2F%3E%3Cpath%20d%3D%22M17%2012.5h1.8a1.6%201.6%200%200%201%200%203.2H17%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="estetica"],.nav-links a[href$="estetica.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M8.2%207.4%2020%2018M8.2%2016.6%2020%206%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="electronica"],.nav-links a[href$="electronica.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2210%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M10%203v4M14%203v4M10%2017v4M14%2017v4M3%2010h4M3%2014h4M17%2010h4M17%2014h4%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="hogar"],.nav-links a[href$="hogar.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011V7.2A2.2%202.2%200%200%201%207.2%205h9.6A2.2%202.2%200%200%201%2019%207.2V11%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2211%22%20width%3D%2220%22%20height%3D%226%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M5.5%2017v2.5M18.5%2017v2.5%22%2F%3E%3C%2Fsvg%3E")}
[data-ic="panaderia"],.nav-links a[href$="panaderia.html"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013.8C3%209.8%207%206.8%2012%206.8s9%203%209%207a3.2%203.2%200%200%201-3.2%203.2H6.2A3.2%203.2%200%200%201%203%2013.8Z%22%2F%3E%3Cpath%20d%3D%22M8.4%2010.2%206.9%2013M12%209.5l-1.4%203.3M15.6%2010.2%2014.2%2013%22%2F%3E%3C%2Fsvg%3E")}
/* ── fin iconos de sector ── */

/* ── Integraciones ── */
.af-badge.dev{background:rgba(255,176,32,.14);color:#ffc457;border-color:rgba(255,176,32,.4)}
.aviso{background:#fff8e8;border:1px solid #f2d99b;border-left:4px solid #e8a90c;border-radius:12px;padding:18px 20px;color:#5d4a15;font-size:15px;line-height:1.6}
.aviso b{color:#3d3009}
.slc-k.dev{background:#fff2d6;color:#a5730a}
.cta-lead.esp{background:linear-gradient(135deg,#041525,#0a3a66);border-radius:20px;padding:34px 28px;text-align:center;color:#fff}
.cta-lead.esp .cta-lead-t{color:#dbe8f3;max-width:560px;margin:12px auto 18px;font-size:16px;line-height:1.55}
.cta-lead.esp .lc-row{justify-content:center}
.cta-lead.esp .lc-note{color:#9fb6c9}
.cta-lead.esp .lc-note a{color:#8fd8ee}
.intg.soon{opacity:.72}
.intg.soon i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,176,32,.16);color:#c98a06;border:1px solid rgba(255,176,32,.35);border-radius:20px;padding:2px 7px;margin-left:7px}
.ch.soon{border-style:dashed;background:#fcfdfe}
.ch.soon span{color:#a5730a;font-weight:700}
/* ── fin integraciones ── */

/* ── Bloque del módulo de PrestaShop (guía de ayuda) ───────────────────── */
.fxmod{border:1px solid #dbe3ec;border-left:4px solid var(--naranja,#e8622c);border-radius:12px;
  background:linear-gradient(180deg,#fbfcfe,#f5f8fb);padding:26px 28px;margin:8px 0 34px}
.fxmod-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fxmod-h h2{margin:0;font-size:22px}
.fxmod-tag{background:var(--naranja,#e8622c);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.fxmod p{margin:10px 0}
.fxmod .fxmod-note{background:#fff;border:1px solid #e4eaf1;border-radius:8px;padding:12px 14px;font-size:15px}
.fxmod .btn{margin-top:16px;display:inline-block}
.fxmod-inst{font-size:15px;color:#5a6b7d;margin-top:16px!important;line-height:1.7}
.fxmod-inst code{background:#eef2f7;padding:2px 6px;border-radius:4px;font-size:13px}
@media(max-width:640px){.fxmod{padding:20px 18px}.fxmod-h h2{font-size:19px}}

/* ===========================================================================
   .sec — BUG QUE SE VEÍA Y NADIE SABÍA POR QUÉ
   Los bloques del final de página ("Sigue leyendo", "Compáralo", "Haz los
   números") se escribieron primero en las comparativas, donde .sec vivía en un
   <style> dentro del propio HTML. Al copiarlos a precios, funcionalidades y
   foxta-a-fondo se copió el marcado y se dejó atrás el CSS: sin .sec no hay ni
   ancho máximo ni márgenes, así que el texto salía pegado al borde izquierdo de
   la pantalla. Copiar HTML entre páginas sin comprobar de dónde sale su estilo
   es exactamente así de fácil, y así de invisible hasta que lo miras.
   Aquí queda, global. Las comparativas siguen pisándolo con su <style> local,
   que va después, y no se rompe nada.
   =========================================================================== */
.sec{max-width:var(--maxw);margin:0 auto;padding:54px 24px}
.sec>h2{font-size:clamp(23px,3.4vw,30px);color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.sec>.lead{color:var(--grey);font-size:16.5px;max-width:720px;margin:0 0 28px;line-height:1.6}
@media(max-width:640px){.sec{padding:40px 20px}}

/* ===========================================================================
   LA ESCALERA DE LA FOTO
   Cuatro peldaños, y el mensaje está en el segundo: una foto mala recortada
   sigue siendo una foto mala. Recortar no arregla la luz, ni el enfoque, ni el
   mantel de flores. Eso es exactamente lo que vende Photoroom, y por eso no
   basta. El salto de verdad ocurre en el tercero, y el cuarto es el que Amazon
   y Google Shopping exigen: producto sobre blanco puro.
   Los peldaños 1, 2 y 4 son gratis en Foxta. Solo el 3 cuesta.
   =========================================================================== */
.esc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;align-items:stretch}
.esc-p{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.esc-p:hover{transform:translateY(-6px);box-shadow:0 30px 60px -38px rgba(4,21,37,.55);border-color:#cfe0ee}
/* El bueno se marca. Sin marcarlo, cuatro fotos en fila son cuatro opciones;
   marcado, son un recorrido con un final. */
.esc-p.win{border-color:#0a6bd6;box-shadow:0 0 0 1px #0a6bd6,0 26px 54px -30px rgba(10,107,214,.5)}
.esc-im{aspect-ratio:1;background:
  linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%),
  linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;position:relative}
.esc-im img{width:100%;height:100%;object-fit:cover;display:block}
.esc-n{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;background:rgba(4,21,37,.82);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:2}
.esc-tag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:4px 9px;border-radius:20px;background:#e8f3e9;color:#1c7a3a;z-index:2}
.esc-tag.pay{background:linear-gradient(135deg,#15c8e8,#0a84f0);color:#fff}
.esc-tx{padding:16px 16px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.esc-tx b{font-size:15px;color:var(--ink);letter-spacing:-.01em}
.esc-tx span{font-size:13.5px;color:var(--grey);line-height:1.5}
/* El veredicto. Es la frase que hace que el módulo signifique algo. */
.esc-v{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.esc-v.no{color:#b3261e}
.esc-v.si{color:#1c7a3a}
@media(max-width:900px){.esc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.esc{grid-template-columns:1fr}}

/* Los cuatro paquetes de fotos */
.fpk{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.fpk-c{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;text-align:center;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.fpk-c:hover{transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(4,21,37,.5);border-color:#cfe0ee}
.fpk-n{font-size:32px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.fpk-l{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--grey);margin-top:3px}
.fpk-p{font-size:21px;font-weight:800;color:#0a6bd6;margin-top:12px}
.fpk-u{font-size:12.5px;color:var(--grey);margin-top:3px}
@media(max-width:820px){.fpk{grid-template-columns:repeat(2,1fr)}}

/* Pestañas de anclaje (Planes / Imágenes con IA). Hacen scroll, NO navegan:
   quien entra en Precios debe poder verlo TODO sin volver a pulsar nada. */
/* Los tabs son un <nav>, así que heredaban la regla global `nav{sticky;top:0;z-index:60}`
   pensada para la cabecera del sitio: se pegaban ARRIBA DEL TODO, en la misma capa,
   y la cabecera les caía encima. Se quedan sticky (es útil al scrollear los planes),
   pero por debajo de la cabecera (67px) y en una capa inferior. */
.ptabs{display:flex;justify-content:center;gap:8px;margin:0 auto 8px;flex-wrap:wrap;
  top:75px;z-index:40;padding:8px 0;background:var(--bg,#f7f5f1)}
.ptabs a{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;transition:all .2s}
.ptabs a:hover{border-color:#0a6bd6;color:#0a6bd6;transform:translateY(-2px)}
.ptabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Un "no" en una lista de "síes". Se dice con claridad y sin drama: tachado no,
   apagado tampoco. Simplemente en gris, con un candado, y en su sitio: el último.
   Esconder lo que un plan NO hace es la forma más rápida de que el cliente se
   sienta engañado el día que lo descubra. */
.plan ul li.no{color:var(--grey);opacity:.9;align-items:flex-start}
.plan ul li.no svg{color:#c99000;opacity:1}
.plan ul li.no b{color:var(--ink);font-weight:700}

/* Eyebrow del hero: la bandera de categoría (ERP·TPV·IA · para cualquiera).
   Planta la IA y la universalidad ANTES del titular, que es lo que primero lee
   tanto una persona como un buscador/IA que indexa la página. */
.hero-eyebrow{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.3px;
  color:#7fd0ff;background:none;border:0;padding:0;margin-bottom:16px}
@media(max-width:600px){.hero-eyebrow{font-size:12px}}