@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');



* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;

}
:root{
--black: #000;
--blanco: #fff;
--azulpolar: #1B293A;
--plateado: #BEBEBE;
--secundario: #87F2FB ;
--Grisclean:#50B0BB;


}
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
/**codigo nuevo**/
@media (min-width: 768px) {
.navbar {
        display: flex;
        gap: 2rem;
    }

}
    
body{
    
        font-family: "Poppins", sans-serif;
       
    }
    .menu .logo img {
        width: 100px; /* ajusta este valor según lo necesites */
        height: auto; /* esto mantiene la proporción de la imagen */
    }
    .logo img {
        width: 1200px; /* ajusta el ancho según sea necesario */
        height: auto; /* para mantener la proporción */
        display: block; /* para centrar horizontalmente */
        margin: 0 auto; /* para centrar horizontalmente */
    }


/**Header Principal**/
.header-content {
    min-height: 80vh; /* Ajusta la altura según sea necesario */
    margin-bottom: 20px; /* Agrega un margen inferior para separarlo de los elementos posteriores */
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ancho igual al 100% del contenedor padre */
    height: 100%; /* Altura igual al 100% del contenedor padre */
    object-fit: cover; /* Ajustar el tamaño del video para cubrir el contenedor */
    z-index: -1; /* Colocar el video detrás de otros elementos */
}


