/* Google fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {

    font-family: 'Poppins', sans-serif;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    scroll-padding-top: 4rem;

    scroll-behavior: smooth;

    list-style: none;

    text-decoration: none !important;

}

.swal2-container {

    z-index: 10001 !important;

}

/* Variables */

:root {

    --main-color: #5085ca;

    --second-color: #edeae3;

    --text-color: #1b1b1b;

    --bg-color: #fff;

    --bg-transparent-color: rgba(0, 0, 0, 0.1);



    /* Box Shadow */

    --box-shadow: 2px 2px 10px 4px rgb(14 55 54 / 15%);

}



ol {

    list-style-type: decimal;

}



section {

    padding: 50px 100px;

}



img {

    width: 100%;

}



body.active {

    --main-color: #edeae3;

    --second-color: #edeae3;

    --bg-color: #1b1b1b;

    --text-color: #fff;



    /* Box Shadow */

    --box-shadow: 2px 2px 10px 4px rgba(255, 255, 255, 0.15);

}



body {

    color: var(--text-color);

    background: var(--bg-color);

}



.flex-center {

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Scroll to top button */

.scrollToTop-btn {

    z-index: 99999;

    position: fixed;

    right: 0;

    bottom: 20px;

    width: 45px;

    height: 45px;

    background: var(--second-color);

    color: var(--text-color);

    font-size: 2em;

    border-radius: 5px;

    cursor: pointer;

    opacity: 0;

    transition: .5s ease;

}



.scrollToTop-btn.active {

    right: 20px;

    pointer-events: all;

    opacity: 1;

}



/* Menú */

header {

    position: fixed;

    width: 100%;

    top: 0;

    right: 0;

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 100px;

    transition: 0.5s linear;

}



header.shadow {

    background: #1b1b1b;

    box-shadow: var(--box-shadow);

}



.logo {

    color: #fff;

    font-size: 1em;

}



.logo-nombre {

    font-weight: 400;

}



.logo-bold {

    font-weight: 700;

}



.navbar {

    display: flex;

}



.navbar a {

    padding: 8px 17px;

    color: #fff;

    font-size: 1rem;

    text-transform: uppercase;

    font-weight: 500;

}



.navbar a:hover {

    background: #5085ca;

    border-radius: 0.2rem;

    transition: 0.2s all linear;

}



.navbar .active a {

    color: var(--main-color);

}



.navbar .active a:hover {

    color: #fff;

}



.navbar .bx {

    padding: 5px 15px;

    color: #fff;

    font-size: 1rem;

    cursor: pointer;

}



#menu-icon {

    color: var(--bg-color);

    font-size: 24px;

    z-index: 100001;

    cursor: pointer;

    display: none;

}



/* Home */

.home {

    position: relative;

    width: 100%;

    height: 100vh;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(17rem, auto));

    align-items: center;

    gap: 1.5rem;

    background-color: rgba(0, 0, 0, 0.5);

    overflow: hidden;

}



.home-text h1 {

    font-size: 3.4rem;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.home-text p {

    font-size: 0.938rem;

    color: #fff;

    margin: 0.5rem 0 1.4rem;

}



.home-img img {

    max-height: 65vh;



    object-fit: contain;

}





.swiper-pagination-bullet {

    background-color: #ffffff;

    width: 100px;

    height: 4px;

    border-radius: 2px;

}



.btn {

    padding: 10px 40px;

    border-radius: 0.3rem;

    background: var(--main-color);

    color: var(--bg-color);

    font-weight: 500;

}



.btn:hover {

    background: var(--second-color);

    color: var(--text-color);

}





/* About */

.about {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));

    gap: 1.5rem;

    align-items: center;

}



.about-img img {

    border-radius: 0.5rem;

}



.about-text-2 {

    text-align: center;

}



.about-img-2 img {

    width: 70px;

    height: 70px;

    margin: 20px;

    object-fit: cover;

}



body.active .about-img-2 img {

    filter: brightness(100)

}



.about-text h2,

.about-text-2 h2 {

    font-size: 1.8rem;

    text-transform: uppercase;

    color: var(--main-color);

}



