@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');




:root{
    --bg : #F5F4EA;
    --marron : #3A1C10;
    --bg22 : #F4F3EE;
    --letra : #404042;
    --naranja_fuerte: #F27A19;
    --rojo_2: #DB0B1B;;
    --blanco: #FFFFFF ;
    --borde:#A0A094;





}

html {
    scroll-behavior: smooth;
    background-color: var(--bg);
  }

body {
    font-family: "Noto Sans";
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--bg);
    background-color: var(--blanco);
    color: var(--letra);
    overflow-x: hidden;
    
}
.iframe-container {
            width: 50%;
            margin: 10px auto;
            margin-top: 50px;
             background-color: var(--bg);
        }
        
        
/*LOADER*/
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg); /* Fondo sólido del loader */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000000000000; /* Asegura que el loader esté encima del contenido */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    animation: break-apart 1.3s ease-out forwards; 
    animation-delay: 0.4s; /* Retrasa el inicio del achicamiento hasta que el martillo termine su animación */
}

/* Estiliza el martillo */
.loader img {
    width: 80px !important;
    height: auto;
    color: var(--rojo_2); /* Color del martillo */
    animation: hammer-hit 0.9s ease-out forwards; /* Ajusta la duración para que sea más rápido */
}

/* Animación del martillo golpeando y volviendo */
@keyframes hammer-hit {
    0% {
        transform: rotate(0deg); /* Empieza en 0 grados */
        opacity: 1; /* Totalmente visible */
    }
    25% {
        transform: rotate(40deg); /* Gira 90 grados (horizontal) */
        opacity: 1; /* Totalmente visible */
    }
    50% {
        transform: rotate(0deg); /* Regresa a la posición vertical */
        opacity: 1; /* Totalmente visible */
    }
    100% {
        transform: rotate(0deg); /* Mantiene la posición vertical */
        opacity: 0; /* Desaparece */
    }
}

/* Efecto de romper en pedazos */
@keyframes break-apart {
    0% {
        background: var(--bg); /* Fondo sólido inicial */
        clip-path: circle(100% at 50% 50%); /* Empieza como un círculo que cubre toda la pantalla */
    }
    100% {
        background: var(--bg); /* Mantiene el fondo sólido al final */
        clip-path: circle(0% at 50% 50%); /* Contrae el fondo a un círculo pequeño en el centro */
    }
}





/*HEADER*/
header {
    
    height: 120px;
    background: var(--bg);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 5px;
    margin: 0; 
    
    
}

#header2{
    background-color: var(--bg);
    width: 100%;
    height: 120px;
    display: flex;
    justify-content:space-between;
    align-items: end;
    flex-direction: row;
    position: relative;
    transition: all 0.2s ease-in-out;
    z-index: 1000;
}

#header2.fixed {
    position: fixed;
    top: 0;
    padding-top: 0;
    width: 80%;
    right: 10%;
    margin-top: 30px;
    height: 80px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo semi-transparente */
    backdrop-filter: blur(7px); /* Efecto glass */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    z-index: 1000;
    transition: all 0.5s ease-in-out;
}

#logotipo{
    width: 300px;
    padding-left: 50px;
    justify-content: left;
    display: flex;
    align-items: center;
    height: 100%;
}

#logo_header{
    height: auto;
    width: 100%;
    cursor: pointer;  
    transition: all 0.1s ease-in-out;
}

#logo_header.pajaro-fuerte:hover {
    animation: hammer-hit2 0.6s ease-out forwards;
}

@keyframes hammer-hit2 {
    0% {
        transform: rotate(0deg); /* Empieza en 0 grados */
    }
    25% {
        transform: rotate(40deg); /* Se inclina como si picara */
    }
    50% {
        transform: rotate(0deg); /* Regresa a la posición original */
    }
    100% {
        transform: rotate(0deg); /* Mantiene la posición original */
    }
}



/*navegacion*/
/*contacto*/
#navegacion{
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    transition: all 0.1s ease-in-out;
}

#contactos_header {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;
    height: 25%;
    gap: 20px;
    transition: all 0.1s ease-in-out;
}

#contactos_header.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}


.contact-item {
    display: flex;
    align-items: center; 
    cursor: pointer;
}
.contact-item span:hover {
    color: var(--naranja_fuerte);
}

.contact-item i {
    font-size: 20px; 
    margin-right: 8px; 
    color: var(--naranja_fuerte); 
}

.contact-item span {
    font-size: 20px; 
    color: var(--letra); 
}



/*nav*/

#nav_header{
    display: flex;
    justify-content: right;
    align-items:center;
    width: 100%;
    height: 75%;
}





#nav_header nav{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
#ul_navbbar{
    list-style: none;
    text-align: right;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: var(--rojo_2);
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    line-height:24px;

    text-align: center;
    position: relative;
    transition: color 0.3s ease;
    overflow: hidden; 

    padding-top: 5px;
    padding-bottom: 5px;
}

nav ul li a::before, nav ul li a::after {
    content: "";
    position: absolute;
    width: 45px;
    z-index: 100;
    height: 2px;
    background-color: var(--naranja_fuerte);
    transition: transform 0.5s ease;
}

nav ul li a::before {
    top: 0;
    height: 2px;
    left: -4px; /* Comienza fuera del enlace */
    transform: scaleX(0);
    transform-origin: left;
}

nav ul li a::after {
    bottom: 0;
    height: 2px;
    right: -4px; /* Comienza fuera del enlace */
    transform: scaleX(0);
    transform-origin: right;
}

nav ul li a:hover::before {
    transform: scaleX(1); /* Expande el borde para cubrir la mitad superior */
}

nav ul li a:hover::after {
    transform: scaleX(1); /* Expande el borde para cubrir la mitad inferior */
}

nav ul li a:hover {
    color: var(--naranja_fuerte);
}



/*HERO*/
#hero{
    min-height: 100vh;
    width: 100%;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    display: flex;
    background: var(--bg);
    padding-bottom: 50px;
}
#textos_hero{
    width: 80%;
    height: max-content;
    display: flex;
    justify-content:start;
    align-items: center;
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 50px;
    gap: 5px;

}

#bienvenidos_hero{
    color: var(--naranja_fuerte);
    font-size: 24px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 5px;
    margin-bottom: 0;

}

h1{
    color: var(--letra);
    font-size: 54px !important;
    font-weight: 700;
    line-height: 56px;
    text-align: center;
    margin: 5px;
    margin-top: 0;

}

#textos_hero img{
    width: auto;
    height:300px;

}
#boton_hero {
    background-color: var(--naranja_fuerte);
    color: var(--blanco);
    width: 320px;
    height: 60px;
    border-radius: 8px;
    opacity: 1; /* Cambié de 0px a 1 para que sea visible */
    margin: 5px;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0px 4px 6px rgba(75, 74, 74, 0.3); /* Sombra por defecto */
    transition: background-color 0.9s ease, box-shadow 0.9s ease; /* Transición suave */
}

#boton_hero:hover {
    background-color: var(--bg); /* Cambia el color de fondo al hacer hover */
    color: var(--naranja_fuerte);
    box-shadow: 0px 0px 10px rgba(75, 74, 74, 0.3);

}



#imagenes_hero{
    width: 100%;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.img_hero{
    width: 22%;
    position: absolute;
    border-radius: 8px;
    transition: opacity 1s ease, transform 0.8s ease, z-index 0.8s ease; 
}

#img_hero1{
    height: 70%;
    bottom: 0;
    left: 0;
   
    background-image: url(../img/herramientas-manuales-01-jpg.webp);
    background-size: 150%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    background-position-x: center;
    background-repeat: no-repeat;
    z-index: 1;
}

#img_hero2{
    height: 80%;
    bottom: 5%;
    left: 20%;
     background-image: url(../img/hero_1.png);  
    background-size: 110%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    z-index: 2;
}
#img_hero3{
    height: 90%;
    bottom: 10%;
    
    background-image: url(../img/sanagustin.jpeg);
    background-size: cover;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 3;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}
#img_hero4{
    height: 80%;
    bottom: 5%;
    right: 20%;
    background-image: url(../img/Frame\ 48.png);
    background-size: 150%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    background-position: center center;
  
    background-repeat: no-repeat;
    z-index: 2;
}
#img_hero5{
    height: 70%;
    bottom: 0%;
    right: 0;
    background-image: url(../img/Frame\ 46.png);
    background-size: 200%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    background-position-x: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Todas las imágenes inicialmente ocultas */
#img_hero1, #img_hero2, #img_hero3, #img_hero4, #img_hero5 {
    opacity: 0; /* Inicialmente invisibles */
}

/* Cuando se agrega la clase 'fade-in', las imágenes aparecerán */
.fade-in {
    opacity: 1 !important;
}

#img_hero1:hover {
    z-index: 10; 
    transform: scale(1.05); 
}

#img_hero2:hover {
    z-index: 10;
    transform: scale(1.05);
}

