/* 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;
}
.hero6 {
  position: relative;
  height: 100vh;  /*Ocupa toda la pantalla */
  background: url("../footer/SERVICIOS-\ almaceninteligente.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 */
  
}
/*Aqui sección logistico inteligente*/

.hero6::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;
}

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


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

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

}

/*aqui acaba abajo es codigo nuevo de otra cosa del archivo */

.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;
}

/*Aqui estan los estilos del apartado section de logistico  */

.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;
}

/* ===================================
   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 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;
}
/* =========================
   EFECTO PROFESIONAL IMAGEN
========================= */

.photo_almacen-text{
    position:relative;

    overflow:hidden;

    border-radius:18px;

    display:inline-block;
}

/* IMAGEN */
.photo_almacen-text img{
    width:60%;

    border-radius:18px;

    transition:
    transform 0.6s ease,
    box-shadow 0.6s ease,
    filter 0.6s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);
}

/* HOVER */
.photo_almacen-text:hover img{

    transform: scale(1.03);

    filter: brightness(1.05);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.22);
}

/* BRILLO ANIMADO */
.photo_almacen-text::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transform: skewX(-20deg);

    transition:0.8s ease;

    z-index:2;
}

.photo_almacen-text:hover::before{
    left:130%;
}

/* =========================
   TEXTO ANIMADO
========================= */

.photo_almacen-text h3{
    margin-top:30px;

    font-size:42px;

    color:#2d4ea3;

    font-weight:700;

    line-height:1.2;

    transition: all 0.4s ease;
}

/* efecto hover texto */
.photo_almacen-text:hover h3{
    transform: translateY(-4px);

    color:#163b96;
}
/*Aqui empiza apartado de ligisica-section*/
.logistica-section{
    display:grid;

    grid-template-columns: 1fr 1fr 140px;

    gap:20px;

    padding:40px;

    background:#ececec;
}

/* CARDS */
.logistica-card{
    background:#fff;

    padding:28px;

    display:flex;
    flex-direction:column;
}

/* HEADER */
.logistica-header{
    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:25px;
}

.logistica-icon img{
    width:65px;
}

.logistica-title h3{
    color:#0d3b8a;

    font-size:28px;

    line-height:1.05;

    margin:0;

    font-weight:800;
}

/* TEXTO */
.logistica-content p{
    color:#243b6b;

    line-height:1.5;

    margin-bottom:18px;

    font-size:16px;
}

/* LISTA */
.logistica-list{
    margin-top:10px;
}

.logistica-list p{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:10px;

    color:#243b6b;
}

.check-icon{
    width:20px;
}

/* BOTON */
.logistica-btn{
    margin-top:auto;

    background:#2447a8;

    color:#fff;

    text-decoration:none;

    text-align:center;

    padding:14px 18px;

    border-radius:30px;

    font-weight:700;

    display:inline-block;
}

/* CAJA GRIS */
.info-box{
    background:#eef1f5;

    border-radius:20px;

    padding:25px;

    margin-top:20px;
}

.info-item{
    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:22px;
}

.info-item img{
    width:70px;
}

.info-item p{
    margin:0;

    color:#2447a8;

    line-height:1.4;
}

