/* 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;
}

.hero4 {
  position: relative;
  height: 100vh;  /*Ocupa toda la pantalla */
  background: url("../footer/Fondo-serv.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 */
  
}


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

.hero4 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 boton  de todos los inicios */
}

.btn:hover {
  background: #e05500;
}

/*Aqui sección almacenaje*/

.hero4::before {                         
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;
}

.hero4 .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 almacenaje  */

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

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

/*Texto*/ 

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

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

.palomita{       /*Viñetas con imagen dentro de mi sección*/
    list-style:none;
    padding-left:0;
}

.palomita li{
  transition: color 0.25s ease;
  transition:letter-spacing 0.2s ease;    /*estos son las animaciones*/
    position:relative;
    padding-left:75px;   /*espacio del icono grande */
    margin-bottom:18px;
    font-size:22px;
    color:#1b3556;
}
.palomita li:hover{
  letter-spacing:0.5px;  /*parte de la animación de spacing si no no funciona */
    color:#1d71df;   /*hace que al momento de la animación tambien las letras cambien de color */
}
/* icono */

.palomita li::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);  /*centra verticalente importante*/
    width: 58px;
    height: 58px;

    background-image:url("/footer/iconos.png");
    background-size:contain;
    background-repeat:no-repeat;
    transition: transform 0.25s ease;
}

.palomita li:hover::before{
transform: translateY(-50%) scale(1.2);  /*Esto se modifica y hace la animación correspondiente por el tipo de texto eso solo es cuando modificar el tamaño de imagen*/
}

.logistico-card h3{           /*Este es de la clase palomita no confundir con los head */
margin-bottom:20px;
}

/*Aqui finaliza la sección de viñetas*/

/*aqui inicia la imagen de alamacen de almacenaje y abajo el h3 */

.photo_almacen{
    padding:60px 10%;
    background:#f4f4f4;
    text-align:center;
}

.photo_almacen-card{
    max-width:1100px;
    margin:auto;
}

.photo_almacen-text img{
    width:60%;
    
    border-radius:6px;
}

/* texto */

.photo_almacen-text h3{
    margin-top:30px;
    font-size:42px;
    color:#2d4ea3;
    font-weight:700;
    line-height:1.2;
}

/*finaliza*/
/*Aqui esta el rectangulo y boton antes del footer*/
.hablemos{
    padding:80px 10%;
    background:#ffffff; /* fondo general si quieres */
}

/* tarjeta azul */

.hablemos-card{
    background:#2e4ea3;   
    padding:60px 40px;
    text-align:center;
    border-radius:6px;
}

/* titulo */

.hablemos-card h2{
    color:white;
    font-size:32px;
    margin-bottom:30px;
}

/* boton */

.btn-hablemos{
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
    display:inline-block;
    background:#f25c05;
    color:white;
    font-size:22px;
    font-weight:600;
    padding:18px 45px;
    border-radius:50px;
    text-decoration:none;
    transition:0.3s;
}

/* hover boton */

.btn-hablemos:hover{
    background:#ff6b1a;
    transform:scale(1.05);
}
/* ===================================
   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*/
/*aqui acaba abajo es codigo nuevo de otra cosa del archivo */

/* =========================
   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 */
}