/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Navbar Ubicacion letras del header y header*/
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  background: #0d2b52;
  color: #fff;
}

.navbar .logo {
  font-size: 1.3rem;
  font-weight: bold;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.navbar ul li a {   /* texto para poner en negritas*/ 
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
}

.navbar ul li a:hover {
  text-decoration: underline;
}

.hero2 {
  position: relative;
  height: 100vh;  /*Ocupa toda la pantalla */
  background: url("../footer/Almacen-fon.png") no-repeat center center;
  background-size: cover; /*Para que cubra sin deformarse*/
  display: flex;
  justify-content: flex-start; /*Esta seccion texto alineado a la izquierda */
  align-items: center;
  padding-left: 5rem; /* Separa el texto del borde */
  color: white; /*Texto en blanco para el contraste */
  text-align: left; /*El texto se alinea a la izquierda */
  
}

.hero2::before {                         /*AQUI ESTAN LOS HERO DE CADA PAGINA seccion titulo*/
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.55); /*oscurece un poco la imagen */
z-index: 1;
}

.hero2 .overlay {
  position: relative;
  z-index: 2;
  max-width: 600px; /*Ancho maximo del bloque de texto pagina nosotros we*/
  
}

/*Aqui estan los estilos del apartado section de we escrito de quienes somos */

.about {
  padding: 80px 10%;
  background: #f8f9fb;
}

.about-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/*Texto*/ 

.about-text h2{
  font-size: 32px;
  margin-bottom: 20px;
  color: #1b2b40;
}

.about-text p{
  font-size: 16px;
  line-height: 1.7;
  color:#1b2b40;
  margin-bottom: 15px;
}

.about-imagen{
  position: relative;
}

.about-imagen img{
  width: 420px;
  border-radius: 6px;
}

/*detalle resalte amarillo */

.decor{
  position: absolute;
  right: -15px;
  top: 50%;
  width: 70px;
  height: 10px;
  background: #f5b400;
}

.resaltar{
    font-size:20px;
    font-weight:700;
    color:#0b2a4a;
    margin-top:25px;
    padding-left:15px;
    border-left:4px solid #f2b300;
}

/*Aqui van los estilos de la sección confianza*/

.confianza{
    background:#f4f4f4;
    padding:70px 10%;
}

/* contenedor */

.confianza-card{
    max-width:900px;
    margin:auto;
}

/* titulo */

.confianza-card h2{
    text-align:center;
    font-size:36px;
    color:#1b3556;
    margin-bottom:5px;
}

/* subtitulo */

.subtitulo{
    text-align:center;
    color:#1b3556;
    margin-bottom:40px;
}

/* items */

.item{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:30px;
    transition:0.3s;
}

.item:hover{
transform:translateX(8px);
}                              /*animación*/

/* iconos */

.item img{
    width:45px;
}

/* titulos */

.item h3{
    font-size:20px;
    color:#1b3556;
    margin-bottom:5px;
}

/* texto */

.item p{
    color:#374151;
    font-size:16px;
    line-height:1.5;
}

/*termina confianza*/

/*Estilos para el celular o tablet */
@media (max-width:768px){

.about-container{
  flex-direction:column;
  text-align:center;
}

.about-image img{
  width:100%;
}

.decor{
  display:none;
}

}

/*Estilos de la sección we de nosotros equipos admin y opera*/

/*Sección de estilos del subtitulo y del parrafo escrito*/

.equipo-header{
    text-align:center;
    margin-bottom:50px;
}

.equipo-header h2{
    font-size:32px;
    color:#1b3556;
    margin-bottom:10px;
}

.equipo-header p{
    color:#6b7280;
    font-size:16px;
}

.equipo-header h2::after{
    content:"";
    display:block;
    width:60px;
    height:4px;
    background:#f2b300;
    margin:10px auto 0;
}

/*Parte de la sección section*/