#img_hero3:hover {
    z-index: 10;
    transform: scale(1.05);
}

#img_hero4:hover {
    z-index: 10;
    transform: scale(1.05);
}

#img_hero5:hover {
    z-index: 10;
    transform: scale(1.05);
}






/*CLIENTES*/
#client{
    justify-content: start;
    align-items: center;
    flex-direction: column;
    display: flex;
    background: linear-gradient(180deg, #F5F4EA 0%, #FFFFFF 22.86%);
    gap: 20px;
    margin: 0;
    padding: 0;
    align-self: stretch;
    padding-top: 150px;
    padding-bottom: 50px;


}
/*titulo y subtitulo*/
#textos_clientes{
    width: 80%;
    height: max-content;

}
#textos_clientes h2{
    margin: 0;
    margin-bottom: 10px;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
    color: var(--letra);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--Typescale-Display-Large-Letter-Spacing, -0.25px);
}
#textos_clientes p{
    color: var(--letra);
    font-size: 20px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Small-Line-Height, 22px); 
    margin: 0;
}
#cards_clientes{
    width: 80%;
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 40px;
    margin-top: 20px;
}



/*letra y pajarito*/
.card_cliente{
    display: flex;
    width: 200px;
    height: 120px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background-color: white;
    border-radius: 18px;
    padding: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.5s ease;
    
}
.card_cliente h4{
    margin: 0;
    color: var(--naranja_fuerte);
    font-size: 22px;
    font-weight: 500;
    height: 80%;
    gap: 20px;
    line-height: var(--Typescale-Display-Medium-Line-Height, 24px); 
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s ease;
    
}
.card_cliente h4 img{
    height: 40px;
    width: auto;
}

.card_cliente:hover{
    background-color: transparent;
    border: 1px solid var(--rojo_2);
}

.card_cliente:hover h4{
    color:var(--rojo_2);
    
}



/*cards clientes*/
#div_cards_clientes{
    padding-top: 50px;
    padding-bottom: 150px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fila_clientes{
    display: flex;
    width: 90%;
    height: 550px;
    align-items: center;
    flex-direction: row;

    overflow: hidden;
   
}



#fila_clientes_1{
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    
}

#fila_clientes_5{
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}

#fila_clientes_2 .fila_imagen{
    order: 2;
}
#fila_clientes_4 .fila_imagen{
    order: 2;
}


.fila_imagen{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    
    
}
.fila_imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fila_imagen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); 
    pointer-events: none;
}














.fila_textos{
    width: calc(50% - 200px);
    height:  calc(100% - 100px);
    display: flex;
    padding: 50px 100px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Typescale-Headline-Large-Line-Height, 40px);
    flex-shrink: 0;
    background-color: var(--bg);
}
.fila_textos div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.fila_textos h4{
    margin: 0;
    text-transform: uppercase;
    color: var(--Secondary, #DB0B1B);
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typescale-Headline-Large-Line-Height, 40px); 


}

.fila_textos p{
    color: var(--letra);
    margin: 0;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Large-Line-Height, 28px); /* 127.273% */


}
.fila_textos button{
    display: flex;
    width: 227px;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: var(--rojo_2);
    color: var(--Schemes-On-Primary, #FFF);
    height: 60px;
    font-size: 18px;

    font-weight: 500;
    line-height: var(--Typescale-Title-Large-Line-Height, 28px); /* 155.556% */

    
    border: 1px solid transparent;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}
.fila_textos button:hover {
    background: transparent;
    color: var(--rojo_2);
    font-weight: 700;
    border: 1px solid var(--rojo_2);


}













/*SECCION SERVICIOS*/
#servicios{
    width: 100%;
    padding-top: 150px;
    padding-bottom: 250px;
   background-color: var(--blanco);
 background: linear-gradient(180deg, #F5F4EA 100%, #FFFFFF 10.86%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#servicios_div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    width: 80%;
}
#titulo_servicios{
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
}
#titulo_servicios h2{
    margin: 0;
    margin-bottom: 10px;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
    color: var(--letra);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--Typescale-Display-Large-Letter-Spacing, -0.25px);
}

#titulo_servicios p{
    color: var(--letra);
    font-size: 20px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Small-Line-Height, 22px); 
    margin: 0;
}

#contenido_servicios{
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; 
}



.card_servicios{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 200px;
    padding: 10px 0px;
    border-radius: 16px;
    background: transparent;
    width: 100%;
}

#card_medio_servicios{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    border-radius: 16px;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    grid-column: span 2;
    gap: 16px;
}

#fondo_card_medio{
    display: none;
}

.titulo_card_s{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding-left: 5%;
    gap: 16px;
}
.titulo_card_s div, #card_medio_servicios div{
    background-color: var(--rojo_2);
    border-radius: 50%;
    min-width:100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.titulo_card_s img, #card_medio_servicios div img{
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    z-index: 1;
}
.titulo_card_s h4, #card_medio_servicios h4{
   margin: 0;
   color: var(--On-surface, #1E1E1B);

    font-size: 28px;
    font-style: normal;
    align-self: stretch;
    font-weight: 600;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    text-transform: uppercase;
}
#card_medio_servicios h4{
    color: var(--On-surface, #1E1E1B);

}

.texto_card_s{
    width: 80%;
    padding-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.texto_card_s p{
    margin: 0;
    align-self: stretch;
    text-align: center;
    color: var(--Surface-variant, #636363);
    font-family: "Noto Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: var(--Typescale-Title-Large-Line-Height, 28px); /* 127.273% */
}

#card_medio_servicios p{
    margin: 0;
    align-self: stretch;
    color: var(--Surface-variant, #636363);

    font-family: "Noto Sans";
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Large-Line-Height, 28px); 
    z-index: 1;
    
}




#card_contacto_servicio{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
   
    background-color: var(--bg);
    height: 200px;
    border-radius: 16px;
    border: 1px solid var(--borde);
    width: 60%;
    padding-left: 20%;
    padding-right: 20%;
    grid-column: span 2;
    gap: 16px;
}
#card_contacto_servicio button{
    display: flex;
width: 227px;
padding: 18px;
justify-content: center;
align-items: center;
gap: 10px;
outline: 0;
border: none;
cursor: pointer;
border-radius: 50px;
background: var(--rojo_2);
color: #FFF;
font-family: "Noto Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: var(--Typescale-Title-Large-Line-Height, 28px); /* 140% */
transition: all 0.3s ease;
 }
 #card_contacto_servicio button:hover{
    background: transparent;
    border: 1px solid var(--rojo_2);
    color: red;
 }


#card_contacto_servicio h4{
   margin: 0;
   color: var(--letra);
    font-family: "Noto Sans";
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typescale-Display-Small-Line-Height, 44px); /* 122.222% */
}










/*MARCAS*/
#marcas{
    padding-top: 100px;
    width: 100%;
    padding-bottom: 100px;
    background: linear-gradient(360deg, #F5F4EA 0%, #FFFFFF 50.86%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}


#izq_marcas{
    width: 80%;
    height: 148px;
    padding: 0px 20px 0px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: var(--blanco);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
#izq_marcas h4{
    margin: 0;


}

h
#izq_marcas p{
    color: var(--letra);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Small-Line-Height, 22px); 
    margin: 0;
    

}

#dcha_marcas{
    width: 100%;
    height: 200px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background: var(--blanco);
    display: flex;
    justify-content: center;
    align-items: center;
  
}




  #image-scroller{
    display: flex;
    display: grid;
    grid-gap:  40px;
    height: 150px;
    gap:  40px;
    grid-auto-flow: column;
    overflow: hidden;
  }
  
  @keyframes scroller {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% + -40px));
    }
  }
  

  #image-scroller ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: grid;
    grid-gap:  40px;
    gap: 40px;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    grid-auto-columns: 15rem;
    animation: linear 30s scroller infinite;
  }
  
  #image-scroller ul li{
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #image-scroller img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


#banner_san_agustin{
    padding-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#banner_san_agustin img{
    margin: 0;
    width: 100%;
    height: auto;
}



/*SECCION EMPRESA*/
#empresa{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--blanco);
    gap: 60px;
    padding-top: 200px;
    padding-bottom: 100px;
}
#empresa_1{
    display: flex;
    flex-direction: row;
    width: 80%;
    gap: 24px;
    justify-content: center;
    align-items: center;
}
#empresa_1_img{
    width: 50%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg);
    border-radius: 16px;
    box-shadow: 0px 0px 10px rgba(75, 74, 74, 0.3);

}

#empresa_1_img img{
    width: auto;
    height: 80%;

}


