/* ===== Car Rental — design tokens ===== */
:root{
  --bg:#f1f4f8;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#0a1c34;
  --ink-2:#475467;
  --ink-3:#7a8aa0;
  --line:rgba(10,28,52,.10);
  --line-2:rgba(10,28,52,.06);

  --navy-950:#07182f;
  --navy-900:#0a1f3c;
  --navy-800:#102b50;
  --navy-700:#1b3a66;

  --accent:#2f6bff;            /* tweakable */
  --accent-press:#1f57e0;
  --accent-soft:rgba(47,107,255,.10);
  --on-accent:#ffffff;

  --good:#0f9d63;
  --good-soft:rgba(15,157,99,.12);
  --warn:#b5811d;
  --warn-soft:rgba(181,129,29,.12);
  --danger:#d4493f;

  --r-card:20px;               /* tweakable via --r-scale */
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(10,28,52,.06), 0 1px 3px rgba(10,28,52,.05);
  --shadow-md:0 2px 6px rgba(10,28,52,.05), 0 18px 40px -22px rgba(10,28,52,.35);
  --shadow-lg:0 10px 30px -10px rgba(10,28,52,.28), 0 40px 80px -40px rgba(10,28,52,.40);

  --maxw:1180px;
  --pad:24px;

  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --row-gap:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.011em;
}
::selection{background:var(--accent-soft);}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}

/* density */
[data-density="compact"]{ --row-gap:11px; --pad:18px; }

.app-root{min-height:100vh;display:flex;flex-direction:column;}

/* ---- shells ---- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.wrap-wide{max-width:1320px;}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:var(--r-md);
  font-weight:600;font-size:15px;line-height:1;letter-spacing:-0.01em;
  padding:0 18px;height:46px;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s;
  user-select:none;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -10px var(--accent);}
.btn-primary:hover{background:var(--accent-press);}
.btn-dark{background:var(--navy-900);color:#fff;}
.btn-dark:hover{background:var(--navy-800);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{background:var(--surface-2);border-color:rgba(10,28,52,.18);}
.btn-quiet{background:transparent;color:var(--ink-2);}
.btn-quiet:hover{color:var(--ink);background:var(--surface-2);}
.btn-lg{height:54px;font-size:16px;padding:0 26px;border-radius:var(--r-md);}
.btn-xl{height:60px;font-size:17px;padding:0 34px;}
.btn-block{display:flex;width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-md);}
.card-flat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);}

/* ---- fields ---- */
.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px;letter-spacing:.01em;}
.input{
  width:100%;height:48px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:0 14px;font-size:15px;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{color:var(--ink-3);}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.input-icon{position:relative;}
.input-icon .input{padding-left:42px;}
.input-icon > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);letter-spacing:.01em;line-height:1;}
.badge-accent{background:var(--accent-soft);color:var(--accent-press);}
.badge-good{background:var(--good-soft);color:var(--good);}
.badge-warn{background:var(--warn-soft);color:var(--warn);}
.badge-navy{background:var(--navy-900);color:#fff;}
.badge-soft{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);}
.badge-glass{background:rgba(7,24,47,.62);color:#fff;backdrop-filter:blur(6px);}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-press);font-weight:500;}
.muted{color:var(--ink-2);}
.tabnum{font-variant-numeric:tabular-nums;}

/* spec chip */
.spec{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);font-weight:500;}
.spec svg{color:var(--ink-3);}

/* placeholder image */
.ph{
  position:relative;overflow:hidden;background:
    repeating-linear-gradient(135deg,#e9eef5 0 12px,#eef2f8 12px 24px);
  display:flex;align-items:center;justify-content:center;color:#9aa9bf;
}
.ph::after{content:attr(data-label);font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:#8493a8;padding:4px 9px;background:rgba(255,255,255,.78);border-radius:6px;}
.ph-dark{background:repeating-linear-gradient(135deg,#0c2b4f 0 14px,#0e2f57 14px 28px);color:#7e93b3;}
.ph-dark::after{background:rgba(7,24,47,.55);color:#b9c8de;}

/* dividers */
.hr{height:1px;background:var(--line);border:0;margin:0;}

/* sticky chrome */
.sticky-top{position:sticky;top:0;z-index:40;}

/* stepper */
.stepper{display:flex;align-items:center;gap:0;}
.step{display:flex;align-items:center;gap:9px;color:var(--ink-3);font-size:13px;font-weight:600;}
.step .dot{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink-3);}
.step.active{color:var(--ink);}
.step.active .dot{background:var(--accent);border-color:var(--accent);color:#fff;}
.step.done .dot{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.step.done{color:var(--ink-2);}
.step-line{width:34px;height:1.5px;background:var(--line);margin:0 10px;}
.step.done + .step-line, .step-line.filled{background:var(--navy-900);}

/* radio cards */
.radio-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;transition:.15s;}
.radio-dot.on{border-color:var(--accent);}
.radio-dot.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popCheck{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}
@keyframes drawCircle{to{stroke-dashoffset:0;}}
@keyframes confettiFall{to{transform:translateY(120px) rotate(360deg);opacity:0;}}
.screen-enter{animation:fadeUp .4s cubic-bezier(.22,.61,.36,1) both;}
@media (prefers-reduced-motion:reduce){.screen-enter{animation:none;}}

/* carousel */
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;}
.carousel::-webkit-scrollbar{display:none;}
.carousel > *{scroll-snap-align:start;flex:none;}

/* utility grid */
.grid{display:grid;}
.flex{display:flex;}
.between{display:flex;align-items:center;justify-content:space-between;}
.center{display:flex;align-items:center;}

/* link */
.link{color:var(--accent-press);font-weight:600;cursor:pointer;text-decoration:none;}
.link:hover{text-decoration:underline;}

/* focus ring for clickable cards */
.selectable{cursor:pointer;transition:border-color .15s, box-shadow .15s, transform .15s;}
.selectable:hover{border-color:rgba(10,28,52,.20);box-shadow:var(--shadow-lg);}
.selectable.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-md);}

/* mobile note pill */
.mobile-note{position:fixed;right:16px;bottom:16px;z-index:30;}

@media (max-width:880px){
  :root{--pad:16px;}
}

/* ---- Animaciones de entrada al scroll (IntersectionObserver) ---- */
.reveal{opacity:0;transform:translateY(32px) scale(.97);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.revealed{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.revealed{transition:none;opacity:1;transform:none;}
}