.equipos{
    display:flex;
    justify-content:center;
    gap:60px;
    padding:60px 10%;
    background:#f5f5f5;
}

/* TARJETAS */

.equipo-card{
    background:white;
    padding:25px;
    text-align:center;
    border-radius:6px;
    width:420px;
}

/* IMAGEN */

.equipo-card img{
    width:100%;
    border-radius:4px;
}

/* TITULO */

.equipo-card h3{
    margin-top:20px;
    font-size:22px;
    color:#1b3556;
}

/* TEXTO */

.equipo-card p{
    margin-top:8px;
    color:#1d71df;
    font-size:16px;
}
 
.equipo-card{
    background:white;
    padding:25px;
    text-align:center;
    border-radius:6px;
    width:420px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.equipo-card:hover{
    transform: translateY(-8px) scale(1.03);
}

/*Para celular*/
@media (max-width:900px){

.equipos{
    flex-direction:column;
    align-items:center;
}

.equipo-card{
    width:100%;
    max-width:450px;
}

/* ===================================
   RESPONSIVE NAVBAR MOBILE
=================================== */

@media (max-width: 768px){

  /* evita scroll horizontal */
  html, body{
    overflow-x: hidden;
    width:100%;
  }

  /* NAVBAR */
  .navbar{
    padding: 12px 18px;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;
  }

  /* LOGO */
  .navbar .logo img{
    width:120px;
    height:auto;
  }

  /* MENÚ */
  .navbar nav ul{
    gap:12px;

    align-items:center;
  }

  /* LINKS */
  .navbar ul li a{
    font-size:12px;
  }

  /* BOTÓN CONTACTO */
  .navbar .btn{
    padding:10px 14px;

    font-size:12px;

    border-radius:8px;
  }

  /* HERO */
  .hero{
    padding-left:20px;
    padding-right:20px;

    justify-content:center;

    text-align:center;
  }

  .hero .overlay{
    max-width:100%;
  }

  .hero h1{
    font-size:42px;

    line-height:1.1;
  }

  .hero p{
    font-size:15px;
  }

} /*AQUI ACABA LO DE MOVIL PRUEBA*/


}
/*esta sección es de la pagina we (nosotros) */

/*Estilos del titulo */
.hero2 h1 {
  font-size: 3rem; /*Mas grande el texto*/
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}
/*Texto debajo del titulo*/

.hero2 p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #ffffff; /*gris claro para diferenciarlo texto p*/
  line-height: 1.5;

}
.btn {
  display: initial; 
  padding: 1rem 2rem;
  background: #ff6600;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.1rem;
  transition: background 0.3s ease; /*Ayuda a que se vea mejor el boton */
}

.btn:hover {
  background: #e05500;
}
/*detalle resalte amarillo */

.decor{
  position: absolute;
  right: -15px;
  top: 50%;
  width: 70px;
  height: 10px;
  background: #f5b400;
}

.resaltar{
    font-size:20px;
    font-weight:700;
    color:#0b2a4a;
    margin-top:25px;
    padding-left:15px;
    border-left:4px solid #f2b300;
}

/* Servicios */
.services {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 2rem;
  background: #f5f5f5;
  flex-wrap: wrap;
  
}

.service-card {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /*resaltar el cuadro de atras como foco led */
  transition: transform 0.3s ease;

}

.service-card:hover {
  transform: translateY(-10px); /* efecto flotante al pasar */
}

.service i {  /*Iconos de arriba */
  font-size: 3rem;
  color: #0d2b52;
  margin-bottom: 1%;
}

.service-card img {
  width: 80px;  /*TaMAÑO FIJO PARA UNIFORMIDAD*/
  height: auto;
  margin-bottom: 1rem;
}

.service-card h3 { /* Titulos */ 
  font-size: 1.3rem;
  font-weight: 700;
  color: #0d2b52;
  margin-bottom: 1rem;
}

.service-card p {
  font-size: 1rem;
  color: #1d71df;
  margin-bottom: 2rem;
  line-height: 1.4;           /*Texto descriptivo */
  
}


