@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

   body {
     margin: 0;
     font-family: "Poppins", sans-serif;
   }

   h2,
   h1 {
     font-size: 2rem;
     font-weight: bold !important;
     padding: 10px 0 10px 0;
   }

   p {
     font-size: 14px;
   }

   a {
     text-decoration: none;
     color: #000;
   }

   .poppins-extralight {
     font-family: "Poppins", sans-serif;
     font-weight: 300;
     font-style: normal;
     font-size: 14px;
     color: black;
   }

   /* Header */
   .header {
     background-color: #000;
     padding: 30px 0;
     text-align: center;
   }

   .header a {
     color: white;
     text-decoration: none;
     margin: 0 10px;
     font-weight: 500;
   }

   .header a:not(:last-child)::after {
     content: " |";
     margin-left: 10px;
     color: #1A39B4;
   }

   .header a:hover {
     color: #1A39B4;
   }

   .header-primary {
     background-color: #1A39B4;
     padding: 10px 20px;
   }

   .logo-container {
     display: flex;
     /* Poner logo y menú en línea */
     align-items: center;
     /* Centrar verticalmente */
     justify-content: space-between;
     /* Puedes usar 'start' si no quieres separación amplia */
   }

   .img-header {
     height: 60px;
     /* Tamaño fijo del logo */
     object-fit: contain;
   }

   .rot {
     display: flex;
     /* Ítems del menú en línea */
     align-items: center;
     /* Centrar verticalmente */
     gap: 25px;
     /* Separación entre los enlaces */
   }

   .nav-item a {
     text-decoration: none;
     color: #ffffff;
     font-size: 16px;
     font-weight: bold;
   }

   /* Fin del header */
   /* hamburg */
   .menu-movil-custom {
     background-color: #000000;
     /* fondo oscuro */
     color: #1A39B4;
     width: 100px;
   }

   .menu-movil-custom .offcanvas-title {
     color: #ffffff;
     font-weight: bold;
     padding: 10px 0 10px 10px;
   }

   .menu-movil-custom .nav-link {
     color: #1A39B4;
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
   }

   .menu-movil-custom .nav-link:hover {
     color: #ffffff;
     border-radius: 5px;
   }

   .line {
     width: auto;
     background-color: white;
     height: 1px;
   }

   .menu-movil-custom {
     width: 70% !important;
     /* o 300px, como prefieras */
     background-color: #000000;
     color: white;
   }

   .space {
     padding-bottom: 10px;
   }

   /* inicio */
   .porta {
     position: relative;
     width: 100%;
     height: 70vh;
     overflow: hidden;
   }

   .img-portada {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(30%);
   }

   /* Contenedor centrado en pantalla */
   .contenido-centrado {
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     z-index: 2;
   }

   /* Estilo del texto */
   .titulo-hero {
     font-size: 2.5rem;
     font-weight: bold;
     color: white;
     margin: 0;
     text-shadow: 2px 2px 4px #000;
   }

   .subtitulo-hero {
     font-size: 1.2rem;
     color: #fff;
     margin-bottom: 20px;
     text-shadow: 1px 1px 3px #000;
     letter-spacing: 1px;
   }

   /* Galería horizontal */
   .galeria-centrada {
     display: flex;
     justify-content: center;
     gap: 20px;
   }

   .galeria-centrada img {
     width: 260px;
     height: auto;
     object-fit: contain;
     transition: transform 0.3s ease;
   }

   .galeria-centrada img:hover {
     transform: scale(1.08);
   }



   .map-responsive {
     position: relative;
     padding-bottom: 56.25%;
     /* Relación 16:9 */
     height: 0;
     overflow: hidden;
     max-width: 100%;
     border-radius: 8px;
   }

   .map-responsive iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
   }

   .btn-Laz {
     background-color: #1A39B4;
     border: none;
     border-radius: 10px;
     padding: 10px 0 10px 0;
   }

   .btn-Laz {
     display: inline-block;
     background-color: #1A39B4;
     color: white;
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 4px;
     text-decoration: none;
     text-align: center;
     cursor: pointer;
     transition: background-color 0.3s ease;
   }

   .btn-Laz:hover {
     background-color: #1838B7;
   }

   .btn-ls {
     position: relative;
     text-align: center;
   }

   .custom-img {
     width: 380px;
     height: 320px;
     object-fit: cover;
     display: block;
     margin: 0 auto;
     padding: 0.8rem;
     transition: transform 0.4s ease, filter 0.4s ease;
     z-index: 1;
     position: relative;
   }

   .img-container {
     position: relative;
     cursor: pointer;
   }

   /* Texto oculto al inicio */
   .img-hover-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-weight: bold;
     font-size: 1.1rem;
     text-align: center;
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: 2;
     pointer-events: none;
   }

   /* Hover: oscurecer imagen, subirla y mostrar texto */
   .img-container:hover .custom-img {
     transform: translateY(-10px);
     filter: brightness(30%);
   }

   .img-container:hover .img-hover-text {
     opacity: 1;
   }

   /* Contactanos */
   .formulario-contacto {
     width: 100%;
     max-width: 500px;
     margin: auto;
     font-family: Arial, sans-serif;
   }

   .form-group {
     position: relative;
     margin-bottom: 30px;
   }

   .form-group input,
   .form-group textarea {
     width: 100%;
     border: none;
     border-bottom: 1px solid black;
     outline: none;
     padding: 8px 0;
     background: transparent;
     font-size: 16px;
     transition: border-color 0.3s;
   }

   .form-group input:focus,
   .form-group textarea:focus {
     border-bottom: 2px solid #007bff;
   }

   .form-group label {
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
     font-size: 14px;
     color: #666;
     transition: 0.3s ease all;
   }

   .form-group input:focus+label,
   .form-group input:not(:placeholder-shown)+label,
   .form-group textarea:focus+label,
   .form-group textarea:not(:placeholder-shown)+label {
     transform: translateY(-20px);
     font-size: 12px;
     color: #999;
   }



   /* carrusel marcas */
   .swiper-slide img {
     height: 150px !important;
     object-fit: contain;
     display: block;
     margin: 0 auto;
   }

   /* Servicios */
   .text-produc {
     font-weight: bold;
     padding: 10px 0 10px 0;
   }

   .product-card {
     padding: 0.2rem;
   }

   .truncate-description {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     /* Limita a 2 líneas */
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     height: 4.4em;
     /* Aproximadamente 2 líneas */
     font-size: 14px;
     font-weight: light;

   }

   .contactanos-btn {
     text-align: center;
   }

   .button-contact {
     border: none;
     background-color: #1A39B4;
     border-radius: 10px;
     padding: 10px;
     width: 50%;
     color: white;
   }

   .button-contact:hover {
     border: solid 1px #000000;
     background-color: white;
     color: #000000;
   }

   /* Nosotros */
   .fast {
     width: 100%;
   }

   .img-nosotros {
     text-align: center;
   }

   .group {
     background-color: #F5F5F5;
     width: 100%;
     padding: 40px 0;
   }


   .bi {
     font-size: 1.2rem;
   }

   .contact-box {
     display: flex;
     flex-direction: column;
     gap: 12px;
     /* Espacio entre cada fila */
   }

   .contact-item {
     display: flex;
     align-items: center;
     gap: 10px;
     /* Espacio entre icono y texto */
   }

   .icon-box {
     background-color: #1A39B4;
     border-radius: 10px;
     padding: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 40px;
     height: 40px;
     font-size: 1.2rem;
     color: #000;
   }

   .contact-text {
     font-size: 1rem;
     color: #000;
   }

   .port {
     width: 250px;
     height: 250px;
   }

   .section-title {
     text-align: center;
     padding-bottom: 10px;
     font-weight: bold;
   }

   .section-title span {
     background-color: #1A39B4;
     padding: 10px 10px 10px 10px;
     border-radius: 10px;
     /* opcional, para bordes redondeados */
     display: inline-block;
     width: 50%;
     color: white;
   }

   /* mission vission valores */
   .nosotros-box {
     background-color: #fff;
     padding: 30px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease-in-out;
   }

   .nosotros-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
   }

   .icono-nosotros {
     font-size: 38px;
     color: #1A39B4;
     margin-bottom: 15px;
   }

   .titulo-nosotros {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 15px;
     color: black;

   }

   .nosotros-text {
     font-size: 13px;
     line-height: 1.6;
   }

   .nosotros-text p {
     margin-bottom: 8px;
     font-size: 14px;
   }

   /* Chancadoras */
   .titulo {
     font-weight: bold;
     padding-left: 10px;
   }

   .btn-producto {
     border: none;
     background-color: white;
     width: 100%;

   }

   /* Productos - Portada */
   .hero-container {
     position: relative;
     width: 100%;
     height: 240px;
     overflow: hidden;
   }

   .hero-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   .hero {
     position: relative;
     width: 100%;
     height: 440px;
     overflow: hidden;
   }

   .hero img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }

   .hero-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 2.5rem;
     text-align: left;
     text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
   }

   /* perfilñ de prodcuto */
   .producto-detalle {
     text-align: center;
     align-items: center;
   }

   .item-titulo {
     font-weight: bold;
     font-size: 18px;
   }

   /* RESPONSIVEEEE */
   @media (max-width: 768px) {

     .subtitulo-hero {
       font-size: 1rem;
     }

     .galeria-centrada {
       justify-content: center;
     }

     .galeria-centrada img:not(:first-child) {
       display: none;
     }

     .galeria-centrada img:first-child {
       width: 240px;
     }

     .img-portada {
       height: 50vh;
       object-fit: cover;
     }

     .contenido-centrado {
       top: 5%;
       transform: translateX(-50%);
     }

     .titulo-hero {
       font-size: 1.5rem;
     }

     .subtitulo-hero {
       font-size: 1rem;
     }

     .porta {
       position: relative;
       width: auto;
       height: auto;
       overflow: hidden;
     }

     .nav-item a {
       font-weight: 200;
     }

     .img-header {
       width: 240px !important;
     }
   }

   /* WSP */
   .whatsapp-chat {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     background-color: #25d366;
     color: white;
     font-size: 28px;
     border-radius: 50%;
     z-index: 999;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     text-decoration: none;
   }

   .whatsapp-chat:hover {
     background-color: #20ba5a;
     transform: scale(1.1);
   }

   /* Footer */
   footer {
     background-color: #000;
     color: #fff;
     padding: 10px 0;
   }

   .text-uppercase {
     font-weight: bold;
     text-align: center;
   }

   .list-unstyled {
     padding: 15px 0 10px 0;
   }

   .text-white {
     padding: 10px;
     font-size: 14px;
   }

   .lina {
     width: auto;
     background-color: #1838B7;
     height: 1px;
   }

   .bi-caret-right-fill {
     color: #1838B7;
   }

   /* KEYFRAME */
   @keyframes slideDown {
     0% {
       opacity: 0;
       transform: translateY(-80px);
     }

     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* Galería desde abajo */
   @keyframes slideUp {
     0% {
       opacity: 0;
       transform: translateY(80px);
     }

     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* Clases que disparan la animación */
   .animar-texto {
     animation: slideDown 1s ease-out forwards;
   }

   .animar-galeria {
     animation: slideUp 1.2s ease-out forwards;
   }