.about-text p .about-text-2 p {

    font-size: 0.938rem;

    margin: 0.5rem 0 1.1rem;

}



.valores-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, auto));

    gap: 2rem;

    margin-top: 2rem;

}



.valores-text-2 {

    text-align: center;

}



.valores-img-2 img {

    width: 70px;

    height: 70px;

    margin: 20px;

    object-fit: cover;

}



body.active .valores-img-2 img {

    filter: brightness(100)

}



.valores-text-2 h2 {

    font-size: 1rem;

    text-transform: uppercase;

    color: var(--main-color);

}



.valores-text-2 p {

    font-size: 0.8rem;

    margin: 0.5rem 0 1.1rem;

}



.heading {

    text-align: center;

}



.heading h2 {

    font-size: 1.8rem;

    text-transform: uppercase;

    color: var(--main-color);

}



/* ***************** Services ***************** */

.services .container .content {

    width: 100%;

}



.services-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, auto));

    gap: 1.5rem;

    margin-top: 2rem;

}



.service-card {

    padding: 10px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 0.5rem;

    box-shadow: var(--box-shadow);

    background: var(--bg-color);

    transition: .3s ease;

}



.service-card img {

    width: 100%;

    height: 250px;

    object-fit: contain;

    object-position: center;

    padding: 20px;

    background: #f1f1f1;

    border-radius: 0.5rem;

}



.service-card h3 {

    font-size: 1rem;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0.5rem 0 0.5rem;

    color: var(--text-color);

    text-align: center;

}



.service-card>i {

    color: var(--text-color);

    font-size: 3em;

    margin-bottom: 30px;

}



.service-card .learn-more-btn {

    color: var(--text-color);

    cursor: pointer;

    transition: .3s ease;

    text-align: center;

}



.service-card:hover .learn-more-btn {

    color: var(--main-color);

}



.service-card .learn-more-btn i {

    transition: .3s ease;

}



.service-card:hover .learn-more-btn i {

    transform: translateX(10px);

    color: var(--main-color);

}



.service-card:hover {

    transform: scale(1.03);

}



.services-modal {

    z-index: 99999;

    position: fixed;

    width: 100%;

    height: 100vh;

    top: 0;

    left: 0;

    background: var(--bg-transparent-color);

    backdrop-filter: blur(10px);

    visibility: hidden;

    opacity: 0;

    transition: .3s ease;

}



.services-modal.active {

    visibility: visible;

    opacity: 1;

}



.services-modal-body {

    position: relative;

    background: var(--bg-color);

    max-width: 600px;

    margin: 20px;

    padding: 40px;

    border-radius: 10px;

    box-shadow: var(--box-shadow);

    transform: translateY(-50px);

    transition: .5s ease;

}



.services-modal.active .services-modal-body {

    transform: translateY(0);

}



.services-modal-body .modal-close-btn {

    position: absolute;

    top: 0;

    right: 0;

    margin: 20px;

    cursor: pointer;

}



.services-modal-body h3 {

    font-size: 2em;

}



.services-modal-body h4 {

    font-size: 1.3em;

    font-weight: 600;

    margin: 15px 0 10px;

}



.services-modal-body ul li {

    margin-top: 15px;

}



.services-modal-body ul li i {

    color: var(--text-color);

}



/* ***************** colab section ***************** */

.colab-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, auto));

    gap: 1.5rem;

    margin-top: 2rem;

}



.colab-container .box {

    padding: 20px;

    box-shadow: var(--box-shadow);

    border-radius: 0.5rem;

    display: flex;

    align-items: center;

    gap: 1rem;

}



.colab-container .box:hover {

    transform: scale(1.03);

}



.colab-container .box .dates p {

    font-size: 0.8rem;

}



.colab-container .box .dates h2 {

    font-size: 1rem;

    font-weight: 600;

    margin: 0.5rem 0 0.5rem;

}



.colab-container .box img {

    width: 125px;

    height: 100%;

    border-radius: 10px;

    object-fit: cover;

}



.colab-container .box:hover {

    background: var(--second-color);

    transition: 0.2s all linear;

}



.footer {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(155px, auto));

    gap: 1.5rem;

}



