:root {
    --blue-950: #071c4c;
    --blue-900: #0b2f74;
    --blue-800: #1247a8;
    --blue-600: #1769e8;
    --blue-100: #eaf3ff;

    --cyan: #11c6ef;

    --orange: #ff9700;
    --orange-dark: #e87c00;

    --green: #19ae58;

    --text: #13213f;
    --muted: #59657b;

    --background: #ffffff;
    --soft: #f6f9fd;

    --border: #dce7f4;

    --shadow:
        0 18px 48px rgba(22, 55, 105, 0.10);

    --radius: 24px;

    --container: 1180px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background: var(--background);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;

    max-width: 100%;

    height: auto;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline: auto;
}


.header {
    position: sticky;

    top: 0;

    z-index: 100;

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

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid rgba(220, 231, 244, 0.72);
}


.nav {
    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 28px;
}


.brand {
    display: inline-flex;

    flex-direction: column;

    line-height: 1;

    color: var(--blue-950);

    min-width: 150px;
}


.brand span {
    font-size: 0.82rem;

    font-weight: 700;
}


.brand strong {
    font-size: 1.38rem;

    letter-spacing: -0.04em;
}


.brand strong::after {
    content: "";

    display: block;

    width: 42px;

    height: 4px;

    margin-top: 5px;

    background: var(--orange);

    border-radius: 999px;
}


.navigation {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    flex: 1;

    font-weight: 650;

    font-size: 0.96rem;
}


.navigation a {
    position: relative;
}


.navigation a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 3px;

    border-radius: 999px;

    background: var(--blue-600);

    transition: width 180ms ease;
}


.navigation a:hover::after,
.navigation a:focus-visible::after {
    width: 100%;
}


.menu-toggle {
    display: none;

    background: transparent;

    border: 0;

    font-size: 1.8rem;

    cursor: pointer;
}


.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding:
        0 22px;

    border-radius: 12px;

    font-size: 0.96rem;

    font-weight: 750;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}


.button:hover {
    transform:
        translateY(-2px);
}


.button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline:
        3px solid rgba(23, 105, 232, 0.32);

    outline-offset:
        3px;
}


.button-primary,
.button-orange {
    color: white;

    background:
        linear-gradient(
            135deg,
            #ffa600,
            #ff8500
        );

    box-shadow:
        0 12px 26px rgba(255, 145, 0, 0.24);
}


.button-primary:hover,
.button-orange:hover {
    background:
        var(--orange-dark);
}


.button-secondary {
    color: var(--blue-800);

    border:
        2px solid #a9c5f5;

    background: white;
}


.button-blue {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue-600),
            var(--blue-800)
        );

    box-shadow:
        0 12px 28px rgba(23, 105, 232, 0.2);
}


.hero {
    overflow: hidden;

    padding:
        74px 0 66px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(17, 198, 239, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );
}


.hero-grid {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 36px;
}


.eyebrow {
    display: inline-flex;

    align-items: center;

    padding:
        7px 12px;

    margin-bottom:
        22px;

    border:
        1px solid #c8dcf7;

    border-radius:
        999px;

    background:
        #f6faff;

    color:
        var(--blue-800);

    font-size:
        0.82rem;

    font-weight:
        700;
}


.hero h1 {
    margin:
        0;

    max-width:
        620px;

    color:
        var(--blue-950);

    font-size:
        clamp(2.65rem, 5vw, 5rem);

    line-height:
        1.03;

    letter-spacing:
        -0.055em;
}


.hero h1 span {
    color:
        var(--blue-600);
}


.hero-description {
    max-width:
        600px;

    margin:
        26px 0 30px;

    color:
        var(--muted);

    font-size:
        1.13rem;
}


.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


.trust-chips {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top:
        26px;
}


.trust-chips span {
    padding:
        8px 13px;

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

    border-radius:
        999px;

    background:
        white;

    color:
        var(--blue-900);

    font-size:
        0.85rem;

    font-weight:
        650;
}


.hero-image {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height:
        460px;
}


.hero-image img {
    width:
        100%;

    max-height:
        570px;

    object-fit:
        contain;
}


.section {
    padding:
        88px 0;
}


.section-soft {
    background:
        var(--soft);
}


