/* ============================================================
   RentacarIQ · HOME UX V5
   Correcciones tras prueba en navegador:
   - Hero y H1 centrados (neutraliza align-items:flex-end original).
   - Formulario de reserva centrado.
   - Flota en 4 columnas reales en escritorio.
   - 4 pasos claros/corporativos debajo de la flota.
   - Archivo nuevo para evitar caché del CSS anterior.
   ============================================================ */

/* ---------- HERO ---------- */
body .hero{
  min-height:620px !important;
  height:auto !important;
  padding:72px 0 24px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  position:relative !important;
  box-sizing:border-box !important;
}

body .hero > .hero-content{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  align-self:center !important;
  width:min(1120px,calc(100% - 48px)) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:10px 0 0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  box-sizing:border-box !important;
  z-index:2 !important;
}

body .hero > .hero-content .hero-title{
  width:100% !important;
  max-width:1050px !important;
  margin:0 auto 10px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:clamp(2.65rem,4.1vw,3.85rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
}

body .hero > .hero-content .hero-subtitle{
  width:100% !important;
  max-width:790px !important;
  margin:0 auto 12px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:1rem !important;
  line-height:1.5 !important;
}

body .hero > .hero-content .hero-btn-presupuesto{
  align-self:center !important;
  margin:2px auto 0 !important;
}

/* ---------- BUSCADOR ---------- */
body .hero > #buscar-coche.ux-search-priority{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  float:none !important;
  align-self:center !important;
  width:100% !important;
  max-width:none !important;
  margin:18px auto 0 !important;
  padding:0 28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  z-index:3 !important;
}

body .hero > #buscar-coche.ux-search-priority > .buscador-hero{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  float:none !important;
  align-self:center !important;
  width:min(1180px,100%) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

body .hero > #buscar-coche .buscador-form{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

/* ---------- FRANJA DE CONFIANZA ---------- */
body .hero > .ux-trust-strip{
  align-self:center !important;
  width:min(1180px,calc(100% - 56px)) !important;
  max-width:1180px !important;
  margin:14px auto 0 !important;
}

/* ---------- NUESTRA FLOTA ---------- */
body .seccion-flota{
  width:100% !important;
  max-width:1500px !important;
  margin:0 auto !important;
  padding:64px 38px 48px !important;
  box-sizing:border-box !important;
}

