/* ============================================================
   iPark B2B — shared.css (components)
   Self-contained. Depends only on ./tokens.css (same folder).
   No imports from Paymeter. B2B institutional tone.
   ============================================================ */

/* ───── Layout ───── */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.section{padding:var(--sp-9) 0}
.section-sm{padding:var(--sp-8) 0}
.section-soft{background:var(--bg-soft)}
.section-beige{background:var(--ipark-beige)}
.section-dark{background:var(--bg-dark);color:var(--fg-on-dark);position:relative;overflow:hidden}
.section-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 85% 0%,rgba(234,23,68,.18),transparent 60%)}
.section-dark > *{position:relative;z-index:1}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark p{color:var(--fg-on-dark-muted)}
.section-head{max-width:720px;margin-bottom:var(--sp-7)}
.section-head h2{margin-top:14px;font-size:var(--fs-h2);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.section-head p{margin-top:16px;font-size:var(--fs-lead);color:var(--fg-muted);line-height:1.6;max-width:640px}

/* ───── Header — slim pill nav (Paymeter rhythm) ───── */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top,0px)}
.hdr .nav{max-width:1320px;margin:0 auto;height:64px;padding:0 max(22px,env(safe-area-inset-right,0px)) 0 max(22px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px}

/* Logo block (left) */
.hdr a.logo{display:flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;flex-shrink:0}
.hdr .logo-mark-img{width:32px;height:32px;display:block;flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(234,23,68,.18))}
.hdr .logo-text-wrap{display:flex;flex-direction:column;line-height:1}
.hdr .logo-text{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ipark-blue)}
.hdr .logo-sub{display:block;font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);margin-top:3px}

/* Central pill nav — slim, Deep Blue with red active item */
.hdr .nav-pill{display:flex;align-items:center;gap:2px;background:var(--ipark-blue);border-radius:var(--r-pill);padding:4px;box-shadow:0 4px 14px rgba(3,25,39,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.hdr .nav-pill a{padding:8px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;transition:all var(--t-fast);font-family:inherit}
.hdr .nav-pill a:hover{color:#fff;background:rgba(255,255,255,.06)}
.hdr .nav-pill a.active{background:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(234,23,68,.35)}
.hdr .nav-pill a.active:hover{background:var(--accent)}

/* Spacer between nav pill and right cluster */
.hdr .nav-spacer{flex:1}

/* Ghost outlined pill — estilo Paymeter "Pagar sin app" */
.hdr .nav-ghost{display:inline-flex;align-items:center;gap:5px;padding:8px 18px;font-size:13px;font-weight:600;color:var(--fg);background:#fff;border:1.5px solid rgba(3,25,39,.16);border-radius:var(--r-pill);text-decoration:none;transition:all var(--t-fast);white-space:nowrap;font-family:inherit;box-shadow:0 1px 4px rgba(3,25,39,.07)}
.hdr .nav-ghost:hover{border-color:rgba(234,23,68,.5);color:var(--accent);box-shadow:0 2px 10px rgba(234,23,68,.13);transform:translateY(-1px)}

/* Light pill group (secondary actions, blue-tinted) */
.hdr .nav-pill-light{display:inline-flex;align-items:center;gap:2px;background:var(--ipark-blue-50);border:1px solid var(--ipark-blue-100);border-radius:var(--r-pill);padding:3px}
.hdr .nav-pill-light a{padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ipark-blue);text-decoration:none;border-radius:var(--r-pill);transition:all var(--t-fast);white-space:nowrap;font-family:inherit}
.hdr .nav-pill-light a:hover{background:#fff;box-shadow:0 2px 6px rgba(3,25,39,.08)}

/* Solid red CTA button — estilo Paymeter "Descargar" */
.hdr .nav-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 22px;font-size:13px;font-weight:700;color:#fff;background:var(--accent);border:0;border-radius:var(--r-pill);text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 4px 16px rgba(234,23,68,.38);transition:all var(--t-fast)}
.hdr .nav-cta:hover{background:var(--ipark-red-600);transform:translateY(-1px);box-shadow:0 6px 22px rgba(234,23,68,.52)}

/* Language selector — slim */
.hdr .nav-lang{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--fg);background:transparent;border:0;cursor:pointer;font-family:inherit;border-radius:var(--r-md)}
.hdr .nav-lang:hover{background:var(--bg-soft)}
.hdr .nav-lang .chev{font-size:9px;color:var(--fg-muted);margin-left:1px}
/* Banderas SVG reales — mismo estilo botón y menú */
.flag-img{width:20px;height:14px;border-radius:3px;object-fit:cover;flex-shrink:0;border:1px solid rgba(0,0,0,.10);box-shadow:0 1px 3px rgba(0,0,0,.12);display:inline-block;vertical-align:middle}
.hdr .nav-lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-md);min-width:178px;display:none;z-index:calc(var(--z-sticky) + 1)}
.hdr .nav-lang-menu.open{display:block}
.hdr .nav-lang-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;color:var(--fg);text-decoration:none;border-radius:var(--r-md);font-weight:600}
.hdr .nav-lang-menu a:hover{background:var(--bg-soft)}
.hdr .nav-lang-menu a.active{color:var(--accent)}
.hdr .nav-lang-menu a.active::after{content:"✓";margin-left:auto;color:var(--accent);font-weight:800}

