:root {
    --primario:#a7a5a6;
    --secunadrio:#0b0a0a ;
    --blanco:#ffffff;
    --blancosecundario:#312f2f;
    --negro:#000000;
    --extra:#6d0909 ;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    background-color: var(--negro);

}
.img{
    transition: transform 0.5s ease-in-out;
}
.img:hover {
    transform: scale(1.1);
}

/*mavegacion */
.header__img{
    background-image: url("../img/logo.png"),
                  url("../img/logo.png");
}
header{ 
    background-color: var(--negro);
    display: flex;
    align-items: center;
    justify-content: space-around;
    bottom: 2rem;
}
.navegador__inicio {
    opacity: 0; /* Estado inicial para el fade-in al cargar */
    animation: fadeIn 1s ease-in forwards; /* Fade-in al cargar */
    display: inline-block; /* Necesario para algunos efectos como escalado */
    color: var(--blanco); /* Color inicial */
    text-decoration: none; /* Sin subrayado */
    transition: all 0.3s ease-in-out; /* Suaviza los cambios de color y transformaciones */
    position: relative; /* Para agregar elementos decorativos si los necesitas */
}

.navegador__inicio{
        color: var(--blanco);
        text-decoration: none;
        font-size: 1rem;
        margin: 0 1rem;
    }
@media(max-width:768px){
    .navegador__inicio{
        display:block;
        grid-template-columns: repeat(3, 1fr);
        width: 100%
    }
}

.logo__nombre{
    color: var(--blancosecundario);
}
.logo__bold{
    color: var(--blanco);
}
/* nfondo*/
main{
    background-image: url('../img/fondo_1.avif');
    background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
    background-position: center center; /* Centra la imagen */
    min-height: 90vh; /* Esto asegura que 'main' cubra al menos el 100% de la altura de la ventana */
   min-width: 100%;
}
main,p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem;
    font-size: 2rem;
    text-align: center;
    color: var(--blanco);
}

@media(max-width:768px){
    main p{
        font-size: .7rem;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0; /* Estado inicial: completamente transparente */
    }
    to {
        opacity: 1; /* Estado final: completamente visible */
    }
}
header{
    opacity: 0; /* Estado inicial */
    animation: fadeIn 0.5s ease-in forwards; /* Asigna la animación */
}

/* servicios */

.article {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas en dispositivos grandes */
    gap: 3rem; /* Espaciado entre columnas */
    padding: 1rem;
    background: linear-gradient(to bottom, #000000 50%, #532053 50%);
}
.servicios__insonorizante,
.servicios__PPF,
.servicios__vinil {
    background-color: var(--);
    border: 1px solid var(--blancosecundario); /* Opcional para un mejor diseño */
    text-align: center;
    padding: 1rem;
    border-radius: 8px; /* Bordes redondeados */
}
h2,h3,h4{
    color: var(--blanco);
    font-size: 2rem;
}
.servicios__insonorizante img,
.servicios__PPF img,
.servicios__vinil img {
    width: 100%; /* Imágenes se adaptan al ancho del contenedor */
    height: 500px;
    object-fit: contain;
    border: 5px;
}

.servicios__insonorizante p,
.servicios__PPF p,
.servicios__vinil p {
    margin-top: 1rem; /* Separación del texto de las imágenes */
    font-size: 1rem;
    color: var(--primario);
}
p.titulos{
color: var(--blanco);
    font-size: 2rem;
}
/* Diseño responsivo para pantallas más pequeñas */
@media (max-width: 768px) {
    .article {
        grid-template-columns: 1fr; /* Una columna en dispositivos móviles */
    }
}
/* Instalacion */

.instalación{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;        
    padding: 1rem;
    gap: 1rem;
    row-gap: 4rem;
    background: var(--blanco);
}

@media (max-width: 768px){
    .instalación{
        grid-template-columns: 1fr;
    }
    .instalación img{
        align-items: center;
    }
}
.instalación img{
    width: 100%;
    height: 500px;
    object-fit: contain;
    gap: 2rem; 
    border-radius: 8px;
    padding: 1rem;
}

.instalación ul{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    height: 100%;
    color: var(--blanco);
    font-size: 1.5rem;
    background: linear-gradient(to bottom left, #5c5757 50%, #000000 50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.377);
}
.instalación li{
    margin-left: 40px; /* Desplaza la lista hacia la derecha */
}


/* NOSOTROS */
.nosotros{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;        
    padding: 1rem;
    gap: 1rem;
    transition: transform 0.5s ease-in-out;
}
@media (max-width: 768px){
    .nosotros{ 
        grid-template-columns: 1fr;
    }
}
.nosotros img:hover {
    transform: scale(1.1);
}
.nosotros p:hover {
    transform: scale(1.1);
}
.titulo__nosotros{
    text-align: center;
}

.nosotros img{
    width: 100%;
    height: 500px;
    object-fit: contain;
    gap: 2rem; 
    border-radius: 8px;
    padding: 1rem;
    transition: transform 0.5s ease-in-out;
}
.text__nosotros{
    font-size: 1.5rem;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.377);
    transition: transform 0.5s ease-in-out;
}

/* MATERIAL */
.mi-boton{
    display: inline-block;
    padding: 20px 40px;
    background-color: rgb(28, 53, 45); /* Verde oscuro */
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-left: 5rem; /* Desplaza la lista hacia la derecha */
}
.mi-boton::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background-color: rgb(204, 204, 102); /* Amarillo suave */
    transition: all 0.4s ease;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.mi-boton:hover {
    background-color: rgb(204, 204, 102); /* Amarillo suave */
    color: rgb(28, 53, 45); /* Verde oscuro */
}
/* VENTA-MATERIAL */
.VENTA{
    grid-column:span 2;
    grid-row:1;
    text-align: center;
    background-color: #2a6342;
}
@media (max-width: 768px){
    .VENTA{
        grid-column:1;
        grid-row:1;
    }
}
.material{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;        
    padding: 1rem;
    gap: 1rem;
    row-gap: 4rem;
    background: var(--blanco);
}

@media (max-width: 768px){
    .material, .VENTA{
        grid-template-columns: 1fr;
    }
    .material img{
        align-items: center;
    }
}
.material img{
    width: 100%;
    height: 500px;
    object-fit: contain;
    gap: 2rem; 
    border-radius: 8px;
    padding: 1rem;
}

.material ul{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    height: 100%;
    color: var(--blanco);
    font-size: 1.5rem;
    background: linear-gradient(to bottom left, #000 50%, #5c5757 50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.377);
}
.material li{
    margin-left: 40px; /* Desplaza la lista hacia la derecha */
}
/* footer */
footer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--secunadrio);
    justify-items: center;
    align-items: center;
}
@media (max-width: 768px){
    footer{
        grid-template-columns:1fr;
    }
    footer p{
        font-size: .9rem;
    }
}
footer p{
    font-size: 1rem;
}
footer img{
width: auto;
height:140px; 
}
/* SERVICIOS 2 HOJA */
.instalaciones__wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center center;    
    padding: 1rem;
    gap: 1rem;
    
    transition: transform 0.5s ease-in-out;
}

