/* CARGANDO Y ERRORES */
.cargando {
  text-align: center;
  padding: 40px;
  color: #aaaaaa;
  font-size: 1rem;
  width: 100%;
}

.mensaje-error {
  text-align: center;
  padding: 40px;
  color: #ff6b6b;
  font-size: 1rem;
  width: 100%;
}

/* HERO SECTION */
.hero {
  min-height: 70vh;
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  padding-bottom: 40px;
  padding-top: 80px;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.hero-content {
  width: 50%;
  padding-left: 80px;
  z-index: 1;
}

.hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 4.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.2rem;
  font-family: DM Sans, sans-serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* BUSCADOR HERO */
.buscador-hero {
  position: relative;
  align-self: center;
  z-index: 2;
  width: 80%;
  max-width: 900px;
  margin-top: 60px;
}

.buscador-form {
  display: flex;
  gap: 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.buscador-campo {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Sin esto, un campo de fecha nativo con letra de 16px impone su ancho minimo
     intrinseco y los tres campos mas el boton desbordan el contenedor en anchos
     intermedios (por ejemplo un movil en apaisado, 844px). */
  min-width: 0;
}

.buscador-campo select,
.buscador-campo input {
  width: 100%;
  min-width: 0;
}

.buscador-campo:last-of-type {
  border-right: none;
}

.buscador-campo label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
}

.buscador-campo select {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 4px 0;
  color: #2d2d2d;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.buscador-campo input {
  border: none;
  outline: none;
  font-family: 'Outfit', sans-serif;
  /* 16px como minimo: por debajo, Safari en iOS hace zoom al enfocar el campo */
  font-size: 1rem;
  color: #2d2d2d;
  background: transparent;
  padding: 4px 0;
}

.buscador-boton {
  background: linear-gradient(135deg, var(--marca-rojo) 0%, var(--marca-rojo-fuerte) 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 4px;
}

.buscador-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233, 33, 35, 0.4);
}

/* La segunda condicion cubre el telefono en apaisado (R-05): a 844x390 el
   buscador se quedaba en su posicion absoluta de escritorio, encima del hero. */
@media (max-width: 768px),
       (max-width: 1024px) and (max-height: 500px) {
  .hero-btn-presupuesto {
    display: none;
  }

  .buscador-hero {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 10px;
  }

  .buscador-form {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  .buscador-campo {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 0 12px 0;
  }

  /* El desplegable y los campos de fecha son lo primero que se toca en la web:
     44px de alto minimo para el dedo */
  .buscador-campo select,
  .buscador-campo input {
    min-height: 44px;
  }

  .buscador-campo:last-of-type {
    border-bottom: none;
  }

  .buscador-boton {
    width: 100%;
    padding: 14px;
  }
}

/* CARDS SECTION */
.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 80px;
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: -25px auto 0;
}

.card-hero {
  background: #2d2d2d;
  border-radius: 20px;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hero:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--marca-rojo) 0%, var(--marca-rojo-fuerte) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 24px;
  transition: all 0.3s ease;
}

.card-hero:hover .card-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, var(--marca-rojo-fuerte) 0%, var(--marca-rojo) 100%);
}

.card-icon i {
  font-size: 1.5rem;
  color: #ffffff;
}

.card-hero-content {
  padding: 0 28px 32px;
  text-align: center;
}

.card-hero h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--marca-blanco);
  margin-bottom: 12px;
}

.card-hero p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: #aaaaaa;
  line-height: 1.7;
}

.card-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(233, 33, 35, 0.08);
  transition: color 0.3s ease;
}

.card-hero:hover .card-number {
  color: var(--marca-rojo);
}

/* DESCRIPTION SECTION */
.home-description {
  display: flex;
  gap: 60px;
  padding: 100px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.description-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.description-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  /* Esta seccion NO tiene fondo propio: hereda el blanco por defecto del
     navegador. En blanco el titulo era invisible. El rojo oscuro de marca
     da 5,87:1 sobre blanco, asi que aqui va el rojo literal del brand board. */
  color: var(--marca-rojo-fuerte);
  margin-bottom: 30px;
}

.description-body {
  font-family: DM Sans, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #2d2d2d;
  line-height: 1.8;
  margin-bottom: 20px;
}