.capa{
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: rgb(0,0,0,0.5);
}
.EmpresaLG {
    position: absolute; /* Establecer posición absoluta */
    top: 50%; /* Colocar en la mitad superior del contenedor padre */
    left: 50%; /* Colocar en el centro horizontal del contenedor padre */
    transform: translate(-50%, -50%); /* Centrar tanto vertical como horizontalmente */
    z-index: 1; /* Colocar por encima de otros elementos */

    height: auto;
    max-width: 60%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
video::-moz-picture-in-picture-button {
    display: none !important;
}


/* video estilos*/

.menu{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items:center;
    justify-content: space-between;
    z-index: 1000;
}
/**Header Nuestra Empresa**/
.header-empresa {
    background-image: url(../img/NE1.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-position: center calc(25% - 20px); /* Ajusta la posición de la imagen de fondo */
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.header-txt--empresa {
    text-align: center;
    margin-top: 350px; /* Ajusta el valor según sea necesario para bajar el contenido */
    color: var(--blanco);
    font-size: 50px;
}

.somos {
    text-align: center;
    font-size: 30px; /* Puedes ajustar el tamaño según tus necesidades */
    line-height: 1.6; /* Esto aumenta el espacio entre líneas para mejorar la legibilidad */
    margin-top: 50px;
    justify-content: center;
}

.segundo-texto {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el contenido horizontalmente */
    text-align: center; /* Centra el texto horizontalmente */
    margin-top: 20px;
}

.subtexto {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: center; /* Centra horizontalmente */
    max-width: 600px; /* Ajusta el ancho máximo para controlar el número de líneas */
    margin: auto; /* Centra el contenedor horizontalmente */
    text-align: center; /* Centra el texto horizontalmente dentro del contenedor */
}

.subtexto .col-auto {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
}




.subtexto p {
    margin: 0;
    font-size: 20px; /* Aumenta el tamaño del texto */
    line-height: 1.5; /* Mejora la legibilidad del texto */
    font-weight: bold; /* Añade negrita al texto */
    text-align: justify; /* Justifica el texto */
}



/* mision y vision */

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px; /* Espacio entre las imágenes */
    margin: 20px 0;
}

.image-container img {
    max-width: 100%;
    height: auto;
    width: 380px; /* Establece un ancho fijo para las imágenes */
}


@media (max-width: 980px) {
    .image-container {
        flex-direction: column; /* Cambiar a disposición vertical en pantallas más pequeñas */
        justify-content: center; /* Centrar verticalmente las imágenes */
        align-items: center; /* Centrar horizontalmente las imágenes */
    }

    .image-container img {
        width: 100%; /* Ajustar el ancho al 100% del contenedor */
        max-width: 380px; /* Máximo ancho de las imágenes */
        margin-bottom: 20px; /* Espacio inferior entre imágenes */
    }
}





/**Header Trabajar con cleanvip**/
.header-trabajar{
    background-image: url(../img/TCC.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-position: center calc(25% - 20px); /* Ajusta la posición de la imagen de fondo */
}

.header-txt--trabajando {
    text-align: center;
    margin-top: 350px; /* Ajusta el valor según sea necesario para bajar el contenido */
    color: var(--blanco);
    font-size: 50px;
}


.menu{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items:center;
    justify-content: space-between;
    z-index: 1000;
}

#redes-sociales {
    text-align: center;
    margin-top: 50px; /* Ajusta el margen superior según sea necesario */
  }
  
  .redes a {
    display: inline-block;
    margin: 0 35px; /* Espacio entre los iconos */
    font-size: 60px; /* Aumentar el tamaño de los iconos */
    color: #50B0BB; /* Color de los iconos */
    text-decoration: none;
    transition: color 0.3s; /* Efecto de transición al pasar el mouse */
}

#redes-sociales {
    text-align: center;
    margin-bottom: 30px; /* Agrega margen inferior para separar del formulario */
}

.formulario--trabajar {
    margin-top: 30px; /* Agrega margen superior para separar de las redes sociales */
}



.somos {
    margin-top: 50px; /* Agrega espacio en la parte superior del párrafo */
    margin-bottom: 50px; /* Agrega espacio en la parte inferior del párrafo */
    padding-left: 30px; /* Agrega relleno a la izquierda del contenedor */
    padding-right: 30px; /* Agrega relleno a la derecha del contenedor */
    color: #50b0bb; 

}

  
 


/**Header noticias**/

.header-noticias{
    background-image: url(../img/noticas.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-position: center calc(50% - 20px); /* Ajusta la posición de la imagen de fondo */
}



body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    
}



.ntc-txt {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-noticias {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post {
    display: flex;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.post-header {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.post-img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.post-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-body span {
    color: #777;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.post-body h2 {
    font-size: 1.5em;
    margin: 0 0 10px;
}

.post-body p {
    flex: 1;
    margin: 0 0 10px;
}

.post-link {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}








/* LOGOS BANNER PRINCIPAL**/


.logoss img {
    width: 600px; /* ajusta este valor según el tamaño deseado */
    height: auto; /* esto mantendrá la proporción de la imagen */
}
.logo{
 color: #fff;
 font-size: 25px;
 font-weight: 800;
}

/**LISTAS**/
.menu .navbar ul li{
    position: relative;
    float: left;


}

.menu .navbar ul li a{
 font-size: 18px;
 padding: 20px;
 color: #fff;
 display: block;
 font-weight: 600;
}

#menu{
    display: none;
}

.menu-icono{
    width: 25px;
}
.menu label{
    cursor: pointer;
    display: none;
}


/**LOGO Y INTEFAZ PRIMARIA---HEADER**/
.header-txt{
    text-align: center;
}
.header-txt h1{
    font-size: 85px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.header-txt p {
    color: #BEBEBE;
    font-size: 16px;
    padding: 0 250px;
    margin-bottom: 45px;

}

.btn-1 {
    display: inline-block;
    padding: 12px 30px;
    margin-top: -1px; /* Ajusta el margin-top según sea necesario */
    border: 1px;
    color: #fff;
    font-size: 150px;
    text-transform: uppercase;
    font-weight: 600;
    transform: translateY(-30%);
}







/* SERVICIOS */

.services-section{
    background-color: var(--blanco);
    display: flex;
    justify-content: center;
    padding: 50px 0 ;
}
.service__card h3{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--azulpolar);

}

.container{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;

}
.services__cards{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services__cards-info{
    max-width: 900px;
    

}
.services__cards-info h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--Grisclean);
    margin-bottom: 1rem;
    position: relative; /* Agregamos posición relativa */
    left: 20rem; /* Movemos el h2 3 veces hacia la derecha */
}
.services__cards-info p {
    font-size: 1.1rem;
    color: var(--black);
    margin-bottom: 1rem;
    
}
.services__cards-card{
    display: flex;
    justify-content: center;
}
.service__card{
    max-width: 25%;
    border: solid 1px var(--blanco);
    margin: 5rem 2rem;
    padding: 3rem 5rem;
    border-radius: 5px;
    transition: background-color 0.3s;
    height: 300px;
}
.service__card{
    font-size: 30px;
    color:var(--blanco);
}
.service__card p {
    font-size: 1.1rem;
    color: var(--blanco);
    margin-top: 1rem;
}

.service__card:hover{
    background-color: var(--secundario);
}
/*modificacione nuevas**/




.service__card {
    /* Mantenemos las propiedades anteriores */
    font-size: 30px;
    color: white; /* Cambiamos el color del texto a blanco */
    /* Añadimos la imagen de fondo */
    background-image: url(../img/r3.png);
    background-size: cover; /* Ajustamos el tamaño de la imagen de fondo */
    background-position: center; /* Centramos la imagen de fondo */
    position: relative; /* Establecemos la posición relativa para que los elementos internos se puedan posicionar correctamente */
}

/* Agregamos un pseudo-elemento ::before para crear la capa negra transparente */
.service__card::before {
    content: ""; /* Obligatorio para que funcione el pseudo-elemento */
    position: absolute; /* Establecemos la posición absoluta */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Negro con transparencia del 50% */
    z-index: 0; /* Aseguramos que esté detrás del contenido */
}

.service__card i, .service__card h3, .service__card p {
    /* Ajustamos los estilos de los elementos dentro de .service__card */
    /* Por ejemplo, si queremos que el color del texto sea blanco */
    color: white;
    /* También podemos agregar otros estilos según sea necesario */
    position: relative; /* Establecemos la posición relativa para que estén por encima del pseudo-elemento */
    z-index: 1; /* Aseguramos que estén por encima del pseudo-elemento */
}

.service__card.image1 {
    background-image: url(../img/LINS.png);
}
.service__card.image2 {
    background-image: url(../img/LIND.png);
    
}
.service__card.image3 {
    background-image: url(../img/BLM.png);
    
}
.service__card.image4 {
    background-image: url(../img/AV.png);
    
}
.service__card.image5 {
    background-image: url(../img/SB.png);
    
}
/*ESTILOS TAREJTAS*/



.services-section {
    background-color: var(--blanco);
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.services__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.service__card {
    max-width: 600px; /* Establecer un ancho máximo para las tarjetas */
    margin: 20px; /* Ajustar el margen entre las tarjetas */
    padding: 20px; /* Ajustar el padding dentro de las tarjetas */
    border-radius: 10px; /* Añadir bordes redondeados */
    transition: transform 0.3s ease; /* Agregar transición para suavizar el efecto */
    cursor: pointer; /* Cambiar el cursor al pasar sobre las tarjetas */
    overflow: hidden; /* Ocultar el contenido que se desborda */
    position: relative; /* Establecer posición relativa para los pseudo-elementos */
}

.service__card::before {
    content: ""; /* Obligatorio para los pseudo-elementos */
    position: absolute; /* Establecer posición absoluta */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color de fondo negro transparente */
    opacity: 0; /* Inicialmente oculto */
    transition: opacity 0.3s ease; /* Transición para suavizar la opacidad */
}

.service__card:hover::before {
    opacity: 1; /* Mostrar el fondo negro al pasar el ratón sobre la tarjeta */
}

.service__card:hover {
    transform: scale(1.1); /* Aumentar el tamaño de la tarjeta al pasar el ratón */
}

/* Estilos para el contenido dentro de las tarjetas */
.service__card h3,
.service__card p {
    color: white; /* Cambiar el color del texto a blanco */
    z-index: 1; /* Asegurar que estén por encima del pseudo-elemento */
}


/*ESTILO PARA "LEER MAS"*/

/* Estilo para ocultar el texto "Leer más" por defecto */
/* Ocultar texto y botón "Leer más" por defecto */
.service__card p,
.service__card .Learnmore {
    visibility: hidden; /* Cambiamos display: none a visibility: hidden */
    opacity: 0; /* Añadimos opacity: 0 */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Añadimos una transición para la opacidad */
}

/* Mostrar texto y botón "Leer más" cuando se pasa el ratón sobre la tarjeta */
.service__card:hover p,
.service__card:hover .Learnmore {
    visibility: visible; /* Cambiamos display: initial a visibility: visible */
    opacity: 1; /* Añadimos opacity: 1 */
    transition: opacity 0.3s ease; /* Añadimos una transición para la opacidad */
}

/* Cambiar color del botón "Leer más" */
.service__card .Learnmore {
    color: white; /* Cambiamos el color del texto a blanco */
}

/* Estilo para el botón "Leer más" */
.service__card .leer-mas {
    border: 2px solid transparent; /* Añadir un borde transparente */
    padding: 5px 10px; /* Añadir un poco de relleno para separar el texto del borde */
    border-radius: 5px; /* Agregar bordes redondeados */
    margin-top: 10px; /* Agregar margen superior para separarlo del texto */
    transition: all 0.3s ease; /* Agregar transición para suavizar los cambios */
}


/**ESTILOS PARA H3 SERVICIOS**/



/* Centrar verticalmente el h3 en service__card solo cuando el ratón no está sobre él */
.service__card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* Estilo para el texto h3 */
.service__card h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mostrar texto h3 solo cuando el ratón no está sobre la tarjeta */
.service__card:not(:hover) h3 {
    opacity: 1;
}

.service__card {
    width: 250px; /* Ancho de la tarjeta */
    height: 300px; /* Altura de la tarjeta */
    margin: 20px; /* Margen alrededor de la tarjeta */
    padding: 20px; /* Relleno dentro de la tarjeta */
    border: 1px solid #ccc; /* Borde sólido de 1px de grosor en color gris */
    border-radius: 10px; /* Borde redondeado */
    background-color: #f0f0f0; /* Color de fondo */
}

/* Estilo para el botón "Leer más" */
.Learnmore {
    position: absolute; /* Establecemos la posición absoluta */
    bottom: 10%; /* Colocamos el botón 10% desde la parte inferior del contenedor padre */
    left: 50%; /* Lo centramos horizontalmente */
    transform: translateX(-50%); /* Ajustamos para centrar horizontalmente */
    padding: 3px 6px; /* Reducimos el relleno vertical y horizontal */
    background-color: #4b9952; /* Color de fondo */
    color: #fff; /* Color del texto */
    text-decoration: none; /* Quitamos la subrayado del enlace */
    border-radius: 3px; /* Reducimos el radio del borde */
    transition: background-color 0.3s, color 0.3s; /* Transiciones suaves */
    display: inline-block; /* Cambiamos a visualización en línea */
    font-size: 18px; /* Reducimos el tamaño del texto */
}

/* Estilo para el botón "Leer más" al pasar el ratón sobre él */
.Learnmore:hover {
    background-color: #fff; /* Cambiamos el color de fondo al pasar el ratón */
    color: #1B293A; /* Cambiamos el color del texto al pasar el ratón */
}








/**NUESTROS CLIENTES**/

/* Estilos para el contenedor del carrusel */
.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Estilos para el carrusel */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    max-width: calc(100% - 20px); /* Ajustar al tamaño máximo del contenedor */
    margin: 0 auto; /* Centrar el carrusel */
    padding: 10px 0; /* Agregar espacio alrededor del carrusel */
    position: relative; /* Añadir posición relativa */
    cursor: grab;
    transition: transform 0.3s ease;
}

/* Estilos para las imágenes del carrusel */
.carousel img {
    max-width: 100%; /* Ajustar las imágenes al tamaño del contenedor */
    height: auto; /* Mantener la proporción de aspecto */
    margin-right: 10px; /* Agregar espacio entre las imágenes */
    max-height: 200px; /* Altura máxima de las imágenes */
    user-select: none;
}

/* Estilos para el botón "prev" */
.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    background-color: rgba(0, 0, 0, 0.5); /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Eliminar borde del botón */
    border-radius: 50%; /* Hacer el botón redondeado */
    font-size: 24px; /* Tamaño de la fuente del botón */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    z-index: 1; /* Asegurar que los botones estén encima del carrusel */
}

/* Estilos para el botón "prev" */
.prev {
    left: 10px; /* Ajustar la posición del botón "prev" */
}

/* Estilos para el botón "next" */
.next {
    right: 10px; /* Ajustar la posición del botón "next" */
}

.nuestros-clientes h2 {
    text-align: center;
}

.carousel:active {
    cursor: grabbing;
}


/** Fin del carrusel**/











/**SUBTITULOS**/
h2{
    font-size: 50px;
    text-transform: uppercase;
    color: #1B293A;
}

.txt h3{
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;

}
/**PARRAFOS ROMBOS**/
.txt p{
 color: #fff;
 font-size: 16px;

}
/**SEGUNDA BACKGROUND**/
.info-1{
 padding: 50px 0;
 background-image: url(../img/vector.png); 
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

.info-content{
    text-align: center;
}

.info-content h2,span {
    color: #fff;
    

}

.info-content h3 {
    color: #fff;
    margin-top: 50px; /* Ajustamos el margen superior del h3 */
}



.info-content h2 {
    color: #fff;
    margin-bottom: 20px; /* Ajustamos el margen inferior del h2 */
}



/**CONTENIDO DE INFORMACIONES DE CIRCULOS**/
.info-circle{
    display:flex;
    justify-content: space-between;
    margin-top: 55px;

}
.circle-txt{
    width:25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 10px;
}



.circle-1 , h3 {
    color: #fff;
    font-size: 35px;

}

.circle-txt p {
    color: #fff;
    margin-top: 20px; /* Agregamos un margen superior para separarlo del círculo */
    font-size: 18px; /* Ajustamos el tamaño de la fuente según lo necesario */
    padding: 10px; /* Agregamos un relleno para crear espacio alrededor del texto */
}

.circle-1 h3 {
    color: #fff;
    font-size: 45px; /* Aumentamos el tamaño de la fuente */
    margin: 0;
}







/**INFO TESTIMONIOS**/
.info-2{
    padding: 100px 0;
    background-image: url(../img/vector.png  );
    background-position: center center ;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.testi{
    display: flex;
    align-items: center;
    text-align: left;
    margin-top: 35px;
 
}
.testi-left{
    width: 50%;
    padding-right: 25px;

}
.testi-right{
    width: 50%;
    padding-left: 35px;
}

.testi-txt{
    margin-bottom: 25px ;
}

.testi-txt img{
    width:50px;
    margin-bottom: 15px;

}

.testi-txt h3{
    font-size: 20px;
    color: #fff;
}

/**parrafos de las personas**/
.testi-txt p {
    color: #fff;
    font-size: 16px;
}
/** FORM Y FOOTER DE LA PAGINA WEB**/
.footer{
    padding: 100px 0 0 0;
    text-align: center;
}

.form{
    margin-top: 35px;

}

.campo{
    margin-right: 10px;
    padding: 17px 35px;
    border: 2px solid #fff;
    outline: none;
    color: #1B293A;
    
}
.campo::placeholder{
    color: #BEBEBE;

}
.btn-2{
    padding: 17px 35px;
    border:  2px solid  #1B293A;
    color: #fff;
    background-color: #1B293A;
    
}

.footer{
    margin-top: 100px;
    border-top: 1px solid #fff;
    padding: 20px 0;
}

.footer-txt p {
    color: #1B293A;
    font-size: 16px;
}


/**FORMS**/
.contenedor-campos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Estilos para los campos de entrada y etiquetas */
.campos {
    width: 100%; /* Para una sola columna */
    margin-bottom: 20px;
}

.campos label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.campos input[type="text"],
.campos input[type="tel"],
.campos input[type="email"],
.campos textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}












/* Estilos para el carrusel */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    margin: 0 auto;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* Habilitar desplazamiento suave en dispositivos iOS */
}

/* Estilos para las imágenes del carrusel */
.carousel img {
    max-width: 100%;
    height: auto;
    margin-right: 10px;
    max-height: 200px;
}

/* Estilos para los botones previos y siguientes */
.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 1;
}

/* Posicionamiento de los botones previos y siguientes */
.prev {
    left: 10px;
}

.next {
    right: 10px;
}





/**BREAKPOINTS Y MEDIAS**/

/**Para Telefonos**/







@media (max-width: 980px) {
    .header-content {
        display: flex;
        justify-content: center; /* Centra el contenido horizontalmente */
        align-items: center; /* Centra el contenido verticalmente */
        height: 100vh; /* Opcional: ajusta la altura según tus necesidades */
    }

    .header-content .logo3 img {
        width: 90px !important;
        height: auto;
    }
    /**Apertura checkbox y menu modificaciones**/
.menu{
    padding: 50px;

}
.menu label {
    display: initial;
}
.menu .navbar{
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background-color: var(--azulpolar);
 display: none;
}
.menu .navbar ul li {
    width: 100%;

}
#menu:checked ~ .navbar{
    display: initial;


}


}




