:root{
  --brand:#b22222; --brand-dark:#8b1d1a; --brand-2:#8b1d1a;
  --ink:#0f172a; --muted:#6b7280; --soft:#f6f7fb; --paper:#fff;
  --shadow:0 25px 60px rgba(0,0,0,.35);
  --topbar-h:78px;

  /* ✅ tokens del form para alinear iconos perfecto */
  --ctl-h:48px;
  --lab-h:14px;
  --lab-gap:6px;

  /* ✅ SUBIR ICONOS DEL FORM (nudge) */
  --ico-nudge:-20px;

  /* ✅ HERO FIX: espacio y tamaños fluidos */
  --hero-form-gap: clamp(190px, 22vh, 320px);
  --hero-icon-size: clamp(46px, 5vw, 70px);
  --hero-icon-gap: clamp(12px, 2vw, 18px);

  /* NAV */
  --nav-break: 940px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);
  background:var(--soft);
}

/* =========================
   NAVBAR (LIMPIO + RESPONSIVE)
========================= */
.topbar{
  position:fixed;
  top:16px; left:50%;
  transform:translateX(-50%);
  z-index:1000;
  width:min(1200px,94%);
  border-radius:14px;
  padding:8px 12px;
  transition:backdrop-filter .3s,background .3s,box-shadow .3s, transform .2s;
}
.glass{
  background:rgba(178,34,34,.35);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--brand);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.topbar.solid{
  background:rgba(178,34,34,.92);
  border:1px solid var(--brand);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative;
}
.brand-logo{
  font-family:'Playfair Display',serif;
  font-weight:600; letter-spacing:2px; color:#fff; font-size:22px;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.menu{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.menu a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.4px;
  opacity:.95;
  padding:8px 10px;
  border-radius:10px;
}
.menu a:hover{ opacity:1; background:rgba(255,255,255,.12); }
.menu a.active{
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.nav-actions{ display:flex; align-items:center; gap:10px; }
.login{
  color:#fff; font-size:18px; width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.login:hover{ background:rgba(255,255,255,.26); }
.login .avatar-mini{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#ffffff26;color:#fff;font-weight:900;font-size:14px;letter-spacing:.5px;
}

/* Hamburger (solo mobile) */
.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  -webkit-tap-highlight-color:transparent;
}
.hamburger:active{ transform:scale(.98); }

/* iOS safe-area (notch) */
@supports (padding: max(0px)){
  .topbar{
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
}

/* =========================
   NAV RESPONSIVE
========================= */
.nav-backdrop{
  opacity:0;
  pointer-events:none;
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.45);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition: opacity .2s ease;
  z-index: 9998;
}
.topbar .menu{ display:flex; align-items:center; gap:18px; }
.topbar .hamburger{ display:none; }

@media (max-width: 940px){
  .topbar .hamburger{ display:flex; }
  .topbar .menu{ display:none; }

  body.nav-open .nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.nav-open .topbar .menu{
    display:flex;
    flex-direction:column;
    gap:12px;

    position:fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 12px;
    width: min(86vw, 360px);
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 24px);
    overflow:auto;

    padding: 14px;

    background: #ffffff !important;
    opacity: 1 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    border: 1px solid rgba(15,23,42,.12);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    z-index: 9999;

    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
  }

  body.nav-open .topbar .menu a{
    display:block;
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    background: rgba(15,23,42,.03);
    color: var(--ink) !important;
    opacity: 1 !important;
  }

  body.nav-open .topbar .menu a:hover{
    background: rgba(178,34,34,.10);
    color: var(--brand) !important;
  }

  body.nav-open .topbar .menu a.active{
    background: rgba(178,34,34,.12) !important;
    color: var(--brand) !important;
    box-shadow: inset 0 0 0 1px rgba(178,34,34,.25) !important;
  }

  body.nav-open .topbar .menu .dropdown-menu{
    position: static !important;
    float: none !important;
    margin-top: 8px;
  }

  body.nav-open{
    overflow: auto !important;
    touch-action: auto !important;
  }
}
@media (max-width: 768px){
  body.nav-open{
    overflow-y: auto !important;
  }
}
body.nav-open .topbar{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
select {
  touch-action: pan-y;
}

@media (max-width: 768px) {

  .hero{
    min-height: auto !important;
    height: auto !important;
  }

}
@media (max-width: 768px) {

  html, body {
    overflow-y: auto !important;
    height: auto !important;
  }

}
@media (max-width: 768px) {

  body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

}
@media (max-width: 768px) {

  .v-inicio {
    overflow: visible !important;
  }

}
.carousel,
.slide,
.overlay {
  pointer-events: none !important;
}
.overlay {
  pointer-events: none !important;
}

/* =========================
   HERO
========================= */
.hero{ position:relative; min-height:125vh; padding-top: calc(var(--topbar-h) + 8px); }
.carousel{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  transition:opacity .9s, transform 1.5s;
}
.slide.active{ opacity:1; transform:scale(1); }
.overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  z-index:0;
}

.hero-copy{
  position:relative;
  z-index:2;
  color:#fff;
  max-width:1100px;
  padding:70px 24px var(--hero-form-gap);
  margin:0 auto;
  text-align:center;
}

.hero-copy .kicker{
  font-family:'Playfair Display', serif;
  font-size: clamp(38px, 5vw, 56px);
  color:#fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  margin: -6px 0 22px;
  text-shadow:0 3px 10px rgba(0,0,0,.35);
  position: relative;
  opacity:0;
  transform: translateY(8px);
  animation: kickerIn .6s ease-out .05s forwards;
}
.hero-copy .kicker::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  transform:translateX(-50%);
  width:64px;
  height:3px;
  background:var(--brand);
  border-radius:3px;
  box-shadow:0 0 10px rgba(178,34,34,.6);
}
@keyframes kickerIn{ to{ opacity:1; transform: translateY(0); } }

/* =========================
   HERO ICONOS (NO SE ENSIMAN)
========================= */
.hero-icons{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--hero-icon-gap);
  margin-top: clamp(28px, 6vh, 65px);
  margin-bottom: 18px; /* ✅ separa del form */
  width: min(980px, 100%);
  margin-left:auto;
  margin-right:auto;
  align-items:start;
}
.hero-icons .icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:12px 8px;
  transition: transform .4s ease;
}
.hero-icons .icon-item i{
  font-size: var(--hero-icon-size);
  line-height:1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
}
.hero-icons .icon-item span{
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  opacity:.95;
}
@media (min-width:1101px){
  .hero-icons .icon-item:nth-child(1){ transform: translateY(-14px); }
  .hero-icons .icon-item:nth-child(2){ transform: translateY(18px); }
  .hero-icons .icon-item:nth-child(3){ transform: translateY(-14px); }
}
.hero-icons .icon-item:hover{ transform: translateY(-6px) scale(1.05); }

@media (min-width:901px){
  .hero-icons .icon-item:nth-child(5){
    grid-column: 3 !important;
    grid-row: 2 !important;
  }
}
@media (max-width:900px){
  .hero-icons .icon-item:nth-child(5){
    grid-column:auto !important;
    grid-row:auto !important;
  }
}

/* =========================
   HERO ICONOS - RESPONSIVE CORREGIDO
========================= */

/* Tablet (451px a 900px) - 2 columnas */
@media (min-width: 451px) and (max-width: 900px) {
    .hero-icons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px;
        margin-top: 22px;
        margin-bottom: 22px;
        padding: 0 20px;
    }
    .hero-icons .icon-item {
        transform: none !important;
    }
    .hero-icons .icon-item:nth-child(5) {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* Móvil (hasta 450px) - 1 columna */
@media (max-width: 450px) {
    .hero-icons {
        grid-template-columns: 1fr !important;  /* 1 SOLA COLUMNA */
        gap: 15px;
        margin-top: 18px;
        margin-bottom: 26px;
        padding: 0 20px;
    }

    .hero-icons .icon-item {
        transform: none !important;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        padding: 12px;
    }

    .hero-icons .icon-item i {
        font-size: 42px;
    }

    .hero-icons .icon-item span {
        font-size: 16px;
    }

    .hero-icons .icon-item:nth-child(5) {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* Móvil muy pequeño (menor a 380px) - ajustes finos */
@media (max-width: 380px) {
    .hero-icons {
        grid-template-columns: 1fr !important;  /* También 1 columna */
        gap: 12px;
        padding: 0 15px;
    }

    .hero-icons .icon-item i {
        font-size: 38px;
    }

    .hero-icons .icon-item span {
        font-size: 15px;
    }
}

/* =========================================================
   FORMULARIO HERO
========================================================= */

.search-form{ display:block; }
/* La fila donde van los inputs (caja principal) que crezca parejo */
.sg-col-location > .field,
.sg-col-datetime > .field{
  height: 100%;
}

.location-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  min-height: 18px;
}

.field-title{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height: var(--lab-h);
  position: relative;
  top: 2px;
}

.inline-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--ink);
  font-weight:700;
  user-select:none;
  white-space:nowrap;
}
.inline-check input{
  width:16px;
  height:16px;
  accent-color: var(--brand);
  margin:0;
}