.letter{
  list-style: none;   /* quita viñetas */
  padding: 0;
  margin-top: 10px;
}

.letter li{
  font-size: 1rem;
  color: #1d71df;
  margin-bottom: 8px; /* separacion */
  line-height: 1.3;
  text-align: center; /* opcional para centrar */
}

.letter li::marker{
  color:#1d71df;
  font-size:1.2rem;
}

/* =========================
   PRELOADER LOGÍSTICO
========================= */

#preloader{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#ffffff;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transition:0.4s ease;
}

/* mostrar */
#preloader.active{
    opacity:1;
    visibility:visible;
}

/* contenido */
.loader-content{
    text-align:center;
}

/* logo */
.loader-content img{
    width:260px;

    animation:
    pulseLogo 1.8s infinite ease-in-out;
}

/* línea carga */
.loader-line{
    width:220px;
    height:6px;

    background:#e4e4e4;

    border-radius:20px;

    margin:25px auto 0;

    overflow:hidden;

    position:relative;
}

/* barra azul */
.loader-line::before{
    content:"";

    position:absolute;

    top:0;
    left:-40%;

    width:40%;
    height:100%;

    background:#0d3b8a;

    border-radius:20px;

    animation:lineMove 1.2s infinite linear;
}

/* animación logo */
@keyframes pulseLogo{

    0%{
        transform:scale(1);
        opacity:0.9;
    }

    50%{
        transform:scale(1.05);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:0.9;
    }
}

/* barra movimiento */
@keyframes lineMove{

    0%{
        left:-40%;
    }

    100%{
        left:100%;
    }
}

/* ===== Footer ===== */
.footer {
  background-color: #0d3b8a; /* azul corporativo */
  color: white;
  padding: 50px 20px;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* Izquierda */
.footer-left h2 {
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 20px;
}

.footer-nav a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.95em;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-contact p,
.footer-address p {
  font-size: 0.9em;
  line-height: 1.6;
  margin: 4px 0;
}

.footer-contact a {
  color: #fff;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

/* Derecha */
.footer-right {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 15px;
}

/* Botón naranja */
.btn-cotiza {
  background-color: #ff6b00;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1em;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.btn-cotiza:hover {
  background-color: #e35d00;
  transform: translateY(-2px);
}

/* Iconos sociales */
.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  color: white;
  font-size: 1.3em;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #ff6b00;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .footer-right {
    margin-top: 30px;
  }
}
/* Estilos para el icono de WhatsApp */
.whatsapp-icon {
  position: fixed;
  bottom: 20px; /* Ajusta según el espacio que desees desde la parte inferior */
  right: 20px; /* Ajusta según el espacio que desees desde la derecha */
  z-index: 1000; /* Asegura que el icono quede encima de otros elementos */
}

.whatsapp-icon img {
  width: 60px; /* Tamaño del icono, ajusta según necesites */
  height: 60px;
  border-radius: 50%; /* Opcional: hace el icono redondo */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Opcional: agrega sombra */
  transition: transform 0.3s ease; /* Animación para hover */
}

.whatsapp-icon:hover img {
  transform: scale(1.1); /* Efecto de agrandado cuando el usuario pasa el mouse */
}



/*Estilos para el celular*/
/* Responsive: tablets */
@media (max-width: 992px) {
  .services {
    gap: 1.5rem;
  }

  .service-card {
    width: 260px;
    padding: 1.5rem;
  }

  .service-card img {
    width: 70px; /* un poco más pequeño */
  }
}

/* Responsive: móviles */
@media (max-width: 768px) {
  .services {
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
  }

  .service-card {
    width: 100%;
    max-width: 380px;
  }

  .service-card img {
    width: 60px; /* se reduce más en pantallas chicas */
  }

  .btn-card {
    width: 100%;   /* botón ancho en móviles */
    text-align: center;
  }
}