html{-webkit-text-size-adjust:100%}
  :root{
    color-scheme:light;
    --bg:#ffffff;
    --surface:#f9fafb;
    --surface-2:#f3f4f6;
    --ink:#111827;
    --ink-2:#374151;
    --muted:#6b7280;
    --line:#e5e7eb;
    --accent:#2563eb;
    --accent-strong:#1d4ed8;
    --accent-tint:#eff6ff;
    --accent-soft:#bfdbfe;
    --on-accent:#ffffff;
    --b50:#eff6ff; --b100:#dbeafe; --b200:#bfdbfe; --b300:#93c5fd; --b400:#60a5fa;
    --violet:#7c3aed; --v100:#ede9fe; --v200:#ddd6fe; --v300:#c4b5fd;

    --f-body:"Segoe UI","Avenir Next",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    --f-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
    --wrap:1080px;
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--ink);
       font-family:var(--f-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
  .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
  h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.021em; line-height:1.08; font-weight:650}
  p{margin:0}
  a{color:inherit}
  .eyebrow{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.15em;
           text-transform:uppercase; color:var(--muted)}

  /* nav */
  .nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; gap:20px; height:60px}
  .logo{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.028em; font-size:18.5px}
  .logo-mark{width:20px; height:24px; border-radius:4px; flex:none; background:var(--ink);
             display:grid; grid-template-rows:repeat(3,1fr); gap:2px; padding:3px}
  .logo-mark i{display:block; border-radius:1px; background:var(--accent)}
  .logo-mark i:nth-child(1){background:var(--b300)}
  .logo-mark i:nth-child(2){background:var(--violet)}
  .logo .name{white-space:nowrap}
  .logo .two{color:var(--violet)}
  .nav-links{margin-left:auto; display:flex; align-items:center; gap:4px}
  .nav-links a{text-decoration:none; font-size:13.5px; font-weight:600; color:#fff;
               background:var(--accent); padding:7px 13px; border-radius:7px;
               line-height:1.2; transition:background .12s ease}
  .nav-links a:hover{background:var(--accent-strong)}
  .nav-links a.active{background:var(--violet)}
  .nav-links a.active:hover{background:#6d28d9}
  .lang{display:flex; border-radius:7px; overflow:hidden; margin-left:8px;
        font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.08em}
  .lang button{appearance:none; border:0; background:var(--accent); color:#fff;
               padding:7px 10px; cursor:pointer; font:inherit; line-height:1.2;
               box-shadow:inset -1px 0 0 rgba(255,255,255,.35)}
  .lang button:last-child{box-shadow:none}
  .lang button:hover{background:var(--accent-strong)}
  .lang button[aria-pressed="true"]{background:var(--violet)}

  /* hero */
  .hero{padding:78px 0 66px}
  .hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center}
  h1{font-size:clamp(38px,5.4vw,62px)}
  .lead{margin-top:20px; font-size:19px; color:var(--ink-2); max-width:46ch}
  .hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px}
  .btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
       padding:12.5px 20px; border-radius:9px; font-size:15.5px; font-weight:600;
       border:1px solid transparent; transition:background .12s ease, transform .12s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent); color:var(--on-accent)}
  .btn-primary:hover{background:var(--accent-strong)}
  .btn-ghost{border-color:var(--line); color:var(--ink)}
  .btn-ghost:hover{background:var(--surface-2)}
  .price-tag{display:inline-flex; align-items:baseline; gap:7px; font-family:var(--f-mono);
             padding:9px 13px; border:1px solid var(--line); border-radius:9px;
             font-size:12.5px; color:var(--muted); letter-spacing:.03em}
  .price-tag b{font-size:19px; color:var(--ink); letter-spacing:-.02em}
  .status{display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
          font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
          color:var(--accent); background:var(--accent-tint);
          border:1px solid var(--accent-soft); padding:6px 12px; border-radius:999px}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}

  /* locker bank */
  .bank{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px}
  .bank-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
  .door{aspect-ratio:5/6; border-radius:6px; position:relative; border:0;
        box-shadow:inset -5px 0 0 rgba(0,0,0,.10)}
  .door::after{content:""; position:absolute; right:9px; top:50%; width:8px; height:8px;
               transform:translateY(-50%); border-radius:50%; background:rgba(255,255,255,.62)}
  .door.d1{background:#1d4ed8}
  .door.d2{background:#2563eb}
  .door.d3{background:#3b82f6}
  .door.d4{background:#60a5fa}
  .door.d5{background:#93c5fd}
  .door.d5::after{background:rgba(15,23,42,.28)}
  .door.v1{background:#6d28d9}
  .door.v2{background:#a78bfa}
  .door.v2::after{background:rgba(15,23,42,.28)}
  .door.open{background:#fff; box-shadow:inset 0 0 0 2px var(--accent);
             display:grid; place-items:center; container-type:size; overflow:hidden}
  .door.open::after{display:none}
  .door.open span{line-height:1; font-size:clamp(46px,7.6vw,96px)}
  @supports (font-size:1cqw){ .door.open span{font-size:74cqw} }
  .keypad{grid-column:span 4; margin-top:3px; display:flex; align-items:center; gap:14px;
          background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:11px 13px}
  .screen{font-family:var(--f-mono); font-size:15px; letter-spacing:.34em;
          color:var(--accent); background:var(--accent-tint); border-radius:5px; padding:6px 11px}
  .keys{margin-left:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
  .keys i{width:18px; height:13px; border-radius:2px; background:var(--line); display:block}

  /* sections */
  section{padding:72px 0; border-top:1px solid var(--line)}
  .sec-head{max-width:62ch; margin-bottom:36px}
  h2{font-size:clamp(26px,3.1vw,36px); margin-top:11px}
  section h2{color:var(--accent)}
  .hosts h2{color:var(--ink)}
  h2 .hl{color:var(--violet)}
  .sec-head p{margin-top:13px; color:var(--ink-2); font-size:17px}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
  .step{border-top:2px solid var(--ink); padding-top:17px}
  .step .n{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; color:var(--accent)}
  .step h3{font-size:19px; margin:8px 0 7px}
  .step p{color:var(--ink-2); font-size:15.5px}

  .sizes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .size{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:21px;
        display:flex; flex-direction:column; gap:9px}
  .size .bar{height:5px; border-radius:99px; width:42px; background:var(--accent)}
  .size:nth-child(1) .bar{opacity:.35}
  .size:nth-child(2) .bar{opacity:.65}
  .size h3{font-size:17.5px}
  .size .dim{font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.02em}
  .size p{color:var(--ink-2); font-size:15px}
  .price-note{margin-top:24px; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
              font-size:16px; color:var(--ink-2)}
  .price-note b{font-family:var(--f-mono); font-size:29px; color:var(--ink); letter-spacing:-.03em}

  .places{display:grid; grid-template-columns:repeat(4,1fr); gap:13px}
  .place{border:1px solid var(--line); border-radius:11px; padding:17px; background:var(--surface);
         display:flex; flex-direction:column; gap:5px; min-height:116px}
  .place .zone{font-weight:650; font-size:17px}
  .place .why{color:var(--muted); font-size:14px; line-height:1.45}
  .place .flag{margin-top:auto; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
               text-transform:uppercase; color:var(--accent)}
  .place.soon{background:transparent; border-style:dashed}
  .place.soon .flag{color:var(--muted)}

  /* franja para establecimientos */
  .hosts{background:var(--accent-tint); border-top:1px solid var(--accent-soft)}
  .host-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:34px}
  .host-cell{border-top:1px solid var(--accent-soft); padding-top:16px}
  .host-cell .big{font-family:var(--f-mono); font-size:28px; letter-spacing:-.03em; color:var(--accent)}
  .host-cell p{margin-top:6px; font-size:15px; color:var(--ink-2)}
  .hosts .btn-ghost{border-color:var(--accent-soft); background:var(--bg)}
  .hosts .btn-ghost:hover{background:#fff}

  footer{padding:42px 0 54px; border-top:1px solid var(--line); color:var(--muted); font-size:14.5px}
  .foot{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
  footer a{color:var(--ink-2)}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:38px}
    .steps,.sizes,.places,.host-grid{grid-template-columns:1fr 1fr}
    .nav-in{gap:10px}
    .nav-links{gap:6px}
    .nav-links a{display:none}
    .nav-links a.movil{display:inline-flex; font-size:12.5px; padding:7px 10px}
  }
  @media (max-width:420px){
    .logo .name{display:none}
    .nav-links a.movil{font-size:12px; padding:7px 9px}
  }
  @media (max-width:560px){
    body{font-size:16px}
    .steps,.sizes,.places,.host-grid{grid-template-columns:1fr}
    .hero{padding:50px 0 42px}
    section{padding:54px 0}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

  /* ---- boton flotante de WhatsApp ---- */
  .wa{position:fixed; right:20px; bottom:20px; z-index:50;
      width:56px; height:56px; border-radius:50%; background:#25D366;
      display:grid; place-items:center; text-decoration:none;
      box-shadow:0 6px 20px -4px rgba(15,23,42,.35), 0 2px 6px rgba(15,23,42,.18);
      transition:transform .14s ease, box-shadow .14s ease}
  .wa:hover{transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(15,23,42,.42)}
  .wa svg{width:31px; height:31px; fill:#fff; display:block}
  .wa .tip{position:absolute; right:68px; white-space:nowrap; background:var(--ink); color:#fff;
           font-size:13px; font-weight:600; padding:7px 11px; border-radius:7px;
           opacity:0; pointer-events:none; transition:opacity .14s ease}
  .wa:hover .tip, .wa:focus-visible .tip{opacity:1}
  @media (max-width:560px){ .wa{right:14px; bottom:14px; width:52px; height:52px} .wa .tip{display:none} }

  /* ---- pagina de establecimientos ---- */
  .lead-page{padding:64px 0 8px}
  .lead-page h1{font-size:clamp(32px,4.4vw,50px)}
  .lead-page h1 .hl{color:var(--violet)}
  .lead-page .lead{max-width:56ch}
  .figuras{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px}
  .figura{border-top:3px solid var(--accent); padding-top:15px}
  .figura:nth-child(2){border-top-color:var(--violet)}
  .figura .big{font-family:var(--f-mono); font-size:32px; letter-spacing:-.03em; color:var(--ink)}
  .figura p{margin-top:6px; font-size:15px; color:var(--ink-2)}
  .req{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
  .req div{background:var(--surface); border:1px solid var(--line); border-radius:11px;
           padding:17px 19px; font-size:16px; color:var(--ink-2)}
  .req b{color:var(--ink); display:block; margin-bottom:3px}
  .faq{display:grid; gap:20px}
  .faq h3{font-size:18px; color:var(--accent)}
  .faq p{margin-top:6px; color:var(--ink-2); font-size:16px}
  .cierre{background:var(--accent-tint); border-top:1px solid var(--accent-soft)}
  .cierre .btn-wa{background:#25D366; color:#fff}
  .cierre .btn-wa:hover{background:#1eb757}
  @media (max-width:900px){ .figuras{grid-template-columns:1fr 1fr} .req{grid-template-columns:1fr} }
  @media (max-width:560px){ .figuras{grid-template-columns:1fr} }

  /* ---- formulario de contacto ---- */
  .form{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; max-width:560px}
  .form label{display:grid; grid-template-columns:minmax(0,1fr); gap:6px;
              font-size:14.5px; font-weight:600; color:var(--ink); min-width:0}
  .form input, .form textarea, .form select{
      font:inherit; font-size:16px; font-weight:400; color:var(--ink);
      width:100%; min-width:0; max-width:100%;
      background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:11px 13px}
  .form textarea{min-height:120px; resize:vertical}
  .form input:focus, .form textarea:focus, .form select:focus{
      outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  .form .btn{justify-self:start; border:0; cursor:pointer}
  .vias{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px}
  .via{border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--surface);
       text-decoration:none; display:block}
  .via:hover{border-color:var(--accent-soft); background:var(--accent-tint)}
  .via b{display:block; font-size:16px; color:var(--ink)}
  .via span{display:block; margin-top:4px; font-size:14.5px; color:var(--muted)}
  .via .q{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
          color:var(--accent); display:block; margin-bottom:7px}
  @media (max-width:700px){ .vias{grid-template-columns:1fr} }

  /* ---- tabla de estimacion de ingresos ---- */
  .tabla{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; max-width:620px}
  .tabla th, .tabla td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--line)}
  .tabla thead th{font-size:12px; letter-spacing:.1em; text-transform:uppercase;
                  color:var(--muted); font-family:var(--f-mono); font-weight:400; border-bottom:2px solid var(--ink)}
  .tabla td:last-child{font-family:var(--f-mono); font-size:19px; color:var(--ink); font-weight:600}
  .tabla tr.destacada td{background:var(--accent-tint)}
  .tabla tr.destacada td:last-child{color:var(--accent)}
  .tabla .marca{display:inline-block; margin-left:9px; font-family:var(--f-body); font-size:12px;
                font-weight:600; color:var(--accent); vertical-align:middle}
  .aviso{margin-top:16px; font-size:14.5px; color:var(--muted); max-width:62ch}
  .scroll-x{overflow-x:auto}

  /* la via de WhatsApp, en su verde */
  .via.wapp{background:#ecfdf3; border-color:#a7e9c4}
  .via.wapp:hover{background:#dcf8e8; border-color:#6fd9a2}
  .via.wapp .q{color:#0f8a4a}
  .via.wapp b{color:#0b5c33}

  .size .precio{font-family:var(--f-mono); font-size:26px; font-weight:700; color:var(--accent);
                letter-spacing:-.03em; margin-top:2px}
  .size .precio small{font-family:var(--f-body); font-size:13px; font-weight:600;
                      color:var(--muted); letter-spacing:0; margin-left:5px}