@media (max-width: 980px) {
    .header-txt {
        position: absolute;
        bottom: 365px; /* Cambia este valor para subir o bajar la flecha  365*/
        width: 100%;
        text-align: center;
    }

    .btn-1 {
        font-size: 70px; /* Ajusta el tamaño de la flecha */
        padding: 10px 20px;
        background-color: transparent; /* Elimina el fondo si no es necesario */
        border: none; /* Elimina el borde si no es necesario */
        color: var(--blanco); /* Cambia el color según tus necesidades */
    }

    .EmpresaLG {
        width: 100%; /* Ajusta el tamaño según sea necesario */
        max-width: 400px; /* Ajusta el valor máximo del ancho */
        height: auto; /* Mantén la relación de aspecto */
    }


    .menu .menu-icono {
        width: 40px; /* Ajusta el ancho de la imagen según sea necesario */
        height: auto; /* Mantén la relación de aspecto */
    }

    /** Servicios y más **/
   
    .services__cards-info h2 {
        font-size: inherit; /* Ajusta el tamaño de la fuente según sea necesario */
        visibility: hidden; /* Oculta el texto original */
    }

    .services__cards-info h2::before {
        content: 'Servicios'; /* Agrega el nuevo texto */
        display: block; /* Asegura que el contenido sea visible */
        font-size: inherit; /* Ajusta el tamaño de la fuente según sea necesario */
        visibility: visible; /* Hace visible el nuevo texto */


        body {
            overflow: hidden; /* Asegúrate de que el desbordamiento esté deshabilitado también en dispositivos móviles */
        }
    }
    


 

    /** SECCION NUESTRO PROPOSITO MODIFICACIONES 980**/
    

    .info-1 .info-content .opcional {
        display: none; /* Oculta el h3 con la clase 'opcional' en dispositivos con un ancho máximo de 980px */
    }

    .services-wrapper {
        margin-top: -50px; /* Ajusta este valor según sea necesario para mover las tarjetas hacia arriba */
      }
      .services__cards-card > .service__card:last-child {
        margin-bottom: 80px; /* Aplica un margen negativo a la última tarjeta para moverla hacia arriba */
      }

 

      /** BANNER PRINCIPAL NUEVOS CAMBIOS**/

      .header-content.container {
        position: relative; /* Establecer posición relativa */
        height: 400px; /* Ajusta la altura según sea necesario */
    }
    
    .header-content.container video {
        position: absolute; /* Establecer posición absoluta */
        bottom: 0; /* Fijar el video en la parte inferior del contenedor */
        width: 100%; /* Asegurar que ocupe todo el ancho del contenedor */
        z-index: -1; /* Colocar el video detrás del contenido */
    }
    
    .services-section {
        margin-top: 135px; /* Ajusta el margen superior según sea necesario */
    }
    


    /** ARREGLO CARRUSEL 980**/
    @media (max-width: 980px) {
        .nuestros-clientes {
            margin-top: 100px; /* Mantén este valor si da buen resultado */
        }
        .nuestros-clientes h2 {
            margin-top: -20px; /* Ajusta este valor según sea necesario para centrar el texto */
        }
        .carousel-container {
            transform: translateY(-95px); /* Ajusta este valor para mover el carrusel más hacia arriba */
        }
        .carousel-container .prev, .carousel-container .next {
            top: calc(50% - 20px); /* Ajusta el valor según sea necesario */
        }


        .nuestros-clientes h2 {
            margin-bottom: 20px; /* Ajusta este valor según sea necesario */
            transform: translateY(-80px); /* Ajusta este valor para mover el párrafo hacia arriba */
        }

       
        /**flecha para 980**/



        .flecha {
            position: fixed; /* Cambiamos a posición fija */
            bottom: 365px; /* Ajustamos la posición desde abajo */
            left: 50%;
            transform: translateX(-50%) translateY(50px); /* Ajustamos la posición vertical */
        }

        .header-txt .flecha {
            display: none;
        }


}


/** arreglo puntual en la arrow**/

@media (max-width: 390px) and (max-height: 844px) {
    .flecha {
        display: none; /* Ocultar la flecha en dispositivos móviles */
    }
}


.flecha {
    position: absolute;
    bottom: 20px; /* Ajusta la posición desde abajo */
    left: 50%;
    transform: translateX(-50%);
}



@media screen and (max-width: 980px) {
    .capa{
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
    
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%) translateY(-44%);
        background-color: rgb(0,0,0,0.5);
    }
}


















