*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    scroll-behavior: smooth;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0F0F0F;
}
/*================  ESTILOS MENU DE NAVEGACION =======================*/
.navbar img {
    height: 56px;
}
.nav-link{
    font-size: 22px;
    line-height:60px;
}

/*=======  Estilos del contenedor del banner  ===============*/
.contenedor-banner{
    height: 100vh;
    background-color: #001c3c;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.781) 0%, rgba(0, 0, 0, 0.747) 100%), url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (max-width: 768px) { /* Punto de corte para móviles */
  .contenedor-banner {
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.781) 0%, rgba(0, 0, 0, 0.747) 100%), url(../images/vistamovil-inicio.svg);
  }
}

.contenedor-inicio{
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    padding: 60px 0;
}
.head{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;
    height: 100%;
    color: #F5F5DC;
}
.titulo{
    font-size: 60px;
    max-width: 1000px;
    padding-top: 70px;
    margin-bottom: 30px;
    padding-left: 20px;
}

.copy{
    font-size: 22px;
    padding-left: 20px;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
    max-width: 900px;
}

/*CALL TO ACTION*/
.btn-inicio{
    padding-left: 20px;
    margin-top: 20px;
    
}
.btn-inicio a{
    display: inline-block;
    min-width: 200px;
    text-decoration: none;
    background-color: #1570B8;
    color: #F5F5DC;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 12px 30px;
    border-radius: 15px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-inicio a:hover{
    background-color: #29ABE2;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
}

/*-------Boton flotante wsp--------*/
.contenedor-wsp{
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 100;
}

/* Estilos del botón wsp*/
.float {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.float:hover {
    background-color: #fff;
}

/* Estilos del icono */
.my-float {
    font-size: 30px;
    color: white;
}
.float:hover .my-float {
    color: #25d366;
}

/*===========  ESTILOS SECCION SERVICIOS  =======================*/
.container{
    padding-top:100px;
    padding-bottom:100px;
}

.subtitulo-servicios{
    color: #F5F5DC;
    text-align: center;
    font-size: 40px;
    padding: 30px 0 60px;
}
.card {
    background-color: #0F0F0F;
    color: #F5F5DC;
    border: 1px solid #F5F5DC;
}
.card-title{
    font-size: 23px;
}
.card-text{
    font-size: 17px;
}
.btn-primary {
    background-color: transparent;
    border: 1px solid #F5F5DC;
   }
.ver-mas{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #F5F5DC;
}
.ver-mas:hover{
    background-color: #29ABE2;
   }

 /*======  Modales  ==================================*/
 .modal-content {
    background-color: #000;
    color: #F5F5DC;
    border: 1px solid #F5F5DC;
  }
  
  .modal-header {
    border-bottom: 1px solid #F5F5DC;
  }
  .modal-footer {
    border-top: 1px solid #F5F5DC;
  }
 
 .modal-body p{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    margin: 0 auto;
    margin-bottom: 20px;
    max-width: 1080px;
 }


/*============== ESTILOS SECCION NOSOTROS ===============*/

.seccion-nosotros {
  background-image: linear-gradient(rgba(0, 0, 0, 0.828), rgba(0, 0, 0, 0.88)), url("../images/foto-3.jpg");
  background-size: cover; /* Cubre todo el contenedor */
  background-position: center; /* Centra la imagen */
  color: white; /* Color del texto */
  padding: 100px 0; /* Ajusta el padding según tus necesidades */
  display: flex; /* Para centrar verticalmente */
  align-items: center; /* Centra verticalmente */
}

.contenedor-nosotros {
  width: 90%; /* Ancho del contenedor */
  margin: 0 auto; /* Centra el contenedor */
}

.contenido-nosotros {
  display: flex; /* Usa flexbox para el diseño */
  justify-content: center; /* Centra horizontalmente */
}

.texto-nosotros {
  width: 90%; /* Ancho del texto */
  padding: 20px;
  display: flex;
  flex-direction: column; /* Texto arriba, logo abajo */
  align-items: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto */
}

.subtitulo-nosotros {
  text-align: center;
  font-size: 40px;
  margin-top: 30px;
  margin-bottom: 50px;
  padding-top: 20px;
  color: #F5F5DC;
}

.parrafo-nosotros {
  font-size: 20px;
  margin-right: 10px;
  line-height: 1.7;
  color: #F5F5DC;
  text-align: justify;
}
.logo-empresa {
  width: 300px;
  margin: 20px auto 0;
  margin-top: 20px;
}

/* Estilos para móviles */
@media (max-width: 768px) {
  .seccion-nosotros {
      padding: 50px 0; /* Ajusta el padding para móviles */
  }

  .contenido-nosotros {
      flex-direction: column; /* Diseño en columna para móviles */
  }

  .texto-nosotros {
      width: 100%; /* Ancho completo para el texto en móviles */
      flex-direction: column; /* Alinea verticalmente */
      align-items: center; /* Centra horizontalmente */
  }
  .logo-empresa {
    width: 200px;
    margin: 20px auto 0; /* Centra horizontalmente y añade margen superior */
}
}

/*======== SECCION CERTIFICACIONES ==================*/

  .seccion-certificaciones {
    background-color: #fff; /* Fondo blanco */
    padding: 60px 8%;
}

.subtitulo-certificaciones {
    text-align: center;
    font-size: 40px;
    padding-bottom: 50px;
    margin-bottom: 30px;
    color: #0F0F0F; /* Color de texto oscuro */
}

.fila-certificaciones {
    display: flex;
    flex-wrap: wrap; /* Ajusta las imágenes a pantallas pequeñas */
    justify-content: center; /* Centra las imágenes horizontalmente */
    gap: 20px; /* Espacio entre imágenes */
}

.col-md-3 {
    display: flex; /* Centra verticalmente el contenido de cada columna */
    justify-content: center; /* Centra horizontalmente el contenido de cada columna */
    align-items: center;
}

.imagen-certificacion {
    max-width: 60%; /* La imagen ocupa todo el ancho de su contenedor */
    height: auto;
    object-fit: contain; /* La imagen se ajusta al contenedor sin deformarse */
    display: block;
    margin: 0 auto;
}
.img-chile{
    width: 28%;
}
.img-aviacion{
    width: 50%;
}


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

#contacto .container {
    max-width: 1600px;
    margin: 0 auto;
}
.titulo-contacto {
  color: #F5F5DC;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 40px;
  text-align: center;
  padding-top: 80px;
}
/* Contenedor para el texto y el formulario */
.contenido-contacto {
  display: flex; /* Diseño en fila para pantallas de escritorio */
  flex-wrap: wrap; /* Ajustar elementos si no caben */
  gap: 30px; /* Espacio entre el texto y el formulario */
}
/* Columna para el texto */
.texto-contacto {
  width: 45%; /* Ancho para el texto */
  padding: 0 20px; /* Espacio alrededor del texto */
  color: #F5F5DC;
}
.texto-contacto p {
  font-size: 20px;
  margin-bottom: 20px; /* Espacio entre párrafos */
  line-height: 1.6; /* Interlineado para mejor legibilidad */
}
/* Columna para el formulario */
.formulario-contacto {
    width: 50%; /* Ancho para el formulario */
    padding: 20px; /* Espacio alrededor del formulario */
}
/* Estilos para el formulario */
#contacto .form-control {
    border: none; /* Elimina bordes */
    border-bottom: 1px solid #F5F5DC; /* Borde inferior sutil */
    padding: 10px 0; /* Ajusta el padding */
    box-shadow: none; /* Elimina sombras */
    background-color: transparent; /* Fondo transparente */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transición suave */
}
#contacto .form-control:focus {
    border-color: #F5F5DC;/* Borde al hacer focus */
    outline: none; /* Elimina outline */
    box-shadow: none; /* Elimina sombras */
}