#empresa_1_texto{
    width: 50%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#empresa_1_texto div{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#empresa_1_texto h2{
    margin: 0;
    width: 100%;
    margin-bottom: 10px;
    line-height: 42px;
    text-transform: uppercase;
    color: var(--letra);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--Typescale-Display-Large-Letter-Spacing, -0.25px);
}
#empresa_1_texto p{
    width: 100%;
    color: var(--letra);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Small-Line-Height, 24px); 
    margin: 0;
}
#empresa_1_texto button{
    width: 100%;
    background-color: var(--naranja_fuerte);
    color: var(--blanco);
    height: 60px;
    border-radius: 8px;
    opacity: 1; /* Cambié de 0px a 1 para que sea visible */
    margin: 5px;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0px 4px 6px rgba(75, 74, 74, 0.3); /* Sombra por defecto */
    transition: background-color 0.9s ease, box-shadow 0.9s ease; /* Transición suave */
}


#empresa_1_texto button:hover{
    background-color: var(--bg); /* Cambia el color de fondo al hacer hover */
    color: var(--naranja_fuerte);
    box-shadow: 0px 0px 10px rgba(75, 74, 74, 0.3);
}



#empresa_2{
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 24px;
    justify-content: center;
    align-items: center;
}
#empresa_2_cards{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.empresa_2_div{
    background-color: var(--bg);
    border-radius: 8px;
    display: flex;
    padding: 49px 20px;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 25%;
    flex-direction: column;
    gap: 10px;
    transition: all 0.5s ease;
    cursor: pointer;
    

}

.empresa_2_div:hover{
    background-color: var(--bg); /* Cambia el color de fondo al hacer hover */
    
    box-shadow: 0px 0px 10px rgba(75, 74, 74, 0.3);
}
.empresa_2_div:hover h5, .empresa_2_div:hover p{
    color: var(--naranja_fuerte);
}
.empresa_2_div h5{
    width: 100%;
    color: var(--letra);
    font-size: 24px;
    font-style: normal;
    text-align: center;
    font-weight: 700;
    line-height: var(--Typescale-Display-Small-Line-Height, 28px); 
    margin: 0;
    transition: all 0.5s ease;

}
.empresa_2_div p{
    width: 100%;
    color: var(--letra);
    font-size: 20px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Small-Line-Height, 24px); 
    margin: 0;
    transition: all 0.5s ease;
    

}



#empresa_2_familia h3{
    margin: 0;
    width: 100%;
    margin-bottom: 10px;
    line-height: 38px;
    text-transform: uppercase;
    color: var(--letra);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--Typescale-Display-Large-Letter-Spacing, -0.25px);
    text-align: center;
}





/*PRODUCTOS*/
#productos{
    width: 100%;
    padding-top: 100px;
    padding-bottom: 0px;
    background: linear-gradient(180deg, #F5F4EA 0%, #FFFFFF 5.86%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
}

#titulo_productos{
    width: 80%;
    flex-direction: column;
    display: flex;
    align-items: baseline;
}
#titulo_productos h2{
    margin: 0;
    margin-bottom: 10px;
    line-height: 42px;
    text-transform: uppercase;
    color: var(--letra);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--Typescale-Display-Large-Letter-Spacing, -0.25px);
}

#titulo_productos p{
    width: 600px;
    color: var(--letra);
    font-size: 20px;
    text-align: left;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Small-Line-Height, 22px); 
    margin: 0;
}

.div_productos{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 80%;
}

.div_1_titulo{
    display: flex;
    width: 731px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.div_1_titulo h3{
    margin: 0;
    color: var(--letra);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Headline-Large-Line-Height, 40px); /* 125% */
}

.div_1_titulo img{
    width: 256px;
    height: var(--Typescale-Display-Medium-Letter-Spacing, 4px);
}



.div_1_productos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.producto{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    transition: all 0.5s ease;
    cursor: pointer;
}

.producto:hover .titulo_producto{
    color: var(--naranja_fuerte);
    box-shadow: 0px 0px 10px rgba(75, 74, 74, 0.3);
  
}
/*
.producto:hover .imagen_producto{
    filter: drop-shadow(0px 0px 10px orange);
}*/

.titulo_producto{
    background-color: var(--bg);
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    color: var(--letra);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    height: 50px;
    line-height: var(--Typescale-Title-Medium-Line-Height, 22px); /* 133.333% */
    letter-spacing: var(--Typescale-Title-Medium-Letter-Spacing, 0.15px);
    transition: all 0.5s ease;
}

.imagen_producto{
    width: 100%;
    height:auto;
    max-height: 290px;
    border-radius: 8px;
    transition: all 0.5s ease;
    object-fit: contain;
}




.banner_producto{
    width: 100%;
    height: auto;
    border-radius: 8px;
}



/*CONTACTO*/
#contacto_redes_seccion{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}

#contacto_redes{
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 50%;
}
#contacto_redes_div{
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 57px;
    z-index: 5;
}


#titulo_contacto{
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

#titulo_contacto p{
    margin: 0;
    color: var(--On-surface, #1E1E1B);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typescale-Display-Small-Line-Height, 44px); /* 122.222% */
    text-transform: uppercase;
}

#redes_1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap:100px;
    flex-wrap: wrap;
    
}

.red_social{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    
}

.red_social div{
    padding: 5px;
    display: flex;
    width: 85px;
    height: 85px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
   

}

.red_social div img{
    width: 70px;
    height: 70px;
}

.red_social h5{
    margin: 0;
    color: #000;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--Typescale-Headline-Small-Line-Height, 25px); /* 133.333% */
}

.red_social a{
    margin: 0;
    text-decoration: none;
    outline: none;
    color: #000;
    text-align: center;

    /* Title Large */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Large-Line-Height, 18px); /* 127.273% */
}

.red_social:hover a{
    color: var(--rojo_2);
}.red_social:hover h5{
    color: var(--rojo_2);
}


/*MAPA Y RESEÑAS*/


#contacto{
    width: 100%;
    background-color: var(--blanco);
    justify-content: center;
    padding-top: 50px;
    display: flex;
    flex-direction: row;
    position: relative;
    height: 1000px;
    gap: 44px;

}
#contacto #fondo_svg{
    fill: var(--bg);
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 0;
}

#contacto_mapa{
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;

    width: 1000px;
    z-index: 1;
    height: 100%;
    gap: 16px;
}

#mapa{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    display: inline-block;
    order: 2;
}
#mapa img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    z-index: 1;
    transition: filter 0.4s ease; /* Transición suave */
}

#mapa img:hover {
    filter: brightness(0.5); /* Oscurece la imagen al 50% */
}

.tooltip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--blanco); /* Fondo oscuro */
    color: var(--rojo_2);
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    text-align: center;
    font-size: 22px;
    width: 100%;
    white-space: nowrap; /* Evita que el texto haga wrap */
    opacity: 0; /* Inicialmente, el tooltip es invisible */
    pointer-events: none; /* Evita que interfiera con el mouse */
    transition: all 0.4s ease; /* Animación suave para la aparición */
    z-index: 100; /* Asegura que esté por encima de otros elementos */
}

#mapa:hover .tooltip {
    opacity: 1; 
    transform: translateX(-50%); 
}

@keyframes slideIn {
    from {
        transform: translateX(-50%) translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0px);
        opacity: 1;
    }
}

#mapa:hover .tooltip {
    animation: slideIn 0.4s forwards; /* La animación para mostrar el tooltip */
}










#encontranos_en{
    width: calc(100% - 40px);
    display: flex;
    padding: 20px;
    padding-top: 0;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    border-radius: 10px;
    order: 1;

}

#encontranos_en h4{
    margin: 0;
    margin-left: 10px;
    color: var(--letra);
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Display-Medium-Line-Height, 52px); /* 115.556% */
    letter-spacing: var(--Typescale-Display-Medium-Letter-Spacing, 0px);
    text-transform: uppercase;
    z-index: 1;
}

#encontranos_en div{
    display: flex;
    align-items: center;
    gap: 10px;
}



#encontranos_en div p{
    margin: 0;
    color: var(--letra);
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Medium-Line-Height, 24px); /* 150% */
    letter-spacing: var(--Typescale-Title-Medium-Letter-Spacing, 0.15px);
}

#encontranos_en div a, #mapa div a{
    color: var(--rojo_2);
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Medium-Line-Height, 24px); /* 150% */
    letter-spacing: var(--Typescale-Title-Medium-Letter-Spacing, 0.15px);
    text-decoration-line: underline;
    cursor: pointer;
    margin-left: 10px;
}





#contacto_reseñas{
    z-index: 2;
    width: 430px;
    display: flex;
    flex-direction: column;

    
    gap: 40px;
    position: relative;
    overflow-y: auto;
 

}
.div_card_reseñas{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    
}



.div_card_1{
    display: flex;
    align-items: center;
    gap: 26px;
}
.div_card_1 img{
    height: 100%;
}
.div_card_1 div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.p_card_1{
    margin: 0;
    color: #A7A49B;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
    letter-spacing: 0.1px;
}
.p_card_2{
    margin: 0;
    color: #A7A49B;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 171.429% */
    letter-spacing: 0.1px;
}


