*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;  
        font-family: fantasy;      
    }
    iframe{
        height: 400px;
        width: 100%;
        max-width: 600px;
      }

    /*

    FONDOOOOOOOOOOOOOOOOOOOOOOOOOO


    */

    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -3;
        background: radial-gradient(circle, rgba(20, 30, 48, 1) 0%, rgba(36, 59, 85, 1) 100%);
        overflow: hidden;
        /* Evita que el contenido del fondo se desborde */
    }

    .bubble {
        position: absolute;
        bottom: -50px;
        /*background-color: rgba(255, 255, 255, 0.5);*/
        border-radius: 50%;
        opacity: 0;
        animation: rise 10s infinite;
    }
    .bubble img{
        height: 100%;
        width: 100%;
        object-fit: contain;						
    }

    .bubble:nth-child(1) {
        width: 100px;
        height: 100px;
        left: 20%;
        animation-delay: 0s;
    }

    .bubble:nth-child(2) {
        width: 150px;
        height: 150px;
        left: 40%;
        animation-delay: 2s;
    }

    .bubble:nth-child(3) {
        width: 200px;
        height: 200px;
        left: 60%;
        animation-delay: 4s;
    }

    .bubble:nth-child(4) {
        width: 250px;
        height: 250px;
        left: 80%;
        animation-delay: 6s;
    }

    .bubble:nth-child(5) {
        width: 100px;
        height: 100px;
        left: 100%;
        animation-delay: 8s;
    }

    .content {
        position: relative;
        z-index: 1;
        text-align: center;
        padding-top: 20%;
        color: white;
        height: 2000px;
    }

    @keyframes rise {
        0% {
            transform: translateY(100vh);
            opacity: 1;
        }

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


    /*
    SLIDERS DEL INICIO



    ESTILOS:CSS

    */

    .slider{
        width: 100%;
        max-width: 100vw;
        height: auto;
        display: flex;
        margin: auto;
        position: relative;
        overflow: hidden;
        border-bottom: 2px solid #000000; 
        border-bottom-color: rgb(4, 0, 255);
    }
    
    .slider .list .item {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s;
    }
    .slider .list{
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        
    }
    
    .slider .list img{
        width: 100%;
        max-width: 100vw;
        height: 100%;
        object-fit: cover ;
    }
    .slider .buttons{
        position: absolute;
        top: 45%;
        left: 0%;
        width: 100%;
        display: flex;
        justify-content: space-between;
    
    }
    .slider .buttons button{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff5;
        color: #fff;
        border: none;
        
        font-weight: bold;
        background-color:white;
    }
    .slider .buttons a{
        background-color:white;
        padding:20px;
        color:#383c4c;                                
    }
    .slider .buttons .ante{
        clip-path: ellipse(49% 50% at 1% 50%);        
    }
    .slider .buttons .sigu{
        clip-path: ellipse(49% 50% at 100% 50%);
    }        
    .slider .dots{
        position: absolute;
        bottom: 10px;
        left: 0;
        color: #fff;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    .slider .dots li{
        list-style: none;
        width: 10px;
        height: 10px;
        background-color: #fff;
        margin: 10px;
        border-radius: 20px;
        transition: 0.5s;
    }
    .slider .dots li.active{
        width: 30px;
    }
    .slider .list .item.active {
        opacity: 1;
    }
    @media screen and (min-width: 1070px){
        .slider{height:750px;}
    }
    
    @media screen and (max-width: 768px){
        .slider{
            height: 200px;
            margin-top: 60px;
        }
        .slider .list img{
        object-fit: fill;
        }
    }

    /*
    SECTION OPCCIONES Y ICONOS



    ESTILOS:CSS

    */

    /*OPCIONESSSSSSSSSSSSSSSSSSSSSSS*/
    .xdbody2 {	
        background-color: #ffffff00;
        display: flex;
        background-size: cover;
        height: auto;	
        width: 100%;	
        margin: 0 auto;
        position: relative;
        justify-content: start;
        align-items: center;
        flex-direction: column;
    }

    .opciones {
        display: flex;
        align-items: center;
        width: 90%;
        border-radius: 15px;
        justify-content: space-between;	
        margin-top: 20px;    	
    }


    .imagenini1 {
        display: flex;
        width: 23%;
        height: auto;	
        overflow: hidden;
        position: relative; 
    }
    .imagenini1:hover {
        scale: 1.1;
    }
    .imagenini1::before {
        content: "";
        display: block;
        padding-top: 100%;	
    }
    .imagenini1 img {    
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        border-radius: 20px;
        z-index: 0;    
    }

    .imagenini1 img.active {
        opacity: 1;            
        z-index: 1;
    }

    .xdbody2 img {
        max-width: 100%;
        height: auto;
        display: block;	
        width: 100%;	
    }

    /*



    ICONOS



    */

    .iconosxd{
        display:flex;
        height:55px;
        width:90%;
        background-color:none;
        justify-content:space-between;
        margin-bottom:20px;    
        margin-top: 20px;
    }
    .iconos-element{
        display:flex;width:23%;height:100%;background-color:none;border:2px solid white;border-radius:10px;
    }
    .iconos-element-dentro1{
        display:flex;width:15%;height:100%;background-color:none;
    }
    .iconos-element-dentro2{
        display:flex;width:85%;height:100%;background-color:none;align-items:center;
    }
    .iconos-element-dentro2-p{
        color:white;margin-left:4%;
    }

    @media screen and (max-width:767px){
        .iconos-element-dentro1{
            margin:  auto 0;
            margin-left: 5px;
            height: 80%;
            
        }
        .iconosxd{
            height: 25px;
            margin-bottom: 5px;
        }
        .iconos-element-dentro2-p{
            font-size: 7px;
        }
    }


    /*


    REPUESTOS


    */

    .sectionOriginal3{
        display: flex;
        justify-content: center;
        align-items: start;
        height: auto;
        width: 100%;
        background-color: none;
        color: white;
        font-size: 2rem;
        flex-direction: column;
    }

    .sectionOriginal3 .sectionO31 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5vw;
        width: 100%;    
        color: white;
        font-size: 2rem;
        
    }
    .sectionOriginal3 .sectionO31 .element1 {
        position: relative;
        display: flex;    
        border-radius: 10px;
        width: 30%;
        height: 100%;    
        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        background-color: white;
        border: 5px solid white;
        align-items: center;
        justify-content: center;        
    }

    .sectionOriginal3 .sectionO32 {
        display: flex;
        justify-content: space-between;
        align-items: start;    
        height: auto;
        width: 90%;        
        margin: 0 auto ;
        color: white;
        font-size: 2rem;
        border-top: 2px solid white;    
    }

    .sectionOriginal3 .sectionO32 .element{
        margin-top: 20px;
        display: flex;
        justify-content: end;
        align-items: center;
        height: 300px;
        width: 23%;            
        color: white;
        font-size: 2rem;        
        flex-direction: column;
        border: 2px solid white;    
        
    }
    .sectionOriginal3 .sectionO32 .element .subdiv{
        display: flex;
        width: 100%;
        height: 80%;
        background-color: aliceblue;
    }
    .sectionOriginal3 .sectionO32 .element button{    
        width: 100%;
        height: 20%;
        background-color: transparent;  
        color: white;  

    }


    .sectionOriginal3 .sectionO33 {
        display: none;
        justify-content: start;
        flex-wrap: wrap;
        align-items: start;    
        height: auto;
        width: 90%;    
        margin: 0 auto;
        color: white;
        font-size: 2rem;
        opacity: 1;
        animation: riseelement 1s ease-in-out;  
        transform-origin: top;  
    }

    .sectionOriginal3 .sectionO33 .element2{
        margin-top: 20px;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: start;
        height: 50px;
        width: 23%;       
        /*background-color: #dc3545;   */  
        border-radius: 10px;
        color: white;
        font-size: 2rem;    
        flex-direction: column;
        border: 2px solid white;  
        margin-left: 20px;  
        
    }


    .sectionOriginal3 .sectionO33 .element22{
        margin-top: 20px;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: start;
        height: 50px;
        width: 23%;       
        /*background-color: #dc3545;   */  
        border-radius: 10px;
        color: white;
        font-size: 2rem;    
        flex-direction: column;
        border: 2px solid white;  
        margin-left: 20px;  
        
    }
    .sectionOriginal3 .sectionO33 .element222{
        margin-top: 20px;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: start;
        height: 50px;
        width: 23%;       
        /*background-color: #dc3545;   */  
        border-radius: 10px;
        color: white;
        font-size: 2rem;    
        flex-direction: column;
        border: 2px solid white;  
        margin-left: 20px;  
        
    }
    .sectionOriginal3 .sectionO33 .element2 p{
        margin-left: 20px;    
        /*font-size: medium;*/
        font-size: 10px;
        color: white;
    }
    .sectionOriginal3 .sectionO33 .element22 p{
        margin-left: 20px;    
        /*font-size: medium;*/
        font-size: 10px;
        color: white;
    }
    .sectionOriginal3 .sectionO33 .element222 p{
        margin-left: 20px;    
        /*font-size: medium;*/
        font-size: 10px;
        color: white;
    }



    .lol{
        display:none;
        width:100%;
        /*height:200px;*/
        /*background-color:red;*/
        justify-content:start;
        background-color:rgba(255, 255, 255, 0.425);
        flex-wrap:wrap;
        border-radius:20px;
    }
    .lol img{
        width: 100%;
        height: 70%;
        border-radius:20px;
        object-fit: contain;
    }
    .loldiv{
        display:flex;
        width: 23%;
        height:	350px;
        border-radius:20px;
        background-color:white;
        margin-bottom:20px;
        margin-top:45px;
        margin-left:20px;
        flex-direction:column;
        justify-content: space-between;
        

    }

    .loldiv p{
        /*color: #717171;*/
        color: white;
        font-size:19px;
        font-weight: bold;
        margin-left:20px;
    }



    .loldiv2{
        display:flex;
        width: 95%;
        height:	600px;
        border-radius:20px;
        background-color:white;
        margin: 0 auto;
        margin-bottom:20px;
        margin-top:45px;    
        flex-direction:column;    
    }

    .loldiv2 img{
        height:100%;
        object-fit:contain;
    }


    .loldivazul {
        display: flex;
        background-color: rgba(36, 59, 85, 1);
        height: 30%;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }


    .catalogo{
        display:flex;
        width:100%;
        height:50px;
        justify-content:center;
        align-items:end;    
    }
    .catalogo-white{
        color:  rgba(36, 59, 85, 1);
        background-color: white;
        border-radius: 20px;
        font-size: 20px;
        padding: 5px 25px;
    }



    .repuestosTbtnP{
        font-size: 15px;
        color:  rgba(36, 59, 85, 1);
    }

    .tittleRepuestos{
        font-weight:bold;font-size:40px;
        color:  rgba(36, 59, 85, 1);
    }

    @media screen and (max-width:767px){
        .repuestosTbtnP{
            font-size: 8px;
            font-family: fantasy;
        }
        .tittleRepuestos{
            font-size: 10px;
        }
        .sectionOriginal3 .sectionO31{
            height: 10vw;
        }
        .sectionOriginal3 .sectionO31 .element1{
            width: 30%;
        }
        .sectionOriginal3 .sectionO32 .element{
            height: 80px;
        }
        .catalogo{
            height: 30px;
        }
        .catalogo-white{
            font-size: 10px;
        }
        .element2 p{
            font-size: 7px;
            margin-left: 0px;
        }
        .sectionOriginal3 .sectionO33{
            margin-top: 40px;
        }
        .sectionOriginal3 .sectionO33 .element2{
            height: 30px;
        }
        .sectionOriginal3 .sectionO33 .element2 p{
            font-size: 7px;
            margin-left: 5px;
        }
        .element22 p{
            font-size: 7px;
            margin-left: 0px;
        }
        .sectionOriginal3 .sectionO33 .element2{
            height: 30px;
            margin-left: 5px;
        }
        .sectionOriginal3 .sectionO33 .element22{
            height: 30px;
            margin-left: 5px;
        }
        .sectionOriginal3 .sectionO33 .element222{
            height: 30px;
            margin-left: 5px;
        }
        .sectionOriginal3 .sectionO33 .element2 p{
            font-size: 7px;
            margin-left: 5px;
        }   
        .sectionOriginal3 .sectionO33 .element22 p{
            font-size: 7px;
            margin-left: 5px;
        }   
        .sectionOriginal3 .sectionO33 .element222 p{
            font-size: 7px;
            margin-left: 5px;
        }   
        
        .loldiv{
            margin-top: 20px;
            height:	150px;
            width: 20%; 
            margin-left: 5px;   
        }
        .loldiv p{
            margin-top: 5px;
            font-size: 2vw;
            margin-left: 2px;
        }
        .loldiv img{
            height: 50%;
            object-fit: contain;
        }
        .loldivazul{
            height: 50%;
        }
        .loldiv2{
            height: 200px;                
        }
        
        .sectionOriginal3 .sectionO32 .element button{
            font-size: 2vw;
        }
        
    }








    /*
    CONTACTANOS CONTENEDOR

    */
    .contactanos-container{
        display:flex;
        width:50%; 
        margin:0;
        height:100%;
        flex-direction:column;
        align-items:center;
        margin-top:10px;
    }

    .form-container {

        display: flex;
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 600px;
        box-sizing: border-box;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .form-container form {
        width: 100%;
    }

    .form-container:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
    }

    .form-container label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
        font-size: 12px;
    }

    .form-container input[type="text"],
    .form-container input[type="email"],
    .form-container textarea {
        display: flex;
        width: 100%;
        margin-bottom: 15px;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 12px;
        color: #333;
        box-sizing: border-box;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .form-container input[type="text"]:focus,
    .form-container input[type="email"]:focus,
    .form-container textarea:focus {
        border-color: #4facfe;
        box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
        outline: none;
    }

    .form-container textarea {
        resize: vertical;
        
        height: 100px;
    }

    .form-container input[type="submit"] {
        display: inline-block;
        width: 100%;
        padding: 10px;
        background: rgba(36, 59, 85, 1);
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .form-container input[type="submit"]:hover {
        background: #4facfe;
    }


    @media screen and (max-width:767px){
        .contactanos-container{
            width: 90%;
            margin: 0 auto;
        }
        iframe{
        
            height: 400px;
        }   
    }