﻿body {
    font-family: 'Red Hat Display', sans-serif;
}

::selection {
    background: #00d9b2; /* Color de fondo al seleccionar texto */
    color: white; /* Color del texto seleccionado */
}

.heading-1,
.heading-2,
.heading-3,
.heading-4,
h1, h2, h3, h4, h5, h6 {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-align: left;
    text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    box-sizing: border-box;
    margin-bottom: 0px;
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    color: rgb(50, 33, 83);
    line-height: 1.25;
    font-size: 55px;
    margin-top: 5px;
    visibility: visible;
    animation-delay: 0.05s;
    animation-name: fadeInUp;
}

.title-3 {
    color: rgb(22, 214, 156);
    font-size: 36px;
    font-weight: 600;
}

.title-4 {
    color: rgb(22, 214, 156);
    font-weight: 600;
}

p {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    color: #65587E;
}

.big {
    line-height: 1.6;
    font-size: 20px;
    margin-top: 15px;
}

/*============ Hero section ============*/

section.hero-section {
    padding-bottom: 12%;
}

.overlay-white {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
    z-index: 1;
}

.content-layer {
    position: relative;
    z-index: 2;
}

/*============ End Hero section ============*/


/*============ Price section ============*/

/*.container-pricing {
    display: flex;
    flex-direction: row;
    padding: 1rem;
}

.pricing-body {
    display: flex;
    overflow-x: auto;*/
/*gap: 1rem;*/
/*scroll-snap-type: x mandatory;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.pricing-body li {
    flex: 0 0 auto;
    min-width: 200px;
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    scroll-snap-align: start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pricing-total {
    background: #28e49c;
    padding: 1.5rem;
    border-radius: 8px;
    color: white;
    text-align: center;
}*/

/* Opcional: mejor scroll */
/*.pricing-body::-webkit-scrollbar {
    height: 8px;
}

.pricing-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}*/

.section-offset {
    position: relative;
    /*z-index: 10;*/
}

    .section-offset .offset-element {
        position: relative;
        margin-top: -7.8%;
    }

.pricing {
    display: flex;
    flex-wrap: wrap;
    background: white;
    box-shadow: 0 25px 90px rgba(50, 33, 83, 0.08);
    overflow: hidden;
}

.pricing-body {
    /*display: flex;
    flex: 1 1 1;
    flex-grow: 1;
    padding: 5%;
    gap: 1.5rem;
    overflow-x: auto;
    list-style: none;
    margin: 0;*/

    overflow-x: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.625;
    color: #65587E;
    text-align: left;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    visibility: visible;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 5% 4%;
    flex-grow: 1;
    display: flex;
    padding-right: 2%;
}

    .pricing-body li {
        /* max-width: 33.333%;
    flex-shrink: 0;
    border-right: 1px solid #eaeaea;
    padding-right: 1.5rem;*/

        border-right: 1px solid #eaeaea;
        /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
        /* font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
        /* font-weight: 400; */
        /* line-height: 1.625; */
        /* color: #65587E; */
        /* font-size: 16px; */
        /* -webkit-text-size-adjust: none; */
        /* -webkit-font-smoothing: subpixel-antialiased; */
        /* visibility: visible; */
        /* list-style: none; */
        /* box-sizing: border-box; */
        /* display: block; */
        /* position: relative; */
        padding: 0 4%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
        padding-right: 5%;
        padding-left: 0;
    }

        .pricing-body li:first-child {
            padding-left: 0%;
        }

    .pricing-body li {
        padding-left: 5%;
        padding-right: 5%;
    }

        .pricing-body li:last-child {
            border-right: none;
            padding-right: 0%;
        }

.pricing-total {
    /*flex: 0 0 100%;*/
    background: #00F2A9;
    color: white;
    /*text-align: center;*/
    padding: 5% 4%;
    /*max-width: 25%;*/
    width: 100%;
}

    .pricing-total.novi-bg {
        flex-basis: 25%;
        /*max-width: 25%;*/
    }

.pricing-title {
    /*line-height: 1.625;*/
    color: #16D69C;
    font-size: 50px;
    /*margin-top: 34px;*/
}