.product-card {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 54px;

    padding:
        42px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f9ff
        );

    box-shadow:
        var(--shadow);
}


.product-image {
    display: flex;

    align-items: center;

    justify-content: center;
}


.product-image img {
    max-height:
        350px;

    object-fit:
        contain;
}


.title-row {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;
}


.title-row h2 {
    margin: 0;

    color:
        var(--blue-950);

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    letter-spacing:
        -0.045em;
}


.status {
    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #fff1cd;

    color:
        #875400;

    font-size:
        0.78rem;

    font-weight:
        750;
}


.product-content p {
    max-width:
        600px;

    margin:
        20px 0 26px;

    color:
        var(--muted);

    font-size:
        1.08rem;
}


.section-heading {
    margin-bottom:
        36px;
}


.section-heading.centered {
    text-align:
        center;
}


.section-heading h2 {
    margin:
        0;

    color:
        var(--blue-950);

    font-size:
        clamp(2rem, 4vw, 3rem);

    line-height:
        1.12;

    letter-spacing:
        -0.04em;
}


.section-heading p {
    max-width:
        680px;

    margin-top:
        14px;

    color:
        var(--muted);
}


.feature-grid {
    display:
        grid;

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

    gap:
        22px;
}


.feature-card {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    min-height:
        160px;

    padding:
        28px;

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

    border-radius:
        20px;

    background:
        white;

    box-shadow:
        0 12px 32px rgba(22, 55, 105, 0.07);
}


.feature-icon {
    flex:
        0 0 58px;

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--blue-600),
            var(--blue-900)
        );

    font-size:
        1.45rem;
}


.feature-icon.success {
    background:
        var(--green);
}


.feature-card h3 {
    margin:
        2px 0 5px;

    color:
        var(--blue-950);
}


.feature-card p {
    margin: 0;

    color:
        var(--muted);
}


.how-grid,
.family-grid,
.trust-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        70px;
}


.steps {
    display:
        grid;

    gap:
        26px;
}


.step {
    display:
        grid;

    grid-template-columns:
        44px 1fr;

    gap:
        16px;
}


.step-number {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        var(--blue-600);

    font-weight:
        800;
}


.step h3 {
    margin:
        2px 0 4px;

    color:
        var(--blue-950);
}


.step p {
    margin: 0;

    color:
        var(--muted);
}


.section-image {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.section-image img {
    max-height:
        520px;

    object-fit:
        contain;
}


.tips {
    padding:
        42px;

    border:
        1px solid #ffd696;

    border-radius:
        var(--radius);

    background:
        #fffaf1;
}


.tips-grid {
    display:
        grid;

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

    gap:
        14px;
}


.tips-grid article {
    padding:
        20px;

    border-radius:
        16px;

    background:
        rgba(255,255,255,0.75);
}


.tips-grid article > div {
    font-size:
        1.8rem;
}


.tips-grid h3 {
    margin:
        10px 0 5px;

    color:
        var(--blue-950);
}


.tips-grid p {
    margin: 0;

    color:
        var(--muted);

    font-size:
        0.93rem;
}


.mini-features {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;
}


.mini-features span {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        10px 14px;

    border:
        1px solid #cdeed9;

    border-radius:
        999px;

    color:
        #09743a;

    background:
        #f5fff8;

    font-size:
        0.88rem;

    font-weight:
        700;
}


.check-list {
    display:
        grid;

    gap:
        16px;

    padding: 0;

    margin: 0;

    list-style:
        none;
}


.check-list li {
    position:
        relative;

    padding-left:
        36px;

    color:
        var(--blue-900);

    font-weight:
        650;
}


.check-list li::before {
    content:
        "✓";

    position:
        absolute;

    left: 0;

    top:
        -1px;

    width:
        24px;

    height:
        24px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        var(--green);

    font-size:
        0.78rem;

    font-weight:
        900;
}


.launch-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        44px;

    border-radius:
        var(--radius);

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #0b2f74,
            #075acb
        );

    box-shadow:
        0 22px 50px rgba(11, 47, 116, 0.22);
}


.launch-card h2 {
    margin:
        0 0 10px;

    font-size:
        clamp(1.7rem, 4vw, 2.7rem);

    line-height:
        1.12;

    letter-spacing:
        -0.04em;
}


.launch-card p {
    max-width:
        700px;

    margin: 0;

    color:
        #d9e8ff;
}


