@import url("https://use.typekit.net/erl3mwm.css");

:root {
    --color-primario: #050953;
    --color-primario-opaco: #272B6E;
    --color-secundario: #3481F7;
    --color-terciario: #040638;
    --color-blanco: #fff;
    --color-transparente: rgba(0, 0, 0, 0);
    --color-background-principal: #f9f9f9;
    --color-background-secundario: #fff;
    --color-background-terciario: #B7D3FD;
    --sombra-general: 0px 10px 15px -3px rgba(0,0,0,0.1);
    --fuente-principal: "montserrat", sans-serif;
    --tamano-titular: 4rem;
    --tamano-parrafo: 2.3rem;
    --border-radius-cajas: 10px;
    --border-radius-boton: 7px;
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
.header {
   box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
.programa {
    width: 100%;
    max-width: 100%;
    background-image: linear-gradient(to bottom, var(--color-secundario) 50%, var(--color-background-principal) 50%);
    margin: 0;
    padding: 100px 20px 50px 20px;
    color: var(--color-primario);
    font-family: var(--fuente-principal);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
}
.programa__contenedor {
    width: 100%;
    max-width: 1366px;
    display: flex;
    gap: 30px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-cajas);
}
.programa__columna {
    width: 100%;
    align-self: center;
}
.programa__columna--texto {
    flex-basis: 70%;
    flex-grow: 0;
}
.programa__columna--imagen {
    flex-basis: 30%;
    flex-grow: 0;
}
.programa__imagen {
    width: 100%;
    font-size: 0;
    text-align: center;
}
.programa__imagen img {
    width: 100%;
    max-width: 400px;
    font-size: 0;
}
.programa__titulo--etiqueta {
    text-align: center;
    width: 100%;
    max-width: 150px;
    height: 100%;
    max-height: 50px;
    background-color: var(--color-secundario);
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 5px;
}
.programa__titulo--etiqueta h3 {
    color: var(--color-blanco);
    font-size: 1.8rem;
    font-weight: 300;
    margin: 0;
}
.programa__texto h2 {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 30px;
}
.programa__niveles {
    width: 100%;
    display: flex;
    gap: 30px;
    justify-content: flex-start;
    margin-bottom: 20px;
}
.programa__nivel {
    width: 100%;
    max-width: 100px;
}
.programa__nivel a:hover {
    transform: scale(1.1);
}
.programa__nivel a {
    display: inline-block;
    width: 100%;
    color: var(--color-blanco);
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    background-color: var(--color-primario-opaco);
    border-radius: 4px;
    padding: 5px 10px;
    transition: .4s;
}
.programa__descripcion {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 20px;
}
.programa__instructor, .programa__duracion {
    position: relative;
    font-size: 1.8rem;
    font-weight: 300;
    padding-left: 10px
}
.programa__instructor p::before {
    position: relative;
    left: -10px;
    content: "\f51c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 5px;
}
.programa__duracion p::before {
    position: relative;
    left: -10px;
    content: "\f017";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 5px;
}
.programa__instructor span, .programa__duracion span {
    font-size: 2.3rem;
    font-weight: 600;
}

/*DETALLES*/
.detalles {
    width: 100%;
    max-width: 100%;
    background-color: var(--color-background-principal);
    margin: 0;
    padding: 0 20px;
    color: var(--color-primario);
    font-family: var(--fuente-principal);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
}
.detalles__contenedor {
    width: 100%;
    max-width: 1366px;
    display: flex;
    gap: 30px;
    margin: 0 auto;
    padding: 0px;
}
.detalles__columna {
    width: 100%;
    position: relative;
}
.detalles__media {
    width: 100%;
    max-width: 100%;
    font-size: 0;
    margin-bottom: 30px;
}
.detalles__media img {
    width: 100%;
    max-width: 100%;
    font-size: 0;
    border-radius: 4px;
}
.detalles__contenedor {
    width: 100%;
    display: flex;
    gap: 10px
}
.detalles__descripcion {
    width: 100%;
}
.dirigido__contenedor {
    display: flex;
    gap: 10px
}
.dirigido {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 7px;
}
/*
.dirigido ul {
    list-style: none;
}
.dirigido--uno ul li, .dirigido--dos ul li {
    margin-bottom: 15px;
    padding: 0 0 0 20px;
}
.dirigido--uno ul li:before,
.dirigido--dos ul li:before {
    position: absolute;
    left: 30px;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 5px;
}
*/
.detalles__columna--texto {
    padding: 20px;
    flex-basis: 70%;
    flex-grow: 0;
}
.detalles__columna--texto h2 {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 30px;
}
.detalles__columna--precio {
    flex-basis: 30%;
    flex-grow: 0;
}
.precio {
    position: sticky;
    top: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-cajas);
    padding: 20px;
    overflow: hidden;
}
.precio::after {
    content: '¡Cómpralo!';
    position: absolute;
    top: 40px;
    right: -50px;
    color: var(--color-blanco);
    font-size: 1.8rem;
    text-align: center;
    display: inline-block;
    width: 200px;
    height: 30px;
    background-color: var(--color-secundario);
    transform: rotate(45deg);
}
.precio h2 {
    color: var(--color-primario);
    font-size: 4rem;
}
.precio h3 {
    color: var(--color-secundario);
    font-size: 1.8rem;
    text-decoration: line-through;
    margin-bottom: 30px;
}
.precio__detalles {
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
}
.precio__detalles h2 {
    color: var(--color-primario);
    font-size: 2.3rem;
    text-align: left;
    margin-bottom: 10px;
}
.precio__detalles ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.precio__detalles ul li {
    padding: 0 0 0 35px;
    margin-bottom: 10px;
}
.precio__detalles li:before {
    position: absolute;
    left: 25px;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}
