/* ═══════════════════════════════════════════════════════════════
   Ander Rent a Car — hoja de estilos
   Paleta: tinta #0B0D10 · grafito #14171C · humo #F4F6F9 · azul #1E4FD8
   Tipografía: Poppins (títulos) · Inter (texto)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #0B0D10;
  --graphite: #14171C;
  --smoke: #F4F6F9;
  --white: #FFFFFF;
  --blue: #1E4FD8;
  --blue-dark: #16389B;
  --blue-tint: #E9EEFC;
  --steel: #9AA3B2;
  --text: #23272E;
  --muted: #5B6472;
  --line: rgba(11, 13, 16, 0.10);
  --line-inv: rgba(255, 255, 255, 0.14);
  /* verde WhatsApp oscurecido a propósito: blanco sobre #0E7A3C da 5.4:1 (AA) */
  --wa: #0E7A3C;
  --wa-dark: #0A5E2E;
  --shadow-1: 0 1px 2px rgba(11,13,16,.05), 0 8px 24px rgba(11,13,16,.07);
  --shadow-2: 0 2px 4px rgba(11,13,16,.06), 0 18px 44px rgba(11,13,16,.14);
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-d: "Poppins", "Inter", system-ui, sans-serif;
  --font-b: "Inter", system-ui, -apple-system, sans-serif;
}

