@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');





html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
     font-family: "Montserrat", sans-serif;
        
}

#arriba {
    position: fixed;
    background-color: black;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: black;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 12vh;
    animation: bajar 1s;
    color: white;
    border-bottom: solid 1px rgb(63, 57, 57);


}

/*                                         SECCION MANTENCION                                                          */

.rectangulo-titulo{
   
    margin-top: 10vh;
    background-color: #8080803d;
    width: 79%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10vh;
    padding-top: -18vh;
    height: 72%;
}

.logo-reparacion {
    position: absolute;
    left: 12%;
    height: 14%;
    top: 25%;
}

.logo-reparacion2{
    position: absolute;
    height: 14%;
    left: 12%;
}

#titulo-principal{
    font-size: 3.5rem;
    font-family: "Montserrat", sans-serif;
}

.descripcion-reparacion {
    font-size: 1.4rem;
    margin-bottom: 2%;
    width: 55%;
    text-align: center;
    background-color: #2fc5e045;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    border: 1px solid;
}



#pagina-mantencion{
    display: flex;
    height: fit-content;
    justify-content: center;
    align-items: center;
    background-repeat: repeat-x;
    background-image: url(assets/muro-hormigon-blanco.jpg);
    background-attachment: fixed;
    flex-direction: column;
    margin-top: 7vh;
    color: black;
}    
    
.contenedor-imagenes{
    display: flex;
    justify-content: center;
    column-gap: 9vh;
    margin-bottom: 5vh;
}
    

#pregunta{
    margin-top: 3%;
    margin-bottom: 5vh;
}

#titulo-imagenes{
    margin-top: 5vh;
    margin-bottom: 5vh;
}

#primer-paso{
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    column-gap: 53%;
    height: 11rem;
}

#segundo-paso{
    display: flex;
    font-size:1.2rem;
    flex-direction: column;
    column-gap: 20%;
    height: 11rem;
}

#tercer-paso{
    display: flex;
    font-size: 1.4rem;
    flex-direction: column;
    height: auto;
}

/****************************** FORMULARIO *********************************/

.formulario-reparacion{
    width: 100%;
    display: flex;
    justify-content: center;
}

.formulario-contacto{
    display: flex;
    flex-direction: column;
    margin-bottom: 10vh;
    width: 26%;
    align-items: center;
}

#cuarto-paso{
    display: flex;
    font-size: 1.4rem;
    flex-direction: column;
    
}

#subir-archivo{
    display: flex;
    justify-content: center;
}

.paso{
    margin-bottom: 2vh;
    padding-bottom: 4vh;
    width: 77%;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    flex-direction: row;
    align-items: center;
    font-size: 1.2rem;
}

#sub-paso-segundo{
    display: flex;
    flex-direction: row;
    column-gap: 5vh;
    font-size: 1.4rem;
    border-bottom: 1px solid gray;
}

#sub-paso-tercero{
    display: flex;
    font-size: 1.4rem;
    flex-direction: row;
    border-bottom: 1px solid gray;
    column-gap: 4vh;
}

#sub-paso-cuarto{
    display: flex;
    font-size: 1.4rem;
    flex-direction: column;
    border-bottom: 1px solid gray;
}

#sub-paso-quinto{
    display: flex;
    font-size: 1.4rem;
    flex-direction: row;
    border-bottom: 1px solid gray;
    column-gap: 4vh;
}

#sub-paso-sexto{
    display: flex;
    font-size: 1.4rem;
    flex-direction: row;
    border-bottom: 1px solid gray;
    column-gap: 7vh;
}

#sub-paso-septimo{
    display: flex;
    font-size: 1.4rem;
    flex-direction: row;
    border-bottom: 1px solid gray;
    column-gap: 10vh;
}

#sub-paso-octavo{
    display: flex;
    font-size: 1.4rem;
    flex-direction: row;
    border-bottom: 1px solid gray;
    column-gap: 6vh;
}

#luces{
    display: flex;
    text-align: center;
    justify-content: center;
}

.sub-subtitulo{
    display: flex;
    text-align: center;
    justify-content: center;
    padding-bottom: 3vh;
    font-size: 1.2rem;
    font-weight: 700;
}

.preguntas-reparaciones{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4vh;
    margin-right: 2vh;
    margin-left: 2vh;
    width: 79%;
    background-color: #8080803d;
}

.subtitulo{
    margin-top: 2%;
    text-align: center;
    
}

.sub-paso{
    margin-bottom: 5vh;
    margin-top: 3vh;
    padding-bottom: 7vh;
    justify-content: center;
    align-items: center;
    
}

.nombre, .celular, .correo{
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 1.2vh;
    height: 2.3rem;
}

.dato-formulario{
    margin-bottom: 2vh;
    width: 18rem;
    font-size: 1.7rem;
}

