.supercall-mx {
    background-color: var(--color-blanco);
}

.supercall-mx-definicion {
    padding: calc(5% + 6rem) 7% 5% 7%;
}

.supercall-mx-definicion h1,
.supercall-mx-definicion p {
    font-family: var(--font-syne);
    font-size: var(--font-size-62);
    font-weight: 700;
    font-style: normal;
    color: var(--color-texto-negro-principal);
    text-align: center;
}

.supercall-mx-definicion p {
    font-family: var(--font-museo-moderno);
    font-size: var(--font-size-39);
    font-weight: 400;
    color: var(--color-petroleo);
    max-width: 40ch;
    margin: 5% auto 0 auto;
}

.supercall-mx-primer-dia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 5% 0 3% 7%;
}

.supercall-mx-primer-dia article {
    width: 48%;
    padding-right: 3%;
}

.supercall-mx-primer-dia article h2, 
.supercall-mx-primer-dia article p {
    font-family: var(--font-syne);
    font-size: var(--font-size-58);
    font-weight: 700;
    font-style: normal;
    color: var(--color-terciario);
    max-width: 19ch;
}

.supercall-mx-primer-dia article p {
    font-size: var(--font-size-24);
    font-weight: 600;
    color: var(--color-texto-negro-principal);
    max-width: 52ch;
    margin-top: 5%;
}

.supercall-mx-primer-dia-img {
    width: 52%;
}

.supercall-mx-primer-dia-img img {
    width: 100%;
    border-top-left-radius: 3.2rem;
    border-bottom-left-radius: 3.2rem;
}

.mision-vision {
    padding: 0 7% 5% 7%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2rem, 4%, 10rem);
    padding-bottom: 5%;
    justify-content: space-between;
}

.mision-vision h4,
.mision-vision-titulo,
.mision-vision-parrafo {
    font-family: var(--font-syne);
    font-size: var(--font-size-30);
    font-weight: 700;
    font-style: normal;
    color: var(--color-texto-negro-principal);
}

.mision-vision h4 {
    font-size: var(--font-size-22);
    color: var(--color-terciario);
    margin-bottom: 2.4rem;
}

.mision-vision-titulo {
    margin: 8% 0 6% 0;
}

.mision-vision-parrafo {
    font-weight: 600;
    font-size: var(--font-size-24);
    margin-bottom: 1rem;
}

.mision-vision-item {
    width: clamp(30rem, 48%, 83rem);
    background-color: var(--color-secundario);
    padding: 3%;
    display: flex;
    flex-direction: column;
    border-radius: 3.2rem;
}

.mision-vision-img {
    width: 15%;
    align-self: center;
}

.mision-vision-img img {
    width: 100%;
}

.color-terciario {
    background-color: var(--color-terciario);
}

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

@media (max-width: 740px) {
    .supercall-mx-primer-dia {
        padding-right: 7%;
        gap: 3rem;
    }

    .supercall-mx-primer-dia article,
    .supercall-mx-primer-dia-img,
    .mision-vision-item {
        width: 100%;
    }
    
    .supercall-mx-primer-dia article {
        padding: 0;
    }

    .supercall-mx-primer-dia article h2,
    .supercall-mx-primer-dia article p {
        max-width: none;
    }
}

/* VALORES */

.valores {
    padding: 5% 7%;
    background-color: var(--color-terciario);
}

.valores h2, 
.valor h4, .valor p {
    font-family: var(--font-syne);
    font-size: var(--font-size-58);
    font-weight: 700;
    font-style: normal;
    color: var(--color-blanco);
    text-align: center;
}

.valor h4 {
    font-size: var(--font-size-28);
    color: var(--color-texto-negro-principal);
    max-width: 22ch;
}

.valor p {
    font-size: var(--font-size-20);
    font-weight: 500;
    color: var(--color-texto-negro-principal);
    max-width: 30ch;
}

.valores-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    gap: 2rem;
    max-width: 2000px;
    margin: 7rem auto 0 auto;
}

