/* ============================================================
   PREMIUM RENTA A CAR EXPRESS – styles.css  v4.1
   Mobile-first · Azul marino + Blanco + Rojo
   FIXES: hamburger desplazado, WA botón invisible, hero z-index
   ============================================================ */

:root {
  --navy:    #0a1628;
  --navy2:   #0f2040;
  --blue:    #1e5bbc;
  --blue-lt: #2d6edb;
  --red:     #e02020;
  --red-dk:  #c01a1a;
  --green:   #22d363;
  --white:   #ffffff;
  --off:     #f7f9fc;
  --g50:     #f0f4f8;
  --g100:    #e2e8f0;
  --g300:    #a0aec0;
  --g500:    #718096;
  --text:    #1a202c;
  --text-lt: #4a5568;
  --sh-sm:   0 2px 8px  rgba(10,22,40,.08);
  --sh-md:   0 8px 30px rgba(10,22,40,.12);
  --sh-lg:   0 20px 60px rgba(10,22,40,.18);
  --sh-card: 0 4px 24px rgba(10,22,40,.10);
  --r:  12px;
  --rl: 18px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .24s;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body {
  font-family:'DM Sans',sans-serif;
  color:var(--text); background:var(--white);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img  { display:block; max-width:100%; height:auto }
a    { text-decoration:none; color:inherit }
ul   { list-style:none }
input,select,textarea,button { font-family:inherit; font-size:16px }
abbr { text-decoration:none; color:var(--red) }
.container { max-width:1200px; margin:0 auto; padding:0 20px }

/* ════════════════════════════════════════
   NAVBAR  (z-index:950)
════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:950;
  transition:background var(--t),box-shadow var(--t);
}
.navbar.scrolled {
  background:rgba(10,22,40,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 28px rgba(0,0,0,.28);
}
.nav-container {
  max-width:1200px; margin:0 auto;
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  transition:padding var(--t);
}
.navbar.scrolled .nav-container { padding:12px 20px }

/* Logo: flex-shrink:0 para que no ceda espacio al hamburger */
.logo { display:flex; align-items:center; gap:8px; flex-shrink:0; min-width:0 }
.logo-diamond { font-size:18px; color:var(--red); line-height:1; flex-shrink:0 }
.logo-text {
  font-family:'Sora',sans-serif; font-size:14px; font-weight:700;
  color:var(--white); letter-spacing:-.3px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logo-text em { font-style:normal; color:var(--red) }

.nav-links { display:flex; align-items:center; gap:28px; flex-shrink:0 }
.nav-links a { color:rgba(255,255,255,.78); font-size:14px; font-weight:500; transition:color var(--t) }
.nav-links a:hover { color:var(--white) }
.nav-links .nav-cta {
  background:var(--red); color:var(--white)!important;
  padding:9px 20px; border-radius:8px; font-weight:700; font-size:13px;
  transition:background var(--t),transform var(--t);
  box-shadow:0 3px 14px rgba(224,32,32,.35);
}
.nav-links .nav-cta:hover { background:var(--red-dk); transform:translateY(-1px) }

/* HAMBURGER – flex-shrink:0 y margin-left:auto empuja a la derecha
   sin que se salga del contenedor */
.hamburger {
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px; flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--white); border-radius:2px;
  transition:transform var(--t),opacity var(--t);
}

/* MOBILE MENU */
.mobile-menu {
  display:none; flex-direction:column;
  background:var(--navy);
  padding:0 20px 24px;
  border-top:1px solid rgba(255,255,255,.07);
}
.mobile-menu.open { display:flex; animation:slideDown .22s ease }
.mobile-menu a {
  color:rgba(255,255,255,.82); font-size:16px; padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-weight:500;
  -webkit-tap-highlight-color:transparent;
}
.mobile-menu .mobile-cta {
  margin-top:16px; background:var(--red); color:var(--white);
  text-align:center; padding:15px; border-radius:10px;
  font-weight:700; border-bottom:none; font-size:16px;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ════════════════════════════════════════
   HERO
   isolation:isolate contiene el stacking
   context para que el WA fixed quede encima
════════════════════════════════════════ */
.hero {
  min-height:100svh;
  min-height:100vh; /* fallback */
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  position:relative; overflow:hidden;
  padding:110px 20px 60px;
  isolation:isolate; /* ← evita que z-index interno tape al WA */
}
.hero-bg {
  position:absolute; inset:0;
  background:linear-gradient(140deg,#060e1d 0%,#0a1628 35%,#0f2244 65%,#071422 100%);
}
.hero-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 55% at 15% 30%,rgba(30,91,188,.22) 0%,transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 70%,rgba(224,32,32,.1) 0%,transparent 55%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,black 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,black 20%,transparent 80%);
}
.g1,.g2 { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none }
.g1 { width:500px; height:350px; top:-80px; left:-80px; background:rgba(30,91,188,.12) }
.g2 { width:350px; height:280px; bottom:40px; right:-40px; background:rgba(224,32,32,.07) }

.hero-content {
  position:relative; z-index:2; text-align:center;
  max-width:900px; width:100%;
  animation:fadeUp .65s ease both;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.88); font-size:12px; font-weight:500;
  padding:7px 16px; border-radius:100px; margin-bottom:20px;
  backdrop-filter:blur(8px);
}
.badge-dot {
  width:7px; height:7px; background:var(--green); border-radius:50%;
  box-shadow:0 0 0 3px rgba(34,211,99,.22);
  animation:dotpulse 2s infinite; flex-shrink:0;
}
@keyframes dotpulse {
  0%,100%{ box-shadow:0 0 0 3px rgba(34,211,99,.22) }
  50%    { box-shadow:0 0 0 6px rgba(34,211,99,.08) }
}
.hero-title {
  font-family:'Sora',sans-serif;
  font-size:clamp(28px,7vw,66px);
  font-weight:800; color:var(--white);
  line-height:1.13; letter-spacing:-1px; margin-bottom:14px;
}
.hero-title em {
  font-style:normal;
  background:linear-gradient(130deg,#6aadff 0%,#e88080 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-subtitle {
  color:rgba(255,255,255,.56);
  font-size:clamp(13px,2.5vw,17px);
  margin-bottom:30px; line-height:1.6;
}

/* ── Buscador ── */
.search-widget {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--rl); padding:16px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  margin-bottom:30px; width:100%;
  box-shadow:0 20px 56px rgba(0,0,0,.28);
}
/* móvil: 1 columna */
.search-row { display:grid; grid-template-columns:1fr; gap:10px }

.search-field { display:flex; flex-direction:column; gap:6px }
.search-field label {
  display:flex; align-items:center; gap:5px;
  color:rgba(255,255,255,.65); font-size:11px;
  font-weight:700; text-transform:uppercase; letter-spacing:.7px;
}
.search-field label svg { width:12px; height:12px; flex-shrink:0 }
.search-field select,
.search-field input[type="date"] {
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:9px; color:var(--white);
  padding:13px 14px; font-size:16px; font-weight:500;
  outline:none; width:100%;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  transition:border-color var(--t),background var(--t);
}
.search-field select option { background:var(--navy); color:var(--white) }
.search-field select:focus,
.search-field input:focus {
  border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.15);
}
.search-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter:invert(1) opacity(.55); cursor:pointer;
}
.btn-search {
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--red); color:var(--white); border:none;
  padding:14px 20px; border-radius:10px;
  font-size:16px; font-weight:700; cursor:pointer; width:100%;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
  box-shadow:0 4px 20px rgba(224,32,32,.38);
  -webkit-tap-highlight-color:transparent;
}
.btn-search svg { width:16px; height:16px; flex-shrink:0 }
.btn-search:hover { background:var(--red-dk); transform:translateY(-2px) }
.btn-search:active { transform:translateY(0) }

