/* =========================================================
   SIRNOV — BASE INSTITUCIONAL
   ========================================================= */

:root {

    --navy: #0B1D3A;
    --navy-2: #102B50;
    --navy-3: #07172D;

    --teal: #00A88F;
    --teal-light: #42D0BC;

    --white: #FFFFFF;
    --soft: #F5F8FA;

    --text: #465469;
    --muted: #748094;
    --line: #E5EAF0;

    --container: 1240px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

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

    background: var(--white);

    color: var(--navy);

    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

.container {

    width:
        min(
            var(--container),
            calc(100% - 48px)
        );

    margin: 0 auto;
}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(14px);

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

.header-inner {

    min-height: 84px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* BRAND */

.brand {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-shrink: 0;
}

.brand-symbol {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--teal),
            var(--navy)
        );

    font-size: 27px;

    font-weight: 900;
}

.brand-copy {

    display: flex;

    flex-direction: column;

    line-height: 1.2;
}

.brand-copy strong {

    color: var(--navy);

    font-size: 23px;

    font-weight: 900;

    letter-spacing: .04em;
}

.brand-copy small {

    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;
}


/* DESKTOP NAVIGATION */

.main-nav {

    display: flex;

    align-items: center;

    gap: 25px;
}

.main-nav > a {

    color: #435167;

    font-size: 14px;

    font-weight: 650;

    transition: .2s ease;
}

.main-nav > a:hover {

    color: var(--teal);
}

.cloud-button {

    min-height: 42px;

    padding:
        0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #CBD3DE;

    border-radius: 10px;

    background: var(--white);

    color: var(--navy) !important;

    font-weight: 750 !important;
}

.cloud-button:hover {

    border-color: var(--teal);

    color: var(--teal) !important;
}


/* MOBILE BUTTON — HIDDEN ON DESKTOP */

.menu-toggle {

    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    border:
        1px solid #DCE3EA;

    border-radius: 11px;

    background: var(--white);

    cursor: pointer;
}

.menu-toggle span {

    display: block;

    width: 22px;
    height: 2px;

    margin: 5px auto;

    border-radius: 3px;

    background: var(--navy);

    transition: .2s ease;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F6F9FB 100%
        );
}

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .38;

    pointer-events: none;

    background-image:

        linear-gradient(
            #E8EDF2 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            #E8EDF2 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 92%
        );
}

.hero-layout {

    position: relative;

    min-height: 690px;

    padding:
        70px 0;

    display: grid;

    grid-template-columns:
        .90fr 1.20fr;

    gap: 0;

    align-items: center;
}

.hero-content {

    position: relative;

    z-index: 2;

}

/* HERO COPY */

.eyebrow {

    color: var(--teal);

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.hero h1 {

    max-width: 650px;

    margin:
        20px 0 0;

    color: var(--navy);

    font-size:
        clamp(
            48px,
            5vw,
            74px
        );

    line-height: 1.02;

    letter-spacing: -.052em;
}

.hero h1 span {

    display: block;

    color: var(--teal);
}

.hero-description {

    max-width: 610px;

    margin:
        27px 0 0;

    color: var(--text);

    font-size: 17px;

    line-height: 1.75;
}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 33px;
}

.button {

    min-height: 50px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    font-size: 14px;

    font-weight: 750;

    transition: .2s ease;
}

.button-primary {

    color: var(--white);

    background: var(--teal);
}

.button-primary:hover {

    background: #008D79;

    transform:
        translateY(-1px);
}

.button-secondary {

    color: var(--navy);

    background: var(--white);

    border:
        1px solid #D5DDE7;
}

.button-secondary:hover {

    border-color: var(--teal);

    color: var(--teal);
}

.brand-pillars {

    margin-top: 40px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    color: #69788C;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.brand-pillars i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--teal);
}


/* HERO IMAGE */

.hero-media {

    position: absolute;

    z-index: 1;

    top: 0;
    bottom: 0;

    right:
        calc(
            (100vw - 100%) / -2
        );

    width: 64vw;

    margin: 0;

    overflow: hidden;

    border-radius: 0;

    background:
        var(--navy);

    box-shadow: none;

    -webkit-mask-image:
    linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.15) 8%,
        #000 24%
    );

mask-image:
    linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.15) 8%,
        #000 24%
    );
    
}

.hero-media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: right center;

    display: block;
}

.hero-media-overlay {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(246,249,251,1) 0%,
            rgba(246,249,251,.96) 10%,
            rgba(246,249,251,.78) 20%,
            rgba(246,249,251,.42) 30%,
            rgba(246,249,251,.12) 40%,
            transparent 50%
        );
}

/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust-strip {

    background: var(--white);

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

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

.trust-grid {

    display: grid;

    grid-template-columns:
        1.15fr 1fr 1fr 1fr;
}

.trust-item {

    min-height: 118px;

    padding:
        28px 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

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

.trust-item:first-child {

    padding-left: 0;
}

.trust-item:last-child {

    border-right: 0;
}

.trust-item strong {

    color: var(--navy);

    font-size: 16px;

    font-weight: 800;
}

.trust-item span {

    max-width: 220px;

    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;
}

.trust-main strong {

    color: var(--teal);

    font-size: 18px;
}

.trust-main span {

    color: var(--navy);

    font-size: 16px;

    font-weight: 750;
}


/* =========================================================
   PLATFORM / CONTROL CENTER
   ========================================================= */

.platform-section {

    position: relative;

    overflow: hidden;

    padding:
        125px 0;

    background: var(--navy-3);
}

.platform-glow {

    position: absolute;

    width: 620px;
    height: 620px;

    top: -290px;
    right: -180px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    filter:
        blur(18px);
}

.platform-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        .88fr 1.12fr;

    gap: 88px;

    align-items: center;
}


/* PLATFORM COPY */

.eyebrow-light {

    color: var(--teal-light);
}

.platform-copy h2 {

    max-width: 590px;

    margin:
        17px 0 25px;

    color: var(--white);

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    line-height: 1.05;

    letter-spacing: -.045em;
}

.platform-copy h2 span {

    display: block;

    color: var(--teal-light);
}

.platform-copy p {

    max-width: 570px;

    margin:
        0 0 18px;

    color: #A9B7C9;

    font-size: 16px;

    line-height: 1.75;
}

.platform-copy .platform-lead {

    color: #DCE4ED;

    font-size: 18px;
}

.platform-points {

    margin:
        27px 0;

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.platform-points div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #D5DFEA;

    font-size: 14px;

    font-weight: 600;
}

.platform-points span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--teal);
}

.platform-link {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--teal-light);

    font-size: 14px;

    font-weight: 800;
}

.platform-link > span {

    font-size: 20px;
}


/* CONTROL CENTER */

.control-center {

    padding: 33px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #102B50,
            #0A1F3D
        );

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.30);
}

.control-top {

    padding-bottom: 27px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}

.control-top small {

    display: block;

    color: var(--teal);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .12em;
}

.control-top strong {

    color: var(--white);

    font-size: 21px;
}

.control-status {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #A8B7C9;

    font-size: 11px;
}

.control-status i {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--teal);

    box-shadow:
        0 0 0 6px
        rgba(0,168,143,.12);
}


/* CONTROL FLOW */

.control-flow {

    padding:
        34px 0;

    display: flex;

    align-items: flex-start;
}

.flow-step {

    width: 72px;

    text-align: center;

    flex-shrink: 0;
}

.flow-step b {

    width: 34px;
    height: 34px;

    margin:
        0 auto 8px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 50%;

    color: #90A3B9;

    font-size: 11px;
}

.flow-step.active b {

    border-color: var(--teal);

    background: var(--teal);

    color: var(--white);
}

.flow-step span {

    color: #9CAEC0;

    font-size: 10px;
}

.flow-step.active span {

    color: var(--white);
}

.flow-line {

    flex: 1;

    height: 1px;

    min-width: 20px;

    margin-top: 17px;

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


/* CONTROL CARDS */

.control-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.control-card {

    min-height: 143px;

    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 15px;

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

.control-card small {

    color: #71859B;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .12em;
}

.control-card strong {

    display: block;

    margin:
        7px 0 6px;

    color: var(--white);

    font-size: 16px;
}

.control-card p {

    margin: 0;

    color: #92A4B8;

    font-size: 12px;

    line-height: 1.5;
}

.control-card-highlight {

    border-color:
        rgba(0,168,143,.32);

    background:
        linear-gradient(
            145deg,
            rgba(0,168,143,.16),
            rgba(0,168,143,.05)
        );
}


/* CONTROL FOOTER */

.control-footer {

    margin-top: 23px;

    padding-top: 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.sir9 {

    color: var(--white);

    font-size: 20px;

    font-weight: 900;
}

.sir9 span {

    color: var(--teal);
}

.control-footer p {

    margin: 0;

    color: #71859C;

    font-size: 9px;

    letter-spacing: .09em;

    text-transform: uppercase;
}

/* =========================================================
   ECOSSISTEMA / SOLUÇÕES
   ========================================================= */

.solutions-section {

    padding:
        120px 0;

    background:
        #FFFFFF;
}


.solutions-heading {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 48px;
}


.solutions-heading h2 {

    max-width: 760px;

    margin:
        17px 0 0;

    color: var(--navy);

    font-size:
        clamp(
            40px,
            4.5vw,
            60px
        );

    line-height: 1.05;

    letter-spacing: -.045em;
}


.solutions-heading h2 span {

    display: block;

    color: var(--teal);
}


.solutions-heading > p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    font-size: 16px;

    line-height: 1.7;
}


/* FEATURED */

.solutions-featured {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin-bottom: 18px;
}


.solution-feature {

    min-height: 330px;

    padding: 34px;

    display: grid;

    grid-template-columns:
        54px 1fr;

    gap: 22px;

    border-radius: 24px;

    overflow: hidden;
}


.solution-feature-dark {

    background:
        linear-gradient(
            145deg,
            #0B1D3A,
            #12385F
        );

    color: #FFFFFF;
}


.solution-feature-teal {

    background:
        linear-gradient(
            145deg,
            #008D79,
            #00A88F
        );

    color: #FFFFFF;
}


.solution-number {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

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

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 900;
}


.solution-category {

    display: inline-block;

    margin-bottom: 14px;

    color:
        rgba(255,255,255,.72);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.solution-feature h3 {

    max-width: 500px;

    margin:
        0 0 14px;

    font-size: 28px;

    line-height: 1.15;

    letter-spacing: -.025em;
}


.solution-feature p {

    max-width: 540px;

    margin: 0;

    color:
        rgba(255,255,255,.77);

    font-size: 14px;

    line-height: 1.65;
}


.solution-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}


.solution-tags span {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 8px;

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

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 700;
}


/* GRID */

.solutions-grid {

    display: grid;

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

    gap: 18px;
}


.solution-card {

    min-height: 230px;

    padding: 28px;

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

    border-radius: 20px;

    background: #FFFFFF;

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


.solution-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(0,168,143,.35);

    box-shadow:
        0 18px 45px
        rgba(11,29,58,.08);
}


.solution-index {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 11px;

    background:
        #E8F7F4;

    color: var(--teal);

    font-size: 11px;

    font-weight: 900;
}


.solution-card h3 {

    margin:
        24px 0 10px;

    color: var(--navy);

    font-size: 19px;

    line-height: 1.25;
}


.solution-card p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.6;
}


/* FOOTER */

.solutions-footer {

    margin-top: 34px;

    display: flex;

    justify-content: flex-end;
}


.solutions-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--teal);

    font-size: 14px;

    font-weight: 800;
}


.solutions-link span {

    font-size: 20px;
}

/* =========================================================
   VALUE SECTION
   ========================================================= */

.value-section {

    position: relative;

    padding:
        110px 0;

    overflow: hidden;

    background-image:
        url("/assets/img/porque-sirnov-bg.png");

    background-size:
        cover;

    background-position:
        center right;

    background-repeat:
        no-repeat;
}

