@font-face {
    font-family: 'Comic Neue';
    src: url("../fonts/Comic_Neue/ComicNeue-Regular.woff2") format('woff2'),
        url("../fonts/Comic_Neue/ComicNeue-Regular.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barriecito';
    src: url("../fonts/Barriecito/Barriecito-Regular.woff") format('woff2'),
        url("../fonts/Barriecito/Barriecito-Regular.woff2") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --yellow: #fff781;
    --yellow-light: #fff88f;
    --purple: #a569bd;
    --violet: #702d70;
    --white: #f0f3f4;
    --shadow-purple: hsla(283, 39%, 58%, 0.321);
    --font-family1: "Barriecito", system-ui;
    --font-family2: "Comic Neue", cursive;
    --font-family3: "Comic Sans", cursive;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.font-family1 {
    font-family: var(--font-family1);
}

.font-family2 {
    font-family: var(--font-family2);
}

.yellow-color {
    color: var(--yellow);
}

img {
      width: 100%;
      height: auto; 
}

/*Header NAV*/
.nav-item a {
    margin-right: 2em;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    transition: all 0.3s ease-in-out;
}

.nav-item a:hover,
.navbar-nav > .active > a {
    color: var(--yellow);
}

.nav-link {
    position: relative;
}

.nav-link:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 4px;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
    background-color: var(--yellow);
}

.nav-link:hover:after,
.nav-item.active .nav-link:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/*Header*/

.header-yellow {
    width: 100%;
    min-height: 24.75em;
    padding: 0;
    margin: 0;
    background-color: var(--yellow);
    border-bottom: 2px solid var(--purple);
    box-shadow: 0 5px 5px 1px var(--purple);
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%232b2b3100'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='1' stroke='%230000001c' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.header-yellow h2 {
    font-size: 1.5rem;
}

.img-header {
    max-width: 100%;
    height: auto;
}

.offer {
    max-height: 10em;
}

.btn {
    transition: all 0.3s ease-in-out;
}

.btn-header {
    width: 10em;
    background-color: var(--violet);
    color: var(--white);
    font-weight: bold;
    font-family: var(--font-family2);
    border: 2px solid var(--violet);
}

.btn-header:hover {
    background-color: #fff;
    border: 2px solid var(--purple);
}

.white-color {
    color: white;
    text-shadow: 0px 0px 3px black;
}

/*Main*/

.btn-whatsapp {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    position: fixed;
    top: 30rem;
    right: 0.8%;
    background-color: #25d366;
    color: white;
    border-radius: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 2.5rem;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}

.btn-whatsapp:hover {
    transform: scale(1.2);
}

hr {
    width: 30%;
    height: 0.5rem;
    margin: 0 auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    border: none;
    border-radius: 10px;
    background-color: var(--violet);
}

p,
li {
    color: #000;
    font-size: 1.1rem;
}

.color__purple {
    background-color: var(--purple);
}

.my__btn {
    width: 10rem;
    margin-top: 1rem;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    background-color: #f7ef6f;
    border: 1px solid var(--violet);
}

.my__btn:hover {
    color: #fff;
    background-color: var(--violet);
    border-color: var(--white);
}

.bi-house,
.bi-pencil,
.bi-stopwatch,
.bi-patch-check,
.bi-clock,
.bi-person-video3,
.bi-people-fill,
.bi-megaphone-fill,
.bi-tag-fill {
    font-size: 2rem;
    color: var(--violet);
}

/*Index*/
.section__level {
    padding: 3rem;
}

.layout__card__professor {
    padding-top: 3rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 3rem;
}

.card-profesor-index,
.card-profesor {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.card-profesor-index {
    background-color: transparent;
}

.card-profesor-index .card-img,
.card-profesor .card-img {
    width: 20rem;
    height: 20rem;
    object-fit: cover;
    object-position: center top;
    border-radius: 100%;
}

.card-profesor-index .card-img {
    border: 2px solid var(--yellow);
    box-shadow: 0px 0px 10px 2px var(--yellow);
}

.layout__prices {
    padding: 4rem 0;
    display: flex;
    justify-content: center;
}

.prices__title {
    padding-bottom: 2rem;
    font-family: var(--font-family1);
    text-align: center;
}

.card-prices {
    margin: 0 auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.prices {
    font-size: 5rem;
    color: var(--violet);
}

.prices-link {
    width: 9rem;
    margin: 0 auto;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: var(--yellow);
    color: #000;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--violet);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.prices-link:hover {
    background-color: var(--purple);
    color: var(--white);
}

.accordion{
    width: 75%;
}

.accordion-button:focus {
    box-shadow: 0 0 0 2px var(--violet);
}

.accordion-button:not(.collapsed) {
    background-color: var(--yellow-light);
}

/*Sección Conócenos*/
.layout__equipo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.card-profesor {
    margin: 2rem 0;
    padding: 1rem 0;
    background-color: var(--yellow);
    border-radius: 20px;
    box-shadow: 0 0 5px 1px var(--violet);
}

.card-profesor .card-img {
    border: 2px solid var(--purple);
    box-shadow: 0px 0px 10px 2px var(--purple);
}

.card-title {
    padding: 1rem 0;
    text-align: center;
    font-family: var(--font-family1);
    font-size: 2rem;
}

.card-text {
    padding: 0 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.conocenos__metodologia {
    padding-bottom: 1rem;
    text-align: center;
    color: #000;
    font-family: var(--font-family3);
}

.main__conocenos ul {
    padding-left: 0;
}

.main__conocenos ul li {
    padding-bottom: 1rem;
    list-style: none;
}

.main__conocenos > a > .bi-whatsapp {
    margin: 0;
    font-size: 2.5rem;
    color: var(--white);
}

.main__conocenos .bi {
    margin-right: 0.5rem;
    font-size: 1.25rem;
    color: var(--violet);
}

.container__metodologia {
    width: 50%;
}

.main__cta {
    margin: 5rem 0;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background-color: var(--purple);
}

.main__cta:last-child {
    margin-bottom: 0;
}

.btn__ver__cursos {
    width: 15%;
    font-size: 1.5rem;
    color: #000;
    background-color: var(--yellow);
    border: 2px solid var(--violet);
    box-shadow: 0 0 5px #000;
}

.btn__ver__cursos:hover {
    background-color: var(--violet);
    border-color: var(--purple);
}

.organic__svg {
    width: 100%;
    position: relative;
    z-index: -1;
}

.organic__svg svg {
    position: absolute;
    opacity: 0.1;
}

/*Sección cursos*/
.layout__tables {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tabla__cursos {
    width: auto;
    margin: 0 auto;
}

.separador__cursos {
    width: 30%;
    margin-top: 3rem;
    margin-bottom: 0;
}

.layout__discount,
.layout__notes {
    width: 50%;
}

.layout__discount li {
    padding-bottom: 1rem;
    list-style: none;
}

/*Contact form*/
.main__contact {
    width: 100%;
}

.form-control:focus,
.form-check-input:focus{
    border-color: var(--purple);
    box-shadow: 0 0 0 .25rem var(--shadow-purple);
}

.organic__svg__contact {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 25rem;
    left: 0;
    z-index: -1;
}

.organic__svg__contact svg {
    width: 100%;
    height: 150%;
    opacity: 0.1;
}

.main__contact {
    min-height: 25rem;
    padding: 5rem 0;
}

.contact__form {
    width: 50%;
    margin: 0 auto;
}

.form__required {
    color: rgb(165, 5, 5);
}

.invalid-feedback {
    color: red;
    font-size: 0.85em;
    margin-top: 0.5rem;
    display: none;
}
/*Muestra el mensaje cuando el input no es válido*/
input:invalid + .invalid-feedback,
textarea:invalid + .invalid-feedback,
select:invalid + .invalid-feedback {
    display: block;
}

input:valid {
    border: 1px solid green;
}

.form-group,
.form-check {
    padding: 1rem 0;
}

textarea {
    width: 100%;
}

input[type="text"] {
    width: 100%;
}

.politica__privacidad {
    padding-left: 1.5rem;
}

.form__btn {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 5rem;
}

.btn-success,
.btn-danger {
    padding: 1rem 1.3rem;
}

/*Mensaje de confirmación del formulario*/
.mensaje__confirmacion {
    margin-top: 15rem;
    text-align: center;
}

/*Footer*/

.footer {
    padding-bottom: 1rem;
    color: #000;
    background-color: var(--yellow);
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%232b2b3100'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='1' stroke='%230000000c' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    border-top: 2px solid var(--violet);
    box-shadow: 0p -10px 10px var(--violet);
}

footer h2 {
    font-size: 1.3rem;
}

.footer__logo {
    font-size: 2.5rem;
}

.footer__font {
    font-weight: 600;
    line-height: 1em;
}

.copyright {
    text-align: center;
    color: black;
    font-weight: 500;
}

.bi-instagram,
.bi-youtube,
.bi-twitter-x {
    display: inline-block;
    font-size: 2.5rem;
    cursor: pointer;
    color: black;
    filter: drop-shadow(0px 0px 5px var(--violet));
    transition: all 0.3s ease-in-out;
}

.bi-instagram:hover,
.bi-youtube:hover,
.bi-twitter-x:hover {
    color: var(--violet);
    transform: scale(1.2);
}

a.btn.btn-info {
    background-color: var(--purple);
    border: 1px solid var(--white);
    transition: all 0.3s ease-in-out;
}

a.btn.btn-info:hover,
a.btn.btn-info:active {
    background-color: var(--violet);
    border-color: var(--white);
}

.btn:focus-visible {
    background-color: var(--violet);
    border-color: var(--purple);
    box-shadow: 0 0 0 .25rem var(--shadow-purple);
}

.bi-arrow-up {
    font-size: 1.2rem;
    color: var(--white);
}

/*Screen reader only*/

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}