main {
    position: relative;
}

main > a:nth-of-type(1) {
    position: fixed;
    right: 4rem;
    bottom: 4rem;
    z-index: 1;
    width: 7rem;
    height: 7rem;
}

main > section {
    --grid-columns: 12;
    --grid-rows: 12;
    min-height: 67.5rem;
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: repeat(var(--grid-rows), auto);
}

main > section > :nth-child(1) {
    grid-column: span var(--grid-columns);
    grid-row: span var(--grid-rows);
    width: 100%;
    height: auto;
}

main > section > div > h2 {
    font-size: 5rem;
    line-height: normal;
    font-weight: bold;
}

/* ---------------------------- */
/* DEMOCRATIZAMOS LA INNOVACIÓN */
/* ---------------------------- */

#democratizamos-innovacion > div {
    position: absolute;
    grid-column: 2 / 7;
    grid-row-start: 4;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

#democratizamos-innovacion > div > img {
    width: 4rem;
    padding-top: 2rem;
}

#democratizamos-innovacion > div > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
}

#democratizamos-innovacion > div > div > h2 {
    font-size: 5rem;
    font-family: var(--font-source-serif-4);
    color: white;
    line-height: normal;
    font-weight: bold;
}

#democratizamos-innovacion > div > div > p {
    color: white;
    font-size: 2rem;
    line-height: 1.1em;
    font-weight: 300;
}

/* ----------- */
/* FORMULA YEI */
/* ----------- */

#formula-yei > img {
    background-color: #d498cf;
}

#formula-yei > div {
    position: absolute;
    grid-column: 2/7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

#formula-yei > div > div {
    display: flex;
    gap: 1rem;
}

#formula-yei > div > div > img {
    width: 4rem;
}

#formula-yei > div > div > h2 {
    color: #4b38e3;
    font-family: var(--font-source-serif-4);
    font-size: 5rem;
    line-height: normal;
    font-weight: 600;
}

#formula-yei > div > p {
    color: white;
    font-size: 2rem;
    line-height: 1.1em;
    font-weight: 300;
}

#formula-yei > div > p > span {
    color: #4b38e3;
}

/* ------------------ */
/* PROGRAMA INMERSIVO */
/* ------------------ */

#programa-inmersivo > img {
    background-color: #d8813a;
}

#programa-inmersivo > div {
    position: absolute;
    grid-column: 2 / -2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8rem;
    width: 100%;
    height: 100%;
}

#programa-immersivo-titulo {
    width: 34%;
}

#programa-immersivo-valores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    width: 100%;
}

#programa-immersivo-valores > div {
    height: 100%;
    flex: 1;
}

#programa-immersivo-valores > div > img {
    height: 35%;
    margin: auto;
}

#programa-immersivo-valores > div > p {
    padding-top: 2rem;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 300;
    color: white;
}

#programa-immersivo-valores > div > p > span {
    color: #4b38e3;
    font-weight: bold;
}

/* ------ */
/* MISION */
/* ------ */

#mision > img {
    background-color: #e9d346;
}

#mision > div {
    position: absolute;
    grid-column: 2/7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

#mision > div > div {
    display: flex;
    gap: 1rem;
}

#mision > div > div > img {
    width: 4rem;
}

#mision > div > div > h2 {
    color: #4b38e3;
    font-family: var(--font-source-serif-4);
    font-size: 5rem;
    line-height: normal;
    font-weight: 600;
}

#mision > div > p:nth-of-type(1) {
    font-weight: 300;
    font-size: 2rem;
}

#mision > div > p:nth-of-type(1) > span {
    color: #4b38e3;
    font-weight: bold;
}

#mision > div > #mision-counter {
    width: 100%;
    background: linear-gradient(to right, #4b38e3 50%, transparent 50%);
    padding-left: 3em;
}

#mision > div > #mision-counter > div {
    width: 100%;
    background-color: white;
    border-radius: 0.7rem 0px 1rem 0.7rem;

    text-align: center;
    font-weight: bold;
    font-size: 1.875rem;
    color: #4b38e3;
}

#mision > div > p:nth-of-type(2) {
    font-weight: 300;
    font-size: 1.8rem;
}

/* -------------- */
/* IMPACTO ACTUAL */
/* -------------- */