.value-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.97) 32%,
            rgba(255,255,255,.82) 52%,
            rgba(255,255,255,.34) 70%,
            rgba(255,255,255,.05) 100%
        );
}

.value-section > .container {

    position: relative;

    z-index: 2;
}

.value-heading {

    max-width:
        760px;

    margin-bottom:
        48px;
}


.value-heading h2 {

    margin:
        17px 0 18px;

    color:
        var(--navy);

    font-size:
        clamp(
            40px,
            4.4vw,
            58px
        );

    line-height:
        1.05;

    letter-spacing:
        -.045em;
}


.value-heading h2 span {

    display:
        block;

    color:
        var(--teal);
}


.value-heading p {

    max-width:
        640px;

    margin:
        0;

    color:
        var(--text);

    font-size:
        16px;

    line-height:
        1.7;
}


.value-grid {

    display:
        grid;

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

    gap:
        18px;
}


.value-card {

    min-height:
        250px;

    padding:
        30px;

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

    border-radius:
        20px;

    background:
        #FFFFFF;
}


.value-card > span {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        #E8F7F4;

    color:
        var(--teal);

    font-size:
        11px;

    font-weight:
        900;
}


.value-card h3 {

    margin:
        26px 0 10px;

    color:
        var(--navy);

    font-size:
        20px;

    line-height:
        1.25;
}


.value-card p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.65;
}


.value-action {

    margin-top:
        35px;
}

/* =========================================================
   VALUE SECTION - MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .value-section {

        padding:
            80px 0;

    }


    .value-grid {

        grid-template-columns:
            1fr;

    }


    .value-card {

        min-height:
            auto;

    }

}

/* =========================================================
   VERY SMALL MOBILE
   Apenas pequenos ajustes de espaço
   ========================================================= */

@media (max-width: 480px) {

    .trust-grid {

        grid-template-columns:
            1fr;
    }

    .trust-item {

        border-right: 0;

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

    .trust-item:last-child {

        border-bottom: 0 !important;
    }

    .hero h1 {

        font-size: 46px;
    }

}

/* =========================================================
   SECURITY SECTION
   ========================================================= */

.security-section {

    padding:
        110px 0;

    background:
        var(--navy);
}


.security-layout {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        80px;

    align-items: start;
}


.security-copy h2 {

    margin:
        17px 0 20px;

    color:
        var(--white);

    font-size:
        clamp(
            40px,
            4.2vw,
            56px
        );

    line-height:
        1.05;

    letter-spacing:
        -.045em;
}


.security-copy h2 span {

    display: block;

    color:
        var(--teal-light);
}


.security-copy p {

    max-width:
        520px;

    margin:
        0;

    color:
        #B7C3D2;

    font-size:
        16px;

    line-height:
        1.7;
}


.security-points {

    display: grid;

    gap:
        14px;
}


.security-item {

    display: grid;

    grid-template-columns:
        48px 1fr;

    gap:
        18px;

    padding:
        24px 26px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        16px;

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


.security-item > span {

    width:
        42px;

    height:
        42px;

    display: grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        rgba(0,168,143,.14);

    color:
        var(--teal-light);

    font-size:
        11px;

    font-weight:
        900;
}


.security-item strong {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--white);

    font-size:
        17px;
}


.security-item p {

    margin:
        0;

    color:
        #9FB0C3;

    font-size:
        13px;

    line-height:
        1.55;
}


/* =========================================================
   SECURITY SECTION - MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .security-section {

        padding:
            80px 0;

    }


    .security-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }

}

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

.final-cta {

    padding:
        90px 0;

    background:
        #FFFFFF;
}


.final-cta-box {

    padding:
        48px 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        50px;

    border-radius:
        26px;

  background:
    linear-gradient(
        90deg,
        rgba(11,29,58,.98) 0%,
        rgba(11,29,58,.94) 38%,
        rgba(11,29,58,.78) 58%,
        rgba(11,29,58,.40) 78%,
        rgba(11,29,58,.18) 100%
    ),
    url("/assets/img/cta-sirnov-tecnologia.png");

background-size:
    cover;

background-position:
    center right;

background-repeat:
    no-repeat;
    
    box-shadow:
        0 24px 60px
        rgba(11,29,58,.16);
}


.final-cta-box h2 {

    margin:
        14px 0 18px;

    max-width:
        640px;

    color:
        var(--white);

    font-size:
        clamp(
            38px,
            4vw,
            54px
        );

    line-height:
        1.05;

    letter-spacing:
        -.04em;
}


.final-cta-box p {

    max-width:
        640px;

    margin:
        0;

    color:
        #C2CEDB;

    font-size:
        16px;

    line-height:
        1.7;
}


.final-cta-actions {

    min-width:
        230px;

    display: flex;

    flex-direction: column;

    gap:
        12px;
        
   margin-right: 120px;
}


.final-primary {

    background:
        var(--teal);

    color:
        var(--white);
}


.final-primary:hover {

    background:
        #008D79;
}


.final-secondary {

    border:
        1px solid
        rgba(255,255,255,.24);

    color:
        var(--white);

    background:
        transparent;
}


.final-secondary:hover {

    border-color:
        var(--teal-light);

    color:
        var(--teal-light);
}


/* =========================================================
   FINAL CTA - MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .final-cta {

        padding:
            70px 0;

    }


    .final-cta-box {

        padding:
            34px 24px;

        flex-direction: column;

        align-items: flex-start;

    }


    .final-cta-actions {

        width: 100%;

        min-width: 0;
        
        margin-right: 0;

    }


    .final-cta-actions .button {

        width: 100%;

    }

}

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

.site-footer {

    padding:
        78px 0 28px;

    background:
        #071427;

    color:
        #FFFFFF;
}


.footer-main {

    display: grid;

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

    gap:
        48px;
}


.footer-brand {

    max-width:
        320px;
}


.footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;
}


.footer-logo > span:last-child {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.2;
}


.footer-logo strong {

    color:
        #FFFFFF;

    font-size:
        22px;

    letter-spacing:
        .04em;
}


.footer-logo small {

    margin-top:
        4px;

    color:
        #7D8EA4;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;
}


.footer-brand p {

    margin:
        22px 0 16px;

    color:
        #8FA0B5;

    font-size:
        14px;

    line-height:
        1.65;
}


.footer-email {

    color:
        var(--teal-light);

    font-size:
        14px;

    font-weight:
        700;
}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.footer-column > strong {

    margin-bottom:
        8px;

    color:
        #C6D0DC;

    font-size:
        12px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .10em;
}


.footer-column a {

    color:
        #7F91A8;

    font-size:
        13px;

    transition:
        .2s ease;
}


.footer-column a:hover {

    color:
        #FFFFFF;
}


.footer-bottom {

    margin-top:
        50px;

    padding-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        #65778E;

    font-size:
        11px;
}


.footer-bottom a {

    color:
        var(--teal-light);

    font-weight:
        700;
}


/* =========================================================
   FOOTER - MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .site-footer {

        padding:
            60px 0 24px;

    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            38px 26px;

    }


    .footer-brand {

        grid-column:
            1 / -1;
    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;
    }

}


@media (max-width: 480px) {

    .footer-main {

        grid-template-columns:
            1fr;

    }


    .footer-brand {

        grid-column:
            auto;
    }

}

/* =========================================================
   SIRNOV — MOBILE FOUNDATION
   ========================================================= */

@media (max-width: 820px) {

    html,
    body {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;
    }


    .container {

        width:
            calc(100% - 30px);

        max-width: 100%;

        margin:
            0 auto;
    }


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

    .site-header {

        overflow: visible;
    }


    .header-inner {

        min-height: 74px;

        gap: 12px;
    }


    .brand {

        min-width: 0;
    }


    .brand-symbol {

        width: 44px;
        height: 44px;

        font-size: 24px;
    }


    .brand-copy strong {

        font-size: 21px;
    }


    .brand-copy small {

        display: none;
    }


    .menu-toggle {

        display: block;

        flex-shrink: 0;
    }


    .main-nav {

        display: none;

        position: absolute;

        top: 74px;
        left: 15px;
        right: 15px;

        z-index: 2000;

        padding: 14px;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

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

        border-radius: 16px;

        background:
            #FFFFFF;

        box-shadow:
            0 20px 50px
            rgba(11,29,58,.16);
    }


    .main-nav.is-open {

        display: flex;
    }


    .main-nav > a {

        width: 100%;

        padding: 12px 14px;

        border-radius: 8px;

        font-size: 14px;
    }


    .main-nav .cloud-button {

        margin-top: 5px;

        min-height: 46px;

        background:
            var(--navy);

        border-color:
            var(--navy);

        color:
            #FFFFFF !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {

        overflow: hidden;
    }


    .hero-layout {

        min-height: auto;

        padding:
            62px 0;

        display: grid;

        grid-template-columns:
            1fr;

        gap: 46px;
    }


    .hero-content {

        position: relative;

        z-index: 2;
    }


    .hero h1 {

        max-width: 100%;

        font-size:
            clamp(
                43px,
                12vw,
                56px
            );

        line-height: 1.03;
    }


    .hero-description {

        max-width: 100%;

        font-size: 16px;
    }


    .hero-actions {

        flex-direction: column;
    }


    .hero-actions .button {

        width: 100%;
    }


    .brand-pillars {

        gap: 10px;
    }


    /*
       No mobile a fotografia volta a ser
       um elemento normal abaixo do texto.
    */

    .hero-media {

        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        z-index: 1;

        width: 100%;

        height: auto;

        aspect-ratio:
            16 / 10;

        margin: 0;

        overflow: hidden;

        border-radius: 22px;

        background:
            var(--navy);

        box-shadow:
            0 22px 45px
            rgba(11,29,58,.14);

        -webkit-mask-image: none;

        mask-image: none;
    }


    .hero-media img {

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;

        display: block;
    }


    .hero-media-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(246,249,251,.10),
                transparent 28%
            );
    }


    /* =====================================================
       TRUST STRIP
       ===================================================== */

    .trust-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .trust-item,
    .trust-item:first-child {

        min-height: 105px;

        padding:
            22px 18px;
    }


    .trust-item:nth-child(2) {

        border-right: 0;
    }


    /* =====================================================
       CONTROL CENTER
       ===================================================== */

    .platform-section {

        padding:
            80px 0;
    }


    .platform-layout {

        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .platform-copy h2 {

        font-size:
            clamp(
                38px,
                10vw,
                48px
            );
    }


    .control-center {

        width: 100%;

        max-width: 100%;

        padding: 22px;

        overflow: hidden;
    }


    .control-flow {

        width: 100%;

        overflow-x: auto;

        padding-bottom: 15px;
    }


    .flow-step {

        min-width: 64px;
    }


    .flow-line {

        min-width: 28px;
    }


    .control-grid {

        grid-template-columns:
            1fr;
    }


    .control-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 7px;
    }


    /* =====================================================
       PORQUÊ SIRNOV
       ===================================================== */

    .value-section {

        padding:
            80px 0;
    }


    .value-grid {

        grid-template-columns:
            1fr;
    }


    .value-card {

        min-height: auto;
    }


    /* =====================================================
       SEGURANÇA
       ===================================================== */

    .security-section {

        padding:
            80px 0;
    }


    .security-layout {

        grid-template-columns:
            1fr;

        gap: 45px;
    }


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

    .final-cta {

        padding:
            65px 0;
    }


    .final-cta-box {

        padding:
            34px 24px;

        flex-direction: column;

        align-items: flex-start;
    }


    .final-cta-actions {

        width: 100%;

        min-width: 0;
    }


    .final-cta-actions .button {

        width: 100%;
    }


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

    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            38px 26px;
    }


    .footer-brand {

        grid-column:
            1 / -1;

        max-width: 100%;
    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

}


