#main {
    width: 100%;
}

#titulo {
    padding: 8vw 10vw;
    position: relative;
     
    &&::before {
        --var_top: 24vw;
    
        content: "";
        left: 0vw;
        top: var(--var_top);
        position: absolute;
        width: 140%;
        height: 4vw;
        background-color: #3E46CB;
    
        transform: rotate(45deg);

        z-index: 99999;

        animation: mover_palo 1.5s;
    }

    &&::after {
        --var_top: 29vw;
    
        content: "";
        left: 0vw;
        top: var(--var_top);
        position: absolute;
        width: 140%;
        height: 4vw;
        background-color: #E0D200;
    
        transform: rotate(45deg);

        z-index: 99999;

        animation: mover_palo 1.5s;
    }
}

#animacion {
    --var_top: 20vw;

    left: -60vw;
    top: var(--var_top);
    width: 200%;
    height: 130vw;

    transform: rotate(45deg);
    background-color: rgb(255, 255, 255);
    position: absolute;

    z-index: 1;

    animation: mover_palo 1.5s;
}

@keyframes mover_palo {
    0% {
        top: -40vw;
    }

    100% {
        top: var(--var_top);
    }
}

#titulo h1 {
    line-height: 1.3;
    width: 50%;
    position: relative;
    z-index: 999999999;
    font-weight: 800;
    color: var(--color_texto_uno);
    font-size: 6rem;
}

#titulo p {
    position: relative;
    z-index: 999999999;
    color: var(--color_texto_dos);
    font-size: 3rem;
    margin-bottom: 2rem;
}

#titulo a {
    position: relative;
    z-index: 999999999;
    color: white;
    background-color: var(--color_texto_dos);
    font-size: 2rem;
    border: solid var(--color_borde) 1px;
    padding: 0.5rem 2rem;
    border-radius: 16px;
    font-weight: 400;
    text-decoration: none;
}

#titulo a:hover {
    background-color:rgb(224, 224, 224);
    color: black;
}

.destacado {
    color: var(--color_texto_destacado);
}

#imagen_titulo {
    width: 10vw;
    position: relative;
    z-index: 999;
}

#imagen_titulo_fondo {
    top: -4vw;
    right: 0;
    position: absolute;

    width: 65vw;
}

#imagen_neumatico {
    position: absolute;
    top: 5vw;
    right: 5vw;
    z-index: 9999999;
    width: 45vw;
}

#imagen_neumatico_dos {
    position: absolute;

    bottom: -8vw;
    left: 35vw;
    z-index: 99999;
    width: 25vw;

    animation-name: girar;
    animation-duration: 60s;
    animation-iteration-count: infinite; /* Animación infinita */
    animation-timing-function: linear; /* Rotación constante */
}

@keyframes girar {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* La rotación debe ser parte del transform, no del transition */
    }
}


/* CONTENIDO */
#contenido {
    z-index: 99999;
    color: white;
    font-size: 2vw;
    position: relative;

    width: 100%;
    display: flex;

    flex-direction: row;
    gap: 2vw;
   
    padding: 0 10vw;
}

#difuminado_informacion {
    z-index: 1;
    top: -15vw;
    left: 0;
    position: absolute;
    background: linear-gradient(to top, var(--color_fondo) 20%, transparent);

    width: 100%;
    height: 15vw;
}

#difuminado_informacion_dos {
    bottom: 0vw;
    left: 0;
    position: absolute;
    background: linear-gradient(to right, var(--color_fondo) 35%, transparent);

    z-index: 1;

    font-weight: 800;

    width: 100vw;
    height: 100%;
}

#imagen_coche {
    position: absolute;
    z-index: 9999999;
    right: -5vw;
    top: 2vw;
    height: 95%;
}

#contenido div {
    border: solid var(--color_borde) 0.1vw;

    font-size: 2rem;
    font-weight: 1;
    width: 33%;
    padding: 2vw;
    border-radius: 16px;
    background: var(--color_difuminado);;
    
    position: relative;
    z-index: 9999999;

    color: var(--color_texto_uno);
    backdrop-filter: blur(3vw);

    background: white;
}

