@import url("/assets/nexo-contact-v44/contact-b226-final.css?v=226");

/* NEXO-CONTACT-B226A-PREMIUM-POLISH */

#nexo-b226{
    --nx-yellow:#ffd600;
    --nx-yellow-hover:#efc900;
    --nx-ink:#171c21;
    --nx-copy:#4b545b;
}

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

.nexo-b226-header__inner{
    min-height:72px;
}

.nexo-b226-brand strong{
    font-size:28px;
    letter-spacing:-.052em;
}

.nexo-b226-brand > span:last-child{
    font-size:13px;
    font-weight:600;
}

.nexo-b226-header__actions a{
    font-size:11.5px;
}

.nexo-b226-login{
    min-height:40px;
    padding:0 18px;
}

/* ======================================================
   BREADCRUMB
   ====================================================== */

.nexo-b226-breadcrumb{
    min-height:63px;
    font-size:10.5px;
}

/* ======================================================
   PAGE RHYTHM
   ====================================================== */

#nexo-b226 .nexo-b226-main{
    grid-template-columns:
        minmax(0,1fr)
        minmax(520px,600px);

    gap:clamp(62px,6vw,94px);

    padding-top:16px;
    padding-bottom:58px;
}

/* ======================================================
   LEFT TYPOGRAPHY
   ====================================================== */

.nexo-b226-story{
    padding-top:30px;
}

.nexo-b226-eyebrow{
    margin-bottom:15px;

    font-size:11px;

    letter-spacing:.045em;
}

.nexo-b226-story h1{
    max-width:610px;

    margin-bottom:20px;

    font-size:clamp(54px,4.25vw,67px);
    line-height:.985;

    font-weight:850;

    letter-spacing:-.055em;
}

/*
 * Highlight editorial:
 * não é mais uma placa amarela alta.
 * É uma faixa precisa atrás da palavra.
 */
.nexo-b226-story h1 mark{
    position:relative;

    display:inline;

    padding:0 3px 1px;

    color:var(--nx-ink);

    background:
        linear-gradient(
            180deg,
            transparent 20%,
            var(--nx-yellow) 20%,
            var(--nx-yellow) 88%,
            transparent 88%
        );

    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
}

.nexo-b226-lead{
    max-width:510px;

    margin-bottom:27px;

    color:var(--nx-copy);

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

/* ======================================================
   BENEFITS
   ====================================================== */

.nexo-b226-benefits{
    gap:14px;
    margin-bottom:31px;
}

.nexo-b226-benefit{
    gap:13px;

    font-size:13px;

    font-weight:620;
}

.nexo-b226-benefit__icon{
    width:32px;
    height:32px;

    flex-basis:32px;
}

.nexo-b226-benefit__icon svg{
    width:23px;
    height:23px;
}

/* ======================================================
   NEXT STEP
   ====================================================== */

.nexo-b226-next{
    max-width:590px;

    padding:23px 24px 20px;

    border-radius:17px;

    box-shadow:
        0
        18px
        38px
        rgba(19,24,28,.09);
}

.nexo-b226-next__tag{
    min-height:26px;

    padding:0 11px;

    font-size:8px;
}

.nexo-b226-next h2{
    margin-top:11px;

    font-size:20px;
    line-height:1.17;

    letter-spacing:-.022em;
}

.nexo-b226-next > p{
    margin-bottom:18px;

    font-size:10px;
}

.nexo-b226-next__steps{
    padding-top:16px;
}

.nexo-b226-next__steps b{
    font-size:18px;
}

.nexo-b226-next__steps span{
    font-size:9.25px;
}

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

.nexo-b226-form-card{
    padding:32px 36px 27px;

    border-radius:20px;

    box-shadow:
        0
        16px
        40px
        rgba(24,29,33,.05);
}

.nexo-b226-form-badge{
    min-height:29px;

    margin-bottom:14px;

    padding:0 12px;

    font-size:9px;
}

.nexo-b226-form-card > h2{
    margin-bottom:6px;

    font-size:31px;
    line-height:1.09;

    letter-spacing:-.037em;
}

.nexo-b226-form-intro{
    margin-bottom:24px;

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

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

#nexo-b226
.nexo-b226-real-form
form{
    gap:16px 14px !important;
}

#nexo-b226
.nexo-b226-real-form
label,

#nexo-b226
.nexo-b226-real-form
label span{
    margin-bottom:6px !important;

    font-size:10.5px !important;

    font-weight:650 !important;
}

#nexo-b226
.nexo-b226-real-form
input:not([type="hidden"]),

#nexo-b226
.nexo-b226-real-form
select{
    min-height:49px !important;

    padding:0 15px !important;

    font-size:12.5px !important;

    border-radius:9px !important;
}

#nexo-b226
.nexo-b226-real-form
textarea{
    min-height:116px !important;

    padding:13px 15px !important;

    font-size:12.5px !important;

    border-radius:9px !important;
}

/* ======================================================
   CTA
   ====================================================== */

#nexo-b226
.nexo-b226-real-form
button[type="submit"],

#nexo-b226
.nexo-b226-real-form
input[type="submit"]{
    min-height:53px !important;

    margin-top:5px !important;

    color:#15191d !important;

    background:var(--nx-yellow) !important;

    border-radius:10px !important;

    font-size:12.5px !important;

    font-weight:850 !important;
}

#nexo-b226
.nexo-b226-real-form
button[type="submit"]:hover,

#nexo-b226
.nexo-b226-real-form
input[type="submit"]:hover{
    background:var(--nx-yellow-hover) !important;
}

/* ======================================================
   PRIVACY
   ====================================================== */

.nexo-b226-privacy{
    margin-top:15px;
    padding-top:14px;

    gap:9px;
}

.nexo-b226-privacy > svg{
    width:16px;
    height:16px;

    flex-basis:16px;
}

.nexo-b226-privacy strong{
    font-size:9.5px;
}

.nexo-b226-privacy span{
    font-size:8.5px;
}

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

.nexo-b226-footer__inner{
    min-height:76px;
}

.nexo-b226-footer__brand strong{
    font-size:21px;
}

.nexo-b226-footer__brand span,
.nexo-b226-footer__center,
.nexo-b226-footer__right{
    font-size:9.5px;
}

/* ======================================================
   DESKTOP LARGE
   ====================================================== */

@media(min-width:1500px){

    #nexo-b226 .nexo-b226-main{
        grid-template-columns:
            minmax(0,1fr)
            600px;
    }

    .nexo-b226-story h1{
        font-size:66px;
    }
}

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

@media(max-width:1050px){

    #nexo-b226 .nexo-b226-main{
        grid-template-columns:
            minmax(0,1fr)
            minmax(460px,510px);

        gap:42px;
    }

    .nexo-b226-story h1{
        font-size:51px;
    }
}

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

@media(max-width:900px){

    #nexo-b226 .nexo-b226-main{
        grid-template-columns:1fr;
    }

    .nexo-b226-story h1{
        max-width:620px;
    }
}

@media(max-width:620px){

    .nexo-b226-story h1{
        font-size:42px;
        line-height:1.01;
    }

    .nexo-b226-story h1 mark{
        background:
            linear-gradient(
                180deg,
                transparent 18%,
                var(--nx-yellow) 18%,
                var(--nx-yellow) 90%,
                transparent 90%
            );
    }

    .nexo-b226-form-card > h2{
        font-size:27px;
    }
}