/* =========================================================
   SIRNOV — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .trust-grid {

        grid-template-columns:
            1fr;
    }


    .trust-item,
    .trust-item:first-child {

        border-right: 0;

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


    .trust-item:last-child {

        border-bottom: 0;
    }


    .footer-main {

        grid-template-columns:
            1fr;
    }


    .footer-brand {

        grid-column: auto;
    }

}

/* =========================================================
   LOGOTIPO OFICIAL SIRNOV
   ========================================================= */

.brand-official {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 2px;

    flex-shrink: 0;
}


.brand-official img {

    width: auto;

    height: 46px;

    max-width: 210px;

    object-fit: contain;

    display: block;
}


.brand-tagline {

    margin-left: 56px;

    color: var(--muted);

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .12em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* MOBILE */

@media (max-width: 820px) {

    .brand-official img {

        height: 40px;

        max-width: 180px;

    }


    .brand-tagline {

        margin-left: 48px;

        font-size: 7px;

    }

}

/* =========================================================
   HEADER LOGO - AJUSTE FINAL
   ========================================================= */

.brand-official {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin: 0;

    padding: 0;

}


.brand-official img {

    width: auto;

    height: 64px;

    max-width: 260px;

    display: block;

    object-fit: contain;

    object-position: left center;

}


/* deixa de existir tagline */

.brand-tagline {

    display: none;

}


@media (max-width: 820px) {

    .brand-official img {

        height: 50px;

        max-width: 205px;

    }

}

/* =========================================================
   HEADER - ALINHAMENTO COM O CONTEÚDO
   ========================================================= */

.site-header .header-inner {

    width:
        min(
            var(--container),
            calc(100% - 48px)
        );

    max-width:
        var(--container);

    margin:
        0 auto;

    padding:
        0;

}


.brand-official {

    margin-left: 0;

    margin-right: auto;

}

/* =========================================================
   FOOTER - LOGOTIPO OFICIAL
   ========================================================= */

.footer-logo-official {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    padding: 8px 12px;

    border-radius: 10px;

    background: #FFFFFF;
}


.footer-logo-official img {

    width: auto;

    height: 48px;

    max-width: 220px;

    display: block;

    object-fit: contain;
}


/* MOBILE */

@media (max-width: 820px) {

    .footer-logo-official img {

        height: 44px;

        max-width: 200px;

    }

}

.footer-logo-official {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.footer-logo-official img {
    height: 52px;
    max-width: 230px;
}

/* =========================================================
   PÁGINA PLATAFORMA - HERO
   ========================================================= */

.platform-page-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(0,168,143,.18) 0%,
            rgba(0,168,143,0) 32%
        ),
        linear-gradient(
            135deg,
            #07172D 0%,
            #0B1D3A 58%,
            #102B50 100%
        );
}


/* grelha tecnológica subtil */

.platform-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.25),
            #000
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.25),
            #000
        );
}


.platform-page-hero .container {
    position: relative;
    z-index: 2;
}


.platform-page-hero .eyebrow {
    margin-bottom: 24px;
    color: var(--teal-light);
}


.platform-page-hero h1 {
    max-width: 850px;
    margin: 0;
    color: #FFFFFF;

    font-size: clamp(58px, 6vw, 88px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 650;
}


.platform-page-hero h1 span {
    display: block;
    color: var(--teal-light);
}


.platform-page-hero > .container > p {
    max-width: 720px;
    margin: 32px 0 0;

    color: rgba(255,255,255,.74);

    font-size: 18px;
    line-height: 1.75;
}


.platform-page-hero .hero-actions {
    margin-top: 38px;
}


/* botão secundário específico no fundo escuro */

.platform-page-hero .button-secondary {
    color: #FFFFFF;
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.04);
}


.platform-page-hero .button-secondary:hover {
    border-color: rgba(255,255,255,.70);
    background: rgba(255,255,255,.08);
}


/* elemento visual do lado direito */

.platform-page-hero::after {
    content: "SIR9";
    position: absolute;

    right: 5vw;
    bottom: -42px;

    color: rgba(255,255,255,.035);

    font-size: clamp(180px, 23vw, 390px);
    line-height: 1;
    letter-spacing: -.08em;
    font-weight: 750;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .platform-page-hero {
        padding: 78px 0 85px;
    }

    .platform-page-hero h1 {
        font-size: clamp(47px, 13vw, 64px);
    }

    .platform-page-hero > .container > p {
        font-size: 16px;
        line-height: 1.65;
    }

    .platform-page-hero::after {
        right: -20px;
        bottom: -20px;
        font-size: 150px;
    }

}

/* =========================================================
   PÁGINA PLATAFORMA - VISÃO E FLUXO OPERACIONAL
   ========================================================= */

.platform-overview {
    padding: 105px 0 48px;
    background: #FFFFFF;
}


.platform-overview .eyebrow {
    margin-bottom: 18px;
}


.platform-overview h2 {
    max-width: 760px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.platform-overview p {
    max-width: 760px;
    margin: 25px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


/* FLUXO */

.platform-process {
    padding: 35px 0 115px;
    background: #FFFFFF;
}


.platform-process-grid {
    position: relative;

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

    gap: 18px;
}


/* linha que liga o processo */

.platform-process-grid::before {
    content: "";

    position: absolute;

    top: 31px;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--teal),
            rgba(0,168,143,.22)
        );

    z-index: 0;
}


.platform-process-grid article {
    position: relative;
    z-index: 1;

    min-height: 245px;

    padding: 0 20px 28px 0;

    background: #FFFFFF;
}


.platform-process-grid article > span {
    display: flex;

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

    width: 62px;
    height: 62px;

    margin-bottom: 30px;

    border: 1px solid rgba(0,168,143,.28);
    border-radius: 50%;

    background: #FFFFFF;

    color: var(--teal);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}


.platform-process-grid article:first-child > span {
    color: #FFFFFF;
    background: var(--teal);
    border-color: var(--teal);
}


.platform-process-grid h3 {
    margin: 0 0 13px;

    color: var(--navy);

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


.platform-process-grid p {
    max-width: 205px;
    margin: 0;

    color: var(--muted);

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


/* MOBILE */

@media (max-width: 820px) {

    .platform-overview {
        padding: 80px 0 40px;
    }


    .platform-overview h2 {
        font-size: clamp(38px, 10vw, 50px);
    }


    .platform-process {
        padding: 20px 0 85px;
    }


    .platform-process-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .platform-process-grid::before {
        top: 30px;
        bottom: 30px;

        left: 30px;
        right: auto;

        width: 1px;
        height: auto;

        background:
            linear-gradient(
                180deg,
                var(--teal),
                rgba(0,168,143,.18)
            );
    }


    .platform-process-grid article {
        min-height: 0;

        padding:
            0
            0
            42px
            88px;
    }


    .platform-process-grid article > span {
        position: absolute;

        top: 0;
        left: 0;

        margin: 0;
    }


    .platform-process-grid p {
        max-width: 100%;
    }

}

/* =========================================================
   PÁGINA PLATAFORMA - ÁREAS DE CONTROLO
   ========================================================= */

.platform-capabilities {
    padding: 110px 0 120px;
    background: var(--soft);
}


.platform-capabilities-heading {
    max-width: 820px;
    margin-bottom: 55px;
}


.platform-capabilities-heading .eyebrow {
    margin-bottom: 18px;
}


.platform-capabilities-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.8vw, 66px);
    line-height: 1.04;
    letter-spacing: -.04em;
}


.platform-capabilities-heading h2 span {
    display: block;
    color: var(--teal);
}


.platform-capabilities-heading p {
    max-width: 720px;
    margin: 26px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


.platform-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


.capability-card {
    position: relative;

    min-height: 330px;

    padding: 34px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 35px rgba(11,29,58,.05);
}


.capability-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background: rgba(0,168,143,.10);

    color: var(--teal);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}


.capability-card h3 {
    margin: 0 0 14px;

    color: var(--navy);

    font-size: 27px;
    line-height: 1.15;
}


.capability-card > p {
    max-width: 500px;
    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 30px;
}


.capability-tags span {
    display: inline-flex;

    padding: 8px 12px;

    border-radius: 999px;

    background: var(--soft);

    color: var(--navy);

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


/* CARD ESCURO */

.capability-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.capability-card-dark .capability-number {
    background: rgba(66,208,188,.14);
    color: var(--teal-light);
}


.capability-card-dark h3 {
    color: #FFFFFF;
}


.capability-card-dark > p {
    color: rgba(255,255,255,.68);
}


.capability-card-dark .capability-tags span {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.84);
}


/* MOBILE */

@media (max-width: 820px) {

    .platform-capabilities {
        padding: 80px 0 90px;
    }

    .platform-capabilities-heading {
        margin-bottom: 40px;
    }

    .platform-capabilities-heading h2 {
        font-size: clamp(38px, 10vw, 50px);
    }

    .platform-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .capability-card {
        min-height: auto;
        padding: 28px;
    }

}

/* =========================================================
   PÁGINA SOLUÇÕES - HERO
   ========================================================= */

.solutions-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 83% 45%,
            rgba(66,208,188,.20) 0%,
            rgba(66,208,188,.07) 23%,
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FA 58%,
            #EDF8F6 100%
        );
}


/* grelha subtil */

.solutions-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );
}


.solutions-page-hero .container {
    position: relative;
    z-index: 2;
}


.solutions-page-hero .eyebrow {
    margin-bottom: 24px;

    color: var(--teal);
}


.solutions-page-hero h1 {
    max-width: 960px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(58px, 6vw, 88px);

    line-height: .99;

    letter-spacing: -.045em;

    font-weight: 650;
}


.solutions-page-hero h1 span {
    display: block;

    color: var(--teal);
}


.solutions-page-hero > .container > p {
    max-width: 760px;

    margin: 32px 0 0;

    color: var(--text);

    font-size: 18px;

    line-height: 1.75;
}


.solutions-page-hero .hero-actions {
    margin-top: 38px;
}


/* detalhe de marca */

.solutions-page-hero::after {
    content: "06";

    position: absolute;

    right: 6vw;
    bottom: -75px;

    color: rgba(11,29,58,.035);

    font-size: clamp(210px, 26vw, 430px);

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.08em;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .solutions-page-hero {
        padding: 78px 0 88px;
    }


    .solutions-page-hero h1 {
        font-size: clamp(46px, 12vw, 62px);
    }


    .solutions-page-hero > .container > p {
        font-size: 16px;

        line-height: 1.65;
    }


    .solutions-page-hero::after {
        right: -25px;
        bottom: -30px;

        font-size: 165px;
    }

}

/* =========================================================
   PÁGINA SOLUÇÕES - INTRODUÇÃO E CATÁLOGO
   ========================================================= */

.solutions-intro {
    padding: 105px 0 48px;
    background: #FFFFFF;
}


.solutions-intro .eyebrow {
    margin-bottom: 18px;
}


.solutions-intro h2 {
    max-width: 820px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.solutions-intro p {
    max-width: 790px;
    margin: 25px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


/* CATÁLOGO */

.solutions-catalog {
    padding: 25px 0 120px;
    background: #FFFFFF;
}


.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.solution-card {
    position: relative;

    min-height: 310px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 36px rgba(11,29,58,.045);
}


.solution-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 35px;

    border-radius: 50%;

    background: rgba(0,168,143,.10);

    color: var(--teal);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}


.solution-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 22px;
    line-height: 1.2;
}