.footer-box h2 {

    font-size: 1.2rem;

    font-weight: 600;

    margin-bottom: 10px;

}



.footer-box p {

    font-size: 0.938rem;

    margin-bottom: 10px;

}



.social {

    display: flex;

    align-items: center;

    column-gap: 0.5rem;

}



.social a .bx {

    font-size: 12px;

    color: var(--text-color);

    padding: 10px;

    background: var(--second-color);

    border-radius: 0.2rem;

}



.active a .bx{

    background-color: var(--bg-color);

    

}



.social a .bx:hover {

    background: var(--main-color);

    color: var(--bg-color);

}



.footer-box h3 {

    font-weight: 600;

    margin-bottom: 10px;

}



.footer-box li a {

    color: var(--text-color);

}



.footer-box li a:hover {

    color: var(--main-color);

}



.contact {

    display: flex;

    flex-direction: column;

    row-gap: 0.5rem;

}



.contact span {

    display: flex;

    align-items: center;

}



.contact i {

    font-size: 20px;

    margin-right: 1rem;

}



.copyright {

    padding: 20px;

    text-align: center;

    background: var(--second-color);

}



body.active .copyright {

    color: black !important; /* Cambia el color del texto de los derechos reservados a negro */

}



/* ********************************** BLOG ********************************** */

.blog {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.entrada {

    padding: 10px;

    display: flex;

    gap: 10px;

    justify-content: center;

    border-radius: 20px;

    box-shadow: var(--box-shadow);

    background: var(--bg-color);

    transition: .3s ease;

}



.entrada_imagen {

    flex: 1;

}



.entrada_imagen img {

    border-radius: 10px;

    width: 100%;

    height: 100%;

    background: #f1f1f1;

    object-fit: cover;

}



.entrada_contenido {

    flex: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

}



.entrada_contenido h3 {

    font-size: 1rem;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0.5rem 0 0.5rem;

    color: var(--text-color);

}



.entrada_contenido p {

    font-size: 0.8rem;

}



.entrada_contenido>i {

    color: var(--text-color);

    font-size: 3em;

    margin-bottom: 30px;

}



.entrada_contenido .learn-more-btn {

    color: var(--text-color);

    cursor: pointer;

    transition: .3s ease;

    text-align: end;

}



.entrada_contenido .learn-more-btn i {

    transition: .3s ease;

}



.entrada:hover {

    transform: scale(1.03);

}



.entrada:hover .learn-more-btn {

    color: var(--main-color);

}



.entrada:hover .learn-more-btn i {

    transform: translateX(10px);

    color: var(--main-color);

}



.entrada:last-of-type {

    border-bottom: 0;

    margin-bottom: none;

}



/* ********************************** BLOG ARTICLE ********************************** */

.blog_content {

    width: 75%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    border-bottom: 1px solid var(--main-color);

}



.blog_content h2,

.blog_content h3 {

    color: var(--main-color);

}



.blog_content img {

    height: 250px;

    object-fit: contain;

    margin: 0 auto;

}



.blog_content ol li {

    list-style: decimal;

    margin-left: 2rem;

    line-height: 2rem;

}



.blog_content ul li {

    list-style: disc;

    margin-left: 2rem;

    line-height: 2rem;

}



.blog_content ol li::marker,

.blog_content ul li::marker {

    color: var(--main-color);

}



.public {

    display: flex;

    justify-content: space-between;

}



.public p {

    width: auto;

    font-style: italic;

    color: var(--main-color);

}



.coments {

    width: 75%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.coments_heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.coments_heading .btn,

.coments_new .btn {

    font-size: .8em;

    border: none;

    cursor: pointer;

}



.coments_new {

    display: none;

}



.coments_new form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.coments_new .row {

    display: flex;

    width: 100%;

    gap: 10px;

}



.coments_new .row .campo {

    display: flex;

    flex-direction: column;

    width: 50%;

}



.coments_new .campo label {

    font-size: .8em;

    padding: 10px;

}



.coments_new textarea,

.coments_new input,

.coments_new select {

    /* width: 100%; */

    background: var(--bg-color);

    border: 1px solid var(--second-color);

    border-radius: 20px;

    color: var(--text-color);

    padding: .75rem;

    font-size: .8em;

    resize: none;

}



.coments_new .row .campo.comentario {

    width: 100%;

}



.coment {

    border-bottom: 1px solid var(--second-color);

}



.coment:last-of-type {

    border-bottom: 0;

}



.coment_info {

    display: flex;

    justify-content: space-between;

}



.coment_info h4 {

    font-size: 1em;

}



.coment_info p,

.coment_content p {

    font-size: .8em;

}



.coment_content {

    padding: 20px;

}



/* ***************** Courses ***************** */

.course .container .content {

    width: 100%;

}





.course-list2 {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, auto));

    gap: 1.5rem;

    margin-top: 2rem;

}





