/* ─────────────────────────────────────────────────────────────────────────
   DRIVO renting — Brand tokens
   Verde DRIVO + neutros cálidos. Solo dos familias cromáticas.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Greens — tomado del logo (verde bosque profundo) */
  --drivo-green-950: #14302C;
  --drivo-green-900: #1B3D38;  /* color base de marca */
  --drivo-green-800: #224B45;
  --drivo-green-700: #2D5C55;
  --drivo-green-600: #3D6F67;
  --drivo-green-500: #5E8B83;
  --drivo-green-300: #A4BFB9;
  --drivo-green-100: #DDE7E4;
  --drivo-green-50:  #EEF2F0;

  /* Neutros cálidos */
  --drivo-bone:      #FAF7F1;   /* off-white cálido, fondo "claro" elegante */
  --drivo-cream:     #F2EDE2;   /* fondo crema para alternancia */
  --drivo-sand:      #E8E2D2;
  --drivo-line:      #E5E0D5;
  --drivo-stone-400: #B6B0A4;
  --drivo-stone-600: #6E6A60;
  --drivo-ink:       #14140F;

  /* Mapeos semánticos por defecto (Home A — conservadora) */
  --bg:        var(--drivo-bone);
  --bg-alt:    #ffffff;
  --bg-dark:   var(--drivo-green-900);
  --fg:        var(--drivo-ink);
  --fg-muted:  var(--drivo-stone-600);
  --fg-on-dark: #F2EDE2;
  --fg-on-dark-muted: rgba(242,237,226,0.65);
  --line:      var(--drivo-line);
  --line-dark: rgba(242,237,226,0.16);
  --brand:     var(--drivo-green-900);
  --brand-ink: var(--drivo-green-950);
}

/* ─── Type ─────────────────────────────────────────────────────────────── */

.drivo {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
.drivo * { box-sizing: border-box; }

.drivo .eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.drivo .eyebrow--on-dark { color: var(--drivo-green-300); }

.drivo h1, .drivo h2, .drivo h3, .drivo h4, .drivo h5 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
  line-height: 1.05;
}
.drivo h1 { font-size: 88px; font-weight: 600; letter-spacing: -0.035em; }
.drivo h2 { font-size: 56px; letter-spacing: -0.03em; line-height: 1.04; }
.drivo h3 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
.drivo h4 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.25; }
.drivo .display { font-size: 140px; font-weight: 600; letter-spacing: -0.05em; line-height: 0.92; }

.drivo p { margin: 0; line-height: 1.55; }
.drivo .lede { font-size: 19px; line-height: 1.5; color: var(--fg-muted); font-weight: 400; }
.drivo .small { font-size: 13px; line-height: 1.5; }
.drivo .micro { font-size: 11px; letter-spacing: 0.04em; }

/* ─── Buttons ──────────────────────────────────────────────────────────── */

.drivo .btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .25s ease;
  white-space: nowrap;
}
.drivo .btn--lg { height: 60px; padding: 0 34px; font-size: 15px; }
.drivo .btn--sm { height: 38px; padding: 0 18px; font-size: 12.5px; }

.drivo .btn--primary {
  background: var(--brand); color: var(--fg-on-dark);
}
.drivo .btn--primary:hover { background: var(--brand-ink); transform: translateY(-1px); }

.drivo .btn--light {
  background: var(--drivo-bone); color: var(--drivo-ink);
}
.drivo .btn--light:hover { background: #fff; }

.drivo .btn--ghost {
  background: transparent; color: var(--fg); border-color: var(--line);
}
.drivo .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.drivo .btn--ghost-on-dark {
  background: transparent; color: var(--fg-on-dark); border-color: var(--line-dark);
}
.drivo .btn--ghost-on-dark:hover { background: var(--fg-on-dark); color: var(--bg-dark); }

.drivo .btn .arr { transition: transform .25s ease; }
.drivo .btn:hover .arr { transform: translateX(3px); }

/* ─── Link with arrow ──────────────────────────────────────────────────── */
.drivo .alink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: gap .2s ease;
}
.drivo .alink:hover { gap: 12px; }

/* ─── Surfaces ─────────────────────────────────────────────────────────── */

.drivo .surface-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.drivo .surface-cream { background: var(--drivo-cream); }
.drivo .surface-bone  { background: var(--drivo-bone); }
.drivo .surface-white { background: #fff; }

/* ─── Layout primitives ───────────────────────────────────────────────── */

.drivo .container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 64px;
}
.drivo .container--wide { max-width: 1520px; }
.drivo .section {
  padding: 120px 0;
  position: relative;
}
.drivo .section--lg { padding: 160px 0; }
.drivo .section--sm { padding: 80px 0; }

.drivo .rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.drivo .rule--dark { background: var(--line-dark); }

/* ─── Chip / tag ──────────────────────────────────────────────────────── */
.drivo .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(27, 61, 56, 0.06);
  color: var(--brand);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.drivo .chip--on-dark {
  background: rgba(242,237,226,0.08); color: var(--drivo-green-300);
}
.drivo .chip--outline {
  background: transparent; border: 1px solid var(--line); color: var(--fg-muted);
}

/* ─── Numbered eyebrow ────────────────────────────────────────────────── */
.drivo .numbrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--brand);
}
.drivo .numbrow--on-dark { color: var(--drivo-green-300); }
.drivo .numbrow b { font-weight: 500; font-variant-numeric: tabular-nums; }
.drivo .numbrow::before {
  content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6;
}

/* ─── Cards / vehicle cards ───────────────────────────────────────────── */
.drivo .vcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color .25s, transform .25s;
}
.drivo .vcard:hover { border-color: var(--brand); transform: translateY(-2px); }

/* ─── Misc effects ────────────────────────────────────────────────────── */
.drivo .grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* Floor reflection under cars on dark surfaces */
.drivo .car-floor {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 80%; height: 30px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 70%);
  filter: blur(8px);
}
.drivo .car-floor--light {
  background: radial-gradient(ellipse at center, rgba(20,48,44,0.18) 0%, transparent 70%);
}