/* =========================================================
   ÁREA DEL FORMULARIO
   ========================================================= */

.downloadable-card__form-area {
    position: relative;
    width: 100%;
    overflow: hidden;

    border-radius: 14px;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.downloadable-card .download-form {
    display: grid;

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

    column-gap: 24px;
    row-gap: 18px;

    width: 100%;
}


/* Eliminar márgenes automáticos que añade WordPress */

.downloadable-card .download-form p {
    margin: 0;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.downloadable-card .download-form__field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}

.downloadable-card .download-form__field label {
    display: block;

    margin: 0;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;

    color: #181818;
}


/* Ocultamos el br que introduce WordPress */

.downloadable-card .download-form__field br {
    display: none;
}


/* =========================================================
   INPUTS
   ========================================================= */

.downloadable-card .download-form__field input {
    width: 100%;
    height: 54px;

    margin: 0;
    padding: 0 18px;

    border: 1px solid rgba(24, 24, 24, 0.16);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.96);

    color: #252525;

    font-size: 16px;

    box-shadow: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.downloadable-card .download-form__field input::placeholder {
    color: #7a7a7a;
}

.downloadable-card .download-form__field input:focus {
    outline: none;

    border-color: #e98618;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(233, 134, 24, 0.13);
}


/* =========================================================
   FILA INFERIOR
   PRIVACIDAD + BOTÓN
   ========================================================= */

.downloadable-card .download-form__privacy {
    display: flex;
    align-items: center;

    min-width: 0;
}

.downloadable-card .download-form__privacy .wpcf7-list-item {
    margin: 0;
}

.downloadable-card .download-form__privacy label {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    cursor: pointer;
}

.downloadable-card .download-form__privacy input[type="checkbox"] {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin: 2px 0 0;
}

.downloadable-card .download-form__privacy .wpcf7-list-item-label {
    font-size: 14px;
    line-height: 1.45;

    color: #252525;
}

.downloadable-card .download-form__privacy a {
    color: inherit;

    text-decoration: underline;
    text-underline-offset: 2px;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.downloadable-card .download-form__submit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.downloadable-card .download-form__submit input[type="submit"] {
    width: auto;
    min-width: 230px;
    height: 52px;

    margin: 0;
    padding: 0 24px;

    border: 0;
    border-radius: 7px;

    background: #343247;

    color: #fff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    box-shadow: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        opacity 0.25s ease;
}

.downloadable-card
.download-form__submit
input[type="submit"]:not(:disabled):hover {
    background: #242232;

    transform: translateY(-2px);
}

.downloadable-card
.download-form__submit
input[type="submit"]:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}


/* =========================================================
   MENSAJES DE CONTACT FORM 7
   ========================================================= */

.downloadable-card .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 12px 15px !important;

    border-radius: 6px;

    font-size: 14px;
    line-height: 1.4;
}

.downloadable-card .wpcf7-not-valid-tip {
    margin-top: 5px;

    font-size: 13px;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.downloadable-card__form-area {
    position: relative;
}


/* =========================================================
   WIDGET DE ELEMENTOR QUE CONTIENE EL OVERLAY
   ========================================================= */

.downloadable-card .downloadable-overlay-widget {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.downloadable-card
.downloadable-overlay-widget
.elementor-widget-container {
    width: 100%;
    height: 100%;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.downloadable-card .downloadable-overlay {
    position: relative;

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

    width: 100%;
    height: 100%;
    min-height: 100%;

    padding: 35px;

    background: rgba(255, 255, 255, 0.97);

    pointer-events: none;
}


/* =========================================================
   ESTADO ACTIVO
   ========================================================= */

.downloadable-card.is-unlocked
.downloadable-overlay-widget {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.downloadable-card.is-unlocked
.downloadable-overlay {
    pointer-events: auto;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.downloadable-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 520px;

    margin: auto;

    text-align: center;
}


/* =========================================================
   ICONO
   ========================================================= */

.downloadable-overlay__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 0 18px;

    border-radius: 50%;

    background: #ef8613;
}

.downloadable-overlay__icon svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TEXTOS
   ========================================================= */

.downloadable-overlay__content h3 {
    margin: 0 0 10px !important;

    color: #282536;

    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.downloadable-overlay__content p {
    max-width: 430px;

    margin: 0 0 22px !important;

    color: #555;

    font-size: 16px;
    line-height: 1.55;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.downloadable-overlay__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 14px 28px;

    border-radius: 7px;

    background: #ef8613;

    color: #fff !important;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(239, 134, 19, 0.22);

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

.downloadable-overlay__button:hover {
    background: #d9770c;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 11px 28px rgba(239, 134, 19, 0.3);
}


/* =========================================================
   OCULTAR MENSAJE CF7 CUANDO SE ABRE EL OVERLAY
   ========================================================= */

.downloadable-card.is-unlocked
.wpcf7-response-output {
    visibility: hidden !important;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media screen and (max-width: 767px) {

    .downloadable-card .downloadable-overlay {
        padding: 25px 20px;
    }

    .downloadable-overlay__icon {
        width: 52px;
        height: 52px;

        margin-bottom: 15px;
    }

    .downloadable-overlay__content h3 {
        font-size: 25px;
    }

    .downloadable-overlay__content p {
        font-size: 15px;
    }

    .downloadable-overlay__button {
        width: 100%;
        max-width: 280px;
    }

}


/* =========================================================
   ICONO
   ========================================================= */

.downloadable-overlay__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 0 18px;

    border-radius: 50%;

    background: #e98618;
}

.downloadable-overlay__icon svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TÍTULO Y TEXTO
   ========================================================= */

.downloadable-overlay__content h3 {
    margin: 0 0 10px;

    color: #242232;

    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.15;
}

.downloadable-overlay__content p {
    max-width: 430px;

    margin: 0 0 22px;

    color: #555;

    font-size: 16px;
    line-height: 1.55;
}


/* =========================================================
   BOTÓN DEL PDF
   ========================================================= */

.downloadable-overlay__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 50px;

    padding: 14px 26px;

    border-radius: 7px;

    background: #e98618;

    color: #fff !important;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    box-shadow:
        0 8px 24px rgba(233, 134, 24, 0.22);

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

.downloadable-overlay__button:hover {
    background: #d87910;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 11px 28px rgba(233, 134, 24, 0.3);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    .downloadable-card .download-form {
        column-gap: 16px;
    }

    .downloadable-card .download-form__submit input[type="submit"] {
        min-width: 210px;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media screen and (max-width: 767px) {

    .downloadable-card .download-form {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .downloadable-card .download-form__privacy {
        order: 3;
    }

    .downloadable-card .download-form__submit {
        order: 4;

        justify-content: stretch;
    }

    .downloadable-card .download-form__submit input[type="submit"] {
        width: 100%;
        min-width: 0;
    }

    .downloadable-overlay {
        padding: 25px 20px;
    }

    .downloadable-overlay__icon {
        width: 52px;
        height: 52px;

        margin-bottom: 15px;
    }

    .downloadable-overlay__content h3 {
        font-size: 25px;
    }

    .downloadable-overlay__content p {
        font-size: 15px;
    }

    .downloadable-overlay__button {
        width: 100%;
        max-width: 280px;
    }

}