/* ── base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-d); line-height: 1.12; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.13rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico:not([fill]) path, .specs .ico path, .perk-ico svg path, .specs .ico circle {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .9rem;
}
.hl { color: var(--blue); }
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-note { color: var(--muted); max-width: 46ch; margin-bottom: 2.2rem; }

/* ── botones ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 600 .95rem/1 var(--font-b);
  padding: .95em 1.7em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-s { padding: .7em 1.25em; font-size: .88rem; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(30,79,216,.28); }
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 8px 24px rgba(30,79,216,.36); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; transform: translateY(-1px); }
.btn-ghost-dark { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost-dark:hover { color: var(--ink); border-color: var(--muted); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 6px 18px rgba(14,122,60,.3); }
.btn-wa:hover { background: var(--wa-dark); transform: translateY(-1px); }

/* ── header ───────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: .9rem 0;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.topbar.scrolled { background: rgba(11,13,16,.88); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-inv); padding: .55rem 0; }
/* páginas interiores (sin hero oscuro): header siempre sólido */
.topbar.always { background: rgba(11,13,16,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-inv); }
.topbar-in { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-d); font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: .01em; white-space: nowrap; }
.brand em { font-style: normal; font-weight: 600; color: var(--steel); }
.brand-logo { height: 2.4rem; width: auto; flex: none; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav a { color: rgba(255,255,255,.85); font-weight: 500; font-size: .93rem; transition: color .2s; }
.nav a:hover { color: #fff; }
@media (max-width: 720px) { .nav { display: none; } .topbar-in { justify-content: space-between; } }
/* pantallas muy estrechas (320-380px): sin el sufijo del logo el header
   cabe completo y el botón de WhatsApp no se corta */
@media (max-width: 380px) {
  .brand em { display: none; }
  .topbar-in { gap: .9rem; }
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; min-height: 92svh; display: flex; color: #fff; overflow: hidden; }
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* scrim superior: los links del nav necesitan fondo oscuro también
       sobre la parte clara del cielo de la foto */
    linear-gradient(180deg, rgba(11,13,16,.72) 0px, rgba(11,13,16,0) 170px),
    linear-gradient(76deg, rgba(11,13,16,.88) 0%, rgba(11,13,16,.55) 46%, rgba(11,13,16,.18) 75%),
    linear-gradient(0deg, rgba(11,13,16,.82) 0%, rgba(11,13,16,0) 34%);
}
.hero-in { display: flex; flex-direction: column; justify-content: center; padding: 7.5rem 0 2.2rem; }
.hero h1 { color: #fff; max-width: 13ch; }
/* azules ACLARADOS solo dentro del hero: el azul de marca #1E4FD8 está
   calibrado para fondo blanco y se apaga sobre la foto oscura */
.hero .eyebrow { color: #B6C8F8; }
.hero .hl { color: #A9BFF7; }
.hero-sub { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.82); max-width: 44ch; margin-bottom: 1.8rem; }
/* margin-bottom: respiro mínimo que el margin-top:auto de la quickbar
   no puede colapsar en pantallas cortas */
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }

/* barra de reserva */
.quickbar {
  margin-top: auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .9rem; align-items: end;
  background: rgba(17,20,25,.72); backdrop-filter: blur(14px);
  border: 1px solid var(--line-inv); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-2);
}
.qb-field { display: grid; gap: .35rem; min-width: 0; }
.qb-field label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.qb-field select, .qb-field input {
  min-width: 0;
  font: 500 .95rem var(--font-b); color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid var(--line-inv); border-radius: 10px;
  padding: .65em .8em; width: 100%;
  color-scheme: dark;
}
/* sin outline:none — el :focus-visible global de 3px sigue vivo para teclado */
.qb-field select:focus, .qb-field input:focus { border-color: #7C9BF0; }
.qb-go { align-self: end; }
@media (max-width: 860px) {
  .quickbar { grid-template-columns: 1fr 1fr; }
  .qb-field:first-child, .qb-go { grid-column: 1 / -1; }
}

/* ── por qué Ander ────────────────────────────────────────────── */
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); gap: 1rem; margin-top: 2.4rem; }
.perk {
  background: var(--smoke); border: 1px solid transparent; border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.2rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.perk:hover { background: var(--white); border-color: var(--line); transform: translateY(-4px); box-shadow: var(--shadow-1); }
.perk h3 { margin: 0 0 .3rem; }
.perk p { margin: 0; font-size: .92rem; color: var(--muted); }
.perk-ico {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem;
  background: var(--blue-tint); color: var(--blue); border-radius: 12px;
}
.perk-ico svg { width: 1.4rem; height: 1.4rem; }

/* ── declaración ──────────────────────────────────────────────── */
.statement { background: var(--ink); color: #fff; padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.statement-big {
  font-family: var(--font-d); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem); max-width: 17ch; margin: 0 0 1rem;
  color: #fff; text-wrap: balance;
}
.statement-sub { color: var(--steel); max-width: 56ch; font-size: clamp(.98rem, 1.5vw, 1.15rem); margin: 0; }

/* ── catálogo ─────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1.4rem; }
.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--smoke); }
.card-body h3 a { color: inherit; transition: color .2s; }
.card-body h3 a:hover { color: var(--blue); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }
.card-year {
  position: absolute; top: .8rem; left: .8rem;
  font: 600 .78rem var(--font-b); letter-spacing: .06em;
  background: rgba(11,13,16,.72); color: #fff; backdrop-filter: blur(6px);
  padding: .3em .75em; border-radius: 999px;
}
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.35rem; }
.card-body h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; margin-bottom: .9rem; }
.specs li { display: flex; align-items: center; gap: .5em; font-size: .84rem; color: var(--muted); }
.specs .ico { color: var(--blue); }
.card-desc { font-size: .92rem; color: var(--muted); margin-bottom: 1.2rem; }
.card-btn { margin-top: auto; width: 100%; }

/* ── entregas ─────────────────────────────────────────────────── */
.delivery { background: var(--smoke); padding: clamp(4rem, 9vw, 6.5rem) 0; }
.airports { display: flex; flex-wrap: wrap; gap: .6rem; }
.airports li {
  display: inline-flex; align-items: baseline; gap: .5em;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: .55em 1.1em; font-size: .9rem; color: var(--muted);
}
.airports strong { font-family: var(--font-d); font-weight: 600; color: var(--blue); letter-spacing: .04em; }
.airports-more { background: var(--blue-tint); color: var(--blue-dark); border-color: transparent; font-weight: 500; }

/* ── cierre ───────────────────────────────────────────────────── */
.closing { background: var(--white); text-align: center; padding: clamp(4rem, 9vw, 6.5rem) 0; }
.closing p { color: var(--muted); max-width: 40ch; margin-inline: auto; }
.closing .hero-cta { justify-content: center; margin-top: 1.6rem; }

/* ── footer ───────────────────────────────────────────────────── */
.footer { background: var(--ink); color: var(--steel); padding: 3rem 0 2rem; }
.footer-in { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.footer-brand { font-size: 1.15rem; margin-bottom: .6rem; }
.footer-tag { font-size: .95rem; color: var(--steel); max-width: 34ch; }
.footer-links { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; gap: .5em; color: #fff; font-weight: 500; font-size: .93rem; }
.footer-links a:hover { color: #cfe0ff; }
.footer-small {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  border-top: 1px solid var(--line-inv); margin-top: 2.2rem; padding-top: 1.4rem;
  font-size: .8rem; color: rgba(154,163,178,.75);
}
.footer-small p { margin: 0; }
.footer-credits a { color: inherit; text-decoration: underline; }

/* ── botón flotante WhatsApp ──────────────────────────────────── */
.wa-fab {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem;
  background: var(--wa); color: #fff; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(14,122,60,.45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.wa-fab:hover { transform: scale(1.08); background: var(--wa-dark); }
.wa-fab svg { width: 1.9rem; height: 1.9rem; }
.js .wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa);
  animation: fab-ring 2.4s var(--ease) 1.2s 3;
  opacity: 0;
}
@keyframes fab-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── modal ────────────────────────────────────────────────────── */
.modal {
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  border: none; border-radius: 20px; padding: 0;
  box-shadow: 0 30px 90px rgba(11,13,16,.35);
}
.modal::backdrop { background: rgba(11,13,16,.55); backdrop-filter: blur(4px); }
.modal form { padding: 1.6rem clamp(1.2rem, 4vw, 2rem) 1.8rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.modal-head h2 { font-size: 1.45rem; margin: 0; }
.modal-x {
  border: none; background: var(--smoke); color: var(--muted);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.modal-x:hover { background: var(--blue-tint); color: var(--blue-dark); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem 1rem; }
.field { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.field input, .field select { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.field input, .field select {
  font: 500 .95rem var(--font-b); color: var(--ink);
  background: var(--smoke); border: 1.5px solid transparent; border-radius: 10px;
  padding: .68em .8em; width: 100%;
  transition: border-color .2s, background-color .2s;
}
.field input:focus, .field select:focus { background: #fff; border-color: var(--blue); outline: none; }
.field [aria-invalid="true"] { border-color: #D23B3B; background: #FDF3F3; }
.err { color: #B92C2C; font-size: .8rem; margin: 0; }
.form-err { margin-top: 1rem; font-weight: 500; }
.ok { color: var(--wa-dark); font-size: .88rem; font-weight: 500; margin-top: 1rem; }
.form-note { font-size: .82rem; color: var(--muted); margin: 1.1rem 0 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.3rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .modal-grid { grid-template-columns: 1fr; }
  .modal-actions .btn { flex: 1; }
}

/* ── página de vehículo ───────────────────────────────────────── */
.vpage { padding: 7.2rem 0 4.5rem; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.6rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.vgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.vphoto { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 4 / 3; background: var(--smoke); }
.vphoto img { width: 100%; height: 100%; object-fit: cover; }
.vyear {
  display: inline-block; font: 600 .78rem var(--font-b); letter-spacing: .05em;
  background: var(--blue-tint); color: var(--blue-dark);
  padding: .35em .9em; border-radius: 999px; margin-bottom: .9rem;
}
.vinfo h1 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); margin-bottom: .6rem; }
.vspecs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; margin: 0 0 1.2rem; }
.vspecs li { display: flex; align-items: center; gap: .6em; color: var(--muted); font-size: .95rem; }
.vspecs .ico { color: var(--blue); }
.vspecs .ico path, .vspecs .ico circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vdesc { color: var(--muted); }
.vlist { display: grid; gap: .55rem; margin: 1.4rem 0 1.8rem; }
.vlist li { display: flex; gap: .6em; align-items: baseline; font-size: .95rem; }
.vlist .ico { color: var(--wa); flex: none; transform: translateY(3px); }
.vlist .ico path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vcta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.votros { margin-top: clamp(3rem, 7vw, 5rem); }
.votros h2 { font-size: 1.5rem; margin-bottom: 1.4rem; }
@media (max-width: 900px) { .vgrid { grid-template-columns: 1fr; } }

/* ── animaciones ──────────────────────────────────────────────── */
/* Los reveals solo se esconden cuando el JS está activo (html.js);
   sin JS la página se ve completa desde el primer pixel. */
.js .reveal { opacity: 0; }
.js .reveal.in {
  animation: rise .8s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* secuencia de carga del hero */
.js .load-1, .js .load-2, .js .load-3, .js .load-4, .js .load-5 {
  opacity: 0;
  animation: rise .9s var(--ease) forwards;
}
.js .load-1 { animation-delay: .05s; }
.js .load-2 { animation-delay: .15s; }
.js .load-3 { animation-delay: .3s; }
.js .load-4 { animation-delay: .45s; }
.js .load-5 { animation-delay: .6s; }

/* modo QA (?qa=1): todo visible al instante para capturas automatizadas */
.qa .reveal, .qa .load-1, .qa .load-2, .qa .load-3, .qa .load-4, .qa .load-5 {
  opacity: 1 !important; animation: none !important; transform: none !important;
}
/* el hero deja de depender del alto del viewport: así una ventana muy alta
   captura la página completa sin que el hero se la coma */
.qa .hero { min-height: 640px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .load-1, .js .load-2, .js .load-3, .js .load-4, .js .load-5 {
    opacity: 1; animation: none; transform: none;
  }
  .js .wa-fab::after { animation: none; }
  .btn, .card, .perk, .card-media img { transition: none; }
}