:root {
    --bg:#fff;
    --surface:#f4f6fa;
    --fg:#031927;
    --fg-muted:#5a5f66;
    --border:#e3e8ef;
    --border-strong:#c8c7c7;
    --accent:#ea1744;
    --accent-hover:#c2113a;
    --accent-50:#fff1f4;
    --accent-100:#ffe0e7;
    --accent-200:#ffc2cf;
    --accent-300:#fb8ea4;
    /* Status tokens */
    --success-bg:#e8f7ee;
    --success-fg:#0e8a4a;
    --success-border:#a8e0bd;
    --warning-bg:#fff3e0;
    --warning-fg:#b25a00;
    --warning-border:#ffd6a0;
    --info-bg:#e6f0ff;
    --info-fg:#1554b5;
    --info-border:#b8d0f5;
    /* Elevation */
    --shadow-sm:0 1px 2px rgba(3,25,39,.06),0 1px 3px rgba(3,25,39,.08);
    --shadow-md:0 4px 6px rgba(3,25,39,.05),0 10px 15px rgba(3,25,39,.08);
    --shadow-lg:0 10px 20px rgba(3,25,39,.08),0 20px 40px rgba(3,25,39,.12);
    --shadow-accent:0 10px 30px rgba(234,23,68,.24);
    /* Radii */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:9999px;
    /* Motion */
    --ease:cubic-bezier(.2,.8,.2,1);
    --dur-fast:.15s; --dur:.22s; --dur-slow:.35s;
  }
  /* Text rendering baseline */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  /* Accessible focus ring */
  :where(a,button,input,select,textarea,[tabindex]):focus{outline:none}
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:4px;
  }
  /* Respect reduced motion */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  }
  /* Status pills (reusable) */
  .pill-success{background:var(--success-bg);color:var(--success-fg);border:1px solid var(--success-border)}
  .pill-warning{background:var(--warning-bg);color:var(--warning-fg);border:1px solid var(--warning-border)}
  .pill-info{background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-border)}
  /* Status dot (live indicator) */
  .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
  .dot-live{background:var(--success-fg);box-shadow:0 0 0 3px rgba(14,138,74,.18);animation:dot-pulse 1.8s var(--ease) infinite}
  @keyframes dot-pulse{0%,100%{box-shadow:0 0 0 3px rgba(14,138,74,.18)}50%{box-shadow:0 0 0 6px rgba(14,138,74,.04)}}
  /* PAGE SWITCHER (solo en preview) */
  .page-switcher{
    position:fixed;top:12px;right:12px;z-index:100;
    background:rgba(3,25,39,.92);backdrop-filter:blur(10px);
    border-radius:9999px;padding:6px;display:flex;gap:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .page-switcher a{
    padding:8px 14px;font-size:12px;font-weight:600;color:#fff;
    border-radius:9999px;transition:background .2s;
  }
  .page-switcher a:hover{background:rgba(255,255,255,.1)}
  .page-switcher a.active{background:var(--accent)}

  /* NAV MAIN PILL (dark pill inline en header) */
  .nav .nav-main{
    background:#031927;
    border-radius:9999px;padding:5px;
    display:inline-flex;flex-wrap:nowrap;gap:2px;
    list-style:none;margin:0;font-size:13px;
    box-shadow:0 6px 20px rgba(3,25,39,.18), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .nav .nav-main li{display:flex}
  .nav .nav-main a{
    padding:9px 16px;font-size:13px;font-weight:600;color:#fff;
    border-radius:9999px;transition:background .2s, color .2s;
    display:inline-flex;align-items:center;white-space:nowrap;line-height:1;
  }
  .nav .nav-main a:hover{background:rgba(255,255,255,.08);color:#fff}
  .nav .nav-main a.active{background:var(--accent);box-shadow:0 4px 14px rgba(234,23,68,.45)}
  @media(max-width:1180px){.nav .nav-main a{padding:8px 13px;font-size:12.5px}}
  @media(max-width:980px){.nav .nav-main{display:none}}

  /* HERO PAGE (calle/garaje) */
  .hero-page{padding:96px 0 64px;background:#fff;border-bottom:1px solid #f1f1f1}
  .hero-page-grid{max-width:1120px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
  @media(max-width:900px){.hero-page-grid{grid-template-columns:1fr}}
  .hero-page h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-top:16px}
  .hero-page h1 .accent{color:var(--accent)}
  .hero-page p.lead{margin-top:20px;font-size:18px;color:var(--fg-muted);max-width:520px;line-height:1.55}

  /* PLACEHOLDER para imágenes pendientes */
  .img-placeholder{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f3f3f3 10px,#f3f3f3 20px);
    border:2px dashed var(--border);border-radius:20px;
    min-height:360px;padding:24px;text-align:center;
  }
  .img-placeholder .filename{
    font-family:'SF Mono',Menlo,monospace;font-size:13px;font-weight:600;
    color:var(--accent);background:#fff;padding:8px 14px;border-radius:9999px;
    border:1px solid var(--accent-100);
  }
  .img-placeholder .desc{margin-top:12px;font-size:13px;color:var(--fg-muted);max-width:240px;line-height:1.4}
  .img-placeholder.tall{min-height:500px}

  /* WEBAPP (pay flows) */
  .app-shell{background:var(--surface);display:flex;flex-direction:column}
  .app-header{
    background:#fff;border-bottom:1px solid var(--accent-100);
    padding:14px 20px;display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:20;
  }
  .app-header .logo{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
  .app-header .logo .pay{color:var(--accent)}
  .app-header .logo small{font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted)}
  .app-header .lang{display:flex;gap:4px;background:var(--accent-50);padding:4px;border-radius:9999px}
  .app-header .lang a{padding:4px 10px;font-size:11px;font-weight:600;color:var(--fg-muted);border-radius:9999px}
  .app-header .lang a.active{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .app-progress{height:3px;background:var(--accent-100);position:sticky;top:57px;z-index:19}
  .app-progress>span{display:block;height:100%;background:var(--accent);transition:width .4s}

  .app-main{flex:1;display:flex;justify-content:center;padding:32px 20px 48px}
  .app-container{width:100%;max-width:520px}
  .app-container.wide{max-width:680px}
  .app-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--fg-muted);margin-bottom:20px;text-decoration:none}
  .app-back:hover{color:var(--accent)}

  .app-title{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;letter-spacing:-.01em;line-height:1.15}
  .app-subtitle{margin-top:8px;color:var(--fg-muted);font-size:15px;line-height:1.5}

  /* CHOICE CARDS (pantalla intermedia) */
  .choice-cards{display:grid;gap:16px;margin-top:32px}
  .choice-card{
    background:#fff;border:1px solid var(--accent-100);border-radius:24px;
    padding:28px;display:flex;align-items:center;gap:20px;
    text-decoration:none;color:var(--fg);
    transition:all .25s;
  }
  .choice-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 20px 40px rgba(234,23,68,.14)}
  .choice-card .big{
    flex-shrink:0;width:64px;height:64px;border-radius:20px;
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:30px;
  }
  .choice-card h3{font-size:20px;font-weight:700}
  .choice-card p{margin-top:4px;font-size:14px;color:var(--fg-muted);line-height:1.5}
  .choice-card .arrow{margin-left:auto;color:var(--accent);font-size:24px;font-weight:700}

  /* FORM STEPS */
  .form-card{
    background:#fff;border:1px solid var(--accent-100);border-radius:24px;
    padding:28px;margin-top:20px;
  }
  .form-card .label-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .form-card .label-num{
    width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
    font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;
  }
  .form-card label.main{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
  .form-card .hint{font-size:12px;color:var(--fg-muted);margin-top:6px}

  /* INPUTS */
  .input-plate{
    display:flex;gap:10px;align-items:center;background:#fafafa;border:1px solid var(--border);
    border-radius:16px;padding:12px 16px;transition:border-color .2s,background .2s;
  }
  .input-plate:focus-within{border-color:var(--accent);background:#fff}
  .input-plate .flag{font-size:20px}
  .input-plate select{background:transparent;border:0;font-size:14px;font-weight:600;color:var(--fg-muted);outline:none;cursor:pointer}
  .input-plate input{
    flex:1;background:transparent;border:0;outline:none;
    font-family:'SF Mono',Menlo,monospace;font-size:22px;font-weight:700;
    letter-spacing:.1em;color:var(--fg);text-transform:uppercase;min-width:0;
  }
  .input-plate input::placeholder{color:#c8c7c7;letter-spacing:.05em}

  /* LOCKED feature card (incentivar app) */
  .locked-card{position:relative}
  .locked-card .label-row{justify-content:flex-start}
  .lock-pill{
    margin-left:auto;background:var(--accent-50);color:var(--accent);
    border:1px solid var(--accent-100);padding:4px 12px;border-radius:9999px;
    font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  }
  .extras.locked{opacity:.5;pointer-events:none;filter:grayscale(.3)}
  .lock-cta{
    margin-top:18px;padding:18px;background:linear-gradient(135deg,var(--fg) 0%,#0a2438 100%);
    border-radius:16px;color:#fff;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  }
  .lock-cta p{flex:1;font-size:13px;line-height:1.5;color:rgba(255,255,255,.85);min-width:200px}
  .lock-cta strong{color:#fff;display:block;margin-bottom:2px;font-size:14px}
  .lock-btn{
    background:var(--accent);color:#fff;padding:12px 22px;border-radius:9999px;
    font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;
    transition:background .2s,transform .2s;
  }
  .lock-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}

  /* SIGNUP — split layout */
  .signup-split{
    display:grid;grid-template-columns:1.1fr 1fr;gap:0;
    max-width:1320px;margin:32px auto;padding:0 28px;
    border-radius:24px;overflow:hidden;
    box-shadow:0 24px 60px rgba(3,25,39,.08);
    background:#fff;border:1px solid var(--border);
  }
  @media(max-width:900px){.signup-split{grid-template-columns:1fr;margin:16px;padding:0}}
  .signup-form-side{padding:56px 56px;display:flex;flex-direction:column;justify-content:center;background:#fff}
  @media(max-width:600px){.signup-form-side{padding:32px 24px}}
  .signup-hero-side{
    background:linear-gradient(135deg,var(--fg) 0%,#0a2438 100%);
    color:#fff;padding:64px 48px;display:flex;flex-direction:column;justify-content:center;
    position:relative;overflow:hidden;
  }
  .signup-hero-side::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(700px 400px at 20% 100%,rgba(234,23,68,.25),transparent 60%);
  }
  .signup-hero-side > *{position:relative;z-index:1}
  @media(max-width:900px){.signup-hero-side{display:none}}
  .signup-hero-side h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-top:16px}
  .signup-hero-side p.lead{margin-top:16px;color:rgba(255,255,255,.75);font-size:15px;line-height:1.6;max-width:380px}
  .signup-perks{margin-top:32px;display:flex;flex-direction:column;gap:14px}
  .signup-perks .perk{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,.85)}
  .signup-perks .perk .ic{
    width:30px;height:30px;border-radius:9px;background:rgba(234,23,68,.18);
    border:1px solid rgba(234,23,68,.4);display:flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:14px;
  }
  .signup-perks strong{display:block;color:#fff;font-weight:700;font-size:14px;margin-bottom:2px}

  .signup-form{max-width:440px}
  .signup-form .form-group{margin-top:18px}
  .signup-form .form-group label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px}
  .signup-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:480px){.signup-form .form-row{grid-template-columns:1fr}}
  .signup-form .checkbox-row{
    margin-top:24px;display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--fg-muted);line-height:1.5;
  }
  .signup-form .checkbox-row input{margin-top:3px}
  .signup-form .checkbox-row a{color:var(--accent);font-weight:600;text-decoration:underline}
  .signup-social{display:flex;flex-direction:column;gap:10px;margin-top:8px}
  .signup-social button{
    width:100%;padding:13px;border:1px solid var(--border);background:#fff;
    border-radius:14px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:10px;
    transition:border-color .2s,background .2s;
  }
  .signup-social button:hover{border-color:var(--accent);background:var(--accent-50)}
  .signup-divider{
    display:flex;align-items:center;gap:14px;margin:24px 0 8px;
    font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.15em;
  }
  .signup-divider::before,.signup-divider::after{content:"";flex:1;height:1px;background:var(--border)}
  .signup-bottom{margin-top:20px;font-size:13px;color:var(--fg-muted);text-align:center}
  .signup-bottom a{color:var(--accent);font-weight:600;text-decoration:none}

  .input-text{
    width:100%;background:#fafafa;border:1px solid var(--border);
    border-radius:14px;padding:14px 16px;font-size:15px;font-family:inherit;
    outline:none;transition:border-color .2s,background .2s;
  }
  .input-text:focus{border-color:var(--accent);background:#fff}

  /* ZONE CARD (detectada) */
  .zone-card{
    background:linear-gradient(135deg,#eef6ff,#dce9ff);
    border:1px solid #b8d4ff;border-radius:16px;padding:16px 18px;margin-top:12px;
    display:flex;align-items:center;gap:14px;
  }
  .zone-card .dot{width:14px;height:14px;border-radius:50%;background:#2563eb;flex-shrink:0}
  .zone-card strong{display:block;font-size:15px;font-weight:700}
  .zone-card small{display:block;font-size:12px;color:#4b6fa8;margin-top:2px}
  .zone-card .change{margin-left:auto;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none}

  /* CHIPS */
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .chip{
    background:#fafafa;border:1px solid var(--border);border-radius:9999px;
    padding:9px 16px;font-size:13px;font-weight:600;color:var(--fg);
    cursor:pointer;transition:all .15s;
  }
  .chip:hover{border-color:var(--accent);color:var(--accent)}
  .chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

  .time-info{
    margin-top:14px;padding:12px 16px;background:var(--accent-50);
    border:1px solid var(--accent-100);border-radius:12px;
    display:flex;justify-content:space-between;align-items:center;font-size:13px;
  }
  .time-info strong{color:var(--accent);font-weight:700}

  /* AMOUNT BREAKDOWN */
  .amount-box{
    background:var(--fg);color:#fff;border-radius:20px;padding:24px;margin-top:20px;
  }
  .amount-box .rows{display:flex;flex-direction:column;gap:8px}
  .amount-box .row{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.7)}
  .amount-box .total{
    margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .amount-box .total span{font-size:13px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
  .amount-box .total strong{font-size:36px;font-weight:700;color:var(--accent);letter-spacing:-.02em}

  /* PAYMENT METHODS */
  .pm-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
  .pm-item{
    display:flex;align-items:center;gap:14px;padding:14px 16px;
    background:#fafafa;border:1px solid var(--border);border-radius:14px;
    cursor:pointer;transition:all .15s;
  }
  .pm-item:hover{border-color:var(--accent)}
  .pm-item.selected{background:var(--accent-50);border-color:var(--accent)}
  .pm-item .pm-ic{
    width:40px;height:28px;border-radius:6px;background:#fff;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
  }
  .pm-item .pm-name{font-size:14px;font-weight:600;flex:1}
  .pm-item .pm-last{font-size:12px;color:var(--fg-muted)}
  .pm-item .radio{
    width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .pm-item.selected .radio{border-color:var(--accent)}
  .pm-item.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

  /* EXTRAS (checkboxes) */
  .extras{display:flex;flex-direction:column;gap:10px;margin-top:12px}
  .extra{
    display:flex;align-items:flex-start;gap:14px;padding:14px 16px;
    background:#fafafa;border:1px solid var(--border);border-radius:14px;cursor:pointer;
    transition:all .15s;
  }
  .extra:hover{border-color:var(--accent)}
  .extra.checked{background:var(--accent-50);border-color:var(--accent)}
  .extra .check{
    width:22px;height:22px;border-radius:7px;border:2px solid var(--border);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:transparent;font-weight:700;
  }
  .extra.checked .check{background:var(--accent);border-color:var(--accent);color:#fff}
  .extra.checked .check::after{content:"✓"}
  .extra strong{display:block;font-size:14px;font-weight:700}
  .extra small{display:block;font-size:12px;color:var(--fg-muted);margin-top:2px;line-height:1.4}

  /* PAY BUTTON */
  .pay-btn{
    width:100%;background:var(--accent);color:#fff;border:0;cursor:pointer;
    padding:18px;border-radius:9999px;font-size:17px;font-weight:700;font-family:inherit;
    margin-top:20px;box-shadow:0 16px 32px rgba(234,23,68,.25);
    transition:transform .2s,background .2s;
  }
  .pay-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}

  .trust-row{
    display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
    margin-top:20px;font-size:12px;color:var(--fg-muted);
  }
  .trust-row span::before{content:"🔒 ";font-size:11px}
  .trust-row span:nth-child(2)::before{content:"✨ "}
  .trust-row span:nth-child(3)::before{content:"🛡 "}

  /* TABS (modo A/B en garaje) */
  .tabs{
    display:flex;gap:4px;background:#fff;border:1px solid var(--accent-100);
    border-radius:14px;padding:4px;margin-top:20px;
  }
  .tab{
    flex:1;padding:12px;text-align:center;font-size:13px;font-weight:600;color:var(--fg-muted);
    border-radius:10px;cursor:pointer;transition:all .15s;
  }
  .tab.active{background:var(--accent);color:#fff}

  /* SESSION FOUND (garaje por matrícula) */
  .session-found{
    background:linear-gradient(135deg,#e8f7ee,#d1f0de);
    border:1px solid #a8e0bd;border-radius:16px;padding:20px;margin-top:12px;
  }
  .session-found .sf-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#0e8a4a}
  .session-found .sf-head::before{content:"●";font-size:14px}
  .session-found .sf-grid{
    margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
  .session-found .sf-grid > div{font-size:12px}
  .session-found .sf-grid small{display:block;color:#4a7a5c;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
  .session-found .sf-grid strong{font-size:15px;color:var(--fg)}

  /* SCAN BUTTON (garaje modo ticket) */
  .scan-btn{
    width:100%;padding:14px;background:var(--fg);color:#fff;border:0;border-radius:14px;
    font-size:14px;font-weight:600;margin-top:12px;cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }

  /* UPSELL card */
  .upsell{
    background:linear-gradient(135deg,var(--fg) 0%,#0a2438 100%);
    color:#fff;border-radius:20px;padding:24px;margin-top:28px;
    display:flex;align-items:center;gap:18px;
  }
  .upsell .star{font-size:32px}
  .upsell h4{font-size:15px;font-weight:700;color:#fff}
  .upsell p{margin-top:2px;font-size:12px;color:rgba(255,255,255,.7)}
  .upsell a{margin-left:auto;background:var(--accent);color:#fff;padding:10px 18px;border-radius:9999px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}

  /* APP FOOTER */
  .app-footer{
    padding:24px 20px 32px;text-align:center;font-size:11px;color:var(--fg-muted);
    border-top:1px solid var(--accent-100);background:#fff;
  }
  .app-footer a{color:var(--fg-muted);text-decoration:underline;margin:0 6px}

  /* HEADER secondary button */
  .cta-ghost{
    background:transparent;color:var(--fg);font-weight:600;font-size:14px;
    padding:9px 16px;border-radius:9999px;border:1px solid var(--border);
    cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
    transition:all .2s;
  }
  .cta-ghost:hover{border-color:var(--accent);color:var(--accent)}
  @media(max-width:768px){.cta-ghost{display:none}}

  /* NO-APP BAND (después del hero) */
  .noapp-band{
    background:linear-gradient(135deg,var(--accent-50) 0%,#fff 100%);
    border-top:1px solid var(--accent-100);border-bottom:1px solid var(--accent-100);
    padding:56px 0;
  }
  .noapp-inner{max-width:1120px;margin:0 auto;padding:0 20px}
  .noapp-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
  .noapp-head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;max-width:600px}
  .noapp-head p{margin-top:8px;color:var(--fg-muted);max-width:540px;font-size:15px}
  .noapp-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
  @media(max-width:700px){.noapp-cards{grid-template-columns:1fr}}
  .noapp-card{
    background:#fff;border:1px solid var(--accent-100);border-radius:24px;
    padding:28px 32px;display:flex;align-items:center;gap:20px;
    text-decoration:none;color:var(--fg);
    transition:transform .25s,border-color .25s,box-shadow .25s;
  }
  .noapp-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 32px rgba(234,23,68,.12)}
  .noapp-card .big{
    flex-shrink:0;width:60px;height:60px;border-radius:18px;
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:28px;
  }
  .noapp-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
  .noapp-card p{margin-top:4px;font-size:14px;color:var(--fg-muted);line-height:1.45}
  .noapp-card .arrow{margin-left:auto;color:var(--accent);font-size:22px;font-weight:700;flex-shrink:0}

  /* MULTICANAL FOOTER BAND */
  .multichannel{
    background:#0a2438;color:#fff;border-top:1px solid rgba(255,255,255,.06);
    padding:40px 0;
  }
  .multichannel-inner{max-width:1120px;margin:0 auto;padding:0 20px}
  .multichannel h4{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .multichannel-title{margin-top:8px;font-size:22px;font-weight:700;color:#fff}
  .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
  @media(max-width:700px){.channels{grid-template-columns:repeat(2,1fr)}}
  .channel{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
    border-radius:16px;padding:20px;text-decoration:none;color:#fff;
    display:flex;gap:14px;align-items:center;transition:all .2s;
  }
  .channel:hover{background:rgba(234,23,68,.12);border-color:var(--accent)}
  .channel .ic{font-size:22px}
  .channel strong{display:block;font-size:14px;font-weight:700}
  .channel small{display:block;font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}

  /* HOW IT WORKS steps */
  .hiw{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
  @media(max-width:900px){.hiw{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.hiw{grid-template-columns:1fr}}
  .hiw-step{
    background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px 24px 24px;
    position:relative;
  }
  .hiw-step .n{
    position:absolute;top:-14px;left:24px;
    width:32px;height:32px;border-radius:50%;
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;
  }
  .hiw-step h4{margin-top:8px;font-size:17px;font-weight:700}
  .hiw-step p{margin-top:8px;font-size:14px;color:var(--fg-muted);line-height:1.55}

  /* USP BIG */
  .usp-big{
    background:linear-gradient(135deg,var(--fg) 0%,#0a2438 100%);
    color:#fff;border-radius:32px;padding:56px 48px;
    display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;
    position:relative;overflow:hidden;
  }
  .usp-big::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(800px 400px at 100% 100%,rgba(234,23,68,.25),transparent 60%);
  }
  @media(max-width:900px){.usp-big{grid-template-columns:1fr;padding:40px 28px}}
  .usp-big .tag{
    display:inline-block;background:rgba(234,23,68,.18);border:1px solid rgba(234,23,68,.4);
    color:#ffc2cf;padding:6px 14px;border-radius:9999px;font-size:11px;
    font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  }
  .usp-big h3{margin-top:16px;font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:700;line-height:1.1}
  .usp-big p{margin-top:16px;color:rgba(255,255,255,.75);font-size:16px;line-height:1.6;max-width:480px}

  /* MODES 2-col (LPR vs QR) */
  .modes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
  @media(max-width:900px){.modes{grid-template-columns:1fr}}
  .mode-card{
    background:#fff;border:1px solid var(--border);border-radius:24px;padding:36px;
  }
  .mode-card .badge-mini{
    display:inline-block;background:var(--accent-50);color:var(--accent);
    border:1px solid var(--accent-100);padding:4px 12px;border-radius:9999px;
    font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  }
  .mode-card h3{margin-top:16px;font-size:24px;font-weight:700}
  .mode-card p{margin-top:10px;color:var(--fg-muted);font-size:15px;line-height:1.6}
  .mode-card ul{margin-top:20px;list-style:none;display:flex;flex-direction:column;gap:10px}
  .mode-card ul li{font-size:14px;display:flex;gap:10px;align-items:flex-start}
  .mode-card ul li::before{content:"✓";color:var(--accent);font-weight:700}

  /* FAQ */
  .faq{display:flex;flex-direction:column;gap:12px;margin-top:40px;max-width:760px}
  .faq details{
    background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px 24px;
  }
  .faq summary{font-size:16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .faq summary::after{content:"+";color:var(--accent);font-size:22px;font-weight:400}
  .faq details[open] summary::after{content:"−"}
  .faq details p{margin-top:12px;color:var(--fg-muted);font-size:15px;line-height:1.6}

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{font-family:'Poppins',system-ui,sans-serif;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--accent);color:#fff}

  /* HEADER */
  header{
    position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav{max-width:1320px;margin:0 auto;height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:nowrap}
  .nav-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
  .logo{font-size:20px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
  .logo .pay{color:var(--accent)}
  .logo .meter{color:var(--fg)}
  .logo small{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted)}
  .nav ul{list-style:none;display:flex;gap:28px;font-size:14px}
  .nav ul a:hover{color:var(--accent)}
  .cta{
    background:var(--accent);color:#fff;font-weight:600;font-size:13px;
    padding:11px 20px;border-radius:9999px;border:0;cursor:pointer;
    transition:background .2s, transform .2s, box-shadow .2s;
    box-shadow:0 6px 18px rgba(234,23,68,.32);
    line-height:1;white-space:nowrap;
  }
  .cta:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 10px 24px rgba(234,23,68,.42)}
  @media(max-width:768px){.nav ul{display:none}.logo small{display:none}}

  /* HERO */
  .hero{position:relative;overflow:hidden}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:radial-gradient(1200px 600px at 85% -10%, rgba(234,23,68,.06) 0%, transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(3,25,39,.05) 0%, transparent 60%), #fff;
  }
  .hero-grid{
    max-width:1120px;margin:0 auto;padding:80px 20px;
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  }
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;padding:56px 20px}}
  .eyebrow{
    display:inline-block;background:var(--accent-50);color:var(--accent);
    border:1px solid var(--accent-100);
    padding:6px 14px;border-radius:9999px;font-size:11px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;
  }
  h1{
    margin-top:24px;font-size:clamp(2.25rem,5.5vw,4rem);
    font-weight:700;line-height:1.05;letter-spacing:-.02em;
  }
  h1 .accent{color:var(--accent)}
  .subtitle{margin-top:24px;max-width:540px;font-size:18px;color:var(--fg-muted);line-height:1.55}
  .ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
  .btn-primary{
    background:var(--accent);color:#fff;font-weight:600;font-size:16px;
    padding:14px 28px;border-radius:9999px;border:0;cursor:pointer;
    box-shadow:0 12px 24px rgba(234,23,68,.25);
    transition:transform .2s, background .2s;
  }
  .btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
  .btn-secondary{
    background:transparent;color:var(--fg);font-weight:600;font-size:16px;
    padding:14px 28px;border-radius:9999px;border:1px solid var(--border);cursor:pointer;
    transition:border-color .2s;
  }
  .btn-secondary:hover{border-color:var(--fg)}

  /* SCREENSHOT — layout wrapper, frame comes from .iphone */
  .phone{display:inline-block}
  .phone>.iphone{display:block}
  .phone-tilt .iphone{transform:rotate(-3deg);transition:transform .3s}
  .phone-tilt:hover .iphone{transform:rotate(0)}

  /* SECTIONS */
  section.block{padding:96px 0;border-top:1px solid #f1f1f1}
  .container{max-width:1120px;margin:0 auto;padding:0 20px}
  .section-eyebrow{display:inline-block;background:var(--accent-50);color:var(--accent);border:1px solid var(--accent-100);padding:8px 18px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 4px 12px rgba(234,23,68,.06)}
  .section-title{margin-top:18px;font-size:clamp(1.875rem,4vw,2.75rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;max-width:720px}
  .section-lead{margin-top:16px;font-size:18px;color:var(--fg-muted);max-width:640px;line-height:1.55}

  /* CITIES STRIP */
  .cities-strip{
    background:#fff;border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;
    padding:32px 0;
  }
  .cities-strip-inner{
    max-width:1120px;margin:0 auto;padding:0 20px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  }
  .cities-strip small{
    font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);
  }
  .cities-strip ul{
    list-style:none;display:flex;flex-wrap:wrap;gap:36px;align-items:center;
  }
  .cities-strip li{
    font-size:18px;font-weight:600;color:var(--fg);letter-spacing:-.01em;
  }
  .cities-strip li::before{content:"●";color:var(--accent);margin-right:10px;font-size:8px;vertical-align:middle}

  /* PILLARS */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
  @media(max-width:900px){.pillars{grid-template-columns:1fr}}
  .pillar{
    background:#fff;border:1px solid var(--border);border-radius:24px;padding:32px;
    transition:transform .25s, box-shadow .25s;
  }
  .pillar:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(3,25,39,.08)}
  .pillar .icon{
    width:48px;height:48px;border-radius:14px;background:var(--surface);
    display:flex;align-items:center;justify-content:center;font-size:24px;
  }
  .pillar h3{margin-top:20px;font-size:22px;font-weight:700;letter-spacing:-.01em}
  .pillar p{margin-top:10px;color:var(--fg-muted);font-size:15px;line-height:1.6}
  .pillar ul{margin-top:16px;list-style:none;display:flex;flex-direction:column;gap:8px}
  .pillar ul li{font-size:14px;color:var(--fg-secondary,var(--fg));display:flex;gap:8px;align-items:flex-start}
  .pillar ul li::before{content:"→";color:var(--accent);font-weight:700}

  /* ONBOARDING 60s */
  .onboarding{background:var(--accent-50)}
  .onboarding-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center;margin-top:48px}
  @media(max-width:900px){.onboarding-grid{grid-template-columns:1fr;gap:40px}}
  .steps{display:flex;flex-direction:column;gap:24px}
  .step{display:flex;gap:18px;align-items:flex-start}
  .step-num{
    flex-shrink:0;width:40px;height:40px;border-radius:50%;
    background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:16px;
  }
  .step h4{font-size:18px;font-weight:700}
  .step p{margin-top:4px;color:var(--fg-muted);font-size:14px;line-height:1.55}
  .phones-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
  .phones-row .phone{width:200px}
  .phones-row .phone:nth-child(1){transform:rotate(-4deg)}
  .phones-row .phone:nth-child(2){transform:translateY(-20px)}
  .phones-row .phone:nth-child(3){transform:rotate(4deg)}

  /* WALLET BLOCK */
  .wallet-block{background:var(--fg);color:#fff}
  .wallet-block .section-title{color:#fff}
  .wallet-block .section-lead{color:rgba(255,255,255,.7)}
  .wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:56px}
  @media(max-width:900px){.wallet-grid{grid-template-columns:1fr}}
  .wallet-features{display:flex;flex-direction:column;gap:24px}
  .wallet-feat{display:flex;gap:16px;align-items:flex-start}
  .wallet-feat .ico{
    flex-shrink:0;width:44px;height:44px;border-radius:12px;
    background:rgba(234,23,68,.15);border:1px solid rgba(234,23,68,.35);
    display:flex;align-items:center;justify-content:center;font-size:20px;
  }
  .wallet-feat h4{font-size:17px;font-weight:700;color:#fff}
  .wallet-feat p{margin-top:4px;font-size:14px;color:rgba(255,255,255,.65);line-height:1.55}

  /* SECURITY */
  .security-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;margin-top:48px}
  @media(max-width:900px){.security-grid{grid-template-columns:1fr}}
  .badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
  .badge{
    border:1px solid var(--border);border-radius:9999px;padding:8px 16px;
    font-size:13px;font-weight:600;color:var(--fg);
  }
  .badge::before{content:"🔒";margin-right:6px}

  /* PROOF / METRICS */
  .metrics{background:linear-gradient(180deg,#fff 0%,#f4f6fa 100%);position:relative}
  .metrics::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 50% 0%,rgba(234,23,68,.04) 0%,transparent 70%);pointer-events:none}
  .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
  @media(max-width:700px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
  .metric{
    text-align:left;padding:24px;background:#fff;border-radius:20px;border:1px solid var(--border);
  }
  .metric .num{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1}
  .metric .label{margin-top:8px;font-size:13px;color:var(--fg-muted);line-height:1.4}

  /* PARKING SESSION CARD */
  .session-wrap{display:flex;justify-content:center}
  .session{
    width:100%;max-width:380px;background:#fff;
    border:1px solid var(--border);border-radius:28px;padding:28px;
    box-shadow:0 24px 48px rgba(3,25,39,.14);
    animation:rise .8s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .session .zone{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
  .ring-wrap{margin-top:20px;display:flex;justify-content:center}
  .ring{position:relative;width:220px;height:220px}
  .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .ring .track{fill:none;stroke:#f1efe6;stroke-width:14}
  .ring .progress{
    fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;
    stroke-dasharray:578;stroke-dashoffset:578;
    animation:fill 1.6s cubic-bezier(.16,1,.3,1) .3s forwards;
  }
  @keyframes fill{to{stroke-dashoffset:220}}
  .ring .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ring .center small{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
  .ring .center strong{margin-top:4px;font-size:48px;font-weight:700;color:var(--fg)}
  .plate-row{
    margin-top:24px;display:flex;align-items:center;justify-content:space-between;
    background:var(--surface);border-radius:16px;padding:14px 18px;
  }
  .plate-row small{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
  .plate-row .plate{margin-top:2px;font-family:'SF Mono',Menlo,monospace;font-size:16px;font-weight:700;letter-spacing:.05em}
  .plate-row .price{font-size:20px;font-weight:700}
  .extend{
    margin-top:16px;width:100%;background:var(--accent);color:#fff;
    font-weight:600;font-size:14px;padding:14px;border-radius:9999px;border:0;cursor:pointer;
    transition:background .2s;
  }
  .extend:hover{background:var(--accent-hover)}

  /* CTA BAND (rojo) */
  .cta-band{
    margin-top:96px;background:var(--accent);color:#fff;position:relative;overflow:hidden;
  }
  .cta-band::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(800px 300px at 90% 50%, rgba(255,255,255,.12), transparent 60%);
    pointer-events:none;
  }
  .cta-band-inner{
    max-width:1120px;margin:0 auto;padding:64px 20px;
    display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;position:relative;
  }
  @media(max-width:900px){.cta-band-inner{grid-template-columns:1fr;text-align:left}}
  .cta-band h2{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.01em}
  .cta-band p{margin-top:12px;font-size:16px;opacity:.9;max-width:520px}
  .cta-band .stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
  @media(max-width:900px){.cta-band .stores{justify-content:flex-start;margin-top:8px}}
  .store-btn{
    display:inline-flex;align-items:center;gap:10px;
    background:#fff;color:var(--fg);
    padding:14px 22px;border-radius:14px;font-weight:600;font-size:14px;
    border:0;cursor:pointer;transition:transform .2s;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .store-btn:hover{transform:translateY(-2px)}
  .store-btn small{display:block;font-size:10px;font-weight:500;opacity:.65;letter-spacing:.05em;text-transform:uppercase;line-height:1}
  .store-btn strong{display:block;font-size:15px;font-weight:700;line-height:1.1;margin-top:2px}
  .store-btn svg{width:22px;height:22px;flex-shrink:0}

  /* FOOTER (azul oscuro) */
  footer{background:var(--fg);color:#fff}
  .footer-inner{max-width:1120px;margin:0 auto;padding:56px 20px 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
  @media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}}
  @media(max-width:560px){.footer-inner{grid-template-columns:1fr}}
  .footer-brand h3{font-size:22px;font-weight:700;color:#fff}
  .footer-brand h3 span{font-size:12px;font-weight:400;color:rgba(255,255,255,.55);margin-left:8px;letter-spacing:.05em}
  .footer-brand p.tag{margin-top:10px;max-width:360px;color:rgba(255,255,255,.65);font-size:14px;line-height:1.55}
  .footer-brand a.b2b{display:inline-block;margin-top:20px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}
  .footer-brand a.b2b:hover{color:#fff;border-color:#fff}
  .footer-col h4{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .footer-col a{font-size:14px;color:rgba(255,255,255,.85);transition:color .15s}
  .footer-col a:hover{color:var(--accent)}
  .footer-bottom{
    max-width:1120px;margin:0 auto;padding:20px;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,.5);
  }
  .footer-bottom .langs{display:flex;gap:14px}
  .footer-bottom .langs a{color:rgba(255,255,255,.55)}
  .footer-bottom .langs a:hover{color:#fff}

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  }

/* === Detected ticket card === */
.detected-card{border-color:#a8e0bd;background:linear-gradient(180deg,#f3fbf6 0%,#fff 60%)}
.entry-photo{margin-top:18px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.entry-photo-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--accent-50);border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--fg)}
.entry-photo-head small{color:var(--fg-muted);font-weight:500}
.entry-photo-frame{aspect-ratio:16/9;background:#0f1722;display:flex;align-items:center;justify-content:center;padding:24px}
.ph-placeholder{text-align:center;color:#cdd6e2;max-width:320px}
.ph-placeholder p{margin:10px 0 4px;font-size:13px;line-height:1.4}
.ph-placeholder small{color:#7f8b9c;font-size:11px}
.ph-icon{font-size:38px;display:block}

/* === Phone input with country selector === */
.phone-input{display:flex;gap:8px}
.phone-cc{flex:0 0 auto;padding:14px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;font-family:inherit;font-size:15px;font-weight:600;color:var(--fg);cursor:pointer}
.phone-input .input-text{flex:1}

/* === OTP input === */
.otp-input{display:flex;gap:10px;justify-content:center;margin-top:6px}
.otp-input input{width:52px;height:62px;text-align:center;font-size:26px;font-weight:700;font-family:'SF Mono',Menlo,monospace;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--fg);outline:none;transition:all .15s}
.otp-input input:focus,.otp-input input:not(:placeholder-shown){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}

/* === Color chips for vehicle === */
.color-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.color-chip{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform .15s}
.color-chip:hover{transform:scale(1.08)}
.color-chip.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}

/* === Header sign-in link === */
.nav-signin{font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;padding:10px 14px;border-radius:999px;transition:background .15s}
.nav-signin:hover{background:var(--accent-50);color:var(--accent)}

/* === Skip secondary button === */
.btn-skip{display:block;text-align:center;text-decoration:none;margin-top:14px;padding:14px;border-radius:14px;background:transparent;color:var(--fg-muted);font-weight:600;font-size:14px;border:1px solid var(--border);transition:all .15s}
.btn-skip:hover{background:var(--accent-50);color:var(--accent);border-color:var(--accent-200)}
.btn-skip small{display:block;font-weight:400;font-size:12px;margin-top:2px;opacity:.8}

/* === Success page === */
.success-container{max-width:600px;text-align:center;padding-top:20px}
.success-icon{position:relative;width:120px;height:120px;margin:0 auto 28px}
.success-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--accent-100) 0%,var(--accent-50) 70%,transparent 100%);animation:pulse 2s ease-in-out infinite}
.success-check{position:absolute;inset:18px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;box-shadow:0 12px 32px rgba(234,23,68,.35)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:.5}}
.success-title{font-size:38px;font-weight:700;color:var(--fg);margin:0 0 12px;letter-spacing:-.02em}
.success-sub{font-size:17px;color:var(--fg-muted);line-height:1.5;margin:0 0 36px}
.success-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;text-align:left;box-shadow:0 8px 24px rgba(3,25,39,.06)}
.success-card h3{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--fg)}
.success-card>p{margin:0 0 24px;font-size:14px;color:var(--fg-muted);line-height:1.5}
.success-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
@media (max-width:560px){.success-features{grid-template-columns:1fr}.success-title{font-size:30px}}
.sf-item{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--accent-50);border-radius:12px}
.sf-item span{font-size:22px;flex:0 0 auto}
.sf-item strong{display:block;font-size:14px;color:var(--fg);margin-bottom:2px}
.sf-item small{color:var(--fg-muted);font-size:12px}
.success-stores{display:flex;gap:10px}
.store-btn{flex:1;padding:14px;background:var(--fg);color:#fff;text-decoration:none;border-radius:12px;text-align:center;font-weight:600;font-size:14px;transition:transform .15s}
.store-btn:hover{transform:translateY(-2px)}

/* === Nav pill group (Pagar sin app / Crear cuenta) === */
.nav-pill{
  display:inline-flex;gap:2px;padding:5px;
  background:var(--accent-50);
  border:1px solid var(--accent-100);
  border-radius:9999px;
}
.nav-pill a{
  padding:8px 14px;font-size:12.5px;font-weight:600;
  color:var(--accent);text-decoration:none;
  border-radius:9999px;transition:all .18s;white-space:nowrap;
  display:inline-flex;align-items:center;line-height:1;
}
.nav-pill a:hover{background:#fff;box-shadow:0 2px 8px rgba(234,23,68,.12)}
.nav-pill a.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(234,23,68,.4)}
@media(max-width:900px){.nav-pill{display:none}}

/* === Logo image — Brand always visible (V1) === */
.logo-img{
  padding:0;
  gap:0;
  flex-shrink:0 !important;
  flex-grow:0;
  min-height:44px;
  display:inline-flex !important;
  align-items:center;
  text-decoration:none;
  transition:transform .25s ease;
}
.logo-img:hover{transform:translateY(-1px)}
.logo-img img{
  height:44px !important;
  width:auto !important;
  max-height:44px;
  display:block !important;
  /* High-quality scaling on retina screens */
  image-rendering:auto;
  -ms-interpolation-mode:bicubic;
  object-fit:contain;
  /* Prevent the image from collapsing in flex layouts */
  flex-shrink:0;
}
/* Hide any legacy fallback span if present in HTML */
.logo-fallback{display:none !important}

/* Sticky header — brand always visible while scrolling */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

@media(max-width:768px){
  .logo-img,.logo-img img{min-height:38px;height:38px !important;max-height:38px}
}
@media(max-width:560px){
  .logo-img,.logo-img img{min-height:34px;height:34px !important;max-height:34px}
}

/* Tighten nav spacing so the top bar breathes better */
.nav ul{gap:22px}
.nav-pill{margin-right:4px}

/* === Pay fine page === */
.fine-tabs{display:flex;gap:6px;background:var(--accent-50);padding:5px;border-radius:12px;border:1px solid var(--accent-100)}
.fine-tab{flex:1;padding:11px 14px;background:transparent;border:0;border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer;transition:all .15s}
.fine-tab.active{background:#fff;color:var(--accent);box-shadow:0 2px 6px rgba(234,23,68,.12)}

.fine-head{padding:18px 4px 6px;text-align:center}
.fine-head small{display:block;color:var(--fg-muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.fine-head h3{margin:8px 0 14px;font-size:18px;font-weight:600;color:var(--fg);line-height:1.35}
.fine-amount{font-size:42px;font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1}
.fine-meta{margin-top:8px;font-size:12px;color:var(--fg-muted);text-transform:none;letter-spacing:0;font-weight:500}

.fine-map{margin-top:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#eef2f6;aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,#e6ecf2 0%,#f5f8fb 100%)}

.fine-warning{display:flex;gap:14px;align-items:flex-start;background:#fff8e6;border:1px solid #ffd966;border-radius:14px;padding:16px 18px;margin:18px 0}
.fw-icon{font-size:22px;flex:0 0 auto}
.fine-warning strong{display:block;color:#7a5500;font-size:14px;margin-bottom:4px}
.fine-warning p{margin:0;font-size:13px;color:#5a4500;line-height:1.45}

.fine-actions{display:flex;gap:10px;margin-top:14px}
.fine-link{flex:1;padding:14px;text-align:center;background:#fff;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--fg);font-size:13px;font-weight:600;transition:all .15s}
.fine-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}
@media(max-width:560px){.fine-actions{flex-direction:column}}

/* === OR divider for fine search === */
.or-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--fg-muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* === Phone-as-username badge === */
.phone-badge{display:flex;gap:14px;align-items:center;background:var(--accent-50);border:1px solid var(--accent-100);border-radius:14px;padding:14px 18px;margin:18px auto;max-width:420px}
.phone-badge>span{font-size:24px}
.phone-badge small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;margin-bottom:2px}
.phone-badge strong{font-size:16px;color:var(--fg);font-weight:700;letter-spacing:.02em}

/* === Download page v2 === */
.dl2{max-width:1180px;margin:0 auto;padding:40px 24px 24px}
.dl2-back{display:inline-flex;align-items:center;gap:6px;color:var(--fg-muted);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:24px;transition:color .15s}
.dl2-back:hover{color:var(--accent)}
.dl2-hero{position:relative;background:linear-gradient(135deg,#ea1744 0%,#c41440 100%);border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:0;box-shadow:0 30px 80px rgba(234,23,68,.25);min-height:520px}
.dl2-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.12) 0%,transparent 50%),radial-gradient(circle at 10% 90%,rgba(3,25,39,.25) 0%,transparent 55%);pointer-events:none}
@media(max-width:960px){.dl2-hero{grid-template-columns:1fr;min-height:0}}
.dl2-hero-copy{position:relative;padding:64px 64px 64px;display:flex;flex-direction:column;justify-content:center;color:#fff;z-index:1}
@media(max-width:700px){.dl2-hero-copy{padding:48px 32px 40px;text-align:center;align-items:center}}
.dl2-eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);padding:7px 14px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px;backdrop-filter:blur(10px)}
@media(max-width:700px){.dl2-eyebrow{align-self:center}}
.dl2-eyebrow::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.dl2-hero-copy h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0 0 20px;color:#fff}
.dl2-hero-copy h1 .accent{color:#fff;opacity:.85;display:block;font-weight:500}
.dl2-hero-copy p{font-size:17px;color:rgba(255,255,255,.88);line-height:1.55;margin:0 0 32px;max-width:480px}
.dl2-stores{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
@media(max-width:700px){.dl2-stores{justify-content:center}}
.dl2-store{display:inline-flex;align-items:center;gap:12px;background:#031927;color:#fff;padding:13px 22px;border-radius:14px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.dl2-store:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.3)}
.dl2-store svg{width:22px;height:22px;flex:0 0 auto}
.dl2-store small{display:block;font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.08em;line-height:1}
.dl2-store strong{display:block;font-size:15px;font-weight:700;line-height:1.2;margin-top:2px}
.dl2-trust{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.8);font-weight:500;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
@media(max-width:700px){.dl2-trust{justify-content:center}}
.dl2-trust span{display:inline-flex;align-items:center;gap:6px}
.dl2-trust strong{color:#fff;font-weight:700}

.dl2-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 40px;overflow:hidden;z-index:1}
@media(max-width:960px){.dl2-hero-visual{padding:0 32px 48px}}
.dl2-phone{position:relative;z-index:1;transform:rotate(-4deg);width:260px;max-width:100%}
.dl2-phone img{display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.dl2-phone.iphone{width:260px}
@media(max-width:720px){.dl2-phone{width:220px}}
.dl2-qr-float{position:absolute;bottom:60px;right:40px;background:#fff;border-radius:18px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);display:flex;align-items:center;gap:12px;z-index:2;transform:rotate(4deg);transition:transform .2s}
.dl2-qr-float:hover{transform:rotate(0)}
.dl2-qr-float .qr-box{width:78px;height:78px;padding:6px;border:1px solid var(--border);border-radius:10px;background:#fff}
.dl2-qr-float div{max-width:110px}
.dl2-qr-float small{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.dl2-qr-float strong{display:block;font-size:12px;color:var(--fg);line-height:1.3}
@media(max-width:560px){.dl2-qr-float{display:none}}

.dl2-benefits-title{text-align:center;margin:56px auto 24px;max-width:680px;padding:0 24px}
.dl2-benefits-title h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin:0 0 10px;color:var(--fg)}
.dl2-benefits-title h2 .accent{color:var(--accent)}
.dl2-benefits-title p{font-size:15px;color:var(--fg-muted);margin:0}

.dl2-benefits{max-width:980px;margin:0 auto 72px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.dl2-benefits{grid-template-columns:repeat(2,1fr);max-width:560px}}
@media(max-width:460px){.dl2-benefits{grid-template-columns:1fr;max-width:360px}}
.dl2-b{position:relative;background:var(--accent-50);border:1px solid var(--accent-100);border-radius:18px;padding:24px 20px;text-align:center;transition:transform .15s,box-shadow .15s,border-color .15s}
.dl2-b:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(234,23,68,.14);border-color:var(--accent)}
.dl2-b-ic{width:48px;height:48px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--accent);border-radius:14px;box-shadow:0 4px 12px rgba(234,23,68,.14)}
.dl2-b-ic .ic{width:24px;height:24px}
.dl2-b h3{font-size:15px;font-weight:700;color:var(--fg);margin:0 0 6px;letter-spacing:-.01em}
.dl2-b p{font-size:12.5px;color:var(--fg-muted);line-height:1.45;margin:0}

/* === Download page (legacy v1 kept for fallback) === */
.download-grid{max-width:1120px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:1020px){.download-grid{grid-template-columns:1fr;gap:44px;padding:40px 20px;text-align:center;justify-items:center}
.download-copy .lead{margin-left:auto;margin-right:auto}
.download-copy .store-grid,.download-copy .trust-row,.download-copy .phone-badge{justify-content:center}}
.download-copy .eyebrow{display:inline-block;background:var(--accent-50);color:var(--accent);border:1px solid var(--accent-100);padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.download-copy h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:18px 0 18px;color:var(--fg)}
.download-copy h1 .accent{color:var(--accent)}
.download-copy .lead{font-size:17px;color:var(--fg-muted);line-height:1.55;max-width:520px;margin:0}
.download-copy .phone-badge{margin-left:0;margin-right:0}

.store-grid{display:flex;gap:10px;flex-wrap:nowrap;margin-bottom:22px;align-items:center}
.store-card{display:inline-flex;align-items:center;gap:10px;background:var(--fg);color:#fff;padding:11px 18px;border-radius:12px;text-decoration:none;transition:transform .15s,box-shadow .15s;flex:0 0 auto}
.store-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(3,25,39,.25)}
.store-ic{font-size:22px;line-height:1}
.store-card small{display:block;font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
.store-card strong{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.1}

.download-visual{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
@media(max-width:1020px){.download-visual{gap:28px}}
@media(max-width:560px){.download-visual{flex-direction:column;gap:24px}}
.download-visual .phone-frame{width:240px;border-radius:32px;overflow:hidden;box-shadow:0 24px 60px rgba(3,25,39,.25);border:8px solid #0f1722;background:#0f1722;flex:0 0 auto}
.download-visual .phone-frame img{width:100%;display:block}

.qr-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px 20px;box-shadow:0 16px 40px rgba(3,25,39,.10);text-align:center;max-width:200px}
.qr-card::before{content:"Escanea para descargar";display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:4px 10px;background:var(--accent-50);border:1px solid var(--accent-100);border-radius:999px}
.qr-box{width:150px;height:150px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px}
.qr-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:1px;width:100%;height:100%}
.qr-grid span{background:var(--fg);border-radius:1px}
.qr-grid span:nth-child(odd){background:transparent}
.qr-grid span:nth-child(7n){background:var(--fg)}
.qr-grid span:nth-child(13),.qr-grid span:nth-child(17),.qr-grid span:nth-child(21),.qr-grid span:nth-child(28),.qr-grid span:nth-child(31),.qr-grid span:nth-child(35),.qr-grid span:nth-child(42){background:var(--fg)}
.qr-card strong{display:block;color:var(--fg);font-size:14px;margin-bottom:2px}
.qr-card small{color:var(--fg-muted);font-size:12px}

.dl-benefits{max-width:860px;margin:24px auto 56px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;grid-auto-rows:auto}
@media(max-width:700px){.dl-benefits{grid-template-columns:repeat(2,1fr);max-width:520px}}
@media(max-width:480px){.dl-benefits{grid-template-columns:1fr;max-width:340px}}
.dl-b{background:var(--accent-50);border:1px solid var(--accent-100);border-radius:16px;padding:18px 16px 16px;text-align:center;min-height:0;height:auto;transition:transform .15s,box-shadow .15s}
.dl-b:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(234,23,68,.12)}
.dl-b span{font-size:24px;display:block;margin-bottom:8px;line-height:1}
.dl-b strong{display:block;font-size:14px;color:var(--fg);font-weight:700;margin-bottom:4px;line-height:1.25}
.dl-b p{margin:0;font-size:12px;color:var(--fg-muted);line-height:1.4}

/* === Operadores link in nav === */
.lang-switch{position:relative;margin-left:4px}
.lang-current{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 6px;font:inherit;font-size:12px;font-weight:600;color:var(--fg-muted);line-height:1;border-radius:999px;transition:color .15s}
.lang-current:hover{color:var(--fg)}
.lang-current .flag{font-size:16px;line-height:1}
.lang-current .chev{font-size:9px;opacity:.6}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(3,25,39,.12);padding:6px;min-width:140px;display:none;z-index:50}
.lang-switch.open .lang-menu{display:block}
.lang-menu button{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--fg);padding:9px 12px;border-radius:9px;cursor:pointer;text-align:left;line-height:1}
.lang-menu button:hover{background:var(--surface)}
.lang-menu button.active{color:var(--accent)}
.lang-menu button .flag{font-size:18px;line-height:1}
.lang-menu button .check{margin-left:auto;color:var(--accent);opacity:0;font-weight:700}
.lang-menu button.active .check{opacity:1}
.op-link{color:var(--fg-muted);font-size:12.5px;font-weight:600;padding:9px 14px;border:1px solid var(--border);border-radius:999px;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;line-height:1}
.op-link:hover{color:var(--accent);border-color:var(--accent-200);background:var(--accent-50)}

/* === Generic site footer === */
.site-footer{padding:32px 0;border-top:1px solid var(--border);text-align:center;color:var(--fg-muted);font-size:13px;background:#fff}
.site-footer a{color:var(--fg-muted);text-decoration:none;margin:0 6px}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.h2-center{text-align:center;font-size:clamp(1.75rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:0 0 36px;color:var(--fg)}

/* ============ WALLET PAGE ============ */
.wallet-hero{padding:80px 0 64px;background:linear-gradient(180deg,#fff 0%,var(--accent-50) 100%)}
.wallet-hero-grid{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.wallet-hero-grid{grid-template-columns:1fr;gap:48px}}
.wallet-hero h1{font-size:clamp(2.25rem,5vw,3.6rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:18px 0 18px}
.wallet-hero h1 .accent{color:var(--accent)}
.wallet-hero .lead{font-size:18px;color:var(--fg-muted);line-height:1.55;max-width:540px}
.wallet-hero .ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.wallet-stats{display:flex;gap:36px;margin-top:36px;flex-wrap:wrap}
.wallet-stats strong{display:block;font-size:32px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.wallet-stats small{display:block;color:var(--fg-muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:4px}

.wallet-stack{position:relative;height:380px}
.w-card{position:absolute;left:50%;transform:translateX(-50%);width:340px;border-radius:22px;padding:22px 26px;box-shadow:0 24px 60px rgba(3,25,39,.18);transition:transform .3s}
.w-card small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;opacity:.7}
.w-card-back{top:0;background:var(--accent-100);color:var(--accent);transform:translateX(-50%) rotate(-4deg) scale(.92)}
.w-card-back strong{display:block;font-size:24px;font-weight:700;margin-top:4px}
.w-card-mid{top:60px;background:#0f1722;color:#fff;transform:translateX(-50%) rotate(2deg) scale(.96)}
.w-card-mid strong{display:block;font-size:24px;font-weight:700;margin-top:4px}
.w-card-front{top:140px;background:linear-gradient(135deg,var(--accent) 0%,#c41440 100%);color:#fff;height:200px}
.w-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.w-logo{background:#fff;border-radius:8px;padding:4px 8px}
.w-logo img{height:18px;display:block}
.w-chip{width:38px;height:28px;background:linear-gradient(135deg,#ffd966 0%,#c89827 100%);border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.w-balance{display:block;font-size:34px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.w-foot{display:flex;justify-content:space-between;margin-top:16px;font-size:12px}
.w-foot small{display:block;opacity:.6;font-size:10px}
.w-foot span{font-weight:600;font-size:13px}

.wallet-how{padding:80px 0;background:#fff}
.ww-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.ww-grid{grid-template-columns:1fr}}
.ww-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;transition:transform .2s,box-shadow .2s}
.ww-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(3,25,39,.08)}
.ww-num{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:18px}
.ww-card h3{margin:0 0 10px;font-size:20px;font-weight:700;color:var(--fg)}
.ww-card p{margin:0 0 18px;color:var(--fg-muted);font-size:14px;line-height:1.5}
.ww-amounts{display:flex;gap:8px;flex-wrap:wrap}
.ww-amounts span{padding:8px 14px;border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:600;color:var(--fg-muted)}
.ww-amounts span.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ww-bullets{list-style:none;padding:0;margin:0}
.ww-bullets li{padding:8px 0;font-size:13px;color:var(--fg);border-bottom:1px dashed var(--border)}
.ww-bullets li:last-child{border:0}
.ww-cats{display:flex;gap:8px;flex-wrap:wrap}
.ww-cats span{padding:8px 12px;background:var(--accent-50);color:var(--accent);border-radius:8px;font-size:12px;font-weight:600}

.wallet-tx{padding:80px 0;background:var(--accent-50)}
.tx-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
@media(max-width:900px){.tx-grid{grid-template-columns:1fr}}
.tx-grid h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:14px 0 18px;line-height:1.1}
.tx-grid h2 .accent{color:var(--accent)}
.tx-grid .lead{color:var(--fg-muted);font-size:16px;line-height:1.55;margin:0 0 24px}
.tx-bullets{list-style:none;padding:0;margin:0}
.tx-bullets li{padding:10px 0;font-size:14px;color:var(--fg);font-weight:500}
.tx-card{background:#fff;border-radius:24px;padding:24px;box-shadow:0 24px 60px rgba(3,25,39,.10)}
.tx-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.tx-card-head strong{font-size:16px;color:var(--fg)}
.tx-pill{background:#e8f7ee;color:#0e8a4a;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700}
.tx-list{list-style:none;padding:0;margin:0}
.tx-list li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.tx-list li:last-child{border:0}
.tx-list .tx-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-50);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.tx-list strong{display:block;font-size:14px;color:var(--fg);font-weight:600}
.tx-list small{display:block;color:var(--fg-muted);font-size:12px}
.tx-list>li>div{flex:1}
.tx-amt{font-size:14px;font-weight:700;color:var(--fg)}
.tx-amt.tx-pos{color:#0e8a4a}
.tx-cb{background:linear-gradient(90deg,#e8f7ee 0%,transparent 100%)}
.tx-cb .tx-ic{background:#fff}
.tx-cb .tx-amt{color:#0e8a4a}

.wallet-family{padding:80px 0;background:#fff}
.family-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
@media(max-width:900px){.family-grid{grid-template-columns:1fr}}
.family-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.member{background:var(--accent-50);border:1px solid var(--accent-100);border-radius:18px;padding:22px;text-align:center}
.member span{font-size:36px;display:block;margin-bottom:10px}
.member strong{display:block;font-size:16px;color:var(--fg);margin-bottom:4px}
.member small{font-size:12px;color:var(--fg-muted)}
.member.ghost{background:transparent;border:1px dashed var(--border);color:var(--fg-muted)}
.member.ghost span{color:var(--accent)}
.family-grid h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:14px 0 18px;line-height:1.1}
.family-grid .lead{color:var(--fg-muted);font-size:16px;line-height:1.55;margin:0 0 24px}

.wallet-partners{padding:48px 0;background:var(--accent-50);border-top:1px solid var(--accent-100);border-bottom:1px solid var(--accent-100)}
.wallet-partners small{display:block;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--fg-muted);margin-bottom:18px}
.partner-row{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;font-weight:700;font-size:18px;color:var(--fg);opacity:.6}

.cta-band{padding:80px 0;background:var(--accent);color:#fff;text-align:center}
.cta-band-inner h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.cta-band-inner p{font-size:17px;opacity:.92;margin:0 0 24px}
.cta-band .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-primary.white{background:#fff;color:var(--accent)}
.btn-secondary.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}

/* ============ CITIES PAGE ============ */
.cities-hero{padding:72px 0 48px;background:linear-gradient(180deg,#fff 0%,var(--accent-50) 100%)}
.cities-hero-grid{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
@media(max-width:900px){.cities-hero-grid{grid-template-columns:1fr}}
.cities-hero h1{font-size:clamp(2.25rem,5vw,3.6rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:18px 0 18px}
.cities-hero h1 .accent{color:var(--accent)}
.cities-hero .lead{font-size:18px;color:var(--fg-muted);line-height:1.55;max-width:520px}
.cities-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
@media(max-width:560px){.cities-counters{grid-template-columns:1fr 1fr}}
.cities-counters>div{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.cities-counters strong{display:block;font-size:24px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.cities-counters small{display:block;color:var(--fg-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:4px}

.map-wrap{position:relative;aspect-ratio:1/1;max-width:520px;margin:0 auto;background:linear-gradient(135deg,#0f1722 0%,#1a2838 100%);border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(3,25,39,.25)}
.map-bg{position:absolute;inset:0}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px}
.city-pin{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%);color:#fff;font-size:11px;font-weight:600;white-space:nowrap}
.city-pin span{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(234,23,68,.25);position:relative}
.city-pin .pulse{animation:pinPulse 2s ease-in-out infinite}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 3px rgba(234,23,68,.25)}50%{box-shadow:0 0 0 8px rgba(234,23,68,.05)}}
.city-pin b{background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px;font-weight:600;backdrop-filter:blur(4px)}
.city-pin.soon span{background:#7d8b9c;box-shadow:0 0 0 3px rgba(125,139,156,.2)}
.city-pin.soon b{opacity:.7}

.cities-grid-section{padding:72px 0;background:#fff}
.ch-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px}
.ch-head h2{font-size:clamp(1.75rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin:0}
.ch-tabs{display:flex;gap:6px;background:var(--accent-50);padding:5px;border-radius:999px;border:1px solid var(--accent-100);flex-wrap:wrap}
.ch-tab{padding:9px 16px;background:transparent;border:0;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer}
.ch-tab.active{background:#fff;color:var(--accent);box-shadow:0 2px 6px rgba(234,23,68,.12)}

.cities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.cities-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cities-grid{grid-template-columns:1fr}}
.city-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;text-decoration:none;color:var(--fg);transition:all .2s;position:relative;display:block}
.city-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(3,25,39,.10);border-color:var(--accent-200)}
.cc-flag{font-size:32px;margin-bottom:10px}
.city-card h3{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--fg)}
.city-card>small{display:block;color:var(--fg-muted);font-size:12px;margin-bottom:18px}
.city-card ul{list-style:none;padding:0;margin:0 0 18px}
.city-card ul li{padding:8px 0;font-size:13px;color:var(--fg-muted);border-bottom:1px dashed var(--border)}
.city-card ul li:last-child{border:0}
.city-card ul strong{color:var(--fg);font-weight:700}
.cc-status{display:inline-block;background:#e8f7ee;color:#0e8a4a;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700}
.cc-status.soon{background:var(--accent-50);color:var(--accent)}
.city-card.soon{opacity:.85}

.request-city{padding:80px 0;background:var(--accent-50)}
.request-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
@media(max-width:900px){.request-grid{grid-template-columns:1fr}}
.request-grid h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:14px 0 14px;line-height:1.1}
.request-grid h2 .accent{color:var(--accent)}
.request-grid .lead{color:var(--fg-muted);font-size:16px;line-height:1.55}
.request-form{background:#fff;border-radius:20px;padding:32px;box-shadow:0 16px 40px rgba(3,25,39,.08)}

/* ============ GARAGE MODES (in garage.html hero) ============ */
.garage-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:560px){.garage-modes{grid-template-columns:1fr}}
.gm-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;text-decoration:none;color:var(--fg);transition:all .2s;display:block}
.gm-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(3,25,39,.10);border-color:var(--accent-200)}
.gm-card .gm-ic{font-size:28px;margin-bottom:10px}
.gm-card strong{display:block;font-size:17px;font-weight:700;color:var(--fg);margin-bottom:4px}
.gm-card small{display:block;color:var(--fg-muted);font-size:13px;line-height:1.4}
.gm-arrow{position:absolute;top:22px;right:22px;color:var(--accent);font-size:18px;font-weight:700}
.gm-card-new{background:linear-gradient(135deg,var(--accent-50) 0%,#fff 100%);border-color:var(--accent-200)}
.gm-flag{position:absolute;top:14px;right:50px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;padding:4px 8px;border-radius:6px}

/* ============ RESERVE PAGE ============ */
.reserve-grid{max-width:1240px;margin:0 auto;padding:32px 24px 64px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:flex-start}
@media(max-width:900px){.reserve-grid{grid-template-columns:1fr;padding:24px 16px}}
.reserve-title{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:18px 0 12px;color:var(--fg)}
.reserve-title .accent{color:var(--accent)}
.reserve-sub{font-size:17px;color:var(--fg-muted);line-height:1.5;margin:0 0 28px;max-width:540px}

.parking-pick{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:all .15s}
.parking-pick:hover{border-color:var(--accent-200);background:var(--accent-50)}
.parking-pick.selected{border-color:var(--accent);background:var(--accent-50);box-shadow:0 0 0 3px var(--accent-100)}
.parking-pick strong{display:block;font-size:15px;color:var(--fg);font-weight:700}
.parking-pick small{display:block;color:var(--fg-muted);font-size:12px;margin-top:2px}
.pp-meta{text-align:right;font-size:12px;color:var(--fg-muted);font-weight:600}
.pp-meta span{display:block}
.badge-live{display:inline-block;background:#e8f7ee;color:#0e8a4a;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;margin-bottom:4px}
.link-more{display:inline-block;margin-top:8px;color:var(--accent);font-size:13px;font-weight:600;text-decoration:none}

.quick-when{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.qw{padding:10px 16px;background:#fff;border:1px solid var(--border);border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer}
.qw.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.day-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px}
.day{padding:12px 4px;border:1px solid var(--border);border-radius:12px;text-align:center;cursor:pointer;transition:all .15s}
.day:hover{border-color:var(--accent-200)}
.day small{display:block;font-size:10px;color:var(--fg-muted);text-transform:uppercase;font-weight:700;letter-spacing:.08em}
.day strong{display:block;font-size:18px;color:var(--fg);font-weight:700;margin-top:4px}
.day.active{background:var(--accent);border-color:var(--accent)}
.day.active small,.day.active strong{color:#fff}

.time-range{display:grid;grid-template-columns:1fr auto 1fr auto;gap:14px;align-items:center;background:var(--accent-50);border:1px solid var(--accent-100);border-radius:14px;padding:18px}
.time-range>div small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted);font-weight:700;margin-bottom:4px}
.time-range>div strong{display:block;font-size:24px;font-weight:700;color:var(--fg);letter-spacing:-.02em;font-family:'SF Mono',Menlo,monospace}
.tr-arrow{font-size:24px;color:var(--accent);font-weight:700}
.tr-dur{padding:8px 14px;background:#fff;border-radius:999px;font-size:12px;font-weight:700;color:var(--accent);border:1px solid var(--accent-100)}

.reserve-price{background:#0f1722;color:#fff;border-color:#1a2838}
.reserve-price .row{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.08)}
.reserve-price .row.tx-cb{color:#7ee2a0;background:transparent}
.reserve-price .total{color:#fff;border-top-color:rgba(255,255,255,.1)}
.reserve-price .total strong{color:#fff;font-size:32px}
.lock-row{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.15);font-size:12px;color:#7ee2a0;text-align:center;font-weight:600}

.reserve-aside{position:sticky;top:84px}
.reserve-card{background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(3,25,39,.10)}
.rc-img{aspect-ratio:16/10;background:linear-gradient(135deg,#0f1722 0%,#1a2838 100%);display:flex;align-items:center;justify-content:center}
.rc-body{padding:24px}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.rc-head strong{display:block;font-size:17px;color:var(--fg);font-weight:700}
.rc-head small{display:block;color:var(--fg-muted);font-size:12px;margin-top:2px}
.rc-amenities{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.rc-amenities span{padding:6px 10px;background:var(--accent-50);color:var(--accent);border-radius:8px;font-size:11px;font-weight:600}
.rc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:18px;text-align:center}
.rc-stats strong{display:block;font-size:18px;color:var(--fg);font-weight:700}
.rc-stats small{display:block;font-size:11px;color:var(--fg-muted);margin-top:2px}
.rc-step{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:13px;color:var(--fg-muted)}
.rc-step span{width:24px;height:24px;border-radius:50%;background:var(--accent-50);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 auto}

/* === HOW STREET PAGE === */
.how-hero{padding:72px 0 56px;background:linear-gradient(180deg,var(--accent-50) 0%,#fff 100%);border-bottom:1px solid var(--border)}
.how-hero-inner{max-width:780px;text-align:center}
.how-hero h1{font-size:clamp(2.25rem,5vw,3.6rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:18px 0 18px;color:var(--fg)}
.how-hero h1 .accent{color:var(--accent)}
.how-hero .lead{font-size:18px;color:var(--fg-muted);line-height:1.55;margin:0 auto 28px;max-width:620px}
.how-hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.how-hero .app-back{color:var(--accent)}

.how-steps{padding:80px 0;background:#fff;position:relative}
.how-steps::before{content:"";position:absolute;left:50%;top:80px;bottom:80px;width:2px;background:linear-gradient(180deg,var(--accent-100) 0%,var(--accent-200) 50%,var(--accent-100) 100%);transform:translateX(-50%);z-index:0}
@media(max-width:900px){.how-steps::before{left:32px}}
.hs-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px;position:relative;z-index:1}
.hs-row.reverse{direction:rtl}
.hs-row.reverse>*{direction:ltr}
@media(max-width:900px){.hs-row,.hs-row.reverse{grid-template-columns:1fr;direction:ltr;padding-left:64px;gap:24px}}
.hs-num{position:absolute;left:50%;top:0;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;box-shadow:0 8px 24px rgba(234,23,68,.18);z-index:2}
@media(max-width:900px){.hs-num{left:0;transform:none}}
.hs-num-done{background:var(--accent);color:#fff}
.hs-content .hs-time{display:inline-block;background:var(--accent-50);color:var(--accent);padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.hs-time-done{background:#e8f7ee !important;color:#0e8a4a !important}
.hs-content h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0 0 14px;color:var(--fg)}
.hs-content h2 .accent{color:var(--accent)}
.hs-content p{font-size:16px;color:var(--fg-muted);line-height:1.55;margin:0 0 18px}
.hs-bullets{list-style:none;padding:0;margin:0}
.hs-bullets li{padding:8px 0;font-size:14px;color:var(--fg);font-weight:500}
.hs-visual{display:flex;justify-content:center}
.phone-frame-sm{width:240px;border-radius:28px;overflow:hidden;border:7px solid #0f1722;background:#0f1722;box-shadow:0 24px 60px rgba(3,25,39,.25)}
.phone-frame-sm img{width:100%;display:block}
.hs-row-final .hs-num{background:linear-gradient(135deg,#0e8a4a 0%,#0a6a39 100%);border-color:#0a6a39;color:#fff}

.how-compare{padding:80px 0;background:var(--accent-50)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto}
@media(max-width:900px){.compare-grid{grid-template-columns:1fr}}
.compare-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:36px;position:relative}
.compare-card.before{opacity:.92}
.compare-card.after{border-color:var(--accent-200);box-shadow:0 24px 60px rgba(234,23,68,.12)}
.cc-tag{display:inline-block;padding:6px 14px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.compare-card.before .cc-tag{background:#f0f0f0;color:#777}
.compare-card.after .cc-tag{background:var(--accent);color:#fff}
.compare-card h3{margin:0 0 22px;font-size:22px;font-weight:700;color:var(--fg)}
.compare-card ul{list-style:none;padding:0;margin:0 0 28px}
.compare-card ul li{padding:10px 0;font-size:14px;color:var(--fg);border-bottom:1px dashed var(--border)}
.compare-card ul li:last-child{border:0}
.cc-time{padding-top:18px;border-top:1px solid var(--border);font-size:26px;font-weight:700;color:var(--fg);letter-spacing:-.02em}
.compare-card.after .cc-time{color:var(--accent)}
.cc-time small{display:block;font-size:12px;color:var(--fg-muted);font-weight:500;margin-top:4px;letter-spacing:0}

.how-faq{padding:80px 0;background:#fff}
.how-faq .faq{max-width:780px;margin:0 auto}

/* === Countries strip (replaces cities-strip on home) === */
.countries-strip{background:linear-gradient(180deg,#fff 0%,var(--accent-50) 100%);border-top:1px solid var(--accent-100);border-bottom:1px solid var(--accent-100);padding:40px 0}
.countries-strip-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cs-label small{display:inline-block;background:var(--accent-50);color:var(--accent);border:1px solid var(--accent-100);padding:8px 18px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;box-shadow:0 4px 12px rgba(234,23,68,.06)}
.cs-label strong{display:block;font-size:20px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.country-pills{display:flex;gap:12px;flex-wrap:wrap}
.country-pill{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--accent-100);border-radius:16px;padding:12px 18px;text-decoration:none;color:var(--fg);box-shadow:0 4px 12px rgba(234,23,68,.06);transition:all .2s}
.country-pill:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(234,23,68,.14);border-color:var(--accent-200)}
.country-pill .flag{font-size:24px;line-height:1}
.country-pill strong{display:block;font-size:14px;font-weight:700;color:var(--fg);line-height:1.2}
.country-pill small{display:block;font-size:11px;color:var(--fg-muted);font-weight:500;margin-top:1px}
.country-pill-soon{background:transparent;border:1px dashed var(--accent-200);box-shadow:none}
.country-pill-soon .flag{color:var(--accent);font-weight:700}
.country-pill-soon strong{color:var(--accent)}
@media(max-width:680px){.countries-strip-inner{flex-direction:column;align-items:flex-start}.country-pills{width:100%}.country-pill{flex:1;min-width:140px}}

/* === CHECKOUT PAGE === */
.checkout-grid{max-width:1180px;margin:0 auto;padding:24px 24px 64px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:flex-start}
@media(max-width:900px){.checkout-grid{grid-template-columns:1fr;padding:16px}}

.cc-preview{position:relative;background:linear-gradient(135deg,var(--accent) 0%,#c41440 60%,#031927 100%);color:#fff;border-radius:18px;padding:24px;margin-bottom:22px;box-shadow:0 16px 40px rgba(234,23,68,.25);overflow:hidden}
.cc-preview::before{content:"";position:absolute;top:-40%;right:-20%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%)}
.cc-preview .cc-brand{font-size:18px;font-weight:800;letter-spacing:.06em;font-style:italic}
.cc-preview .cc-chip{width:42px;height:32px;background:linear-gradient(135deg,#ffd966 0%,#c89827 100%);border-radius:6px;margin:18px 0 22px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.cc-preview .cc-number{font-size:22px;font-weight:600;letter-spacing:.18em;font-family:'SF Mono',Menlo,monospace;margin-bottom:18px}
.cc-preview .cc-row{display:flex;justify-content:space-between;gap:24px;font-size:13px}
.cc-preview .cc-row small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.1em;opacity:.65;margin-bottom:2px}
.cc-preview .cc-row span{font-weight:700;letter-spacing:.04em}

.cc-input{position:relative}
.cc-input .cc-brands{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:var(--fg-muted);letter-spacing:.08em;pointer-events:none}

/* Sticky aside summary */
.checkout-aside{position:sticky;top:84px}
.checkout-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 16px 40px rgba(3,25,39,.08)}
.checkout-card .cc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.checkout-card .cc-head strong{font-size:16px;color:var(--fg);font-weight:700}
.checkout-card .cc-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--accent-50);border-radius:14px;margin-bottom:18px}
.checkout-card .cc-item .cc-ic{width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.checkout-card .cc-item strong{display:block;font-size:14px;color:var(--fg);font-weight:700}
.checkout-card .cc-item small{display:block;color:var(--fg-muted);font-size:12px}
.cc-rows{list-style:none;padding:0;margin:0 0 16px}
.cc-rows li{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:var(--fg-muted);border-bottom:1px dashed var(--border)}
.cc-rows li strong{color:var(--fg);font-weight:700}
.cc-total{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border);font-size:14px;color:var(--fg-muted)}
.cc-total strong{font-size:24px;color:var(--accent);font-weight:700;letter-spacing:-.02em}
.cc-secure{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px;background:var(--accent-50);border-radius:12px}
.cc-secure span{font-size:18px}
.cc-secure small{font-size:12px;color:var(--fg-muted);line-height:1.45}

/* === DOWNLOAD BAND (home) === */
.dl-band{position:relative;padding:96px 0;background:linear-gradient(135deg,#031927 0%,#0a2438 50%,#1a0510 100%);color:#fff;overflow:hidden}
.dl-band-bg{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}
.dl-band-inner{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.dl-band-inner{grid-template-columns:1fr;gap:48px}}
.dl-band-copy .section-eyebrow{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
.dl-band-copy h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:18px 0 18px}
.dl-band-copy h2 .accent-w{color:var(--accent);background:linear-gradient(120deg,#ff5577 0%,var(--accent) 50%,#c41440 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dl-band-copy p{font-size:17px;color:rgba(255,255,255,.78);line-height:1.55;margin:0 0 32px;max-width:540px}

.dl-band-stores{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.store-btn-big{display:flex;align-items:center;gap:14px;background:#fff;color:#031927;padding:16px 26px;border-radius:16px;text-decoration:none;transition:all .2s;min-width:220px;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.store-btn-big:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(234,23,68,.3)}
.store-btn-big svg{width:32px;height:32px;flex:0 0 auto}
.store-btn-big small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.65;font-weight:600}
.store-btn-big strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:2px}

.dl-band-trust{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.65);font-weight:500}

.dl-band-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px}
.dl-band-visual .phone-frame-sm{width:240px;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.qr-card-floating{position:absolute;bottom:20px;right:0;display:flex;align-items:center;gap:14px;background:#fff;color:var(--fg);border-radius:16px;padding:14px 18px;box-shadow:0 16px 40px rgba(0,0,0,.3);transform:rotate(4deg)}
.qr-card-floating .qr-box{width:72px;height:72px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px}
.qr-card-floating strong{display:block;color:var(--fg);font-size:13px;font-weight:700}
.qr-card-floating small{display:block;color:var(--fg-muted);font-size:11px}
@media(max-width:560px){.qr-card-floating{display:none}}

/* === MULTICANAL BAND === */
.mc-band{padding:96px 0;background:linear-gradient(180deg,#fff 0%,var(--accent-50) 100%);border-top:1px solid var(--accent-100)}
.mc-head{text-align:center;max-width:680px;margin:0 auto 48px}
.mc-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:18px 0 14px}
.mc-head h2 .accent{color:var(--accent)}
.mc-head p{font-size:17px;color:var(--fg-muted);line-height:1.5;margin:0}

.mc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.mc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mc-grid{grid-template-columns:1fr}}
.mc-card{position:relative;background:#fff;border:1px solid var(--accent-100);border-radius:20px;padding:32px 26px;text-decoration:none;color:var(--fg);transition:all .25s;display:block;box-shadow:0 4px 16px rgba(234,23,68,.04)}
.mc-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(234,23,68,.14);border-color:var(--accent-200)}
.mc-ic{width:56px;height:56px;border-radius:16px;background:var(--accent-50);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px}
.mc-card h3{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.mc-card>p{margin:0 0 16px;font-size:13px;color:var(--fg-muted);line-height:1.5}
.mc-card>small{display:block;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em;font-family:'SF Mono',Menlo,monospace}
.mc-arrow{position:absolute;top:24px;right:24px;color:var(--accent);font-size:18px;font-weight:700;opacity:0;transform:translateX(-6px);transition:all .25s}
.mc-card:hover .mc-arrow{opacity:1;transform:translateX(0)}
.mc-card-feature{background:linear-gradient(135deg,var(--accent-50) 0%,#fff 100%);border-color:var(--accent-200)}
.mc-card-feature .mc-ic{background:var(--accent);color:#fff}

/* === Fine divider CTA (between Multas and Métricas) === */
.fine-divider{padding:32px 0;background:#fff}
.fd-card{position:relative;display:flex;align-items:center;gap:32px;background:linear-gradient(135deg,#031927 0%,#0a2438 100%);border-radius:24px;padding:36px 44px;overflow:hidden;box-shadow:0 24px 60px rgba(3,25,39,.2)}
.fd-glow{position:absolute;top:-50%;right:-10%;width:480px;height:480px;background:radial-gradient(circle,rgba(234,23,68,.35) 0%,transparent 60%);pointer-events:none}
.fd-content{position:relative;flex:1;color:#fff}
.fd-eyebrow{display:inline-block;background:rgba(234,23,68,.2);color:#ff8aa3;border:1px solid rgba(234,23,68,.4);padding:6px 14px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.fd-content h3{margin:0 0 8px;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.fd-content p{margin:0;font-size:15px;color:rgba(255,255,255,.7);line-height:1.5;max-width:560px}
.fd-btn{position:relative;flex:0 0 auto;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:18px 32px;border-radius:14px;box-shadow:0 12px 32px rgba(234,23,68,.4);transition:all .2s;white-space:nowrap}
.fd-btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(234,23,68,.55)}
@media(max-width:780px){.fd-card{flex-direction:column;align-items:flex-start;padding:32px;gap:24px}.fd-btn{width:100%;text-align:center}}

/* === LEGAL PAGES === */
.legal-page{background:var(--surface);min-height:calc(100vh - 76px);padding:48px 0 80px}
.legal-wrap{max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
@media(max-width:900px){.legal-wrap{grid-template-columns:1fr;gap:24px}}
.legal-nav{position:sticky;top:96px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 8px 24px rgba(3,25,39,.05)}
.legal-nav h3{margin:10px 0 14px;font-size:15px;font-weight:700;color:var(--fg)}
.legal-nav ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:2px}
.legal-nav ul a{display:block;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--fg-muted);transition:all .15s}
.legal-nav ul a:hover{background:var(--surface);color:var(--fg)}
.legal-nav ul a.active{background:var(--accent-50);color:var(--accent);font-weight:700}
.legal-help{font-size:12px;color:var(--fg-muted);line-height:1.5;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--border)}
.legal-help a{color:var(--accent);font-weight:600}
.legal-content{background:#fff;border:1px solid var(--border);border-radius:18px;padding:56px;box-shadow:0 8px 24px rgba(3,25,39,.05);max-width:860px}
@media(max-width:600px){.legal-content{padding:32px 24px}}
.legal-content h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;color:var(--fg);letter-spacing:-.02em;margin:12px 0 20px;line-height:1.15}
.legal-content .lead{font-size:16px;color:var(--fg-muted);line-height:1.65;border-left:3px solid var(--accent);padding-left:16px;margin:0 0 32px}
.legal-content h2{font-size:18px;font-weight:700;color:var(--fg);margin:32px 0 10px;letter-spacing:-.01em}
.legal-content p{font-size:14.5px;line-height:1.7;color:var(--fg);margin:0 0 14px}
.legal-content ul{font-size:14.5px;line-height:1.7;color:var(--fg);padding-left:22px;margin:0 0 14px}
.legal-content li{margin-bottom:6px}
.legal-content a{color:var(--accent);font-weight:600;text-decoration:underline}
.legal-content strong{color:var(--fg);font-weight:700}
.legal-updated{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--fg-muted);font-style:italic}

/* === FOOTER v2 — con contacto + redes === */
footer{background:#031927;color:#fff;padding:72px 0 0;margin-top:80px}
.footer-inner{max-width:1320px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:980px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-inner{grid-template-columns:1fr}}
.footer-brand h3{margin:0 0 6px;font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px}
.footer-brand h3 span{font-size:10px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase}
.footer-brand .tag{font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);margin:10px 0 16px;max-width:280px}
.footer-brand .b2b{display:inline-block;font-size:12px;color:var(--accent);font-weight:600;padding:8px 14px;border:1px solid rgba(234,23,68,.4);border-radius:999px;transition:all .15s}
.footer-brand .b2b:hover{background:rgba(234,23,68,.1);border-color:var(--accent)}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:13.5px;color:rgba(255,255,255,.6);transition:color .15s}
.footer-col ul a:hover{color:#fff}
.footer-contact .contact-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.7);margin-bottom:12px;transition:color .15s}
.footer-contact .contact-item:hover{color:#fff}
.footer-contact .contact-item span.ico{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px;transition:all .15s}
.footer-socials a:hover{background:var(--accent);transform:translateY(-2px)}
.footer-bottom{max-width:1320px;margin:56px auto 0;padding:24px 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,.5)}
.footer-bottom .langs{display:flex;gap:16px;flex-wrap:wrap}
.footer-bottom .langs a{color:rgba(255,255,255,.5);transition:color .15s}
.footer-bottom .langs a:hover{color:#fff}

/* ============================================================
   ICON SYSTEM v2 — outline SVG, 24x24, 1.75px stroke, currentColor
   ============================================================ */
.ic{width:24px;height:24px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic-sm{width:18px;height:18px}
.ic-lg{width:32px;height:32px}
.ic-xl{width:44px;height:44px;stroke-width:1.5}

/* Icon chip (colored square behind an icon) */
.ic-chip{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--accent);box-shadow:0 4px 12px rgba(234,23,68,.12);flex:0 0 auto}
.ic-chip .ic{width:22px;height:22px}
.ic-chip--dark{background:var(--fg);color:#fff;box-shadow:0 4px 12px rgba(3,25,39,.2)}
.ic-chip--soft{background:var(--accent-50);color:var(--accent);box-shadow:none;border:1px solid var(--accent-100)}
.ic-chip--lg{width:56px;height:56px;border-radius:16px}
.ic-chip--lg .ic{width:28px;height:28px}

/* ============================================================
   Footer v2 — B2B big banner + contact CTAs
   ============================================================ */
.b2b-big{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:18px 22px;background:linear-gradient(135deg,var(--accent) 0%,#c41440 100%);color:#fff;border-radius:16px;text-decoration:none;box-shadow:0 12px 30px rgba(234,23,68,.28);transition:transform .2s,box-shadow .2s;max-width:360px}
.b2b-big:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(234,23,68,.38);color:#fff}
.b2b-big small{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.85;margin-bottom:3px}
.b2b-big strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.b2b-big .b2b-arrow{font-size:22px;font-weight:300;transition:transform .2s}
.b2b-big:hover .b2b-arrow{transform:translateX(4px)}

.footer-contact .contact-cta{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;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,.9);transition:all .15s}
.footer-contact .contact-cta:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateX(2px);color:#fff}
.footer-contact .contact-cta .ico{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:8px;font-size:16px;flex:0 0 auto}
.footer-contact .contact-cta .ico.flag{font-size:18px}
.footer-contact .contact-cta small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-bottom:1px;line-height:1}
.footer-contact .contact-cta strong{display:block;font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.footer-contact .contact-cta--wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.28)}
.footer-contact .contact-cta--wa:hover{background:rgba(37,211,102,.2);border-color:rgba(37,211,102,.5)}
.footer-contact .contact-cta--wa .ico{background:#25d366;color:#fff}

/* SVG icons inside legacy wrappers inherit the wrapper's intent */
.ico .ic, .bi-ic .ic, .cap-ic .ic, .dl-b span .ic, .feat-ic .ic, .fi-ic .ic, .step-ic .ic{width:100%;height:100%;max-width:24px;max-height:24px}
.ic-chip .ic, .dl2-b-ic .ic{width:24px;height:24px}

/* ============================================================
   iPhone mockup component — professional phone frame
   Usage: <div class="iphone"><div class="iphone__screen"><img src="..."/></div></div>
   ============================================================ */
.iphone{position:relative;width:280px;aspect-ratio:9/19;background:linear-gradient(145deg,#1a1d24 0%,#0a0c10 100%);border-radius:46px;padding:12px;box-shadow:0 0 0 2px #2a2d35,0 30px 70px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.2);flex:0 0 auto}
.iphone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#000;border-radius:20px;z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.iphone::after{content:"";position:absolute;top:27px;right:calc(50% - 38px);width:10px;height:10px;background:#0a0c10;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.04);z-index:4}
.iphone__screen{position:relative;width:100%;height:100%;background:#fff;border-radius:34px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.iphone__screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* Side buttons */
.iphone::before, .iphone::after{}
.iphone-side{position:absolute;background:#1a1d24;border-radius:2px;z-index:-1}
.iphone--sm{width:220px;border-radius:38px;padding:10px}
.iphone--sm::before{top:14px;width:88px;height:24px}
.iphone--sm::after{top:21px;right:calc(50% - 30px);width:8px;height:8px}
.iphone--sm .iphone__screen{border-radius:28px}
.iphone--lg{width:320px;border-radius:52px;padding:14px}
.iphone--lg::before{top:20px;width:124px;height:34px}
.iphone--lg::after{top:30px;right:calc(50% - 43px);width:11px;height:11px}
.iphone--lg .iphone__screen{border-radius:38px}

/* Tilted / stacked phones for hero sections */
.iphone-stack{position:relative;display:flex;align-items:center;justify-content:center;gap:0}
.iphone-stack .iphone:nth-child(1){transform:rotate(-6deg) translateX(24px);z-index:1}
.iphone-stack .iphone:nth-child(2){transform:translateY(-20px);z-index:2}
.iphone-stack .iphone:nth-child(3){transform:rotate(6deg) translateX(-24px);z-index:1}
@media(max-width:720px){.iphone-stack{flex-direction:column;gap:20px}.iphone-stack .iphone{transform:none!important}}

/* Single phone centered wrapper */
.iphone-center{display:flex;justify-content:center;align-items:center}

/* Multicanal 3-col + states */
.mc-grid.mc-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.mc-grid.mc-grid--3{grid-template-columns:1fr}}
.mc-card--soon{position:relative;opacity:.96}
.mc-card--soon .mc-badge{
  position:absolute;top:16px;right:16px;
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#fff 0%,var(--accent-50) 100%);
  color:var(--accent);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px 5px 9px;
  border-radius:999px;
  border:1px solid var(--accent-200);
  box-shadow:0 2px 6px rgba(234,23,68,.10);
}
.mc-card--soon .mc-badge::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(234,23,68,.6);
  animation:pm-pulse 2.4s ease-in-out infinite;
}
@keyframes pm-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(234,23,68,.55)}
  50%{box-shadow:0 0 0 5px rgba(234,23,68,0)}
}
.mc-card--info{cursor:default}
.mc-card--info .mc-arrow{display:none}
.mc-card--info:hover{transform:none;box-shadow:0 4px 16px rgba(234,23,68,.04)}

/* Nav "Próximamente" badge — DISABLED look (V1, compact) */
.nav-soon{
  display:inline-flex;align-items:center;
  background:#f4f4f5;
  color:#9ca3af;
  font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  margin-left:6px;
  vertical-align:middle;
  line-height:1.4;
  transition:none;
}
.nav-soon::before{display:none} /* removed pulsing dot */

/* Disabled link styling — looks inactive but is clickable */
.nav-link-soon,
.op-link{
  color:#9ca3af !important;
  font-weight:500 !important;
  cursor:pointer;
  transition:color .15s;
}
.nav-link-soon:hover,
.op-link:hover{
  color:#6b7280 !important;
  background:transparent !important;
  border-color:transparent !important;
}
.nav-link-soon:hover .nav-soon,
.op-link:hover .nav-soon{
  background:#e5e7eb;
  color:#6b7280;
}

/* Compact nav-pill — let it breathe less */
.nav-pill{
  background:transparent !important;
  padding:0 !important;
  gap:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.nav-pill a{
  padding:6px 10px !important;
  font-size:12px !important;
  font-weight:500 !important;
}

/* Operadores ↗ — discreet outline button */
.op-link{
  border:1px solid #e5e7eb !important;
  background:transparent !important;
  font-size:12px !important;
  padding:7px 12px !important;
}
.op-link:hover{border-color:#d1d5db !important}

/* Noapp cards "Próximamente" — mismo estilo que multicanal */
.noapp-card--soon{position:relative;opacity:.96}
.noapp-card--soon .arrow{opacity:.35}
.noapp-card--soon:hover{transform:none}
.noapp-badge{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#fff 0%,var(--accent-50) 100%);
  color:var(--accent);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px 5px 9px;
  border-radius:999px;
  border:1px solid var(--accent-200);
  box-shadow:0 2px 6px rgba(234,23,68,.10);
  z-index:2;
}
.noapp-badge::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(234,23,68,.6);
  animation:pm-pulse 2.4s ease-in-out infinite;
}

/* Availability disclaimer band — discreto, justo antes del footer */
.availability-disclaimer{padding:32px 0;background:linear-gradient(180deg,transparent 0%,var(--surface) 60%);border-top:1px solid #e2e8f0}
.availability-disclaimer p{
  display:flex;align-items:flex-start;gap:12px;
  max-width:760px;margin:0 auto;
  font-size:12.5px;line-height:1.6;color:#64748b;
  background:#fff;padding:14px 18px;border-radius:12px;
  border:1px solid #e2e8f0;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.availability-disclaimer .ic{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:1px}
.availability-disclaimer span{flex:1}
@media(max-width:600px){.availability-disclaimer p{font-size:12px;padding:12px 14px;gap:10px}}

/* ============================================================
   Phone screenshots — global size cap (fix oversize screens)
   ============================================================ */
.phone{display:inline-block;max-width:220px;width:100%}
.phone img{display:block;width:100%;height:auto;border-radius:20px}
.phone-tilt{transform:rotate(-3deg);transition:transform .3s}
.phone-tilt:hover{transform:rotate(0)}
.phones-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.phones-row .phone{max-width:180px}
.session-wrap .phone{max-width:260px}
.phone-frame{max-width:240px}
.phone-frame img{width:100%;height:auto;display:block;border-radius:24px}
@media(max-width:720px){
  .phone{max-width:180px}
  .phones-row .phone{max-width:150px}
  .session-wrap .phone{max-width:220px}
}

/* ============================================================
   Icon sizing inside ALL legacy wrappers — fixes empty icon boxes
   ============================================================ */
.gm-ic,.bi-ic,.cap-ic,.cc-ic,.feat-ic,.fi-ic,.mc-ic,.pm-ic,.step-ic,.tx-ic,
.pillar .icon,.wallet-feat .ico,.noapp-card .big{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:var(--accent-50);color:var(--accent);
  box-shadow:0 4px 12px rgba(234,23,68,.12);
  margin-bottom:14px;
}
.gm-ic .ic,.bi-ic .ic,.cap-ic .ic,.cc-ic .ic,.feat-ic .ic,.fi-ic .ic,
.mc-ic .ic,.pm-ic .ic,.step-ic .ic,.tx-ic .ic,
.pillar .icon .ic,.wallet-feat .ico .ic,.noapp-card .big .ic{
  width:26px;height:26px;color:var(--accent)
}
/* Inline icons in badges, trust rows, lists, etc. */
.badge .ic,.trust-row .ic,li .ic,.caption .ic,small .ic{
  width:16px;height:16px;vertical-align:-3px;margin-right:4px
}

/* ============================================================
   v3 polish layer — applies globally to all pages
   ============================================================ */

/* Heading tightening for modern feel */
h1,h2,h3{letter-spacing:-.02em;font-feature-settings:"ss01","cv11"}
h1{line-height:1.05}
h2{line-height:1.1}
h3{line-height:1.2}

/* Better link defaults */
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent)}

/* Consistent button polish */
button,.btn,[class*="btn-"]{
  font-family:inherit;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
  cursor:pointer
}
button:active,.btn:active,[class*="btn-"]:active{transform:translateY(1px)}

/* Card hover lifts (applied to common card classes) */
.feat-card,.bi-card,.gm-card,.cc-card,.pm-card,.step-card,.fi-card,.mc-card,.tx-card,
.b-card,.dl2-b,.hs-step,.noapp-card,.pillar,.wallet-feat{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-radius:var(--r-lg);
}
.feat-card:hover,.bi-card:hover,.gm-card:hover,.cc-card:hover,.pm-card:hover,
.step-card:hover,.fi-card:hover,.mc-card:hover,.tx-card:hover,
.b-card:hover,.dl2-b:hover,.hs-step:hover,.noapp-card:hover,.pillar:hover,.wallet-feat:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent-200);
}

/* Icon chip wrappers — unified with tokens */
.gm-ic,.bi-ic,.cap-ic,.cc-ic,.feat-ic,.fi-ic,.mc-ic,.pm-ic,.step-ic,.tx-ic,
.pillar .icon,.wallet-feat .ico,.noapp-card .big,.dl2-b-ic{
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.feat-card:hover .feat-ic,.bi-card:hover .bi-ic,.gm-card:hover .gm-ic,
.cc-card:hover .cc-ic,.pm-card:hover .pm-ic,.mc-card:hover .mc-ic{
  transform:scale(1.06);
  box-shadow:var(--shadow-md);
}

/* Section rhythm */
section{scroll-margin-top:80px}

/* Selection color */
::selection{background:var(--accent);color:#fff}

/* Images: prevent layout shift */
img{max-width:100%;height:auto}

/* Better blockquote (if any) */
blockquote{border-left:3px solid var(--accent);padding-left:16px;color:var(--fg-muted);font-style:italic}

/* Code tags polish */
code,kbd{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.92em;background:var(--surface);padding:1px 6px;border-radius:4px;border:1px solid var(--border)}

/* Utility: full-bleed gradient backgrounds */
.bg-gradient-soft{background:linear-gradient(135deg,var(--accent-50) 0%,#fff 60%)}
.bg-gradient-deep{background:linear-gradient(135deg,var(--fg) 0%,#0a2235 100%);color:#fff}

/* ============================================
   PAYMENT FLOW v2 — expand→fill→confirm pattern
   Playbook: iPark payment-flow-playbook.md §2.3, §6
   ============================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* pm-item v2 (label + real radio) */
.pm-item-v2{
  display:block;padding:0;background:#fafafa;border:1px solid var(--border-strong,#cfd7df);
  border-radius:14px;cursor:pointer;transition:all var(--dur,.15s) var(--ease,ease);
  overflow:hidden;
}
.pm-item-v2 .pm-head{display:flex;align-items:center;gap:14px;padding:14px 16px}
.pm-item-v2 .pm-ic{
  width:40px;height:28px;border-radius:6px;background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pm-item-v2 .pm-ic svg{width:22px;height:22px;color:var(--fg)}
.pm-item-v2 .pm-name{font-size:14px;font-weight:600;flex:1}
.pm-item-v2 .radio{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong,#cfd7df);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:border-color var(--dur) var(--ease);
}
.pm-item-v2:hover{border-color:var(--accent)}
.pm-item-v2:has(> input:checked){background:var(--accent-50);border-color:var(--accent)}
.pm-item-v2:has(> input:checked) .radio{border-color:var(--accent)}
.pm-item-v2:has(> input:checked) .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.pm-item-v2:has(> input:focus-visible){outline:3px solid var(--accent-100,#ffe0e7);outline-offset:2px}

/* Expandable block */
.pm-form,.extra-form{display:none;padding:0 16px 16px;flex-direction:column;gap:10px}
.pm-item-v2:has(> input:checked) .pm-form{display:flex}
.extra-item-v2:has(> input:checked) .extra-form{display:flex}

.pm-form .input-text,.extra-form .input-text{
  width:100%;padding:12px 14px;border:1px solid var(--border-strong,#cfd7df);border-radius:10px;
  font-family:inherit;font-size:14px;background:#fff;
}
.pm-form .input-text:focus,.extra-form .input-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100,#ffe0e7)}
.pm-form .row-2,.extra-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.confirm-btn{
  align-self:flex-start;padding:10px 18px;background:var(--fg);color:#fff;border:0;
  border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:all var(--dur,.2s) var(--ease,ease);
}
.confirm-btn:hover{background:#0a2438}
.confirm-btn.ok{background:#16a34a}
.confirm-btn.ok::before{content:"✓ "}

/* Confirmed state */
.pm-item-v2.confirmed,.extra-item-v2.confirmed{border-color:#16a34a;background:#f0faf4}
.pm-item-v2.confirmed .radio{border-color:#16a34a}
.pm-item-v2.confirmed .radio::after{background:#16a34a}

/* extra-item v2 */
.extras-v2{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.extra-item-v2{
  display:block;background:#fafafa;border:1px solid var(--border-strong,#cfd7df);
  border-radius:14px;cursor:pointer;transition:all var(--dur,.15s) var(--ease,ease);overflow:hidden;
}
.extra-item-v2 .extra-head{display:flex;align-items:flex-start;gap:14px;padding:14px 16px}
.extra-item-v2 .check{
  width:22px;height:22px;border-radius:7px;border:2px solid var(--border-strong,#cfd7df);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:transparent;font-weight:700;margin-top:2px;
}
.extra-item-v2:hover{border-color:var(--accent)}
.extra-item-v2:has(> input:checked){background:var(--accent-50);border-color:var(--accent)}
.extra-item-v2:has(> input:checked) .check{background:var(--accent);border-color:var(--accent);color:#fff}
.extra-item-v2:has(> input:checked) .check::after{content:"✓"}
.extra-item-v2:has(> input:focus-visible){outline:3px solid var(--accent-100,#ffe0e7);outline-offset:2px}
.extra-item-v2 strong{display:block;font-size:14px;font-weight:700}
.extra-item-v2 small{display:block;font-size:12px;color:var(--fg-muted);margin-top:2px;line-height:1.4}
.extra-item-v2 .text{flex:1}

/* Pay button v2 — disabled state + shake */
.pay-btn[disabled],.pay-btn.is-disabled{
  background:#cfd7df;box-shadow:none;cursor:not-allowed;pointer-events:none;
}
@keyframes pm-shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
.pm-shake{animation:pm-shake .35s var(--ease,ease)}
input[aria-invalid="true"]{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-100,#ffe0e7)}

/* ============================================
   PAYMENT FLOW v3 CANÓNICO · payment-flow-spec v1.0
   Fuente: payment-system/reference/pagar-calle-qr.html
   NOTA: las clases .pm-item-v2 / .extra-item-v2 / .pm-form /
   .extra-form / .confirm-btn / .extras-v2 definidas arriba quedan
   DEPRECATED y se reemplazan por .pm-fields-block + .collapsible-card.
   ============================================ */

/* Zone card detectada */
.zone-card.detected{
  background:linear-gradient(135deg,#eef6ff,#dce9ff);
  border:1px solid #b8d4ff;
}
.zone-card.detected .auto-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:#2563eb;color:#fff;
  padding:3px 8px;border-radius:9999px;
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  margin-left:auto;flex-shrink:0;
}
.zone-card.detected .auto-badge::before{
  content:"●";font-size:8px;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* pm-ic backgrounds por marca */
.pm-item .pm-ic.black{background:#000;border-color:#000;color:#fff}
.pm-item .pm-ic.visa{background:#1a1f71;border-color:#1a1f71;color:#fff}
.pm-item .pm-ic.daviplata{background:#ed1c24;border-color:#ed1c24;color:#fff}
.pm-item .pm-ic.nequi{background:#210049;border-color:#210049;color:#fff}
.pm-item .pm-ic svg{max-width:100%;max-height:100%;display:block}

/* pm-fields-block (expandible bajo cada método de pago) */
.pm-fields-block{
  display:none;
  margin-top:8px;
  padding:14px;
  background:#fafafa;
  border:1px solid var(--accent-100);
  border-radius:14px;
  animation:slideDown .2s ease-out;
}
.pm-fields-block.open{display:block}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.pm-fields-inputs{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:10px;
}
.pm-fields-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.pm-fields-block .input-text{
  width:100%;
  background:#fff;border:1px solid var(--border);
  border-radius:10px;padding:11px 14px;
  font-size:14px;font-family:inherit;outline:none;
  transition:border-color .2s,background .2s;
  box-sizing:border-box;
}
.pm-fields-block .input-text:focus{border-color:var(--accent)}
.pm-fields-block .input-text.error,
.collapsible-body .input-text.error{
  border-color:var(--accent) !important;
  background:#fff1f4 !important;
  animation:shake .3s;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .pm-fields-block,.collapsible-body,.pm-fields-block .input-text.error,
  .collapsible-body .input-text.error,.pm-shake{animation:none!important}
}
.pm-fields-confirm{
  width:100%;padding:12px;
  background:#031927;color:#fff;
  border:0;border-radius:10px;
  font-size:13px;font-weight:700;
  font-family:inherit;cursor:pointer;
  transition:background .25s,transform .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.pm-fields-confirm:hover{background:#0a2438}
.pm-fields-confirm:active{transform:scale(.98)}
.pm-fields-confirm.confirmed{
  background:#16a34a !important;
  cursor:default;pointer-events:none;
}
.pm-fields-instant{
  font-size:12px;color:var(--fg-muted);
  text-align:center;margin:0 0 10px;
}

/* collapsible-card (recibo email step 7) */
.collapsible-card .label-row{cursor:pointer;user-select:none}
.collapsible-card .toggle-arrow{
  margin-left:auto;
  font-size:11px;font-weight:700;
  color:var(--fg-muted);
  transition:transform .2s;
  flex-shrink:0;
}
.collapsible-card.open .toggle-arrow{transform:rotate(180deg)}
.collapsible-body{
  display:none;
  margin-top:14px;
  animation:slideDown .2s ease-out;
}
.collapsible-card.open .collapsible-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.collapsible-body .input-text{
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:13px 14px;
  font-size:14px;
  font-family:inherit;
  outline:none;
  margin:0;
  transition:border-color .2s,background .2s;
  box-sizing:border-box;
}
.collapsible-body .input-text:focus{border-color:var(--accent)}
.collapsible-body .pm-fields-confirm{margin:0;width:100%;padding:13px}


/* ---- Screen mockups (SVG) ---- */
.screen-v3{
  display:inline-block;
  width:100%;
  max-width:clamp(140px, 16vw, 190px);
  height:auto;
  filter:drop-shadow(0 16px 32px rgba(11,18,32,.16)) drop-shadow(0 3px 6px rgba(11,18,32,.06));
}
.hero .screen-v3,.app-hero .screen-v3,.dl2-hero .screen-v3{max-width:clamp(200px, 22vw, 250px)}
.security-grid .screen-v3,.phones-row .screen-v3{max-width:clamp(110px, 13vw, 150px)}
.phone .screen-v3,.dl2-phone .screen-v3{max-width:100%}
.screen-v3-tilt{transform:rotate(-4deg)}
.screen-v3-tilt-r{transform:rotate(4deg)}
@media (max-width:720px){
  .screen-v3,.hero .screen-v3,.app-hero .screen-v3{max-width:70vw}
  .security-grid .screen-v3,.phones-row .screen-v3{max-width:42vw}
}

/* ============ CORPORATE PAGE (cities.html rebrand) ============ */
.corp-hero{padding:96px 0 72px;background:linear-gradient(180deg,#fff 0%,var(--accent-50) 100%);text-align:center}
.corp-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:18px auto 20px;max-width:720px}
.corp-hero .lead{font-size:18px;color:var(--fg-muted);line-height:1.6;margin:0 auto 32px}
.corp-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.corp-badges .badge{background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.corp-badges .badge .ic{width:16px;height:16px;color:var(--accent)}

.corp-section{padding:80px 0}
.corp-section .eyebrow{display:block;text-align:center;margin-bottom:4px}
.corp-section h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:10px 0 14px;line-height:1.1;text-align:center}
.corp-section .lead{font-size:16px;color:var(--fg-muted);line-height:1.55;text-align:center;margin:0 auto 48px}

.corp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto}
@media(max-width:900px){.corp-grid-3{grid-template-columns:1fr}}

.corp-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px 28px;transition:all .2s}
.corp-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(3,25,39,.08);border-color:var(--accent-200)}
.corp-icon{width:48px;height:48px;border-radius:14px;background:var(--accent-50);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.corp-icon .ic{width:24px;height:24px;color:var(--accent)}
.corp-card h3{font-size:18px;font-weight:700;margin:0 0 10px}
.corp-card p{font-size:14px;color:var(--fg-muted);line-height:1.55;margin:0}

.corp-card-accent{border-left:4px solid var(--accent)}
.corp-list{list-style:none;padding:0;margin:0 0 20px}
.corp-list li{padding:7px 0;font-size:14px;color:var(--fg-muted);border-bottom:1px dashed var(--border);padding-left:16px;position:relative}
.corp-list li:last-child{border:0}
.corp-list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.corp-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;transition:gap .2s}
.corp-link:hover{gap:10px}
.corp-link .ic{width:16px;height:16px}

.corp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:800px;margin:0 auto}
@media(max-width:560px){.corp-stats{grid-template-columns:1fr 1fr}}
.corp-stats>div{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 16px;text-align:center}
.corp-stats strong{display:block;font-size:28px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.corp-stats small{display:block;color:var(--fg-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:6px}

.corp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto}
@media(max-width:900px){.corp-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.corp-grid-4{grid-template-columns:1fr}}
.corp-tech{text-align:center}
.corp-tech .ic{width:28px;height:28px;margin-bottom:12px}
.corp-tech strong{display:block;font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.corp-tech small{display:block;font-size:13px;color:rgba(255,255,255,.6);line-height:1.45}

.corp-partners{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:800px;margin:0 auto}
.corp-partner{background:var(--accent-50);border:1px solid var(--accent-100);border-radius:14px;padding:20px 36px;font-size:16px;font-weight:700;color:var(--fg);letter-spacing:-.01em;transition:all .2s}
.corp-partner:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}

/* ============ CTA BAND DARK (navy gradient + mockup) ============ */
section.cta-band.cta-band-dark{background:linear-gradient(135deg,#031927 0%,#0a2a42 50%,#0f3654 100%);margin-top:0}
section.cta-band.cta-band-dark::before{display:none}
.cta-band-split{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;max-width:1080px;margin:0 auto;padding:72px 24px;text-align:left}
.cta-band-split h2{text-align:left;font-size:clamp(1.8rem,3.5vw,2.6rem)}
.cta-band-split p{text-align:left;opacity:.8}
.cta-band-split .ctas{display:flex;gap:14px;flex-wrap:wrap}
.cta-band-split .btn-primary.white{background:#fff;color:var(--accent);padding:16px 32px;border-radius:14px;font-size:16px;font-weight:700;text-decoration:none;display:inline-block;transition:transform .15s,box-shadow .15s}
.cta-band-split .btn-primary.white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cta-band-split .btn-secondary.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);padding:14px 32px;border-radius:14px;font-size:16px;font-weight:600;text-decoration:none;display:inline-block;transition:border-color .15s,background .15s}
.cta-band-split .btn-secondary.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta-band-split .stores{display:flex;gap:14px;flex-wrap:wrap}
.cta-band-split .store-btn{padding:14px 28px;font-size:15px}
.cta-band-mock{display:flex;justify-content:center;align-items:center}
.cta-band-mock .screen-v3{max-width:220px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.15))}
@media(max-width:720px){
  .cta-band-split{grid-template-columns:1fr;text-align:center;padding:56px 20px}
  .cta-band-split h2,.cta-band-split p{text-align:center}
  .cta-band-split .ctas,.cta-band-split .stores{justify-content:center}
  .cta-band-mock .screen-v3{max-width:180px}
}

/* Hybrid H3 subtitle — On-street / Off-street educational pattern (V1) */
.h3-sub{
  display:block;
  font-size:.62em;
  font-weight:500;
  color:var(--fg-muted, #6b7280);
  letter-spacing:.01em;
  margin-top:4px;
  opacity:.85;
}

/* KPI metric card subtitle (evergreen V1.0) */
.metric .sub{
  font-size:11.5px;
  color:var(--fg-muted, #6b7280);
  margin-top:4px;
  line-height:1.4;
  font-weight:400;
}
.metric .num{
  /* When num is a symbol (↗ ⚡) instead of a digit, adjust */
  font-feature-settings:'tnum' on, 'lnum' on;
}

/* Country-pill 'Próximamente' educational subtitle (V1.0) */
.country-pill .pill-sub{
  display:block;
  font-size:10.5px;
  font-weight:500;
  color:var(--accent, #ea1744);
  font-style:normal;
  margin-top:6px;
  letter-spacing:.01em;
  line-height:1.3;
}

/* === KPI grid — "El cambio en marcha" (V1.0 evergreen) ===================== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.kpi-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.kpi-card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg, rgba(234,23,68,.55), rgba(234,23,68,0) 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(3,25,39,.12);border-color:transparent}
.kpi-card:hover::before{opacity:1}
.kpi-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--accent-50);color:var(--accent);margin-bottom:20px;transition:background .25s ease, transform .25s ease}
.kpi-card:hover .kpi-badge{background:var(--accent);color:#fff;transform:scale(1.04)}
.kpi-body{margin-top:auto}
.kpi-label{font-family:'Poppins',sans-serif;font-size:1.0625rem;font-weight:600;color:var(--fg);letter-spacing:-.01em;line-height:1.3}
.kpi-sub{margin-top:6px;font-size:.8125rem;color:var(--fg-muted);line-height:1.5}
.kpi-art{position:absolute;right:16px;top:18px;width:96px;height:36px;opacity:.9;transition:transform .35s ease, opacity .25s ease}
.kpi-card:hover .kpi-art{transform:translateY(-2px) scale(1.04);opacity:1}
@media(max-width:960px){.kpi-grid{grid-template-columns:repeat(2,1fr);gap:16px}.kpi-card{min-height:200px;padding:20px}.kpi-art{width:84px;height:32px}}
@media(max-width:560px){.kpi-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}.kpi-card{min-height:168px;padding:20px}}
@media(prefers-reduced-motion:reduce){.kpi-card,.kpi-badge,.kpi-art{transition:none}.kpi-card:hover{transform:none}}

/* Footer brand logo — works on dark footer background (V1.0) */
.footer-brand .footer-logo{
  display:block;
  height:56px;
  width:auto;
  margin-bottom:18px;
  /* Force solid white (no halo) using extreme contrast/brightness */
  filter: brightness(0) saturate(100%) invert(100%);
  opacity:1;
  /* Crisp edges, no anti-alias gray fringe */
  image-rendering:auto;
  -webkit-filter: brightness(0) saturate(100%) invert(100%);
}
@media(max-width:560px){
  .footer-brand .footer-logo{height:48px}
}

/* === V1.0 — Fixes alignment + compact ===================================== */

/* Country pills row — uniform alignment */
.country-pills{align-items:stretch}
.country-pill{
  min-height:56px;
  padding:10px 18px;
  align-items:center;
  flex-shrink:0;
}
.country-pill-soon{
  padding:10px 20px;
}
.country-pill .pill-stack{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  gap:2px;
}
.country-pill-soon .pill-stack{
  align-items:flex-start;
}
.country-pill .pill-sub{
  display:block;
  font-size:10.5px;
  font-weight:500;
  color:var(--accent);
  font-style:normal;
  letter-spacing:.01em;
  line-height:1.25;
  margin-top:0;
  opacity:.85;
}

/* KPI cards — MORE COMPACT (V1.0 final) */
.kpi-card{
  min-height:170px !important;
  padding:20px !important;
}
.kpi-badge{
  margin-bottom:14px !important;
  width:36px !important;
  height:36px !important;
  border-radius:9px !important;
}
.kpi-badge svg{width:18px;height:18px}
.kpi-label{font-size:1rem !important}
.kpi-sub{font-size:.78rem !important;margin-top:4px !important}
.kpi-art{
  width:80px !important;
  height:30px !important;
  top:18px !important;
  right:18px !important;
}
@media(max-width:960px){
  .kpi-card{min-height:160px !important;padding:18px !important}
  .kpi-art{width:72px !important;height:28px !important}
}
@media(max-width:560px){
  .kpi-card{min-height:140px !important;padding:18px !important}
}

/* === Brand red — diagonal gradient text (V1.0 visual upgrade) ============== */
/* Applied to all .accent spans in section titles, hero H1s, card H3s */
h1 .accent,
h2 .accent,
h3 .accent,
.section-title .accent,
.hero-page h1 .accent,
.hero h1 .accent,
.accent {
  background: linear-gradient(135deg, #ea1744 0%, #ff3866 50%, #ea1744 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ea1744; /* fallback for browsers without background-clip */
  /* Slight padding so gradient doesn't clip descenders */
  padding-right: 0.04em;
}

/* On dark backgrounds, brighten the gradient a touch for more punch */
footer .accent,
.dl-hero .accent,
.hero-dark .accent,
[data-theme="dark"] .accent {
  background: linear-gradient(135deg, #ff3866 0%, #ff6088 50%, #ea1744 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff3866;
}

/* Reduced motion: no animation (gradient is static anyway, but be defensive) */
@media (prefers-reduced-motion: reduce) {
  .accent { transition: none; }
}

/* AI-first tag in footer bottom (V1.0) */
.footer-bottom .ai-tag{
  display:inline-block;
  background:linear-gradient(135deg, rgba(234,23,68,.15) 0%, rgba(255,56,102,.15) 100%);
  color:#ff6088;
  font-weight:600;
  font-size:.78rem;
  padding:2px 9px;
  border-radius:999px;
  letter-spacing:.02em;
  border:1px solid rgba(255,86,116,.22);
  vertical-align:1px;
}
.footer-bottom strong{font-weight:700;color:#fff}

/* === Paymeter Bot CTA in footer (AI-first feature) ========================== */
.contact-cta--bot{
  position:relative;
  background: linear-gradient(135deg, rgba(234,23,68,.12), rgba(255,86,116,.08)) !important;
  border:1px solid rgba(255,86,116,.28) !important;
}
.contact-cta--bot::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,86,116,.0), rgba(255,86,116,.18), rgba(255,86,116,.0));
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.contact-cta--bot:hover::after{opacity:1}
.contact-cta--bot .ico{
  background:linear-gradient(135deg, #ea1744, #ff3866);
  color:#fff;
}
.contact-cta--bot strong{
  font-size:11px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.75) !important;
  letter-spacing:.01em;
  line-height:1.35;
}
.contact-cta--bot small{
  color:#fff !important;
  font-weight:700 !important;
  font-size:13px !important;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* AI pill — tiny gradient badge next to "Paymeter Bot" */
.ai-pill{
  display:inline-block;
  background:linear-gradient(135deg, #ea1744, #ff3866);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  padding:2px 6px;
  border-radius:4px;
  vertical-align:1px;
  text-transform:uppercase;
}

/* Subtle pulse animation on bot icon — feels alive */
@keyframes botPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,86,116,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(255,86,116,0); }
}
.contact-cta--bot .ico{
  animation: botPulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .contact-cta--bot .ico{animation:none}
}

/* === WhatsApp · MIA card (live · AI-first highlight) ====================== */
.mc-card--live{
  position:relative;
  background: linear-gradient(135deg, #ea1744 0%, #ff3866 100%) !important;
  border:1px solid transparent !important;
  color:#fff !important;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  box-shadow:0 16px 40px -8px rgba(234,23,68,.35);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.mc-card--live::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-30%;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events:none;
}
.mc-card--live:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px -8px rgba(234,23,68,.5);
}
.mc-card--live h3{color:#fff !important}
.mc-card--live p{color:rgba(255,255,255,.92) !important}
.mc-card--live p strong{color:#fff !important;font-weight:700}
.mc-card--live .mc-ic--wa{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.mc-badge--ai{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  font-weight:800;
  font-size:10px;
  letter-spacing:.16em;
  padding:4px 9px !important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);
}
.mc-cta{
  display:inline-block;
  margin-top:auto;
  padding-top:14px;
  font-weight:700 !important;
  font-size:14px !important;
  color:#fff !important;
  letter-spacing:-.005em;
  transition:transform .2s ease;
}
.mc-card--live:hover .mc-cta{
  transform:translateX(4px);
}

@media (prefers-reduced-motion: reduce){
  .mc-card--live{transition:none}
}


/* About page — number grid 6 cells (3x2) + partners "+ more" indicator */
.ns-num-grid--6{grid-template-columns:repeat(3,1fr) !important}
@media(max-width:760px){.ns-num-grid--6{grid-template-columns:repeat(2,1fr) !important}}
.ns-partners-line .more{
  background:linear-gradient(135deg, #ea1744, #ff3866);
  color:#fff !important;
  font-weight:700;
  font-size:14px !important;
  padding:6px 16px;
  border-radius:9999px;
  margin-left:8px !important;
  display:inline-block;
  vertical-align:middle;
  letter-spacing:-.005em;
  box-shadow:0 6px 16px -4px rgba(234,23,68,.4);
}
.ns-partners-line .more::after{display:none !important}

/* Inline accent link (used in pullquote: "iPark" → ipark.com.co) */
.acc-link{
  text-decoration:none;
  position:relative;
  cursor:pointer;
  transition:opacity .2s ease;
}
.acc-link::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:linear-gradient(135deg, #ea1744 0%, #ff3866 100%);
  border-radius:1px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.acc-link:hover::after{transform:scaleX(1)}
.acc-link:hover{opacity:.85}


/* About — partners grid (mirrors numbers grid style) */
.ns-part-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  margin-top:24px;
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:760px){.ns-part-grid{grid-template-columns:repeat(2,1fr)}}
.ns-part-cell{
  background:#fff;
  padding:32px 20px;
  text-align:center;
  transition:background .25s ease;
}
.ns-part-cell:hover{background:#fafafa}
.ns-part-cell span{
  font-size:18px;
  font-weight:700;
  color:#031927;
  letter-spacing:-.01em;
}
.ns-part-more{
  text-align:center;
  margin-top:24px;
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  background:linear-gradient(135deg, #ea1744, #ff3866);
  color:#fff;
  display:inline-block;
  padding:10px 22px;
  border-radius:9999px;
  box-shadow:0 8px 20px -6px rgba(234,23,68,.35);
  margin-left:50%;
  transform:translateX(-50%);
}


/* About — partners head matches numbers head (center) */
.ns-partners .ns-numbers-head{text-align:center;margin-bottom:48px}
.ns-part-more-wrap{text-align:center;margin-top:28px}
.ns-part-more-wrap .ns-part-more{
  display:inline-block;
  margin-left:0 !important;
  transform:none !important;
}

/* ===========================================================================
   HOME UPGRADE — Align legacy classes with ns-* design system (V1.0)
   =========================================================================== */

/* Hero H1 — bigger, bolder, more impactful (like ns-headline) */
.hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  margin-top: 28px !important;
}
.hero h1 .accent {
  font-style: italic;
  font-weight: 800;
}

/* Hero eyebrow — match ns-section-tag */
.hero .eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  padding: 6px 14px !important;
}

/* Section eyebrow — match ns-section-tag size/style */
.section-eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Section title — match ns-h2 (bigger, tighter, bolder) */
.section-title {
  margin-top: 18px !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  max-width: 760px !important;
}

/* Italic on hero accent to match ns-headline DNA */
.hero h1 .accent,
h1 .accent {
  /* gradient is already applied globally; just add italic flourish */
  font-style: italic;
}

/* Section lead — slightly more polished */
.section-lead {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--fg-muted);
}

/* Subtitle (hero) */
.subtitle {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--fg-muted);
  margin-top: 24px !important;
}


/* "Crear cuenta gratis · Próx." button styling (V1.0) */
.btn-soon{position:relative;opacity:.85;cursor:pointer}
.btn-soon:hover{opacity:1}
.btn-soon-badge{display:inline-block;background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:4px;margin-left:6px;text-transform:uppercase;vertical-align:1px;border:1px solid rgba(255,255,255,.18)}
/* Lighter version when used on light backgrounds */
.cta-band-dark .btn-soon-badge,.dl-band .btn-soon-badge{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.22)}