/** checkbox y menu final**/
/**servicios y mas**/




.services__cards-info {
    max-width: 900px; /* Ajustar el ancho máximo según tus necesidades */
    margin: 0 auto; /* Centrar el contenedor horizontalmente */
    text-align: center; /* Centrar el texto */
    margin-bottom: 1rem; /* Ajustar el margen inferior según tus necesidades */
    position: relative; /* Establecer posición relativa para poder posicionar el h2 */
}

.services__cards-info h2 {
    font-size: 2rem; /* Ajustar el tamaño de la fuente según tus necesidades */
    font-weight: 900;
    color: var(--azulpolar);
    margin-bottom: 1rem; /* Ajustar el margen inferior según tus necesidades */
    position: absolute; /* Establecer posición absoluta para posicionar manualmente */
    top: 50%; /* Centrar verticalmente */
    left: 50%; /* Centrar horizontalmente */
    transform: translate(-50%, -50%); /* Centrar exactamente en el centro */
}

 
.services-section {
    padding: 30px 0; /* Reducir el padding para aprovechar mejor el espacio */
}

.services__cards-card {
    flex-direction: column; /* Cambiar la dirección de los elementos a columna */
    align-items: center; /* Centrar los elementos */
}

.service__card {
    max-width: 90%; /* Ajustar el ancho máximo de las tarjetas */
    margin: 1.5rem 0.5rem; /* Ajustar los márgenes */
    padding: 1rem 0.5rem; /* Ajustar el padding */
}