@media (max-width: 768px){
    .instalaciones__wrap{ 
        grid-template-columns: 1fr;
    }
}
.instalaciones__wrap img:hover {
    transform: scale(1.1);
}
.instalaciones__wrap p:hover {
    transform: scale(1.1);
}
.text_tituloW{
    text-align: center;
}

.instalaciones__wrap img{
    width: 100%;
    height: 500px;
    object-fit: contain;
    gap: 2rem; 
    border-radius: 8px;
    padding: 1rem;
    transition: transform 0.5s ease-in-out;
}
.text_p{
    background-color: var(--negro);
    font-size: 1rem;
    box-shadow: 0 4px 8px rgb(0, 0, 0);
    transition: transform 0.5s ease-in-out;
}
/* FONDO DE COLOR */
.inso__color{
    background: linear-gradient(to bottom left, #000 50%, #ac78e7 50%);
}
.ppf_color{
    background: linear-gradient(to bottom left, #ac78e7 50%, #11b889 50%);
}
.wrap_color{
    background: linear-gradient(to bottom left, #11b889 50%, #b84e11 50%);  
}
/* TEXTO P */
.text__ppfp{
 background-color: #ac78e7;
}
.text__wrapp{
 background-color:#11b889;

}
.mi-botons{
    display: inline-block;
    padding: 20px 40px;
    position: absolute;
    color: var(--blanco);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-left: 9.5rem; /* Desplaza la lista hacia la derecha */
}
.mi-botons::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background-color: rgb(204, 204, 102);/*  Amarillo suave */
    transition: all 0.4s ease;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.mi-botoninso:hover {
    background-color: rgb(255, 255, 255); /* Amarillo suave */
    color: rgb(28, 53, 45); /* Verde oscuro */
}
.mi-botonppf:hover {
    background-color: rgb(255, 255, 255); /* Amarillo suave */
    color: rgb(28, 53, 45); /* Verde oscuro */
}
.mi-botonwrap:hover {
    background-color: rgb(255, 255, 255); /* Amarillo suave */
    color: rgb(28, 53, 45); /* Verde oscuro */
}
.highlight{
    color: var(--blanco);
    font-weight: bold; /* Opcional: para resaltar aún más */
}
/* GOOGLE MAPS */
.mapa {
    text-align: center;
    margin: 40px auto;
    padding: 20px;
    background: linear-gradient(to bottom left, #11b889 50%, #b84e11 50%); 
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    max-width: 1000px; /* Ajusta el tamaño */
    overflow: hidden;
}

.mapa iframe {
    border-radius: 10px; /* Bordes redondeados en el mapa */
    width: 100%; /* Hace que el mapa sea responsivo */
    height: 450px;
    transition: transform 0.5s ease; /* Transición suave */
}

.mapa:hover iframe {
    transform: scale(1.05); /* Efecto de zoom al pasar el ratón */
}

.mapa h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000000;
}

.mapa p {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 20px;
}
/* videos de instalaciones */
.videos_insta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; 
    padding: 20px;
    background: linear-gradient(to top right, #3498DB  50%, #b84e11 50%); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.phone {
    position: relative;
    width: 300px;
    height: 600px;
    background-color: black;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 5px solid #333;
    margin: 0 auto; /* Esto centra el teléfono horizontalmente */
}

.phone::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 5px;
    background-color: #666;
    border-radius: 3px;
}

.phone::after {
    content: '';
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background-color: #666;
    border-radius: 3px;
}

.screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img_video {
    grid-column: 2; /* Coloca la imagen en la segunda columna */
    
    width: 100%; /* Hace que la imagen ocupe el 100% del contenedor */
    max-width: 500px; /* Limita el tamaño máximo de la imagen */
    object-fit: cover; /* Asegura que la imagen se recorte correctamente */
    margin-top: 20px; /* Agrega espacio entre la imagen y el video */
    border-radius: 1rem;
}
/* Estilos responsivos */
@media (max-width: 768px) { 
    .videos_insta {
      grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }
    
    .img_video {
      grid-column: 1; /* La imagen se mueve a la primera columna */
       /* Sgrid-row: 2;e coloca debajo del video */
      max-width: 100%; /* La imagen puede ser más grande en pantallas pequeñas */
      margin-top: 20px; /* Añadir espacio arriba de la imagen */
    }
  }
  

@media (max-width: 768px) {
    .phone {
        width: 250px;
        height: 500px;
    }
}

@media (max-width: 480px) {
    .phone {
        width: 200px;
        height: 400px;
    }
}
.videos_insta ul{ /* Estilo del contenedor de la lista */
    list-style: none;
    color: var(--blanco);
    background: linear-gradient(to bottom, #2C3E50  50%, #000000 50%); 
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
    text-align: center;
}

.videos_insta p{
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    margin: 10px 0;
}

        /* Estilo de los elementos de la lista */
.videos_instali {
    font-size: 1rem;
    color: #FFFFFF; /* Texto blanco */
    border-radius: 5px; /* Bordes redondeados */
    transition: transform 0.3s, background-color 0.3s; /* Efectos al pasar el cursor */
}

        /* Hover para los elementos de la lista */
li:hover {
    transform: scale(1.05); /* Crece ligeramente */
}
/* HOJAS DE CITAS */
.citas {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 20px;
    margin: 20px;
    background: linear-gradient(to top right, #000000 50%, #2C3E50 50%);
    justify-items: center; /* Centra los items dentro del grid */
}

.citas__whatsap, .citas__Faceboock, .citas__Instagram, .citas__tiktok {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 300px; /* Aumentado en un 22% (aproximadamente 150px * 1.22) */
    padding: 20px; /* Ajustado padding para mantener proporciones */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.citas__whatsap:hover, .citas__Faceboock:hover, .citas__Instagram:hover, .citas__tiktok:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.citas__whatsap img, .citas__Faceboock img, .citas__Instagram img, .citas__tiktok img {
    width: 100%;
    max-width: 300px; /* Aumento del tamaño de las imágenes */
    height: auto;
    margin-bottom: 12px;
    object-fit: contain;
}

.citas__whatsap h2, .citas__Faceboock h2, .citas__Instagram h2, .citas__tiktok h2 {
    font-size: 16px; /* Aumento en el tamaño del texto */
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.citas__whatsap p, .citas__Faceboock p, .citas__Instagram p, .citas__tiktok p {
    font-size: 14px; /* Aumento en el tamaño del texto */
    color: var(--negro);
    margin-bottom: 8px;
}

.citas__whatsap a, .citas__Faceboock a, .citas__Instagram a, .citas__tiktok a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #0084ff;
    margin-bottom: 12px;
    font-size: 14px;
}
.tex_aviso{
    font-size: 1rem;
    
}
.TEXTO{
    background-color: var(--extra);
}
/* Responsivo */
@media (max-width: 768px) {
    .citas {
        grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */
    }
    .citas__whatsap, .citas__Faceboock, .citas__Instagram, .citas__tiktok {
        width: 80%; /* Aumenta el tamaño para que ocupe el 90% del ancho en pantallas pequeñas */
        gap: 1rem;
    }
}