/* =========================================================
   POPUP FORMULARIO — ESFECOL
========================================================= */

.popup-formulario {
    --popup-blue: #064b9b;
    --popup-blue-dark: #073567;
    --popup-pink: #df1761;
    --popup-text: #172033;
    --popup-muted: #68758a;
    --popup-border: #dfe5ec;

    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.popup-formulario.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   BACKDROP
========================================================= */

.popup-formulario__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(7, 27, 52, .68);

    backdrop-filter: blur(4px);
}


/* =========================================================
   DIALOG
========================================================= */

.popup-formulario__dialog {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);
    max-height: min(90vh, 850px);

    overflow-y: auto;

    padding: 38px;

    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, .25);

    transform: translateY(18px) scale(.98);

    transition:
        transform .25s ease;
}


.popup-formulario.is-open .popup-formulario__dialog {
    transform: translateY(0) scale(1);
}


/* =========================================================
   CLOSE
========================================================= */

.popup-formulario__close {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f3f6f9;

    color: var(--popup-blue-dark);

    font-family: inherit;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.popup-formulario__close:hover {
    background: #e8eef5;

    transform: rotate(90deg);
}


/* =========================================================
   HEADER
========================================================= */

.popup-formulario__header {
    max-width: 600px;

    margin-bottom: 28px;

    padding-right: 45px;
}


.popup-formulario__eyebrow {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--popup-blue);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .14em;
}


.popup-formulario__header h2 {
    margin: 0 0 10px;

    color: var(--popup-blue-dark);

    font-family: 'Montserrat', sans-serif;

    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;

    letter-spacing: -.025em;
}


.popup-formulario__header p {
    margin: 0;

    color: var(--popup-muted);

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   FORM
========================================================= */

.popup-formulario__form {
    display: flex;
    flex-direction: column;

    gap: 17px;
}


.popup-formulario__row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


.popup-formulario__field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.popup-formulario__field label {
    color: var(--popup-blue-dark);

    font-size: 13px;
    font-weight: 700;
}


.popup-formulario__field label span {
    color: var(--popup-pink);
}


.popup-formulario__field input,
.popup-formulario__field select,
.popup-formulario__field textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #d9e0e8;
    border-radius: 9px;

    padding: 12px 14px;

    background: #fff;

    color: var(--popup-text);

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.popup-formulario__field input,
.popup-formulario__field select {
    min-height: 48px;
}


.popup-formulario__field textarea {
    min-height: 105px;

    resize: vertical;
}


.popup-formulario__field input::placeholder,
.popup-formulario__field textarea::placeholder {
    color: #9aa5b4;
}


.popup-formulario__field input:focus,
.popup-formulario__field select:focus,
.popup-formulario__field textarea:focus {
    border-color: var(--popup-blue);

    box-shadow:
        0 0 0 3px rgba(6, 75, 155, .10);
}


/* =========================================================
   BUTTON
========================================================= */

.popup-formulario__button {
    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 3px;

    border: 0;
    border-radius: 9px;

    background: var(--popup-blue);

    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.popup-formulario__button span:last-child {
    font-size: 22px;
}


.popup-formulario__button:hover {
    background: var(--popup-blue-dark);

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(6, 75, 155, .20);
}


/* =========================================================
   PRIVACIDAD
========================================================= */

.popup-formulario__privacy {
    margin: -2px 0 0;

    color: #8995a5;

    font-size: 11px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   ALERTAS
========================================================= */

.popup-formulario__alert {
    margin-bottom: 20px;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 13px;
    line-height: 1.5;
}


.popup-formulario__alert--success {
    border: 1px solid #b8e4cd;

    background: #effaf4;

    color: #21744b;
}


.popup-formulario__alert--error {
    border: 1px solid #efc0cd;

    background: #fff2f5;

    color: #a2264d;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.popup-formulario-open {
    overflow: hidden;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .popup-formulario {
        align-items: flex-start;

        padding: 15px;
    }


    .popup-formulario__dialog {
        width: 100%;
        max-height: calc(100vh - 30px);

        padding: 28px 20px;

        border-radius: 16px;
    }


    .popup-formulario__close {
        top: 12px;
        right: 12px;
    }


    .popup-formulario__header {
        padding-right: 42px;

        margin-bottom: 22px;
    }


    .popup-formulario__header h2 {
        font-size: 28px;
    }


    .popup-formulario__header p {
        font-size: 14px;
    }


    .popup-formulario__row {
        grid-template-columns: 1fr;
    }


    .popup-formulario__form {
        gap: 15px;
    }

}