.services__cards-info--outside-980 {
    position: absolute;
    top: 70%; /* Ajustar según sea necesario */
    left: 5%; /* Puedes ajustar este valor según sea necesario */
    transform: translate(-50%, -50%);
}
@media (min-width: 981px) {
    .services__cards-info--outside-980 {
        position: relative;
        top: initial;
        left: initial;
        transform: initial;
    }
}





/**APARTADO INFO Y QUIENES SOMOS - TESTIMONIOS**/
.info-1{
    padding: 200px 30px;
    background-size: cover;
    margin-top: -110px;
    
}
.info-circle{
    flex-direction: column;
    align-items: center;
}
.circle-txt{
    width: 100%;
    margin-bottom: 25px;
}
.info-2{
    padding: 200px 30px;
    background-size: cover;
    margin-top: -100px;
}
.testi{
    flex-direction: column;
    
}
.testi-left{
    width: 100%;
    padding-right: 0;
}
.testi-right{
    width: 100%;
    padding-left: 0;
}

h2{
    font-size: 40px;
}


/**FORMS Y CAMBIOS**/



.formulario .contenedor-campos {
    flex-wrap: wrap;
}

.formulario .campos {
    flex: 0 0 100%;
    margin-bottom: 15px;
}

.formulario .alinear-derecha {
    justify-content: flex-start;
}