.field{
  display:flex;
  flex-direction:column;
  gap: var(--lab-gap);
  position:relative;
  min-width:0;
}

label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height: var(--lab-h);
  margin:0;
}

input, select, textarea{
  border:1px solid #ccc;
  border-radius:10px;
  padding:0 12px;
  height: var(--ctl-h);
  font-size:14px;
  outline:none;
  background:#fff;
  color:var(--ink);
  opacity:1;
  width:100%;
  box-sizing:border-box;
}
select, option{ color:var(--ink); }
::placeholder{ color:#9ca3af; opacity:1; }

input:focus, select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(178,34,34,.15);
}

/* =========================
   ICONOS EN INPUTS (NO QUITAR)
========================= */
.icon-field{ position:relative; }
.field-icon{
  position:absolute;
  left:12px;
  top: calc(var(--lab-h) + var(--lab-gap) + (var(--ctl-h) / 2) + var(--ico-nudge));
  transform: translateY(-50%);
  color:#9ca3af;
  font-size:16px;
  pointer-events:none;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
}
.icon-field > input,
.icon-field > select{ padding-left:42px; }

.cal-ico{
  position:absolute;
  right:12px;
  top: calc(var(--lab-h) + var(--lab-gap) + (var(--ctl-h) / 2) + var(--ico-nudge));
  transform: translateY(-50%);
  font-size:18px;
  color:#9ca3af;
  pointer-events:none;
  opacity: 1 !important;
  display: grid !important;
  place-items: center !important;
}
.tp-selects{
  margin-top: 6px;
}
input.flatpickr-input{ padding-right:44px; }

.datetime-row{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  width:100%;
}
.datetime-row input,
.datetime-row select{ width:100%; }

.actions{ display:flex; width:100%; }
.actions button{
  width:100%;
  margin:0;
  background:var(--brand);
  color:#fff;
  border:0;
  padding:16px 18px;
  font-weight:900;
  border-radius:12px;
  cursor:pointer;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-transform:uppercase;
}

.hero,
.search-card,
.search-form,
.search-grid,
.field{
  overflow: visible !important;
}

/* B) Wrapper oficial del timepicker */
.timepicker-ui{
  position: relative;
  display:block;
  width:100%;
  z-index: 2;
}
.timepicker-ui .timepicker-ui-input{
  cursor: pointer;
}

.timepicker-ui-wrapper,
.timepicker-ui-modal,
.timepicker-ui-overlay,
.timepicker-ui-clock{
  z-index: 999999 !important;
}

.timepicker-ui-overlay{ z-index: 999998 !important; }
.timepicker-ui-modal{ z-index: 999999 !important; }

.dropdown-menu{
  z-index: 999999 !important;
}

.cal-ico{ pointer-events:none !important; }
.icon-field{ pointer-events:auto; }
.icon-field input,
.icon-field select{
  pointer-events:auto;
}

