/* ================== GLOBALES ================== */
html {
    font-size: 70%;
}

body {
    font-family: 'Krub', sans-serif;
    font-size: 1.6rem;
    margin: 0;
    background-image: linear-gradient(to top, #dfe9f3 0%, #ffffff 100%);
    min-height: 100vh;
}

.contenedor {
    max-width: 120rem;
    margin: 0 auto;
}

/* ================== TITULO HEADER ================== */
h1{
    font-size: 4rem;
    margin-bottom: 0rem;
}

.header-custom {
    background: linear-gradient(to bottom, #0a7ec1, #58a9d8); /* degradado gris claro */
}
.header-custom.py-3.mb-4 {
    margin-bottom: 0rem !important; 
    padding-top: 0.3rem !important;
    padding-bottom: 0.7rem !important;
} 

.logo{
    margin-right: 2rem!important;
}


/* ================== NAVBAR ================== */
.nav-bg {
    background-color: #0097A7;
}

/* ===== NAVBAR EFECTO SCROLL + GLASS ===== */
#barraPrincipal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
  
  /* Efecto glass moderno */
  background-color: #003B73 !important; /* azul con transparencia */
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Cuando se oculta */
#barraPrincipal.hide {
  transform: translateY(-100%);
  opacity: 0;
}

/* Pequeña reacción al scroll (acompaña el movimiento) */
#barraPrincipal.scroll {
  transform: translateY(-5px);
}

/* Opcional: hacer que los enlaces destaquen más sobre el fondo blur */
#barraPrincipal .nav-link {
  color: #fff !important;
  transition: color 0.3s ease, background-color 0.3s ease;
}

#barraPrincipal .nav-link:hover {
  background-color: #58a9d8;
  border-radius: 0.5rem;
}

@media (max-width: 576px) {
  .navbar-brand span {
    font-size: 1.6rem; /* un poco más grande */
  }
}

.navbar-nav {
    --bs-navbar-nav-link-padding-x: 2rem;
}

.navegacion-principal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

@media (min-width: 1140px) {
    .navegacion-principal {
        flex-direction: row;
        gap: 5rem;
    }
}

.navegacion-principal a {
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem;
    border-radius: .5rem; /* <-- agregado para que siempre tengan puntas redondeadas */
    
}

.navegacion-principal a:hover {
    background-color: #58a9d8;
    color: #fff;
}

.dropdown-menu-dark {
    --bs-dropdown-bg: #003B73!important;
}

/* ================== HERO ================== */
/* HERO con carrusel */
.hero {
  height: 350px;
  position: relative;
  margin-top: 5.6rem;
  margin-bottom: 2rem;
  overflow: hidden;
}

.tituloHeroIndex{
  font-size: 3rem;
}

/* Imágenes del carrusel */
.hero-img {
  height: 350px;
  object-fit: cover;
}

.hero-fit-contain {
  object-fit: contain !important;
  background-color: #003B73; /* opcional para evitar bordes blancos */
}

/* Overlay del texto */
.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: rgba(13, 110, 253, 0.40); /* menos invasivo */

  padding: 2.2rem 3rem;
  border-radius: 1.5rem;
  color: #fff;
  text-align: center;

  max-width: 640px;     /* CLAVE: no tapa toda la foto */
  width: calc(100% - 2rem);
  z-index: 10;
}


/* Corrección para contacto */
.hero.contacto {background-image: url(../img/portadaSinTexto.jpeg);
  background-size: cover;
  background-position: center;
  height: 350px;
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;      /* centra vertical */
  justify-content: center;  /* centra horizontal */
  text-align: center;
  margin-top: 5.6rem;
  margin-bottom: 1rem;
}

.hero.contacto .container {
  background-color: rgba(13, 110, 253, 0.5); /* semitransparente azulado*/
  padding: 2rem 1rem;
  border-radius: 1rem;
  color: #fff;
}