.footer {
    margin-top:
        24px;

    padding:
        42px 0;

    color:
        white;

    background:
        var(--blue-950);
}


.footer-grid {
    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        30px;
}


.footer-brand {
    color:
        white;
}


.footer nav {
    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        24px;

    color:
        #d8e4f7;
}


.copyright {
    color:
        #b9c8df;

    font-size:
        0.88rem;
}


@media (max-width: 1024px) {

    .navigation {
        gap:
            18px;
    }


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


    .hero h1 {
        font-size:
            clamp(2.7rem, 6vw, 4.2rem);
    }


    .feature-grid {
        gap:
            14px;
    }


    .feature-card {
        padding:
            22px;
    }


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

}


@media (max-width: 820px) {

    .nav {
        min-height:
            70px;

        flex-wrap:
            wrap;
    }


    .menu-toggle {
        display:
            block;

        margin-left:
            auto;
    }


    .nav-cta {
        display:
            none;
    }


    .navigation {
        display:
            none;

        order:
            10;

        width:
            100%;

        padding:
            10px 0 20px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .navigation.open {
        display:
            flex;
    }


    .hero {
        padding:
            52px 0;
    }


    .hero-grid,
    .product-card,
    .how-grid,
    .family-grid,
    .trust-grid {
        grid-template-columns:
            1fr;
    }


    .hero-content {
        text-align:
            center;
    }


    .hero-description {
        margin-inline:
            auto;
    }


    .hero-actions,
    .trust-chips {
        justify-content:
            center;
    }


    .hero-image {
        min-height:
            auto;
    }


    .product-card {
        gap:
            20px;

        text-align:
            center;
    }


    .title-row {
        justify-content:
            center;
    }


    .product-content p {
        margin-inline:
            auto;
    }


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


    .section-image {
        order:
            -1;
    }


    .trust-grid .section-image {
        order:
            initial;
    }


    .footer-grid {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .footer-brand {
        align-items:
            center;
    }

}


@media (max-width: 520px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }


    .hero {
        padding-top:
            38px;
    }


    .hero h1 {
        font-size:
            2.55rem;
    }


    .hero-description {
        font-size:
            1rem;
    }


    .hero-actions {
        flex-direction:
            column;
    }


    .hero-actions .button {
        width:
            100%;
    }


    .section {
        padding:
            62px 0;
    }


    .product-card {
        padding:
            24px 18px;
    }


    .tips {
        padding:
            26px 18px;
    }


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


    .launch-card {
        padding:
            30px 22px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .launch-card .button {
        width:
            100%;
    }

}


/* =========================================================
   PÁGINAS INSTITUCIONAIS
   ========================================================= */

.legal-page {
    max-width: 900px;
}

.legal-page h1,
.contact-page h1 {
    margin: 0;

    color: var(--blue-950);

    font-size: clamp(2.4rem, 5vw, 4rem);

    line-height: 1.08;

    letter-spacing: -0.045em;
}

.legal-page h2 {
    margin-top: 42px;

    color: var(--blue-950);

    font-size: 1.45rem;
}

.legal-page p {
    color: var(--muted);

    font-size: 1.03rem;
}

.contact-page {
    max-width: 880px;
}

.contact-card {
    display: flex;

    align-items: flex-start;

    gap: 24px;

    margin-top: 42px;

    padding: 34px;

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

    border-radius: var(--radius);

    background: white;

    box-shadow: var(--shadow);
}

.contact-card h2 {
    margin-top: 0;

    color: var(--blue-950);
}

.contact-card p {
    color: var(--muted);
}

.contact-warning {
    margin-top: 22px;

    padding: 16px 18px;

    border-left: 4px solid var(--orange);

    border-radius: 8px;

    background: #fff8ec;

    color: #654000 !important;

    font-weight: 600;
}


@media (max-width: 520px) {

    .contact-card {
        flex-direction: column;

        padding: 24px 20px;
    }

}


/* =========================================================
   GATE 3 — ACESSIBILIDADE
   ========================================================= */

.skip-link {
    position: fixed;

    top: 10px;
    left: 10px;

    z-index: 9999;

    padding: 12px 18px;

    border-radius: 10px;

    color: #ffffff;

    background: var(--blue-950);

    font-weight: 750;

    transform: translateY(-160%);

    transition: transform 150ms ease;
}


.skip-link:focus {
    transform: translateY(0);
}


.error-page {
    max-width: 760px;

    text-align: center;
}


.error-code {
    margin-bottom: 10px;

    color: var(--blue-600);

    font-size: clamp(5rem, 16vw, 10rem);

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.08em;
}


.error-page h1 {
    margin: 20px 0 12px;

    color: var(--blue-950);

    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.1;

    letter-spacing: -0.04em;
}


.error-page p {
    max-width: 620px;

    margin-inline: auto;

    color: var(--muted);
}


.error-page .button {
    margin-top: 18px;
}


/* Reduz animações para usuários que solicitaram menos movimento. */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/* ===== GATE-3B-RESPONSIVE-BEGIN ===== */

/*****************************************************************************
 * GATE 3B
 *
 * Política de breakpoints:
 *
 * >= 901px
 *   Layout amplo existente preservado.
 *
 * 768px - 900px
 *   Tablet portrait / navegação compacta.
 *
 * <= 767px
 *   Mobile.
 *
 * <= 440px
 *   Ajustes adicionais para smartphones.
 *
 * <= 390px
 *   Small mobile.
 *****************************************************************************/


/* -------------------------------------------------------------------------
   1. BASE / ACESSIBILIDADE / ÂNCORAS
   ------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

[id] {
    scroll-margin-top: 96px;
}

img {
    max-width: 100%;
    height: auto;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

body.gate3b-menu-open {
    overflow: hidden;
}


/* -------------------------------------------------------------------------
   2. TABLET PORTRAIT + MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {

    html {
        scroll-padding-top: 78px;
    }

    [id] {
        scroll-margin-top: 78px;
    }


    /* ---------------------------------------------------------------------
       HEADER
       --------------------------------------------------------------------- */

    body > header,
    header {
        position: relative;
        z-index: 1000;
    }

    header > div,
    header .container,
    header .header-inner,
    header .nav-wrapper {
        position: relative;
    }


    /*
     * NAV:
     * o JS do GATE 3B aplica .gate3b-nav ao NAV principal.
     */

    header nav.gate3b-nav {
        position: fixed !important;

        top: var(--gate3b-header-height, 72px) !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 18px 24px 24px !important;

        background: rgba(255, 255, 255, 0.985) !important;

        border-top: 1px solid rgba(15, 46, 99, 0.08);
        border-bottom: 1px solid rgba(15, 46, 99, 0.12);

        box-shadow:
            0 18px 40px rgba(7, 35, 81, 0.12);

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;

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

        transform: translateY(-10px);

        transition:
            opacity 160ms ease,
            transform 160ms ease,
            visibility 160ms ease;
    }

    header nav.gate3b-nav.gate3b-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }


    header nav.gate3b-nav a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        min-height: 48px !important;

        margin: 0 !important;
        padding: 11px 4px !important;

        border-bottom: 1px solid rgba(15, 46, 99, 0.07);

        text-decoration: none;
    }

    header nav.gate3b-nav a:last-child {
        border-bottom: 0;
    }


    /*
     * CTA do desktop dentro da navegação:
     * no menu mobile ele vira item de menu.
     */

    header nav.gate3b-nav .btn,
    header nav.gate3b-nav .button,
    header nav.gate3b-nav [class*="cta"] {
        width: 100% !important;

        justify-content: center !important;

        margin-top: 12px !important;
    }


    /*
     * Botão hamburger.
     */

    .gate3b-menu-toggle {
        position: relative !important;
        z-index: 1002 !important;

        min-width: 44px !important;
        min-height: 44px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        cursor: pointer;
    }


    /* Overlay */

    #gate3b-nav-overlay {
        position: fixed;

        inset:
            var(--gate3b-header-height, 72px)
            0
            0
            0;

        z-index: 998;

        background: rgba(5, 25, 57, 0.24);

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

        transition:
            opacity 160ms ease,
            visibility 160ms ease;
    }

    #gate3b-nav-overlay.gate3b-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /* ---------------------------------------------------------------------
       HERO
       --------------------------------------------------------------------- */

    #inicio {
        min-height: auto !important;
    }

    #inicio > div,
    #inicio .container {
        min-height: auto !important;
    }


    /*
     * Em tablet portrait/mobile o conteúdo precisa fluir naturalmente.
     */

    #inicio img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
    }


    /* ---------------------------------------------------------------------
       É GOLPE?
       --------------------------------------------------------------------- */

    #e-golpe img,
    #egolpe img,
    [id*="golpe"] img {
        object-fit: contain;
    }


    /* ---------------------------------------------------------------------
       DICAS
       --------------------------------------------------------------------- */

    #dicas article,
    #dicas .card {
        min-width: 0;
    }


    /* ---------------------------------------------------------------------
       ÁREAS DE CLIQUE
       --------------------------------------------------------------------- */

    main a[class*="btn"],
    main a[class*="button"],
    main button {
        min-height: 44px;
    }


    /* ---------------------------------------------------------------------
       PÁGINAS INTERNAS
       --------------------------------------------------------------------- */

    body:not(:has(#inicio)) main {
        width: 100%;
    }

}