#impacto-actual > img {
    background-color: #d8813a;
}

#impacto-actual > div {
    position: absolute;
    grid-column: 2 / -2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8rem;
    width: 100%;
    height: 100%;
}

#impacto-actual > div > #impacto-actual-titulo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 1rem;
}

#impacto-actual > div > #impacto-actual-titulo > img {
    width: 4rem;
}

#impacto-actual > div > #impacto-actual-titulo > h2 {
    font-family: var(--font-source-serif-4);
    font-weight: 600;
    font-size: 5rem;
    color: white;
    line-height: normal;
}

#impacto-actual > div > #impacto-actual-titulo > p {
    grid-column: 2 / span 1;
    font-weight: 500;
    font-size: 1.625rem;
    color: white;
}

#impacto-actual > div > #impacto-actual-metricas {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    gap: 2rem 0;
}

#impacto-actual > div > #impacto-actual-metricas > div {
    font-size: 8.125rem;
    font-weight: bold;
    color: #4b38e3;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#impacto-actual > div > #impacto-actual-metricas > div > span:nth-of-type(2) {
    font-size: 1.625rem;
    font-weight: 300;
    color: white;
}

#impacto-actual > div > #impacto-actual-metricas > :nth-child(1) {
    grid-column: 1 / span 3;
}

#impacto-actual > div > #impacto-actual-metricas > :nth-child(2) {
    grid-column: 5 / span 3;
}

#impacto-actual > div > #impacto-actual-metricas > :nth-child(3) {
    grid-column: 3 / span 3;
    grid-row: 2;
}

#impacto-actual > div > #impacto-actual-metricas > :nth-child(4) {
    grid-column: 7 / span 3;
    grid-row: 2;
}

/* ----------------- */
/* SUMATE AL DESAFIO */
/* ----------------- */

#sumate-al-desafio > div:first-child {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#sumate-al-desafio-carrusel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#sumate-al-desafio-1,
#sumate-al-desafio-2 {
    flex: 1 0 100%;

    --grid-columns: 12;
    --grid-rows: 12;

    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: repeat(var(--grid-rows), auto);
}

#sumate-al-desafio-1 > img:nth-of-type(1) {
    grid-column: span var(--grid-columns);
    grid-row: span var(--grid-rows);
    width: 100%;
    height: auto;
}

#sumate-al-desafio-1 > img {
    background-color: #d8813a;
}

#sumate-al-desafio-1 > div {
    position: absolute;
    grid-column: 2 / 7;
    grid-row: 2 / -2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#sumate-al-desafio-1 > div > #sumate-al-desafio-1-titulo {
    display: flex;
    align-items: flex-start;
    gap: 1em;
}

#sumate-al-desafio-1 > div > #sumate-al-desafio-1-titulo > img {
    padding-top: 2rem;
    width: 4rem;
}

#sumate-al-desafio-1 > div > #sumate-al-desafio-1-titulo > h2 {
    color: #4b38e3;
    font-family: var(--font-source-serif-4);
    font-size: 5rem;
    line-height: normal;
    font-weight: bold;
}

#sumate-al-desafio-2 > img:nth-of-type(1) {
    background-color: #d8813a;
    grid-column: 1 / 7;
    grid-row: span var(--grid-rows);
    width: 100%;
    /* 
        POR HACER:
        BLOQUANTE: NO SE HA PROPORCIONADO LAS IMAGENES CORRESPONDIENTES
        POR EL MOMENTO SE USA UNA ALTURA DE 100% DADO QUE HAY OTRAS
        IMAGENES EN EL CARRUSEL QUE TIENEN UNA ALTURA MAYOR,
        LO IDEAL QUE LA ALTURA DE TODAS LAS IMAGENES DEL CARRUSEL
        SEAN IGUALES.
        CAMBIAR A AUTO CUANDO LA CONDICIÓN DE ARRIBA SE CUMPLA
     */
    /* height: auto; */
    height: 100%;
}