.valor {
    background-color: var(--color-blanco);
    border-radius: 3.2rem;
    padding: 5% 1.5% 3% 1.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.5vw + 1.2rem);
    max-width: 54rem;
    width: 31%;
    min-width: 30rem;
    flex: 1;
}

.valor-img {
    height: 80px;
    width: auto;
}

@media (max-width: 1195px) {
    .valores-contenedor {
        gap: 4rem;
    }
}

@media (max-width: 550px) {
    .valor {
        min-width: 25rem;
        width: 100%;
        padding: 2rem 1.2rem;
        gap: 2rem;
    }
}

/* UNICOS */
.unicos {
    padding: 5% 7%;
}

.unicos-titulo, .caracteristicas-titulo {
    font-family: var(--font-syne);
    font-size: var(--font-size-58);
    font-weight: 700;
    font-style: normal;
    color: var(--color-texto-negro-principal);
    text-align: center;
    margin-bottom: 4%;
}

.unicos-caracteristicas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    gap: 2rem;
}

.caracteristica {
    width: clamp(27rem, 30%, 510rem);
    background-color: var(--color-terciario);
    border-radius: 3.2rem;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

.caracteristicas-img, .caracteristicas-img img {
    width: 100%;
    border-top-left-radius: 3.2rem;
    border-top-right-radius: 3.2rem;
}

.caracteristicas-img img {
    display: block;
}

.contenedor-caracteristicas {
    padding: 2rem;
}

.contenedor-caracteristicas li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.contenedor-caracteristicas li:last-child,
.caracteristicas-titulo {
    margin: 0;
}

.caracteristicas-titulo {
    font-size: var(--font-size-32);
    color: var(--color-blanco);
    text-align: inherit;
    min-height: 4vw;
    margin-bottom: calc(1% + 1rem);
}

.caracteristicas-descripcion{
    font-family: var(--font-syne);
    font-size: var(--font-size-24);
    font-weight: 500;
    font-style: normal;
    color: var(--color-blanco);
}

@media (max-width: 660px) {
    .caracteristica {
        width: 100%;
    }
}

@media (min-width: 2520px) {
    .caracteristicas-titulo {
        min-height: auto;
    }
}

/* SIGUIENTE PASO */
.paso {
    display: flex;
    flex-wrap: wrap;
}

.paso-img {
    width: 50%;
    min-width: 30rem;
    background-color: var(--color-terciario);
    padding-top: 2%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.paso-img img {
    width: 100%;
    max-width: 80rem;
    margin: 0 0 0 auto;
}

.contenido {
    width: 50%;
    min-width: 30rem;
    background-color: var(--color-gris);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
    gap: 4rem;
}

.contenido h3 {
    font-family: var(--font-museo-moderno);
    font-size: var(--font-size-48);
    font-weight: 700;
    font-style: normal;
    color: var(--color-texto-negro-principal);
    max-width: 28ch;
    line-height: 1.2;
}

.contenido p, .contenido a {
    font-family: var(--font-syne);
    font-size: var(--font-size-24);
    font-weight: 500;
    font-style: normal;
    color: var(--color-texto-negro-terciario);
    max-width: 53ch;
    margin-bottom: 1rem;
}

.contenido a {
    font-weight: 700;
    color: var(--color-blanco);
    padding: 2% 4%;
    background-color: var(--color-principal);
    border-radius: 10rem;
    align-self: flex-start;
}

@media (max-width: 600px) {

    .contenido {
        width: 100%;
    }

    .paso-img {
        width: 100%;
        order: 1;
    }

    .paso-img img {
        width: 60%;
        margin: 0;
    }
}

/* TALENTO */
.talento {
    padding: 5% 7% 0 0;
    background-color: var(--color-secundario);
}

.talento-descripcion {
    grid-area: descripcion;
    margin-left: calc(8% + 5rem);
}

@media (max-width: 1500px) {
    .talento-descripcion {
        margin-left: calc(10% + 3rem);
    }
}

.talento-img {
    grid-area: imagen;
    align-self: flex-end;
    max-width: 1200px;
    margin-top: calc(1% + 1rem);
}

.talento-img img {
    width: 100%;
    display: block;
}

.formulario-demo {
    grid-area: demo;
}

.talento-contenido {
    display: grid;
    grid-template:
        "descripcion descripcion descripcion demo demo"
        "imagen imagen imagen demo demo"
        "imagen imagen imagen demo demo";

}

.talento-titulo, .talento-descripcion p, .descripcion-negritas {
    font-family: var(--font-syne);
    font-size: var(--font-size-58);
    font-weight: 700;
    font-style: normal;
    color: var(--color-texto-negro-principal);
    text-align: center;
    margin-bottom: 4%;
}

.talento-descripcion p, .descripcion-negritas {
    font-size: var(--font-size-28);
    font-weight: 500;
    text-align: left;
    margin: 0;
}

.descripcion-negritas {
    font-weight: 700;
}

.talento-descripcion p:first-child {
    margin-bottom: 2%;
}

.formulario-descripcion, .formulario-label, 
.formulario-input, .formulario-input::placeholder,
.carga-archivo-boton {
    font-family: var(--font-syne);
    font-size: var(--font-size-48);
    font-weight: 700;
    font-style: normal;
    color: var(--color-blanco);
}

.formulario-demo {
    background-color: var(--color-principal);
    border-radius: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3%;
    gap: 1.4rem;
    margin: 0 0 14% 6%;
    max-width: 60rem;
    place-self: center;
}

.formulario-demo form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: calc(.8vw + 1.1rem);
}

.formulario-descripcion {
    font-weight: 400;
    font-size: var(--font-size-20);
    text-align: center;
}

.formulario-demo hr {
    width: 80%;
    background-color: var(--color-secundario);
    border: none;
    height: .1rem;
    margin: calc(0.2vw + 1rem);
}

.formulario-label {
    font-weight: 500;
    font-size: var(--font-size-14);
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .4rem;
}

.formulario-input, .carga-archivo-boton {
    padding: 1.5%;
    border: none;
    border-radius: 1rem;
}

.formulario-input:focus {
    outline: none;
}

.formulario-input, .formulario-input::placeholder, .carga-archivo-boton {
    font-size: var(--font-size-17);
    color: var(--color-gris-secundario);
    background-color: var(--color-blanco);     
}

.formulario-input, .cargado {
    color: var(--color-texto-negro-principal);
}

.formulario-input[type=button] {
    margin-top: 4%;
    background-color: var(--color-secundario);
    color: var(--color-principal);
    border-radius: 10rem;
    display: inline-flex;
    align-self: center;
    padding: 1.5% 4%;
}

.btnAccion {
    border: none;
    opacity: 0.8;
    cursor: default;
}

.btnActivado {
    opacity: 1;
    cursor: pointer;
}

.desactivado {
    opacity: 0;
}

/* TALENTO - FORMULARIO - INPUT TYPE FILE */
.archivo-carga-wrapper {
    cursor: pointer;
    align-self: flex-start;
    width: auto;
}

.archivo-carga-input {
    opacity: 0;
    position: absolute;
    z-index: -1;
    width: 10px;
}

.carga-archivo-boton {
    display: inline-block;
    background-color: var(--color-blanco);
    border: none;
    color: var(--color-principal);
    padding: .4rem .6rem;
    background-color: var(--color-gris);
}

.archivo-carga-nombre {
    display: inline-block;
    margin-left: 10px;
    color: var(--color-secundario);
}

@media (max-width: 800px) {
    .talento-contenido {
        grid-template:
        "descripcion"
        "demo"
        "imagen";
        gap: 1.5rem;
    }

    .talento {
        padding: 5% 7% 0 7%;
    }

    .talento-descripcion {
        margin: 0;
    }

    .formulario-demo {
        margin: 5% 10%;
    }
}

@media (max-width: 500px) {
    .formulario-demo {
        margin: 5% 0;
    }
}

/* QUITAR EL FEEDBACK AL DAR CLICK AL ALGUN ELEMENTO */
a, input[type="button"], [role="button"] {
    -webkit-tap-highlight-color: transparent;
}