/* -------------------------------------------------------------------------
   3. MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

    html {
        scroll-padding-top: 74px;
    }

    [id] {
        scroll-margin-top: 74px;
    }


    /* ---------------------------------------------------------------------
       HEADER
       --------------------------------------------------------------------- */

    header nav.gate3b-nav {
        top: var(--gate3b-header-height, 68px) !important;

        padding:
            12px
            max(18px, env(safe-area-inset-right))
            20px
            max(18px, env(safe-area-inset-left))
            !important;
    }

    #gate3b-nav-overlay {
        inset:
            var(--gate3b-header-height, 68px)
            0
            0
            0;
    }


    /* ---------------------------------------------------------------------
       HERO
       --------------------------------------------------------------------- */

    #inicio {
        padding-top: 26px !important;
        padding-bottom: 38px !important;
    }

    #inicio h1 {
        margin-top: 20px !important;
        margin-bottom: 18px !important;

        line-height: 1.08 !important;

        text-wrap: balance;
    }

    #inicio p {
        line-height: 1.55 !important;
    }


    /*
     * Botões principais ocupando largura útil no mobile.
     */

    #inicio a[class*="btn"],
    #inicio .btn,
    #inicio .button {
        min-height: 46px;
    }


    /*
     * Pills / badges.
     */

    #inicio ul,
    #inicio [class*="badge"],
    #inicio [class*="pill"],
    #inicio [class*="chip"] {
        max-width: 100%;
    }


    /*
     * Hero image proporcional.
     */

    #inicio img {
        width: min(100%, 430px) !important;
        max-height: 350px;

        object-fit: contain;

        margin-top: 30px !important;
    }


    /* ---------------------------------------------------------------------
       COMO FUNCIONA
       --------------------------------------------------------------------- */

    #como-funciona {
        padding-top: 38px !important;
        padding-bottom: 42px !important;
    }

    #como-funciona h2 {
        text-wrap: balance;
    }

    #como-funciona img {
        display: block;

        width: min(92%, 420px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 28px !important;

        object-fit: contain;
    }


    /*
     * Steps.
     */

    #como-funciona article,
    #como-funciona li {
        min-width: 0;
    }


    /* ---------------------------------------------------------------------
       É GOLPE
       --------------------------------------------------------------------- */

    #e-golpe,
    #egolpe {
        min-height: 0 !important;
    }

    #e-golpe > div,
    #egolpe > div {
        min-height: 0 !important;
    }

    #e-golpe img,
    #egolpe img {
        display: block;

        width: min(88%, 360px) !important;
        max-height: 290px;

        margin-left: auto !important;
        margin-right: auto !important;

        object-fit: contain;
    }

    #e-golpe h2,
    #egolpe h2 {
        text-wrap: balance;
    }


    /* ---------------------------------------------------------------------
       COMO PODEMOS AJUDAR
       --------------------------------------------------------------------- */

    #e-golpe article,
    #egolpe article {
        min-height: 0 !important;
    }


    /* ---------------------------------------------------------------------
       DICAS
       --------------------------------------------------------------------- */

    #dicas {
        padding-top: 36px !important;
        padding-bottom: 40px !important;
    }

    #dicas h2 {
        text-wrap: balance;
    }

    #dicas article,
    #dicas .card {
        min-height: 0 !important;
    }

    #dicas article p,
    #dicas .card p {
        line-height: 1.5 !important;
    }


    /* ---------------------------------------------------------------------
       FAMÍLIA
       --------------------------------------------------------------------- */

    #dicas img {
        object-fit: contain;
    }


    /* ---------------------------------------------------------------------
       PÁGINAS INTERNAS
       --------------------------------------------------------------------- */

    body:not(:has(#inicio)) main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:not(:has(#inicio)) main h1 {
        text-wrap: balance;

        line-height: 1.12;
    }

    body:not(:has(#inicio)) main > section,
    body:not(:has(#inicio)) main > div {
        max-width: 100%;
    }


    /*
     * Cards de contato / privacidade / termos.
     */

    body:not(:has(#inicio)) article,
    body:not(:has(#inicio)) .card {
        max-width: 100%;

        overflow-wrap: anywhere;
    }


    /* ---------------------------------------------------------------------
       FOOTER
       --------------------------------------------------------------------- */

    footer {
        text-align: center;
    }

    footer > div,
    footer .container,
    footer .footer-inner {
        align-items: center !important;
    }

    footer nav,
    footer ul {
        justify-content: center !important;
    }

}


/* -------------------------------------------------------------------------
   4. <= 440PX
   ------------------------------------------------------------------------- */

@media (max-width: 440px) {

    #inicio {
        padding-top: 24px !important;
    }

    #inicio h1 {
        font-size: clamp(2rem, 9.4vw, 2.45rem) !important;
    }


    /*
     * Badge superior:
     * permite até duas linhas sem cortar conteúdo.
     */

    #inicio [class*="eyebrow"],
    #inicio [class*="badge"],
    #inicio [class*="pill"] {
        white-space: normal !important;

        text-align: center;

        line-height: 1.25;
    }


    /*
     * CTAs empilhados.
     */

    #inicio [class*="actions"],
    #inicio [class*="buttons"] {
        width: 100%;
    }


    /*
     * A maior parte dos botões do hero fica full width,
     * mas sem afetar badges.
     */

    #inicio a[class*="btn"],
    #inicio a[class*="button"] {
        width: 100%;

        justify-content: center;
    }


    /*
     * Chips podem quebrar naturalmente,
     * evitando overflow.
     */

    #inicio [class*="features"],
    #inicio [class*="badges"],
    #inicio [class*="chips"] {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px;
    }


    /* Imagem hero */

    #inicio img {
        width: min(100%, 370px) !important;

        max-height: 300px;

        margin-top: 24px !important;
    }


    /* Como funciona */

    #como-funciona img {
        width: min(92%, 350px) !important;

        max-height: 290px;
    }


    /* Produto É Golpe */

    #e-golpe img,
    #egolpe img {
        width: min(88%, 300px) !important;

        max-height: 245px;
    }


    /*
     * Dicas:
     * cards individuais ficam compactos.
     */

    #dicas article,
    #dicas .card {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }


    /*
     * Páginas internas.
     */

    body:not(:has(#inicio)) main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:not(:has(#inicio)) main h1 {
        font-size: clamp(2rem, 9vw, 2.65rem);
    }


    /*
     * Footer.
     */

    footer nav,
    footer ul {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 12px;
    }

}