.div_card_2{
    display: flex;
    align-items: center;
    gap: 16px;
}
.div_card_2 div{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.div_card_2 div svg{
    width: 24px;
    height: 24px;
}

.div_card_2 p{
    margin: 0;
    color: #A7A49B;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 171.429% */
    letter-spacing: 0.1px;
}


.div_card_3 p{
    margin: 0;
    color: #A7A49B;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height:22px; /* 133.333% */
}





/*FOOTER*/
footer{
    background-color: var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 133.128px 240px 26px 240px;
    gap: 50px;

}


#footer_div_1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Typescale-Title-Medium-Line-Height, 24px);
}

#footer_div_1 img{
width: 300px;
height: auto;
}


#footer_div_1 p{
    margin: 0;
    color: var(--On-surface, #1E1E1B);
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Medium-Line-Height, 24px); /* 150% */
    letter-spacing: var(--Typescale-Title-Medium-Letter-Spacing, 0.15px);
    text-transform: uppercase;
}


#footer_redes{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 20px;
}
#footer_redes img{
    width: var(--Typescale-Title-Medium-Line-Height, 32px);
    height: var(--Typescale-Title-Medium-Line-Height, 32px);
    cursor: pointer;
}

#copy{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 10px;
    border-top: 1px solid #a7a49b69;
}

#copy p{
    margin: 0;
    color: var(--On-surface,#a7a49bcd);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: var(--Typescale-Title-Medium-Line-Height, 24px); /* 150% */
letter-spacing: var(--Typescale-Title-Medium-Letter-Spacing, 0.15px);
}


/*WHATSAPP*/
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10000000000000;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}

.whatsapp-btn i {
    color: #fff;
    font-size: 50px;
}

/* Chat emergente */
.whatsapp-chat {
    position: fixed;
    bottom: 105px;
    right: 25px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 280px;
    font-family: Arial, sans-serif;
    z-index: 1000000000;
}

.whatsapp-chat::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
}

.whatsapp-chat p {
    margin: 0;
    color: #333;
    text-align: center;
    width: 100%;
}

.whatsapp-chat span {
    color: #25D366;
    font-weight: bold;
}

/* Botón de cerrar */
.close-chat {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    font-weight: 600;
}

.close-chat:hover {
    color: #333;
}







/*SIDEBAR*/
.burger {
    display: none;
    font-size: 20px;
    cursor: pointer;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.342);
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    top: 30px;
    color: var(--naranja_fuerte);
    z-index: 2;
    border-radius: 10px;
  }
  .burger-icon {
    transition: transform 1s ease;
}

.burger.open .burger-icon {
    transform: rotate(90deg);
    transition: transform 1s ease;
}

  /* Estilos de la sidebar */
  .sidebar {
    display: none;
    width: 250px;
    height: 100%;
    background-color: var(--bg);
    box-shadow: 0 0 30px #25252559;
    color: white;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -250px; /* Oculta la sidebar a la derecha */
    transition: right 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
    padding-top: 60px;
  }
.sidebar h2{
    color: var(--letra);
    font-size: 22px !important;
}
  /* Estilos cuando la sidebar está visible */
  .sidebar.active {
    right: 0; /* La sidebar se desplaza hacia la vista */
  }






/* Estilos Responsive */
@media (min-width: 1201px) and (max-width: 1554px) {
    
    .card_servicios {

    height: 140px !important;
    }
    #mapa img {
    width: auto !important;
    height: 500px !important;
}
    #encontranos_en {
        height: 90px !important;
        gap: 10px !important;
        width: 70%;
    }


   header {
        height: 70px !important;
    }
    h2{
        font-size:26px !important;
        margin: 0px !important;
    }
    #hero{
        padding-bottom: 0 !important;
        min-height: max-content !important;
    }
    #header2 {
        height: 70px !important;
        gap: 10px !important;
    }
    #header2.fixed {
        width: 60% !important;
        right: 20% !important;
        margin-top: 30px !important;
        height: 50px !important;
        border-radius: 12px;
    }


        #logotipo {
        height: 100% !important;
        width: auto;
    }
    .contact-item i {
        font-size: 14px !important;
    }
    .contact-item span {
        font-size: 14px !important; 
    }
    #ul_navbbar {
        gap: 15px !important;
    }
    nav ul li a {
        font-size: 16px !important;
    }


#logo_header {

    height: 25px !important;
}

    #textos_hero {
        padding-top: 20px !important;
        padding-bottom: 20px !important; 
    }

    #bienvenidos_hero {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    h1 {
        font-size: 40px !important;
        line-height: 42px !important;
    }


    #textos_hero img {
        width: auto;
        height: 250px !important;
    }
    #boton_hero {
        width: 250px !important;
        height: 40px !important;
    }
    #imagenes_hero {
        height: 300px !important;
    }

    #client {
        padding-top: 100px !important;
    }
    .card_cliente {

       justify-content: center !important;
       height: 80px !important; 
    }
    #cards_clientes {
        width: 75% !important;
        gap: 20px !important;  
    }

#div_cards_clientes {

    padding-bottom: 0 !important;
}
    .card_cliente h4 {

        font-size: 16px !important;
        gap: 10px !important;
    }

    .fila_clientes {
        height: 300px !important;
        width: 75% !important;
    }


    .fila_textos h4 {
        font-size: 20px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 22px) !important;
    }

    .fila_textos p {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 18px) !important;
    }
    .fila_textos button {
        height: 40px !important;
          font-size: 16px !important;
    }

    .fila_textos {
        width: calc(50% - 100px) !important;
        height: calc(100% - 50px) !important;
        padding: 25px 50px !important;
    }








.div_1_titulo h3 {
    font-size: 18px !important;
    line-height: var(--Typescale-Headline-Large-Line-Height, 22px) !important;
}
.div_1_titulo img {
    height: var(--Typescale-Display-Medium-Letter-Spacing, 1px)!important;}

    #banner_san_agustin {
        background: var(--blanco);
        overflow: hidden !important ;
    }
    #banner_san_agustin img {
        width: 130% !important;
    }

    #card_medio_servicios {
        gap: 10px !important;
        height: 140px !important;
    }

    #card_contacto_servicio {
        width: 80% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        gap: 10px !important;
         height: 140px !important;
    }



    .titulo_card_s div, #card_medio_servicios div {
        min-width: 6px !important;
        min-height: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }
    .titulo_card_s img, #card_medio_servicios div img {
        width: 40px !important;
        height: 40px !important;
    }


    .titulo_card_s h4, #card_medio_servicios h4 {
        font-size: 18px;
        height: 20px;
    }

.texto_card_s p {
    font-size: 16px;
}
#card_medio_servicios p {
     font-size: 16px;
}

#card_contacto_servicio h4 {
    font-size: 24px !important;
    line-height: var(--Typescale-Display-Small-Line-Height, 28px) !important;
}

#card_contacto_servicio button {
  
    padding: 14px !important;
    font-size: 18px !important;
    line-height: var(--Typescale-Title-Large-Line-Height, 20px) !important;
}

    .div_productos {
        width: 90%;
    }
    #servicios {
    padding-bottom: 100px !important;
}
    .titulo_producto {
        font-size: 12px !important;
        height: 40px !important;
    }

    .imagen_producto {
        width: 75% !important;
    }
    #empresa {
        gap: 30px !important;
    }
    #empresa_1_img {
        height: 400px !important;
    }

    #empresa_1_texto div {
        width: 80% !important;
    }

    #empresa_1_img img {
        height: 65% !important;
    }
    #empresa_1_texto button {
        height: 40px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    #empresa_1_texto p {
        font-size: 16px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    #empresa_2 {
        width: 80% !important;
    }
    #empresa_2_familia h3 {
        font-size: 20px !important;
    }
    
    
    
    
    .red_social div {
    width: 40px !important;
    height: 40px !important;
    }