body .seccion-flota #flota-grid.flota-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  margin:0 0 28px !important;
  overflow:visible !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-card{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  background:#fff !important;
  border:1px solid #e7e7e7 !important;
  border-radius:20px !important;
  box-shadow:0 10px 28px rgba(18,18,18,.08) !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-media{
  display:block !important;
  width:100% !important;
  aspect-ratio:1.52 / 1 !important;
  min-height:170px !important;
  overflow:hidden !important;
  background:#ececec !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:170px !important;
  object-fit:cover !important;
  object-position:center !important;
  opacity:1 !important;
  visibility:visible !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-info{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:145px !important;
  padding:16px 17px 18px !important;
  background:#fff !important;
  color:#171717 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-info .tarjeta-titulo{
  color:#171717 !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-info .precio-cantidad{
  color:var(--marca-rojo,#e92123) !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-info .precio-desde,
body .seccion-flota #flota-grid .ux-home-fleet-info .precio-dia{
  color:#747474 !important;
}

body .seccion-flota #flota-grid .ux-home-fleet-info .tarjeta-enlace{
  color:var(--marca-rojo,#e92123) !important;
  margin-top:auto !important;
}

/* ---------- 4 PASOS: debajo de la flota ---------- */
body .ux-home-steps.cards-container{
  width:calc(100% - 76px) !important;
  max-width:1424px !important;
  margin:14px auto 0 !important;
  padding:26px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  background:#f5f7f9 !important;
  border-radius:24px !important;
}

body .ux-home-steps.cards-container > .card-hero{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:290px !important;
  margin:0 !important;
  padding:28px 24px 24px !important;
  background:#fff !important;
  color:#0d315d !important;
  border:1px solid #e5e9ee !important;
  border-radius:20px !important;
  box-shadow:0 7px 22px rgba(13,32,56,.07) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  box-sizing:border-box !important;
}

body .ux-home-steps.cards-container > .card-hero .card-icon{
  flex:0 0 auto !important;
  width:56px !important;
  height:56px !important;
  margin:0 0 30px !important;
  background:#f2f6fa !important;
  border-radius:15px !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
}

body .ux-home-steps.cards-container > .card-hero .card-icon i{
  color:#0d315d !important;
  font-size:1.4rem !important;
}

body .ux-home-steps.cards-container > .card-hero .card-number{
  top:22px !important;
  right:22px !important;
  bottom:auto !important;
  left:auto !important;
  color:rgba(13,49,93,.10) !important;
  font-size:2rem !important;
}

body .ux-home-steps.cards-container > .card-hero .card-hero-content{
  padding:0 !important;
  text-align:left !important;
}

body .ux-home-steps.cards-container > .card-hero h2{
  margin:0 0 12px !important;
  color:#0d315d !important;
  font-size:1.28rem !important;
  line-height:1.2 !important;
  text-align:left !important;
}

body .ux-home-steps.cards-container > .card-hero p{
  margin:0 !important;
  color:#667085 !important;
  font-size:.92rem !important;
  line-height:1.6 !important;
  text-align:left !important;
}

body .ux-home-steps-cta{
  margin:16px auto 54px !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:959px){
  body .seccion-flota #flota-grid.flota-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .ux-home-steps.cards-container{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:700px){
  body .hero{
    min-height:auto !important;
    padding:34px 0 18px !important;
  }

  body .hero > .hero-content{
    width:calc(100% - 28px) !important;
    padding:6px 0 0 !important;
  }

  body .hero > .hero-content .hero-title{
    font-size:clamp(2rem,10vw,2.75rem) !important;
  }

  body .hero > #buscar-coche.ux-search-priority{
    margin-top:15px !important;
    padding:0 12px !important;
  }

  body .hero > #buscar-coche.ux-search-priority > .buscador-hero{
    width:100% !important;
    max-width:560px !important;
  }

  body .seccion-flota{
    padding:44px 16px 32px !important;
  }

  body .seccion-flota #flota-grid.flota-grid{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    padding-bottom:12px;
    scrollbar-width:none;
  }

  body .seccion-flota #flota-grid.flota-grid::-webkit-scrollbar{
    display:none;
  }

  body .seccion-flota #flota-grid .ux-home-fleet-card{
    flex:0 0 min(82vw,320px) !important;
    scroll-snap-align:start;
  }

  body .ux-home-steps.cards-container{
    width:calc(100% - 32px) !important;
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    padding:18px !important;
    scrollbar-width:none;
  }

  body .ux-home-steps.cards-container::-webkit-scrollbar{
    display:none;
  }

  body .ux-home-steps.cards-container > .card-hero{
    flex:0 0 min(82vw,310px) !important;
    scroll-snap-align:start;
    min-height:270px !important;
  }
}


/* ================================================================
   HOTFIX 2026-10-14 · TIPOS DE ALQUILER COMO CARRUSEL EN MOVIL
   Se aplica directamente sobre la estructura real:
   .ux-needs-section > .ux-needs-grid > .ux-need-card
   ================================================================ */