/* -------------------------------------------------------------------------
   5. <= 390PX
   ------------------------------------------------------------------------- */

@media (max-width: 390px) {

    header nav.gate3b-nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    #inicio {
        padding-bottom: 30px !important;
    }

    #inicio h1 {
        font-size: clamp(1.9rem, 9.3vw, 2.25rem) !important;

        letter-spacing: -0.025em;
    }

    #inicio p {
        font-size: 0.98rem;
    }

    #inicio img {
        width: min(100%, 335px) !important;

        max-height: 270px;
    }


    /* Produto */

    #e-golpe img,
    #egolpe img {
        max-height: 220px;
    }


    /* Cards dicas */

    #dicas {
        padding-left: 8px;
        padding-right: 8px;
    }

}


/* -------------------------------------------------------------------------
   6. REDUCE MOTION
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    header nav.gate3b-nav,
    #gate3b-nav-overlay {
        transition: none !important;
    }

}

/* ===== GATE-3B-RESPONSIVE-END ===== */

/* ===== GATE-3B-MENU-HOTFIX-BEGIN ===== */

@media (max-width: 900px) {

    header nav.gate3b-nav {
        z-index: 1001 !important;
    }

    .gate3b-menu-toggle {
        z-index: 1003 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    header nav.gate3b-nav.gate3b-open,
    header nav.gate3b-nav.gate3b-open * {
        pointer-events: auto !important;
    }

    header nav.gate3b-nav a {
        position: relative;
        z-index: 1002;
        cursor: pointer !important;
        touch-action: manipulation;
    }

    #gate3b-nav-overlay {
        z-index: 999 !important;
    }

}