#titulo_contacto p {

    font-size: 28px !important;
    line-height: var(--Typescale-Display-Small-Line-Height, 30px) !important;
}

    .empresa_2_div {
        justify-content: start !important;
        align-items: center !important;
        height: 60px !important;
        padding: 15px  10px !important;
    }
    .empresa_2_div h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    .empresa_2_div p {
        font-size: 14px !important; 
        line-height: var(--Typescale-Display-Small-Line-Height, 14px) !important;  

    }

    #contacto_redes_div {
        gap: 30px !important;
    }
    #contacto_redes {
        width: 90% !important;
    }

    #redes_1 {
        width: 60% !important;
        gap: 40px !important;
    }

   .red_social div img {
        width: 35px !important;
        height: 35px !important;
    }

    #encontranos_en div p {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Medium-Line-Height, 20px) !important;
    }


    .red_social h5 {
        font-size: 16px !important;
        line-height: var(--Typescale-Headline-Small-Line-Height, 18px) !important;
    }
    .red_social a {
        font-size: 14px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 16px) !important;
    }










    #encontranos_en h4 {
        font-size: 28px !important;
        line-height: var(--Typescale-Display-Medium-Line-Height, 30px) !important;
    }
  


    #contacto {
        height: max-content !important;
        gap: 20px !important;
        align-items:center !important;
    }
    #contacto_mapa {
        width: 67% !important;
    }
    #contacto_reseñas {
        width: 23% !important;
        height: 600px !important;
    }
    div_card_reseñas {
        gap: 10px !important;
        height: max-content !important;
        width: calc(100% - 10px);

    }

    .div_card_1 {
        gap: 10px !important;
    }
    .p_card_1 {
        font-size: 16px !important;
        line-height: 18px !important;
        letter-spacing: normal !important;
        text-align: left !important;
    
    }

    .div_card_2 p {
        font-size: 12px !important;
        line-height:14px !important;
        letter-spacing: normal !important;
    }
    .div_card_1 img {
        height: 40px !important;
    }
    .div_card_2 div svg {
        width: 16px  !important;
        height: 16px  !important;
    }
    .div_card_1 div {
        gap: 5px !important;
    }
    .p_card_2 {
        font-size: 12px !important;
        line-height: 14px !important;
        letter-spacing: normal !important; 
    }
    .div_card_3 p {
        font-size: 12px !important;
        line-height: 14px !important;
    }
    #copy {
        width: 100% !important;
    }













}
@media (min-width: 991px) and (max-width: 1200px) {
        #mapa img {
    width: auto !important;
    height: 400px !important;
    }
    #logo_header {

    height: 25px !important;
}
     #encontranos_en {
        height: 90px !important;
        gap: 10px !important;
        width: 90%;
    }

     h2{
        font-size:26px !important;
        margin: 0px !important;
    }
    header {
        height: 60px !important;
    }
    #hero{
        padding-bottom: 0 !important;
        min-height: max-content !important;
    }
    #header2 {
        height: 40px !important;
    }
   #header2.fixed {
        width: 80% !important;
        right: 10% !important;
        margin-top: 30px !important;
        height: 40px !important;
        border-radius: 12px;
    }


        #logotipo {
        height: 35px !important;
        width: auto;
    }
   .contact-item i {
        font-size: 10px !important;
    }
    .contact-item span {
        font-size: 10px !important; 
    }
    #ul_navbbar {
        gap: 15px !important;
    }
    nav ul li a {
        font-size: 12px !important;
    }


    #textos_hero {
        padding-top: 20px !important;
        padding-bottom: 20px !important; 
    }

    #bienvenidos_hero {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    h1 {
        font-size: 40px !important;
        line-height: 42px !important;
    }


    #textos_hero img {
        width: auto;
        height: 250px !important;
    }
    #boton_hero {
        width: 250px !important;
        height: 40px !important;
    }
    #imagenes_hero {
        height: 250px !important;
    }

    #client {
        padding-top: 100px !important;
    }
    .card_cliente {

       justify-content: center !important;
       height: 80px !important; 
    }
    #cards_clientes {
        width: 75% !important;
        gap: 20px !important;  
    }

#div_cards_clientes {

    padding-bottom: 0 !important;
}
    .card_cliente h4 {

        font-size: 16px !important;
        gap: 10px !important;
    }

    .fila_clientes {
        height: 300px !important;
        width: 75% !important;
    }


    .fila_textos h4 {
        font-size: 20px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 22px) !important;
    }

    .fila_textos p {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 18px) !important;
    }
    .fila_textos button {
        height: 40px !important;
          font-size: 16px !important;
    }

    .fila_textos {
        width: calc(50% - 100px) !important;
        height: calc(100% - 50px) !important;
        padding: 25px 50px !important;
    }








.div_1_titulo h3 {
    font-size: 18px !important;
    line-height: var(--Typescale-Headline-Large-Line-Height, 22px) !important;
}
.div_1_titulo img {
    height: var(--Typescale-Display-Medium-Letter-Spacing, 1px)!important;}

    #banner_san_agustin {
        background: var(--blanco);
        overflow: hidden !important ;
    }
    #banner_san_agustin img {
        width: 130% !important;
    }

    #card_medio_servicios {
        gap: 10px !important;
    }

    #card_contacto_servicio {
        width: 80% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        gap: 10px !important;
    }



    .titulo_card_s div, #card_medio_servicios div {
        min-width: 6px !important;
        min-height: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }
    .titulo_card_s img, #card_medio_servicios div img {
        width: 40px !important;
        height: 40px !important;
    }


    .titulo_card_s h4, #card_medio_servicios h4 {
        font-size: 18px;
        height: 20px;
    }

.texto_card_s p {
    font-size: 16px;
}
#card_medio_servicios p {
     font-size: 16px;
}

#card_contacto_servicio h4 {
    font-size: 24px !important;
    line-height: var(--Typescale-Display-Small-Line-Height, 28px) !important;
}

#card_contacto_servicio button {
  
    padding: 14px !important;
    font-size: 18px !important;
    line-height: var(--Typescale-Title-Large-Line-Height, 20px) !important;
}

    .div_productos {
        width: 90%;
    }
    #servicios {
    padding-bottom: 100px !important;
}
    .titulo_producto {
        font-size: 12px !important;
        height: 40px !important;
    }

    .imagen_producto {
        width: 75% !important;
    }
    #empresa {
        gap: 30px !important;
    }
    #empresa_1_img {
        height: 400px !important;
    }

    #empresa_1_texto div {
        width: 100% !important;
    }

    #empresa_1_img img {
        height: 65% !important;
    }
    #empresa_1_texto button {
        height: 40px !important;
        font-size: 16px !important;
    }

    #empresa_1_texto p {
        font-size: 16px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    #empresa_2 {
        width: 90% !important;
    }
    #empresa_2_familia h3 {
        font-size: 20px !important;
    }

#titulo_contacto p {

    font-size: 28px !important;
    line-height: var(--Typescale-Display-Small-Line-Height, 30px) !important;
}

    .empresa_2_div {
        justify-content: start !important;
        align-items: center !important;
        height: 90px !important;
        padding: 15px  10px !important;
    }
    .empresa_2_div h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    .empresa_2_div p {
        font-size: 14px !important; 
        line-height: var(--Typescale-Display-Small-Line-Height, 14px) !important;  

    }

    #contacto_redes_div {
        gap: 30px !important;
    }
    #contacto_redes {
        width: 90% !important;
    }

    #redes_1 {
        width: 100% !important;
        gap: 20px !important;
    }

    .red_social div img {
        width: 60px !important;
        height: 60px !important;
    }

    #encontranos_en div p {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Medium-Line-Height, 20px) !important;
    }


    .red_social h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Headline-Small-Line-Height, 22px) !important;
    }
    .red_social a {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 18px) !important;
    }










    #encontranos_en h4 {
        font-size: 28px !important;
        line-height: var(--Typescale-Display-Medium-Line-Height, 30px) !important;
    }
  

#contacto {
        height: max-content !important;
        gap: 20px !important;
        align-items:center !important;
    }
    #contacto_mapa {
        width: 67% !important;
    }
        #contacto_reseñas {
        width: 23% !important;
        height: 600px;
    }
    .div_card_reseñas {
        gap: 10px !important;
    }

    .div_card_1 {
        gap: 10px !important;
    }
    .p_card_1 {
        font-size: 18px !important;
        line-height: 19px !important;
        letter-spacing: normal !important;
        text-align: left !important;
    }

    .div_card_2 p {
        font-size: 14px !important;
        line-height:16px !important;
        letter-spacing: normal !important;
    }
    .div_card_1 img {
        height: 40px !important;
    }
    .div_card_2 div svg {
        width: 20px  !important;
        height: 20px  !important;
    }

    .p_card_2 {
        font-size: 14px;
        line-height: 16px;
        letter-spacing: normal;
    }
    .div_card_3 p {
        font-size: 16px;
        line-height: 16px;
    }
    #copy {
        width: 100% !important;
    }


}