.precio__boton {
    width: 100%;
    text-align: center;
}
.precio__boton p {
    margin-bottom: 10px;
}
.precio__boton a { 
    display: inline-block;
    width: 100%;
    color: var(--color-blanco);
    font-size: 2.3rem;
    font-weight: 300;
    text-decoration: none;
    text-align: center;
    background-color: var(--color-primario);
    border-radius: var(--border-radius-boton);
    margin-bottom: 20px;
    padding: 10px;
    transition: .4s;
}
.precio__boton a:hover {
    transform: scale(.9);
}
.precio__formato {
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.precio__formato p {
    color: var(--color-primario-opaco);
    font-size: 1.8rem;
    font-weight: 300;
    text-align: center;
}
/*NIVELES*/
.niveles {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 50px 20px 50px 20px;
    color: var(--color-primario);
    font-family: var(--fuente-principal);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
}
.cajitas {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    padding: 0;
    color: var(--color-primario);
    font-family: var(--fuente-principal);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
}
.cajitas__headline {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.cajitas__headline h2{
    color: var(--color-primario);
    font-size: 2.8rem;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 30px 0;
}
.cajitas__headline h3 {
    color: var(--color-secundario);
    font-size: 1.8rem;
    text-align: center;
    margin: 0 0 15px 0;
}
.cajitas__contenedor {
    width: 100%;
    display: flex;
    gap: 15px;
    margin: 0 auto;
    padding: 0px;
}
.cajitas__caja {
    width: 100%;
    padding: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-cajas);
    transition: ease-in-out .4s;
}
.cajitas__caja:hover {
    transform: translateY(-20px);
}
.cajitas__media {
    width: 100%;
    font-size: 0;
    margin-bottom: 20px;
}
.cajitas__media img {
    width: 100%;
    font-size: 0;
    border-radius: 10px;
    margin: 0;
    padding: 0;
}
.cajitas__cta {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    padding: 50px 20px;
}
.cajitas__boton {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.cajitas__boton a {
    display: inline-block;
    color: var(--color-blanco);
    font-size: 1.8rem;
    text-decoration: none;
    background-color: var(--color-primario);
    border-radius: var(--border-radius-boton);
    margin: 0 auto;
    padding: 15px 20px;
    text-align: center;
    transition: ease-in-out .4s;
}
.cajitas__boton a:hover {
    transform: scale(.9);
}
.cajitas__texto {
    position: relative;
    padding: 0px;
}
.cajitas__etiqueta {
    width: 100%;
    padding: 5px;
    margin-bottom: 30px;
    text-align: center;
    background-color: var(--color-primario);
    border-radius: 10px;
}
.cajitas__texto h2 {
    color: var(--color-blanco);
    font-size: 2.3rem;
    margin: 0;
}
.cajitas__texto h3 {
    color: var(--color-primario);
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.cajitas__texto p {
    color: var(--color-primario);
    font-size: 2.3rem;
    margin-bottom: 10px;
}
.cajitas__texto {
    font-size: 1.5rem;
}
.cajitas__texto ul {
    font-size: 1.8rem;
    padding: 0;
}
.cajitas__texto ul li {
    list-style: none;
    padding-left: 40px;
    margin-bottom: 15px;
}
.cajitas__texto li::before {
    position: absolute;
    left: 10px;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}
/* NIVELES POR SEPARADO */
.seccion {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 100px 20px;
    color: var(--color-primario);
    font-size: 1.8rem;
    font-weight: 300;
    font-family: var(--fuente-principal);
    line-height: 1.6;
}
.seccion--gris {
    background-color: var(--color-background-principal);
}
.contenedor {
    width: 100%;
    max-width: 1366px;
    display: grid;
    gap: 0px;
    grid-template-columns: repeat(2, 1fr); /* Por defecto, 2 columnas */
    place-items: center;
    margin: 0 auto;
    padding: 0;
}
.columna {
    width: 100%;
}
.imagen--basico img, .imagen--avanzado img {
    border-radius: 0 20px 20px 0;
    z-index: 0;
}
.imagen--intermedio img {
    border-radius: 20px 0 0 20px;
    z-index: 0;
}
.columna--basico, .columna--intermedio, .columna--avanzado {
    background-color: var(--color-blanco);
    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-cajas);
    margin: 0;
    padding: 20px 15px;
    z-index: 2;
}
.texto {
    width: 100%;
    font-family: var(--fuente-principal);
}
.texto h2 {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0;
    margin-bottom: 30px;
}
.texto h3 {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0;
    margin: 0 0 15px 0;
}
.texto p {
    font-size: 1.8rem;
    margin: 0 0 30px 0;
}
.texto ul {
    font-size: 2rem;
    line-height: 2.5;
    padding: 0 0 0 30px;
    margin: 0 0 30px 0;
}
.boton--nivel {
    width: 100%;
    max-width: 250px;
    text-align: center;
}
.boton--nivel a {
    display: inline-block;
    width: 100%;
    color: var(--color-blanco);
    font-size: 1.8rem;
    font-weight: 300;
    text-decoration: none;
    background-color: var(--color-primario);
    border-radius: var(--border-radius-boton);
    padding: 10px 15px;
    transition: ease-in-out .4s;
}
.boton--nivel a:hover {
    transform: scale(.9);
}
.imagen {
    font-size: 0;
    text-align: center;
}
.imagen img {
    width: 100%;
    font-size: 0;
    text-align: center;
}
@media (max-width: 768px) {
    .programa__contenedor {
        flex-direction: column-reverse;
    }
    .programa__titulo h2 {
        font-size: 3rem;
    }
    .programa__imagen img {
        width: 50%;
    }
    .detalles__contenedor {
        flex-direction: column;
    }
    .dirigido__contenedor {
        flex-direction: column;
    }
    .dirigido {
        padding: 20px;
    }
    .cajitas__contenedor {
        flex-direction: column;
    }
    .contenedor {
        grid-template-columns: 1fr; /* Cambia a una sola columna en dispositivos móviles */
    }
    .boton--nivel {
        max-width: 100%;
    }
    .contenedor--basico,
    .contenedor--intermedio,
    .contenedor--avanzado {
        flex-direction: column;
    }
    .columna--img {
        order: -1;
    }
    .imagen--basico img, .imagen--intermedio img, .imagen--avanzado img {
        position: relative;
        bottom: -100px;
        width: 80%;
        border-radius: 20px 20px 0 0;
        z-index: 0;
    }
}

@media only screen and (max-width: 600px) {
    .cajitas__contenedor {
        flex-wrap: wrap;
    }
}