/* ===== GATE-3B-MENU-HOTFIX-END ===== */

/* ===== GATE-3B-MENU-V2-BEGIN ===== */

@media (max-width: 900px) {

    .gate3b-menu-toggle {
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    header nav.gate3b-nav.gate3b-open {
        pointer-events: auto !important;
    }

    header nav.gate3b-nav.gate3b-open a {
        position: relative;
        pointer-events: auto !important;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-tap-highlight-color:
            rgba(0, 0, 0, 0.08);
    }

    #gate3b-nav-overlay.gate3b-open {
        pointer-events: auto !important;
    }
}

/* ===== GATE-3B-MENU-V2-END ===== */

/* ===== GATE-3B-MENU-V3-BEGIN ===== */

/*
 * O overlay passa a ser SOMENTE VISUAL.
 *
 * Ele não participa mais da captura do mouse/toque.
 * Isso elimina problemas de stacking context em browsers
 * mobile e no modo responsivo do Chrome DevTools.
 */

#gate3b-nav-overlay,
#gate3b-nav-overlay.gate3b-open {
    pointer-events: none !important;
}

/*
 * Menu e todos os seus descendentes devem receber eventos.
 */

@media (max-width: 900px) {

    header nav.gate3b-nav,
    header nav.gate3b-nav.gate3b-open {
        pointer-events: auto !important;
    }

    header nav.gate3b-nav.gate3b-open,
    header nav.gate3b-nav.gate3b-open * {
        pointer-events: auto !important;
    }

    header nav.gate3b-nav a {
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color:
            rgba(0, 0, 0, 0.08);
    }

    .gate3b-menu-toggle {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }
}