.btn-reparacion{
    background-color: black;
    width: 34%;
    font-size: 2.6rem;
    margin-top: 4vh;
    transition: all 0.3s ease; 
    margin-bottom: 6%;
    height: 5rem;
}

.btn-reparacion:hover{
    transfrom: scale(1.1);
}

.formato-celular{
    display:flex;
    align-items: center;
    font-size: 2rem;
    column-gap: 1vw;
}


select{
    height: 2.3rem;
    width: 18rem;
}

/************************************ ACORDEON *****************************************/

.accordion-button:hover {
    transform: none;
    transition: none;
}

.accordion-item{
    width: 51rem;
    font-size: 1.75rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #8080803d;
    border: 1px solid #8080803d;

}

.accordion-button{
    font-size: 1.75rem;
    font-weight: bold;
    width: 51rem;
    text-align: center;
    display: flex;
    justify-content: center;
}

.accordion-button::after {
    display: none;
}

.accordion-button:not(.collapsed) {
    background-color: #2FC5E0;
    color: #fff; /* Ajusta el color del texto si es necesario */
}

.accordion-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 56rem;
    padding-top: 4%;
}



/********************************* contacto ************************************/

.contacto-reparaciones{
    margin-top: 5%;
    margin-bottom: 5%;
    width: 57%;
    background-color: #8080803d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1%;
}

.contacto{
    display: flex;
    width: 80%;
    justify-content: space-between;
    font-size: 1.2rem;
}

#titulo-contacto{
    padding-bottom: 5%;
}

.texto-contacto{
    font-size: 1.2rem;
    font-weight: 500;
}

.click-contacto{
    font-size: 1.2rem;
    color: black;
    font-weight: 700;
    margin-bottom: 3%;
}

.click-contacto:hover{
    color: white;
}

/************************************* PASOS **************************************/

.pasos{
    background-color: #2fc5e02e;
    margin-top: 2%;
    padding-top: 3%;
    width: 57%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
}


/************************** RESPONSIVIDAD *******************************************/

/******************************************* 2550 ********************************************/
@media (min-width: 2550px){
    
    .descripcion-reparacion {
        font-size: 1.8rem;
    }
    
    .paso{
        font-size: 1.6rem;
    }
    
    .subtitulo{
        font-size: 2.4rem;
    }
    
    .contacto{
        font-size: 2.2rem;
    }
    
    .nombre, .celular, .correo{
        height: 3.3rem;
        width: 29rem;
    }
    
    .texto-contacto {
        font-size: 2.2rem;
    }
    
    .click-contacto {
        font-size: 2rem;
    }
    
}

/******************************************* 1600 ********************************************/
@media (min-width: 1600px){
    
    #paso-tres{
        width: 51rem;
    }

    

    .accordion-button{
        width: 51rem;
    }
    
}
/***************************************** 1440 ***************************************/
@media (max-width: 1440px){
    
    #cuarto-paso{
        align-items: center;
    }
    
    
    .logo-reparacion{
        top: 32%;
    }
    
}

/******************************************* 1366  ***************************************/
@media (max-width: 1367px){
    
    #paso-tres {
        width: 76%;
    }
    
    .nombre, .celular, .correo {
        font-size: 1.5rem;
    }    
}

/******************************************* 1280 x 1024 ***************************************/
@media (max-width: 1282px){
    
    
    .descripcion-reparacion{
        width: 67%;
    }
    
    #paso-tres {
        width: 81%;
    }
    
    .nombre, .celular, .correo {
        font-size: 1.4rem;
    }
    
}
/****************************************** 1024 ****************************************/
@media (max-width: 1024px){
    
    #sub-paso-segundo, #sub-paso-tercero, #sub-paso-quinto, #sub-paso-septimo, #sub-paso-octavo, #sub-paso-sexto{
        column-gap: 3vh;
        font-size: 1rem;
    }
    
    .formulario-contacto{
        width: 40%;
    }
    
    .nombre, .celular, .correo {
        font-size: 1.4rem;
    }
    
    #titulo-principal {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .descripcion-reparacion {
        font-size: 1rem;
    }
    
    .logo-reparacion{
        height: 10%;
    }
    
    .subtitulo {
        margin-top: 6%;
        text-align: center;
        font-size: 1.2rem;
    }

    .pasos{
        width: 84%;
    }
    
    .logo-reparacion2{
        display: none;
    }
    
    .paso{
        font-size: 1rem;
    }
    
    #paso-tres {
        width: 100%;
    }
    
    
    .contacto-reparaciones{
        width: 83%;
    }
    
}

