/* Portal de partners Vistalba Bikes — mismo lenguaje que vistalbabikes.com y que prototipo/partners.html:
   header blanco con logo, franja lima, títulos Bricolage 800, notas a mano en Caveat, botones píldora lima.
   Móvil primero: pestañas con scroll horizontal, tablas con scroll propio, sin scroll horizontal de página. */
:root{
  --ground:#fbfcf6; --paper:#ffffff; --field:#f6f8ee;
  --ink:#22261a; --ink-2:#4d5342; --ink-3:#7d836f; --line:#e2e6d3;
  --lime:#9db42a; --lime-deep:#5f7a10; --lime-soft:#eef3d6; --lime-band:#a7bd34; --on-lime:#ffffff;
  --yellow:#f4e11a; --yellow-ink:#3a3600; --charcoal:#3a3d33; --on-charcoal:#f3f5ea;
  --wa:#1f8a4d; --focus:#1f6fb5;
  --ok:#4f6b0c; --ok-soft:#eef3d6; --warn:#8a5a00; --warn-soft:#fbf1cf; --bad:#a3322a; --bad-soft:#f8e3df; --info:#1f5f95; --info-soft:#e3eef8;
  --gold:#b98a00; --silver:#7d836f; --bronze:#a8612e;
  --shadow:0 18px 50px -18px rgba(34,38,26,.35);
  --display:"Bricolage Grotesque","Arial Black",Impact,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --hand:"Caveat","Segoe Script","Comic Sans MS",cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#171a12; --paper:#20251a; --field:#1b2015; --ink:#eef0e4; --ink-2:#c5cab6; --ink-3:#8f957f; --line:#333a29;
    --lime:#b5cc3f; --lime-deep:#c9dd63; --lime-soft:#2a3318; --lime-band:#7f9424; --on-lime:#1a2008;
    --yellow:#e6d41c; --yellow-ink:#1e1b00; --charcoal:#0f120b; --on-charcoal:#eef0e4;
    --wa:#3fbf78; --focus:#7fb4ea;
    --ok:#c9dd63; --ok-soft:#2a3318; --warn:#e8c25a; --warn-soft:#382d10; --bad:#f0907f; --bad-soft:#3a1f1a; --info:#8fbfe8; --info-soft:#1a2a38;
    --gold:#e6c14a; --silver:#b9bea9; --bronze:#d9925c;
    --shadow:0 18px 50px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#171a12; --paper:#20251a; --field:#1b2015; --ink:#eef0e4; --ink-2:#c5cab6; --ink-3:#8f957f; --line:#333a29;
  --lime:#b5cc3f; --lime-deep:#c9dd63; --lime-soft:#2a3318; --lime-band:#7f9424; --on-lime:#1a2008;
  --yellow:#e6d41c; --yellow-ink:#1e1b00; --charcoal:#0f120b; --on-charcoal:#eef0e4;
  --wa:#3fbf78; --focus:#7fb4ea;
  --ok:#c9dd63; --ok-soft:#2a3318; --warn:#e8c25a; --warn-soft:#382d10; --bad:#f0907f; --bad-soft:#3a1f1a; --info:#8fbfe8; --info-soft:#1a2a38;
  --gold:#e6c14a; --silver:#b9bea9; --bronze:#d9925c;
  --shadow:0 18px 50px -18px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.015em;text-wrap:balance;line-height:1.05}