.course-list {

    display: grid;

    grid-template-columns: repeat(4, 1fr);  /* 4 columnas fijas, cada una con un 25% de ancho */

    gap: 1.5rem;

    margin-top: 2rem;

}





.course-card {

    padding: 10px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 0.5rem;

    box-shadow: var(--box-shadow);

    background: var(--bg-color);

    transition: .3s ease;

}



.course-card img {

    width: 100%;

    height: 200px;

    object-fit: contain;

    object-position: center;

    object-fit: cover;

    background: #f1f1f1;

    border-radius: 0.5rem;

}



.course-card h3 {

    font-size: 1rem;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0.5rem 0 0.5rem;

    color: var(--main-color);

}



.course-card:hover {

    transform: scale(1.03);

}



.course-card .docent {

    font-size: .8em;

    margin: 0.5rem 0 0.5rem;

}



.course-card .docent span {

    font-weight: 600;

}



.course-card .dates {

    font-size: 1em;

    display: flex;

    justify-content: space-between;

    margin: 0.5rem 0 0.5rem;

    font-weight: 300;

}



.course-card .dates .price span:first-child {

    font-size: .8em;

    font-weight: 300;

    text-decoration: line-through !important;

    color: var(--text-color);

}



.course-card .dates .price span:last-child {

    font-weight: 600;

    margin-left: 10px;

    color: var(--main-color);

    text-decoration: none;

}



.course-card .cart,

.course-details .cart {

    width: 100%;

    display: flex;

    justify-content: center;

    margin: 0.5rem 0 0rem;

}



.course-card .cart a,

.course-details .cart a {

    width: 100%;

    text-align: center;

    padding: .5rem;

    color: var(--text-color);

    border: 2px solid var(--main-color);

    border-radius: 5px;

    text-transform: uppercase;

    cursor: pointer;

}



.course-card .cart a:hover,

.course-details .cart a:hover {

    background: var(--main-color);

    color: var(--bg-color);

    transition: 0.2s all linear;

}



.course-details {

    padding: 25px;

}



.course-details h2 {

    font-size: 2em;

    color: var(--main-color);

    text-transform: uppercase;

}



.course-details .info {

    display: flex;

    justify-content: space-between;

    font-size: 0.9em;

}



.course-details p {

    margin: 1rem 0 0rem;

}



.course-details p span {

    font-weight: 600;

}



.course-details .price {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 1rem 0 0rem;

}



.course-details .price .discount p {

    padding: 10px 1rem;

    color: var(--bg-color);

    background: var(--main-color);

    border-radius: 4px;

    font-size: 0.8em;

    font-weight: 500;

}



.course-details .price .final span:first-child {

    font-size: .8em;

    font-weight: 300;

    text-decoration: line-through;

    color: var(--text-color);

}



.course-details .price .final span:last-child {

    font-weight: 600;

    margin-left: 10px;

    color: var(--main-color);

    text-decoration: none;

}



.course-details .cart {

    width: 100%;

    display: flex;

    justify-content: center;

    margin: 1.5rem 0 0rem;

}



.course-information {

    width: 100%;

    padding: 20px;

}



.course-information .navbar-tabs {

    display: flex;

    justify-content: space-between;

}



.course-information .navbar-tabs a {

    color: var(--text-color);

}



.course-information .navbar-tabs .nav-link {

    text-decoration: none;

    color: var(--second-color);

    font-size: 1rem;

    font-weight: 500;

    border-bottom: 5px solid transparent;

    padding: 0 20px 15px;

    text-align: center;

    flex-grow: 1;

    transition: color 0.2s;

}



