/* ============================
   BANNERS / BACKGROUNDS
   ============================ */

.bg-bannerPrincipal {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Capa azul para que el texto se lea, pero deje ver la foto */
.bg-bannerPrincipal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(0, 55, 104, 0.45),
    rgba(0, 19, 40, 0.65)
  );
}

.bg-bannerPrincipal > * {
  position: relative;
}

/* Sección de testimonios con fondo azul oscuro suave */
.bg-testimonios {
  background: radial-gradient(circle at top, #003f7f 0, #001426 55%, #000814 100%);
}

/* Banner inferior (call to action) – en tu HTML es #bg-banner2 */
.bg-calltoaction {
  background-size: cover;
  background-position: center;
  padding: 140px 0;
  position: relative;
}

.bg-calltoaction::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(0, 55, 104, 0.38),
    rgba(0, 8, 20, 0.6)
  );
}

.bg-calltoaction > * {
  position: relative;
}

/* Footer con imagen de fondo que ya se define vía JS */
.bg-copyright {
  position: relative;
  background-color: #000814; /* fallback */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding: 15px 0;
  color: #e5e7eb;
  font-size: 0.85rem;
}

.bg-copyright::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 19, 40, 0.3),
    rgba(0, 0, 0, 0.75)
  );
}

.bg-copyright > * {
  position: relative;
}

/* ============================
   HERO: TEXTOS Y FORMULARIO
   ============================ */

.banner-conttexto {
  padding: 0 6vw;
  font-size: 1rem;
  font-weight: 600;
  color: #f9fafb;
}

.banner-titulo {
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  font-size: clamp(2.2rem, 3.2vw + 1rem, 3.4rem);
  line-height: 1.12;
  font-weight: 700;
}

.banner-subtitulo {
  font-size: clamp(1.3rem, 1.2vw + 0.9rem, 1.8rem);
  font-weight: 600;
  color: #e5e7eb;
}

/* Texto “Contact us for a FREE quote” */
.form-titulo {
  color: #cbd5f5;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* Panel del formulario en el hero */
.banner-contform {
  background: linear-gradient(145deg, #003768, #001f3f);
  color: #fff;
  padding: 40px 32px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(199, 234, 251, 0.25);
}

/* Inputs Bootstrap dentro del formulario */
.banner-contform .form-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.banner-contform .form-control,
.banner-contform .form-select,
.banner-contform textarea.form-control {
  border-radius: 999px;
  border: 1px solid rgba(199, 234, 251, 0.4);
  background-color: rgba(2, 12, 32, 0.9);
  color: #f9fafb;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
}

.banner-contform textarea.form-control {
  border-radius: 12px;
  min-height: 90px;
}

.banner-contform .form-control::placeholder {
  color: rgba(199, 234, 251, 0.55);
}

.banner-contform .form-control:focus,
.banner-contform .form-select:focus {
  border-color: #b30838;
  box-shadow: 0 0 0 0.15rem rgba(179, 8, 56, 0.35);
}

/* ============================
   BENEFICIOS
   ============================ */

.beneficios-titulo {
  color: #003768;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.beneficios-texto {
  color: #475569;
  font-size: 1.1rem;
  font-weight: 500;
}

/* ============================
   TESTIMONIOS
   ============================ */

.testimonio-contenedor {
  background: rgba(15, 23, 42, 0.85);
  border-radius: 18px;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 25px;
  padding: 70px 42px 80px 42px;
  position: relative;
  text-align: center;
  color: #e5e7eb;
  border: 1px solid rgba(199, 234, 251, 0.25);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(14px);
}

.testimonio-datos {
  margin: -70px 0 24px 0;
  position: relative;
}

.testimonio-foto {
  max-width: 150px;
  border-radius: 50%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.testimonio-nombre {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 16px;
}

.testimonio-puesto {
  font-size: 1rem;
  opacity: 0.75;
}

/* Comillas decorativas */
.testimonio-quote {
  max-width: 40px;
  position: absolute;
  opacity: 0.85;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.quote-inicio {
  top: 28px;
  left: 40px;
}

.quote-fin {
  bottom: 42px;
  right: 40px;
}

/* ============================
   UTILIDADES DE TEXTO
   ============================ */

.txt-color-1 {
  color: #e5e7eb;
}

.txt-color-2 {
  color: #f97316;
}

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

.btn-principal {
  background: #FF6600 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.7rem 1.8rem !important;
  border: none !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s ease-out;
}

.btn-principal:hover {
  background: #e65c00 !important; /* versión más oscura */
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ============================
   DROPZONE Y ERRORES FORM
   ============================ */

.dropZone {
  width: 100%;
  border: 2px dashed #9ca3af;
  text-align: center;
  padding: 20px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.6);
  color: #e5e7eb;
  transition: border-color 0.2s ease-out, background 0.2s ease-out;
}

.dropZone:hover {
  border-color: #c7eafb;
  background: rgba(15, 23, 42, 0.85);
}

.hide {
  display: none !important;
}

form .error {
  color: #fb7185;
  font-size: 0.85rem;
}

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

@media (max-width: 991px) {
  .banner-conttexto {
    padding: 40px 24px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
  }

  .banner-contform {
    margin-top: 32px;
    padding: 30px 24px;
  }

  .testimonio-contenedor {
    margin: 20px 10px;
    padding: 60px 26px 70px 26px;
  }
}

/* Ajustes extra para móviles pequeños */
@media (max-width: 575.98px) {
  .banner-titulo {
    font-size: 1.9rem;
  }

  .banner-subtitulo {
    font-size: 1.1rem;
  }

  .bg-bannerPrincipal::before {
    background: linear-gradient(
      120deg,
      rgba(0, 55, 104, 0.35),
      rgba(0, 19, 40, 0.55)
    );
  }

  .bg-calltoaction::before {
    background: linear-gradient(
      120deg,
      rgba(0, 55, 104, 0.3),
      rgba(0, 8, 20, 0.5)
    );
  }
}

.bg-bannerPrincipal {
  min-height: 85vh; /* fuerza altura visible */
}

@media (max-width: 575.98px) {

  .bg-bannerPrincipal {
    background-size: cover;
	background-position: 15% center;
 	min-height: 95vh;
  }

}

@media (max-width: 575.98px) {

  .bg-calltoaction {
    background-image: url('<?= $conf["URL_FOOTER_IMAGE_small"] ?>');
    background-size: cover;
    background-position: center;
  }

}

@media (max-width: 991px) {

  #call-us-now {
    display: block;
    margin: 20px auto;
  }

}

.navbar-brand img {
  max-height: 70px;
}

@media (max-width: 575px) {
  .navbar-brand img {
    max-height: 90px;
  }
}