h1{font-size:clamp(30px,5vw,46px)}
h2{font-size:clamp(20px,2.6vw,25px)}
h3{font-size:17px}
p{margin:0}
a{color:var(--lime-deep);text-decoration-thickness:1.5px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums;font-weight:700}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-deep);font-weight:800}
.hand{font-family:var(--hand);font-size:24px;color:var(--lime-deep);line-height:1}
.mark{background:linear-gradient(transparent 55%,var(--yellow) 55%,var(--yellow) 92%,transparent 92%);color:inherit;padding:0 .1em}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* encabezado */
header.top{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);z-index:5}
header.top .in{max-width:1080px;margin:0 auto;padding:8px 20px 0;display:grid;gap:6px}
.brand{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding-bottom:6px}
.brand .who{display:flex;align-items:center;gap:14px;min-width:0}
.brand img.logo{height:54px;width:auto;display:block}
.brand .name{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.1}
.brand .sub{font-size:13px;color:var(--ink-3)}
@media (max-width:560px){.brand img.logo{height:44px}.brand .name{font-size:16px}}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-inline:-4px}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;padding:10px 12px 12px;border-bottom:3px solid transparent;color:var(--ink-2);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tab:hover{color:var(--lime-deep)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--lime)}
.tab[disabled]{opacity:.45;cursor:default}
.band{height:6px;background:var(--lime-band)}

main{max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:28px 80px;display:grid;gap:22px}
.head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.head p{margin-top:8px;color:var(--ink-2);max-width:60ch;font-size:17px}

/* portada */
.hero{position:relative;border-radius:24px;overflow:hidden;min-height:250px;display:grid;align-items:end;color:#fff;background:#3a3d33}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 45%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(20,30,5,.8) 100%)}
.hero .in{position:relative;z-index:1;padding:28px;display:grid;gap:8px}
.hero .hand{color:#f4e11a;font-size:28px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.hero h1{text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero p{color:#f1f5e6;max-width:44ch;text-shadow:0 1px 6px rgba(0,0,0,.4)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.g2{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;min-width:0}
.pad{padding:20px 22px;display:grid;gap:12px;align-content:start}

.btn{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 18px;font-weight:800;display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:42px;text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s}
.btn:hover{transform:translateY(-1px);border-color:var(--ink-3)}
.btn.primary{background:var(--lime);color:var(--on-lime);border-color:var(--lime);box-shadow:0 8px 22px -12px rgba(95,122,16,.8)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.sm{padding:4px 12px;font-size:13px;min-height:32px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.link{border:0;background:transparent;padding:0;min-height:0;color:var(--lime-deep);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.sb{justify-content:space-between}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;padding:2px 10px;border-radius:20px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-info{background:var(--info-soft);color:var(--info)}
.p-mute{background:var(--field);color:var(--ink-2)}
.code{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--yellow-ink);border-radius:999px;padding:6px 14px;font-weight:800;letter-spacing:.06em;font-size:13px}

/* formularios */
label.f{display:grid;gap:5px;font-size:13px;color:var(--ink-2);font-weight:700}
.field{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-height:42px;width:100%;font-weight:400}
.field:focus{border-color:var(--lime);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 30%,transparent)}
.hint{font-size:13px;color:var(--ink-3)}
.err{font-size:14px;color:var(--bad);font-weight:700}
.okmsg{font-size:14px;color:var(--ok);font-weight:700}

/* ingreso */
.login{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;background:var(--ground)}
.login .wrap{display:grid;place-items:center;padding:28px 16px 60px}
.login .card{width:100%;max-width:420px;display:grid;gap:18px;padding:28px 24px}
.login .card img.logo{height:76px;width:auto;justify-self:start}
.login h1{font-size:clamp(28px,7vw,36px)}
.otp{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:.35em;text-align:center;padding-left:.35em;font-variant-numeric:tabular-nums}
.login .cover{height:170px;border-radius:24px 24px 0 0;overflow:hidden;margin:-28px -24px 0;position:relative}
.login .cover img{width:100%;height:100%;object-fit:cover;object-position:68% 45%;display:block}

.state{padding:36px 16px;text-align:center;color:var(--ink-3)}
.soon{border:2px dashed var(--line);border-radius:20px;padding:22px;display:grid;gap:6px;color:var(--ink-2)}

/* aviso flotante */
#toast-root{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;pointer-events:none;z-index:20;padding:0 16px}
.toast{background:var(--charcoal);color:var(--on-charcoal);border-radius:14px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:var(--shadow);max-width:100%}