/* Hero stats */
.hero-stats {
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap;
}
.stat { display:flex; flex-direction:column; align-items:center; gap:2px }
.stat strong {
  font-family:'Sora',sans-serif; font-size:21px; font-weight:800;
  color:var(--white); letter-spacing:-.4px;
}
.stat span { font-size:10px; color:rgba(255,255,255,.44); text-transform:uppercase; letter-spacing:.5px }
.stat-sep { width:1px; height:28px; background:rgba(255,255,255,.14) }

.hero-scroll-hint {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.3); font-size:10px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; z-index:2;
}
.scroll-chevron {
  width:16px; height:16px;
  border-right:2px solid rgba(255,255,255,.26);
  border-bottom:2px solid rgba(255,255,255,.26);
  transform:rotate(45deg); animation:chev 1.8s infinite;
}
@keyframes chev {
  0%,100%{ transform:rotate(45deg) translateY(0) }
  50%    { transform:rotate(45deg) translateY(5px) }
}

/* ════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════ */
.section-header { text-align:center; margin-bottom:40px }
.section-tag {
  display:inline-block;
  background:rgba(30,91,188,.1); color:var(--blue);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
  padding:5px 14px; border-radius:100px; margin-bottom:12px;
  border:1px solid rgba(30,91,188,.18);
}
.section-title {
  font-family:'Sora',sans-serif;
  font-size:clamp(22px,5vw,42px);
  font-weight:800; color:var(--navy); letter-spacing:-.8px; line-height:1.2; margin-bottom:10px;
}
.section-sub { color:var(--text-lt); font-size:15px; max-width:480px; margin:0 auto; line-height:1.65 }