/****************************************** 928 ****************************************/
@media (max-width: 933px){
    
     .subtitulo{
        margin-top: 4vh;
        font-size: 1.3rem;
    }
    
    #subir-archivo{
        font-size: 1rem;
    }
    
    .nombre, .celular, .correo{
        font-size: 1rem;
    }
    
    .formato-celular{
        font-size: 1rem;
    }
    
    .dato-formulario{
        font-size: 1rem;
    }
    
    .btn-reparacion{
        width: 100%;
        font-size: 1rem;
    }
    
    #cuarto-paso{
        align-items: center;
    }
    
    .sub-subtitulo{
        font-size: 1rem;
    }

    #primer-paso{
        font-size: 1rem;
    }
    
    #sub-paso-segundo{
        font-size: 0.9rem;
    }
    
    #sub-paso-tercero{
        font-size: 0.9rem;
    }
    
    #sub-paso-quinto{
        font-size: 0.9rem;
    }
    
    #sub-paso-sexto{
        font-size: 0.9rem;
    }
  
    #sub-paso-septimo{
        font-size: 0.9rem;
    }
    
    #sub-paso-octavo{
        font-size: 0.9rem;
    }
    
    #paso-tres {
        width: 51rem;
    }
    
    .btn-reparacion {
        width: 63%;
        height: 3rem;
    }
    
    .nombre, .celular, .correo{
        width: 17rem;
        height: 1.7rem;
    }
    
    .logo-reparacion{
        display: none;
    }
    
    
    
    
    
    
}

/****************************************** 917 ****************************************/
@media (max-width: 917px){
    
    footer {
        height: auto !important;
    }
}

/****************************************** 896 ****************************************/
@media (max-width: 896px){

    .accordion-button, .accordion-item, .accordion-body, #paso-tres{
        width: 43rem;
    }
    
}

/****************************************** 894 ****************************************/
@media (max-width: 894px){
    
    .subtitulo{
        margin-top: 4vh;
        font-size: 1.3rem;
    }
    
    #subir-archivo{
        font-size: 1rem;
    }
    
    .nombre, .celular, .correo{
        font-size: 1rem;
    }
    
    .formato-celular{
        font-size: 1rem;
    }
    
    .dato-formulario{
        font-size: 1rem;
    }
    
    .btn-reparacion{
        width: 90%;
        font-size: 1rem;
    }
    
    #cuarto-paso{
        align-items: center;
    }
    
    .sub-subtitulo{
        font-size: 1rem;
    }

    #primer-paso{
        font-size: 1rem;
    }
    
    #sub-paso-segundo{
        font-size: 0.9rem;
    }
    
    #sub-paso-tercero{
        font-size: 0.9rem;
    }
    
    #sub-paso-quinto{
        font-size: 0.9rem;
    }
    
    #sub-paso-sexto{
        font-size: 0.9rem;
    }
  
    #sub-paso-septimo{
        font-size: 0.9rem;
    }
    
    #sub-paso-octavo{
        font-size: 0.9rem;
    }
    
    footer{
        height: auto;
    }
    
}    
/************************************* 813 ****************************************/
@media (max-width: 813px){

    

    .accordion-button, .accordion-item, .accordion-body, #paso-tres{
        width: 39rem;
    }
    
    .nombre, .celular, .correo {
        width: 14rem;
    }
}

/******************************* 802 **********************************/
@media (max-width: 800px){
    
    #sub-paso-segundo, #sub-paso-tercero, #sub-paso-quinto {
        font-size: 0.7rem;
    }
    
    #parpadeos{
        height: 4vh;
        width: 11vw;
    }
    
    .formulario-contacto{
        width: 42%;
    }
    
    .accordion-item {
        width: 46rem;
    }
    
    .accordion-button{
        width: 46rem;
    }
    
    #paso-tres {
        width: 46rem;
    }
    
    .btn-reparacion {
        width: 20rem;
        font-size: 1rem;
        height: 3rem;
    }
    
    .accordion-body{
        width: 46rem;
    }
        
}

/****************************************** 770 ****************************************/
@media (max-width: 770px){

    .accordion-button, .accordion-body, .accordion-item, #paso-tres {
        width: 37rem;
    }
    
}

/****************************************** 742 ****************************************/
@media (max-width: 742px){
    
    .texto-contacto {
        text-align: center;
    }
}

/****************************************** 732 ****************************************/
@media (max-width: 732px){
    
    .accordion-button, .accordion-body, .accordion-item, #paso-tres {
        width: 35rem;
    }
    
    .contacto{
        font-size: 1rem;
    }
    
    .texto-contacto {
        font-size: 1rem;
    }
}

/****************************************** 721 ****************************************/
@media (max-width: 721px){
    
    .accordion-button, .accordion-item, .accordion-body, #paso-tres {
        width: 35rem;
    }
    
    .nombre, .celular, .correo {
        width: 12rem;
    }
    
    .contacto{
        font-size: 1rem;
    }
    
    
}