#contacto .btn-primary {
    border: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Transición suave */
}
.btn-color{
    background-color: #1570B8;
}
.btn-color:hover{
    background-color: #29ABE2;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
}

/*============ ESTILOS DEL FOOTER ==============*/
.contenedor{
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 60px 0;
}

footer{
    background: #0F0F0F;
    padding-bottom: 0.1px;
}

.footer-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 60px;
    padding-bottom: 40px;
}
.logo-footer{
    width: 250px;
}

.contact-us{
    width: 40%;
    color: #fff;
}

.brand{
    font-weight: 500;
    font-size: 35px;
}
.parrafo-pie{
    font-size: 12px;
    letter-spacing: 1px;
}
.brand+p{
    font-weight: 500;
}

.social-media a{
    text-decoration: none;
}
.social-media{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.social-media-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
}
.social-media-icon i{
    font-size: 20px;
    line-height: normal;
}
.line{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    height: 1.5px;
    background: #fff;
    margin-top: 12px;
    margin-bottom: 60px;
}
.social-media-icon:hover{
    background: #fff;
    color:#1C2445;
}
.copyright{
    color: #c8c8c8;
    text-align: center;
    margin: auto;
    font-size: 13px;
    letter-spacing: 1.4px;
    margin-bottom: 60px;
}