@media (min-width: 768px) and (max-width: 990px) {
    header {
        height: 60px !important;
    }
    .burger, .sidebar {
        display: flex; 
      }
      
   
        
    #hero{
        padding-bottom: 0 !important;
        min-height: max-content !important;
    }

    #nav_header{
        display: none !important;
    }
    #navegacion {
        display: none !important;
    }
    #header2 {
        height: 60px !important;
        align-items: center !important;
    }
    #header2.fixed {

        width: 100% !important;
        right: 0% !important;
        margin-top: 20px !important;
        height: 50px !important;
       
    }


    #logotipo {
        width: 220px !important;

    }
    .contact-item i {
        font-size: 12px !important;
    }
    .contact-item span {
        font-size: 12px !important; 
    }
    #ul_navbbar {
        gap: 15px !important;
        flex-direction: column;
        justify-content: flex-start;
    }
    #ul_navbbar li{
        width: 100%;
        text-align: left;
    }
    #ul_navbbar li a {
        font-size: 14px !important;
        color: inherit; /* Hereda el color del texto padre */
    text-decoration: none; 
        color: #101010 !important;
        text-decoration: none !important;
        width: 100% !important;
        text-align: left !important;
    }


    #textos_hero {
        padding-top: 20px !important;
        padding-bottom: 20px !important; 
    }

    #bienvenidos_hero {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    h1 {
        font-size: 40px !important;
        line-height: 42px !important;
    }

    h2{
        font-size: 32px !important;
        line-height: 34px !important;
    }
    #textos_hero img {
        width: auto;
        height: 200px !important;
    }
    #boton_hero {
        width: 250px !important;
        height: 40px !important;
    }
    #imagenes_hero {
        height: 200px !important;
    }

    #client {
        padding-top: 100px !important;
    }
    .card_cliente {

       justify-content: center !important;
       height: 80px !important; 
    }
    #cards_clientes {
        width: 90% !important;
        gap: 20px !important;  
    }

    .card_cliente h4 {

        font-size: 14px !important;
        gap: 10px !important;
    }


    .fila_textos div {
        gap: 10px !important;
    }

    .fila_clientes {
        height: 300px !important;
    }


    .fila_textos h4 {
        font-size: 26px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 28px) !important;
    }

    .fila_textos p {
        font-size: 18px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 22px) !important;
    }
    .fila_textos button {
        height: 40px !important;
    }

    .fila_textos {
        width: calc(50% - 100px) !important;
        height: calc(100% - 50px) !important;
        padding: 25px 50px !important;
        gap: 20px !important;
    }

    #div_cards_clientes {
        padding-bottom: 0px !important;
    }

    #izq_marcas h4 {
        font-size: 32px !important;
        line-height: 34px !important;
      
    }








    #banner_san_agustin {
        background: var(--blanco);
        overflow: hidden !important ;
    }
    #banner_san_agustin img {
        width: 150% !important;
    }

    #card_medio_servicios {
        gap: 10px !important;
    }

    #card_contacto_servicio {
        width: 80% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        gap: 10px !important;
    }



    .titulo_card_s div, #card_medio_servicios div {
        min-width: 70px !important;
        min-height: 70px !important;
        width: 70px !important;
        height: 70px !important;
    }
    .titulo_card_s img, #card_medio_servicios div img {
        width: 50px !important;
        height: 50px !important;
    }


    .titulo_card_s h4, #card_medio_servicios h4 {
        font-size: 20px !important;
        height: 20px !important;
    }

    #servicios {
        padding-bottom: 50px !important;
    }

    #servicios_div {
        width: 90% !important;
    }

    .div_productos {
        width: 95% !important;
    }

    .titulo_producto {
        font-size: 12px !important;
        height: 45px !important;
    }
    .div_1_titulo h3 {
        font-size: 22px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 24px) !important;
    }


    #empresa_1 {
        flex-direction: column !important;
        width: 80% !important;
    }


    .imagen_producto {
        width: 75% !important;
    }
    #empresa {
        gap: 30px !important;
        padding-top: 100px !important;
        padding-bottom: 0px !important;
    }
    #empresa_1_img {
        height: 300px !important;
        width: 100% !important;
    }

    #empresa_1_texto div {
        width: 100% !important;
    }

    #empresa_1_img img {
        height: 100% !important;
    }
    #empresa_1_texto button {
        height: 40px !important;
        font-size: 16px !important;
    }

    #empresa_1_texto {
        justify-content: start !important;
        padding-top: 10px;
        width: 100% !important;
        height: max-content !important;
        padding-bottom: 20px !important;
    }

    #empresa_2_cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
        grid-template-rows: repeat(2, 1fr);   
        gap: 20px !important;

    }




    #titulo_contacto p {
        font-size: 24px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 24px) !important;
    }

    #empresa_1_texto p {
        font-size: 16px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    #empresa_2 {
        width: 90% !important;
    }
    #empresa_2_familia h3 {
        font-size: 28px !important;
    }

    .empresa_2_div {
        justify-content: start !important;
        align-items: center !important;
        height: 90px !important;
        padding: 15px  10px !important;
        width: calc(100% - 30px);
    }
    .empresa_2_div h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    .empresa_2_div p {
        font-size: 14px !important; 
        line-height: var(--Typescale-Display-Small-Line-Height, 14px) !important;  

    }

    #contacto_redes_div {
        gap: 30px !important;
    }
    #contacto_redes {
        width: 90% !important;
    }

    #redes_1 {
        width: 100% !important;
        gap: 20px !important;
    }
    .red_social div {
        width: 50px !important;
        height: 50px !important;
    }


    .red_social div img {
        width: 40px !important;
        height: 40px !important;
    }

    #encontranos_en div p {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Medium-Line-Height, 20px) !important;
    }


    .red_social h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Headline-Small-Line-Height, 22px) !important;
    }
    .red_social a {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 18px) !important;
    }


    #encontranos_en h4 {
        font-size: 40px !important;
        line-height: var(--Typescale-Display-Medium-Line-Height, 42px) !important;
    }
  


    #contacto {
        height: max-content !important;
        gap: 20px !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #contacto_mapa {
        width: 95% !important;
    }
    #contacto_reseñas {
        width: 90% !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
        grid-template-rows: repeat(2, 1fr);   
        max-height: 420px !important;
        gap: 10px;
    }
    .div_card_reseñas {
        gap: 10px !important;
        height: max-content !important;
        width: calc(100% - 10px);

    }

    .div_card_1 {
        gap: 10px !important;
    }
    .p_card_1 {
        font-size: 18px !important;
        line-height: 19px !important;
        letter-spacing: normal !important;
        text-align: left !important;
    
    }

    .div_card_2 p {
        font-size: 14px !important;
        line-height:16px !important;
        letter-spacing: normal !important;
    }
    .div_card_1 img {
        height: 40px !important;
    }
    .div_card_2 div svg {
        width: 20px  !important;
        height: 20px  !important;
    }

    .p_card_2 {
        font-size: 14px;
        line-height: 16px;
        letter-spacing: normal;
    }
    .div_card_3 p {
        font-size: 16px;
        line-height: 19px;
    }
    #copy {
        width: 100% !important;
    }
    footer {
        background-color: var(--bg);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 133.128px 120px 26px 120px;
        gap: 50px;
    }


}

