main {
    background-image: url(../../../public/images/cdmx2024/inicio/contacto/fondo_descargables.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

section.container {
    max-width: 1320px;
    width: 100%;
}

.grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    justify-items: center;
}

.elemento {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    width: 90%;
    max-width: 500px;
}

@media (min-width: 876px) {
    .grid-responsive {
        grid-template-columns: 1fr 1fr; /* izquierda 1/3, derecha 2/3 */
        grid-template-rows: auto auto;
        grid-template-areas: 'elemento-2 elemento-1';
        padding: 1rem;
        gap: 0%;
    }

    .elemento-1 {
        grid-area: elemento-1;
    }

    .elemento-2 {
        grid-area: elemento-2;
        justify-content: flex-start;
    }
}

/* ------------------------- 
            Info
---------------------------- */
h1.titulo {
    text-align: center;
    font-size: clamp(48px, 7vw, 82px);
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    background: var(--degradado-cdmx);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 4%;
}

h1.titulo span {
    font-weight: 800;
}

.elemento h2 {
    color: var(--turquesa-medex);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.elemento-2 p,
.check-recibir {
    text-align: center;
    color: #00537d;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.check-recibir {
    text-align:left;
}

@media (min-width: 876px) {
    .elemento h2,
    .elemento p,
    .check-recibir {
        text-align: left;
    }
}

/* -------------------------- 
        Iconos Redes
---------------------------- */
.elemento .iconos-seguir {
    justify-content: center;
}

.redes-contactanos .lista-redes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    justify-items: center;
}

.redes-contactanos .icono-redes {
    background-color: white;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.redes-contactanos .icono-redes {
    background: var(--degradado-gdl);
    color: white;
}

.redes-contactanos .icono-redes svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.redes-contactanos .icono-redes:hover,
.redes-contactanos .icono-redes:active {
    transform: scale(1.1);
    background: var(--azul-marino-medex);
}

.redes-contactanos .icono-redes:hover svg {
    fill: white;
}

@media (max-width: 480px) {
    .redes-contactanos .lista-redes {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 876px) {
    .elemento .iconos-seguir {
        justify-content: left;
    }
}
/* -------------------------- 
            Inputs
---------------------------- */
.form-select {
    display: block;
    width: 100%;
}

.form-select.is-invalid {
    border-color: #dc3545 !important;
}

.form-select.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-floating .form-control {
    padding: 22px 16px 5px 15px;
}

.form-floating .form-select {
    padding: 18px 16px 5px 15px;
}

.form-floating > .form-select:not(.has-value):not(:focus) ~ label {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) scale(1) !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select.has-value ~ label {
    opacity: 0.65;
    top: -5px;
    font-size: 0.8rem;
    color: #03547e;
}

.form-floating > label {
    top: -2px;
    position: absolute;
    transition: all 0.2s ease;
    color: var(--azul-marino-medex) !important;
    pointer-events: none;
}

.form-floating > label span {
    color: #dc3545;
}

.form-section .form-control,
.form-section .form-select {
    height: 45px !important;
    min-height: 45px;
    border-radius: 8px;
    border: 1px solid #03547e;
    background: #fff;
    color: var(--azul-medex);
    font-size: 15px;
}

.form-section a {
    text-decoration: none;
}

/* -------------------- */

.form-control {
    height: 45px !important;
    min-height: 45px !important;
    border-radius: 4px !important;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #545454;
    font-size: 15px;
}

.form-select {
    height: 45px !important;
    min-height: 45px !important;
    border-radius: 4px !important;
    border: 1px solid #d0d0d0;
    color: #545454;
    font-size: 15px;
}

textarea.form-control {
    min-height: calc(
        1.5em + 0.75rem + calc(var(--bs-border-width) * 2)
    ) !important;
    height: auto !important;
}

/* -------------------------
Boton
---------------------------- */
.btn-20 {
    max-width: 380px;
    width: 90%;
    height: 43px;
}

button span {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

/*-------*/
.whats-container {
    left: 20px;
    right: auto !important;
}