.hero.contacto h2 {
  font-size: 3rem;
    margin-bottom: 1rem;
}

.hero.contacto p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 0rem !important;
}

.lead i {
    margin-right: 0.5rem; /* ajusta el valor a tu gusto */
}

#ubicacionNombre{
    color: #e2e2e5;
}

@media (max-width: 576px) {

  /* Hero un poco más bajo */
  .hero-overlay {
    top: auto;
    bottom: 0.6rem;              /* antes 1rem → baja más */
    left: 50%;
    transform: translateX(-50%);
    padding: 1.2rem 1.4rem;      /* más compacto */
    border-radius: 1.1rem;
  }

  /* Título más chico */
  .tituloHeroIndex {
    font-size: 1.65rem;
    margin-bottom: 0.6rem;
  }

  /* Botón de ubicación más compacto */
  .hero-overlay .btn {
    font-size: 0.85rem;
    padding: 0.45rem 1.4rem;       /* ↓ alto y ancho */
  }

  /* Opcional: ícono apenas más chico */
  .hero-overlay .fa-map-pin {
    font-size: 0.9rem;
  }
}



/* ================== INDEX ================== */
 
.nuestrosServicios{
    font-size: 2.2rem;
}

#accordionServicios{
    margin-top: 1rem;
}

.accordion-button{
    font-size: 1.8rem;
}

 /* Reemplazar la flecha por una versión más gruesa y blanca */
  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    transform: rotate(0deg);
  }

  /* Cuando está abierto (que gire hacia arriba) */
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    transform: rotate(180deg);
  }

/* Área que contiene el cartel */
.cotizacion-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3.5rem;
}

/* Cartel azul con el color primary de Bootstrap */
.cotizacion-box {
  background-color: #0d6efd; /* azul primary */
  color: white;
  width: 90%;
  max-width: 1100px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.phone-icon {
  font-size: 50px;
  color: white;
}

.cotizacion-title {
  font-weight: 700;
  font-size: 32px;
  margin: 0;
}

.cotizacion-subtitle {
  font-size: 18px;
  margin: 0;
}

.contacto-btn {
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: bold;
}


.tituloElegirnos{
    color: dodgerblue;
    font-size: 2.5rem !important;
    margin-bottom: 1.4rem;
    margin-top: 1rem;
}

.textoElegirnos{
    margin-bottom: 1.5rem;
    font-size: 1.7rem;
}

.datosEmpresa{
  margin-top: 1.5rem;
}

/* Carrusel de Monitoreo */
#carouselMonitoreo .carousel-item {
  height: 430px;
}

#carouselMonitoreo .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: scale-down;
}

@media (max-width: 576px) {
  #carouselMonitoreo .carousel-item {
  height: 220px;
}
}

.descripcion-carrusel {
  background-color: #f5f8fc;        /* fondo suave */
  border-left: 4px solid #0d6efd;   /* vínculo visual con el carrusel */
  padding: 1.5rem 1rem;
  border-radius: 0.75rem;
}

.descripcion-carrusel i {
  color: #0d6efd;
  font-size: 1.4rem;
}

/* ================== NOSOTROS ================== */

#Nosotros{
    margin-bottom: 1.5rem !important;
}

.quienesSomos{
    margin-top: 8.8rem;
}

.tituloQuienesSomos{
    font-size: 2rem;
    margin-bottom: 1.5rem !important;
}

#quienes-somos {
  padding: 0;
  margin: 0;
}

#quienes-somos .container {
  max-width: 900px;
  padding: 0 1.5rem;
}

/* Contenedor de imágenes */
.imagenes-nosotros {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Imágenes grandes y adaptables */
.imagenes-nosotros img {
  display: block;
  width: 100%;
  height: 100vh; /* ocupa toda la pantalla en desktop */
  object-fit: cover;
}

/* 📱 Ajuste responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .imagenes-nosotros img {
    height: auto; /* altura automática en celulares */
    object-fit: contain; /* muestra toda la imagen */
  }

  #quienes-somos .container {
    padding: 0 1rem;
  }
}