/* ===== GATE-3B-MENU-V3-END ===== */

/* ===== GATE-3B-FINAL-RESPONSIVE-BEGIN ===== */

/*
 * GATE 3B - fechamento responsivo
 *
 * Objetivo:
 * - preservar o menu mobile já validado;
 * - preservar breakpoints atuais;
 * - corrigir somente o cabeçalho da página de contato
 *   em telas muito estreitas;
 * - evitar regressão de overflow horizontal.
 */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/*
 * Segurança adicional para mídia responsiva.
 */

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
}

/*
 * Página de contato.
 *
 * Mantém logo e botão "Voltar ao início"
 * na mesma linha inclusive em 360px.
 */

@media (max-width: 480px) {

    body.contact-page header,
    body.contact header {
        width: 100%;
    }

    body.contact-page header .nav-wrapper,
    body.contact header .nav-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;
    }

    body.contact-page header .brand,
    body.contact header .brand {
        flex: 0 1 auto;
        min-width: 0;
    }

    body.contact-page header .button,
    body.contact header .button {
        flex: 0 0 auto;
        white-space: nowrap;
        width: auto;
        margin: 0;
    }
}

/*
 * Fallback para contato.html caso a página não utilize
 * classe específica no BODY.
 */

@media (max-width: 480px) {

    header:has(a[href="/"]) .nav-wrapper {
        min-width: 0;
    }

}

/* ===== GATE-3B-FINAL-RESPONSIVE-END ===== */

/* ===== GATE-3B-CONTACT-HEADER-BEGIN ===== */

/*
 * Página contato:
 * mantém logo + botão "Voltar ao início" na mesma linha
 * em smartphones estreitos.
 *
 * Restrito ao header que NÃO possui navegação principal.
 */
@media (max-width: 480px) {

    body:has(.contact-page) .header .nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        width: 100% !important;
    }

    body:has(.contact-page) .header .brand {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body:has(.contact-page) .header .nav > .button {
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 11px 16px !important;

        white-space: nowrap !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }

}

