/*
 * EEFB_PARTNER_ACCESS_VISUAL_V2
 * Registro y acceso del Programa Partners.
 */

:root{
    --pa-midnight:#1e2434;
    --pa-midnight-deep:#141821;

    --pa-terracotta:#e3784d;
    --pa-terracotta-hover:#c25529;
    --pa-terracotta-dark:#9e3f1c;
    --pa-terracotta-soft:#fdf1e6;

    --pa-bone:#faf7f0;
    --pa-ivory:#f3ecdc;

    --pa-ink:#1a1612;
    --pa-muted:#6e6253;

    --pa-line:#e2dac7;
    --pa-line-strong:#cdc3a9;

    --pa-success:#1f6b46;
    --pa-danger:#8a1f1f;
}


*{
    box-sizing:border-box;
}


html{
    min-height:100%;
}


body{
    min-height:100vh;
    margin:0;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(227,120,77,.10),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #faf7f0 0%,
            #f7f1e5 100%
        );

    color:var(--pa-ink);

    font-family:
        Manrope,
        "Helvetica Neue",
        Arial,
        sans-serif;

    line-height:1.55;
}


a{
    color:var(--pa-terracotta-dark);
}


a:hover{
    color:var(--pa-terracotta-hover);
}


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

.pa-header{
    min-height:76px;

    display:flex;
    align-items:center;

    border-bottom:
        1px solid
        rgba(205,195,169,.65);

    background:
        rgba(250,247,240,.91);

    backdrop-filter:
        blur(14px);

    position:relative;
    z-index:5;
}


.pa-header-inner{
    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin:0 auto;

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

    gap:25px;
}


.pa-brand{
    display:flex;
    align-items:center;

    gap:12px;

    color:var(--pa-ink);

    text-decoration:none;
}


.pa-brand img{
    width:28px;
    height:28px;
}


.pa-brand-name{
    display:block;

    font-family:
        "Source Serif 4",
        Georgia,
        serif;

    font-size:25px;
    line-height:1;

    font-weight:600;
}


.pa-brand-sub{
    display:block;

    margin-top:4px;

    color:var(--pa-muted);

    font-size:9px;
    line-height:1.1;

    text-transform:uppercase;

    letter-spacing:.1em;
}


.pa-back{
    font-size:13px;
    font-weight:600;

    color:var(--pa-muted);

    text-decoration:none;
}


.pa-back:hover{
    color:var(--pa-terracotta-dark);
}


/* ==========================================================
   PAGE LAYOUT
   ========================================================== */

.partner-wrap,
.wrap{
    width:min(
        1180px,
        calc(100% - 40px)
    );

    max-width:none;

    margin:0 auto;

    padding:
        65px 0
        85px;

    display:grid;

    grid-template-columns:
        minmax(290px,.75fr)
        minmax(0,1.25fr);

    gap:70px;

    align-items:start;
}


.wrap{
    grid-template-columns:
        minmax(300px,.9fr)
        minmax(380px,.8fr);

    max-width:1040px;
}


/* ==========================================================
   LEFT SIDE
   ========================================================== */

.pa-aside{
    position:sticky;
    top:120px;

    padding-top:10px;
}


.pa-eyebrow{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:20px;

    color:var(--pa-terracotta-dark);

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

    letter-spacing:.14em;

    text-transform:uppercase;
}


.pa-eyebrow:before{
    content:"";

    width:25px;
    height:2px;

    background:
        var(--pa-terracotta);
}


.pa-aside h2{
    max-width:470px;

    margin:
        0 0
        20px;

    font-family:
        "Source Serif 4",
        Georgia,
        serif;

    font-size:
        clamp(
            35px,
            4vw,
            52px
        );

    line-height:1.04;

    letter-spacing:-.027em;

    font-weight:400;
}


.pa-aside h2 em{
    color:
        var(--pa-terracotta-dark);

    font-style:normal;
}


.pa-aside > p{
    max-width:480px;

    color:var(--pa-muted);

    font-size:15px;
}


.pa-benefits{
    margin-top:34px;

    padding-top:10px;
}


.pa-benefit{
    display:grid;

    grid-template-columns:
        28px 1fr;

    gap:13px;

    padding:
        15px 0;

    border-bottom:
        1px solid
        var(--pa-line);
}


.pa-benefit-num{
    color:
        var(--pa-terracotta);

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

    font-family:
        "JetBrains Mono",
        monospace;
}


.pa-benefit strong{
    display:block;

    font-size:13px;
}


.pa-benefit span:last-child{
    display:block;

    margin-top:3px;

    color:var(--pa-muted);

    font-size:12px;
}


/* ==========================================================
   CARD
   ========================================================== */

.partner-card,
.card{
    width:100%;

    margin:0;

    padding:
        36px
        38px;

    border:
        1px solid
        var(--pa-line);

    border-radius:18px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 24px 70px
        rgba(55,43,28,.10);
}


.partner-card > p:first-child,
.card > p:first-child{
    margin:
        0 0
        8px;

    color:
        var(--pa-terracotta-dark);

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

    letter-spacing:.14em;

    text-transform:uppercase;
}