@media (min-width: 550px) and (max-width: 768px) {
    header {
        height: 60px !important;
    }
    .burger, .sidebar {
        display: flex; 
      }
    #hero{
        padding-bottom: 0 !important;
        min-height: max-content !important;
    }

    #nav_header{
        display: none !important;
    }
    #navegacion {
        display: none !important;
    }
    #header2 {
        height: 60px !important;
        align-items: center !important;
    }
    #header2.fixed {

        width: 100% !important;
        right: 0% !important;
        margin-top: 20px !important;
        height: 50px !important;
       
    }


    #logotipo {
        width: 220px !important;
        padding-left: 20px !important;

    }
    .contact-item i {
        font-size: 12px !important;
    }
    .contact-item span {
        font-size: 12px !important; 
    }
    #ul_navbbar {
        gap: 15px !important;
        flex-direction: column;
        justify-content: flex-start;
    }
    #ul_navbbar li{
        width: 100%;
        text-align: left;
    }
    #ul_navbbar li a {
        font-size: 14px !important;
        color: inherit; /* Hereda el color del texto padre */
    text-decoration: none; 
        color: #101010 !important;
        text-decoration: none !important;
        width: 100% !important;
        text-align: left !important;
    }


    #textos_hero {
        padding-top: 20px !important;
        padding-bottom: 20px !important; 
    }

    #bienvenidos_hero {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    h1 {
        font-size: 40px !important;
        line-height: 42px !important;
    }

    h2{
        font-size: 26px !important;
        line-height: 28px !important;
    }
    #izq_marcas h4 {
        font-size: 26px !important;
        line-height: 28px !important;
      
    }
    #textos_hero img {
        width: auto;
        height: 330px !important;
    }
    #boton_hero {
        width: 250px !important;
        height: 40px !important;
    }
    #imagenes_hero {
        height: 150px !important;
    }

    #client {
        padding-top: 100px !important;
    }
    .card_cliente {

       justify-content: center !important;
       height: 80px !important; 
    }

    #mapa {
        display: flex;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    #img_hero1{

    }

    #img_hero2{
        
    }

    #img_hero3{
        
    }

    #img_hero4{
        
    }

    #img_hero5{
        
    }


    .whatsapp-btn {
        bottom: 10px !important;
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
    }
    .whatsapp-chat {
        bottom: 75px !important;
        padding: 10px !important;
        right: 5px !important;
    }
    .whatsapp-btn i {
        font-size: 35px !important;
    }
    #cards_clientes {
        width: 98% !important;
        gap: 10px !important;  
    }
    .div_1_titulo {
        width: 100% !important;
    }
    #titulo_productos {
        width: 95% !important;
    }
    #titulo_productos p {
        font-size: 14px !important;
        width: 100% !important;
        width: 95%;
    }
    #textos_clientes p {
        width: 95%;
        font-size: 14px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 16px) !important;
    }
    #izq_marcas p {
        width: 95%;
        font-size: 14px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 16px) !important;
    }
    #titulo_servicios p {
        width: 95%;
        font-size: 14px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 16px) !important;
    }








    .card_cliente h4 {

        font-size: 10px !important;
        gap: 10px !important;
    }


    .fila_textos div {
        gap: 10px !important;
    }

    .fila_clientes {
        height: 200px !important;
    }


    .fila_textos h4 {
        font-size: 18px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 20px) !important;
    }

    .fila_textos p {
        font-size: 12px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 14px) !important;
    }
    .fila_textos button {
        height: 30px !important;
        font-size: 12px !important;
        width: 80%;
    }
    #dcha_marcas {
        height: 150px !important;
    }
    #image-scroller {
        height: 100px !important;
    }
    #image-scroller ul li {
        height: 100px !important;
    }
    #marcas {
        padding-top: 20px !important;
    }

    .fila_textos {
        width: calc(50% - 40px) !important;
        height: calc(100% - 10px) !important;
        padding: 5px 20px !important;
        gap: 20px !important;
    }

    #div_cards_clientes {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }

    








    #banner_san_agustin {
        background: var(--blanco);
        overflow: hidden !important ;
    }
    #banner_san_agustin img {
        width: 200% !important;
    }

    #card_medio_servicios {
        gap: 10px !important;
        height: 150px !important;
    }

    #card_contacto_servicio {
        width: 90% !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
        gap: 10px !important;
        margin-top: 0 !important;
        height: 150px !important;
    }

    #card_contacto_servicio h4 {
        font-size: 22px !important;
        line-height: 24px !important;
    }
    #card_contacto_servicio button {
        width: 150px !important;
        padding: 10px !important;
        font-size: 18px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 20px) !important;
    }

    #productos {
        padding-top: 20px !important;
    }

    .titulo_card_s div, #card_medio_servicios div {
        min-width: 50px !important;
        min-height: 50px !important;
        width: 50px !important;
        height: 50px !important;
    }
    .titulo_card_s img, #card_medio_servicios div img {
        width: 35px !important;
        height: 35px !important;
    }
    #contenido_servicios {
        gap: 10px !important;
    }

    .titulo_card_s h4, #card_medio_servicios h4 {
        font-size: 16px !important;
        height: max-content !important;
        text-align: center;
    }
    .texto_card_s p, #card_medio_servicios p {
        font-size: 12px !important;
        line-height: 14px;

    }
    .card_servicios {
        gap: 8px !important;
        height: 150px !important;
    }
    #servicios {
        padding-bottom: 50px !important;
    }

    #servicios_div {
        width: 90% !important;
        gap: 10px !important;
    }

    .div_productos {
        width: 95% !important;
    }

    .titulo_producto {
        font-size: 10px !important;
        height: 50px !important;
    }
    .div_1_titulo h3 {
        font-size: 22px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 24px) !important;
    }


    #empresa_1 {
        flex-direction: column !important;
        width: 80% !important;
    }


    .imagen_producto {
        width: 75% !important;
    }
    #empresa {
        gap: 30px !important;
        padding-top: 100px !important;
        padding-bottom: 0px !important;
    }
    #empresa_1_img {
        height: 300px !important;
        width: 100% !important;
    }

    #empresa_1_texto div {
        width: 100% !important;
    }

    #empresa_1_img img {
        height: 100% !important;
    }
    #empresa_1_texto button {
        height: 40px !important;
        font-size: 16px !important;
    }

    #empresa_1_texto {
        justify-content: start !important;
        padding-top: 10px;
        width: 100% !important;
        height: max-content !important;
        padding-bottom: 20px !important;
    }

    #empresa_2_cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
        grid-template-rows: repeat(2, 1fr);   
        gap: 20px !important;

    }




    #titulo_contacto p {
        font-size: 24px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 24px) !important;
    }

    #empresa_1_texto p {
        font-size: 16px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    #empresa_2 {
        width: 90% !important;
        gap: 5px !important;
    }
    #empresa_2_familia h3 {
        font-size: 20px !important;
    }

    .empresa_2_div {
        justify-content: start !important;
        align-items: center !important;
        height: 90px !important;
        padding: 15px  10px !important;
        width: calc(100% - 30px);
    }
    .empresa_2_div h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 20px) !important;
    }

    .empresa_2_div p {
        font-size: 14px !important; 
        line-height: var(--Typescale-Display-Small-Line-Height, 14px) !important;  

    }

    #contacto_redes_div {
        gap: 30px !important;
    }
    #contacto_redes {
        width: 90% !important;
    }

    #redes_1 {
        width: 100% !important;
        gap: 20px !important;
    }
    .red_social div {
        width: 50px !important;
        height: 50px !important;
    }


    .red_social div img {
        width: 40px !important;
        height: 40px !important;
    }

    #encontranos_en div p {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Medium-Line-Height, 20px) !important;
    }


    .red_social h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Headline-Small-Line-Height, 22px) !important;
    }
    .red_social a {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 18px) !important;
    }


    #encontranos_en h4 {
        font-size: 40px !important;
        line-height: var(--Typescale-Display-Medium-Line-Height, 42px) !important;
        text-align: center !important;
        width: 100% !important;
    }
  
    .tooltip {
        font-size: 12px !important;
    }
    #copy p {
        font-size: 12px !important;
    }

    #contacto {
        height: max-content !important;
        gap: 20px !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #contacto_mapa {
        width: 95% !important;
    }
    #contacto_reseñas {
        width: 90% !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
        grid-template-rows: repeat(2, 1fr);   
        max-height: 420px !important;
        gap: 10px;
    }
    .div_card_reseñas {
        gap: 10px !important;
        height: max-content !important;
        width: calc(100% - 10px);

    }

    .div_card_1 {
        gap: 10px !important;
    }
    .p_card_1 {
        font-size: 18px !important;
        line-height: 19px !important;
        letter-spacing: normal !important;
        text-align: left !important;
    
    }

    .div_card_2 p {
        font-size: 14px !important;
        line-height:16px !important;
        letter-spacing: normal !important;
    }
    .div_card_1 img {
        height: 40px !important;
    }
    .div_card_2 div svg {
        width: 20px  !important;
        height: 20px  !important;
    }

    .p_card_2 {
        font-size: 14px;
        line-height: 16px;
        letter-spacing: normal;
    }
    .div_card_3 p {
        font-size: 16px;
        line-height: 19px;
    }
    #copy {
        width: 100% !important;
    }
    footer {
        background-color: var(--bg);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 133.128px 100px 26px 100px;
        gap: 50px;
    }

}