/* flatpickr */
.flatpickr-calendar{
  z-index: 999990 !important;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  overflow:hidden;
}
.flatpickr-months{ background:var(--brand); color:#fff; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInput.cur-year{ font-weight:700; color:#fff; }
.flatpickr-weekdays{ background:#f6f7fb; }
.flatpickr-weekday{ color:#8b1d1a; font-weight:700; }
.flatpickr-day{ border-radius:10px; font-weight:600; }
.flatpickr-day.inRange{
  background:rgba(178,34,34,.10);
  box-shadow:inset 0 0 0 1.5px rgba(178,34,34,.20),
             inset 0 -3px 0 rgba(178,34,34,.55),
             inset 0 3px 0 rgba(178,34,34,.55);
  color:var(--ink);
}
.flatpickr-day.startRange,
.flatpickr-day.endRange{ background:var(--brand); color:#fff; }
.flatpickr-day.startRange{ border-radius:12px 6px 6px 12px; }
.flatpickr-day.endRange{ border-radius:6px 12px 12px 6px; }
.flatpickr-day:hover{ background:rgba(178,34,34,.14); }
.flatpickr-day.today{ border:1.5px solid var(--brand); }
.flatpickr-time{ border-top:1px solid #e5e7eb; background:#fff; }
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{ font-weight:800; color:var(--ink); }

.hidden{ display:none !important; }
.small{ font-size:12px; color:var(--muted); margin-top:4px; }

.hero .search-card{
  position:static;
  transform:none;
  margin: 28px auto 20px;
  width:min(1180px,96%);
  max-height:1180px;
  overflow:visible;
}

/* =========================
   SECCIONES / CARDS
========================= */
.info-sections{ margin-top:110px; }
.info-row{
  max-width:1200px;
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:stretch;
  padding:0 16px;
}


/* =========================
   RESPONSIVOS
========================= */
.info-media{
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  position:relative; /* */
  box-shadow:var(--shadow);
  background:#000;
}

.media-carousel .media-slide{
  position:absolute;
  inset:0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity:0;
  transition:opacity .8s;
}

.media-carousel .media-slide.active{
  opacity:1;
}

.info-content{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:40px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
.info-content h2{
  font-family:'Playfair Display',serif;
  color:var(--brand);
  font-size:48px;
  line-height:1;
  margin:0 0 8px;
  text-transform:uppercase;
}
.info-content p{ color:#222; font-size:16px; line-height:1.6; margin:0; }
.cta-group{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.btn-lg{ padding:14px 20px; font-size:15px; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-whatsapp{ background:#25d366; color:#fff; }
.btn-ghost{ background:#fff; color:#111; border:1px solid #e5e7eb; }

/* =========================
   CTA FINAL
========================= */
.cta-hero{ position:relative; margin:40px 0 0; }
.cta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cta-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.2)); }
.cta-inner{
  position:relative; z-index:2;
  color:#fff; text-align:center;
  padding:90px 20px;
  min-height:320px;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
}
.cta-inner h2{
  font-family:'Playfair Display',serif;
  font-size:44px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0;
}

/* =========================
   Social lateral
========================= */
.social{
  position:fixed;
  right:12px;
  top:40%;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .28s ease;
  will-change: transform;
}
.social a{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:9px;
  text-decoration:none;
  font-size:20px;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.whatsapp{ background:#25d366; }
.facebook{ background:#1877f2; }
.instagram{ background:#e1306c; }
.tiktok{ background:#000; }

.social.peek{
  transform: translateX(calc(100% - 18px));
  opacity: 1 !important;
  display: flex !important;
}
.social.show{
  transform: translateX(0);
  opacity: 1 !important;
  display: flex !important;
}
.social.peek:hover{ transform: translateX(0); }

/* =========================
   Modal de Bienvenida
========================= */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200;}
.modal.show{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
.modal-card{
  position:relative;z-index:1;background:#fff;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  width:min(520px,92%);
  padding:20px;border:1px solid #e5e7eb;text-align:center;
}
.modal-close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:22px;color:#6b7280;cursor:pointer;}
.modal-card h3{margin:8px 0 6px;font-size:24px;}
.modal-card p{margin:0 0 12px;color:#374151 !important;}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap;}

/* =========================
   Dropdown
========================= */
.icon-item.dropdown{ position:relative; }
.dropdown-menu{
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  min-width:180px;
  padding:8px 0;
  z-index:1100 !important;
  overflow:visible !important;
}
.dropdown-menu .dropdown-item{
  font-weight:700;
  color:#333;
  font-size:14px;
  padding:8px 14px;
  transition:background .2s, color .2s;
}
.dropdown-menu .dropdown-item:hover{ background:rgba(178,34,34,.12); color:var(--brand); }
.dropdown-divider{ margin:6px 0; border-top:1px solid #eee; }

/* =========================
   FLEET / CARRUSELES
========================= */
.fleet{
  position:relative;
  width:min(1200px,94%);
  margin:120px auto 80px;
  background:transparent !important;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:0 !important;
}
.fleet-viewport{ position:relative !important; overflow:visible !important; }

.fleet-track{
  display:flex;
  gap:18px;
  scroll-snap-type:x mandatory;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 8px;
  transition:none;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:smooth;
}
.fleet-track::-webkit-scrollbar{ height:10px; }
.fleet-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:999px; }
.fleet-track::-webkit-scrollbar-track{ background:transparent; }

.car-card{
  flex:0 0 calc((100% - 36px) / 3);
  background:#fff !important;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  scroll-snap-align:start;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.car-card:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.18); }
.car-title h3{ margin:0; font-size:15px; letter-spacing:1.2px; color:var(--brand); }
.car-title p{ margin:2px 0 0; font-size:13px; color:var(--muted); }
.car-media{ width:100%; aspect-ratio:16/9; display:grid; place-items:center; }
.car-media img{
  width:90%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
.car-specs{
  margin:2px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:18px;
  color:#111827;
  font-weight:800;
}
.car-specs i{ margin-right:6px; color:#111827; }

.car-cta{
  margin-top:8px;
  display:block;
  text-align:center;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.6px;
  background:var(--brand);
  color:#fff;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 10px 22px rgba(178,34,34,.35);
  text-decoration:none;
  transition:transform .15s ease;
}
.car-cta:hover{ transform:translateY(-1px); }

.fleet-btn{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;

  /* ACTIVO */
  background:var(--brand) !important;
  border:2px solid var(--brand) !important;
  color:#fff !important;

  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;

  box-shadow:0 10px 24px rgba(178,34,34,.45) !important;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease !important;

  z-index:200 !important;
  pointer-events:auto !important;
}

.fleet-btn:not(.is-disabled):hover{
  background:#8b1d1a !important;
  border-color:#8b1d1a !important;
  transform:translateY(-50%) scale(1.08) !important;
  box-shadow:0 14px 30px rgba(178,34,34,.55) !important;
}

.fleet-btn.is-disabled,
.fleet-btn:disabled{
  background:#e5e7eb !important;
  border-color:#d1d5db !important;
  color:#9ca3af !important;

  box-shadow:none !important;
  pointer-events:none !important;
  cursor:default !important;
  animation:fleet-limit-pop .28s ease-out both;
}

@keyframes fleet-limit-pop{
  0%{
    transform:translateY(-50%) scale(1);
  }
  60%{
    transform:translateY(-50%) scale(0.92);
  }
  100%{
    transform:translateY(-50%) scale(1);
  }
}

.fleet-btn.prev{ left:-62px !important; }
.fleet-btn.next{ right:-62px !important; }

@media (max-width:1100px){
  .car-card{ flex:0 0 calc((100% - 18px) / 2); }
  .fleet-btn.prev{ left:-48px !important; }
  .fleet-btn.next{ right:-48px !important; }
}

@media (max-width:720px){
  .car-card{ flex:0 0 100%; }
  .fleet-btn{
    width:44px !important;
    height:44px !important;
  }
  .fleet-btn.prev{ left:8px !important; }
  .fleet-btn.next{ right:8px !important; }
  .fleet{ margin:90px auto 50px !important; }
}

#fleet-carousel + .fleet-meta,
#fleet-carousel-2 + .fleet-meta{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1.2;
}
#fleet-carousel + .fleet-meta .sep,
#fleet-carousel-2 + .fleet-meta .sep{
  color: var(--brand);
  font-weight: 900;
  margin: 0 10px;
  font-size: 18px;
}

.offer{ margin-top:4px; display:flex; flex-direction:column; gap:4px; }
.offer-badge{
  position:absolute;
  right:14px;
  top:12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff;
  font-weight:900;
  font-size:16px;
  letter-spacing:.8px;
  padding:8px 14px;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(178,34,34,.45);
  transform: translateZ(0) scale(1.05);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.offer-badge::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
  pointer-events:none;
}
.car-card:hover .offer-badge{
  transform: translateZ(0) scale(1.15);
  box-shadow: 0 10px 28px rgba(178,34,34,.55);
  filter: brightness(1.05);
}
@media (max-width:720px){
  .offer-badge{
    font-size:14px;
    padding:6px 10px;
    right:10px;
    top:10px;
  }
}
.price-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-now{ font-size:22px; font-weight:900; line-height:1; color:#0b1220; }
.per{ font-size:13px; font-weight:800; color:#6b7280; margin-left:-6px; }
.price-old{ font-size:14px; color:#9aa3b2; text-decoration:line-through; font-weight:800; }
.price-note{ font-size:12px; color:#6b7280; font-weight:700; }

.car-connect{ margin-top:2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.badge-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  background:#f3f4f6;
  color:#111827;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  line-height:1;
  user-select:none;
}
.badge-chip svg{ width:16px; height:16px; display:block; fill:currentColor; }
.badge-apple{ background:#0b1220; color:#fff; border-color:#0b1220; }
.badge-android{ background:#e8f5e9; color:#1b5e20; border-color:#c8e6c9; }
@media (hover:hover){
  .badge-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
}
@media (max-width:720px){
  .badge-chip{ font-size:11px; padding:5px 9px; }
  .badge-chip svg{ width:14px; height:14px; }
}

/* =========================
   Banner reservas en vivo (toast)
========================= */
.rv-banner-wrap{
  position:fixed;
  top:auto !important;
  bottom:16px !important;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  width:min(1100px,95%);
  pointer-events:none;
}
.rv-banner{
  pointer-events:auto;
  display:none;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
@media (max-width:560px){ .rv-banner-wrap{ bottom:86px !important; } }

.rv-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; }
.rv-car{
  width:34px; height:34px; border-radius:10px;
  background:rgba(178,34,34,.10);
  display:grid; place-items:center;
  animation:rv-car-move 3s ease-in-out infinite;
}
.rv-car svg{ color:var(--brand); }
@keyframes rv-car-move{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(6px) } }

.rv-live{ font-weight:700; color:var(--ink); font-size:13px; }
.rv-live::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:6px;
  background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:rv-live 1.5s ease-out infinite;
}
@keyframes rv-live{
  0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5) }
  70%{ box-shadow:0 0 0 10px rgba(16,185,129,0) }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0) }
}
.rv-text{ font-size:13px; color:#3f3f46; }
.rv-count{ font-weight:900; color:var(--ink); }

.rv-cta{
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(178,34,34,.25);
  transition:opacity .2s ease;
}
.rv-cta:hover{ opacity:.95; }
.rv-close{
  border:0;
  background:transparent;
  color:#9ca3af;
  font-size:18px;
  cursor:pointer;
}
.rv-close:hover{ color:#374151; }

.rv-bar{ height:4px; width:100%; background:#f1f5f9; }
.rv-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand),#ef4444,#fb923c,var(--brand));
  background-size:300% 100%;
  animation:rv-bar-move 1.6s linear infinite;
}
@keyframes rv-bar-move{ from{background-position:0% 50%} to{background-position:200% 50%} }

.rv-in{ animation:rv-drop .35s cubic-bezier(.2,.7,.2,1) forwards; }
.rv-out{ animation:rv-lift .28s ease forwards; }
@keyframes rv-drop{ from{ opacity:0; transform:translateY(-10px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }
@keyframes rv-lift{ from{ opacity:1; transform:translateY(0) scale(1) } to{ opacity:0; transform:translateY(-10px) scale(.98) } }

@media (max-width:560px){
  .rv-text{ font-size:12px; }
  .rv-cta{ display:none; }
}

/* =========================
   SWIPER TARJETAS (tiles)
========================= */
.vj-tiles-swiper{
  padding: 6px 10px 42px;
  width: min(1200px, 94%);
  margin: 40px auto 80px;
  overflow:hidden;
}
.vj-tiles-swiper .swiper-slide{ height:auto; }

.tile-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tile-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
}
.tile-card .tile-media{
  width:100%;
  height:230px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.tile-card .tile-body{
  padding:18px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.tile-card h3{
  margin:0;
  font-size:1.1rem;
  color:var(--brand);
  letter-spacing:.2px;
  text-transform:uppercase;
}
.tile-card p{
  margin:0;
  color:var(--ink);
  opacity:.85;
  line-height:1.45;
}
.tile-card .tile-link{
  margin-top:auto;
  font-weight:700;
  color:var(--brand);
  text-decoration:none;
}
.tile-card .tile-link:hover{ text-decoration:underline; }

.vj-tiles-swiper .swiper-button-prev,
.vj-tiles-swiper .swiper-button-next{
  width:42px; height:42px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.vj-tiles-swiper .swiper-button-prev:after,
.vj-tiles-swiper .swiper-button-next:after{
  font-size:18px;
  color:var(--brand);
}

.vj-tiles-swiper .swiper-pagination-bullet{
  opacity:.35;
  background:var(--brand);
}
.vj-tiles-swiper .swiper-pagination-bullet-active{
  opacity:1;
  transform:scale(1.15);
}

@media (max-width:768px){ .tile-card .tile-media{ height:200px; } }
@media (max-width:560px){
  .vj-tiles-swiper{ padding-bottom:36px; }
  .tile-card .tile-media{ height:180px; }
}

/* =========================
   FOOTER / FOOTBAR
========================= */
.site-footer{
  position:relative;
  margin-top:0;
  color:#e8edf5;
}
.footer-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.footer-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.95) 0%, rgba(11,18,32,.98) 60%, rgba(11,18,32,1) 100%);
}
.footer-content{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:30px 16px 20px;
}
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.footer-brandmark{
  font-family:'Playfair Display',serif;
  font-weight:900;
  font-size:22px;
  letter-spacing:2px;
  margin-bottom:14px;
}
.loc-row{ margin-top:10px; margin-bottom:20px; justify-content:center; }
.loc-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.06);
  padding:12px 14px;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.loc-card .pin{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--brand), #8b1d1a);
  box-shadow:0 8px 16px rgba(0,0,0,.35);
}
.loc-body h4{ margin:0; font-size:15px; color:#fff; }
.loc-body p{ margin:2px 0 0; font-size:12px; color:#b7c0d3; }

.pay-row{ margin:12px 0; }
.payments-logos{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.payments-logos img{
  height:26px;
  background:#fff;
  padding:5px 8px;
  border-radius:6px;
  box-shadow:0 6px 12px rgba(0,0,0,.25);
}
.links-row{
  margin-top:16px;
  align-items:flex-start;
  justify-content:center;
  gap:50px;
}
.links-row ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.links-row a{
  color:#cbd3e1;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.links-row a:hover{ color:#fff; }

.footer-copy{
  margin-top:18px;
  text-align:center;
  color:#9fb0cc;
  font-size:13px;
}

/* =========================
   RESPONSIVO GENERAL + FIX ENSIMADO REAL
========================= */
@media (max-width:1100px){
  .headline{ font-size:54px; }
}

@media (max-width:900px){
  .headline{ font-size:46px; }

  .hero .search-card{
    position:static;
    transform:none;
    margin: 40px auto 20px;
    width:min(720px,94%);
    max-height:none;
    overflow:visible;
  }

  .search-grid{ grid-template-columns:1fr 1fr; }
  .sg-col-submit{ grid-column:1 / -1; }

  .hero{ padding-top:78px; }
  .topbar{ left:50%; transform:translateX(-50%); width:96%; }
  .info-row,.info-row.reverse{ grid-template-columns:1fr; gap:18px; }
  .tiles-wrap{ grid-template-columns:1fr 1fr; }
  .info-content h2{ font-size:40px; }

  .hero-copy{ padding-bottom: 52px ; }
}

@media (max-width:560px){
  .headline{ font-size:34px; }
  .search-card{ padding:25px 12px 14px; }
  .search-grid{ grid-template-columns:1fr; }
  .info-content h2{ font-size:36px; }
  .hero .search-card{ margin-top: 50px; }
}

/* =========================
   Focus
========================= */
.btn,
.btn-primary,
.btn-ghost,
.car-cta,
.fleet-btn,
a.btn,
button{
  outline:none;
}
.btn:focus,
.btn:focus-visible,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-ghost:focus,
.btn-ghost:focus-visible,
.car-cta:focus,
.car-cta:focus-visible,
.fleet-btn:focus,
.fleet-btn:focus-visible,
a.btn:focus,
a.btn:focus-visible,
button:focus,
button:focus-visible{
  outline:0 !important;
  box-shadow:none !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner{ border:0; }
.btn, .car-cta, .fleet-btn, a.btn{ -webkit-tap-highlight-color:transparent; }

/* =========================
   TIMEPICKER UI — VIAJERO THEME
========================= */
.timepicker-ui-modal,
.timepicker-ui-clock,
.timepicker-ui-wrapper{
  font-family: 'Poppins', system-ui, -apple-system, Arial, sans-serif;
}
.timepicker-ui-modal{
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.25) !important;
}
.timepicker-ui-modal .timepicker-ui-header{
  background: var(--brand) !important;
  color: #fff !important;
}
.timepicker-ui-modal .timepicker-ui-hour,
.timepicker-ui-modal .timepicker-ui-minute,
.timepicker-ui-modal .timepicker-ui-am,
.timepicker-ui-modal .timepicker-ui-pm{
  color: #fff !important;
  font-weight: 800 !important;
}
.timepicker-ui-modal .timepicker-ui-clock{
  background: #f3f4f6 !important;
}
.timepicker-ui-modal .timepicker-ui-clock-hand,
.timepicker-ui-modal .timepicker-ui-clock-hand::before,
.timepicker-ui-modal .timepicker-ui-clock-hand::after{
  background: var(--brand) !important;
}
.timepicker-ui-modal .timepicker-ui-value-active{
  background: var(--brand) !important;
  color: #fff !important;
}
.timepicker-ui-modal .timepicker-ui-cancel,
.timepicker-ui-modal .timepicker-ui-ok{
  font-weight: 900 !important;
}
.timepicker-ui-modal .timepicker-ui-ok{
  color: var(--brand) !important;
}

.timepicker-ui-overlay{ z-index: 999998 !important; }
.timepicker-ui-modal{ z-index: 999999 !important; }

input#pickupTime,
input#dropoffTime{
  -webkit-tap-highlight-color: transparent;
  caret-color: transparent;
  cursor: pointer;
}
/* =====================================================================
   TIME SELECTS
===================================================================== */

.tp-selects{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.tp-selects select{
  height: var(--ctl-h);
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0 12px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}


.tp-selects select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(178,34,34,.15);
}

.icon-field .tp-selects{
  padding-left: 0;
}

@media (max-width: 520px){
  .tp-selects{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   FIX
========================================================= */

.time-field{ position: relative; }

.time-field .tp-selects select:first-child{
  padding-left: 44px !important;
}

.time-field .tp-selects select:nth-child(2){
  padding-left: 12px !important;
}
/* =====================================================================
   PARCHE — Ajuste fino de icono reloj y selects de hora/minuto
===================================================================== */

:root{
  --clock-nudge: 0px;
}

.cal-ico{
  top: calc(
    var(--lab-h)
    + var(--lab-gap)
    + (var(--ctl-h) / 2)
    + var(--ico-nudge)
    + var(--clock-nudge)
  ) !important;
}

.tp-selects{
  margin-top: 6px !important;
  gap: 8px !important;
}
:root{
  --timeclock-nudge: 4px;
}

.search-card .time-field.icon-field{
  position: relative !important;
}

.search-card .time-field.icon-field .cal-ico{
  display: none !important;
}

.search-card .time-field.icon-field::before{
  content:"\f017";
  font-family:"Font Awesome 6 Free";
  font-weight:400;
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
  z-index:3;
  pointer-events:none;
}

.search-card .time-field.icon-field input#pickupTime,
.search-card .time-field.icon-field input#dropoffTime{
  padding-left: 44px !important; /* espacio del icono */
  padding-right: 12px !important;
}

.search-card .time-field.icon-field .field-icon{
  display:none !important;
}

:root{
  --sg-head-h: 34px;
}

.search-card .sg-col-location,
.search-card .sg-col-datetime{
  min-width:0;
  display:grid;
  grid-template-rows: var(--sg-head-h) auto auto;
  row-gap: 10px;
  align-content:start;
}

.search-card .sg-col-location .location-head{
  min-height: var(--sg-head-h);
  height: var(--sg-head-h);
  display:flex;
  align-items:center;
  gap: 12px;
  margin:0;
}

.search-card .sg-col-location .inline-check{
  line-height: 1;
}

.search-card .sg-col-datetime > .field-title,
.search-card .sg-col-datetime .field-title:first-child{
  min-height: var(--sg-head-h);
  height: var(--sg-head-h);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
}

.search-card .sg-col-location > .field,
.search-card .sg-col-datetime > .field{
  height: 100%;
}

:root{
  --loc-shift: -12px;
  --dt-shift:  10px;
}

.search-card .sg-col-location{
  margin-top: var(--loc-shift) !important;
}
.search-card .sg-col-datetime{
  margin-top: var(--dt-shift) !important;
}
.search-card .sg-col-location .field.hidden{
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.search-card .sg-col-submit{
  margin-top: 16px !important;
}
@media (max-width:560px){
  .search-card .sg-col-submit{
    margin-top: 18px !important;
  }
}

.search-card .sg-col-location .hidden{
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.search-card .sg-col-location .field.hidden{
  display: flex !important;
}

.search-card .sg-col-location [style*="display: none"]{
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.search-card .sg-col-location .field[style*="display: none"]{
  display: flex !important;
}
/* =========================================
   FIX SOLO MÓVIL
========================================= */
/* =========================================
   FIX SOLO MÓVIL
========================================= */
@media (max-width:560px){

  .search-card .sg-col-submit{
    margin-top: 18px !important;
    align-items: flex-start !important;
  }

  .search-card .actions{
    display: block !important;
    width: 100% !important;
  }

  .search-card{
    max-height: none !important;
    overflow: visible !important;
  }

  .search-grid{
    grid-template-columns: 1fr !important;
    align-items: start !important;
    row-gap: 16px !important;
  }

  .search-card .sg-col-location,
  .search-card .sg-col-datetime{
    display: block !important;
    margin-top: 0 !important;
  }

  .search-card .field{
    margin: 0 0 12px !important;
  }

  .search-card .field:last-child{
    margin-bottom: 0 !important;
  }

  .tp-selects{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 10px !important;
  }

  .search-card .sg-col-submit{
    margin-top: 8px !important;
  }

  .search-card .actions button{
    width: 100% !important;
    padding: 14px 18px !important;
    margin-top: 10px !important;
  }
}
/* =========================================================
   FIX
========================================================= */

input.flatpickr-input:focus{
  outline: none !important;
  box-shadow: none !important;
}

input.flatpickr-input{
  -webkit-tap-highlight-color: transparent !important;
}

@supports (-webkit-touch-callout: none){
  input.flatpickr-input:focus{
    outline: 0 !important;
    box-shadow: none !important;
  }
}
/* =========================================================
   iOS FIX
========================================================= */
@supports (-webkit-touch-callout: none){

  .search-card input,
  .search-card select,
  .search-card textarea{
    font-size:16px !important;
  }

  .search-card{
    max-height: none !important;
    overflow: visible !important;
  }

  .flatpickr-calendar{
    z-index: 999999 !important;
  }
}



/* ===== MÉTODOS DE PAGO FOOTER ===== */

.payments-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:20px;
}

.payments-logos img{
  height:34px;
  object-fit:contain;
  background:transparent !important;
  filter: brightness(1.05);
  transition:.2s ease;
}

.payments-logos img:hover{
  transform:scale(1.08);
}

/* tamaños específicos */
.payments-logos img.oxxo{
  height:38px;
}

.payments-logos img.mp{
  height:30px;
}

/* CENTRAR MÉTODOS DE PAGO */

.footer-row.pay-row{
  display:flex;
  justify-content:center;
}

.payments-logos{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

/* tamaño parejito */
.payments-logos img{
  height:34px;
  object-fit:contain;
  background:transparent !important;
  transition:.25s ease;
}

.payments-logos img:hover{
  transform:scale(1.1);
}

.payments-logos img.oxxo{
  height:38px;
}

.payments-logos img.mp{
  height:30px;
}

/* Contenedor */
.payments-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
}

/* Todos */
.payments-logos img{
  height:30px;
  object-fit:contain;
}

/* SOLO Mastercard */
.payments-logos img[src*="master"]{
  height:42px;
}

/* SOLO PayPal */
.payments-logos img[src*="paypal"]{
  height:42px;
}
/* ============================================================
    ESCRITORIO (>= 1125px) - CORREGIDO (espacios)
============================================================ */
@media (min-width: 1125px) {

    :root {
        --title-height: 30px;
        --title-margin: 8px;
        --input-height: 48px;
        --border-radius: 8px;
        --brand: #b22222;
        --border-color: #ccc;
        --text-color: #666;
        --placeholder-color: #666;
        --icon-color: #333;
    }

    #miBuscador.search-card {
        width: 94vw !important;
        max-width: 1200px !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
         padding: 25px 25px 40px 25px;
        background: #f8f8f8 !important;
        border-radius: 12px !important;
        margin-top: 0px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }
    /* ===== GRID PRINCIPAL ===== */
    #miBuscador .search-grid {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* ===== COLUMNA 1: LUGAR DE RENTA ===== */
    .sg-col-location {
        flex: 1.5 !important;
        min-width: 280px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .location-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: var(--title-height) !important;
        margin-bottom: var(--title-margin) !important;
    }

    .location-head .field-title {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        line-height: var(--title-height) !important;
        margin: 0 !important;
    }

    .inline-check {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        color: #555 !important;
        white-space: nowrap !important;
        line-height: var(--title-height) !important;
        height: var(--title-height) !important;
    }

    .inline-check input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        accent-color: var(--brand) !important;
        margin: 0 !important;
    }

    /* ===== WRAPER DE SELECTS ===== */
    .location-inputs-wrapper {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        height: var(--input-height) !important;
    }

    .location-inputs-wrapper .field {
        flex: 1 !important;
        position: relative !important;
        height: var(--input-height) !important;
    }

    /* ESTILOS UNIFICADOS PARA TODOS LOS INPUTS Y SELECTS */
    .location-inputs-wrapper select,
    .dt-field input,
    .dt-field select,
    .tp-selects select {
        width: 100% !important;
        height: var(--input-height) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--border-radius) !important;
        font-size: 13px !important;
        color: var(--text-color) !important;
        background: white !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Placeholders con color unificado */
    .dt-field input::placeholder {
        color: var(--placeholder-color) !important;
        opacity: 1 !important;
        font-weight: 400 !important;
    }

    /* Focus styles para todos */
    .location-inputs-wrapper select:focus,
    .dt-field input:focus,
    .dt-field select:focus,
    .tp-selects select:focus {
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px rgba(178,34,34,.15) !important;
        outline: none !important;
    }

    /* Estilos específicos para selects */
    .location-inputs-wrapper select {
        padding: 0 8px 0 12px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
    }

    .location-inputs-wrapper select option:first-child,
    .dt-field select option:first-child,
    .tp-selects select option:first-child {
        color: var(--placeholder-color) !important;
    }

    .location-inputs-wrapper .field .field-icon {
        display: none !important;
    }

    /* ===== CONTROL DEL CHECKBOX ===== */
    #dropoffWrapper {
        flex: 1 !important;
        transition: all 0.3s ease !important;
        height: var(--input-height) !important;
    }

    #dropoffWrapper.hidden-dropoff {
        display: none !important;
    }

    /* ===== COLUMNA DE FECHAS (PICK-UP Y DEVOLUCIÓN) ===== */
    .sg-col-datetime {
        flex: 2.2 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }

    .sg-col-datetime .field {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    .solo-responsivo-izq {
        display: block !important;
        height: var(--title-height) !important;
        margin-bottom: var(--title-margin) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        line-height: var(--title-height) !important;
        white-space: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .datetime-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: var(--input-height) !important;
    }

    .dt-field {
        flex: 1 !important;
        position: relative !important;
        height: var(--input-height) !important;
    }

    .dt-field input {
        padding: 0 8px 0 36px !important;
    }

    .tp-selects {
        height: var(--input-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    .tp-selects select {
        padding: 0 8px 0 36px !important;
        line-height: normal !important;
    }

    /* ===== ICONOS ===== */
    .dt-field .field-icon {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--icon-color) !important;
        font-size: 14px !important;
        z-index: 3 !important;
        pointer-events: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .datetime-row {
        align-items: stretch !important;
    }

    .sg-col-datetime .field {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ===== BOTÓN BUSCAR ===== */
    .sg-col-submit {
        flex: 0.35 !important;
        min-width: 90px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .sg-col-submit::before {
        content: "";
        display: block !important;
        width: 100% !important;
        height: calc(var(--title-height) + var(--title-margin)) !important;
        visibility: hidden !important;
    }

    .actions {
        height: var(--input-height) !important;
        width: 100% !important;
    }

    .actions button {
        width: 100% !important;
        height: var(--input-height) !important;
        background: var(--brand) !important;
        color: white !important;
        border: none !important;
        border-radius: var(--border-radius) !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    /* ===== ALINEACIÓN CONSISTENTE ===== */
    .location-inputs-wrapper,
    .datetime-row,
    .actions {
        height: var(--input-height) !important;
        margin: 0 !important;
    }

    .field, .dt-field {
        margin: 0 !important;
        padding: 0 !important;
    }

    .location-head,
    .solo-responsivo-izq {
        height: var(--title-height) !important;
        margin-bottom: var(--title-margin) !important;
        box-sizing: border-box !important;
    }
}
/* ============================================================
    TABLET Y MÓVIL (max-width: 1124px)
============================================================ */
@media (max-width: 1124px) {

    /* ===== CONTENEDOR PRINCIPAL ===== */
    #miBuscador.search-card {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        margin: 0 !important;
        padding: 100px 20px 40px !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }

    #miBuscador.search-card.active {
        display: block !important;
        padding-top: 60px !important;
    }

    /* ===== BOTÓN DE CERRAR ===== */
    .btn-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 50px !important;
        right: 25px !important;
        z-index: 100002 !important;
        width: 35px !important;
        height: 35px !important;
        background: #ffffff !important;
        border: 1px solid var(--brand) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }

    .btn-close::before {
        content: "×" !important;
        display: block !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        color: var(--brand) !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }
body:has(#miBuscador.search-card.active) header,
body:has(#miBuscador.search-card.active) .navbar,
body:has(#miBuscador.search-card.active) .header-rojo,
body:has(#miBuscador.search-card.active) .social-fab,
body:has(#miBuscador.search-card.active) .fab-main,
body:has(#miBuscador.search-card.active) .fab-item,
body:has(#miBuscador.search-card.active) .fleet,
body:has(#miBuscador.search-card.active) .fleet-meta,
body:has(#miBuscador.search-card.active) .car-card,
body:has(#miBuscador.search-card.active) .fleet-btn,
body:has(#miBuscador.search-card.active) .badge-chip,
body:has(#miBuscador.search-card.active) .car-connect {
    display: none !important;
}

@media (max-width: 1124px) {
    body:has(#miBuscador.search-card.active) .rv-banner-wrap,
    body:has(#miBuscador.search-card.active) .rv-banner {
        display: none !important;
    }
}

    /* ===== GRID ===== */
    .search-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .sg-col {
        width: 100% !important;
    }
    .sg-col .field-title,
    .sg-col .solo-responsivo-izq,
    .sg-col.location-head .field-title {
        display: block !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        margin: 0 0 8px 0 !important;
        text-align: left !important;
        width: 100% !important;
        letter-spacing: 0.5px !important;
    }

    .sg-col-location .location-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .sg-col-location .location-head .field-title {
        margin: 0 !important;
        font-size: 13px !important;
        text-align: left !important;
    }

    /* Checkbox */
    .sg-col-location .inline-check {
        margin: 0 !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: #555 !important;
    }

    .inline-check input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        accent-color: var(--brand) !important;
        margin: 0 !important;
    }

    /* ===== ESTILOS UNIFICADOS PARA TODOS LOS INPUTS ===== */
    .field select,
    .field input[type="text"],
    .dt-field input,
    .dt-field select,
    .time-field select,
    .time-field .tp-selects select,
    .location-inputs-wrapper select,
    .location-inputs-wrapper input {
        width: 100% !important;
        height: 50px !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        color: #666 !important;
        background: white !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Placeholders  */
    .dt-field input::placeholder,
    .field input::placeholder {
        color: #666 !important;
        opacity: 1 !important;
        font-weight: 400 !important;
    }

    /* Focus para todos */
    .field select:focus,
    .field input[type="text"]:focus,
    .dt-field input:focus,
    .dt-field select:focus,
    .time-field select:focus,
    .time-field .tp-selects select:focus,
    .location-inputs-wrapper select:focus,
    .location-inputs-wrapper input:focus {
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px rgba(178,34,34,.15) !important;
        outline: none !important;
    }

    .field-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #333 !important;
        font-size: 16px !important;
        z-index: 2 !important;
        pointer-events: none !important;
        width: 16px !important;
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Wrapper de selects de ubicación */
    .location-inputs-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .location-inputs-wrapper .field {
        width: 100% !important;
        position: relative !important;
    }

    .location-inputs-wrapper .field .field-icon {
        display: none !important;
    }

    .location-inputs-wrapper select,
    .location-inputs-wrapper input {
        padding-left: 12px !important;
    }

    #dropoffWrapper {
        display: none !important;
        width: 100% !important;
    }

    #dropoffWrapper[style*="display: flex"] {
        display: flex !important;
    }

    .sg-col-datetime {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .sg-col-datetime .field {
        width: 100% !important;
    }

    .datetime-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .datetime-row .dt-field {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        position: relative !important;
        width: 50% !important;
    }

    .time-field {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        position: relative !important;
    }

    .time-field .tp-selects {
        display: flex !important;
        width: 100% !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .time-field .tp-selects select {
        padding-left: 42px !important;
        padding-right: 10px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .time-field input.tp-hidden-input {
        display: none !important;
    }

    /* Icono de reloj  */
    .time-field::before {
        content: "\f017" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 400 !important;
        position: absolute !important;
        left: 12px !important;
        top: 25px !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 16px !important;
        color: #333 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    .time-field .field-icon {
        display: none !important;
    }

    .dt-field:not(.time-field) {
        position: relative !important;
    }

    .dt-field:not(.time-field) input {
        padding-left: 42px !important;
        padding-right: 10px !important;
    }

    .dt-field:not(.time-field) .field-icon {
        display: flex !important;
        position: absolute !important;
        left: 12px !important;
        top: 25px !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        color: #333 !important;
    }

    /* ===== BOTÓN BUSCAR ===== */
    .sg-col-submit .actions {
        margin-top: 10px !important;
    }

    .sg-col-submit button {
        width: 100% !important;
        height: 55px !important;
        background: var(--brand) !important;
        color: white !important;
        font-weight: bold !important;
        border-radius: 8px !important;
        border: none !important;
        font-size: 16px !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
    }

    .sg-col-submit button:hover {
        background: #8b1a1a !important;
    }
}

/* ============================================================
    FIX ESPECÍFICO PARA MÓVIL (menor a 560px)
============================================================ */
@media (max-width: 560px) {

    #miBuscador.search-card.active {
        padding: 80px 15px 30px !important;
    }

    .sg-col-datetime {
        gap: 15px !important;
    }

    .datetime-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }

    .datetime-row .dt-field {
        width: 50% !important;
    }

    .field select,
    .field input[type="text"],
    .dt-field input,
    .dt-field select,
    .time-field .tp-selects select,
    .location-inputs-wrapper select,
    .location-inputs-wrapper input {
        height: 48px !important;
        font-size: 15px !important;
        padding-left: 40px !important;
    }

    /* Placeholders en móvil */
    .dt-field input::placeholder,
    .field input::placeholder {
        color: #666 !important;
    }

    .dt-field:not(.time-field) .field-icon,
    .time-field::before {
        left: 10px !important;
        top: 24px !important;
        font-size: 15px !important;
        color: #333 !important;
    }

    .sg-col-submit button {
        height: 50px !important;
        font-size: 15px !important;
    }

    .sg-col .field-title,
    .sg-col .solo-responsivo-izq {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .sg-col-location .inline-check {
        font-size: 11px !important;
        gap: 4px !important;
    }

    .inline-check input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ============================================================
    FIX PARA MÓVIL MUY PEQUEÑO
============================================================ */
@media (max-width: 380px) {

    .datetime-row {
        gap: 5px !important;
    }

    .field select,
    .field input[type="text"],
    .dt-field input,
    .dt-field select,
    .time-field .tp-selects select,
    .location-inputs-wrapper select,
    .location-inputs-wrapper input {
        padding-left: 35px !important;
        font-size: 14px !important;
    }

    .dt-field:not(.time-field) .field-icon,
    .time-field::before {
        left: 8px !important;
        width: 16px !important;
        font-size: 14px !important;
        color: #333 !important;
    }

    /* Placeholders en móvil muy pequeño */
    .dt-field input::placeholder,
    .field input::placeholder {
        color: #666 !important;
        font-size: 13px !important;
    }
}

/* ============================================================
    ESTILOS GLOBALES
============================================================ */
.location-inputs-wrapper .field .field-icon {
    display: none !important;
}

.dt-field .field-icon {
    display: flex !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
    color: #333 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.search-card .time-field.icon-field::before {
    content: "\f017" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(calc(-50% + 2px)) !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 99999 !important;
}

/* Placeholders global */
.dt-field input::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

.dt-field input,
.dt-field select,
.tp-selects select {
    padding-left: 42px !important;
    padding-right: 12px !important;
    text-indent: 0 !important;
}

.dt-field,
.tp-selects,
.time-field.icon-field {
    position: relative !important;
}

.search-card .time-field.icon-field .cal-ico,
.search-card .time-field.icon-field .field-icon {
    display: none !important;
}

#dropoffWrapper[style*="display: none"] {
    display: none !important;
}
/* ============================================================
    ALERTAS -
============================================================ */

.field-error,
input.field-error,
select.field-error,
.flatpickr-input.field-error,
.tp-selects select.field-error {
    border: 2px solid #e53935 !important;
    outline: none !important;
}

.field-success,
input.field-success,
select.field-success,
.flatpickr-input.field-success,
.tp-selects select.field-success {
    border: 2px solid #43a047 !important;
    outline: none !important;
}

.field-error input,
.field-error select,
.field-error .flatpickr-input {
    border: 2px solid #e53935 !important;
}

.field-success input,
.field-success select,
.field-success .flatpickr-input {
    border: 2px solid #43a047 !important;
}

/* Mensajes de error */
.error-msg {
    color: #e53935 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    position: absolute !important;
    bottom: -18px !important;
    left: 12px !important;
    pointer-events: none !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}

.field, .dt-field, .time-field, .location-inputs-wrapper .field {
    position: relative !important;
}

/* ============================================================
    SELECT2
============================================================ */
select.field-error + .select2-container .select2-selection {
    border: 2px solid #e53935 !important;
}

select.field-success + .select2-container .select2-selection {
    border: 2px solid #43a047 !important;
}

/* ============================================================
    FLATPICKR - FIX PARA ALTINPUT
============================================================ */
.dt-field .flatpickr-input {
    width: 100% !important;
    height: 48px !important;
    border-radius: 8px !important;
    padding-left: 36px !important;
}

.dt-field .flatpickr-input:not(.field-error):not(.field-success) {
    border: 1px solid #ccc;
}

/* ============================================================
    AJUSTES POR DISPOSITIVO
============================================================ */

/* MÓVIL (<= 560px) */
@media (max-width: 560px) {
    .field, .dt-field, .time-field {
        margin-bottom: 25px !important;
    }

    .error-msg {
        font-size: 9px !important;
        white-space: normal !important;
        width: 100% !important;
    }
}

/* TABLET (561px - 1124px) */
@media (min-width: 561px) and (max-width: 1124px) {
    .field, .dt-field, .time-field {
        margin-bottom: 20px !important;
    }
}

/* ESCRITORIO (>= 1125px) */
@media (min-width: 1125px) {
    .field, .dt-field, .time-field {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
    OCULTAR ELEMENTOS SOLO MÓVIL
============================================================ */
.solo-responsivo,
.field .solo-responsivo,
.dt-field .solo-responsivo,
.time-field .solo-responsivo {
    display: none !important;
}

.solo-responsivo-izq {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
    HERO ICONS - MÓVIL MUY PEQUEÑO (<= 380px)
============================================================ */

@media (max-width: 560px) {
    .hero-icons {
        grid-template-columns: 1fr !important;  /* UNA SOLA COLUMNA */
        gap: 20px !important;
        padding: 25px 15px !important;
        width: 100% !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-icons .icon-item {
        transform: none !important;  /* Quita cualquier desplazamiento */
        width: 100% !important;
        margin: 0 auto !important;
    }

    .hero-icons .icon-item i {
        font-size: 42px !important;
    }

    .hero-icons .icon-item span {
        font-size: 15px !important;
    }
}

@media (max-width: 380px) {
    .hero-icons {
        gap: 20px !important;
        padding: 25px 15px !important;
    }

    .hero-icons .icon-item i {
        font-size: 42px !important;
    }

    .hero-icons .icon-item span {
        font-size: 15px !important;
    }
}

/* ==========================================
   FIX ALERTAS SOLO EN MÓVIL
========================================== */
@media (max-width: 560px) {

    .error-msg {
        position: static !important;
        display: block !important;
        margin-top: 6px !important;
        left: 0 !important;
        bottom: 0 !important;
        text-align: left !important;
        width: 100% !important;
        white-space: normal !important;
        font-size: 11px !important;
    }

    .field,
    .dt-field,
    .time-field {
        margin-bottom: 18px !important;
    }
}

/* ============================================================
    GARANTIZAR BORDES DE ERROR - TODOS LOS DISPOSITIVOS
============================================================ */
.dt-field .flatpickr-input.field-error,
.dt-field input.field-error,
input#pickupDate.field-error,
input#dropoffDate.field-error,
.flatpickr-input.field-error {
    border: 2px solid #e53935 !important;
}

.dt-field .flatpickr-input.field-success,
.dt-field input.field-success,
input#pickupDate.field-success,
input#dropoffDate.field-success,
.flatpickr-input.field-success {
    border: 2px solid #43a047 !important;
}

/* Para móvil (max-width: 1124px) */
@media (max-width: 1124px) {
    .dt-field .flatpickr-input.field-error,
    .dt-field input.field-error,
    input#pickupDate.field-error,
    input#dropoffDate.field-error,
    .flatpickr-input.field-error {
        border: 2px solid #e53935 !important;
        border-color: #e53935 !important;
    }

    .dt-field .flatpickr-input.field-success,
    .dt-field input.field-success,
    input#pickupDate.field-success,
    input#dropoffDate.field-success,
    .flatpickr-input.field-success {
        border: 2px solid #43a047 !important;
        border-color: #43a047 !important;
    }
}

/* Para móvil muy pequeño */
@media (max-width: 560px) {
    .dt-field .flatpickr-input.field-error,
    .dt-field input.field-error,
    input#pickupDate.field-error,
    input#dropoffDate.field-error,
    .flatpickr-input.field-error {
        border: 2px solid #e53935 !important;
    }

    .dt-field .flatpickr-input.field-success,
    .dt-field input.field-success,
    input#pickupDate.field-success,
    input#dropoffDate.field-success,
    .flatpickr-input.field-success {
        border: 2px solid #43a047 !important;
    }
}
/* ==========================================================
   FLATPICKR - ESTILO DE CALENDARIO
========================================================== */
.flatpickr-calendar {
    z-index: 999999 !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Poppins', system-ui, Arial, sans-serif !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 95vw !important;
}

.flatpickr-calendar.open {
    width: min(860px, 94vw) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.flatpickr-months {
    background: #b22222 !important;
    color: white !important;
}

.flatpickr-months * {
    color: white !important;
}

.flatpickr-months .flatpickr-month {
    height: 64px !important;
    color: white !important;
}

.flatpickr-current-month {
    color: white !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    padding-top: 14px !important;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month .cur-year,
.flatpickr-current-month .numInputWrapper span {
    color: white !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: white !important;
    opacity: 1 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: white !important;
}

.flatpickr-weekdays {
    background: white !important;
    border-bottom: 6px solid #b22222 !important;
}

span.flatpickr-weekday {
    color: #b22222 !important;
    font-weight: 900 !important;
    background: white !important;
}

.flatpickr-rContainer,
.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.flatpickr-day {
    border-radius: 12px !important;
    font-weight: 900 !important;
    height: 52px !important;
    line-height: 52px !important;
    max-width: none !important;
    color: #333 !important;
}

.flatpickr-day:hover {
    background: #ffe5e5 !important;
    color: #b22222 !important;
}

.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    border: 2px solid #b22222 !important;
    color: #b22222 !important;
    background: white !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #b22222 !important;
    border-color: #b22222 !important;
    color: white !important;
}

.flatpickr-day.inRange {
    background: #ffe5e5 !important;
    color: #b22222 !important;
}

.flatpickr-day.startRange {
    border-radius: 999px 0 0 999px !important;
}

.flatpickr-day.endRange {
    border-radius: 0 999px 999px 0 !important;
}

.flatpickr-day.startRange.endRange {
    border-radius: 999px !important;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    z-index: 999999 !important;
}

.flatpickr-monthDropdown-months {
    background: #b22222 !important;
    color: white !important;
}

.flatpickr-monthDropdown-months option {
    background: white !important;
    color: #333 !important;
}

/* ==========================================================
   DIAS DESHABILITADOS
========================================================== */

.flatpickr-day.prevMonthDay {
    opacity: 0.4 !important;
    color: #999 !important;
    background: #f5f5f5 !important;
    cursor: default !important;
}
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
    opacity: 0.4 !important;
    color: #999 !important;
    background: #f5f5f5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.flatpickr-day.nextMonthDay {
    opacity: 1 !important;
    color: #333 !important;
    background: white !important;
    cursor: pointer !important;
}
.flatpickr-day.disabled:hover,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay:hover {
    background: #f5f5f5 !important;
    color: #999 !important;
}
.flatpickr-day.nextMonthDay:hover {
    background: #ffe5e5 !important;
    color: #b22222 !important;
}
.flatpickr-day.today.disabled,
.flatpickr-day.today.flatpickr-disabled {
    border: 2px solid #b22222 !important;
    color: #b22222 !important;
    background: white !important;
    opacity: 1 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected.disabled {
    background: #b22222 !important;
    color: white !important;
    opacity: 1 !important;
}
/* ============================================================
   POSICIÓN PARA TABLET Y MÓVI
============================================================ */

/* TABLET (561px - 1124px) */
@media (min-width: 561px) and (max-width: 1124px) {
    .flatpickr-calendar {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: auto !important;
        max-width: 700px !important;
        min-width: 500px !important;
    }

    .flatpickr-calendar .flatpickr-day {
        height: 50px !important;
        line-height: 50px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }

    .flatpickr-calendar .flatpickr-weekdays {
        height: 45px !important;
    }

    .flatpickr-calendar .flatpickr-weekday {
        font-size: 15px !important;
        line-height: 45px !important;
    }

    .flatpickr-calendar .flatpickr-months .flatpickr-month {
        height: 60px !important;
    }

    .flatpickr-calendar .flatpickr-current-month {
        font-size: 22px !important;
        padding-top: 12px !important;
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Movil (560px) */
@media (max-width: 560px) {
    .flatpickr-calendar {
        position: fixed !important;
        left: 50% !important;
        top: 10vh !important;
        transform: translateX(-50%) !important;
        padding-top: 30px !important;
    }

    .flatpickr-calendar.open {
         width: min(420px, 90vw) !important;
        height: auto !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .flatpickr-months .flatpickr-month {
        height: 50px !important;
    }

    .flatpickr-current-month {
        padding-top: 10px !important;
        font-size: 20px !important;
    }

    .flatpickr-months {
        margin-bottom: 8px !important;
    }

    .flatpickr-day {
        height: 62px !important;
        line-height: 62px !important;
        font-size: 14px !important;
    }

    .dayContainer {
        row-gap: 11px !important;
    }

    .flatpickr-weekday {
        font-size: 13px !important;
    }

}

/* MÓVIL MUY PEQUEÑO (hasta 380px) */
@media (max-width: 380px) {
    .flatpickr-calendar.open {
        width: min(400px, 92vw) !important;
        max-width: 92vw !important;
    }

    .flatpickr-calendar .flatpickr-day {
        height: 38px !important;
        line-height: 38px !important;
        font-size: 12px !important;
    }

    .flatpickr-calendar .flatpickr-weekday {
        font-size: 11px !important;
    }

    .flatpickr-calendar .flatpickr-current-month {
        font-size: 18px !important;
    }
}

/* Overlay para el fondo */
.fp-view-overlay-3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 999998;
    display: none;
}

.fp-view-overlay-3.active {
    display: block;
}
/* ==========================================================
   FIX SAFARI / MAC — WELCOME
   Agregar al FINAL del archivo
========================================================== */

/* Renderizado más estable en Mac */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mantener checkbox nativo */
.search-card input[type="checkbox"],
#miBuscador input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: auto;
}

/* Inputs/selects más estables */
.search-card input,
.search-card select,
#miBuscador input,
#miBuscador select,
.dt-field input,
.dt-field select,
.tp-selects select {
  line-height: normal !important;
  min-height: 48px !important;
}

/* Safari centra mejor con font-size 16 */
.search-card input,
.search-card select,
#miBuscador input,
#miBuscador select,
.dt-field input,
.dt-field select,
.tp-selects select {
  font-size: 16px !important;
}

/* ==========================================================
   FIX INPUTS DE HORA PARA MAC / SAFARI
   ========================================================== */

/* Fix base para inputs tipo time en Safari/Mac */
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px !important; /* Previene zoom automático en Safari */
  line-height: 1.4 !important;
  min-height: 48px !important;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 12px 12px 42px; /* Ajusta según tu diseño */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Fix para los campos específicos de pickupTime y dropoffTime */
.search-card .time-field.icon-field input#pickupTime,
.search-card .time-field.icon-field input#dropoffTime {
  padding-left: 42px !important;
  padding-right: 12px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  min-height: 48px !important;
}

/* Fix para el placeholder en inputs de hora de Safari */
input[type="time"]:before {
  color: #9ca3af;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
}

input[type="time"]:focus:before {
  content: '';
}

/* Ajuste interno de los campos de hora en Safari */
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="time"]::-webkit-datetime-edit-text {
  padding: 0 0.3em;
}

input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  padding: 0.2em 0;
}

/* Fix para cuando el input está vacío en Safari */
input[type="time"]:invalid {
  color: #9ca3af;
}
/* ==========================================================
   ICONOS
========================================================== */
.field-icon,
.dt-field .field-icon,
.search-card .time-field.icon-field::before,
.time-field::before {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.field-icon,
.dt-field .field-icon {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

/* Iconos dentro de campos */
.icon-field,
.dt-field,
.time-field,
.location-inputs-wrapper .field {
  position: relative !important;
}

/* ==========================================================
   FECHAS Y HORAS
========================================================== */
.dt-field input,
.dt-field select,
.tp-selects select,
.search-card .time-field.icon-field input#pickupTime,
.search-card .time-field.icon-field input#dropoffTime {
  padding-left: 42px !important;
  padding-right: 12px !important;
}


/* ==========================================================
   BOTONES
========================================================== */
.actions button,
.btn-close,
button {
  -webkit-appearance: none;
  appearance: none;
}

/* ==========================================================
   FLATPICKR
========================================================== */
.flatpickr-input {
  line-height: normal !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ==========================================================
   SELECTS
========================================================== */
select {
  background-clip: padding-box;
}

/* ==========================================================
   FONT AWESOME
========================================================== */
i.fa-solid,
i.fa-regular,
i.fa,
[class*="fa-"] {
  line-height: 1 !important;
  vertical-align: middle;

  @media (max-width: 1124px) {
  #miBuscador.search-card {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #dropoffPlace {
    touch-action: auto !important;
    -webkit-user-select: none;
    user-select: none;
  }

  .location-inputs-wrapper select,
  .location-inputs-wrapper input {
    padding-left: 12px !important;
  }
}

}
/* ============================================================
   BOTÓN INTERROGACIÓN EN ESQUINA SUPERIOR DERECHA
============================================================ */
.btn-icon-question-corner {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(178, 34, 34, 0.1);
    border: 1px solid rgba(178, 34, 34, 0.25);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--brand, #b22222);
    font-size: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

.btn-icon-question-corner:hover {
    background: var(--brand, #b22222);
    border-color: var(--brand, #b22222);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(178, 34, 34, 0.25);
}

/* Asegurar que el contenido no quede oculto detrás del botón */
.info-content {
    position: relative;
    padding-top: 30px; /* Espacio para el botón en la esquina */
}

/* Ajuste responsive para móvil */
@media (max-width: 560px) {
    .btn-icon-question-corner {
        width: 32px;
        height: 32px;
        top: 12px;
        right: 12px;
        font-size: 14px;
    }

    .info-content {
        padding-top: 45px; /* Más espacio en móvil para no tapar el título */
    }
}

/* ============================================================
   MODAL MEMBRESÍA
============================================================ */
.modal-membership {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.modal-membership.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.modal-membership-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-membership-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    width: min(480px, 92%);
    padding: 28px 24px 32px;
    text-align: center;
    border: 1px solid rgba(178, 34, 34, 0.15);
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.modal-membership.show .modal-membership-card {
    transform: scale(1);
}

/* Botón cerrar */
.modal-membership-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #9ca3af;
    cursor: pointer;
    transition: 0.2s;
}

.modal-membership-close:hover {
    color: var(--brand, #b22222);
}

/* Ícono superior */
.modal-membership-icon {
    width: 60px;
    height: 60px;
    background: rgba(178, 34, 34, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.modal-membership-icon i {
    font-size: 26px;
    color: var(--brand, #b22222);
}

/* Título */
.modal-membership-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #0f172a;
    margin-bottom: 12px;
}

/* Texto JUSTIFICADO BIEN */
.modal-membership-card p {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Botones */
.modal-membership-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Teléfono */
.btn-call {
    background: #0f172a;
    color: #fff;
}

.btn-call:hover {
    background: #6b7280;
    transform: translateY(-2px);
}

/* WhatsApp */
.btn-whatsapp {
    background: #b22222;
    color: #fff;
}

.btn-whatsapp:hover {
    background: #8b1d1a;
    transform: translateY(-2px);
}

.btn-contact i {
    font-size: 16px;
}

/* Footer */
.modal-membership-phone {
    font-size: 12px;
    color: #6b7280;
    margin-top: 18px;
    border-top: 1px solid #eee;
    padding-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* Responsive */
@media (max-width: 560px) {
    .modal-membership-card {
        padding: 22px 18px 26px;
    }

    .modal-membership-card h3 {
        font-size: 22px;
    }
}
/* ========================
   ESTILOS PARA PRECIOS
=========================== */

/* Contenedor principal de precios */
.price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin: 12px 0;
}

/* Wrappers para mantener $ pegado al número */
.price-now-wrapper,
.price-old-wrapper {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

/* Símbolo de $ - ROJO */
.currency-symbol {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand) !important;
    display: inline-block;
}

/* Precio actual - ROJO */
.price-now {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand) !important;
    display: inline-block;
}

/* Código de moneda (MXN o USD) - ROJO Y MÁS PEGADO */
.currency-code {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand) !important;
    display: inline-block;
    margin-left: 0px; /* Cambiado de 3px a 0px */
    padding-left: 0px; /* Sin padding */
}

/* Texto "/día" - GRIS con separación */
.per {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280 !important;
    display: inline-block;
    margin-left: 4px; /* Separación antes de /día */
    margin-right: 2px;
}

/* Precio anterior (tachado) - TODO EN GRIS */
.price-old-wrapper {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    margin-left: 4px;
}

.currency-symbol-old {
    font-size: 0.9rem;
    font-weight: 500;
    color: #9ca3af !important;
    display: inline-block;
}

.price-old {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: line-through;
    color: #9ca3af !important;
    display: inline-block;
}

/* Código de moneda anterior - MÁS PEGADO TAMBIÉN */
.currency-code-old {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af !important;
    display: inline-block;
    margin-left: 0px; /* Cambiado de 2px a 0px */
    padding-left: 0px;
}

/* Versión móvil */
@media (max-width: 768px) {
    .currency-symbol,
    .price-now {
        font-size: 1.2rem;
    }

    .currency-code {
        font-size: 0.7rem;
        margin-left: 0px;
    }

    .per {
        font-size: 0.7rem;
    }

    .currency-symbol-old,
    .price-old {
        font-size: 0.8rem;
    }

    .currency-code-old {
        font-size: 0.65rem;
        margin-left: 0px;
    }
}
/* ============================================================
   FIX: ESPECIFICACIONES EN UNA LÍNEA 431px
   ============================================================ */
@media (max-width: 431px) {
    .car-specs {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }

    .car-specs li {
        padding: 0.15rem 0.35rem !important;
        font-size: 0.75rem !important;
    }

    .car-specs li i {
        font-size: 0.6rem !important;
        margin-right: 0.15rem !important;
    }
}