.partner-card h1,
.card h1{
    margin:
        0 0
        14px;

    font-family:
        "Source Serif 4",
        Georgia,
        serif;

    font-size:
        clamp(
            31px,
            4vw,
            41px
        );

    line-height:1.08;

    letter-spacing:-.025em;

    font-weight:500;
}


.partner-card > p:nth-of-type(2){
    margin:
        0 0
        30px;

    max-width:650px;

    color:var(--pa-muted);

    font-size:14px;
}


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

.partner-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px
        18px;
}


.partner-field label,
.field label{
    display:block;

    margin-bottom:7px;

    color:#3d3429;

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


.partner-field input,
.partner-field select,
.field input{
    display:block;

    width:100%;

    min-height:46px;

    padding:
        10px
        12px;

    border:
        1px solid
        var(--pa-line-strong);

    border-radius:7px;

    background:#fff;

    color:var(--pa-ink);

    font:inherit;

    font-size:14px;

    outline:0;

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


.partner-field input:focus,
.partner-field select:focus,
.field input:focus{
    border-color:
        var(--pa-terracotta);

    box-shadow:
        0 0 0 3px
        rgba(227,120,77,.12);
}


.partner-field small{
    display:block;

    margin-top:6px;

    color:var(--pa-muted);

    font-size:11px;
}


.partner-full{
    grid-column:1/-1;
}


.partner-check{
    display:flex;

    gap:11px;

    align-items:flex-start;

    margin-top:4px;

    padding:
        15px 16px;

    border-radius:8px;

    background:
        var(--pa-terracotta-soft);
}


.partner-check input{
    width:17px;
    height:17px;

    margin-top:2px;

    accent-color:
        var(--pa-terracotta);
}


.partner-check label{
    color:#524739;

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


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

.field{
    margin:
        18px 0;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.partner-btn,
button[type="submit"]{
    display:inline-flex;

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

    min-height:49px;

    margin-top:20px;

    padding:
        0 24px;

    border:0;

    border-radius:7px;

    background:
        var(--pa-terracotta);

    color:#fff;

    font-family:inherit;

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

    cursor:pointer;

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


.partner-btn:hover,
button[type="submit"]:hover{
    background:
        var(--pa-terracotta-hover);

    transform:
        translateY(-1px);
}


.partner-btn:disabled,
button[type="submit"]:disabled{
    opacity:.58;

    cursor:wait;

    transform:none;
}


/* ==========================================================
   MESSAGES
   ========================================================== */

.partner-msg{
    display:none;

    margin-top:18px;

    padding:
        13px 14px;

    border-radius:7px;

    font-size:13px;
}


.partner-msg.show{
    display:block;
}


#msg:not(:empty){
    margin-top:18px;

    padding:
        13px 14px;

    border-radius:7px;

    background:
        var(--pa-terracotta-soft);

    color:#633018;

    font-size:13px;
}


/* ==========================================================
   SUPPORT TEXT
   ========================================================== */

.partner-card form + p,
.card form + p{
    margin:
        23px 0 0;

    padding-top:19px;

    border-top:
        1px solid
        var(--pa-line);

    color:
        var(--pa-muted);

    font-size:12px;
}


.partner-card form > p{
    color:
        var(--pa-muted);

    font-size:12px;
}


/* ==========================================================
   INFO PANEL
   ========================================================== */

.pa-info{
    margin-top:28px;

    padding:
        20px;

    border-radius:10px;

    background:
        var(--pa-midnight);

    color:#faf7f0;
}


.pa-info-title{
    margin-bottom:7px;

    font-family:
        "Source Serif 4",
        Georgia,
        serif;

    font-size:18px;
}


.pa-info p{
    margin:0;

    color:
        rgba(250,247,240,.68);

    font-size:12px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.pa-footer{
    padding:
        25px 20px
        34px;

    border-top:
        1px solid
        var(--pa-line);

    text-align:center;

    color:
        var(--pa-muted);

    font-size:11px;
}


.pa-footer a{
    text-decoration:none;
}


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

@media(max-width:860px){

    .partner-wrap,
    .wrap{
        grid-template-columns:1fr;

        gap:35px;

        padding:
            45px 0
            65px;
    }


    .pa-aside{
        position:static;

        max-width:680px;
    }


    .pa-benefits{
        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        gap:10px;
    }


    .pa-benefit{
        display:block;

        padding:15px;

        border:
            1px solid
            var(--pa-line);

        border-radius:8px;

        background:
            rgba(255,255,255,.55);
    }


    .pa-benefit-num{
        display:block;

        margin-bottom:8px;
    }

}


@media(max-width:650px){

    .pa-header-inner{
        width:
            calc(100% - 28px);
    }


    .pa-brand-sub{
        display:none;
    }


    .pa-back{
        font-size:11px;
    }


    .partner-wrap,
    .wrap{
        width:
            calc(100% - 28px);

        padding-top:34px;
    }


    .pa-aside h2{
        font-size:36px;
    }


    .pa-benefits{
        grid-template-columns:1fr;
    }


    .partner-card,
    .card{
        padding:
            27px 20px;

        border-radius:13px;
    }


    .partner-grid{
        grid-template-columns:1fr;
    }


    .partner-full{
        grid-column:auto;
    }


    .partner-btn,
    button[type="submit"]{
        width:100%;
    }

}