/******************************* 668 **********************************/
@media (max-width: 668px){
    
    #titulo-principal {
        font-size: 2.2rem;
    }
    
    .accordion-button {
        width: 33rem;
    }
    
    .accordion-item {
        width: 33rem;
    }
    
    #paso-tres {
        width: 33rem;
    }
    
    .accordion-body {
        width: 39rem;
    }
    
    .contacto{
        font-size: 0.9rem;
    }
    
    .nombre, .celular, .correo {
        width: 13rem;
    }
    
    .texto-contacto, .click-contacto {
        font-size: 0.8rem;
    }
}

/******************************* 640 **********************************/
@media (max-width: 640px){
    
    .nav-list {
        font-size: 0.4rem;
    }
    
    #titulo-principal {
        font-size: 1.5rem;
    }
    
    .descripcion-reparacion {
        font-size: 0.7rem;
    }
    
    .accordion-body {
        width: 32rem;
    }
    
    .accordion-button {
        width: 32rem;
        font-size: 1rem;
    }
    
    .accordion-item {
        width: 32rem;
    }
    
    #paso-tres {
        width: 32rem;
    }
    
    .paso {
        font-size: 1rem;
        display: flex;
        flex-direction: column;
    }
    
    
    select{
        text-align: center;
    }
    
    .contacto {
        flex-direction: column;
    }
    
    .contacto {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .texto-contacto {
        font-size: 0.8rem;
    }
    
    .click-contacto {
        font-size: 0.8rem;
    }
    
    
}

/******************************* 599 **********************************/
@media (max-width: 599px){
    
    .preguntas-reparaciones{
        width: 90%;
    }
    
      .nav-list {
    font-size: 0.4REM;
      }
}

/******************************* 570 **********************************/
@media (max-width: 570px){
    
    #pagina-mantencion{
        margin-top: 4vh;
    }
    
}

/******************************* 568 x 320 **********************************/
@media (width: 568px) and (height: 320px){
    
    .accordion-button, .accordion-body, .accordion-item, #paso-tres {
    width: 27rem;
    }
}

/******************************* 533 x 320 **********************************/
@media (width: 533px) and (height: 320px){
    
    .preguntas-reparaciones{
        width: 98%;
    }
    
}

/******************************* 430 **********************************/
@media (max-width: 431px){
    
    #pagina-mantencion{
        margin-top: 6vh
    }
    
    .contenedor-imagenes{
        column-gap: 3vh;
    }
    
    #titulo-principal{
        text-align: center;
    }
    
    #subir-archivo{
        width: 66%;
    }
    
    #cuarto-paso{
        align-items: center;
    }
    
    .formulario-contacto{
        width: 80%;
    }
    
    .accordion-button {
        width: 21rem;
    }
    
    .accordion-item {
        width: 21rem;
    }
    
    #paso-tres {
        width: 21rem;
    }
    
    .logo-reparacion {
        display: none;
    }
    
    .descripcion-reparacion {
        width: 90%;
    }
    
    .pasos {
        width: 95%;
    }
    
    
    .preguntas-reparaciones{
        padding-top: 0;
    }
    
    .contacto-reparaciones {
        width: 100%;
    }
    
    .accordion-body {
        width: 21rem;
    }
    
    #subir-archivo {
        width: 73%;
    }
    
}

/************************************* 414 ***********************************/
@media (max-width: 414px){
    
    #pagina-mantencion{
        margin-top: 6vh
    }
    
    #primer-paso, #sub-paso-segundo, #sub-paso-tercero, #sub-paso-quinto, #sub-paso-sexto ,#sub-paso-septimo ,#sub-paso-octavo{
        flex-direction: column;
    }
    
    .contenedor-imagenes{
        column-gap: 3vh;
    }
    
    #titulo-principal{
        text-align: center;
    }
    
    #subir-archivo{
        width: 66%;
    }
    
    #cuarto-paso{
        align-items: center;
    }
    
    .formulario-contacto{
        width: 80%;
    }
    
    .texto-contacto {
        text-align: center;
    }
    
    .btn-reparacion {
        width: 90%;
    }
}

/****************************************** 376 ****************************************/
@media (max-width: 376px){
    
    .accordion-button, .accordion-item, .accordion-body, #paso-tres {
        width: 18rem;
    }
    
    .paso {
        text-align: center;
    }
}

/****************************************** 360 x 780 ****************************************/
@media (max-width: 362px){
    
    .accordion-button {
        width: 18rem;
    }
    
    .accordion-body {
        width: 18rem;
    }
    
    .accordion-item {
        width: 18rem;
    }
    
    #paso-tres {
        width: 18rem;
    }
    
}

/****************************************** 322 ****************************************/
@media (max-width: 322px){
    
    .preguntas-reparaciones{
        width: 98%;
    }
    
    
.rectangulo-titulo{
    width: 95%;
}
    
}