/* MixaShop · portada «premium»: misma letra, mismos tamaños y mismo ritmo en ES / FR / EN.
   Se carga después de los estilos de la página: solo afina tipografía, espacios, tarjetas y movimiento. */
:root{
  --wrap:1240px; --r-m:22px; --r-l:30px;
  --sh-1:0 1px 2px rgba(0,37,27,.05),0 12px 32px -14px rgba(0,37,27,.16);
  --sh-2:0 2px 6px rgba(0,37,27,.06),0 30px 60px -26px rgba(0,37,27,.32);
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11" 1,"ss01" 1}
button,input,select,textarea,.pl-period button,.pl-bank .pl-cp{font-family:inherit!important}
h1,h2,h3{font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(26px,2.6vw,38px);line-height:1.08}
h3{font-size:18px;letter-spacing:-.02em}
.lead{font-size:clamp(16px,1.2vw,18px);line-height:1.55;letter-spacing:-.012em}
b,strong{font-weight:600}
.wrap{max-width:var(--wrap)}

/* ritmo: menos aire muerto entre bloques */
section{padding:clamp(52px,6vw,84px) 0}
.sec-head{margin-bottom:clamp(22px,2.6vw,34px);max-width:720px}
.sec-head p{margin-top:12px}
.mist{background:linear-gradient(180deg,#F7F9EF 0%,#EEF2DD 100%)}

/* cabecera de cristal */
.site-header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-bottom:1px solid rgba(0,37,27,.07)}
.site-header .wrap{height:60px}
.site-header .logo img{height:28px}
.nav{font-size:14px;font-weight:500}
.nav a:not(.btn){color:#3E4C45;transition:color .2s}
.nav .btn{padding:8px 16px;font-size:13.5px}
.lang a{font-size:12px;padding:4px 9px}

/* botones */
.btn{padding:12px 22px;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-lime{box-shadow:0 10px 26px -12px rgba(200,211,63,.9)}
.btn-dark{box-shadow:0 10px 26px -14px rgba(0,37,27,.7)}

/* portada: más compacta y con luz */
.hero{background:radial-gradient(1100px 560px at 88% -12%,rgba(200,211,63,.20),transparent 62%),radial-gradient(900px 520px at -12% 115%,rgba(14,140,106,.28),transparent 60%),var(--ink)}
.hero .wrap{padding-top:clamp(36px,4.6vw,60px);padding-bottom:clamp(40px,4.8vw,64px);gap:clamp(28px,4vw,56px);grid-template-columns:1.12fr .88fr}
.hero h1{font-size:clamp(34px,4.1vw,56px);line-height:1.03;letter-spacing:-.045em;margin:16px 0 14px;max-width:14ch}
.hero .lead{font-size:clamp(15.5px,1.15vw,17.5px);max-width:50ch}
.hero-ctas{margin-top:24px;gap:10px}
.stores{margin-top:20px}
.langs{margin-top:12px;font-size:13px}
.pill{font-size:13px;padding:5px 12px;background:rgba(200,211,63,.08)}
.hero-visual{width:min(380px,100%)}
.hero-photo{aspect-ratio:4/4.25;border-radius:var(--r-l);box-shadow:0 40px 80px -34px rgba(0,0,0,.65)}
.float{border-radius:14px;padding:10px 14px;font-size:13px;box-shadow:0 18px 40px -16px rgba(0,20,14,.55);animation:mxFloat 6s ease-in-out infinite}
.f1{animation-delay:-3s}
.float .ic{width:34px;height:34px}
@keyframes mxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* tarjetas: misma familia de bordes, sombras y movimiento */
.tab,.mx-svc-i,.pl-plan,.phase,.pl-paybox .pl-card{border-radius:var(--r-m);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s,background .2s}
.mx-svc-i,.pl-plan,.phase,.pl-paybox .pl-card{box-shadow:var(--sh-1)}
.mx-svc-i:hover,.pl-plan:hover,.phase:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.panel,.bulk,.bill{border-radius:var(--r-m);box-shadow:var(--sh-2)}
.tab{padding:14px 18px}
.tab .ic{width:46px;height:46px;border-radius:13px}
.tabs{gap:10px}
.stores-grid{gap:clamp(28px,4vw,56px)}
.phone{width:300px;border-radius:42px;box-shadow:0 40px 80px -36px rgba(0,37,27,.45)}
.screen{height:560px;border-radius:32px}

/* pasos */
.steps li{padding-top:62px}
.steps li::before{width:48px;height:48px;font-size:16px}
.steps li:not(:last-child)::after{top:23px;left:60px}
.steps p{font-size:14.5px}

/* bloques de negocio y multitienda */
.biz,.multi,.bill-grid{gap:clamp(28px,4vw,56px)}
.checks{margin:22px 0 26px;gap:12px}
.msteps{margin-top:24px;gap:16px}
.points{gap:20px;margin-top:24px}

/* planes */
.pl-plans{gap:16px}
.pl-plan{padding:24px 20px}
.pl-plan .pl-price b{font-size:28px;letter-spacing:-.04em}

/* franja final «¿Tienes un negocio?»: menos alta y más fina */
.cta{padding:clamp(52px,5.5vw,76px) 0;background:radial-gradient(900px 500px at 100% 0,rgba(200,211,63,.14),transparent 60%),var(--ink)}
.cta .wrap{grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,56px)}
.cta .brand img{width:min(280px,100%)}
.cta h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:12px}
.contact{margin-top:20px;gap:8px}
.contact .ic{width:36px;height:36px}
.contact .ic svg{width:17px;height:17px}
.cta-apps{margin-top:18px}
footer{padding:20px 0;font-size:13px}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}.cta .brand img{width:200px}}

/* aparición suave al bajar */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.float{animation:none}}

/* contador de visitas en vivo */
.mx-visits{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:18px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#C7D4CD;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums}
.mx-visits b{color:#fff;font-weight:600}
.mx-visits .lv{display:inline-flex;align-items:center;gap:7px;color:var(--lime);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:11.5px}
.mx-visits .lv:before{content:"";width:8px;height:8px;border-radius:50%;background:#7CFF9B;box-shadow:0 0 0 0 rgba(124,255,155,.7);animation:mxPulse 2s infinite}
.mx-visits .rf{color:#8FA59A;font-size:12px}
.mx-visits .sep{opacity:.35}
@keyframes mxPulse{0%{box-shadow:0 0 0 0 rgba(124,255,155,.6)}70%{box-shadow:0 0 0 9px rgba(124,255,155,0)}100%{box-shadow:0 0 0 0 rgba(124,255,155,0)}}
.mx-visits.bump b{animation:mxBump .6s var(--ease)}
@keyframes mxBump{0%{color:var(--lime)}100%{color:#fff}}

/* móvil */
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-visual{width:min(340px,100%)}}
@media (max-width:600px){section{padding:44px 0}.hero h1{font-size:34px}.mx-visits{border-radius:16px}}

/* fila de tiendas de apps + QR más compacta */
.hero .stores{gap:8px}
.hero .app-qr{padding:6px 12px 6px 6px!important;border-radius:14px!important}
.hero .app-qr svg{width:64px!important;height:64px!important}
.hero-web{margin-top:8px}