@media (max-width:900px){
  body .ux-needs-section{
    width:100% !important;
    max-width:none !important;
    margin:38px auto 24px !important;
    padding:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body .ux-needs-section > h2{
    margin:0 16px 22px !important;
    text-align:left !important;
  }

  body .ux-needs-section > .ux-needs-grid{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:16px !important;
    padding:4px 16px 14px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x pan-y !important; /* Swipe horizontal + scroll vertical */
  }

  body .ux-needs-section > .ux-needs-grid::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  body .ux-needs-section > .ux-needs-grid > .ux-need-card{
    flex:0 0 min(82vw,320px) !important;
    width:min(82vw,320px) !important;
    min-width:min(82vw,320px) !important;
    max-width:min(82vw,320px) !important;
    min-height:300px !important;
    height:auto !important;
    margin:0 !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
    box-sizing:border-box !important;
  }
}


/* 2026-10-15 · Carruseles táctiles: no bloquear el scroll vertical de la página. */
@media (max-width: 900px) {
  body .ux-needs-section > .ux-needs-grid,
  body .ux-home-steps.cards-container {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* 2026-10-15 · CORRECCIÓN ESPECÍFICA DEL CARRUSEL NEGRO EN MÓVIL.
   El desplazamiento vertical queda en manos del navegador (pan-y).
   El horizontal se gestiona únicamente sobre .ux-needs-grid con el pequeño
   script ux-needs-scroll-fix.js. Evitamos que un contenedor overflow:hidden
   capture el gesto vertical en Safari/iOS. NO afecta al carrusel de 4 pasos. */
@media (max-width: 900px) {
  body .ux-needs-section {
    overflow: visible !important;
  }
  body .ux-needs-section > .ux-needs-grid,
  body .ux-needs-section > .ux-needs-grid > .ux-need-card,
  body .ux-needs-section > .ux-needs-grid > .ux-need-card * {
    touch-action: pan-y pinch-zoom !important;
  }
  body .ux-needs-section > .ux-needs-grid {
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }
  body .ux-needs-section > .ux-needs-grid.riq-needs-dragging {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }
}


/* RentacarIQ | 2026-10-16 | Alineación del buscador de la Home
   Solo distribución visual: no modifica nombres, valores ni lógica del formulario.
   El título de cada fecha y el título de su hora comparten la misma fila.
   Los campos de fecha y hora comparten otra fila, con la misma altura. */
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(116px, .65fr) !important;
  grid-template-rows: auto 52px;
  column-gap: 10px;
  row-gap: 7px;
  min-width: 0;
  align-items: stretch;
  align-content: center;
}
/* Conserva los envoltorios para PHP/JS, pero permite alinear cada pieza. */
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-fecha-hora,
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-subcampo-fecha,
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-subcampo-hora {
  display: contents !important;
}
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora > label {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
  align-self: end;
  min-width: 0;
  min-height: 20px;
  line-height: 1.3;
}
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-subetiqueta {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  min-width: 0;
  min-height: 20px;
  align-self: end;
  display: flex !important;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
}
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-subcampo-fecha > input {
  grid-column: 1;
  grid-row: 2;
}
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-subcampo-hora > input {
  grid-column: 2;
  grid-row: 2;
}
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora input {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 11px;
  font-size: clamp(14px, 1vw, 16px);
}
body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora input[type="time"] {
  padding: 9px 8px;
  border-left: 1px solid #dedede;
}
body .hero #buscar-coche #buscador-reserva .buscador-campo:not(.buscador-campo-fecha-hora) > select {
  min-height: 52px;
  height: 52px;
  box-sizing: border-box;
}
@media (min-width: 769px) and (max-width: 1199px) and (min-height: 501px) {
  /* Evita recortes cuando cuatro columnas no caben bien en tablet. */
  body .hero #buscar-coche #buscador-reserva.buscador-form {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px 12px;
  }
  body .hero #buscar-coche #buscador-reserva .buscador-encabezado {
    grid-column: 1 / -1;
  }
  body .hero #buscar-coche #buscador-reserva .buscador-boton {
    align-self: stretch !important;
    min-height: 72px !important;
    margin: 8px 4px 10px !important;
  }
}
@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
  body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora {
    grid-template-columns: minmax(0,1fr) minmax(108px, 34%) !important;
    grid-template-rows: auto 52px;
    column-gap: 9px;
    row-gap: 7px;
  }
  body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora .buscador-subetiqueta {
    font-size: .7rem;
  }
  body .hero #buscar-coche #buscador-reserva .buscador-campo-fecha-hora input {
    font-size: 14px;
    padding: 8px 8px;
  }
}
/* Mismo ritmo vertical para el selector de lugar y el botón del buscador. */
@media (min-width: 769px) and (min-height: 501px) {
  body .hero #buscar-coche #buscador-reserva .buscador-campo:not(.buscador-campo-fecha-hora) {
    align-self: stretch;
  }
  body .hero #buscar-coche #buscador-reserva .buscador-boton {
    height: 52px !important;
    min-height: 52px !important;
    align-self: end !important;
    margin: 0 4px !important;
    padding: 10px 12px !important;
    font-size: clamp(.86rem, 1.1vw, 1rem);
  }
}