/* =================================================
   FLOTA SECCIÓN
   ================================================= */

.flota {
  position: relative;
  min-height: 520px;

  background: url("../images/flota.jpg") center/cover no-repeat;

  display: flex;
  align-items: center;

  padding: 70px 8%;

  overflow: hidden;
}


/* =========================================
   OVERLAY OSCURO
   ========================================= */

.flota::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}


/* =========================================
   CONTENEDOR PRINCIPAL
   ========================================= */

.flota-contenido {
  position: relative;
  z-index: 2;

  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}


/* =========================================
   IZQUIERDA
   ========================================= */

.flota-info {
  max-width: 520px;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}


/* título */
.flota-titulo {
  font-family: "questrial";
  letter-spacing: 1px;

  font-size: 2.4rem;
  font-weight: 600;

  margin: 0 0 20px 0;

  text-shadow:
    0 3px 10px rgba(0,0,0,0.7),
    0 0 25px rgba(0,0,0,0.4);
}


/* descripción */
.flota-desc {
  color: rgba(255,255,255,0.85);

  font-size: 1.05rem;
  line-height: 1.6;

  margin: 0 0 28px 0;
}


/* =========================================
   BOTÓN
   ========================================= */

.flota-whatsapp {
  display: inline-block;

  background: #c80000;
  color: white;

  padding: 14px 32px;

  border-radius: 6px;

  font-weight: 600;
  text-decoration: none;

  box-shadow: 0 10px 25px rgba(0,0,0,0.4);

  transition: 0.25s;
}

.flota-whatsapp:hover {
  background: #ff1a1a;
  transform: translateY(-3px);
}


/* =========================================
   CAJA DERECHA
   ========================================= */

.flota-box {
  background: rgba(255,255,255,0.95);

  width: 420px;
  padding: 35px 40px;

  border-radius: 6px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}


/* título interno */
.flota-box h3 {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 600;
}

.flota-box h3 span {
  color: #c80000;
}


/* =========================================
   LISTA
   ========================================= */

.flota-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flota-box li {
  margin-bottom: 14px;
  font-size: 0.95rem;

  display: flex;
  align-items: center;
  gap: 10px;

  line-height: 1.4;
}


/* check rojo */
.flota-box li::before {
  content: "✔";
  color: #c80000;
  font-weight: bold;
}



/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

  .flota-contenido {
    flex-direction: column;

    /* 🔥 CAMBIO CLAVE */
    align-items: flex-start;
    text-align: left;

    gap: 40px;
  }

  .flota-info {
    align-items: flex-start;
    text-align: left;
  }

  .flota-box {
    width: 100%;
    max-width: 500px;
  }

  .flota {
    padding: 60px 6%;
  }

}