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

/* Hero de todas las paginas */
.hero {
  position: relative;
  height: 100vh;  /*Ocupa toda la pantalla */
  background: url("../footer/INICIO-\ fondo.png");
  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 */
  
}



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


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

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

/*AQUI ESTAN LOS HERO DE CADA PAGINA*/
.hero3::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;
}

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


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

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

}



/*esta sección es de la pagina servicios (servicios) */

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

.hero3 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 incios*/
}

.btn:hover {
  background: #e05500;
}


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


/* 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{
  padding-left: 20px; /* controla distancia de viñeta al borde */
}


.letter li{
  font-size: 1rem;   /*tamaño de letra*/
  color: #1d71df;
  margin-bottom: 0.5rem;     /*las viñetas */
  line-height: 1;
}

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

.btn-card {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  background: #ff6600;
  color: #fff;
  font-weight: bold;
  border-radius: 30px; /* redondeado como en tu imagen */
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-card:hover {
  background: #e05500;
}


/* ===== Testimonios Clientes ===== */
.testimonials {
  text-align: center;
  background: #f9f9f9;
  padding: 60px 20px;
}

.testimonials h2 {
  font-size: 2em;
  font-weight: 700;
  color: #222;
  margin-bottom: 40px;
}

/* Contenedor del slider */
.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Pista que se desliza */
.slide-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

/* Cada tarjeta */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 100%;
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  margin: 0 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.testimonial-card h3 {
  color: #0066ff;
  margin-bottom: 10px;
}

.testimonial-card .stars {
  color: #ffb400;
  font-size: 1.2em;
}

.testimonial-card .comment {
  font-size: 1.1em;
  color: #333;
  margin: 15px 0;
}

.testimonial-card .time {
  color: #888;
  font-size: 0.9em;
}

/* Botones de navegación (opcional) */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,102,255,0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
  z-index: 10;
}

.slider-btn:hover {
  background: #004ecc;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Indicadores (puntos) */
.dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 8px;
}

.dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.dots button.active {
  background: #0066ff;
}

/* === Estilos para la imagen circular del logo en testimonios === */
.testimonial-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 15px auto;
  background: radial-gradient(circle, #0a3a78 0%, #002f5f 100%);
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/*SECCIÓN DE CONFIAZA */

.trust {
  text-align: center;
  padding: 2rem;
  background: #f9f9f9;
}

.trust h2 {
  margin-bottom: 1rem;
}

.trust ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  list-style: none;

}

.trust li {
  font-weight: bold;
  color: #0d2b52;
}

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

}


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