#sumate-al-desafio-2 > img:nth-of-type(2) {
    background-color: #4b38e3;
    grid-column: 7 / 13;
    grid-row: span var(--grid-rows);
    width: 100%;
    /* 
        POR HACER:
        BLOQUANTE: NO SE HA PROPORCIONADO LAS IMAGENES CORRESPONDIENTES
        POR EL MOMENTO SE USA UNA ALTURA DE 100% DADO QUE HAY OTRAS
        IMAGENES EN EL CARRUSEL QUE TIENEN UNA ALTURA MAYOR,
        LO IDEAL QUE LA ALTURA DE TODAS LAS IMAGENES DEL CARRUSEL
        SEAN IGUALES.
        CAMBIAR A AUTO CUANDO LA CONDICIÓN DE ARRIBA SE CUMPLA
     */
    /* height: auto; */
    height: 100%;
}

#sumate-al-desafio-2-left {
    position: absolute;
    grid-column: 2 / 6;
    grid-row: 3 / -2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 4rem;
}

#sumate-al-desafio-2-left > p {
    font-weight: 300;
    font-size: 1.625rem;
    color: white;
}

#sumate-al-desafio-2-left > p > span {
    font-weight: bold;
}

#sumate-al-desafio-2-left > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#sumate-al-desafio-2-right {
    position: absolute;
    grid-column: 8 / 12;
    grid-row: 3 / -2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 10%;
}

#sumate-al-desafio-2-right > p {
    font-size: 1.625rem;
    font-weight: 300;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#sumate-al-desafio-2-right > p > span:nth-of-type(1) > span {
    font-weight: bold;
}

#sumate-al-desafio-2-right > .componentes-marco > div:nth-of-type(1) {
    background-color: #D8813A;
}

/* ----------- */
/* CONVERSEMOS */
/* ----------- */

#conversemos > div {
    position: absolute;
    grid-column: 2 / -2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

#conversemos > div > h2 {
    font-family: var(--font-exo-2);
    font-size: 3.75rem;
    font-weight: 300;
    line-height: normal;
    color: white;
    text-align: center;
}

#conversemos > div > h2 > span {
    font-weight: bold;
}

/* ---- */
/* META */
/* ---- */

#meta > img {
    background-color: #4b38e3;
}

#meta > div {
    position: absolute;
    grid-column: 2 / 7;
    grid-row: 2 / -2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

#meta > div > img {
    width: 4rem;
    padding-top: 2rem;
}

#meta > div > div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#meta > div > div > h2 {
    font-family: var(--font-source-serif-4);
    font-weight: 500;
    font-size: 5rem;
    color: white;
}

#meta > div > div > h2 > span {
    color: #d8813a;
}

#meta > div > div > p:nth-of-type(1) {
    font-size: 2.8rem;
    color: white;
}

#meta > div > div > p:nth-of-type(2) {
    font-size: 1.625rem;
    color: white;
}

#meta-formulario {
    font-size: 1.375rem;
    font-weight: bold;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1rem 1rem;
}

/* CLASE DINÁMICA AÑADIDA VIA JAVASCRIPT */
#meta-formulario.si-pertenezco-a-una-empresa {
    grid-template-rows: repeat(5, 1fr);
}

/* FIN - CLASE DINÁMICA AÑADIDA VIA JAVASCRIPT */

#meta-formulario > input,
#meta-formulario > select {
    background-color: #4b38e3;
    border: 1px solid white;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    color: white;
    border-radius: 2rem;
}

#meta-formulario > input:focus,
#meta-formulario > select:focus {
    border-color: #d8813a;
    outline: none;
}

#meta-formulario > input::placeholder,
#meta-formulario > select {
    text-align: center;
    color: white;
}

#meta-formulario > select {
    appearance: none;
    grid-column: 1 / -1;
}

#meta-formulario > #nombre {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

#meta-formulario > #apellido {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

#meta-formulario > #es-empresa {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

/* INPUTS DINÁMICOS AÑADIDOS VIA JAVASCRIPT */
#meta-formulario > #ruc {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

#meta-formulario > #razon-social {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}
/* FIN - INPUTS DINÁMICOS AÑADIDOS VIA JAVASCRIPT */

#meta-formulario > #correo {
    grid-column: 1 / 3;
    grid-row: -3 / -2;
}

#meta-formulario > #celular {
    grid-column: 3 / 5;
    grid-row: -3 / -2;
}

#meta-formulario > button {
    grid-column: 2 / 4;
    grid-row: -2 / -1;

    color: #4b38e3;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
}