.description-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.benefit-item i {
  font-size: 1.5rem;
  color: var(--marca-rojo);
  width: 25px;
  text-align: center;
}

.benefit-item p {
  font-family: DM Sans, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: #2d2d2d;
}

.description-right {
  flex: 1;
}

.description-image {
  width: 100%;
  /* height:auto es obligatorio ahora que el <img> lleva atributos width y
     height (R-06). Sin esto la imagen se estiraria a los 2000px del atributo. */
  height: auto;
  border-radius: 12px;
}

/* FLOTA SECTION */
.seccion-flota {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px;
}

.flota-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  /* Esta seccion NO tiene fondo propio: hereda el blanco por defecto del
     navegador. En blanco el titulo era invisible. El rojo oscuro de marca
     da 5,87:1 sobre blanco, asi que aqui va el rojo literal del brand board. */
  color: var(--marca-rojo-fuerte);
  margin-bottom: 16px;
  text-align: center;
}

.flota-subtitulo {
  font-family: DM Sans, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #2d2d2d;
  margin-bottom: 80px;
  text-align: center;
}

.flota-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.flota-tarjeta {
  height: 375px;
  background-color: #2d2d2d;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flota-tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.flota-tarjeta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.tarjeta-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
}

.tarjeta-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.tarjeta-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.precio-desde {
  font-family: DM Sans, sans-serif;
  font-size: 0.85rem;
  color: #aaaaaa;
}

.precio-cantidad {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--marca-blanco);
}

.precio-dia {
  font-family: DM Sans, sans-serif;
  font-size: 0.85rem;
  color: #aaaaaa;
}

.tarjeta-enlace {
  font-family: DM Sans, sans-serif;
  color: #ffffff;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 600;
}

/* SECCION COMENTARIOS */
.seccion-comentarios {
  background-color: #1a1a1a;
  padding: 80px;
  position: relative;
}

.seccion-comentarios::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--marca-rojo) 20%, var(--marca-rojo) 80%, transparent 100%);
}

.comentarios-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--marca-blanco);
  margin-bottom: 16px;
  text-align: center;
}

.comentarios-subtitulo {
  font-family: DM Sans, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #aaaaaa;
  margin-bottom: 40px;
  text-align: center;
}

.comentarios-grid {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.comentario-tarjeta {
  background-color: #2d2d2d;
  border-radius: 12px;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comentario-autor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comentario-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.comentario-nombre {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--marca-blanco);
}

.comentario-estrellas i {
  color: #FBBC04;
  font-size: 0.9rem;
}

.comentario-texto {
  font-family: DM Sans, sans-serif;
  font-size: 0.9rem;
  color: #ffffff;
  line-height: 1.6;
}

/* FAQ SECTION */
.seccion-faq {
  background-color: #1a1a1a;
  padding: 80px;
}

.faq-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--marca-blanco);
  margin-bottom: 16px;
  text-align: center;
}

.faq-subtitulo {
  font-family: DM Sans, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #aaaaaa;
  margin-bottom: 40px;
  text-align: center;
}

.faq-contenedor {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--marca-rojo);
  border-radius: 8px;
  overflow: hidden;
}