#contenido div i {
    color: var(--color_texto_uno);
    font-size: 3rem;
}

#contenido div h2 {
    font-weight: 800;
    color: var(--color_texto_uno);
    font-size: 3rem;
    margin: 1rem 0;
}

#contenido div p {
    color: var(--color_texto_dos);
}

#hr_uno {
    margin-bottom: 0.2vw;
    border: solid var(--color_corporativo_dos) 0.3vw;
}

#hr_dos {
    margin-bottom: 1vw;
    border: solid var(--color_corporativo_uno) 0.3vw;
}


/* MARCAS */
#marcas {
    border-top: solid var(--color_borde) 1px;

    overflow: hidden;

    font-size: 2vw;
    
    color: #353535;
    position: relative;
    z-index: 9999999;
    background-color: #ffffff;
}

#marcas h3 {
    margin: 3vw 0 0.2vw 10vw;
}

#marcas_cajas {
    gap: 2vw;
}

.imagen_marcas {
    width: 100%;
    height: 10vw;
}

#imagen_marcas_uno {
    position: relative;
    right: 0;
    animation: animacion_imagenes 40s infinite linear;
}

@keyframes animacion_imagenes {
    0% {
        right: 0;
    }

    100% {
        right: 194vw;
    }
}

#imagen_marcas_dos {
    position: relative;

    right: 0;
    animation: animacion_imagenes_dos 8s infinite linear;
}

@keyframes animacion_imagenes_dos {
    0% {
        right: 0;
    }

    100% {
        right: 73vw;
    }
}


/* TEXTO */
#texto {
    color: var(--color_texto_uno);

    font-family: "Bebas Neue", serif;

    z-index: 999;
    position: relative;
    width: 100%;

    font-size: 2vw;
    
    display: flex;
    flex-direction: column;
    
    overflow: hidden;

    border-top: solid var(--color_borde) 0.1vw;
    
    /* cuadrados */
    background-image: repeating-linear-gradient(45deg, var( --color_fondo_dos) 25%, transparent 25%, transparent 75%, var( --color_fondo_dos) 75%, var( --color_fondo_dos)),
                    repeating-linear-gradient(45deg, var( --color_fondo_dos) 25%, var( --color_fondo) 25%, var( --color_fondo) 75%, var( --color_fondo_dos) 75%, var( --color_fondo_dos));
    background-position: 0 0, 2vw 2vw;
    background-size: 4vw 4vw;

    padding: 5vw 10vw;
}

#texto_servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;

    width: 60%;
}

#texto a {
    text-decoration: none;
    cursor: pointer;

    padding: 1rem;
    color: var(--color_texto_dos);
    font-size: 2.5rem;
    position: relative;
    z-index: 999999;
    border-radius: 16px;
    border: solid var(--color_borde) 0.1vw;
    /* background: var(--color_difuminado); */
    background-color: var(--color_difuminado);

    transition: background 0.1s ease-in-out;
}

#texto a:hover {
    background-color: rgb(224, 224, 224);
}

#texto i {
    margin-bottom: 1vw;
    border-radius: 99px;
    width: 2.5rem;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 2.5rem;
    background-color: var(--color_texto_uno);
    color: #ffffff;
}

#texto h3, hr, p, ul {
    position: relative;
    z-index: 3;
}

#texto h3 {
    font-size: 3rem;
}

#texto ul {
    font-weight: 1;
    list-style: none;
}

#texto i {
    margin-right: 1vw;
}

#difuminado_texto {
    bottom: 0vw;
    left: 0;
    position: absolute;
    /*background: linear-gradient(to right, var(--color_fondo) 35%, transparent);*/
    background: linear-gradient(to right, var(--color_difuminado) 35%, transparent);

    z-index: 1;

    width: 100vw;
    height: 100%;
}

#difuminado_texto_dos {
    bottom: 0vw;
    left: 0;
    position: absolute;
    /*background: linear-gradient(to right, var(--color_fondo) 35%, transparent);*/
    background: linear-gradient(to top, rgb(255, 255, 255) 35%, transparent);

    z-index: 1;

    width: 100vw;
    height: 20%;
}