.formulario .boton {
    width: 100%;
}

.formulario .input-file {
    width: 100%;
}

.header-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin-left: 0; /* Eliminamos el margen izquierdo */
    }

    .header-content .logoss img {
        width: 300px !important;
        height: auto;
    }

    /* Ajustamos el padding del menú */
    .menu {
        padding: 20px; /* Reducimos el padding para evitar que se desborde */
    }

    /* Establecemos un ancho máximo para los servicios */
    .services__cards-card {
        max-width: 90%; /* Reducimos el ancho máximo de las tarjetas */
        margin: 1rem auto; /* Centramos las tarjetas horizontalmente */
    }

    /* Ajustamos el padding de la sección de información */
    .info-1, .info-2 {
        padding: 100px 30px; /* Reducimos el padding vertical y mantenemos el horizontal */
    }

    /* Ajustamos el tamaño de fuente del título */
    h2 {
        font-size: 30px; /* Reducimos el tamaño de fuente */
    }

    /* Ajustamos el tamaño de fuente de los testimonios */
    .testi-txt h3, .testi-txt p {
        font-size: 14px; /* Reducimos el tamaño de fuente */
    }


    /**CODIGO FINAL PARA RESPONSIVE**/
   .header-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; /* Permitir que los elementos del header se envuelvan en múltiples líneas */
        max-width: 100%; /* Establecer un ancho máximo para evitar el desbordamiento */
    }

    .header-content .logoss {
        flex-basis: 100%; /* Hacer que el logoss ocupe el ancho completo */
        text-align: center; /* Centrar el contenido del logoss */
        margin-bottom: 20px; /* Añadir un margen inferior para separación */
    }

    .header-content .logoss img {
        width: 300px !important;
        height: auto;
    }

    .header-txt {
        flex-basis: 100%; /* Hacer que el texto ocupe el ancho completo */
        text-align: center; /* Centrar el contenido del texto */
    }

    /* Ajustes adicionales para el menú y otros elementos */
    .menu {
        padding: 20px;
    }

    .services__cards-card {
        max-width: 90%;
        margin: 1rem auto;
    }

    .info-1, .info-2 {
        padding: 100px 30px;
    }

    h2 {
        font-size: 30px;
    }

    .testi-txt h3, .testi-txt p {
        font-size: 14px;
    }
}


/*HTML SERVICIOS industriales,institucionales,barrido,areasverdes, etc.*/