/* ════════════════════════════════════════
   VEHÍCULOS
════════════════════════════════════════ */
.vehiculos { padding:70px 0; background:var(--off) }
.filtros {
  display:flex; gap:8px; justify-content:center;
  margin-bottom:34px; flex-wrap:wrap; padding:0 4px;
}
.filtro-btn {
  padding:8px 18px; border-radius:100px;
  border:2px solid var(--g100); background:var(--white);
  color:var(--g500); font-size:13px; font-weight:600; cursor:pointer;
  transition:all var(--t); -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.filtro-btn:hover { border-color:var(--blue); color:var(--blue) }
.filtro-btn.active { background:var(--navy); border-color:var(--navy); color:var(--white); box-shadow:var(--sh-md) }

.vehiculos-grid { display:grid; grid-template-columns:1fr; gap:18px }

.card-vehiculo {
  background:var(--white); border-radius:var(--rl);
  overflow:hidden; box-shadow:var(--sh-card);
  transition:transform var(--t),box-shadow var(--t);
  position:relative; display:flex; flex-direction:column;
}
.card-vehiculo:hover { transform:translateY(-5px); box-shadow:var(--sh-lg) }
.card-vehiculo.hidden { display:none }
.card-badge {
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--red); color:var(--white);
  font-size:10px; font-weight:700; padding:4px 11px;
  border-radius:100px; text-transform:uppercase; letter-spacing:.5px;
}
.card-badge--suv    { background:var(--blue) }
.card-badge--lujo   { background:#7c5a1a }
.card-badge--pickup { background:#6b46c1 }
.card-badge--van    { background:#0e7490 }
.card-img { height:200px; overflow:hidden; background:var(--g50) }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.card-vehiculo:hover .card-img img { transform:scale(1.05) }
.card-body { padding:18px; display:flex; flex-direction:column; flex:1 }
.card-body h3 {
  font-family:'Sora',sans-serif; font-size:18px; font-weight:700;
  color:var(--navy); margin-bottom:11px; letter-spacing:-.2px;
}
.card-specs { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px }
.card-specs span { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-lt); font-weight:500 }
.card-specs svg { width:13px; height:13px; color:var(--blue); flex-shrink:0 }
.card-precio { display:flex; align-items:baseline; gap:3px; margin-bottom:14px; margin-top:auto }
.precio-desde { font-size:12px; color:var(--g300); font-weight:500 }
.precio-valor { font-family:'Sora',sans-serif; font-size:24px; font-weight:800; color:var(--navy); letter-spacing:-.4px }
.precio-unidad { font-size:12px; color:var(--g300) }
.btn-reservar {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:var(--white); border:none;
  padding:13px 16px; border-radius:10px; font-size:14px; font-weight:700;
  cursor:pointer; width:100%;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn-reservar svg { width:14px; height:14px }
.btn-reservar:hover { background:var(--red); transform:translateY(-1px); box-shadow:0 5px 18px rgba(224,32,32,.28) }

/* ════════════════════════════════════════
   BENEFICIOS
════════════════════════════════════════ */
.beneficios { padding:70px 0; background:var(--white) }
.beneficios-grid { display:grid; grid-template-columns:1fr; gap:18px }
.beneficio-card {
  padding:30px 24px; border-radius:var(--rl);
  border:2px solid var(--g100); background:var(--off);
  position:relative;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.beneficio-card:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--sh-md) }
.beneficio-card--featured { background:var(--navy); border-color:var(--navy) }
.beneficio-card--featured h3,
.beneficio-card--featured p { color:var(--white)!important }
.bene-icon {
  width:50px; height:50px; border-radius:13px;
  background:rgba(30,91,188,.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.beneficio-card--featured .bene-icon { background:rgba(255,255,255,.1) }
.bene-icon svg { width:24px; height:24px; color:var(--blue) }
.beneficio-card--featured .bene-icon svg { color:var(--white) }
.beneficio-card h3 { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:var(--navy); margin-bottom:9px }
.beneficio-card p  { color:var(--text-lt); font-size:14px; line-height:1.7 }
.bene-tag {
  position:absolute; top:16px; right:16px;
  background:var(--red); color:var(--white);
  font-size:10px; font-weight:700; padding:4px 11px;
  border-radius:100px; text-transform:uppercase;
}

/* ════════════════════════════════════════
   CÓMO FUNCIONA
════════════════════════════════════════ */
.como-funciona { padding:70px 0; background:linear-gradient(180deg,var(--g50) 0%,#eef2f8 100%) }
.pasos-grid { display:grid; grid-template-columns:1fr; gap:24px; max-width:400px; margin:0 auto 40px }
.paso-linea { display:none }
.paso { text-align:center; padding:6px }
.paso-num { font-family:'Sora',sans-serif; font-size:11px; font-weight:800; color:var(--blue); letter-spacing:1px; margin-bottom:12px; text-transform:uppercase }
.paso-ico {
  width:64px; height:64px; border-radius:18px; background:var(--white);
  border:2px solid var(--g100);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 13px; box-shadow:var(--sh-sm);
  transition:border-color var(--t),transform var(--t);
}
.paso:hover .paso-ico { border-color:var(--blue); transform:translateY(-3px) }
.paso-ico svg { width:26px; height:26px; color:var(--navy) }
.paso h3 { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:var(--navy); margin-bottom:7px }
.paso p  { font-size:13px; color:var(--text-lt); line-height:1.65 }
.pasos-cta { text-align:center }
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--navy); color:var(--white);
  padding:14px 32px; border-radius:11px; font-size:15px; font-weight:700;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
  box-shadow:var(--sh-md); -webkit-tap-highlight-color:transparent;
}
.btn-primary:hover { background:var(--red); transform:translateY(-2px) }

/* ════════════════════════════════════════
   HOTELES SLIDER
════════════════════════════════════════ */
.hoteles {
  padding:40px 0; background:var(--white);
  border-top:1px solid var(--g100); border-bottom:1px solid var(--g100); overflow:hidden;
}
.hoteles-label {
  text-align:center; margin-bottom:20px;
  font-size:11px; color:var(--g300); text-transform:uppercase;
  letter-spacing:1.2px; font-weight:600; padding:0 20px;
}
.slider-wrap {
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
}
.slider-track { display:flex; width:max-content; animation:marquee 30s linear infinite }
.slider-track:hover { animation-play-state:paused }
.slider-track span {
  padding:10px 30px;
  color:var(--g300); font-size:12.5px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; white-space:nowrap;
  border-right:1px solid var(--g100); transition:color var(--t);
}
.slider-track span:hover { color:var(--navy) }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ════════════════════════════════════════
   FORMULARIO RESERVA
════════════════════════════════════════ */
.reserva { padding:70px 0; background:var(--off) }
.reserva-layout { display:grid; grid-template-columns:1fr; gap:36px }
.reserva-info h2 {
  font-family:'Sora',sans-serif;
  font-size:clamp(24px,5vw,38px); font-weight:800;
  color:var(--navy); letter-spacing:-.8px; line-height:1.2; margin:12px 0 14px;
}
.reserva-info h2 em { font-style:normal; color:var(--red) }
.reserva-info > p { color:var(--text-lt); font-size:15px; line-height:1.7; margin-bottom:24px }
.garantias { display:flex; flex-direction:column; gap:10px; margin-bottom:26px }
.garantias li { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); font-weight:500 }
.garantias svg { width:16px; height:16px; color:var(--white); background:var(--blue); border-radius:50%; padding:3px; flex-shrink:0 }
.contacto-links { display:flex; flex-direction:column; gap:9px }
.clink {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--blue); font-weight:500;
  transition:color var(--t); word-break:break-all;
}
.clink svg { width:14px; height:14px; flex-shrink:0 }
.clink:hover { color:var(--red) }
.form-card {
  background:var(--white); border-radius:var(--rl);
  padding:24px 18px; box-shadow:var(--sh-lg);
  border:1px solid var(--g100);
}
.form-block-title {
  display:flex; align-items:center; gap:10px;
  font-family:'Sora',sans-serif; font-size:14px; font-weight:700;
  color:var(--navy); margin-bottom:16px;
  padding-bottom:10px; border-bottom:2px solid var(--g50);
}
.form-block-title span {
  width:26px; height:26px; background:var(--navy); color:var(--white);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; flex-shrink:0;
}
/* Mobile: 1 col */
.form-grid { display:grid; grid-template-columns:1fr; gap:12px }
.fg--full  { grid-column:auto }
.fg { display:flex; flex-direction:column; gap:5px }
.fg label { font-size:12px; font-weight:600; color:var(--navy) }
.fg input,.fg select,.fg textarea {
  padding:12px 14px; border:2px solid var(--g100); border-radius:9px;
  font-size:16px; color:var(--text); background:var(--white);
  outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.fg input::placeholder,.fg textarea::placeholder { color:var(--g300) }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(30,91,188,.1) }
.fg input.err,.fg select.err,.fg textarea.err { border-color:var(--red); box-shadow:0 0 0 4px rgba(224,32,32,.08) }
.fg textarea { resize:vertical; min-height:84px }
.ferr { font-size:11px; color:var(--red); font-weight:500; min-height:14px }
.form-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px }
.btn-submit {
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:var(--white); border:none;
  padding:15px 20px; border-radius:11px; font-size:16px; font-weight:700;
  cursor:pointer; box-shadow:var(--sh-md);
  transition:background var(--t),transform var(--t),box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn-submit svg { width:16px; height:16px; flex-shrink:0 }
.btn-submit:hover { background:var(--red); transform:translateY(-1px) }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none }
.btn-wa-form {
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25d366; color:var(--white); border:none;
  padding:14px 18px; border-radius:11px; font-size:16px; font-weight:700;
  cursor:pointer; transition:background var(--t),transform var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn-wa-form svg { width:18px; height:18px; flex-shrink:0 }
.btn-wa-form:hover { background:#1ebd58; transform:translateY(-1px) }
.form-ok {
  display:none; align-items:center; gap:13px;
  background:rgba(34,211,99,.07); border:2px solid rgba(34,211,99,.28);
  border-radius:11px; padding:16px 18px; margin-top:14px;
}
.form-ok.show { display:flex; animation:fadeUp .4s ease }
.form-ok svg { width:32px; height:32px; color:#16a34a; flex-shrink:0 }
.form-ok strong { font-size:14px; color:var(--navy); font-weight:700; display:block; margin-bottom:3px }
.form-ok p { font-size:13px; color:var(--text-lt) }

/* ════════════════════════════════════════
   SEO TEXT
════════════════════════════════════════ */
.seo-text { padding:56px 0; background:var(--white); border-top:1px solid var(--g100) }
.seo-text h2 { font-family:'Sora',sans-serif; font-size:19px; font-weight:700; color:var(--navy); margin-bottom:12px }
.seo-text p  { color:var(--text-lt); font-size:14px; line-height:1.8; max-width:760px; margin-bottom:10px }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer { background:var(--navy); padding:56px 0 0; color:rgba(255,255,255,.65) }
.footer-grid {
  display:grid; grid-template-columns:1fr; gap:28px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand .logo-text { font-size:14px }
.footer-brand p { margin-top:12px; font-size:13px; line-height:1.7; color:rgba(255,255,255,.44) }
.footer-col h4 { font-family:'Sora',sans-serif; font-size:11px; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:1px; margin-bottom:13px }
.footer-col ul { display:flex; flex-direction:column; gap:9px }
.footer-col ul li,
.footer-col ul a { font-size:13px; color:rgba(255,255,255,.46); transition:color var(--t); line-height:1.5 }
.footer-col ul a:hover { color:var(--white) }
.footer-bottom { padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center }
.footer-bottom p { font-size:11.5px; color:rgba(255,255,255,.26) }

/* ════════════════════════════════════════
   WHATSAPP FLOTANTE
   z-index:1000 > navbar(950) > hero(isolation)
════════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:20px; right:20px;
  z-index:1000; /* ← siempre encima de todo */
  width:54px; height:54px;
  background:#25d366; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 24px rgba(37,211,102,.42);
  transition:transform var(--t),box-shadow var(--t);
  animation:floatIn .5s ease .7s both;
  -webkit-tap-highlight-color:transparent;
}
.wa-float svg { width:25px; height:25px; pointer-events:none }
.wa-float:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,.52) }
@keyframes floatIn { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }

/* Burbuja tooltip – oculta en móvil, visible en tablet+ */
.wa-bubble {
  position:absolute; right:62px;
  background:var(--navy); color:var(--white);
  font-size:12px; font-weight:600; padding:7px 12px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; display:none;
  transition:opacity var(--t),transform var(--t); transform:translateX(6px);
}
.wa-bubble::after {
  content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:var(--navy);
}
.wa-float:hover .wa-bubble { opacity:1; transform:translateX(0) }

.wa-dot {
  position:absolute; top:3px; right:3px;
  width:11px; height:11px; background:#ff4444; border-radius:50%;
  border:2px solid var(--white); animation:dotpulse 2s infinite;
}

/* ════════════════════════════════════════
   OVERLAY + DRAWER WA
════════════════════════════════════════ */
.wa-overlay {
  position:fixed; inset:0; z-index:1010;
  background:rgba(0,0,0,.45); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity var(--t);
}
.wa-overlay.open { opacity:1; pointer-events:auto }

/* Bottom-sheet (móvil por defecto) */
.wa-drawer {
  position:fixed; bottom:0; left:0; right:0;
  z-index:1020;
  background:var(--white);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 48px rgba(10,22,40,.22);
  transform:translateY(100%);
  transition:transform .32s var(--ease);
  display:flex; flex-direction:column;
  max-height:92vh; overflow-y:auto;
}
.wa-drawer.open { transform:translateY(0) }
.wa-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:linear-gradient(135deg,#075e54 0%,#128c7e 100%);
  border-radius:20px 20px 0 0;
  position:sticky; top:0; z-index:1; flex-shrink:0;
}
.wa-drawer-brand { display:flex; align-items:center; gap:11px }
.wa-avatar {
  width:38px; height:38px; background:#25d366; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wa-avatar svg { width:20px; height:20px }
.wa-drawer-brand strong { display:block; color:var(--white); font-size:14px; font-weight:700 }
.wa-drawer-brand span  { display:block; color:rgba(255,255,255,.7); font-size:12px }
.wa-close {
  background:rgba(255,255,255,.15); border:none; cursor:pointer;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t); flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.wa-close svg { width:15px; height:15px; color:var(--white) }
.wa-close:hover { background:rgba(255,255,255,.28) }
.wa-drawer-body { padding:18px 18px 32px }
.wa-intro { font-size:14px; color:var(--text-lt); margin-bottom:14px; line-height:1.6 }
.wa-form { display:flex; flex-direction:column; gap:11px }
.wa-row  { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.wa-fg   { display:flex; flex-direction:column; gap:5px }
.wa-fg label { font-size:12px; font-weight:600; color:var(--navy) }
.wa-fg input,.wa-fg textarea {
  padding:12px 13px; border:2px solid var(--g100); border-radius:9px;
  font-size:16px; color:var(--text); background:var(--white); outline:none;
  transition:border-color var(--t),box-shadow var(--t);
  -webkit-appearance:none; appearance:none;
}
.wa-fg input::placeholder,.wa-fg textarea::placeholder { color:var(--g300) }
.wa-fg input:focus,.wa-fg textarea:focus { border-color:#25d366; box-shadow:0 0 0 4px rgba(37,211,102,.12) }
.wa-fg input.err,.wa-fg textarea.err { border-color:var(--red) }
.wa-fg textarea { resize:vertical; min-height:76px }
.wa-err { font-size:11px; color:var(--red); font-weight:500; min-height:13px }
.btn-wa-send {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25d366; color:var(--white); border:none;
  padding:15px 20px; border-radius:11px; font-size:16px; font-weight:700;
  cursor:pointer; width:100%; margin-top:4px;
  transition:background var(--t),transform var(--t);
  box-shadow:0 4px 18px rgba(37,211,102,.35);
  -webkit-tap-highlight-color:transparent;
}
.btn-wa-send svg { width:19px; height:19px; flex-shrink:0 }
.btn-wa-send:hover { background:#1ebd58; transform:translateY(-1px) }

/* ════════════════════════════════════════
   SKELETON LOADER
════════════════════════════════════════ */
.skeleton-grid { display:grid; grid-template-columns:1fr; gap:18px }
.skeleton-card { background:var(--white); border-radius:var(--rl); overflow:hidden; box-shadow:var(--sh-card) }
.sk-img {
  height:200px;
  background:linear-gradient(90deg,var(--g100) 25%,var(--g50) 50%,var(--g100) 75%);
  background-size:200%; animation:shimmer 1.4s infinite;
}
.sk-body { padding:18px }
.sk-line {
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,var(--g100) 25%,var(--g50) 50%,var(--g100) 75%);
  background-size:200%; animation:shimmer 1.4s infinite; margin-bottom:10px;
}
.sk-line.w80{width:80%} .sk-line.w60{width:60%} .sk-line.w40{width:40%}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ════════════════════════════════════════
   ANIMACIONES
════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.anim { opacity:0; transform:translateY(24px); transition:opacity .48s ease,transform .48s ease }
.anim.vis { opacity:1; transform:translateY(0) }

/* ════════════════════════════════════════
   RESPONSIVE ▸ 480px+
   Buscador 2 columnas, lugar ocupa fila
════════════════════════════════════════ */
@media(min-width:480px) {
  .search-row { grid-template-columns:1fr 1fr }
  .search-field:first-child { grid-column:1/-1 }
  .btn-search { grid-column:1/-1 }
}

/* ════════════════════════════════════════
   RESPONSIVE ▸ hasta 639px  (móvil)
   Navbar hamburger visible
════════════════════════════════════════ */
@media(max-width:639px) {
  .nav-links { display:none }
  .hamburger { display:flex }
  .hero { padding:96px 16px 50px }
  .hero-scroll-hint { display:none }
  /* Drawer bottom-sheet */
  .wa-drawer {
    left:0; right:0; bottom:0;
    width:100%; max-width:100%;
    border-radius:20px 20px 0 0;
    transform:translateY(100%); opacity:1;
    pointer-events:auto;
    transition:transform .32s var(--ease);
  }
  .wa-drawer.open  { transform:translateY(0) }
  .wa-drawer-header { border-radius:20px 20px 0 0 }
}

/* ════════════════════════════════════════
   RESPONSIVE ▸ 640px+  (tablet)
════════════════════════════════════════ */
@media(min-width:640px) {
  /* Vehículos 2 col */
  .vehiculos-grid  { grid-template-columns:repeat(2,1fr) }
  .skeleton-grid   { grid-template-columns:repeat(2,1fr) }
  /* Beneficios 2 col */
  .beneficios-grid { grid-template-columns:1fr 1fr }
  .beneficio-card--featured { grid-column:1/-1; max-width:460px; margin:0 auto; width:100% }
  /* Formulario 2 col */
  .form-card { padding:32px 28px }
  .form-grid { grid-template-columns:1fr 1fr }
  .fg--full  { grid-column:1/-1 }
  .form-actions { flex-direction:row }
  .btn-submit  { width:auto; flex:1 }
  .btn-wa-form { width:auto }
  /* Footer 2 col */
  .footer-grid   { grid-template-columns:1fr 1fr; gap:28px }
  .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left }
  /* WA burbuja */
  .wa-bubble { display:block }
  /* WA Drawer popup esquina */
  .wa-drawer {
    left:auto; right:20px; bottom:82px;
    width:360px; max-width:calc(100vw - 40px);
    border-radius:var(--rl);
    transform:translateY(14px) scale(.96); opacity:0;
    max-height:80vh;
    transition:transform .26s var(--ease),opacity .26s var(--ease);
    pointer-events:none;
  }
  .wa-drawer.open { transform:translateY(0) scale(1); opacity:1; pointer-events:auto }
  .wa-drawer-header { border-radius:var(--rl) var(--rl) 0 0 }
}

/* ════════════════════════════════════════
   RESPONSIVE ▸ 860px+  (buscador 4 col)
════════════════════════════════════════ */
@media(min-width:860px) {
  .search-row { grid-template-columns:1.5fr 1fr 1fr auto }
  .search-field:first-child { grid-column:auto }
  .btn-search { grid-column:auto; width:auto; white-space:nowrap }
}

/* ════════════════════════════════════════
   RESPONSIVE ▸ 900px+  (desktop)
════════════════════════════════════════ */
@media(min-width:900px) {
  /* Vehículos 3 col */
  .vehiculos-grid  { grid-template-columns:repeat(3,1fr) }
  .skeleton-grid   { grid-template-columns:repeat(3,1fr) }
  /* Beneficios 3 col */
  .beneficios-grid { grid-template-columns:repeat(3,1fr) }
  .beneficio-card--featured { grid-column:auto; max-width:none }
  /* Pasos horizontales */
  .pasos-grid {
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:0; max-width:820px; margin:0 auto 44px;
  }
  .paso-linea {
    display:flex; align-items:center; justify-content:center;
    padding-top:40px; flex-shrink:0; width:52px;
  }
  .paso-linea-inner {
    width:100%; height:2px;
    background:linear-gradient(90deg,var(--g100) 0%,var(--blue) 50%,var(--g100) 100%);
    position:relative;
  }
  .paso-linea-inner::after {
    content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
    border:4px solid transparent; border-left:7px solid var(--blue);
  }
  /* Formulario layout 2 col */
  .reserva-layout { grid-template-columns:1fr 1.6fr; gap:52px }
  .reserva-info   { position:sticky; top:90px }
  /* Footer 4 col */
  .footer-grid   { grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px }
  .footer-bottom { flex-direction:row }
}

/* ════════════════════════════════════════
   RESPONSIVE ▸ 360px-  (pantalla mínima)
════════════════════════════════════════ */
@media(max-width:360px) {
  .container     { padding:0 12px }
  .hero-title    { font-size:25px }
  .search-widget { padding:12px }
  .search-row    { grid-template-columns:1fr }
  .search-field:first-child { grid-column:auto }
  .filtro-btn    { padding:7px 12px; font-size:12px }
  .logo-text     { font-size:12px }
  .wa-row        { grid-template-columns:1fr }
}