.pricing-subtitle {
    font-size: 22px;
}

.pricing-text {
    line-height: 1.625;
    color: #65587E;
    margin-top: 34px;
}

/*============ End Price section ============*/

/*============ Media Queries ============*/


@media (min-width: 769px) {
    .pricing .pricing-body li {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}


@media (max-width: 768px) {
    .pricing-section {
        flex-direction: column;
    }

    .pricing-body {
        flex-direction: row;
        overflow-x: auto;
        padding: 1rem;
    }

        .pricing-body li {
            flex: 0 0 auto;
            max-width: none;
            /*width: 70%;*/
            /* min-width: 250px;*/
        }

    .pricing-total {
        width: 100%;
        padding: 1rem;
    }
}


@media (max-width: 991px) {


    /*Section Prices*/
    .pricing-body {
    }

    .pricing.pricing-1 {
        flex-direction: column;
    }

    .pricing-body {
        flex-direction: row;
        overflow-x: auto;
    }

        .pricing-body li {
            flex: 0 0 auto;
            /*min-width: 250px;*/
            max-width: none;
            border-right: 1px solid #eaeaea;
        }

    .pricing-total {
        width: 100%;
        margin-top: 2px;
        border-left: none;
        display: flex;
        justify-content: center; /*justify-content: space-between;*/
        align-items: center;
        padding: 1rem 2rem;
    }

        .pricing-total > * + * {
            margin-left: 30px;
        }

    .pricing-text {
        margin-top: 6px;
    }


    /*Section About the course*/
    .section.about-the-course {
        padding-top: 90px;
    }

    .about-the-course h6.title-3 {
        margin-top: 0px;
        margin-bottom: 5px;
    }

    h1 {
        font-size: 45px;
    }

    h2 {
        font-size: 24px;
    }

    .title-3 {
        font-size: 24px;
    }
    /*.about-the-course h1 {
            font-size: 45px;
        }*/
    .row-20 > * {
        margin-bottom: 10px;
    }


    /*Section Target group*/

    .section-target-group div.row-md {
        margin-top: 25px;
    }

    .section.section-target-group {
        padding-top: 70px;
    }
}

@media (max-width: 1199px) {

    /*Section Prices*/
    .heading-1 {
        font-size: 40px;
    }

    /*Section About the course*/
    .row > [class*='col'] {
        padding-left: 15px;
        padding-right: 15px;
    }

    .big {
        font-size: 18px;
    }
}

@media (max-width: 767px) {

    /*Section About the course*/
    .section.about-the-course {
        padding-top: 60px 0;
    }

    /*Section Target-group*/
    .section.section-target-group {
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    h1, h2 {
        font-size: 32px;
    }

    .row-30 > * {
        margin-bottom: 30px;
    }

    .row > div[class*='col'] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/*Section Programa del curso*/
/*slider*/

@media(min-width:768px) {

    .program-left::before {
        position: absolute;
        content: '';
        top: 50%;
        right: 6%;
        width: 0;
        height: 86.6%;
        border-left: 1px solid #f1eff3;
        transform: translateY(-50%);
    }
}

@media(max-width:767px) {

    div.program-info .pricing-text {
        margin-top: 0px;
    }

    .program-info {
        display: flex;
        /* align-content: center; */
        /* flex-wrap: nowrap; */
        flex-direction: row;
        text-align: center;
        align-items: baseline;
        flex-wrap: wrap;
    }

        .program-info > * {
            margin-right: 15px;
        }

    .pricing-subtitle {
        font-size: 20px;
    }

    section.programa-del-curso .heading-3 {
        font-size: 22px;
    }

    ul.list-marked {
        font-size: 18px;
    }

    .carousel.slide .row.row-fix {
        padding-left: 2%;
    }
}

@media(max-width:767px) {

    div.program {
        margin-top: 70px;
    }
}

@media(max-width:382px) {

    div.program-day {
        margin-bottom: 10px;
    }

    div.pricing-text {
        margin-bottom: 10px;
    }
}

/*Section Eventos*/
@media (min-width: 1200px) {
    * + .offset-top-6 {
        margin-top: 36px;
    }

    * + .offset-top-7 {
        margin-top: 60px;
    }
}

@media (min-width: 992px) {
    * + .offset-top-6 {
        margin-top: 26px;
        margin-bottom: 0px;
    }

    * + .offset-top-7 {
        margin-top: 40px;
        margin-bottom: 0px;
    }
}


/*============ End Media Queries ============*/


/*============ About course section ============*/

.about-the-course {
    padding-top: 140px;
}

.row > [class*='col'] {
    padding-left: 25px;
    padding-right: 25px;
}

.about-the-course .title-3 {
    line-height: 1.6;
    margin-top: 90px;
    font-size: 18px;
}

.about-the-course .button {
    margin-top: 25px;
}


.button {
    display: inline-block;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    border: none;
    border-radius: 25px;
    transition: background-color 0.2s ease-in-out;
    color: #322153;
    background-color: #00F2A9;
}



    .button:hover {
        background-color: #08ce95;
        color: #ffffff;
    }


@media (max-width: 1199px) {
}

/*============ End About course section ============*/


/*============ Target group section ============*/

.section-target-group {
    padding-top: 140px;
}

    .section-target-group h4 {
        font-size: 22px;
        margin-top: 38px;
    }

    .section-target-group .row-md {
        margin-top: 60px;
    }

/*== Por ahora escondemos los iconos hasta que tengamos los propios ==*/
.service-corporate-icon {
    display: none;
}

/*============ End Target group section ============*/


/*============ Call to Action section ============*/
.call-to-action {
    margin: 140px 0px;
    padding: 6.77% 0 7.9%;
    background-color: #322153;
}

    .call-to-action .title-4 {
        text-align: center;
        color: #00F2A9;
    }

    .call-to-action h3 {
        color: #ffffff;
        font-size: 28px;
        text-align: center;
    }

    .call-to-action .button {
        margin-top: 40px;
        color: #322153;
        Background: #ffffff;
    }

        .call-to-action .button:hover {
            background-color: #08ce95;
            color: #ffffff;
        }

/*============ End Call to Action section ============*/


/*============ Tutores section ============*/

.tutores .heading-2 {
    margin-top: clamp(16px, 5vw, 40px);
}

.team-minimal.block-md {
    max-width: 390px;
}


.tutores article {
    max-width: 100%;
}

.tutores-profile-img {
    width: 100%;
    aspect-ratio: auto
}
/*============ End Tutores section ============*/

/*============ Acerca del curso section ============*/

.programa-del-curso .heading-3 {
    font-size: 28px;
}

.programa-del-curso {
    padding: 6.77% 0px;
}

.course-program-info-container {
    margin: 5% 0px;
}

/*sliderrrrrrrrrrrrrrrrrrrrrrrr*/
.program {
    margin-top: 120px;
    /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
    /* font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
    /* font-weight: 400; */
    line-height: 1.625;
    /* color: #65587E; */
    /* font-size: 16px; */
    /* -webkit-text-size-adjust: none; */
    /* -webkit-font-smoothing: subpixel-antialiased; */
    /* list-style: none; */
    /* pointer-events: auto; */
    /* box-sizing: border-box; */
    /* text-align: left; */
    /*background: #ffffff;*/
    box-shadow: 0 25px 90px rgba(50, 33, 83, 0.08);
    padding: 4.84% 2.94% 5.44% 3.94%;
    /* flex-grow: 1; */
    /* transition: .3s linear; */
    display: flex;
    align-items: center;
    /* height: 330px;*/
}

.carousel-control-prev {
    left: -5%
}

.carousel-control-next {
    right: -5%
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}

/*diapositivassssss*/

.program-left {
    position: relative;
}

/*.program-left::before {
    position: absolute;
    content: '';
    top: 50%;
    right: 6%;
    width: 0;
    height: 86.6%;
    border-left: 1px solid #f1eff3;
    transform: translateY(-50%);
}*/

.program-info .pricing-text {
    margin-top: 50px;
}

.program-list {
    margin-top: 20px;
}

.list-marked {
    list-style: none;
    padding: 0px;
    font-size: 20px;
    font-weight: 400;
}

    .list-marked > li::before {
        display: inline-block;
        vertical-align: middle;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 7px;
        background-color: #65587E;
    }

.list-marked-1 > li::before {
    /*background-color: rgba(22, 214, 156, 0.5);*/
    background-color: rgba(22,214,156,0.5);
}

.list-marked-2 > li {
    text-indent: -20px;
    padding-left: 20px;
}

    .list-marked-2 > li::before {
        margin-right: 14px;
    }

/*============ End Acerca del curso section ============*/

/*============ Eventos section ============*/

.section.eventos {
    padding: 6.77% 0px;
}

    .section.eventos img {
        display: inline-block;
        max-width: 100%;
        height: auto;
    }

    .section.eventos h6 {
        font-size: 18px;
        line-height: 1.6;
    }

/*============ End Eventos section ============*/

/*============ Form registro section ============*/

.section.form-register {
    margin-bottom: 12%;
}

.bg-primary-3 {
    background-color: #00F2A9;
    padding: 7.77% 0px 1px;
}

.contacts-default {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.heading-5 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

    .heading-5 a {
        text-decoration: none;
        color: #322153;
    }

        .heading-5 a:hover {
            text-decoration: underline;
            color: #322153;
        }



.section-offset-5 .offset-element {
    position: relative;
    z-index: 1;
    margin-bottom: -100px;
}

form {
    margin-bottom: 0;
}

.rd-form {
    position: relative;
    text-align: left;
}

.box-form-1 {
    padding: 30px 15px;
    background-color: #ffffff;
    box-shadow: 0 25px 90px rgba(50, 33, 83, 0.08);
}

.form-wrap {
    position: relative;
}

.form-input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 13px 19px;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #322153;
    background-color: #F7F6F9;
    background-image: none;
    border-radius: 0;
    -webkit-appearance: none;
    transition: all 0.3s ease-in-out;
    border: 1px solid #F7F6F9;
}

.form-2 .form-input {
    padding: 11px 30px;
    border-width: 3px;
    border-radius: 25px;
}

.form-label {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    padding-left: 19px;
    padding-right: 19px;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    pointer-events: none;
    text-align: left;
    z-index: 9;
    transition: .25s;
    will-change: transform;
    transform: translateY(-50%);
}

.form-wrap + * {
    margin-top: 20px;
}

.rd-form * + .button {
    margin-top: 30px;
}

.text-primary {
    color: #00F2A9 !important;
}

/*Validacion de los inputs*/

/*.form-2 .form-validation {
    top: 2px;
    right: 25px;
}*/

/*.form-validation {
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 11;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0;
    color: #f5543f;
    transition: .3s;
}*/

.form-2 .form-input:focus {
    border-color: #f1eff3;
}

.form-input:focus {
    background-color: #ffffff;
    outline: 0;
}


    /*testeo de comportamiento en input focus*/

    .form-input:focus + .form-label,
    .form-input:not(:placeholder-shown) + .form-label {
        top: 2px;
        font-size: 12px;
        color: #333;
    }


/*======Testeo=======*/

.form-wrap.has-error .form-input {
    border-color: #f5543f;
}

/*End Validacion de los inputs*/

@media (min-width: 992px) {
    .section-offset-5 .offset-element {
        margin-bottom: -160px;
    }
}

@media (min-width: 1200px) {
    div.box-form-1 {
        padding: 80px 50px;
    }
}

@media (min-width: 992px) {
    .box-form-1 {
        padding: 60px 40px;
    }
}

/*Datos de contacto en el form*/

@media (min-width: 768px) {
    ul.contacts-default {
        margin-top: 45px;
    }
}

@media (max-width: 768px) {
    ul.contacts-default {
        text-align: center;
    }

    h1.form-register-heading-1 {
        text-align: center;
    }
}

@media (max-width: 767px) {
    * + .contacts-default {
        margin-top: 45px;
    }

    h1.form-register-heading-1 {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    h1.form-register-heading-1 {
        font-size: 32px;
    }

    .section.form-register {
        margin-bottom: 20%;
    }
}
/* End Datos de contacto en el form*/

@media (min-width: 576px) {
    .box-form-1 {
        padding: 40px 30px;
    }
}

/*============ End Form registro section ============*/