/* Ajuste adicional para 360 px e inferiores */
@media (max-width: 370px) {

    body:has(.contact-page) .header .nav {
        gap: 8px !important;
    }

    body:has(.contact-page) .header .nav > .button {
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 0.84rem !important;
    }

}

/* ===== GATE-3B-CONTACT-HEADER-END ===== */

/* ===== GATE-3B-CONTACT-MOBILE-BEGIN ===== */

/*
 * Página de contato:
 * alinhamento visual com o header e o ritmo da Home.
 *
 * Escopo deliberadamente limitado ao mobile.
 * Não altera o header/menu da página principal.
 */

@media (max-width: 600px) {

    /* -------------------------------------------------------------
       HEADER
       ------------------------------------------------------------- */

    .contact-header {
        min-height: 72px;
        height: auto;
    }

    .contact-header .nav {
        width: 100%;
        min-height: 72px;
        height: 72px;

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

        gap: 12px;

        padding-top: 0;
        padding-bottom: 0;

        margin-top: 0;
        margin-bottom: 0;
    }

    /*
     * Logo:
     * preserva a mesma escala visual utilizada na Home.
     */
    .contact-header .brand {
        flex: 0 0 auto;
        margin: 0;
    }

    /*
     * O "Voltar ao início" deixa de ter aparência de CTA principal
     * e passa a funcionar como ação compacta do header.
     */
    .contact-header .contact-back-button {
        flex: 0 0 auto;

        width: auto;
        min-width: 0;
        max-width: none;

        min-height: 40px;

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

        padding: 8px 12px;

        margin: 0;

        font-size: 0.875rem;
        line-height: 1.1;

        white-space: nowrap;

        border-radius: 10px;
        box-shadow: none;
    }


    /* -------------------------------------------------------------
       CONTEÚDO PRINCIPAL
       ------------------------------------------------------------- */

    .contact-page {
        width: 100%;
        max-width: none;

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

        margin-left: auto;
        margin-right: auto;
    }


    /*
     * Reduz o vazio existente entre o header e o título.
     */
    .contact-page .section-heading {
        margin-top: 0;
        margin-bottom: 28px;
    }

    .contact-page .section-heading.centered {
        max-width: 100%;
    }

    .contact-page .section-heading h1 {
        margin-top: 0;
        margin-bottom: 12px;

        font-size: clamp(1.8rem, 8vw, 2.05rem);
        line-height: 1.12;

        text-wrap: balance;
    }

    .contact-page .section-heading p {
        max-width: 320px;

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;

        line-height: 1.55;
    }


    /* -------------------------------------------------------------
       CARD
       ------------------------------------------------------------- */

    .contact-page .contact-card {
        box-sizing: border-box;

        width: 100%;
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        padding: 20px;

        border-radius: 20px;
    }

    .contact-page .contact-card > div:last-child {
        min-width: 0;
        width: 100%;
    }

    .contact-page .contact-card h2 {
        margin-top: 0;
        margin-bottom: 24px;
    }

    .contact-page .contact-card p {
        margin-top: 0;
        margin-bottom: 20px;

        line-height: 1.6;

        overflow-wrap: anywhere;
    }

    /*
     * Último parágrafo comum não precisa carregar margem extra.
     */
    .contact-page .contact-card p:last-child {
        margin-bottom: 0;
    }


    /* -------------------------------------------------------------
       ÍCONE
       ------------------------------------------------------------- */

    .contact-page .feature-icon {
        margin-bottom: 22px;
    }


    /* -------------------------------------------------------------
       AVISO DE SEGURANÇA
       ------------------------------------------------------------- */

    .contact-page .contact-warning {
        box-sizing: border-box;

        width: 100%;

        margin-top: 8px !important;
        margin-bottom: 0 !important;

        padding: 16px 16px 16px 18px;

        line-height: 1.55;

        overflow-wrap: anywhere;
    }
}


/*
 * Refinamento específico para aparelhos estreitos.
 */
@media (max-width: 380px) {

    .contact-header .nav {
        gap: 8px;
    }

    .contact-header .contact-back-button {
        min-height: 38px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 0.82rem;
    }

    .contact-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .contact-page .contact-card {
        padding: 18px;
    }
}

/* ===== GATE-3B-CONTACT-MOBILE-END ===== */