/**Header Institucional**/
.header-institucional {
    background-image: url(../img/BGINS.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-position: center calc(25% - 20px); /* Ajusta la posición de la imagen de fondo */
}

/* Baños Banner */
.baños-banner {
    background-image: url('../img/baños.png');
}

/* Industrial Banner */
.industrial-banner {
    background-image: url('../img/industri.png');
}

/* Mecanizado Banner */
.mecanizado-banner {
    background-image: url('../img/barridomeca.png');
}


.menu{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items:center;
    justify-content: space-between;
    z-index: 1000;
}

body {
    display: flex;
    flex-direction: column;
    
}

.viñetas, .servicios-section {
   
    width: 100%;
    padding: 20px;
}

/* Estilos para la sección de viñetas y párrafo */
.viñetas {
    width: 100%;
    float: left;
}



.Apartados {
    display: flex;
    flex-direction: row;
}

.viñetas {
    width: 50%;
    padding: 20px;
}

.servicios-section {
    width: 50%;
    padding: 20px;
}



/*Apartados visuales para viñetas y otros*/

.viñetas p {
    margin-bottom: 20px; /* Agrega un espacio de 2px entre cada párrafo de viñetas */
}
.viñetas {
    width: 100%;
    float: left;
    font-size: 1.2em; /* Aumenta el tamaño de la letra */
    font-weight: bold; /* Aplica negrita */
}



.viñetas, .servicios-section {
    margin: 0 auto; /* Establece márgenes automáticos para centrar */
    width: 40%; /* Reducimos el ancho para acercar los elementos */
   
}

.servicios-section {
    margin-left: 20%; /* Ajustamos el margen izquierdo para acercar servicios-section */
}

.viñetas {
    font-size: 1.5em; /* Ajusta el tamaño de la fuente a 1.2 veces el tamaño base */
}


.servicios-section .video-container {
    width: 100%; /* Ancho al 100% del contenedor padre */
    padding-top: 56.25%; /* Proporción de aspecto 16:9 (para un video de YouTube) */
    position: relative; /* Para posicionar correctamente el elemento de video */
}

.servicios-section .video-container iframe {
    position: absolute; /* Para posicionar el iframe dentro del contenedor */
    width: 100%; /* Ancho al 100% */
    height: 120%; /* Altura al 100% */
    top: 0; /* Alinear arriba */
    left: 0; /* Alinear a la izquierda */
}

.viñetas {
    margin-top: 80px; /* Ajusta el valor según sea necesario */
}

.viñetas {
    position: relative;
    top: -10px; /* Cambia este valor según sea necesario */
    left: 200px; /* Cambia este valor según sea necesario */
    justify-content: left;
}

.servicios-section {
    position: relative;
    top: 40px; /* Cambia este valor según sea necesario */
    left: -90px; /* Cambia este valor según sea necesario */
}

/* Agregar fondo y cambiar color del texto a blanco */
.Apartados {
    background-color: #fff; /* Color de fondo */
    color: #38b3c3; /* Color del texto */
}

.titulo__apartado{
    font-size: 2.5em;
    color:#000
}

.servicios-section {
    text-align: justify;
    text-align-last: justify;
}

.servicios_generales {
    text-align: center;
    margin-top: 160px; /* Puedes ajustar este valor según sea necesario */
  justify-content:center;
  margin-left: 450px;
  font-size: 60%;
}

.soytexto {
    font-weight: normal;
}

/* pagina de confirmacion etilos*/
.container-confirmacion {
    margin-top: 100px; /* Agrega un margen superior más grande */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center; /* Centra el contenido horizontalmente */
    
}

.header--confi{
    background-image: url(../img/BG3.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 14vh;
    display: flex;
    align-items: center;
    background-position: center calc(25% - 20px); /* Ajusta la posición de la imagen de fondo */
}

#mensaje-confirmacion {
    display: none;
}

#mi-formulario:valid #mensaje-confirmacion {
    display: block;
}


/**SERVICIOS DIMENSIONES 980**/


/* Otras reglas CSS... */

/* Media query para pantallas con un ancho máximo de 980px, incluyendo iPads y tablets */