.faq-pregunta {
  width: 100%;
  background-color: #1a1a1a;
  color: var(--marca-blanco);
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 20px 24px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.faq-respuesta {
  background-color: #2d2d2d;
  padding: 20px 24px;
  display: none;
}

.faq-respuesta p {
  font-family: DM Sans, sans-serif;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.7;
}

.faq-respuesta ul {
  margin-left: 40px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.faq-respuesta ul li {
  font-family: DM Sans, sans-serif;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.7;
}

.faq-icono {
  transition: transform 0.3s ease;
}

.faq-item.activo .faq-respuesta {
  display: block;
}

.faq-item.activo .faq-icono {
  transform: rotate(180deg);
}

/* FLATPICKR - BUSCADOR */
.flatpickr-calendar {
  background: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  background: #1e1e1e !important;
  color: #aaaaaa !important;
}

.flatpickr-day {
  color: #dddddd !important;
  border-radius: 6px !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled) {
  background: rgba(233, 33, 35, 0.2) !important;
}

.flatpickr-day.selected {
  background: var(--marca-rojo) !important;
  border-color: var(--marca-rojo) !important;
  color: #fff !important;
}

.flatpickr-day.today {
  border-color: var(--marca-rojo) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #aaaaaa !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--marca-rojo) !important;
}

/* CTA SECTION */
.seccion-cta {
  height: 60vh;
  background-image: url('../images/footer.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.seccion-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.cta-contenido {
  width: 50%;
  margin-left: 25%;
  z-index: 1;
}

.cta-titulo {
  font-family: 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--marca-blanco);
  margin-bottom: 20px;
}

.cta-subtitulo {
  font-family: DM Sans, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #aaaaaa;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* MEDIA QUERIES */
@media (max-width: 1024px) {

  /* Hero */
  .hero {
    height: auto;
    min-height: 55vh;
    padding: 80px 40px 50px;
  }

  .hero-content {
    width: 60%;
    padding-left: 0;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .buscador-hero {
    width: 75%;
    max-width: 800px;
  }

  /* Cards */
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 40px;
  }

  /* Description */
  .home-description {
    padding: 80px 60px;
    gap: 40px;
  }

  .description-title {
    font-size: 1.8rem;
  }

  /* Flota */
  .seccion-flota {
    padding: 60px 40px;
  }

  .flota-titulo {
    font-size: 2rem;
  }

  .flota-subtitulo {
    margin-bottom: 60px;
  }

  .flota-tarjeta {
    height: 300px;
  }

  /* Comentarios */
  .seccion-comentarios {
    padding: 60px 40px;
  }

  .comentarios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .comentario-tarjeta {
    padding: 24px;
  }

  /* FAQ */
  .seccion-faq {
    padding: 60px 40px;
  }

  .faq-titulo {
    font-size: 2rem;
  }

  /* CTA */
  .seccion-cta {
    height: 50vh;
  }

  .cta-contenido {
    width: 60%;
    margin-left: 6%;
  }

  .cta-titulo {
    font-size: 2.5rem;
  }
}

/* La segunda condicion cubre el telefono en apaisado (R-05): a 844x390 toda la
   home se servia con el layout de escritorio (hero en fila, rejillas de varias
   columnas, tarjetas sin carrusel) dentro de 390px de alto. Se reutiliza aqui el
   layout movil, que ya esta verificado, en lugar de inventar uno nuevo. */
@media (max-width: 768px),
       (max-width: 1024px) and (max-height: 500px) {

  /* Hero */
  .hero {
    height: auto;
    min-height: 60vh;
    flex-direction: column;
    justify-content: center;
    padding: 40px 20px 60px;
  }

  .hero-content {
    width: 100%;
    padding-left: 0;
    text-align: center;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  /* Cards */
  .cards-container {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 20px;
    margin-top: -40px;
    gap: 20px;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .cards-container::-webkit-scrollbar {
    display: none;
  }

  .card-hero {
    scroll-snap-align: center;
    min-width: 100%;
    max-width: 280px;
    flex-shrink: 0;
    padding: 20px;
    margin: 0 auto;
  }

  .card-hero:last-child {
    margin-right: calc(50% - 160px);
  }

  /* Description */
  .home-description {
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
  }

  .description-title {
    font-size: 1.5rem;
  }

  .description-image {
    width: 100%;
    height: auto;
  }

  /* R-06: fondos de 1600px de ancho servidos a un telefono. La variante de
     900px cubre 430px de ancho a 2x de densidad y ahorra 155 KB (hero) y
     191 KB (CTA) en cada visita desde movil. */
  .hero {
    background-image: url('../images/hero-900.jpg');
  }

  .seccion-cta {
    background-image: url('../images/footer-900.jpg');
  }

  /* Flota */
  .seccion-flota {
    padding: 40px 20px;
  }

  .flota-titulo {
    font-size: 1.5rem;
  }

  .flota-subtitulo {
    margin-bottom: 30px;
  }

  .flota-grid {
    grid-template-columns: 1fr;
  }

  .flota-tarjeta {
    height: 220px;
  }

  .tarjeta-titulo {
    font-size: 1rem;
  }

  .tarjeta-info {
    padding: 16px;
  }

  .precio-desde,
  .precio-dia {
    font-size: 0.8rem;
  }

  .precio-cantidad {
    font-size: 1.6rem;
  }

  /* "Ver mas" mide 18px de alto. Se amplia su zona pulsable con un
     pseudo-elemento en lugar de con padding, para no descolocar el contenido de
     la tarjeta, que va en posicion absoluta dentro de una altura fija.
     El area extra cae sobre el precio de la misma tarjeta y lleva al mismo
     vehiculo, asi que un toque ahi hace lo que el usuario espera. */
  .tarjeta-enlace {
    position: relative;
    display: inline-block;
  }

  .tarjeta-enlace::after {
    content: '';
    position: absolute;
    top: -14px;
    right: -14px;
    bottom: -14px;
    left: -14px;
  }

  /* Comentarios */
  .seccion-comentarios {
    padding: 40px 20px;
  }

  .comentarios-titulo {
    font-size: 1.5rem;
  }

  .comentarios-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .comentarios-grid::-webkit-scrollbar {
    display: none;
  }

  .comentario-tarjeta {
    scroll-snap-align: center;
    min-width: 100%;
    max-width: 300px;
    flex-shrink: 0;
    padding: 20px;
    margin: 0 auto;
  }

  /* FAQ */
  .seccion-faq {
    padding: 40px 20px;
  }

  .faq-titulo {
    font-size: 1.5rem;
  }

  /* CTA */
  .seccion-cta {
    height: auto;
    min-height: 50vh;
    padding: 60px 20px;
  }

  .cta-contenido {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }

  .cta-titulo {
    font-size: 2rem;
  }
}

/* ─── TELEFONO ESTANDAR Y PEQUENO: 480px (R-04) ──────────────────────────
   Hasta ahora el ultimo corte estaba en 768px: un iPhone SE de 320px recibia
   EXACTAMENTE la misma tipografia que un iPad de 768px (titular de 32px en 280px
   de ancho util). Aqui se baja la escala y se estrecha el margen lateral.
   NO se toca el font-size de los campos del buscador: 16px minimo o Safari en
   iOS hace zoom al enfocar (R-02). Tampoco se tocan los min-height de 44px. */
@media (max-width: 480px) {
  .hero {
    padding: 32px 16px 48px;
  }

  .hero-title {
    font-size: 1.625rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 0.875rem;
  }

  .home-description,
  .seccion-flota,
  .seccion-comentarios,
  .seccion-faq {
    padding: 32px 16px;
  }

  .description-title,
  .flota-titulo,
  .comentarios-titulo,
  .faq-titulo {
    font-size: 1.25rem;
  }

  .cta-titulo {
    font-size: 1.5rem;
  }

  .seccion-cta {
    padding: 48px 16px;
  }

  .cta-contenido {
    width: 100%;
  }

  .precio-cantidad {
    font-size: 1.375rem;
  }
}

/* ─── TELEFONO EN APAISADO (R-05) ────────────────────────────────────────
   A 844x390 hay ancho de sobra pero muy poca altura. Se recorta el aire
   vertical y, al contrario que en vertical, se recuperan varias columnas: una
   sola columna a 844px de ancho desaprovecha el espacio. */
@media (max-width: 1024px) and (max-height: 500px) {
  .hero {
    min-height: 0;
    padding: 20px 20px 28px;
  }

  .hero-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  /* El buscador vuelve a fila: en apaisado los cuatro campos caben a lo ancho y
     apilados obligarian a hacer scroll para llegar al boton. */
  .buscador-form {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px;
    gap: 12px;
  }

  .buscador-campo {
    border-bottom: none;
    padding: 0;
    flex: 1 1 40%;
    /* min-width:0 es imprescindible: un campo de fecha nativo impone su ancho
       minimo intrinseco y sin esto desborda a lo ancho (misma causa que la
       regresion detectada al subir los campos a 16px). */
    min-width: 0;
  }

  .home-description,
  .seccion-flota,
  .seccion-comentarios,
  .seccion-faq {
    padding: 28px 20px;
  }

  .seccion-cta {
    min-height: 0;
    padding: 32px 20px;
  }

  .flota-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .flota-tarjeta {
    height: 190px;
  }

  .cards-container,
  .comentarios-grid {
    margin-top: 0;
  }

  .card-hero,
  .comentario-tarjeta {
    min-width: 260px;
  }
}