/* ───── Mobile hamburger + drawer ───── */
.hdr .nav-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border-strong);background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;margin-left:auto}
.hdr .nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform .25s,opacity .2s}
.hdr .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer-backdrop{position:fixed;inset:0;background:rgba(3,25,39,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:var(--z-drawer-bg)}
.nav-drawer-backdrop.open{opacity:1;pointer-events:auto}
.nav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;z-index:var(--z-drawer);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(3,25,39,.18);overflow-y:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-overflow-scrolling:touch}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border)}
.nav-drawer-head strong{font-family:Poppins,sans-serif;font-weight:800;font-size:18px;color:var(--fg)}
.nav-drawer-close{width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:22px;line-height:1;color:var(--fg);display:flex;align-items:center;justify-content:center}
.nav-drawer nav{display:flex;flex-direction:column;padding:14px 14px 0}
.nav-drawer nav a{padding:14px 16px;font-size:16px;font-weight:600;color:var(--fg);text-decoration:none;border-radius:12px}
.nav-drawer nav a:hover{background:var(--bg-soft);color:var(--accent)}
.nav-drawer-cta{padding:18px 22px 28px;display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid var(--border)}
.nav-drawer-cta a{text-align:center;padding:14px;border-radius:9999px;font-weight:700;font-size:14px;text-decoration:none}
.nav-drawer-cta .pay{background:rgba(234,23,68,.08);border:1.5px solid rgba(234,23,68,.35);color:var(--accent);font-weight:700}
.nav-drawer-cta .primary{background:var(--accent);color:#fff}
.nav-drawer-cta .ghost{background:#fff;border:1px solid var(--border-strong);color:var(--fg)}
body.nav-locked{overflow:hidden}

/* ── Header v2.0: label switching desktop/tablet ── */
.nav-cta-short{display:none}
.nav-cta-full{display:inline}
@media(max-width:1180px) and (min-width:769px){
  .nav-cta-short{display:inline}
  .nav-cta-full{display:none}
  .hdr .nav-pill{display:none}
}

/* Responsive: collapse central pill on smaller screens */
@media(max-width:1180px){
  .hdr .nav-pill{display:none}
  .hdr .nav-pill-light{display:none}
  .hdr .nav-ghost{display:none}
  .hdr .nav-cta{display:none}
  .hdr .nav-burger{display:flex}
}
@media(max-width:780px){
  .hdr .nav{height:72px;padding:0 18px;gap:10px}
  .hdr .logo-sub{display:none}
  .hdr .logo-text{font-size:20px}
}

/* ───── Hero ───── */
.hero{padding:var(--sp-9) 0 var(--sp-8);position:relative;overflow:hidden;background:radial-gradient(900px 500px at 85% 10%,rgba(234,23,68,.07),transparent 60%),linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--sp-8);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-7)}}
.hero h1{font-size:var(--fs-h1);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin-top:24px}
/* ── Gradient text — marca de diseño iPark / Paymeter ──────────── */
.accent{
  background:linear-gradient(120deg,#ff5577 0%,#ea1744 52%,#c41440 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#ea1744; /* fallback navegadores sin soporte */
}
.hero p.lead{margin-top:22px;font-size:var(--fs-lead);color:var(--fg-muted);max-width:560px;line-height:1.6}
.hero-actions{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{margin-top:var(--sp-7);display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:580px}
@media(max-width:560px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
.hero-stats > div strong{display:block;font-size:30px;font-weight:800;color:var(--fg);letter-spacing:-.02em}
.hero-stats > div small{display:block;font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

/* Hero dashboard mockup */
.hero-mock{background:var(--bg-dark-grad);border-radius:var(--r-xl);padding:28px;color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero-mock::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 100% 0%,rgba(234,23,68,.18),transparent 60%)}
.hero-mock .h-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.hero-mock .dots{display:flex;gap:6px}
.hero-mock .dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.hero-mock .h-head small{font-size:11px;color:rgba(255,255,255,.55);font-weight:600;letter-spacing:.08em}
.hero-mock .h-title{margin-top:22px;font-size:12px;color:rgba(255,255,255,.6);font-weight:600;text-transform:uppercase;letter-spacing:.12em;position:relative;z-index:1}
.hero-mock .h-stat{margin-top:8px;font-size:42px;font-weight:800;letter-spacing:-.02em;position:relative;z-index:1;color:#fff}
.hero-mock .h-stat .delta{font-size:13px;font-weight:600;color:#7ce0a3;margin-left:10px}
.hero-mock .h-grid{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.hero-mock .h-cell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:14px}
.hero-mock .h-cell small{font-size:10px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hero-mock .h-cell strong{display:block;margin-top:6px;font-size:20px;font-weight:700;color:#fff}
.hero-mock .h-bars{margin-top:18px;display:flex;gap:6px;align-items:flex-end;height:62px;position:relative;z-index:1}
.hero-mock .h-bars span{flex:1;background:linear-gradient(180deg,var(--accent) 0%,rgba(234,23,68,.3) 100%);border-radius:4px}

/* ───── Stats band (dark) ───── */
.stats-band{background:var(--ipark-blue);color:#fff;padding:var(--sp-7) 0;position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 400px at 50% 100%,rgba(234,23,68,.15),transparent 60%);pointer-events:none}
.stats-band-inner{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;text-align:center}
@media(max-width:880px){.stats-band-inner{grid-template-columns:repeat(2,1fr);gap:32px}}
.stats-band strong{display:block;font-size:42px;font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1}
.stats-band small{display:block;margin-top:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.15em;text-transform:uppercase}

/* ───── Logo strip ───── */
.logo-strip{padding:var(--sp-6) 0;background:#fff;border-bottom:1px solid var(--border)}
.logo-strip p{text-align:center;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin:0 0 16px}
.logo-strip .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;opacity:.5;font-weight:700;color:var(--fg);font-size:16px;letter-spacing:.04em}

/* ───── Audience cards (3 columnas destacadas) ───── */
.audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.audiences{grid-template-columns:1fr}}
.aud-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:transform var(--t-base),box-shadow var(--t-base);text-decoration:none;color:inherit}
.aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.aud-card .head{height:160px;background:var(--bg-dark-grad);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:24px}
.aud-card .head::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 100% 0%,rgba(234,23,68,.22),transparent 60%)}
.aud-card .head h3{position:relative;font-size:28px;font-weight:800;color:#fff;letter-spacing:-.01em;margin:0}
.aud-card .head .badge{position:absolute;top:20px;left:24px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:1}
.aud-card .body{padding:24px 28px 28px;flex:1;display:flex;flex-direction:column}
.aud-card .body p{font-size:15px;color:var(--fg-muted);line-height:1.6;margin:0 0 16px}
.aud-card .body ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.aud-card .body ul li{font-size:14px;color:var(--fg);display:flex;gap:10px}
.aud-card .body ul li::before{content:"✓";color:var(--accent);font-weight:800}
.aud-card .body .link{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent)}
.aud-card .body .link::after{content:" →"}

/* ───── Ecosystem block ───── */
.eco-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);align-items:center}
@media(max-width:980px){.eco-grid{grid-template-columns:1fr;gap:var(--sp-7)}}
.eco-grid .ecosvg{width:100%;max-width:520px;margin:0 auto;display:block}

/* ───── Testimonial ───── */
.testimonial{background:var(--ipark-beige);border-radius:var(--r-xl);padding:56px;display:grid;grid-template-columns:1fr 240px;gap:40px;align-items:center}
@media(max-width:780px){.testimonial{grid-template-columns:1fr;padding:36px}}
.testimonial blockquote{font-size:24px;font-weight:600;line-height:1.35;color:var(--fg);letter-spacing:-.01em;margin:0}
.testimonial blockquote::before{content:"“";font-size:64px;color:var(--accent);line-height:0;vertical-align:-24px;margin-right:4px;font-family:Georgia,serif}
.testimonial .author{margin-top:24px;display:flex;align-items:center;gap:14px}
.testimonial .avatar{width:52px;height:52px;border-radius:50%;background:var(--ipark-blue);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0}
.testimonial .who strong{display:block;font-size:15px;font-weight:700;color:var(--fg)}
.testimonial .who small{display:block;font-size:13px;color:var(--fg-muted);margin-top:2px}
.testimonial .logo-big{font-size:22px;font-weight:800;color:var(--fg);text-align:center;letter-spacing:.04em;padding:32px 20px;border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:#fff}

/* ───── Powered-by strip ───── */
.powered{padding:var(--sp-7) 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.powered-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
@media(max-width:880px){.powered-inner{grid-template-columns:1fr}}
.powered small.label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}
.powered h3{margin-top:10px;font-size:clamp(1.4rem,2.2vw,1.875rem);font-weight:700;line-height:1.2;color:var(--fg);max-width:520px}
.powered a.ext{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:700;color:var(--accent)}
.powered a.ext::after{content:"↗"}
.powered .screens{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.powered .screen{width:120px;height:240px;background:var(--bg-dark-grad);border-radius:22px;border:6px solid #0a1826;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.powered .screen::after{content:"";position:absolute;inset:0;background:radial-gradient(200px 140px at 50% 40%,rgba(234,23,68,.3),transparent 60%)}
.powered .screen:nth-child(1){transform:rotate(-4deg)}
.powered .screen:nth-child(3){transform:rotate(4deg)}

/* ───── CTA band (dark) ───── */
.cta-band{position:relative;padding:var(--sp-9) 0;background:linear-gradient(135deg,var(--ipark-blue) 0%,var(--ipark-blue-700) 50%,#1a0510 100%);color:#fff;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(234,23,68,.25) 0%,transparent 60%),radial-gradient(circle at 80% 30%,rgba(234,23,68,.15) 0%,transparent 50%);pointer-events:none}
.cta-band-inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center}
@media(max-width:980px){.cta-band-inner{grid-template-columns:1fr}}
.cta-band h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:16px 0;color:#fff}
.cta-band h2 .accent{-webkit-text-fill-color:transparent} /* hereda gradiente base .accent */
.cta-band p{font-size:17px;color:rgba(255,255,255,.78);line-height:1.55;margin:0 0 24px;max-width:540px}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:14px}
.cta-band .trust{margin-top:22px;display:flex;flex-wrap:wrap;gap:20px;font-size:13px;color:rgba(255,255,255,.6);font-weight:500}
.cta-band .trust span::before{content:"✓ ";color:var(--accent);font-weight:800}
.cta-band-form{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:28px}
.cta-band-form h4{font-size:15px;color:#fff;margin:0 0 14px;font-weight:700}
.cta-band-form input,.cta-band-form select{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:12px 14px;color:#fff;font-family:inherit;font-size:14px;outline:none;margin-bottom:10px}
.cta-band-form input::placeholder{color:rgba(255,255,255,.45)}
.cta-band-form button{width:100%;background:var(--accent);color:#fff;border:0;padding:14px;border-radius:var(--r-md);font-weight:800;font-size:14px;cursor:pointer;margin-top:6px;font-family:inherit}

/* ───── Direct contact CTAs (replaces fake forms V1) ───── */

/* ── Demo checklist card (CTA band right column) ────────────────── */
.demo-check-card{background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);padding:28px 28px 24px}
.demo-check-head{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:12px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em}
.demo-live-dot{width:8px;height:8px;background:#4ade80;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(74,222,128,.25);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.25)}50%{box-shadow:0 0 0 6px rgba(74,222,128,.1)}}
.demo-check-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:14px}
.demo-check-list li{display:flex;align-items:flex-start;gap:12px}
.dc-icon{width:22px;height:22px;background:rgba(234,23,68,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.dc-text strong{display:block;font-size:14px;color:#fff;font-weight:700;line-height:1.3}
.dc-text small{font-size:12px;color:rgba(255,255,255,.72);line-height:1.4}
.demo-check-clients{border-top:1px solid rgba(255,255,255,.1);padding-top:18px}
.dc-label{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
.dc-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dc-logos img{height:18px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.4;transition:opacity .18s}
.dc-logos img:hover{opacity:.75}
/* ── remove old direct-btns style when not in mia context ────────── */

.cta-direct-btns{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;gap:10px}
.cta-direct-btns h4{font-size:15px;color:#fff;margin:0 0 14px;font-weight:700}
.cta-wa-btn,.cta-email-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:var(--r-md);font-weight:700;font-size:14px;text-decoration:none;transition:all .18s;font-family:inherit;box-sizing:border-box;border:none}
.cta-wa-btn{background:#25d366;color:#fff}
.cta-wa-btn:hover{background:#1ebe5d;color:#fff;transform:translateY(-2px)}
.cta-email-btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)!important}
.cta-email-btn:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-2px)}
/* Modal variants */
.modal-contact-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.modal-contact-btns .cta-wa-btn{border-radius:var(--r-pill);padding:16px}
.modal-contact-btns .cta-email-btn{background:var(--bg-soft)!important;color:var(--fg)!important;border:1px solid var(--border-strong)!important;border-radius:var(--r-pill);padding:16px}
.modal-contact-btns .cta-email-btn:hover{background:var(--accent-soft)!important;color:var(--accent)!important;border-color:var(--accent)!important;transform:translateY(-2px)}
.modal-contact-note{font-size:12px;color:var(--fg-muted);text-align:center;margin-top:12px;line-height:1.5}

/* ───── Footer — estilo Paymeter ───── */
.ft{background:var(--ipark-blue);color:rgba(255,255,255,.6);padding:72px 0 0;border-top:1px solid rgba(255,255,255,.07);position:relative}
.ft::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(234,23,68,.5),transparent)}
.ft-grid{max-width:1320px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.3fr;gap:40px}
@media(max-width:1100px){.ft-grid{grid-template-columns:1.5fr 1fr 1fr;gap:28px}}
@media(max-width:700px){.ft-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:480px){.ft-grid{grid-template-columns:1fr;gap:20px}}
.ft-brand .ft-logo{margin-bottom:12px}
.ft-brand p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.58);max-width:280px;margin:0 0 18px}
/* Social icons — cuadrado redondeado como Paymeter */
.ft-social{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.ft-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);text-decoration:none;transition:all .18s}
.ft-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
/* Paymeter CTA — rojo sólido como "Solicitar demo" */
.ft-pm-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:var(--accent);border:0;border-radius:14px;text-decoration:none;color:#fff;transition:all .2s;margin-top:20px;box-shadow:0 4px 16px rgba(234,23,68,.35)}
.ft-pm-card:hover{background:#c8102e;color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(234,23,68,.5)}
.ft-pm-eyebrow{display:block;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:3px}
.ft-pm-title{font-size:14px;font-weight:800;color:#fff;line-height:1.2}
.ft-pm-arrow{font-size:20px;color:#fff;transition:transform .2s;flex-shrink:0}
.ft-pm-card:hover .ft-pm-arrow{transform:translateX(4px)}
.ft-pm-sub{display:none}
/* Columnas nav */
.ft-col h5{color:#fff;font-size:11px;font-weight:700;margin:0 0 16px;letter-spacing:.1em;text-transform:uppercase}
.ft-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ft-col ul a{font-size:13.5px;color:rgba(255,255,255,.58);text-decoration:none;transition:color .15s}
.ft-col ul a:hover{color:#fff}
.ft-soon{display:inline-flex;margin-left:5px;padding:2px 6px;border:1px solid rgba(234,23,68,.28);border-radius:999px;background:rgba(234,23,68,.08);color:#ff6987;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
/* Contact cards — glass sutil como Paymeter */
.ft-contact-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ft-contact-card{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;text-decoration:none;color:rgba(255,255,255,.88);transition:all .15s}
.ft-contact-card:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);transform:translateX(2px);color:#fff}
.ft-contact-ic{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.75)}

.ft-contact-info strong{display:block;font-size:13px;font-weight:700;color:#fff;line-height:1.2}
/* Footer bottom bar */
.ft-bot{max-width:1320px;margin:56px auto 0;padding:22px 28px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,.65)}
.ft-bot .powered-txt{color:rgba(255,255,255,.35)}
.ft-bot .powered-txt b{color:rgba(255,255,255,.6)}

/* ───── Demo Modal ───── */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,25,39,.75);backdrop-filter:blur(8px)}
.modal.open{display:flex;animation:modalFade .25s ease}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal-card{width:100%;max-width:540px;background:#fff;border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-xl);position:relative;max-height:90vh;overflow-y:auto;animation:modalRise .3s cubic-bezier(.16,1,.3,1)}
@keyframes modalRise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.modal-card .close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--bg-soft);border:0;cursor:pointer;font-size:16px;color:var(--fg);display:flex;align-items:center;justify-content:center;font-family:inherit}
.modal-card .close:hover{background:var(--accent-soft);color:var(--accent)}
.modal-card h3{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--fg);margin:0 0 8px}
.modal-card .sub{font-size:14px;color:var(--fg-muted);margin:0 0 24px;line-height:1.5}
.modal-card .field{margin-bottom:14px}
.modal-card .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:6px}
.modal-card .field input,.modal-card .field select,.modal-card .field textarea{width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:12px 14px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color var(--t-fast)}
.modal-card .field input:focus,.modal-card .field select:focus,.modal-card .field textarea:focus{border-color:var(--accent)}
.modal-card .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-card button[type=submit]{width:100%;margin-top:8px;background:var(--accent);color:#fff;border:0;padding:16px;border-radius:var(--r-pill);font-weight:800;font-size:15px;cursor:pointer;box-shadow:var(--shadow-red);font-family:inherit}
.modal-card .legal{margin-top:14px;font-size:11px;color:var(--fg-muted);text-align:center}

/* ─────────────────────────────────────────────
   MIA — Capa conversacional iPark
   ───────────────────────────────────────────── */



/* MIA solution card (inside sol-grid) */
.sol-card-mia {
  background: linear-gradient(135deg, var(--ipark-blue) 0%, #0c2d45 100%);
  border-color: rgba(212,255,58,.3) !important;
  color: #fff;
}
.sol-card-mia .ic {
  background: rgba(212,255,58,.12) !important;
  color: #d4ff3a !important;
}
.sol-card-mia .tag { color: #d4ff3a !important; }
.sol-card-mia h3 { color: #fff; }
.sol-card-mia p { color: rgba(255,255,255,.72); }
.sol-card-mia .arrow { color: #d4ff3a !important; }

/* MIA page hero */
.mia-hero {
  background: var(--ipark-blue);
  padding: 72px 0 60px;
}
.mia-hero-inner { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.mia-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #d4ff3a;
}
.mia-hero h1 { font-size: clamp(32px,5vw,52px); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.mia-hero h1 span { color: #d4ff3a; }
.mia-hero .mia-lead { font-size: 18px; color: rgba(255,255,255,.72); line-height: 1.55; max-width: 600px; margin: 0; }
.mia-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-mia-primary {
  background: var(--accent); color: #fff; padding: 14px 28px;
  border-radius: var(--r-pill); font-weight: 700; font-size: 15px;
  text-decoration: none; transition: background var(--t-base), transform var(--t-base);
}
.btn-mia-primary:hover { background: var(--ipark-red-600); color: #fff; transform: translateY(-2px); }
.btn-mia-wa {
  background: #25d366; color: #fff; padding: 14px 24px;
  border-radius: var(--r-pill); font-weight: 700; font-size: 15px;
  text-decoration: none; display: flex; align-items: center; gap: 8px;
  transition: background var(--t-base);
}
.btn-mia-wa:hover { background: #1ebe5d; color: #fff; }
.btn-mia-ghost {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); padding: 14px 24px;
  border-radius: var(--r-pill); font-weight: 700; font-size: 15px;
  text-decoration: none; border: 1px solid rgba(255,255,255,.15);
  transition: background var(--t-base);
}
.btn-mia-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* MIA capability cards */
.mia-caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.mia-cap-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: default;
}
.mia-cap-card:hover {
  border-color: var(--border);
  border-top-color: #d4ff3a;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.mia-cap-ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--ipark-blue);
  display: flex; align-items: center; justify-content: center;
  color: #d4ff3a;
  transition: box-shadow var(--t-base);
}
.mia-cap-card:hover .mia-cap-ic {
  box-shadow: 0 4px 16px rgba(212,255,58,.18);
}
.mia-cap-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mia-cap-card h4 { font-size: 16px; font-weight: 800; margin: 0; color: var(--ipark-blue); }
.mia-cap-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0; }

/* MIA channel pills */
.mia-channels { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.mia-channel {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--r-pill); padding: 11px 20px;
  font-size: 14px; font-weight: 700; color: var(--fg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.mia-channel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* WhatsApp — green accent */
.mia-channel--wa { border-color: rgba(37,211,102,.35); color: #1a7a3a; }
.mia-channel--wa svg { color: #25d366; }
.mia-channel--wa:hover { border-color: #25d366; box-shadow: 0 8px 24px rgba(37,211,102,.18); }
/* QR / Web — blue accent */
.mia-channel--web { border-color: rgba(3,25,39,.2); color: var(--ipark-blue); }
.mia-channel--web svg { color: var(--ipark-blue); }
.mia-channel--web:hover { border-color: var(--ipark-blue); box-shadow: 0 8px 24px rgba(3,25,39,.12); }
/* Paymeter app — cherry red accent */
.mia-channel--app { border-color: rgba(234,23,68,.25); color: var(--accent); }
.mia-channel--app svg { color: var(--accent); }
.mia-channel--app:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(234,23,68,.14); }
/* Voice — coming soon (muted) */
.mia-channel--soon { border-color: var(--border); color: var(--fg-muted); opacity: .75; }
.mia-channel--soon svg { color: var(--fg-subtle); }
.mia-channel--soon:hover { transform: none; box-shadow: var(--shadow-sm); }
/* "Próximamente" badge inside voice pill */
.mia-channel-badge {
  display: inline-flex; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 2px 8px;
  font-size: 10px; font-weight: 700; color: var(--fg-muted);
  letter-spacing: .04em; text-transform: uppercase; margin-left: 2px;
}


/* ── MIA Conversational Block ─────────────────────────────────────────────── */
.mia-block{background:var(--ipark-blue);padding:var(--sp-9) 0;position:relative;overflow:hidden}
.mia-block::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 85% at 105% 50%,rgba(234,23,68,.2) 0%,transparent 65%);pointer-events:none}
.mia-block-grid{position:relative;display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center}
@media(max-width:960px){.mia-block-grid{grid-template-columns:1fr;gap:44px}}
/* Left */
.mia-block-eco-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(212,255,58,.1);border:1px solid rgba(212,255,58,.25);border-radius:var(--r-pill);padding:5px 14px;font-size:11px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em;margin-bottom:22px}
.mia-block-eco-tag strong{color:#d4ff3a;font-weight:800}
.mia-block h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 16px}
.mia-block .mia-lead{font-size:16px;color:rgba(255,255,255,.7);line-height:1.65;margin:0 0 28px;max-width:490px}
.mia-bl-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:10px}
.mia-bl-list li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.mia-bl-list li::before{content:"";width:7px;height:7px;background:#d4ff3a;border-radius:50%;flex-shrink:0}
.mia-block-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* Right — conversation card */
.mia-convo-card{background:rgba(255,255,255,.055);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(234,23,68,.18);border-radius:20px;overflow:hidden}
.mia-convo-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035)}
.mia-convo-head img{width:34px;height:34px;border-radius:10px;flex-shrink:0}
.mia-convo-hinfo strong{display:block;font-size:13px;font-weight:800;color:#fff;line-height:1.2}
.mia-online{font-size:11px;color:#4ade80;font-weight:600;letter-spacing:.02em}
.mia-convo-msgs{padding:18px;display:flex;flex-direction:column;gap:10px}
.mia-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.5}
.mia-msg-user{align-self:flex-end;background:rgba(255,255,255,.14);color:#fff;border-bottom-right-radius:4px}
.mia-msg-mia{align-self:flex-start;background:rgba(234,23,68,.14);border:1px solid rgba(234,23,68,.22);color:rgba(255,255,255,.9);border-bottom-left-radius:4px;display:flex;flex-direction:column;gap:9px}
.mia-pay-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:var(--r-pill);padding:6px 14px;font-size:12px;font-weight:800;align-self:flex-start;cursor:default}
.mia-msg-ok{color:#4ade80;font-weight:700}
.mia-convo-foot{padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mia-foot-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.07em;margin-right:4px}
.mia-ch-tag{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);border-radius:var(--r-pill);padding:3px 10px}
.mia-ch-soon{color:rgba(255,255,255,.28);background:transparent;border:1px solid rgba(255,255,255,.1)}
.mia-eco-stmt{margin-top:14px;text-align:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.07em}
.mia-eco-stmt strong{color:rgba(255,255,255,.65);font-weight:800}
.mia-eco-dot{margin:0 6px;opacity:.35}
/* MIA conversation card — mobile legibility */
@media(max-width:480px){
  .mia-convo-msgs{padding:14px}
  .mia-msg{font-size:14px;padding:10px 12px}
  .mia-convo-foot{padding:10px 14px;gap:5px}
  .mia-ch-tag{font-size:10px;padding:3px 8px}
  .mia-convo-head{padding:12px 14px}
  .mia-block .mia-lead{font-size:15px}
  .mia-block h2{font-size:clamp(1.6rem,7vw,2.2rem)}
}
/* demo-check-card styles are defined once above, in the CTA band section */

/* ── Footer v2.0 — Ecosistema ─────────────────────────── */
.ft-grid-v2{grid-template-columns:1.7fr 1fr 1fr 1.3fr}
@media(max-width:1100px){.ft-grid-v2{grid-template-columns:1.5fr 1fr 1fr;gap:28px}}
@media(max-width:700px) {.ft-grid-v2{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:480px) {.ft-grid-v2{grid-template-columns:1fr;gap:20px}}

.ft-tagline{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 10px}

.ft-eco{display:flex;flex-direction:column}
.ft-eco-items{display:flex;flex-direction:column;gap:2px;margin-top:0;padding:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.ft-eco-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;text-decoration:none;color:rgba(255,255,255,.78);transition:transform .18s ease,background .18s ease,border-color .18s ease;border:1px solid transparent}
.ft-eco-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;transform:translateX(3px)}
.ft-eco-item:hover .ft-eco-logo{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1)}
.ft-eco-item.ft-eco-coming{cursor:default;opacity:.7}
.ft-eco-item.ft-eco-coming:hover{background:transparent;border-color:transparent}
.ft-eco-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ft-eco-logo{box-sizing:border-box;width:34px;height:34px;flex-shrink:0;object-fit:contain;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:5px;transition:background .18s ease,border-color .18s ease}
.ft-eco-item div{display:flex;flex-direction:column;gap:1px}
.ft-eco-item strong{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px}
.ft-eco-item span{font-size:11px;color:rgba(255,255,255,.45);line-height:1.3}
.ft-eco-badge{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:1px 7px;color:rgba(255,255,255,.5);white-space:nowrap}