.course-information .navbar-tabs .nav-link.active {

    border-color: var(--main-color);

    color: var(--text-color);

    font-weight: 600;

}



@media (max-width: 1200px) {

    .course-list {

        grid-template-columns: repeat(3, 1fr);  /* 3 columnas en pantallas medianas */

    }

}



@media (max-width: 900px) {

    .course-list {

        grid-template-columns: repeat(2, 1fr);  /* 2 columnas en pantallas pequeñas */

    }

}



@media (max-width: 600px) {

    .course-list {

        grid-template-columns: 1fr;  /* 1 columna en pantallas muy pequeñas */

    }

}



/** tabs **/

.tabs {

    overflow: hidden;

}



.tabs__wrapper {

    padding: 25px;

}



@media (min-width: 992px) {

    .tabs__wrapper {

        padding: 30px;

    }

}



.tabs-content {

    background-color: #444;

}



.tabs-content>* {

    height: 30px;

    float: left;

    position: relative;

    transition: left 0.3s;

    left: 0;

}



.tabs-content>*.tab-active {

    height: auto;

}



.tabs h2,

.tabs p {

    margin: 0.5rem 0;

}



.tabs section {

    margin: 0;

    padding: 10px;

}



/* Style the tabs*/

.accordion .accordion-header {

    background-color: var(--bg-color);

    color: var(--text-color);

    cursor: pointer;

    width: 100%;

    text-align: left;

    border: none;

    outline: none;

    transition: 0.4s;

    padding: 20px 0;

}



@media (min-wudth: 992px) {

    .accordion .accordion-header {

        padding: 20px 15px;

    }

}



.panel {

    padding: 0;

    background-color: var(--bg-color);

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.2s ease-out;

}



.accordion .accordion-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid var(--second-color);

}



.accordion .course-desc.active {

    margin-bottom: 20px;

}



.accordion .accordion-header:first-child {

    border-top: 0;

}



.accordion .accordion-header h3 {

    font-size: 1rem;

    font-weight: 500;

    margin-bottom: 0;

    padding-right: 20px;

    line-height: 1.3;

}



.accordion .accordion-header strong {

    color: var(--main-color);

    font-weight: 700;

    margin-right: 5px;

}





.course-desc h4 {

    font-weight: 600;

    font-size: 1rem;

    color: var(--main-color);

    margin: 25px 0 10px;

}



.course-desc p {

    margin-bottom: 10px;

}



.course-desc ul {

    list-style: none;

    padding: 0;

    line-height: 1.4;

}



.course-desc ul li::before {

    content: "- ";

}



.course-desc ul li:not(:first-child) {

    margin-top: 2px;

}



.course-desc__foot {

    padding: 30px 0 25px;

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    font-size: 1rem;

    font-weight: 600;

    color: var(--black);

}



.course-desc__foot p {

    width: 50%;

}



@media (min-width: 768px) {

    .course-desc__foot p {

        width: auto;

        flex: 1;

    }

}



.docente__header {

    margin: 20px 0;

    display: flex;

    align-items: center;

}



.docente__header img {

    width: 70px;

    height: 70px;

    object-fit: cover;

    border-radius: 50%;

    margin-right: 20px;

}



.docente__header h2 {

    color: var(--text-color);

    font-size: 1rem;

    margin-bottom: 0;

}



.docente p {

    font-size: 1rem !important;

    line-height: 1.4;

}



.course-faq {

    padding: 30px 0;

    border-bottom: 1px solid var(--second-color);

}



.course-faq:last-child {

    border-bottom: 0;

}



.course-faq h4 {

    font-size: 1rem;

    text-decoration: none;

    position: relative;

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}



.course-inscription .card {

    padding: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    position: sticky;

    top: 7.5rem;

    background-color: var(--bg-color);

    color: var(--text-color);

}



.course-inscription .card .form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.material-input {

    font-size: 14px;

    position: relative;

}



.material-input input {

    width: 100%;

    border: none;

    border: 1px solid var(--main-color);

    padding: 15px 15px 5px 15px;

    font-size: 1em;

    border-radius: 10px;

    background: none;

    color: var(--text-color);

}



