/*Prefers reduced motion*/
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* Mobile XS and SM*/
@media screen and (320px <= width <= 768px) {

    /*Index*/
    .header-yellow {
        padding: 2rem 0;
    }

    .header__offer {
        padding-top: 2rem;
    }

    .accordion {
        width: 100%;
    }

    /*Cursos*/
    .layout__discount,
    .layout__notes {
        width: 85%;
    }

    /*Footer*/
    .footer .col-sm-9 h5 {
        margin: 1rem 0;
    }

    .footer__social {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

/*Mobile and Tablet*/
@media screen and (320px <= width <= 992px) {

    /*Index*/
    .layout__prices {
        gap: 2rem;
    }

    .prices__title {
        padding-bottom: 0;
    }
}

/*Mobile XS*/
@media screen and (320px <= width <= 577px) {

    /*Index*/
    .section__level {
        padding: 2rem 0;
    }

    .card-profesor-index {
        width: 80%;
    }

    /*Conócenos*/
    .card-profesor {
        width: calc(75% - 2.5rem);
    }

    .main__cta {
        text-align: center;
    }

    .btn__ver__cursos {
        width: 100%;
    }

    .container__metodologia {
        width: 100%;
    }

    .layout__equipo {
        width: 100%;
        flex-direction: column;
    }

    .card-profesor {
        width: 100%;
    }

    /*Cursos*/
    .layout__prices {
        gap: 3rem;
    }

    table, thead, tbody, th, td, tr {
        display: block; 
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
        margin-bottom: 1rem;
    }

    td {
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }


    /*Contacta*/
    .main__contact p {
        padding: 0 0.5rem;
    }

    .contact__form {
        width: 80%;
    }

    .organic__svg__contact {
        top: 35rem;
    }
}

/*Mobile SM*/
@media screen and (577px <= width <= 768px) {
    /*Index*/

    .card-profesor-index {
        width: 100%;
    }

    /*Conócenos*/
    .layout__equipo {
        width: 100%;
        flex-direction: row;
    }

    .card-profesor {
        width: 80%;
    }

    .btn__ver__cursos {
        width: 30%;
    }

    .container__metodologia {
        width: 85%;
    }
}

/*Tablet*/
@media screen and (768px <= width <= 992px) {
    /*Index*/

    .header-yellow {
        padding: 2rem 0;
    }

    .header__offer {
        padding-top: 2rem;
    }

    .accordion {
        width: 80%;
    }

    /*Conócenos*/
    .layout__equipo {
        width: 100%;
        flex-wrap: wrap;
    }

    .card-profesor {
        width: 50%;
    }

    .btn__ver__cursos {
        width: 40%;
    }

    .container__metodologia {
        width: 85%;
    }
}

@media screen and (992px <= width <= 1200px) {
    .card-profesor {
        width: 40%;
    }
}

@media screen and (1200px <= width <= 1400px) {
    .card-profesor {
        width: 30%;
    }
}