/* UBICACIÓN */
iframe {
    z-index: 9999;
    position: relative;

    width: 50%;

    border: solid var(--color_borde);
    border-width: 0.1vw 0;
}

#ubicacion {
    color: var(--color_texto_uno);
    
    position: relative;
    width: 50%;
    padding: 5vw 0 5vw 10vw;

    font-size: 1.7vw;

    gap: 4vw;   
    display: flex;
    flex-direction: column;
    z-index: 999;

    background-color: WHITE;
    
    border: solid var(--color_borde);
    border-width: 0.1vw 0.1vw 0.1vw 0;
}

#ubicacion div ul li i {
    margin-right: 1vw;
    color: var(--color_corporativo_dos);
}

#ubicacion ul {
    width: 100%;
    list-style: none;
}

#ubicacion li {
    margin: 1vw 0;
}

#ubicacion h3 {
    font-size: 2.5vw;
}

#texto_ubicacion div {
    width: 100%;  
}

#difuminado_ubicacion {
    top: -5vw;
    left: 0;
    position: absolute;
    background: linear-gradient(to top, #E9E9E9 10%, transparent);

    width: 100%;
    height: 5vw;
}

#horario {
    width: 100%;
}


/* INFORMACIÓN */
#informacion {
    color: var(--color_texto_uno);

    padding: 8vw 10vw;

    font-size: 7rem;
    display: flex;
    align-items: center;

    z-index: 999;

    position: relative;
    width: 100%;
    background-color: var(--color_fondo);
}

#informacion p {
    font-weight: 800;
    width: 50%;
    line-height: 1.2;
}

#comillas_uno {
    font-family: "Catamaran", serif;
    font-weight: 999;
    z-index: 9999;
}



/* ARTICULOS */
#articulos {
    position: relative;

    width: 100%;
    display: flex;
    flex-direction: column;

    z-index: 9999;

    padding: 5vw 10vw;
    /*background-color: var(--color_fondo);*/
    background-color: white;
}

#articulos h3 {
    font-size: 3rem;
    color: var(--color_texto_uno);
}

#articulos_gap {
    width: 100%;
    display: flex;
    justify-content: center;

    gap: 2vw;
}

.article {
    overflow: hidden;
    border-radius: 16px;

    width: 25vw;
    
    cursor: pointer;

    display: flex;
    flex-direction: column;
    border: solid var(--color_borde) 0.1vw;

    text-decoration: none;

}

.article_texto {
    background: white;
    border-top: solid var(--color_borde) 0.1vw;

    color: var(--color_texto_uno);

    padding: 1vw;
    font-size: 1.3vw;
}

.article:hover .article_texto {
    background: linear-gradient(to bottom left, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.44)), #d4d4d470;
}

.article_texto h4 {
    font-weight: 900;
}

.article_texto p {
    margin-top: 1vw;
}

.article_texto ul {
    list-style: none;
}

.article_texto hr {
    border: solid rgb(192, 192, 192) 0.1vw;
}

.imagen_articulo {
    width: 100%;
    height: 15vw;

    object-fit: cover; /* Ajusta la imagen sin deformarla */
    aspect-ratio: 16/9; /* Opcional: Define una relación de aspecto */
}









/* RESPONSIVE */
@media (max-width: 1230px) {
    #titulo { 
        margin-top: 10vw;
    }
    
    #titulo h1 {
        font-size: 6rem;
    }

    #imagen_titulo_fondo {
        display: none;
    }

    #contenido {
        padding: 0 6vw;
        display: flex;
        flex-direction: column;
    }

    #contenido div {
        padding: 2rem;
        width: 100%;
    }

    #informacion p {
        width: 100%;
    }

    #imagen_neumatico {
        display: none;
    }

    #imagen_neumatico_dos {
        display: none;
    }

    #texto_servicios {
        grid-template-columns: repeat(1, 1fr);
        
        width: 100%;
    }

    #imagen_coche {
        display: none;
    }
    
    #articulos_gap {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        gap: 2vw;
    }

    .article {
        width: 100%;
    }

    .imagen_articulo {
        height: 15rem;
    }

    .article_texto {
        padding: 1rem;
        font-size: 2rem;
    }
    
    #boton_sesion {
        display: none;
    }
}