.solution-card > p {
    margin: 0;

    color: var(--muted);

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


.solution-meta {
    margin-top: auto;
    padding-top: 28px;

    color: var(--navy);

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


/* último card */

.solution-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.solution-card-dark .solution-number {
    background: rgba(66,208,188,.14);

    color: var(--teal-light);
}


.solution-card-dark h3 {
    color: #FFFFFF;
}


.solution-card-dark > p {
    color: rgba(255,255,255,.68);
}


.solution-card-dark .solution-meta {
    color: var(--teal-light);
}


/* interação discreta */

@media (hover: hover) {

    .solution-card {
        transition:
            transform .22s ease,
            box-shadow .22s ease,
            border-color .22s ease;
    }


    .solution-card:hover {
        transform: translateY(-4px);

        border-color: rgba(0,168,143,.22);

        box-shadow:
            0 20px 48px rgba(11,29,58,.08);
    }

}


/* MOBILE */

@media (max-width: 820px) {

    .solutions-intro {
        padding: 80px 0 38px;
    }


    .solutions-intro h2 {
        font-size: clamp(38px, 10vw, 50px);
    }


    .solutions-catalog {
        padding: 20px 0 90px;
    }


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


    .solution-card {
        min-height: auto;
        padding: 28px;
    }


    .solution-meta {
        margin-top: 25px;
        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA SOLUÇÕES - INTEGRAÇÃO
   ========================================================= */

.solutions-integration {
    position: relative;

    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(0,168,143,.20) 0%,
            rgba(0,168,143,0) 34%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 55%,
            var(--navy-2) 100%
        );
}


.solutions-integration::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.solutions-integration .container {
    position: relative;
    z-index: 2;
}


.solutions-integration-copy {
    max-width: 880px;
}


.solutions-integration .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.solutions-integration h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(44px, 4.8vw, 66px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.solutions-integration h2 span {
    display: block;

    color: var(--teal-light);
}


.solutions-integration p {
    max-width: 760px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}


/* MOBILE */

@media (max-width: 820px) {

    .solutions-integration {
        padding: 80px 0 85px;
    }


    .solutions-integration h2 {
        font-size: clamp(38px, 10vw, 50px);
    }


    .solutions-integration p {
        font-size: 16px;
    }

}

/* =========================================================
   PÁGINA SETORES - HERO
   ========================================================= */

.sectors-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(0,168,143,.24) 0%,
            rgba(0,168,143,.08) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #07172D 0%,
            #0B1D3A 55%,
            #12395A 100%
        );
}


.sectors-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.sectors-page-hero .container {
    position: relative;
    z-index: 2;
}


.sectors-page-hero .eyebrow {
    margin-bottom: 24px;
    color: var(--teal-light);
}


.sectors-page-hero h1 {
    max-width: 950px;
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(58px, 6vw, 88px);
    line-height: .99;
    letter-spacing: -.045em;
    font-weight: 650;
}


.sectors-page-hero h1 span {
    display: block;
    color: var(--teal-light);
}


.sectors-page-hero > .container > p {
    max-width: 760px;
    margin: 32px 0 0;

    color: rgba(255,255,255,.74);

    font-size: 18px;
    line-height: 1.75;
}


.sectors-page-hero .hero-actions {
    margin-top: 38px;
}


.sectors-page-hero .button-secondary {
    color: #FFFFFF;

    border-color: rgba(255,255,255,.35);

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


.sectors-page-hero .button-secondary:hover {
    border-color: rgba(255,255,255,.70);

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


/* detalhe visual */

.sectors-page-hero::after {
    content: "08";

    position: absolute;

    right: 6vw;
    bottom: -70px;

    color: rgba(255,255,255,.035);

    font-size: clamp(210px, 26vw, 430px);

    line-height: 1;
    font-weight: 750;
    letter-spacing: -.08em;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .sectors-page-hero {
        padding: 78px 0 88px;
    }


    .sectors-page-hero h1 {
        font-size: clamp(46px, 12vw, 62px);
    }


    .sectors-page-hero > .container > p {
        font-size: 16px;
        line-height: 1.65;
    }


    .sectors-page-hero::after {
        right: -25px;
        bottom: -30px;

        font-size: 165px;
    }

}

/* =========================================================
   PÁGINA SETORES - INTRODUÇÃO E SETORES
   ========================================================= */

.sectors-intro {
    padding: 105px 0 48px;
    background: #FFFFFF;
}


.sectors-intro .eyebrow {
    margin-bottom: 18px;
}


.sectors-intro h2 {
    max-width: 880px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.sectors-intro p {
    max-width: 790px;
    margin: 25px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   GRELHA DOS SETORES
   ========================================================= */

.sectors-catalog {
    padding: 25px 0 120px;
    background: #FFFFFF;
}


.sectors-grid {
    display: grid;

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

    gap: 18px;
}


.sector-card {
    position: relative;

    min-height: 310px;

    padding: 30px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 34px
        rgba(11,29,58,.045);
}


.sector-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.sector-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 21px;
    line-height: 1.2;
}


.sector-card > p {
    margin: 0;

    color: var(--muted);

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


.sector-meta {
    margin-top: auto;

    padding-top: 28px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 650;

    line-height: 1.5;
}


/* primeiro setor ligeiramente destacado */

.sector-card:first-child {
    border-color:
        rgba(0,168,143,.28);
}


/* último card */

.sector-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.sector-card-dark .sector-number {
    background:
        rgba(66,208,188,.14);

    color:
        var(--teal-light);
}


.sector-card-dark h3 {
    color: #FFFFFF;
}


.sector-card-dark > p {
    color:
        rgba(255,255,255,.68);
}


.sector-card-dark .sector-meta {
    color:
        var(--teal-light);
}


/* interação desktop */

@media (hover: hover) {

    .sector-card {
        transition:
            transform .22s ease,
            box-shadow .22s ease,
            border-color .22s ease;
    }


    .sector-card:hover {
        transform:
            translateY(-4px);

        border-color:
            rgba(0,168,143,.28);

        box-shadow:
            0 20px 48px
            rgba(11,29,58,.08);
    }

}


/* TABLET */

@media (max-width: 1100px) {

    .sectors-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* MOBILE */

@media (max-width: 820px) {

    .sectors-intro {
        padding:
            80px 0 38px;
    }


    .sectors-intro h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .sectors-catalog {
        padding:
            20px 0 90px;
    }


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


    .sector-card {
        min-height: auto;

        padding: 28px;
    }


    .sector-meta {
        margin-top: 25px;

        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA SETORES - VALOR TRANSVERSAL
   ========================================================= */

.sectors-value {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(66,208,188,.18) 0%,
            rgba(66,208,188,.05) 30%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            #F5F8FA 0%,
            #FFFFFF 55%,
            #EDF8F6 100%
        );
}


.sectors-value::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.03) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 25%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 25%,
            #000 100%
        );
}


.sectors-value .container {
    position: relative;
    z-index: 2;
}


.sectors-value-copy {
    max-width: 900px;
}


.sectors-value .eyebrow {
    margin-bottom: 20px;

    color: var(--teal);
}


.sectors-value h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.sectors-value h2 span {
    display: block;

    color: var(--teal);
}


.sectors-value p {
    max-width: 760px;

    margin: 28px 0 0;

    color: var(--text);

    font-size: 17px;

    line-height: 1.75;
}


/* MOBILE */

@media (max-width: 820px) {

    .sectors-value {
        padding: 80px 0 85px;
    }


    .sectors-value h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .sectors-value p {
        font-size: 16px;
    }

}

/* =========================================================
   PÁGINA SEGURANÇA - HERO
   ========================================================= */

.security-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(0,168,143,.20) 0%,
            rgba(0,168,143,.06) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #07172D 0%,
            #0B1D3A 58%,
            #102B50 100%
        );
}


.security-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.security-page-hero .container {
    position: relative;
    z-index: 2;
}


.security-page-hero .eyebrow {
    margin-bottom: 24px;

    color: var(--teal-light);
}


.security-page-hero h1 {
    max-width: 980px;

    margin: 0;

    color: #FFFFFF;

    font-size: clamp(58px, 6vw, 88px);

    line-height: .99;

    letter-spacing: -.045em;

    font-weight: 650;
}


.security-page-hero h1 span {
    display: block;

    color: var(--teal-light);
}


.security-page-hero > .container > p {
    max-width: 760px;

    margin: 32px 0 0;

    color: rgba(255,255,255,.74);

    font-size: 18px;

    line-height: 1.75;
}


.security-page-hero .hero-actions {
    margin-top: 38px;
}


.security-page-hero .button-secondary {
    color: #FFFFFF;

    border-color: rgba(255,255,255,.35);

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


.security-page-hero .button-secondary:hover {
    border-color: rgba(255,255,255,.70);

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


/* detalhe gráfico */

.security-page-hero::after {
    content: "SEC";

    position: absolute;

    right: 5vw;
    bottom: -55px;

    color: rgba(255,255,255,.03);

    font-size: clamp(170px, 20vw, 330px);

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.08em;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .security-page-hero {
        padding: 78px 0 88px;
    }


    .security-page-hero h1 {
        font-size: clamp(46px, 12vw, 62px);
    }


    .security-page-hero > .container > p {
        font-size: 16px;

        line-height: 1.65;
    }


    .security-page-hero::after {
        right: -25px;
        bottom: -20px;

        font-size: 140px;
    }

}

/* =========================================================
   PÁGINA SEGURANÇA - INTRODUÇÃO
   ========================================================= */

.security-intro {
    padding: 105px 0 48px;
    background: #FFFFFF;
}


.security-intro .eyebrow {
    margin-bottom: 18px;
}


.security-intro h2 {
    max-width: 900px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.security-intro p {
    max-width: 820px;
    margin: 25px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   PÁGINA SEGURANÇA - PILARES
   ========================================================= */

.security-capabilities {
    padding: 25px 0 120px;
    background: #FFFFFF;
}


.security-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.security-capability-card {
    position: relative;

    min-height: 310px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 36px rgba(11,29,58,.045);
}


.security-capability-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background: rgba(0,168,143,.10);

    color: var(--teal);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}


.security-capability-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 22px;
    line-height: 1.2;
}


.security-capability-card > p {
    margin: 0;

    color: var(--muted);

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


.security-capability-meta {
    margin-top: auto;
    padding-top: 28px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 650;

    line-height: 1.5;
}


/* último card */

.security-capability-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.security-capability-card-dark
.security-capability-number {
    background: rgba(66,208,188,.14);

    color: var(--teal-light);
}


.security-capability-card-dark h3 {
    color: #FFFFFF;
}


.security-capability-card-dark > p {
    color: rgba(255,255,255,.68);
}


.security-capability-card-dark
.security-capability-meta {
    color: var(--teal-light);
}


/* interação desktop */

@media (hover: hover) {

    .security-capability-card {
        transition:
            transform .22s ease,
            box-shadow .22s ease,
            border-color .22s ease;
    }


    .security-capability-card:hover {
        transform: translateY(-4px);

        border-color: rgba(0,168,143,.28);

        box-shadow:
            0 20px 48px
            rgba(11,29,58,.08);
    }

}


/* MOBILE */

@media (max-width: 820px) {

    .security-intro {
        padding: 80px 0 38px;
    }


    .security-intro h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .security-capabilities {
        padding: 20px 0 90px;
    }


    .security-capabilities-grid {
        grid-template-columns: 1fr;
    }


    .security-capability-card {
        min-height: auto;
        padding: 28px;
    }


    .security-capability-meta {
        margin-top: 25px;
        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA SEGURANÇA - PRINCÍPIO CENTRAL
   ========================================================= */

.security-principle {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(0,168,143,.20) 0%,
            rgba(0,168,143,0) 35%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 58%,
            var(--navy-2) 100%
        );
}


.security-principle::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.security-principle .container {
    position: relative;
    z-index: 2;
}


.security-principle-copy {
    max-width: 900px;
}


.security-principle .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.security-principle h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.security-principle h2 span {
    display: block;

    color: var(--teal-light);
}


.security-principle p {
    max-width: 760px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}



/* =========================================================
   PÁGINA SEGURANÇA - GOVERNAÇÃO
   ========================================================= */

.security-governance {
    padding: 110px 0 120px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            var(--soft) 100%
        );
}


.security-governance-layout {
    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap: 90px;

    align-items: start;
}


.security-governance .eyebrow {
    margin-bottom: 18px;

    color: var(--teal);
}


.security-governance h2 {
    max-width: 580px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.3vw, 60px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.security-governance-layout > div:last-child {
    padding-top: 35px;
}


.security-governance p {
    max-width: 650px;

    margin: 0 0 22px;

    color: var(--text);

    font-size: 16px;

    line-height: 1.8;
}


.security-governance p:last-child {
    margin-bottom: 0;

    padding: 20px 22px;

    border-left: 3px solid var(--teal);

    background: #FFFFFF;

    color: var(--navy);

    box-shadow:
        0 12px 32px
        rgba(11,29,58,.05);
}


/* MOBILE */

@media (max-width: 820px) {

    .security-principle {
        padding: 80px 0 85px;
    }


    .security-principle h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .security-principle p {
        font-size: 16px;
    }


    .security-governance {
        padding: 80px 0 90px;
    }


    .security-governance-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .security-governance h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .security-governance-layout > div:last-child {
        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA SOBRE - HERO
   ========================================================= */

.about-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(66,208,188,.20) 0%,
            rgba(66,208,188,.06) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FA 58%,
            #EDF8F6 100%
        );
}


.about-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );
}


.about-page-hero .container {
    position: relative;
    z-index: 2;
}


.about-page-hero .eyebrow {
    margin-bottom: 24px;

    color: var(--teal);
}


.about-page-hero h1 {
    max-width: 980px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(58px, 6vw, 88px);

    line-height: .99;

    letter-spacing: -.045em;

    font-weight: 650;
}


.about-page-hero h1 span {
    display: block;

    color: var(--teal);
}


.about-page-hero > .container > p {
    max-width: 760px;

    margin: 32px 0 0;

    color: var(--text);

    font-size: 18px;

    line-height: 1.75;
}


.about-page-hero .hero-actions {
    margin-top: 38px;
}


/* elemento de marca */

.about-page-hero::after {
    content: "SIRNOV";

    position: absolute;

    right: 4vw;
    bottom: -45px;

    color: rgba(11,29,58,.035);

    font-size: clamp(120px, 16vw, 260px);

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.07em;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .about-page-hero {
        padding: 78px 0 88px;
    }


    .about-page-hero h1 {
        font-size:
            clamp(46px, 12vw, 62px);
    }


    .about-page-hero > .container > p {
        font-size: 16px;

        line-height: 1.65;
    }


    .about-page-hero::after {
        right: -30px;
        bottom: -15px;

        font-size: 105px;
    }

}

/* =========================================================
   PÁGINA SOBRE - VISÃO
   ========================================================= */

.about-intro {
    padding: 105px 0 55px;
    background: #FFFFFF;
}


.about-intro .eyebrow {
    margin-bottom: 18px;
}


.about-intro h2 {
    max-width: 900px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.about-intro p {
    max-width: 820px;
    margin: 24px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   PÁGINA SOBRE - PRINCÍPIOS
   ========================================================= */

.about-principles {
    padding: 55px 0 120px;
    background: var(--soft);
}


.about-principles-heading {
    max-width: 820px;
    margin-bottom: 50px;
}


.about-principles-heading .eyebrow {
    margin-bottom: 18px;
}


.about-principles-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.about-principles-heading h2 span {
    display: block;
    color: var(--teal);
}


.about-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


.about-principle-card {
    min-height: 320px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 36px rgba(11,29,58,.045);
}


.about-principle-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background: rgba(0,168,143,.10);

    color: var(--teal);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}


.about-principle-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 24px;
    line-height: 1.2;
}


.about-principle-card > p {
    margin: 0;

    color: var(--muted);

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


.about-principle-meta {
    margin-top: auto;
    padding-top: 28px;

    color: var(--navy);

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


/* último card */

.about-principle-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.about-principle-card-dark .about-principle-number {
    background: rgba(66,208,188,.14);
    color: var(--teal-light);
}


.about-principle-card-dark h3 {
    color: #FFFFFF;
}


.about-principle-card-dark > p {
    color: rgba(255,255,255,.68);
}


.about-principle-card-dark .about-principle-meta {
    color: var(--teal-light);
}


/* MOBILE */

@media (max-width: 820px) {

    .about-intro {
        padding: 80px 0 45px;
    }


    .about-intro h2 {
        font-size: clamp(38px, 10vw, 50px);
    }


    .about-principles {
        padding: 45px 0 90px;
    }


    .about-principles-heading h2 {
        font-size: clamp(38px, 10vw, 50px);
    }


    .about-principles-grid {
        grid-template-columns: 1fr;
    }


    .about-principle-card {
        min-height: auto;
        padding: 28px;
    }


    .about-principle-meta {
        margin-top: 25px;
        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA SOBRE - PROPÓSITO
   ========================================================= */

.about-purpose {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(0,168,143,.20) 0%,
            rgba(0,168,143,0) 35%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 58%,
            var(--navy-2) 100%
        );
}


.about-purpose::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.about-purpose .container {
    position: relative;
    z-index: 2;
}


.about-purpose-copy {
    max-width: 920px;
}


.about-purpose .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.about-purpose h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.about-purpose h2 span {
    display: block;

    color: var(--teal-light);
}


.about-purpose p {
    max-width: 760px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   PÁGINA SOBRE - EVOLUÇÃO
   ========================================================= */

.about-evolution {
    padding: 110px 0 120px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            var(--soft) 100%
        );
}


.about-evolution-layout {
    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap: 90px;

    align-items: start;
}


.about-evolution .eyebrow {
    margin-bottom: 18px;

    color: var(--teal);
}


.about-evolution h2 {
    max-width: 590px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.3vw, 60px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.about-evolution-layout > div:last-child {
    padding-top: 35px;
}


.about-evolution p {
    max-width: 650px;

    margin: 0 0 22px;

    color: var(--text);

    font-size: 16px;

    line-height: 1.8;
}


.about-evolution p:last-child {
    margin-bottom: 0;

    padding: 22px 24px;

    border-left: 3px solid var(--teal);

    background: #FFFFFF;

    color: var(--navy);

    box-shadow:
        0 12px 32px
        rgba(11,29,58,.05);
}


/* MOBILE */

@media (max-width: 820px) {

    .about-purpose {
        padding: 80px 0 85px;
    }


    .about-purpose h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .about-purpose p {
        font-size: 16px;
    }


    .about-evolution {
        padding: 80px 0 90px;
    }


    .about-evolution-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .about-evolution h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .about-evolution-layout > div:last-child {
        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA CONTACTOS - HERO
   ========================================================= */

.contact-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(66,208,188,.20) 0%,
            rgba(66,208,188,.06) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FA 58%,
            #EDF8F6 100%
        );
}


.contact-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );
}


.contact-page-hero .container {
    position: relative;
    z-index: 2;
}


.contact-page-hero .eyebrow {
    margin-bottom: 24px;

    color: var(--teal);
}


.contact-page-hero h1 {
    max-width: 900px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(58px, 6vw, 88px);

    line-height: .99;

    letter-spacing: -.045em;

    font-weight: 650;
}


.contact-page-hero h1 span {
    display: block;

    color: var(--teal);
}


.contact-page-hero > .container > p {
    max-width: 720px;

    margin: 32px 0 0;

    color: var(--text);

    font-size: 18px;

    line-height: 1.75;
}


.contact-page-hero .hero-actions {
    margin-top: 38px;
}


/* detalhe visual */

.contact-page-hero::after {
    content: "@";

    position: absolute;

    right: 7vw;
    bottom: -75px;

    color: rgba(11,29,58,.035);

    font-size: clamp(220px, 27vw, 430px);

    line-height: 1;

    font-weight: 750;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .contact-page-hero {
        padding: 78px 0 88px;
    }


    .contact-page-hero h1 {
        font-size:
            clamp(46px, 12vw, 62px);
    }


    .contact-page-hero > .container > p {
        font-size: 16px;

        line-height: 1.65;
    }


    .contact-page-hero::after {
        right: -20px;
        bottom: -30px;

        font-size: 170px;
    }

}

/* =========================================================
   PÁGINA CONTACTOS - OPÇÕES DE CONTACTO
   ========================================================= */

.contact-options {
    padding: 105px 0 120px;
    background: #FFFFFF;
}


.contact-options-heading {
    max-width: 820px;
    margin-bottom: 52px;
}


.contact-options-heading .eyebrow {
    margin-bottom: 18px;
}


.contact-options-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.contact-options-heading p {
    max-width: 720px;

    margin: 25px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


.contact-options-grid {
    display: grid;

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

    gap: 22px;
}


.contact-option-card {
    min-height: 330px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 36px rgba(11,29,58,.045);
}


.contact-option-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.contact-option-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 24px;
    line-height: 1.2;
}


.contact-option-card > p {
    margin: 0;

    color: var(--muted);

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


.contact-option-link {
    margin-top: auto;
    padding-top: 30px;

    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: var(--teal);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.contact-option-link span {
    transition:
        transform .2s ease;
}


.contact-option-link:hover span {
    transform:
        translateX(4px);
}


/* CARD CLOUD */

.contact-option-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.contact-option-card-dark
.contact-option-number {
    background:
        rgba(66,208,188,.14);

    color:
        var(--teal-light);
}


.contact-option-card-dark h3 {
    color: #FFFFFF;
}


.contact-option-card-dark > p {
    color:
        rgba(255,255,255,.68);
}


.contact-option-card-dark
.contact-option-link {
    color:
        var(--teal-light);
}


/* MOBILE */

@media (max-width: 820px) {

    .contact-options {
        padding:
            80px 0 90px;
    }


    .contact-options-heading h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .contact-options-grid {
        grid-template-columns: 1fr;
    }


    .contact-option-card {
        min-height: auto;

        padding: 28px;
    }


    .contact-option-link {
        margin-top: 25px;

        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA CONTACTOS - DEMONSTRAÇÃO
   ========================================================= */

.contact-demo {
    padding: 110px 0 120px;

    background:
        linear-gradient(
            135deg,
            var(--soft) 0%,
            #FFFFFF 100%
        );
}


.contact-demo-layout {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 90px;

    align-items: start;
}


.contact-demo .eyebrow {
    margin-bottom: 18px;

    color: var(--teal);
}


.contact-demo h2 {
    max-width: 560px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.3vw, 60px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.contact-demo-steps {
    display: flex;
    flex-direction: column;
}


.contact-demo-step {
    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 24px;

    padding: 28px 0;

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


.contact-demo-step:first-child {
    padding-top: 5px;
}


.contact-demo-step:last-child {
    border-bottom: 0;
}


.contact-demo-step > span {
    display: flex;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.contact-demo-step strong {
    display: block;

    margin-bottom: 8px;

    color: var(--navy);

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


.contact-demo-step p {
    max-width: 520px;

    margin: 0;

    color: var(--muted);

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



/* =========================================================
   PÁGINA CONTACTOS - CONTACTO DIRETO
   ========================================================= */

.contact-direct {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(0,168,143,.22) 0%,
            rgba(0,168,143,0) 36%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 58%,
            var(--navy-2) 100%
        );
}


.contact-direct::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.contact-direct .container {
    position: relative;
    z-index: 2;
}


.contact-direct-copy {
    max-width: 900px;
}


.contact-direct .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.contact-direct h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.contact-direct h2 span {
    display: block;

    color: var(--teal-light);
}


.contact-direct p {
    max-width: 650px;

    margin: 28px 0 32px;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}


.contact-direct .button-primary {
    display: inline-flex;
}


/* MOBILE */

@media (max-width: 820px) {

    .contact-demo {
        padding: 80px 0 90px;
    }


    .contact-demo-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .contact-demo h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .contact-demo-step {
        grid-template-columns:
            50px 1fr;

        gap: 18px;
    }


    .contact-direct {
        padding: 80px 0 85px;
    }


    .contact-direct h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .contact-direct p {
        font-size: 16px;
    }

}

/* =========================================================
   PÁGINA CARREIRAS - HERO
   ========================================================= */

.careers-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(66,208,188,.22) 0%,
            rgba(66,208,188,.07) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FA 58%,
            #EDF8F6 100%
        );
}


.careers-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );
}


.careers-page-hero .container {
    position: relative;
    z-index: 2;
}


.careers-page-hero .eyebrow {
    margin-bottom: 24px;

    color: var(--teal);
}


.careers-page-hero h1 {
    max-width: 1000px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(58px, 6vw, 88px);

    line-height: .99;

    letter-spacing: -.045em;

    font-weight: 650;
}


.careers-page-hero h1 span {
    display: block;

    color: var(--teal);
}


.careers-page-hero > .container > p {
    max-width: 760px;

    margin: 32px 0 0;

    color: var(--text);

    font-size: 18px;

    line-height: 1.75;
}


.careers-page-hero .hero-actions {
    margin-top: 38px;
}


/* elemento visual */

.careers-page-hero::after {
    content: "TEAM";

    position: absolute;

    right: 4vw;
    bottom: -45px;

    color: rgba(11,29,58,.035);

    font-size: clamp(150px, 19vw, 300px);

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.07em;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .careers-page-hero {
        padding: 78px 0 88px;
    }


    .careers-page-hero h1 {
        font-size:
            clamp(46px, 12vw, 62px);
    }


    .careers-page-hero > .container > p {
        font-size: 16px;

        line-height: 1.65;
    }


    .careers-page-hero::after {
        right: -30px;
        bottom: -15px;

        font-size: 115px;
    }

}

/* =========================================================
   PÁGINA CARREIRAS - INTRODUÇÃO
   ========================================================= */

.careers-intro {
    padding: 105px 0 55px;
    background: #FFFFFF;
}


.careers-intro .eyebrow {
    margin-bottom: 18px;
}


.careers-intro h2 {
    max-width: 900px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.careers-intro p {
    max-width: 820px;
    margin: 24px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}



/* =========================================================
   PÁGINA CARREIRAS - ÁREAS DE TALENTO
   ========================================================= */

.careers-areas {
    padding: 55px 0 120px;

    background: var(--soft);
}


.careers-areas-heading {
    max-width: 820px;
    margin-bottom: 50px;
}


.careers-areas-heading .eyebrow {
    margin-bottom: 18px;
}


.careers-areas-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.careers-areas-heading h2 span {
    display: block;

    color: var(--teal);
}


.careers-areas-grid {
    display: grid;

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

    gap: 22px;
}


.career-area-card {
    min-height: 330px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 36px
        rgba(11,29,58,.045);
}


.career-area-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.career-area-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 24px;
    line-height: 1.2;
}


.career-area-card > p {
    margin: 0;

    color: var(--muted);

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


.career-area-meta {
    margin-top: auto;

    padding-top: 28px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 650;

    line-height: 1.5;
}


/* terceiro card */

.career-area-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.career-area-card-dark
.career-area-number {
    background:
        rgba(66,208,188,.14);

    color:
        var(--teal-light);
}


.career-area-card-dark h3 {
    color: #FFFFFF;
}


.career-area-card-dark > p {
    color:
        rgba(255,255,255,.68);
}


.career-area-card-dark
.career-area-meta {
    color:
        var(--teal-light);
}


/* MOBILE */

@media (max-width: 820px) {

    .careers-intro {
        padding: 80px 0 45px;
    }


    .careers-intro h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .careers-areas {
        padding: 45px 0 90px;
    }


    .careers-areas-heading h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .careers-areas-grid {
        grid-template-columns: 1fr;
    }


    .career-area-card {
        min-height: auto;

        padding: 28px;
    }


    .career-area-meta {
        margin-top: 25px;

        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA CARREIRAS - COMO TRABALHAMOS
   ========================================================= */

.careers-values {
    padding: 110px 0 120px;

    background: #FFFFFF;
}


.careers-values-layout {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 90px;

    align-items: start;
}


.careers-values .eyebrow {
    margin-bottom: 18px;

    color: var(--teal);
}


.careers-values h2 {
    max-width: 560px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.3vw, 60px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.careers-values-list {
    display: flex;
    flex-direction: column;
}


.careers-value-item {
    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 24px;

    padding: 28px 0;

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


.careers-value-item:first-child {
    padding-top: 5px;
}


.careers-value-item:last-child {
    border-bottom: 0;
}


.careers-value-item > span {
    display: flex;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.careers-value-item strong {
    display: block;

    margin-bottom: 8px;

    color: var(--navy);

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


.careers-value-item p {
    max-width: 520px;

    margin: 0;

    color: var(--muted);

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



/* =========================================================
   PÁGINA CARREIRAS - MANIFESTAÇÃO DE INTERESSE
   ========================================================= */

.careers-interest {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(0,168,143,.22) 0%,
            rgba(0,168,143,0) 36%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 58%,
            var(--navy-2) 100%
        );
}


.careers-interest::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.careers-interest .container {
    position: relative;
    z-index: 2;
}


.careers-interest-copy {
    max-width: 920px;
}


.careers-interest .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.careers-interest h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.careers-interest h2 span {
    display: block;

    color: var(--teal-light);
}


.careers-interest p {
    max-width: 700px;

    margin: 28px 0 32px;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}


.careers-interest .button-primary {
    display: inline-flex;
}


/* MOBILE */

@media (max-width: 820px) {

    .careers-values {
        padding: 80px 0 90px;
    }


    .careers-values-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .careers-values h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .careers-value-item {
        grid-template-columns:
            50px 1fr;

        gap: 18px;
    }


    .careers-interest {
        padding: 80px 0 85px;
    }


    .careers-interest h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .careers-interest p {
        font-size: 16px;
    }

}

/* =========================================================
   PÁGINA PARCEIROS - HERO
   ========================================================= */

.partners-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(0,168,143,.22) 0%,
            rgba(0,168,143,.07) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #07172D 0%,
            #0B1D3A 58%,
            #102B50 100%
        );
}


.partners-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.partners-page-hero .container {
    position: relative;
    z-index: 2;
}


.partners-page-hero .eyebrow {
    margin-bottom: 24px;

    color: var(--teal-light);
}


.partners-page-hero h1 {
    max-width: 980px;
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(58px, 6vw, 88px);

    line-height: .99;

    letter-spacing: -.045em;

    font-weight: 650;
}


.partners-page-hero h1 span {
    display: block;

    color: var(--teal-light);
}


.partners-page-hero > .container > p {
    max-width: 760px;

    margin: 32px 0 0;

    color: rgba(255,255,255,.74);

    font-size: 18px;

    line-height: 1.75;
}


.partners-page-hero .hero-actions {
    margin-top: 38px;
}


.partners-page-hero .button-secondary {
    color: #FFFFFF;

    border-color: rgba(255,255,255,.35);

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


.partners-page-hero .button-secondary:hover {
    border-color: rgba(255,255,255,.70);

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


/* elemento visual */

.partners-page-hero::after {
    content: "LINK";

    position: absolute;

    right: 4vw;
    bottom: -45px;

    color: rgba(255,255,255,.03);

    font-size: clamp(150px, 19vw, 300px);

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.07em;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .partners-page-hero {
        padding: 78px 0 88px;
    }


    .partners-page-hero h1 {
        font-size:
            clamp(46px, 12vw, 62px);
    }


    .partners-page-hero > .container > p {
        font-size: 16px;

        line-height: 1.65;
    }


    .partners-page-hero::after {
        right: -30px;
        bottom: -15px;

        font-size: 115px;
    }

}

/* =========================================================
   PÁGINA PARCEIROS - INTRODUÇÃO
   ========================================================= */

.partners-intro {
    padding: 105px 0 55px;
    background: #FFFFFF;
}


.partners-intro .eyebrow {
    margin-bottom: 18px;
}


.partners-intro h2 {
    max-width: 900px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.partners-intro p {
    max-width: 820px;

    margin: 24px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}



/* =========================================================
   PÁGINA PARCEIROS - TIPOS DE PARCERIA
   ========================================================= */

.partners-types {
    padding: 55px 0 120px;

    background: var(--soft);
}


.partners-types-heading {
    max-width: 860px;
    margin-bottom: 50px;
}


.partners-types-heading .eyebrow {
    margin-bottom: 18px;
}


.partners-types-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.partners-types-heading h2 span {
    display: block;

    color: var(--teal);
}


.partners-types-grid {
    display: grid;

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

    gap: 22px;
}


.partner-type-card {
    min-height: 320px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: #FFFFFF;

    box-shadow:
        0 12px 36px
        rgba(11,29,58,.045);
}


.partner-type-number {
    display: inline-flex;

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

    width: 44px;
    height: 44px;

    margin-bottom: 34px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.partner-type-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 24px;
    line-height: 1.2;
}


.partner-type-card > p {
    margin: 0;

    color: var(--muted);

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


.partner-type-meta {
    margin-top: auto;

    padding-top: 28px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 650;

    line-height: 1.5;
}


/* último card */

.partner-type-card-dark {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}


.partner-type-card-dark
.partner-type-number {
    background:
        rgba(66,208,188,.14);

    color:
        var(--teal-light);
}


.partner-type-card-dark h3 {
    color: #FFFFFF;
}


.partner-type-card-dark > p {
    color:
        rgba(255,255,255,.68);
}


.partner-type-card-dark
.partner-type-meta {
    color:
        var(--teal-light);
}


/* MOBILE */

@media (max-width: 820px) {

    .partners-intro {
        padding: 80px 0 45px;
    }


    .partners-intro h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .partners-types {
        padding: 45px 0 90px;
    }


    .partners-types-heading h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .partners-types-grid {
        grid-template-columns: 1fr;
    }


    .partner-type-card {
        min-height: auto;

        padding: 28px;
    }


    .partner-type-meta {
        margin-top: 25px;

        padding-top: 0;
    }

}

/* =========================================================
   PÁGINA PARCEIROS - MODELO DE COLABORAÇÃO
   ========================================================= */

.partners-model {
    padding: 110px 0 120px;

    background: #FFFFFF;
}


.partners-model-layout {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 90px;

    align-items: start;
}


.partners-model .eyebrow {
    margin-bottom: 18px;

    color: var(--teal);
}


.partners-model h2 {
    max-width: 560px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.3vw, 60px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.partners-model-steps {
    display: flex;
    flex-direction: column;
}


.partners-model-step {
    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 24px;

    padding: 28px 0;

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


.partners-model-step:first-child {
    padding-top: 5px;
}


.partners-model-step:last-child {
    border-bottom: 0;
}


.partners-model-step > span {
    display: flex;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.partners-model-step strong {
    display: block;

    margin-bottom: 8px;

    color: var(--navy);

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


.partners-model-step p {
    max-width: 520px;

    margin: 0;

    color: var(--muted);

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



/* =========================================================
   PÁGINA PARCEIROS - CONTACTO FINAL
   ========================================================= */

.partners-contact {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(0,168,143,.22) 0%,
            rgba(0,168,143,0) 36%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 58%,
            var(--navy-2) 100%
        );
}


.partners-contact::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.partners-contact .container {
    position: relative;
    z-index: 2;
}


.partners-contact-copy {
    max-width: 920px;
}


.partners-contact .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.partners-contact h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.partners-contact h2 span {
    display: block;

    color: var(--teal-light);
}


.partners-contact p {
    max-width: 700px;

    margin: 28px 0 32px;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}


.partners-contact .button-primary {
    display: inline-flex;
}


/* MOBILE */

@media (max-width: 820px) {

    .partners-model {
        padding: 80px 0 90px;
    }


    .partners-model-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .partners-model h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .partners-model-step {
        grid-template-columns:
            50px 1fr;

        gap: 18px;
    }


    .partners-contact {
        padding: 80px 0 85px;
    }


    .partners-contact h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .partners-contact p {
        font-size: 16px;
    }

}

/* =========================================================
   PÁGINA FAQS - HERO
   ========================================================= */

.faqs-page-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(66,208,188,.20) 0%,
            rgba(66,208,188,.06) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FA 58%,
            #EDF8F6 100%
        );
}


.faqs-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 20%,
            #000 100%
        );
}


.faqs-page-hero .container {
    position: relative;
    z-index: 2;
}


.faqs-page-hero .eyebrow {
    margin-bottom: 24px;
    color: var(--teal);
}


.faqs-page-hero h1 {
    max-width: 930px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(58px, 6vw, 88px);
    line-height: .99;
    letter-spacing: -.045em;
    font-weight: 650;
}


.faqs-page-hero h1 span {
    display: block;
    color: var(--teal);
}


.faqs-page-hero > .container > p {
    max-width: 720px;
    margin: 32px 0 0;

    color: var(--text);

    font-size: 18px;
    line-height: 1.75;
}


.faqs-page-hero .hero-actions {
    margin-top: 38px;
}


/* detalhe visual */

.faqs-page-hero::after {
    content: "?";

    position: absolute;

    right: 8vw;
    bottom: -85px;

    color: rgba(11,29,58,.035);

    font-size: clamp(240px, 30vw, 470px);
    line-height: 1;
    font-weight: 750;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 820px) {

    .faqs-page-hero {
        padding: 78px 0 88px;
    }


    .faqs-page-hero h1 {
        font-size:
            clamp(46px, 12vw, 62px);
    }


    .faqs-page-hero > .container > p {
        font-size: 16px;
        line-height: 1.65;
    }


    .faqs-page-hero::after {
        right: -10px;
        bottom: -40px;

        font-size: 190px;
    }

}

/* =========================================================
   PÁGINA FAQS - INTRODUÇÃO
   ========================================================= */

.faqs-intro {
    padding: 105px 0 55px;
    background: #FFFFFF;
}


.faqs-intro .eyebrow {
    margin-bottom: 18px;
}


.faqs-intro h2 {
    max-width: 820px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.7vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.faqs-intro p {
    max-width: 780px;
    margin: 25px 0 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   PÁGINA FAQS - LISTA
   ========================================================= */

.faqs-list {
    padding: 45px 0 120px;
    background: var(--soft);
}


.faqs-layout {
    display: grid;

    grid-template-columns:
        280px 1fr;

    gap: 70px;

    padding: 58px 0;

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


.faqs-layout:first-child {
    padding-top: 0;
}


.faqs-layout:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}


/* categoria */

.faqs-category {
    display: flex;

    align-items: flex-start;

    gap: 20px;
}


.faqs-category > span {
    display: flex;

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

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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

    letter-spacing: .08em;
}


.faqs-category strong {
    display: block;

    margin: 4px 0 8px;

    color: var(--navy);

    font-size: 20px;
}


.faqs-category p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.6;
}


/* perguntas */

.faqs-items {
    border-top: 1px solid var(--line);
}


.faq-item {
    border-bottom: 1px solid var(--line);

    background: transparent;
}


.faq-item summary {
    position: relative;

    padding:
        25px
        58px
        25px
        0;

    list-style: none;

    cursor: pointer;

    color: var(--navy);

    font-size: 17px;
    font-weight: 650;

    line-height: 1.45;
}


/* retirar marcador nativo */

.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::marker {
    display: none;
    content: "";
}


/* símbolo + */

.faq-item summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 6px;

    transform:
        translateY(-50%);

    display: flex;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

    font-size: 22px;
    font-weight: 400;

    line-height: 1;
}


/* símbolo - quando aberto */

.faq-item[open] summary::after {
    content: "−";

    background: var(--teal);

    color: #FFFFFF;
}


/* resposta */

.faq-answer {
    padding:
        0
        60px
        28px
        0;
}


.faq-answer p {
    max-width: 760px;

    margin: 0;

    color: var(--text);

    font-size: 15px;
    line-height: 1.75;
}


.faq-item[open] summary {
    color: var(--teal);
}


/* interação */

@media (hover: hover) {

    .faq-item summary:hover {
        color: var(--teal);
    }

}


/* MOBILE */

@media (max-width: 820px) {

    .faqs-intro {
        padding: 80px 0 45px;
    }


    .faqs-intro h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .faqs-list {
        padding: 35px 0 90px;
    }


    .faqs-layout {
        grid-template-columns: 1fr;

        gap: 32px;

        padding: 45px 0;
    }


    .faqs-category {
        max-width: 320px;
    }


    .faq-item summary {
        padding:
            22px
            52px
            22px
            0;

        font-size: 16px;
    }


    .faq-answer {
        padding:
            0
            50px
            24px
            0;
    }

}

/* =========================================================
   PÁGINA FAQS - CONTACTO FINAL
   ========================================================= */

.faqs-contact {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(0,168,143,.22) 0%,
            rgba(0,168,143,0) 36%
        ),
        linear-gradient(
            135deg,
            var(--navy-3) 0%,
            var(--navy) 58%,
            var(--navy-2) 100%
        );
}


.faqs-contact::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.faqs-contact .container {
    position: relative;
    z-index: 2;
}


.faqs-contact-copy {
    max-width: 900px;
}


.faqs-contact .eyebrow {
    margin-bottom: 20px;

    color: var(--teal-light);
}


.faqs-contact h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -.04em;
}


.faqs-contact h2 span {
    display: block;

    color: var(--teal-light);
}


.faqs-contact p {
    max-width: 650px;

    margin: 28px 0 32px;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    line-height: 1.75;
}


.faqs-contact .button-primary {
    display: inline-flex;
}


/* MOBILE */

@media (max-width: 820px) {

    .faqs-contact {
        padding: 80px 0 85px;
    }


    .faqs-contact h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .faqs-contact p {
        font-size: 16px;
    }

}

/* =========================================================
   HOME - EMPRESAS QUE UTILIZAM O SIRNOV
   ========================================================= */

.client-marquee {
    position: relative;

    overflow: hidden;

    padding: 34px 0 38px;

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

    background: #FFFFFF;
}


.client-marquee-heading {
    margin-bottom: 28px;

    text-align: center;
}


.client-marquee-heading span {
    color: var(--muted);

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

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* janela da animação */

.client-marquee-window {
    position: relative;

    width: 100%;

    overflow: hidden;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%
        );
}


/* trilho */

.client-marquee-track {
    display: flex;

    width: max-content;

    animation:
        sirnov-client-marquee
        22s
        linear
        infinite;
}


/* cada grupo é exatamente repetido */

.client-marquee-group {
    display: flex;

    align-items: center;

    gap: 90px;

    padding-right: 90px;

    flex-shrink: 0;
}


/* área de cada logótipo */

.client-logo {
    width: 240px;
    height: 74px;

    display: flex;

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

    flex-shrink: 0;
}


.client-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 210px;
    max-height: 62px;

    object-fit: contain;

    opacity: .82;

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


@media (hover: hover) {

    .client-logo img:hover {
        opacity: 1;

        transform:
            scale(1.035);
    }


    .client-marquee-window:hover
    .client-marquee-track {
        animation-play-state: paused;
    }

}


/* movimento contínuo */

@keyframes sirnov-client-marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


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

@media (max-width: 820px) {

    .client-marquee {
        padding:
            30px 0 34px;
    }


    .client-marquee-heading {
        margin-bottom: 24px;
    }


    .client-marquee-heading span {
        font-size: 10px;

        letter-spacing: .10em;
    }


    .client-marquee-group {
        gap: 48px;

        padding-right: 48px;
    }


    .client-logo {
        width: 180px;
        height: 64px;
    }


    .client-logo img {
        max-width: 160px;
        max-height: 54px;
    }


    .client-marquee-track {
        animation-duration: 18s;
    }

}


/* =========================================================
   ACESSIBILIDADE - REDUZIR MOVIMENTO
   ========================================================= */

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

    .client-marquee-track {
        animation: none;
    }


    .client-marquee-group[aria-hidden="true"] {
        display: none;
    }


    .client-marquee-track {
        width: 100%;

        justify-content: center;
    }


    .client-marquee-group {
        flex-wrap: wrap;

        justify-content: center;

        padding-right: 0;
    }

}

/* =========================================================
   HOME - EQUILÍBRIO DOS LOGÓTIPOS DE CLIENTES
   ========================================================= */

/* Rinawell */
.client-marquee-group
.client-logo:nth-child(1) img {
    max-width: 175px;
    max-height: 58px;
}


/* MISE */
.client-marquee-group
.client-logo:nth-child(2) img {
    max-width: 170px;
    max-height: 56px;
}


/* Netservice */
.client-marquee-group
.client-logo:nth-child(3) img {
    max-width: 185px;
    max-height: 54px;
}


/* MOBILE */

@media (max-width: 820px) {

    .client-marquee-group
    .client-logo:nth-child(1) img {
        max-width: 145px;
        max-height: 50px;
    }


    .client-marquee-group
    .client-logo:nth-child(2) img {
        max-width: 140px;
        max-height: 48px;
    }


    .client-marquee-group
    .client-logo:nth-child(3) img {
        max-width: 155px;
        max-height: 47px;
    }

}

/* =========================================================
   PÁGINA DEMONSTRAÇÃO - HERO
   ========================================================= */

.demo-page-hero {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(66,208,188,.20) 0%,
            rgba(66,208,188,.06) 28%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FA 58%,
            #EDF8F6 100%
        );
}


.demo-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11,29,58,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,29,58,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


.demo-page-hero .container {
    position: relative;
    z-index: 2;
}


.demo-page-hero .eyebrow {
    margin-bottom: 24px;
    color: var(--teal);
}


.demo-page-hero h1 {
    max-width: 950px;
    margin: 0;

    color: var(--navy);

    font-size: clamp(56px, 5.8vw, 84px);
    line-height: .99;
    letter-spacing: -.045em;
    font-weight: 650;
}


.demo-page-hero h1 span {
    display: block;
    color: var(--teal);
}


.demo-page-hero p {
    max-width: 760px;

    margin: 30px 0 0;

    color: var(--text);

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   PÁGINA DEMONSTRAÇÃO - FORMULÁRIO
   ========================================================= */

.demo-form-section {
    padding: 110px 0 125px;
    background: var(--soft);
}


.demo-form-layout {
    display: grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap: 75px;

    align-items: start;
}


/* COLUNA DE APRESENTAÇÃO */

.demo-form-copy {
    position: sticky;
    top: 110px;
}


.demo-form-copy .eyebrow {
    margin-bottom: 18px;
}


.demo-form-copy h2 {
    max-width: 520px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(42px, 4.2vw, 58px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


.demo-form-copy > p {
    max-width: 520px;

    margin: 25px 0 0;

    color: var(--text);

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


/* BENEFÍCIOS */

.demo-benefits {
    margin-top: 42px;

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


.demo-benefits > div {
    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 18px;

    align-items: center;

    padding: 20px 0;

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


.demo-benefits span {
    display: flex;

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

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background:
        rgba(0,168,143,.10);

    color: var(--teal);

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


.demo-benefits p {
    margin: 0;

    color: var(--navy);

    font-size: 14px;
    line-height: 1.55;

    font-weight: 600;
}


/* CARD DO FORMULÁRIO */

.demo-form-card {
    padding: 42px;

    border: 1px solid var(--line);
    border-radius: 24px;

    background: #FFFFFF;

    box-shadow:
        0 22px 60px
        rgba(11,29,58,.08);
}


/* =========================================================
   FORMULÁRIO SIRNOV
   ========================================================= */

.sirnov-form {
    width: 100%;
}


.form-row {
    display: grid;

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

    gap: 20px;
}


.form-field {
    margin-bottom: 22px;
}


.form-field label {
    display: block;

    margin-bottom: 9px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 650;
}


.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    min-height: 50px;

    padding: 13px 15px;

    border: 1px solid #D8E0E8;
    border-radius: 10px;

    outline: none;

    background: #FFFFFF;

    color: var(--navy);

    font: inherit;
    font-size: 15px;

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


.form-field textarea {
    min-height: 135px;

    resize: vertical;

    line-height: 1.6;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #98A2B1;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px
        rgba(0,168,143,.10);

    background: #FFFFFF;
}


/* HONEYPOT - EXISTE MAS NÃO APARECE */

.sirnov-honeypot {
    position: absolute !important;

    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* CONSENTIMENTO */

.form-consent {
    margin-top: 5px;

    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--soft);
}


.form-consent label {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;
}


.form-consent input {
    width: 18px;
    height: 18px;

    margin-top: 2px;

    flex-shrink: 0;

    accent-color: var(--teal);
}


.form-consent span {
    color: var(--text);

    font-size: 13px;
    line-height: 1.6;
}


/* SUBMISSÃO */

.form-submit {
    margin-top: 24px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.form-submit .button {
    min-height: 52px;

    padding-left: 24px;
    padding-right: 24px;

    border: 0;

    cursor: pointer;

    font-family: inherit;
}


.form-submit small {
    color: var(--muted);

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


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

@media (max-width: 820px) {

    .demo-page-hero {
        padding: 78px 0 85px;
    }


    .demo-page-hero h1 {
        font-size:
            clamp(46px, 12vw, 62px);
    }


    .demo-page-hero p {
        font-size: 16px;
    }


    .demo-form-section {
        padding: 80px 0 90px;
    }


    .demo-form-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .demo-form-copy {
        position: static;
    }


    .demo-form-copy h2 {
        font-size:
            clamp(38px, 10vw, 50px);
    }


    .demo-form-card {
        padding: 26px 20px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .form-submit .button {
        width: 100%;
    }

}

/* =========================================================
   FORMULÁRIO SIRNOV - MENSAGENS
   ========================================================= */

.form-alert {
    margin-bottom: 28px;
    padding: 18px 20px;

    border-radius: 12px;

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


.form-alert strong {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;
}


.form-alert p {
    margin: 0;
}


/* SUCESSO */

.form-alert-success {
    border: 1px solid rgba(0,168,143,.25);

    background: rgba(0,168,143,.08);

    color: var(--navy);
}


.form-alert-success strong {
    color: var(--teal);
}


/* ERRO */

.form-alert-error {
    border: 1px solid rgba(184,55,55,.20);

    background: rgba(184,55,55,.06);

    color: #6F2B2B;
}


.form-alert-error strong {
    color: #9B3030;
}

/* =========================================================
   SIRNOV — POLÍTICA DE PRIVACIDADE
   ========================================================= */

.privacy-page {
    background: var(--white);
    color: var(--text);
}


/* HERO */

.privacy-hero {
    position: relative;
    overflow: hidden;
    padding: 112px 0 92px;
    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}

.privacy-hero::after {
    content: "PRIVACIDADE";
    position: absolute;
    right: -25px;
    bottom: -28px;
    font-size: clamp(74px, 10vw, 160px);
    font-weight: 700;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.035);
    pointer-events: none;
    white-space: nowrap;
}

.privacy-container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );
    margin: 0 auto;
}

.privacy-hero .privacy-container {
    position: relative;
    z-index: 1;
}

.privacy-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--teal-light);
}

.privacy-hero h1 {
    max-width: 800px;
    margin: 0 0 24px;
    font-size: clamp(44px, 5.6vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--white);
}

.privacy-hero p {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.76);
}

.privacy-updated {
    display: inline-flex;
    margin-top: 32px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.04);
}


/* CONTEÚDO */

.privacy-content {
    padding: 86px 0 110px;
    background: var(--soft);
}

.privacy-layout {
    display: flex;
    justify-content: center;
}

.privacy-article {
    width: 100%;
    max-width: 900px;
    padding: 58px 66px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow:
        0 18px 50px rgba(11, 29, 58, 0.06);
}

.privacy-article > section {
    padding: 0 0 42px;
    margin: 0 0 42px;
    border-bottom: 1px solid var(--line);
}

.privacy-article > section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.privacy-article h2 {
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--navy);
}

.privacy-article p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--text);
}

.privacy-article p:last-child {
    margin-bottom: 0;
}

.privacy-article ul {
    margin: 8px 0 20px;
    padding: 0;
    list-style: none;
}

.privacy-article li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 25px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

.privacy-article li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

.privacy-article strong {
    color: var(--navy);
}

.privacy-article a {
    color: var(--teal);
    text-decoration: none;
}

.privacy-article a:hover {
    text-decoration: underline;
}


/* CONTACTO */

.privacy-contact {
    margin-top: 22px !important;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--soft);
}


/* NOTA REGULATÓRIA */

.privacy-article .privacy-regulatory-note {
    padding: 30px;
    border: 1px solid rgba(0, 168, 143, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(0, 168, 143, 0.06),
            rgba(66, 208, 188, 0.025)
        );
}

.privacy-regulatory-note h2 {
    color: var(--navy);
}

.privacy-regulatory-note p {
    color: var(--text);
}


/* RESPONSIVO */

@media (max-width: 768px) {

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

    .privacy-hero {
        padding: 82px 0 70px;
    }

    .privacy-hero h1 {
        font-size: clamp(40px, 12vw, 56px);
    }

    .privacy-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .privacy-content {
        padding: 52px 0 72px;
    }

    .privacy-article {
        padding: 34px 24px;
        border-radius: 14px;
    }

    .privacy-article > section {
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    .privacy-article h2 {
        font-size: 22px;
    }

    .privacy-article p,
    .privacy-article li {
        font-size: 15px;
    }

    .privacy-article .privacy-regulatory-note {
        padding: 22px;
    }

    .privacy-hero::after {
        font-size: 76px;
        right: -10px;
        bottom: -10px;
    }
}

/* =========================================================
   DEMONSTRAÇÃO — CONSENTIMENTO
   ========================================================= */

.demo-consent-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-top: 28px;
    padding: 20px 22px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--soft);
}

.demo-consent-box input[type="checkbox"] {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin: 3px 0 0;

    accent-color: var(--teal);
    cursor: pointer;
}

.demo-consent-box label {
    display: block;

    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: var(--text);
    cursor: pointer;
}

.demo-consent-box label a {
    display: inline;

    font-weight: 600;
    color: var(--teal);

    text-decoration: none;
}

.demo-consent-box label a:hover {
    text-decoration: underline;
}


/* MOBILE */

@media (max-width: 768px) {

    .demo-consent-box {
        gap: 12px;
        padding: 18px;
    }

    .demo-consent-box label {
        font-size: 13px;
        line-height: 1.65;
    }

}

/* =========================================================
   SIRNOV — RECURSOS
   ========================================================= */

.resources-page {
    background: var(--white);
    color: var(--text);
}


/* CONTAINER */

.resources-container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );
    margin: 0 auto;
}


/* HERO */

.resources-hero {
    position: relative;
    overflow: hidden;
    padding: 112px 0 96px;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 100%
        );
}

.resources-hero::after {
    content: "RECURSOS";

    position: absolute;
    right: -25px;
    bottom: -34px;

    font-size: clamp(80px, 11vw, 170px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;

    color: rgba(255, 255, 255, 0.035);

    white-space: nowrap;
    pointer-events: none;
}

.resources-hero .resources-container {
    position: relative;
    z-index: 1;
}

.resources-eyebrow {
    display: inline-block;
    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: var(--teal-light);
}

.resources-hero h1 {
    max-width: 850px;

    margin: 0 0 24px;

    font-size: clamp(44px, 5.4vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.045em;

    color: var(--white);
}

.resources-hero p {
    max-width: 760px;
    margin: 0;

    font-size: 18px;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.76);
}


/* CONTEÚDO */

.resources-content {
    padding: 96px 0 108px;
    background: var(--soft);
}

.resources-heading {
    max-width: 720px;
    margin-bottom: 52px;
}

.resources-heading > span {
    display: inline-block;
    margin-bottom: 14px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;

    color: var(--teal);
}

.resources-heading h2 {
    margin: 0 0 18px;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: var(--navy);
}

.resources-heading p {
    margin: 0;

    font-size: 17px;
    line-height: 1.75;

    color: var(--text);
}


/* GRID */

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* CARD */

.resource-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 330px;
    padding: 30px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--white);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.resource-card:hover {
    transform: translateY(-4px);

    border-color: rgba(0, 168, 143, 0.25);

    box-shadow:
        0 18px 42px rgba(11, 29, 58, 0.08);
}

.resource-number {
    margin-bottom: 40px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;

    color: var(--teal);
}

.resource-card h3 {
    margin: 0 0 16px;

    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -0.025em;

    color: var(--navy);
}

.resource-card p {
    margin: 0 0 26px;

    font-size: 15px;
    line-height: 1.75;

    color: var(--text);
}

.resource-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: auto;

    font-size: 14px;
    font-weight: 700;

    color: var(--teal);
    text-decoration: none;
}

.resource-link span {
    transition: transform 0.2s ease;
}

.resource-link:hover span {
    transform: translateX(4px);
}


/* ESTADO EM PREPARAÇÃO */

.resource-card-pending {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fafb 100%
        );
}

.resource-status {
    position: absolute;
    top: 27px;
    right: 26px;

    padding: 6px 9px;

    border: 1px solid var(--line);
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;

    color: var(--muted);
    background: var(--soft);
}


/* BLOCO ESCURO */

.resources-guidance {
    padding: 82px 0;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-3) 100%
        );
}

.resources-guidance-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.resources-guidance-eyebrow {
    display: inline-block;
    margin-bottom: 14px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;

    color: var(--teal-light);
}

.resources-guidance h2 {
    max-width: 540px;
    margin: 0;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: var(--white);
}

.resources-guidance p {
    max-width: 520px;
    margin: 0;

    font-size: 17px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.72);
}


/* CTA */

.resources-cta {
    padding: 92px 0;
    background: var(--white);
}

.resources-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.resources-cta-inner > div:first-child {
    max-width: 650px;
}

.resources-cta-inner > div:first-child > span {
    display: inline-block;
    margin-bottom: 14px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;

    color: var(--teal);
}

.resources-cta h2 {
    margin: 0 0 16px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: var(--navy);
}

.resources-cta p {
    margin: 0;

    font-size: 17px;
    line-height: 1.75;

    color: var(--text);
}

.resources-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    flex: 0 0 auto;
}


/* RESPONSIVO */

@media (max-width: 980px) {

    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .resources-guidance-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .resources-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 32px;
    }

}


@media (max-width: 640px) {

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

    .resources-hero {
        padding: 82px 0 70px;
    }

    .resources-hero h1 {
        font-size: clamp(40px, 12vw, 56px);
    }

    .resources-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .resources-hero::after {
        right: -10px;
        bottom: -10px;
        font-size: 74px;
    }

    .resources-content {
        padding: 62px 0 72px;
    }

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

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

    .resource-card {
        min-height: auto;
        padding: 26px 24px;
    }

    .resource-number {
        margin-bottom: 30px;
    }

    .resource-status {
        top: 23px;
        right: 22px;
    }

    .resources-guidance {
        padding: 64px 0;
    }

    .resources-guidance p {
        font-size: 16px;
    }

    .resources-cta {
        padding: 68px 0;
    }

    .resources-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .resources-cta-actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

}

/* =========================================================
   FOOTER — NORMALIZAÇÃO DESKTOP
   ========================================================= */

@media (min-width: 981px) {

    .site-footer .footer-main {
        display: grid;

        grid-template-columns:
            minmax(260px, 1.8fr)
            repeat(4, minmax(0, 1fr));

        gap: 48px;
        align-items: start;
    }

    .site-footer .footer-brand,
    .site-footer .footer-column {
        grid-column: auto;
        min-width: 0;
    }

}