.material-input label {

    font-weight: 500;

    text-align: left;

    pointer-events: none;

    color: var(--main-color);

    position: absolute;

    top: 50%;

    left: 1em;

    transform: translateY(-50%);

    transition: font-size 0.2s, top 0.2s, left 0.2s, color 0.2s;

}



.material-input input:focus+label,

.material-input input:not(:placeholder-shown)+label {

    font-size: 0.7em;

    top: 1em;

    left: 1.5em;

    color: var(--main-color);

}



.course-inscription .card .form button {

    cursor: pointer;

    border: none;

}



/* ********************************** CONTACTO ********************************** */

.contacto-bg {

    background-image: url(../img/empresa/contacto.jpg);

    height: 20rem;

    margin-top: 2rem;

    background-size: cover;

    background-repeat: no-repeat;

    border-radius: 10px;

}



.contact .formulario {

    background-color: var(--bg-color);

    margin: -5rem auto 0 auto;

    width: 95%;

    padding: 3rem;

    border-radius: 10px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 2rem;

}



.formulario .campo-completo {

    grid-column-start: 1;

    grid-column-end: 3;

}



.formulario .campo {

    display: grid;

    grid-template-columns: 100px 1fr 1fr;

    margin-bottom: 2rem;

    column-gap: 2rem;

    align-items: center;

}



.campo .campo-dos {

    grid-column-start: 2;

    grid-column-end: 4;

}



.formulario .campo__label {

    text-align: right;

    color: var(--text-color);

    font-size: 0.9rem;

}



.formulario .campo__field {

    width: 100%;

    height: 40px;

    padding: .5rem;

    background: none;

    color: var(--text-color);

    border: 1px solid var(--text-color);

    border-radius: 10px;

}



.formulario select {

    width: 100%;

    height: 40px;

    padding: .5rem;

    background: none;

    color: var(--text-color);

    border: 1px solid var(--text-color);

    border-radius: 10px;

}



.formulario .campo__field--textarea {

    height: 10rem;

}



.formulario .btn {

    border: none;

    width: 100%;

}



/* ********************************** LOGIN ********************************** */

.login-bg {

    background-image: url(../img/bg_login.jpg);

    height: 20rem;

    margin-top: 2rem;

    background-size: cover;

    background-repeat: no-repeat;

    border-radius: 10px;

}



.login .formulario-login {

    background-color: var(--bg-color);

    margin: -5rem auto 0 auto;

    width: 95%;

    padding: 5rem;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

}



.login .campo {

    width: 400px;

    display: flex;

    flex-direction: column;

    text-align: center;

    justify-content: center;

    gap: 1rem;

}



.login label {

    font-weight: 500;

    font-size: 1.2em;

}



.login input {

    width: 100%;

    padding: .5rem;

    background: none;

    color: var(--text-color);

    border: 1px solid var(--text-color);

    border-radius: 10px;

    font-weight: 400;

}



.login input::placeholder {

    color: var(--text-color);

}



.login .btn {

    border: none;

    cursor: pointer;

}



.login p {

    color: var(--text-color);

    font-size: 0.8em;

    padding-top: 20px;

}



.login a {

    color: #5085ca;

    font-weight: 600;

}





/* ********************************* CARRUSEL *********************************** */



body.active .carousel-control-prev-icon,

body.active .carousel-control-next-icon {

    color: black !important;

}



body.active .carousel-control-prev,

body.active .carousel-control-next {

    background-color: var(--main-color);

}





body.active .carousel-control-prev:hover,

body.active .carousel-control-next:hover {

    background-color: var(--main-color);

}



/* ****************************** MODAL DE PAGO ********************** */





/* Ajuste del contenido del modal */

body.active .modal-content {

    color: var(--bg-color);

}

body.active .modal-content .btn-m {

    background-color: #e0e3e7; 

    color: var(--bg-color); 

    border: 2px solid #fff; 

}



/* Cambia el fondo del card a negro con bordes blancos en modo oscuro */