.lead{
    font-size: 1.6rem;
}

.textoExplicativo{
    color:rgb(13, 109, 253);
}

.bg-fraseMotivacional{
    background-color: #003B73;
}


/* ================== SERVICIOS ================== */

h5{
    font-size: 1.3rem;;
}

#nuestroEquipo{
    margin-bottom: 2rem !important;
}

#tituloServicio {
    display: inline-block;   /* Hace que el fondo solo cubra el texto */
    background-color: #2baab9; 
    color: #fff;             /* El texto en blanco para contraste */
    padding: 0.3rem 0.8rem;  /* Espaciado interno arriba/abajo y a los lados */
    border-radius: 12px;     /* Bordes redondeados */
    margin: 0 auto;          /* Centrado dentro del contenedor */
}

.tituloServicios{
    margin-top: 7.5rem;
    font-size: 2.2rem;
}

.personal{
    margin-bottom: 5rem !important;
}

.personal img {
  max-height: 450px;
  object-fit: cover;
}

/* ================== FORMULARIO CONTACTO ================== */

section.contacto {
    padding: 1rem 1rem;
    margin-bottom: 3rem;
}

#Contacto {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #0097A7;
}

/* ================== CONTACTO ================== */

#Contacto{
    margin-bottom: 1.5rem;
}

  .btn-contacto {
    display: inline-block;
    padding: 10px 20px; /* Igual que antes, no más chico */
    border-radius: 25px;
    text-decoration: none;
    font-weight: 400; /* Letras más finas */
    transition: all 0.3s ease;
    font-size: 1.3rem; /* Tamaño normal */
  }

  .btn-contacto.whatsapp {
    background-color: #25d366;
    color: #fff;
  }
  .btn-contacto.whatsapp:hover {
    background-color: #1eb653;
    transform: scale(1.05);
  }

  .btn-contacto.email {
    background-color: #800000; /* Bordó */
    color: #fff;
  }
  .btn-contacto.email:hover {
    background-color: #660000; /* Bordó más oscuro */
    transform: scale(1.05);
  }


/* Formulario estilo empresarial */
.formulario {
    background-color: #e0e0e0; /* gris profesional */
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

.formulario fieldset {
    border: none;
}

.formulario legend {
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #333333;
}

.contenedor-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1140px) {
    .contenedor-campos {
        grid-template-columns: 1fr 1fr;
    }
}

.campo {
    display: flex;
    flex-direction: column;
}

.campo label {
    font-weight: bold;
    margin-bottom: .5rem;
    color: #333333;
}

.campo input, 
.campo textarea {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    font-size: 1.2rem;
    width: 100%;
}

.campo textarea {
    resize: vertical;
    min-height: 150px;
}

.enviar .boton {
    width: 100%;
    background-color: #0097A7;
    color: #fff;
    padding: 1rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
    border: none;
    cursor: pointer;
}

.enviar .boton:hover {
    background-color: #007b8a;
}

/* ================== FOOTER ================== */
.py-3{
    font-size: 1rem;
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

#miNombre{
    font-size: 0.8rem;
}

/* ================== WHATSAPP FLOTANTE ================== */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #1fbe5a;
    color: #fff;
    border-radius: 50px;
    padding: 20px 35px;   /* más grande */
    font-size: 22px;      /* sube el texto */
    display: flex;
    align-items: center;
    gap: 18px;            /* más espacio entre icono y texto */
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s ease;
    z-index: 100;

    transform: scale(0.7); /* reduce todo el botón un 20% */
}

.whatsapp-float i {
    font-size: 34px;   /* más grande el ícono */
}

.whatsapp-text {
    font-size: 20px;   /* sube el texto */
}

.whatsapp-float:hover {
    transform: scale(1.05);
    background-color: #1ebe5b;
}