/* ==========================================================================
   DISEÑO RESPONSIVE
   ========================================================================== */

/* breakpoints principales */
:root {
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
  }
  
  /* Estilos generales para todos los dispositivos */

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  
  /* ==========================================================================
     ESTILOS PARA MÓVIL (hasta 480px)
     ========================================================================== */
  @media (max-width: 480px) {
    /* --- Menú de navegación --- */
    .nav-link {
      font-size: 18px;
      line-height: 50px;
    }
    .navbar img {
      height: 44px;
    }
    .menu-navegacion {
      width: 50vw;
    }
  
    /* --- Banner --- */
    .contenedor-banner {
      background-size: cover;
    }
  
    /* --- Contenedor de inicio --- */
    .contenedor-inicio {
      width: 90%;
      padding: 30px 0;
    }
  
    /* --- Títulos --- */
    .titulo {
      font-size: 28px;
      padding-left: 10px;
      margin-bottom: 15px;
    }
  
    /* --- Descripciones --- */
    .copy {
      font-size: 18px;
      padding-left: 10px;
      margin-bottom: 15px;
    }
  
    /* --- Botones --- */
    .btn-inicio {
      padding-left: 10px;
    }
    .btn-inicio a {
      font-size: 18px;
      padding: 10px 25px;
    }
  
    /* --- Sección de servicios --- */
    .card-linea {
      padding-bottom: 15px;
    }
    .subtitulo-servicios {
      font-size: 28px;
      padding-top: 20px;
      padding-bottom: 40px;
      line-height: 1.3;
    }
    .contenedor-servicio img {
      width: 80%;
      margin-bottom: 40px;
    }
    .checklist-servicio {
      width: 80%;
    }
    .service {
      margin-bottom: 30px;
    }
  
    /* --- Sección nosotros --- */
    .subtitulo-nosotros {
      font-size: 28px;
      padding-top: 20px;
      padding-bottom: 20px;
      line-height: 1.3;
    }
    .parrafo-nosotros {
      font-size: 18px;
      margin-right: 0;
      text-align: justify;
    }
    .contenido-nosotros {
      flex-direction: column;
      text-align: center;
    }
    .col-md-6 {
      padding: 0;
    }
    .contenedor-img-nosotros {
      width: 100%;
    }
    .imagen-nosotros{
        width: 100%;
    }
    /* --- Sección certificaciones --- */
    .subtitulo-certificaciones {
      font-size: 28px;
      padding-top: 20px;
      padding-bottom: 40px;
      line-height: 1.3;
    }
    .col-md-3 {
      width: 100%;
    }
  
    /* --- Sección contacto --- */
    .titulo-contacto {
      font-size: 28px;
      padding-top: 60px;
      text-align: center;

    }
    .contenido-contacto {
      flex-direction: column;
    }
  
    .texto-contacto {
        width: 100%; /* Ocupa todo el ancho en pantallas móviles */
        text-align: center; /* Centra el texto en pantallas móviles */
        margin-bottom: 20px; /* Espacio debajo del texto en móviles */
    }

    .formulario-contacto {
        width: 100%; /* Ocupa todo el ancho en pantallas móviles */
    }
   
  
    /* --- Footer --- */
    .footer-content {
      justify-content: center;
    }
    .social-media {
      width: 100%;
      justify-content: space-evenly;
    }
    .social-media-icon {
      margin-left: 0;
    }
    .contact-us {
      text-align: center;
      width: 95%;
      margin-bottom: 40px;
    }
  
    /* --- Otros estilos --- */
    .img-galeria {
      width: 45%;
    }
    .agregarImagen {
      width: 80%;
    }
    .cont-expert {
      width: 80%;
    }
    .float {
      width: 40px;
      height: 40px;
    }
    .my-float {
      font-size: 24px;
    }
  }
  
  /* ==========================================================================
     ESTILOS PARA TABLET (desde 481px hasta 768px)
     ========================================================================== */
  @media (min-width: 480px) and (max-width: 768px) {
    /* --- Menú de navegación --- */
    .nav-link {
      font-size: 20px;
      line-height: 55px;
    }
  
    /* --- Banner --- */
    .contenedor-banner {
      background-size: cover;
    }
  
    /* --- Contenedor de inicio --- */
    .contenedor-inicio {
      width: 90%;
      padding: 40px 0;
    }
  
    /* --- Títulos --- */
    .titulo {
      font-size: 40px;
      padding-left: 15px;
      margin-bottom: 20px;
    }
  
    /* --- Descripciones --- */
    .copy {
      font-size: 18px;
      padding-left: 15px;
      margin-bottom: 18px;
    }
  
    /* --- Botones --- */
    .btn-inicio {
      padding-left: 15px;
    }
    .btn-inicio a {
      font-size: 19px;
      padding: 12px 28px;
    }
  
    /* --- Sección de servicios --- */
    .col-md-3 {
      width: 50%;
    }
  
    /* --- Sección certificaciones --- */
    .col-md-3 {
      width: 50%;
    }
    /* --- Sección contacto --- */

    .text-center {
        font-size: 28px;
        padding-top: 30px;
        text-align: center;
      }
      .txt-contact {
        text-align: center;
      }
      .contenido-contacto {
        flex-direction: column;
      }
  
      .texto-contacto {
          width: 100%; /* Ocupa todo el ancho en pantallas móviles */
          text-align: center; /* Centra el texto en pantallas móviles */
          margin-bottom: 30px; /* Espacio debajo del texto en móviles */
      }
  
      .formulario-contacto {
          width: 100%; /* Ocupa todo el ancho en pantallas móviles */
      }
    /* --- Otros estilos --- */
    .col-md-3 {
      width: 50%;
    }
  }
  

 /* ==========================================================================
   DISEÑO RESPONSIVE - PANTALLAS GRANDES (desde 1920px)
   ========================================================================== */
@media (min-width: 1920px) {
    .seccion-nosotros {
      padding: 100px 15%; /* Ajusta el padding para pantallas grandes */
    }
  
    .subtitulo-nosotros {
      font-size: 50px; /* Ajusta el tamaño del subtítulo */
    }
  
    .parrafo-nosotros {
      font-size: 22px; /* Ajusta el tamaño del párrafo */
      margin-right: 30px; /* Aumenta el margen derecho */
      line-height: 1.8; /* Mejora la legibilidad */
    }
  
    .imagen-nosotros {
      width: 86%; /* Ajusta el ancho de la imagen */
      background-color: #0F0F0F; 
    }
  }