body.active .modal-content .card {

    background-color: var(--bg-color);/* Fondo negro */

    border: 1px solid #fff; /* Bordes blancos */

    color: var(--text-color); 

}





body.active .modal-content .card input,

body.active .modal-content .card textarea {

    

    color: var(--text-color); 

    border: 1px solid #fff; 

}





body.active .modal-content .modal-button-close {

    color: var(--text-color);

}



body.active .modal-content .modal-button-close:hover {

    color: var(--text-color);

}





/* ********************************** REGISTRO ********************************** */

.register-bg {

    background-image: url(../img/bg_registro.jpg);

    height: 20rem;

    margin-top: 2rem;

    background-size: cover;

    background-repeat: no-repeat;

    border-radius: 10px;

}



.register .formulario {

    background-color: var(--bg-color);

    margin: -5rem auto 0 auto;

    width: 95%;

    padding: 3rem;

    border-radius: 10px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 2rem;

}



@media (max-width: 1058px) {

    header {

        padding: 16px 60px;

    }



    section {

        padding: 50px 60px;

    }



    .home-text h1 {

        font-size: 2.4rem;

    }

}



@media (max-width: 991px) {

    header {

        padding: 16px 4%;

    }



    section {

        padding: 50px 4%;

    }



    .home-text h1 {

        font-size: 2rem;

    }



    .public {

        flex-direction: column;

    }

}



@media (max-width: 768px) {

    header {

        padding: 12px 4%;

    }



    #menu-icon {

        display: initial;

        color: #fff;

    }



    .navbar {

        position: absolute;

        top: -570px;

        left: 0;

        right: 0;

        display: flex;

        flex-direction: column;

        background: var(--second-color);

        row-gap: 1.4rem;

        padding: 20px;

        transition: 0.3s;

        text-align: center;

    }



    .navbar a,

    .navbar .bx {

        color: var(--text-color);

    }



    .navbar a:hover {

        color: var(--bg-color);

    }



    .navbar.active {

        top: 100%;

    }



    .about {

        align-items: center;

    }



    .entrada {

        flex-direction: column;

    }



    .blog_content,

    .coments {

        width: 90%;

    }



    .coments_heading {

        flex-direction: column;

        gap: 1rem;

    }



    .coments_heading .btn {

        width: 100%;

        text-align: center;

    }



    .coments_new .row {

        flex-direction: column;

    }

    

    .coments_new .row .campo {

        width: 100%;

    }



    .contact .formulario {

        display: flexbox;

        flex-direction: column;

        row-gap: 1rem;

    }



    .formulario .campo {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

        margin-bottom: 0;

    }



    .campo .campo__label {

        grid-column: span 2;

        text-align: center;

    }



    .campo .campo-dos {

        grid-column: span 2;

    }



    .login .campo {

        width: 300px;

    }



    .course-inscription {

        display: none;

    }



    .course-information .navbar-tabs .nav-link {

        display: block;

        width: 100%;

        padding: 15px;

        border-bottom: 4px solid transparent;

    }

}



@media (max-width: 450px) {

    header {

        padding: 9px 4%;

    }



    .home-text {

        padding-top: 15px;

    }



    .home-text h1 {

        font-size: 1.4rem;

    }



    .home-text p {

        font-size: 0.8rem;

        font-weight: 300;

    }



    .about-img {

        order: 2;

    }



    .about-text,

    .about-text-2 {

        text-align: center;

    }



    .about-text h2,

    .about-text-2 h2 {

        font-size: 1.2rem;

    }



    .heading h2 {

        font-size: 1.2rem;

    }



    .footer-box {

        text-align: center;

    }



    .social {

        justify-content: center;

    }



    /*.contact span {
        justify-content: center;
    }*/



    .contact .formulario {

        display: flex;

        flex-direction: column;

        row-gap: 1rem;

    }



    .formulario .campo {

        display: flex;

        flex-direction: column;

        row-gap: 1rem;

        margin-bottom: 0;

    }



    .login .formulario-login {

        padding: 2rem;

    }



    .login .campo {

        width: 90%;

    }



    .register .formulario {

        display: flex;

        flex-direction: column;

        row-gap: 1rem;

    }



    .course-details .info {

        flex-direction: column;

    }

}