@media (max-width: 549px) {
    header {
        height: 60px !important;
    }
    .burger, .sidebar {
        display: flex; 
      }
      .iframe-container {
            width: 80% !important;
        }
        
    #hero{
        padding-bottom: 0 !important;
        min-height: max-content !important;
    }

    #nav_header{
        display: none !important;
    }
    #navegacion {
        display: none !important;
    }
    #header2 {
        height: 60px !important;
        align-items: center !important;
    }
    #header2.fixed {

        width: 100% !important;
        right: 0% !important;
        margin-top: 20px !important;
        height: 50px !important;
       
    }


    #logotipo {
        width: 150px !important;
        padding-left: 20px !important;

    }
    .contact-item i {
        font-size: 12px !important;
    }
    .contact-item span {
        font-size: 12px !important; 
    }
    #ul_navbbar {
        gap: 15px !important;
        flex-direction: column;
        justify-content: flex-start;
    }
    #ul_navbbar li{
        width: 100%;
        text-align: left;
    }
    #ul_navbbar li a {
        font-size: 14px !important;
        color: inherit; /* Hereda el color del texto padre */
    text-decoration: none; 
        color: #101010 !important;
        text-decoration: none !important;
        width: 100% !important;
        text-align: left !important;
    }


    #textos_hero {
        padding-top: 20px !important;
        padding-bottom: 20px !important; 
    }

    #bienvenidos_hero {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    h1 {
        font-size: 40px !important;
        line-height: 42px !important;
    }

    h2{
        font-size: 20px !important;
        line-height: 22px !important;
    }
    #izq_marcas h4 {
        font-size: 20px !important;
        line-height: 22px !important;
      
    }
    #textos_hero img {
        width: auto;
        height: 200px !important;
    }
    #boton_hero {
        width: 250px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
    #imagenes_hero {
        height: 100px !important;
    }

    #client {
        padding-top: 50px !important;
        padding-bottom:0 !important;
    }
    .card_cliente {

       justify-content: center !important;
       height: 80px !important; 
       width: 300px !important;
       border: 1px solid var(--bg22);
    }

    #mapa {
        display: flex;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    #img_hero1{

    }

    #img_hero2{
        
    }

    #img_hero3{
        
    }

    #img_hero4{
        
    }

    #img_hero5{
        
    }


    .whatsapp-btn {
        bottom: 10px !important;
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
    }
    .whatsapp-chat span {
        font-size: 10px !important ;
    }
    .close-chat {
    right: 10px !important;
    }
    .whatsapp-chat {
        bottom: 75px !important;
        padding: 10px !important;
        right: 5px !important;
        width:165px !important;
    }
    .whatsapp-btn i {
        font-size: 35px !important;
    }
    #cards_clientes {
        width: 98% !important;
        gap: 10px !important;  
        flex-wrap: wrap !important;
    }
    .div_1_titulo {
        width: 100% !important;
    }
    #titulo_productos {
        width: 90% !important;
    }
    #titulo_productos p {
        font-size: 14px !important;
        width: 100% !important;
        width: 95%;
    }
    #textos_clientes p {
        width: 95%;
        font-size: 14px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 16px) !important;
    }
    #izq_marcas p {
        width: 95%;
        font-size: 14px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 16px) !important;
    }
    #titulo_servicios p {
        width: 95%;
        font-size: 14px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 16px) !important;
    }








    .card_cliente h4 {

        font-size: 10px !important;
        gap: 10px !important;
    }


    .fila_textos div {
        gap: 5px !important;
    }

    .fila_clientes {
        height: 175px !important;
        width: 95% !important;
    }


    .fila_textos h4 {
        font-size: 14px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 16px) !important;
    }

    .fila_textos p {
        font-size: 10px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 12px) !important;
    }
    .fila_textos button {
        height: 20px !important;
        font-size: 10px !important;
        width: 80%;
    }
    #dcha_marcas {
        height: 150px !important;
    }
    #image-scroller {
        height: 100px !important;
    }
    #image-scroller ul li {
        height: 100px !important;
    }
    #marcas {
        padding-top: 20px !important;
    }

    .fila_textos {
        width: calc(50% - 40px) !important;
        height: calc(100% - 10px) !important;
        padding: 5px 20px !important;
        gap: 20px !important;
    }

    #div_cards_clientes {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }

    








    #banner_san_agustin {
        background: var(--blanco);
        overflow: hidden !important ;
        padding-top : 20px !important;
    }
    #banner_san_agustin img {
        width: 200% !important;
    }

    #card_medio_servicios {
        gap: 10px !important;
        height: 130px !important;
    }
    
     .card_servicios {
        gap: 8px !important;
        height: 130px !important;
    }
    #card_contacto_servicio {
        width: 90% !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
        gap: 10px !important;
        margin-top: 0 !important;
        border-radius: 28px !important;
        height: 130px !important;
    }

    #card_contacto_servicio h4 {
        font-size: 18px !important;
        line-height: 20px !important;
    }
    #card_contacto_servicio button {
        width: 100px !important;
        height: 30px !important;
        padding: 10px !important;
        font-size: 14px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 16px) !important;
    }

    #productos {
        padding-top: 20px !important;
        gap :30px !important;
    }

    .titulo_card_s div, #card_medio_servicios div {
        min-width: 50px !important;
        min-height: 50px !important;
        width: 50px !important;
        height: 50px !important;
    }
    .titulo_card_s img, #card_medio_servicios div img {
        width: 35px !important;
        height: 35px !important;
    }
    #contenido_servicios {
        gap: 10px !important;
        display: flex !important;
      flex-wrap: wrap !important;
    }

    .titulo_card_s h4, #card_medio_servicios h4 {
        font-size: 16px !important;
        height: max-content !important;
        text-align: center;
    }
    .texto_card_s p, #card_medio_servicios p {
        font-size: 12px !important;
        text-align:center;
        line-height: 14px;

    }
   
    #servicios {
        padding-bottom: 50px !important;
        padding-top:40px !important;
    }

    #servicios_div {
        width: 90% !important;
        gap: 10px !important;
    }

    .div_productos {
        width: 95% !important;
    }

    .titulo_producto {
        font-size: 10px !important;
        height: 50px !important;
    }
    .div_1_titulo h3 {
        font-size: 14px !important;
        line-height: var(--Typescale-Headline-Large-Line-Height, 16px) !important;
    }


    #empresa_1 {
        flex-direction: column !important;
        width: 90% !important;
    }

    .producto {
        width: 47% !important;
    }
    .div_1_productos {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    .banner_producto {
       width: 220% !important;
    }
    .imagen_producto {
        width: 75% !important;
    }
    .whatsapp-chat p {
    font-size: 10px !important;
    }
    #empresa {
        gap: 30px !important;
        padding-top: 100px !important;
        padding-bottom: 0px !important;
    }
    #empresa_1_img {
        height: 150px !important;
        width: 100% !important;
    }

    #empresa_1_texto div {
        width: 100% !important;
    }

    #empresa_1_img img {
        height: 100% !important;
    }
    #empresa_1_texto button {
        height: 30px !important;
        font-size: 12px !important;
    }

    #empresa_1_texto {
        justify-content: start !important;
        padding-top: 10px;
        width: 100% !important;
        height: max-content !important;
    }

    #empresa_2_cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);   
        gap: 20px !important;

    }




    #titulo_contacto p {
        font-size: 22px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 24px) !important;
    }

    #empresa_1_texto p {
        font-size: 12px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 14px) !important;
    }

    #empresa_2 {
        width: 90% !important;
        gap: 5px !important;
    }
    #empresa_2_familia h3 {
        font-size: 16px !important;
        line-height: 18px !important;
    }
#empresa_1_texto h2 {
    text-align: center !important;
    margin-bottom:0 !important;
    
}
    .empresa_2_div {
        justify-content: start !important;
        align-items: center !important;
        height: 35px !important;
        padding: 15px  10px !important;
        width: calc(100% - 30px);
    }
    .empresa_2_div h5 {
        font-size: 12px !important;
        line-height: var(--Typescale-Display-Small-Line-Height, 14px) !important;
    }

    .empresa_2_div p {
        font-size: 10px !important; 
        line-height: var(--Typescale-Display-Small-Line-Height, 12px) !important;  

    }

    #contacto_redes_div {
        gap: 30px !important;
    }
    #contacto_redes {
        width: 90% !important;
    }

    #redes_1 {
        width: 100% !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
    }

    .red_social div {
        width: 50px !important;
        height: 50px !important;
    }


    .red_social div img {
        width: 40px !important;
        height: 40px !important;
    }

    #encontranos_en div p {
        font-size: 12px !important;
        line-height: var(--Typescale-Title-Medium-Line-Height, 14px) !important;
    }


    .red_social h5 {
        font-size: 18px !important;
        line-height: var(--Typescale-Headline-Small-Line-Height, 22px) !important;
    }
    .red_social a {
        font-size: 16px !important;
        line-height: var(--Typescale-Title-Large-Line-Height, 18px) !important;
    }
    #encontranos_en div a, #mapa div a {
       font-size: 12px !important;
        line-height: var(--Typescale-Title-Medium-Line-Height, 14px) !important;
    }
    #encontranos_en div img{
        width:30px !important;
        height:30px !important;
    }
    #encontranos_en h4 {
        font-size: 22px !important;
        line-height: var(--Typescale-Display-Medium-Line-Height, 24px) !important;
        text-align: center !important;
        width: 100% !important;
    }
  
    .tooltip {
        font-size: 10px !important;
    }
    #copy p {
        font-size: 12px !important;
        text-align: center !important;  
    }

    #encontranos_en {
        width: calc(100% - 10px) !important;
        padding: 5px !important;
    }


    #contacto {
        height: max-content !important;
        gap: 20px !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #contacto_mapa {
        width: 95% !important;
    }
    #contacto_reseñas {
        width: 90% !important;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);   
        max-height: 715px !important;
        gap: 25px !important;
        height: max-content !important;
        overflow: hidden;
    }
    .div_card_reseñas {
        gap: 10px !important;
        height: max-content !important;
        width: calc(100% - 10px);

    }

    .div_card_1 {
        gap: 10px !important;
    }
    .p_card_1 {
        font-size: 16px !important;
        line-height: 18px !important;
        letter-spacing: normal !important;
        text-align: left !important;
    
    }

    .div_card_2 p {
        font-size: 12px !important;
        line-height:14px !important;
        letter-spacing: normal !important;
    }
    .div_card_1 img {
        height: 40px !important;
    }
    .div_card_2 div svg {
        width: 16px  !important;
        height: 16px  !important;
    }
    .div_card_1 div {
        gap: 5px !important;
    }
    .p_card_2 {
        font-size: 12px !important;
        line-height: 14px !important;
        letter-spacing: normal !important; 
    }
    .div_card_3 p {
        font-size: 12px !important;
        line-height: 14px !important;
    }
    #copy {
        width: 100% !important;
    }
    footer {
        background-color: var(--bg);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 133.128px 10px 50px 10px;
        gap: 50px;
    }
    #footer_div_1 img {
        width: 250px !important;
    }
    #footer_redes img {
        width: var(--Typescale-Title-Medium-Line-Height, 32px) !important;
        height: var(--Typescale-Title-Medium-Line-Height, 32px) !important;
    }
      .red_social {
        width: 100% !important;
    }


}