/* =====================================================
   FORMULARIO INTERNO LGP
   CONTACT FORM 7
===================================================== */

.lgp-form-interno{
    width:100%;
    max-width:100%;

    font-family:"Felbridge Std", sans-serif;
    color:#ffffff;
}

.lgp-form-interno p{
    margin:0;
}

.lgp-form-interno .wpcf7-form-control-wrap{
    display:block;
    width:100%;
}


/* =====================================================
   DISTRIBUCIÓN DESKTOP
===================================================== */

.lgp-form-interno__campos{
    display:grid;

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

    column-gap:32px;
    row-gap:13px;

    align-items:start;
}

.lgp-form-interno__campo{
    position:relative;
    grid-column:1 / 3;
}

.lgp-form-interno__aceptaciones{
    grid-column:1;

    display:flex;
    flex-direction:column;

    gap:8px;
}

.lgp-form-interno__boton{
    position:relative;

    grid-column:2;
    grid-row:5 / span 2;

    align-self:end;
    justify-self:end;

    transform:translateY(-18px);
}


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

.lgp-form-interno input[type="text"],
.lgp-form-interno input[type="tel"],
.lgp-form-interno input[type="email"]{
    display:block;

    width:100%;
    height:58px;

    margin:0;
    padding:0 16px;

    font-family:"Felbridge Std", sans-serif;
    font-size:17px;
    line-height:1.2;
    font-weight:600;

    color:#ffffff;
    background:rgba(255,255,255,.14);

    border:1px solid rgba(255,255,255,.85);
    border-radius:0;
    outline:none;

    box-shadow:none;
    box-sizing:border-box;

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

.lgp-form-interno input[type="text"]:focus,
.lgp-form-interno input[type="tel"]:focus,
.lgp-form-interno input[type="email"]:focus{
    color:#ffffff;
    background:rgba(255,255,255,.08);

    border-color:#F6AF33;
    box-shadow:none;
}


/* =====================================================
   PLACEHOLDER
===================================================== */

.lgp-form-interno input::placeholder{
    color:#ffffff;
    opacity:1;
}

.lgp-form-interno input::-moz-placeholder{
    color:#ffffff;
    opacity:1;
}


/* =====================================================
   ACEPTACIONES
===================================================== */

.lgp-form-interno__aceptacion{
    width:100%;
}

.lgp-form-interno__aceptacion .wpcf7-list-item{
    display:block;

    width:100%;
    margin:0;
}

.lgp-form-interno__aceptacion label{
    display:flex;
    align-items:flex-start;

    width:100%;
    gap:8px;
    margin:0;

    font-family:"Felbridge Std", sans-serif;
    font-size:13px;
    line-height:1.35;
    font-weight:400;

    color:#ffffff;
    cursor:pointer;
}

.lgp-form-interno__aceptacion .wpcf7-list-item-label{
    display:block;

    flex:1;
    min-width:0;
}


/* =====================================================
   ENLACE POLÍTICAS DE PRIVACIDAD
===================================================== */

.lgp-form-interno__aceptacion a{
    position:relative;
    display:inline;

    color:#ffffff;
    text-decoration:none;

    background-image:linear-gradient(#ffffff, #ffffff);
    background-size:100% 1px;
    background-position:0 100%;
    background-repeat:no-repeat;

    cursor:pointer;

    transition:
        color .25s ease,
        background-size .25s ease,
        background-image .25s ease;
}

/* Hover */
.lgp-form-interno__aceptacion a:hover{
    color:#F6AF33;

    background-image:linear-gradient(#F6AF33, #F6AF33);
    background-size:100% 2px;
}

/* Navegación con teclado */
.lgp-form-interno__aceptacion a:focus-visible{
    color:#F6AF33;

    background-image:linear-gradient(#F6AF33, #F6AF33);

    outline:2px solid #F6AF33;
    outline-offset:3px;
}


/* =====================================================
   CHECKBOX
===================================================== */

.lgp-form-interno input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;

    display:inline-grid;
    place-content:center;

    flex:0 0 19px;

    width:19px;
    min-width:19px;
    max-width:19px;

    height:19px;
    min-height:19px;
    max-height:19px;

    margin:1px 0 0;
    padding:0;

    background:transparent;

    border:1px solid #ffffff;
    border-radius:0;

    box-sizing:border-box;
    cursor:pointer;
}

.lgp-form-interno input[type="checkbox"]::before{
    content:"";

    width:9px;
    height:5px;

    border-left:2px solid #ffffff;
    border-bottom:2px solid #ffffff;

    transform:rotate(-45deg) scale(0);
    transition:transform .15s ease;
}

.lgp-form-interno input[type="checkbox"]:checked{
    background:#4B4E99;
    border-color:#ffffff;
}

.lgp-form-interno input[type="checkbox"]:checked::before{
    transform:rotate(-45deg) scale(1);
}


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

.lgp-form-interno__boton input[type="submit"]{
    display:flex;
    align-items:center;
    justify-content:center;

    width:180px;
    height:50px;

    margin:0;
    padding:0 16px;

    font-family:"Foco", sans-serif;
    font-size:20px;
    line-height:1;
    font-weight:800;

    color:#ffffff;
    background:#4B4E99;

    border:0;
    border-radius:0;
    outline:none;

    clip-path:polygon(
        12px 0,
        100% 0,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0 100%,
        0 12px
    );

    cursor:pointer;
    box-shadow:none;
    box-sizing:border-box;

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

.lgp-form-interno__boton input[type="submit"]:hover,
.lgp-form-interno__boton input[type="submit"]:focus{
    color:#ffffff;
    background:#4B4E99;

    box-shadow:none;

    transform:translateY(-2px);
    opacity:.9;
}

.lgp-form-interno__boton .wpcf7-spinner{
    position:absolute;

    top:100%;
    left:0;

    margin:8px 0 0;
}


/* =====================================================
   VALIDACIONES
===================================================== */

.lgp-form-interno .wpcf7-not-valid{
    border-color:#ffcc00 !important;
}

.lgp-form-interno .wpcf7-not-valid-tip{
    margin-top:5px;

    font-family:"Felbridge Std", sans-serif;
    font-size:11px;
    line-height:1.3;

    color:#ffcc00;
}

.lgp-form-interno .wpcf7-response-output{
    margin:16px 0 0 !important;
    padding:9px 12px !important;

    font-family:"Felbridge Std", sans-serif;
    font-size:12px;
    line-height:1.4;

    color:#ffffff;

    border:1px solid #ffffff !important;
}


/* =====================================================
   DESKTOP PEQUEÑO
   1025px A 1200px
===================================================== */

@media (min-width:1025px) and (max-width:1200px){

    /* Distribución */
    .lgp-form-interno__campos{
        grid-template-columns:minmax(0, 1fr) 165px;
        column-gap:26px;
        row-gap:12px;
    }

    /* Campos */
    .lgp-form-interno input[type="text"],
    .lgp-form-interno input[type="tel"],
    .lgp-form-interno input[type="email"]{
        height:50px;

        padding-left:15px;
        padding-right:15px;

        font-size:16px;
    }

    /* Aceptaciones */
    .lgp-form-interno__aceptaciones{
        gap:7px;
    }

    .lgp-form-interno__aceptacion label{
        gap:8px;

        font-size:12px;
        line-height:1.25;
    }

    /* Checkbox */
    .lgp-form-interno input[type="checkbox"]{
        flex-basis:16px;

        width:16px;
        min-width:16px;
        max-width:16px;

        height:16px;
        min-height:16px;
        max-height:16px;
    }

    .lgp-form-interno input[type="checkbox"]::before{
        width:8px;
        height:5px;
    }

    /* Botón */
    .lgp-form-interno__boton{
        transform:translateY(-15px);
    }

    .lgp-form-interno__boton input[type="submit"]{
        width:165px;
        height:44px;

        padding:0 14px;

        font-size:18px;

        clip-path:polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );
    }

    /* Validaciones */
    .lgp-form-interno .wpcf7-not-valid-tip{
        margin-top:3px;
        font-size:10px;
    }

    .lgp-form-interno .wpcf7-response-output{
        margin-top:12px !important;
        padding:8px 11px !important;
        font-size:12px;
    }

}


/* =====================================================
   TABLET
   CAMPOS, ACEPTACIONES Y BOTÓN EN UNA COLUMNA
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .lgp-form-interno__campos{
        grid-template-columns:minmax(0, 1fr);

        column-gap:0;
        row-gap:14px;
    }

    .lgp-form-interno__campo,
    .lgp-form-interno__aceptaciones,
    .lgp-form-interno__boton{
        grid-column:1;
    }

    .lgp-form-interno__campo{
        width:100%;
    }

    .lgp-form-interno input[type="text"],
    .lgp-form-interno input[type="tel"],
    .lgp-form-interno input[type="email"]{
        height:55px;
        font-size:17px;
    }

    .lgp-form-interno__aceptaciones{
        width:100%;
        gap:10px;
    }

    .lgp-form-interno__aceptacion label{
        align-items:center;

        width:100%;
        font-size:14px;
        line-height:1.3;
    }

    .lgp-form-interno__boton{
        grid-row:auto;

        width:100%;
        margin-top:8px;

        align-self:auto;
        justify-self:stretch;

        transform:none;
    }

    .lgp-form-interno__boton input[type="submit"]{
        display:flex;

        width:100% !important;
        max-width:none !important;
        height:48px;

        font-size:20px;
    }

}


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

@media (max-width:767px){

    .lgp-form-interno__campos{
        grid-template-columns:minmax(0, 1fr);

        column-gap:0;
        row-gap:12px;
    }

    .lgp-form-interno__campo,
    .lgp-form-interno__aceptaciones,
    .lgp-form-interno__boton{
        grid-column:1;
    }

    /* Campos de una sola línea */
    .lgp-form-interno input[type="text"],
    .lgp-form-interno input[type="tel"],
    .lgp-form-interno input[type="email"]{
        height:50px;

        padding-left:14px;
        padding-right:14px;

        font-size:16px;
    }

    /* Aceptaciones */
    .lgp-form-interno__aceptaciones{
        width:100%;
        gap:9px;
    }

    .lgp-form-interno__aceptacion label{
        align-items:flex-start;

        gap:9px;

        font-size:12px;
        line-height:1.3;
    }

    /* Checkbox */
    .lgp-form-interno input[type="checkbox"]{
        flex-basis:17px;

        width:17px;
        min-width:17px;
        max-width:17px;

        height:17px;
        min-height:17px;
        max-height:17px;
    }

    /* Botón */
    .lgp-form-interno__boton{
        grid-row:auto;

        width:auto;
        margin-top:10px;

        align-self:auto;
        justify-self:start;

        transform:none;
    }

    .lgp-form-interno__boton input[type="submit"]{
        display:flex;

        width:180px !important;
        max-width:180px !important;
        height:45px;

        font-size:19px;
    }

}

/* =====================================================
   LGP FORM INTERNO — CORREGIR AUTOFILL CHROME / EDGE
===================================================== */

.lgp-form-interno input:-webkit-autofill,
.lgp-form-interno input:-webkit-autofill:hover,
.lgp-form-interno input:-webkit-autofill:focus,
.lgp-form-interno input:-webkit-autofill:active {
    
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;

    /*
     * Evita que Chrome coloque su fondo celeste.
     * El color se mantiene prácticamente transparente
     * para conservar la fotografía del fondo.
     */
    -webkit-box-shadow:
        0 0 0 1000px rgba(255,255,255,.14) inset !important;

    box-shadow:
        0 0 0 1000px rgba(255,255,255,.14) inset !important;

    border: 1px solid rgba(255,255,255,.85) !important;

    transition:
        background-color 9999s ease-out 0s !important;
}


/* =====================================================
   FIREFOX
===================================================== */

.lgp-form-interno input:autofill {
    color: #ffffff !important;
    background: rgba(255,255,255,.14) !important;
}