/* SIDEBAR */
.logistica-sidebar{
    background:#1f43a6;
    border-radius:14px;

    padding:14px 12px;

    color:#fff;

    width:140px; /* 🔥 ancho parecido a la imagen 2 */

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* TEXTO */
.sidebar-text{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.sidebar-line{
    width:4px;
    background:#ff6b00;
    border-radius:10px;
}

/* TITULO */
.sidebar-text h4{
    margin:0;

    font-size:12px;
    font-weight:700;

    line-height:1.25;
}

/* PARRAFO */
.logistica-sidebar p{
    font-size:11px;

    line-height:1.35;

    margin-top:10px;
}

/* ICONOS */
.sidebar-icons{
    display:flex;
    flex-direction:column;

    align-items:center;

    gap:14px;

    margin-top:18px;
}

/* TAMAÑO ICONOS */
.sidebar-icons img{
    width:58px;
    height:auto;

    object-fit:contain;
}
/* =========================
   EFECTO BOTÓN PROFESIONAL
========================= */

.logistica-btn{
    transition: all 0.35s ease;
    position:relative;
    overflow:hidden;
}

/* hover */
.logistica-btn:hover{
    transform: translateY(-4px) scale(1.03);

    box-shadow:0 12px 25px rgba(13,59,138,0.35);

    background:#163b96;
}

/* efecto al dar click */
.logistica-btn:active{
    transform: scale(0.97);
}

/* brillo animado */
.logistica-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transition:0.7s;
}

.logistica-btn:hover::before{
    left:120%;
}
/* =========================
   BOTON AVION PREMIUM
========================= */

.logistica-btn{
    position:relative;

    overflow:hidden;

    display:inline-flex;

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

    gap:10px;
}

/* AVION */
.logistica-btn::after{
    content:"✈";

    position:absolute;

    font-size:20px;

    opacity:0;

    right:-40px;

    transition:none;
}

/* ANIMACION CLICK */
.logistica-btn:active::after{
    animation: avionViaje 1s ease forwards;
}

/* RUTA AVION */
@keyframes avionViaje{

    0%{
        right:-40px;
        opacity:0;
        transform:translateY(0) rotate(0deg);
    }

    10%{
        opacity:1;
    }

    50%{
        transform:translateY(-8px) rotate(-8deg);
    }

    100%{
        right:110%;
        opacity:0;
        transform:translateY(-15px) rotate(-12deg);
    }
}

/* EXTRA GLOW */
.logistica-btn:hover{
    box-shadow:
    0 12px 25px rgba(13,59,138,0.35),
    0 0 18px rgba(0,140,255,0.35);
}


/* =========================
   EFECTO LISTA
========================= */

.logistica-list p{
    transition: all 0.3s ease;

    padding:6px 10px;

    border-radius:12px;
}

/* hover elegante */
.logistica-list p:hover{
    background:#f4f7ff;

    transform: translateX(8px);

    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* =========================
   EFECTO PALOMITAS
========================= */

.check-icon{
    width:20px;

    transition: transform 0.3s ease;
}

.logistica-list p:hover .check-icon{
    transform: scale(1.2) rotate(-8deg);
}

/* =========================
   EFECTO ICONOS SIDEBAR
========================= */

.sidebar-icons img{
    transition: all 0.35s ease;

    cursor:pointer;
}

/* glow */
.sidebar-icons img:hover{
    transform: scale(1.12) translateY(-4px);

    filter: drop-shadow(0 0 12px rgba(0,255,255,0.6));
}

/* =========================
   EFECTO CARDS
========================= */

.logistica-card{
    transition: all 0.35s ease;
}

.logistica-card:hover{
    transform: translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,0.12);
}
/* =========================
   SECTION OPERACION
========================= */

.operacion-section{
    background:#ececec;

    padding:30px;

    max-width:1200px;

    margin:auto;
}

/* =========================
   GRID
========================= */

.operacion-grid{
    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:16px;
}

/* =========================
   CARDS
========================= */

.operacion-card{
    background:#fff;

    padding:28px;

    min-height:520px;

    display:flex;
    flex-direction:column;

    transition:all 0.35s ease;
}

.operacion-card:hover{
    transform:translateY(-6px);

    box-shadow:0 15px 30px rgba(0,0,0,0.12);
}

/* fila inferior */
.operacion-card:nth-child(4){
    grid-column:1 / 2;
}

.operacion-card:nth-child(5){
    grid-column:2 / 3;
}

/* =========================
   ICONOS
========================= */

.operacion-icon{
    text-align:center;

    margin-bottom:20px;
}

.operacion-icon img{
    width:70px;

    transition:all 0.4s ease;
}

.operacion-card:hover .operacion-icon img{
    transform:scale(1.08) rotate(-3deg);
}

/* =========================
   TITULOS
========================= */

.operacion-card h3{
    text-align:center;

    color:#123b85;

    font-size:20px;

    line-height:1.1;

    margin-bottom:20px;

    font-weight:800;
}

/* =========================
   TEXTO
========================= */

.operacion-card p{
    color:#2d4ea3;

    line-height:1.45;

    font-size:16px;

    margin-bottom:16px;
}

/* =========================
   LISTAS
========================= */

.operacion-card ul{
    padding-left:18px;

    margin-bottom:25px;
}

.operacion-card li{
    color:#2d4ea3;

    margin-bottom:8px;

    line-height:1.4;

    transition:all 0.3s ease;
}

.operacion-card li:hover{
    transform:translateX(5px);

    color:#123b85;
}

/* =========================
   BOTONES
========================= */

.operacion-btn{
    margin-top:auto;

    background:#2447a8;

    color:#fff;

    text-decoration:none;

    text-align:center;

    padding:14px 20px;

    border-radius:30px;

    font-weight:700;

    font-size:14px;

    transition:all 0.35s ease;
}

.operacion-btn:hover{
    transform:translateY(-3px);

    background:#163b96;

    box-shadow:0 10px 20px rgba(0,0,0,0.18);
}

/* =========================
   FOOTER AZUL
========================= */

.operacion-footer{
    margin-top:35px;

    background:#2447a8;

    border-radius:0;

    padding:28px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

.operacion-footer h2{
    color:#fff;

    margin:0;

    font-size:42px;

    font-weight:800;
}

.operacion-footer p{
    color:#dfe8ff;

    margin-top:8px;

    font-size:20px;
}

/* BOTON FOOTER */

.footer-btn{
    background:#ff6b00;

    color:#fff;

    text-decoration:none;

    padding:16px 28px;

    border-radius:40px;

    font-weight:700;

    font-size:24px;

    transition:all 0.35s ease;
}

.footer-btn:hover{
    transform:scale(1.05);

    background:#ff7d1f;

    box-shadow:0 10px 20px rgba(0,0,0,0.18);
}

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

@media(max-width:992px){

    .operacion-grid{
        grid-template-columns:1fr;
    }

    .operacion-card:nth-child(4),
    .operacion-card:nth-child(5){
        grid-column:auto;
    }

    .operacion-footer{
        flex-direction:column;
        text-align:center;
    }

    .operacion-footer h2{
        font-size:30px;
    }

    .footer-btn{
        font-size:18px;
    }

}
/* =========================
   AVIÓN LOGÍSTICO ANIMADO
========================= */

.avion-logistica{
    position:fixed;

    bottom:40px;
    left:-180px;

    z-index:999;

    pointer-events:none;

    animation: vueloLogistico 18s linear infinite;
}

/* imagen */
.avion-logistica img{
    width:130px;

    opacity:0.95;

    filter:
    drop-shadow(0 0 10px rgba(0,140,255,0.35))
    drop-shadow(0 0 20px rgba(0,140,255,0.25));

    animation:
    avionFlotar 2.8s ease-in-out infinite;
}

/* vuelo completo */
@keyframes vueloLogistico{

    0%{
        transform:
        translateX(0)
        translateY(0)
        rotate(0deg);
    }

    25%{
        transform:
        translateX(35vw)
        translateY(-20px)
        rotate(2deg);
    }

    50%{
        transform:
        translateX(70vw)
        translateY(10px)
        rotate(-2deg);
    }

    100%{
        transform:
        translateX(120vw)
        translateY(-15px)
        rotate(0deg);
    }
}

/* movimiento flotante */
@keyframes avionFlotar{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}
/* =========================
   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%;
    }
}

/*finaliza*/
/*Aqui esta el rectangulo y boton antes del footer*/
.hablemos{
    padding:80px 10%;
    background:#1f3c88; /* 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);
}

/*aqui acaba abajo es codigo nuevo de otra cosa del archivo */

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