@media (max-width: 980px) {
    
    .servicios_generales {
        display: none;
    }

    .titulo__apartado {
        text-align: center; /* Centrar el texto en dispositivos con ancho máximo de 980px */
        margin-left: 20px; /* Ajustar el margen izquierdo */
        margin-right: 20px; /* Ajustar el margen derecho */
        font-size: 1.5em; /* Reducir el tamaño de la fuente */
    }

    .soytexto2 {
        display: none;
    }

    .soytexto1 {
        width: 90%; /* Ajustar el ancho del texto */
        margin: 0 auto; /* Centrar el bloque de texto */
        text-align: justify; /* Justificar el texto */
        padding: 10px; /* Añadir algo de padding para mejor legibilidad */
    }

    .viñetas {
        width: 90%; /* Reducir el ancho del contenedor al 90% en dispositivos con ancho máximo de 980px */
        margin: 0 auto; /* Centrar el contenedor horizontalmente */
    }
    
    .Apartados {
        display: flex; /* Usa flexbox para el posicionamiento */
        flex-direction: column; /* Organiza los elementos en columnas */
        align-items: center; /* Centra los elementos horizontalmente */
        text-align: center; /* Centra el texto en el contenedor */
    }

    .titulo__apartado,
    .soytexto1,
    .servicios-section {
        width: 90%; /* Establece el ancho al 90% del contenedor padre */
        margin: 20px auto; /* Centra los elementos horizontalmente con un margen superior e inferior de 20px */
    }
    
    .titulo__apartado,
    .soytexto1 {
        transform: translateX(-200px); /* Mueve los elementos 20px hacia la izquierda */
    }


    .video-container {
        transform: translateX(100px); /* Mueve el contenedor del video 20px hacia la derecha */
    }

    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    .soytexto1 {
        width: 100%; /* Ocupa todo el ancho disponible */
        margin: 0 auto; /* Centra el bloque de texto */
        text-align: justify; /* Justifica el texto */
        padding: 10px; /* Añadir padding para mejor legibilidad */
        font-size: 0.9em; /* Ajusta el tamaño de la fuente */
        letter-spacing: 0.5px; /* Ajusta el espaciado de letras */
        word-break: break-word; /* Permite el corte de palabras */
        hyphens: auto; /* Habilita la división de palabras */
    }

    .viñetas {
        width: 90%; /* Reduce el ancho del contenedor al 90% en dispositivos móviles */
        margin: 0 auto; /* Centra el contenedor horizontalmente */
    }


    .servicios-section {
        width: 90%; /* Ajusta el ancho al 90% del contenedor padre */
        margin: 0 auto; /* Centra el video */
        transform: translateY(-100px); /* Ajusta este valor según sea necesario */
    }


    .menu .menu-esquina {
        width: 70px !important; /* Ajusta el tamaño del logo */
        height: auto !important; /* Mantiene la proporción del logo */
    }

/** CAMBIOS EN LOS NAVBAR **/
.header-txt--trabajando {
    display: none;
}
.header-txt--empresa{
    display: none;
}
.somos {
    display: none;
}



.col p {
    font-size: 0.875em; /* Ajusta el tamaño de fuente según sea necesario */
    text-align: left; /* Justifica el texto hacia la derecha */
}

.col {
    width: 60%; /* Ajusta el ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

.bi-shield-check {
    margin-right: 20px; /* Ajusta la cantidad de espacio que deseas agregar a la derecha del icono */
}
.subtexto .col-auto {
    position: relative;
    right: -50px; /* Ajusta la cantidad de espacio que deseas mover el icono hacia la derecha */
}
}


.movetitle {
    align-items: center;
    transform: translateX(-7%)
    

}


/* DIMENSIONES DE BANNER SERVICIOS EN TELEFONO*/
@media (max-width: 980px) {
    .header-institucional {
        background-position: center center; /* Ajusta la posición de la imagen de fondo */
    }

    .baños-banner {
        background-position: left center; /* Ejemplo de ajuste con background-position */
    }

    .industrial-banner {
        background-position: 60% center; /* Ejemplo de ajuste con background-position */
    }

    .mecanizado-banner {
        background-position-x: 30%; /* Mueve la imagen de mecanizado más a la derecha */
        background-position-y: 50%; /* Mueve la imagen de mecanizado hacia abajo */
    }
}
/* CIERRE SERVIVIOS**/



/*  BANNER NOTICIAS**/


    /* Otros estilos globales y específicos... */

@media (max-width: 980px) {
    /* Estilos para pantallas de 980px o menos */
    .header-content.container {
        padding: 20px;
        text-align: center;
    }

    .header-txt--trabajando h1 {
        font-size: 1.5rem;
    }

    .ntc-txt p {
        font-size: 1rem;
        padding: 10px;
    }

    .post-list .post {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .post-header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .post-img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .post-body {
        width: 90%;
        padding: 10px;
        text-align: center;
    }

    .noticetitle {
        font-size: 1.2rem;
    }

    .post-body p {
        font-size: 0.9rem;
    }

    .post-link {
        font-size: 0.9rem;
        margin-top: 10px;
    }

    .footer-noticias p {
        font-size: 0.8rem;
        text-align: center;
    }
}

/** css noticias para cada apartado (A REVISION ABSOLUTA) ESTA AFECTANDO A LOS SERVICIOS**/

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
}

.cntx {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Estilos para el artículo principal */
.principaldetalle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.noticia-img-grande-detalle {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.principaldetalle span,
.principaldetalle h2,
.principaldetalle p {
    margin: 10px 0;
}

/* Estilos para el aside de otras noticias */
.otras-noticias-detalle {
    margin-top: 20px;
}

.otras-noticias-titulo-detalle {
    margin-bottom: 20px;
}

.targenot {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tarjet-detalle {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
}

.tarjet-img-detalle {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.tarjet-fecha-lugar-detalle,
.tarjet-titulo-detalle,
.tarjet-link-detalle {
    display: block;
    margin: 10px 0;
    text-align: center;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
    .targenot {
        flex-direction: column;
    }

    .tarjet-detalle {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .cntx {
        padding: 10px;
    }
}



/** CODIGO EJEMPLOS*/
@media (max-width: 980px) {
    .capa {
        display: none;
    }

}
.capa {
    display: none;
}

/*CAMBIOS FINALES**/

.testi-txt img {
    width: 120px; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
  
}
.otras-noticias-titulo-detalle {
    color: #1B293A;
}
.noticia-fecha-lugar-detalle {
    color: #1B293A;
}


.header-noticias-generals{
    background-image: url(../img/noticas2.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-position: center calc(50% - -100px); /* Ajusta la posición de la imagen de fondo */
}