:root {
    --paper: #f8fafa;
    --ink: #0d253f;
    --ink-2: #0d253f;
    --ink-3: #071a30;
    --navy: #2f3a5f;
    --blue: #1347f1;
    --blue-soft: #5277ee;
    --gold: #dd962a;
    --text: #292929;
    --text-on-ink: #eef1fb;
    --text-on-ink-soft: rgba(238, 241, 251, 0.62);
    --line: rgba(47, 58, 95, 0.12);
    --line-on-ink: rgba(238, 241, 251, 0.12);
    --shadow-soft: 0px 15px 40px rgba(16, 21, 43, 0.08);
    --ease: cubic-bezier(0.19, 1, 0.22, 1);

    --c1:#1347f1;
    --c2:#3299E8;
    --c3:#4B20B5;
    --c4:#9226C9;
    --c5:#B23DE0;
    --c6:#5630B8;
    --ink:#0d253f;
    --sub:#6b6b76;
    --capsule:#fbfbfd;
    --capsule-border:#eceaf3a1;

    /* Escala de espaçamento fluida — usada em TODA a aplicação para
       garantir que o espaçamento entre elementos é sempre consistente */
    --space-2xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-xs:  clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
    --space-sm:  clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
    --space-md:  clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
    --space-lg:  clamp(2rem, 1.5rem + 2vw, 3.5rem);
    --space-xl:  clamp(2.75rem, 1.9rem + 3.5vw, 5em);
    --space-2xl: clamp(3.5rem, 2.4rem + 4.5vw, 6em);

    /* Container: largura máxima + padding lateral fluido, sem
       percentagens fixas que variam de secção para secção */
    --container-max: 1320px;
    --container-pad: clamp(1.25rem, 1rem + 3vw, 5em);

    --section-py: clamp(3rem, 2.2rem + 3.5vw, 6em);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5em;
}

body {
    font-family: "Manrope", sans-serif;
    background: var(--paper);
    color: var(--text);
    overflow-x: hidden;
}

section { padding: var(--section-py) 0; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

nav {
    position: fixed; top: 0; z-index: 1000;
    /* background: rgba(248, 250, 250, 0.82); */
    /* backdrop-filter: blur(14px); */
    /* -webkit-backdrop-filter: blur(14px); */
    padding: 30px 2em;

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* box-shadow: 0 1px 0 var(--line); */
    transition: padding 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}

nav.scrolled {
    padding: 20px 8em;
    /* background: rgba(248, 250, 250, 0.94); */
    /* box-shadow: 0 10px 30px rgba(16, 21, 43, 0.08); */
}

.brand img {
    transition: transform 0.4s var(--ease);
}

.brand:hover img { transform: translateY(-1px); }

.nav-right {
    display: flex;
    align-items: center;
    gap: 2.4em;
}

.navlinks {
    display: flex;
    gap: 1.5em;
    background-color: #1347f1;
    padding: 20px 50px;
    border-radius: 50px;
}

.navlinks li {
    list-style: none;
}

.navlinks a {
    position: relative;    
    color: var(--paper);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    padding-bottom: 6px;
    transition: color 0.3s ease;
}

.navlinks a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0%;
    height: 2px;
    background: #10152b;
    transition: width 0.35s var(--ease);
}

.navlinks a:hover,
.navlinks a.active {
    color: #10152b;
}

.navlinks a:hover::after,
.navlinks a.active::after {
    width: 100%;
}

.nav-cta {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navlinks li.has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--paper);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    padding-bottom: 6px;
    position: relative;
    transition: color 0.3s ease;
}

.dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0%;
    height: 2px;
    background: #10152b;
    transition: width 0.35s var(--ease);
}

.dropdown-toggle:hover,
.has-dropdown.open .dropdown-toggle {
    color: #10152b;
}

.dropdown-toggle:hover::after,
.has-dropdown.open .dropdown-toggle::after {
    width: 100%;
}

.dropdown-caret {
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
}

.has-dropdown.open .dropdown-caret,
.has-dropdown:hover .dropdown-caret {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 0.5em;
    min-width: 230px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    z-index: 1100;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
    display: block;
    width: 400px;
    padding: 1em 1.5em;
    border-radius: 5px;
    text-decoration: none;
    color: var(--navy);
    transition: background 0.25s ease, color 0.25s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: rgba(19, 71, 241, 0.08);
    color: var(--blue);
}

.dropdown-menu .dd-title {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
}

.dropdown-menu .dd-desc {
    display: block;
    font-size: 0.74rem;
    font-weight: 400;
    color: #7a8296;
    margin-top: 2px;
}

.navtoggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.navtoggle .bar {
    display: block;
    width: 100%;
    height: 5px;
    background: var(--blue);
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s ease;
}

.navtoggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle.open .bar:nth-child(2) { opacity: 0; }
.navtoggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* _____________HERO________________ */

.hero {
    position: relative;
    min-height: 100vh;
    padding-top: clamp(6rem, 4.5rem + 6vw, 9rem);
    padding-bottom: var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    overflow: hidden;
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    background-image: url("/assets/images/herobg02.jpg");

    animation: heroSlide 18s infinite;
    transform: scale(1.03);
}

/* Overlay para manter o texto legível */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* Animação */
@keyframes heroSlide {
    0%,
    35% {
        background-image: url("/assets/images/herobg02.jpg");
    }

    35%,
    70% {
        background-image: url("/assets/images/bridgebg.jpg");
    }

    70%,
    100% {
        background-image: url("/assets/images/herobg03.jpg");
    }
}

.hero-inner {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    margin-left: 10rem;
    margin-right: auto;
    gap: 20px;

    padding: 80px 50px;
    border-radius: 50px;
}

.wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
    gap: var(--space-sm);
    margin-inline: auto;
}

.hero .eyebrow,
.hero h1,
.hero p {
    width: 100%;
    max-width: 40em;
}

h1 {
    color: #2f3a5f;
    font-weight: 400;
    font-size: clamp(1.4rem, 1.39rem + 3.5vw, 4rem);
    line-height: 1.15;
}

h2 {
    color: #2f3a5f;
    font-weight: 600;
    font-size: clamp(1.4rem, 1.15rem + 2.2vw, 2.5em);
}

.hero p {
    font-size: 1.4rem;
    color: #fff;
}

.sSize {
    font-size: 3rem;
    color: #fff;
}

.xSize {
    font-size: 5rem;
    color: #fff;
}

.sColor {
    color: #1347f1;
    font-weight: 800;
}

.lede {
    font-size: .9em;
    letter-spacing: .5px;
}

.hero-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-lg);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.hero-cta .btn {
    background-color: #fff;
    padding: 10px;
    color: #1347f1;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.158);
}

.hero-cta .ghost {
    background-color: #1347f1;
    color: #fff;
}

.btn:hover {
    background-color: #1347f1;
    box-shadow: 0px 15px 20px #1347f12c;
    color: #fff;
    transform: translateY(-2px);
    transition: all 0.6s ease;
}

.btn:active {
    transform: translateY(-1px);
}

/* From Uiverse.io by reshades */ 
.button {
    width: 10em;
    height: 3em;
    background-color: #ffffff00;
    color: #3654ff;
    border: #3654ff 0.2em solid;
    border-radius: 11px;
    text-align: center;
    transition: all 0.6s ease;
}

.button:hover {
    background-color: #3654ff;
    color: #fff;
    cursor: pointer;
}

.text,
p {
    font-size: 1.2em;
}

.card {
    border-radius: 10px;
    background: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.11) 5px 5px 5px, rgba(0, 0, 0, 0.034) 10px 1px 53px 3px, rgba(1, 0, 0, 0.096) 0px -1px 3px inset;
    padding: var(--space-md);
    width: 100%;
    min-height: 200px;
    cursor: pointer;
    transition: all 0.6s ease;
    color: #292929;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    gap: var(--space-xs);
}

.card:hover {
    transform: scale(1.021);
}

.card:active {
    transform: scale(0.95) rotateZ(1.1deg);
}

.num {
    font-size: 2em;
    font-weight: 600;
    color: #1347f1;;
}
/* _____________HERO________________ */

/* _____________SOBRE________________ */

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: #292929;
    display: inline-block;
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-lg);
    align-items: center;
}

.about-media {
    position: relative;
}

.about-media img {
    width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.prv-img {
    flex: 1 1 42%;
}

.prv-img img {
    width: 85%;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.about-stat {
    position: absolute;
    left: 28px;
    bottom: -28px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
    color: var(--text-on-ink);
    border-radius: 14px;
    padding: 1.3em 1.5em;
    min-width: 160px;
    box-shadow: 0 25px 45px rgba(16, 21, 43, 0.28);
}

.about-stat-num {
    display: block;
    font-size: 2.1em;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.about-stat-label {
    display: block;
    font-size: 0.76em;
    color: var(--text-on-ink-soft);
    margin-top: 0.5em;
    line-height: 1.45;
}

.about-copy {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
}

.about-copy p {
    max-width: 50ch;
    line-height: 1.65;
    color: var(--text);
}

.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    width: fit-content;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.9em 1.5em;
    border-radius: 10px;
    box-shadow: 0 18px 30px rgba(19, 71, 241, 0.22);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.about-cta span { transition: transform 0.3s var(--ease); }

.about-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(19, 71, 241, 0.3);
}

.about-cta:hover span { transform: translateX(4px); }

.value-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: rgba(47, 58, 95, 0.035);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: var(--space-md);
    margin-top: var(--space-xl);
    gap: var(--space-md);
}

.value-col {
    padding: 0 var(--space-sm);
    border-left: 1px solid var(--line);
}

.value-col:first-child {
    padding-left: 0;
    border-left: none;
}

.value-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(19, 71, 241, 0.1);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}

.value-icon--gold { background: rgba(198, 154, 86, 0.16); color: var(--gold); }
.value-icon--navy { background: rgba(47, 58, 95, 0.1); color: var(--navy); }

.value-col h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.5em;
}

.value-col p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #55607e;
    text-align: left;
    hyphens: none;
}

p {
    text-align: justify;
    hyphens: auto;
    text-justify: inter-word;
}

/* _____________SOBRE________________ */

/* _____________HERO — refinamentos________________ */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 21, 43, 0.116) 0%, rgba(16, 21, 43, 0.144) 100%);
    pointer-events: none;
}

.hero .wrap { z-index: 2; }

.hero .eyebrow { color: var(--gold); }
.hero .eyebrow::before { background: var(--gold); }

/* _____________SECTION TITLES / EYEBROWS________________ */

.section-title {
    max-width: 46ch;
    line-height: 1.2;
    margin-bottom: 1.4rem;
}

.eyebrow { margin-bottom: 0.8rem; }

/* _____________SCROLL REVEAL________________ */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.areas-grid .area-card.reveal:nth-child(2),
.proj-grid .proj-card.reveal:nth-child(2),
.value-panel .value-col.reveal:nth-child(2),
.lead-grid .lead-card.reveal:nth-child(2),
.ledger-list .ledger-row.reveal:nth-child(2) { transition-delay: 0.08s; }

.areas-grid .area-card.reveal:nth-child(3),
.proj-grid .proj-card.reveal:nth-child(3),
.ledger-list .ledger-row.reveal:nth-child(3) { transition-delay: 0.16s; }

.areas-grid .area-card.reveal:nth-child(4),
.proj-grid .proj-card.reveal:nth-child(4),
.ledger-list .ledger-row.reveal:nth-child(4) { transition-delay: 0.24s; }

.areas-grid .area-card.reveal:nth-child(5),
.proj-grid .proj-card.reveal:nth-child(5),
.ledger-list .ledger-row.reveal:nth-child(5) { transition-delay: 0.32s; }

.areas-grid .area-card.reveal:nth-child(6) { transition-delay: 0.4s; }

/* _____________ON-INK SECTIONS________________ */

.prv-grp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.prv-grp .prv-txt h2 {
    margin-top: 50px
}

.prv-txt {
    flex: 1 1 54%;
}

.prv-txt p { color: var(--text-on-ink-soft); }

section.on-ink {
    background-color: var(--ink);
    color: var(--text-on-ink);
    position: relative;
    padding-bottom: 5em;
}

section.on-ink .eyebrow { color: var(--gold); }
section.on-ink .eyebrow::before { background: var(--gold); }
section.on-ink h2,
section.on-ink p { color: var(--text-on-ink); }
section.on-ink p { color: var(--text-on-ink-soft); }

/* _____________ÁREAS DE ATUAÇÃO________________ */

.areas-grid {
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: auto;
}

.area-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line-on-ink);
    border-radius: 14px;
    padding: var(--space-md);
    transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}

.area-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(82, 119, 238, 0.45);
}

.area-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(82, 119, 238, 0.16);
    color: var(--blue-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4em;
}

.area-card h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-on-ink);
    margin-bottom: 0.7em;
    line-height: 1.35;
}

.area-card p {
    font-size: 1.2em;
    line-height: 1.55;
    color: var(--text-on-ink-soft);
    text-align: left;
    hyphens: none;
}

/* _____________VALOR ACRESCENTADO________________ */

#valor{
    position:relative;
    display:flex;
    align-items:stretch;
    margin-bottom:14px;
}
.section.right{ justify-content:flex-end; }
.section.left{ justify-content:flex-start; }

.rule{
    height:2px;
    width:130px;
    margin-bottom:10px;
}
.section.right .rule-wrap{ display:flex; justify-content:flex-end; }
.section.left .rule-wrap{ display:flex; justify-content:flex-start; }

.dots{
    display:flex;
    gap:7px;
    margin-top:10px;
    margin-bottom:34px;
}
.dots span{
    width:4px;height:4px;border-radius:50%;
}
.section.right .dots-wrap{ display:flex; justify-content:flex-end; }
.section.left .dots-wrap{ display:flex; justify-content:flex-start; }

.row{
    display:flex;
    align-items:center;
    filter:drop-shadow(0 18px 26px rgba(40,20,80,0.12));
}
.row.reverse{ flex-direction:row-reverse; }

.tab{
    width:150px;
    min-width:150px;
    height:112px;
    border-radius: 35px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size: 2em;
    font-weight:700;
    letter-spacing:0.5px;
    position:relative;
    z-index:1;
}
.row:not(.reverse) .tab{ margin-left:-46px; justify-content:flex-end; padding-right:26px; }
.row.reverse .tab{ margin-right:-46px; justify-content:flex-start; padding-left:26px; }

.capsule{
    width:80%;
    min-height:112px;
    background:var(--capsule);
    border:1px solid var(--capsule-border);
    border-radius:56px;
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px 34px;
    position:relative;
    z-index:2;
    margin: 20px 0;
}

.icon{
    width:40px;
    height:40px;
    min-width:40px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.icon svg{ width:32px; height:32px; }

.text-block h3{
    font-size: 1.2em;
    font-weight:700;
    letter-spacing:0.6px;
    margin-bottom:6px;
}
.text-block p{
    font-size: 1em;
    line-height:1.5;
    color:var(--sub);
    font-weight:400;
}

/* _____________PROJETOS________________ */

#projetos .wrap {
    padding-bottom: 0;
}

.proj-grid {
    max-width: var(--container-max);
    margin: var(--space-lg) auto 0;
    padding-inline: var(--container-pad);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.proj-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line-on-ink);
    border-radius: 14px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}

.proj-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(198, 154, 86, 0.4);
}

.proj-card .stat {
    font-size: 2.1em;
    font-weight: 700;
    color: var(--blue-soft);
}

.proj-card .stat-label {
    font-size: 1em;
    color: var(--text-on-ink-soft);
    margin-bottom: 0.6em;
}

.proj-card .partner {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}

.proj-card h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-on-ink);
    line-height: 1.35;
    margin: 0.3em 0 0.4em;
}

.proj-card .desc {
    font-size: 1.2em;
    line-height: 1.55;
    color: var(--text-on-ink-soft);
    text-align: left;
    hyphens: none;
}

/* _____________LIDERANÇA________________ */

.lead-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.lead-card {
    background: #fff;
    border-radius: 14px;
    padding: var(--space-md);
    box-shadow: var(--shadow-soft);
}

#about-cards {    
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avatar {
    width: 200px;
    height: 200px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1.1em;
    /* box-shadow: var(--shadow-soft); */
    
}

.avatar img {
    border-radius: 50%;    
    border: 1px solid #00000009;
}

.novo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-bottom: 1.2em;
}

.novo h4, .novo .title {
    font-size: 3em;
    font-weight: 600;
    color: var(--capsule);
}

.lead-card h3 {
    font-size: 2em;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.25em;
}

.lead-card .role {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1em;
}

.lead-card > p {
    font-size: 1.2em;
    line-height: 1.6;
    color: var(--text);
}

.lead-extra {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease);
}

.lead-extra p {
    overflow: hidden;
    font-size: 1.2em;
    line-height: 1.6;
}

.lead-extra.open {
    grid-template-rows: 1fr;
    margin-top: 1em;
}

.lead-more {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.1em;
    padding: 0;
    transition: opacity 0.3s ease;
}

.lead-more:hover { opacity: 0.7; }

/* _____________FALE CONNOSCO________________ */

.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-lg);
    align-items: start;
}

.contact-intro p { max-width: 46ch; }

.contact-info {
    list-style: none;
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 0.9em;
}

.contact-info a,
.contact-info span:last-child {
    color: var(--text-on-ink-soft);
    text-decoration: none;
    font-size: 0.94em;
}

.contact-info a:hover { color: var(--blue-soft); }

.contact-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(238, 241, 251, 0.08);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line-on-ink);
    border-radius: 16px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-row { display: flex; flex-direction: column; gap: 0.5em; }

.form-row label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
}

.form-row input,
.form-row textarea {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--line-on-ink);
    border-radius: 10px;
    padding: 0.85em 1em;
    font-family: inherit;
    font-size: 0.95em;
    color: var(--text-on-ink);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--text-on-ink-soft); }

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--blue-soft);
    background: rgba(255, 255, 255, 0.08);
}

.form-row input.invalid,
.form-row textarea.invalid { border-color: #e0708a; }

.form-row textarea { resize: vertical; min-height: 120px; }

.field-error {
    min-height: 1em;
    font-size: 0.78em;
    color: #f2a4b6;
}

.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

button.about-cta.form-submit {
    border: none;
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
    justify-content: center;
}

button.about-cta.form-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.form-status {
    font-size: 0.88em;
    min-height: 1.2em;
}

.form-status.success { color: #7bd9a5; }
.form-status.error { color: #f2a4b6; }

/* _____________FOOTER________________ */

footer {
    background: var(--ink-3);
    color: var(--text-on-ink);
    padding: var(--space-xl) 0 var(--space-md);
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--line-on-ink);
}

.foot-grid h4 {
    font-size: 1em;
    letter-spacing: 0.03em;
    color: var(--text-on-ink);
    margin-bottom: 0.9em;
}

.foot-tagline { color: var(--text-on-ink-soft); font-size: 0.92em; }

.foot-grid p { color: var(--text-on-ink-soft); font-size: 0.92em; line-height: 1.6; }

.foot-grid a {
    display: block;
    color: var(--text-on-ink-soft);
    text-decoration: none;
    font-size: 0.92em;
    margin-bottom: 0.4em;
    width: fit-content;
    transition: color 0.3s ease;
}

.foot-grid a:hover { color: var(--blue-soft); }

.foot-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 2em;
    font-size: 0.78em;
    color: var(--text-on-ink-soft);
}

/* _____________CABEÇALHO DE PÁGINA INTERIOR________________ */

.page-header {
    position: relative;
    padding-top: clamp(7.5rem, 6rem + 5vw, 10.5rem);
    padding-bottom: var(--space-lg);
    background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
    color: var(--text-on-ink);
    overflow: hidden;
}

.page-header .eyebrow { color: var(--gold); }
.page-header .eyebrow::before { background: var(--gold); }

.page-header h1 {
    color: #fff;
    max-width: 32ch;
    font-size: 3em;
}

.page-header p {
    color: var(--text-on-ink-soft);
    max-width: 62ch;
    margin-top: 0.6em;
}

.novo .bar {
    margin: 0 10px;
    width: 5px;
    height: 80px;
    background-color: var(--gold);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
    margin-bottom: 1.4em;
}

.breadcrumb a {
    color: var(--text-on-ink-soft);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover { color: var(--blue-soft); }

.breadcrumb .sep { opacity: 0.5; }

.breadcrumb .current { color: var(--gold); }

/* _____________GRELHA MISSÃO / VISÃO / VALORES________________ */

.value-panel--auto {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* _____________SECÇÃO HISTÓRIA________________ */

.story-copy p + p { margin-top: 1em; }

.story-copy p {
    max-width: 74ch;
    line-height: 1.7;
    color: var(--text);
}

/* _____________TEASERS DE PÁGINA INICIAL________________ */

.section-foot-cta {
    margin-top: var(--space-md);
}

.teaser-note {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-top: var(--space-sm);
    padding: 1em 1.2em;
    border: 1px dashed var(--line-on-ink);
    border-radius: 12px;
    color: var(--text-on-ink-soft);
    font-size: 0.9em;
}

/* _____________LIDERANÇA — CARTÕES LIGÁVEIS________________ */

.lead-grid--index {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

a.lead-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    padding: var(--space-md);
    box-shadow: var(--shadow-soft);
    border: 1px solid transparent;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

a.lead-card-link:hover {
    transform: translateY(-6px);
    border-color: rgba(19, 71, 241, 0.25);
    box-shadow: 0 25px 50px rgba(16, 21, 43, 0.14);
}

a.lead-card-link .avatar { width: 140px; height: 140px; }

a.lead-card-link h3 { font-size: 1.5em; }

a.lead-card-link p.bio-teaser {
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lead-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 1.2em;
    color: var(--blue);
    font-weight: 600;
    font-size: 0.9em;
}

a.lead-card-link:hover .lead-card-cta span { transform: translateX(4px); }
.lead-card-cta span { display: inline-block; transition: transform 0.3s var(--ease); }

/* _____________PÁGINA DE PERFIL________________ */

.profile-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-lg);
    align-items: start;
}

.profile-side {
    position: sticky;
    top: 8em;
    background: #fff;
    border-radius: 16px;
    padding: var(--space-md);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.profile-side .avatar {
    width: 180px;
    height: 180px;
    margin: 0 auto 1em;
}

.profile-side h1 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}

.profile-side .role {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0.6em 0 1.4em;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    color: var(--text-on-ink-soft);
    font-size: 0.85em;
    font-weight: 600;
    transition: color 0.3s ease, gap 0.3s ease;
}

.back-link:hover { color: var(--gold); gap: 0.8em; }

.page-header .back-link { margin-bottom: 1.4em; }

.back-link--light {
    color: var(--blue);
    margin-top: 2em;
}

.back-link--light:hover { color: var(--gold); }

.profile-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 0.6em;
}

.profile-tags li {
    background: rgba(19, 71, 241, 0.08);
    color: var(--blue);
    font-size: 0.82em;
    font-weight: 600;
    padding: 0.5em 0.9em;
    border-radius: 999px;
}

.profile-body h2.subhead {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--navy);
    margin: 2em 0 0.7em;
}

.profile-body h2.subhead:first-child { margin-top: 0; }

.profile-body p {
    line-height: 1.75;
    color: var(--text);
    max-width: 74ch;
}

.profile-body p + p { margin-top: 1em; }

.profile-contact-note {
    margin-top: var(--space-lg);
    padding: var(--space-sm);
    background: rgba(47, 58, 95, 0.035);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 0.95em;
    color: var(--text);
}

.profile-contact-note a { color: var(--blue); font-weight: 600; text-decoration: none; }
.profile-contact-note a:hover { text-decoration: underline; }

/* _____________RESPONSIVIDADE________________ */
/* A maior parte do espaçamento (padding de secções, containers, grids,
    gaps, tipografia de título) já é fluida através das variáveis
    --space-* / --section-py / --container-pad definidas em :root, por
    isso escala sozinha entre qualquer largura de ecrã sem "saltos".
    Os media queries abaixo tratam apenas do que realmente precisa de
    mudar de estrutura por dispositivo: número de colunas, navegação,
    e pequenos ajustes de proporção.

    Desktop grande:            > 1200px (regras base)
    Desktop / laptop pequeno:  981px – 1200px
    Tablet:                    769px – 980px
    Telefone grande / tablet pequeno: 481px – 768px
    Telefone:                  <= 480px
*/

@media (max-width: 1200px) {
    .areas-grid, .proj-grid { grid-template-columns: repeat(2, 1fr); }
    .value-panel { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {

    #siteNav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
        background-color: #ffffff;
    }

    .capsule{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width:100%;
        border-radius: 20px;
    }

    .tab {
        display: none;
    }

    .navtoggle { display: flex; }

    .nav-right {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: min(320px, 82vw);
        background: var(--paper);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-md);
        padding: 7em var(--space-md) var(--space-md);
        box-shadow: -30px 0 60px rgba(16, 21, 43, 0.18);
        transition: right 0.45s var(--ease);
        z-index: 900;
        overflow-y: auto;
    }

    .nav-right.open { right: 0; }

    .navlinks { flex-direction: column; gap: var(--space-sm); width: 100%; background-color: #ffffff00;}
    .navlinks a { font-size: 1em; color:#000000fb; display: inline-block; padding: 0.2em 0; }
    .nav-cta { width: 100%; }
    .nav-cta.button { width: 100%; }

    .navlinks li.has-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
    .dropdown-toggle { color: var(--navy); font-size: 1em; width: 100%; justify-content: space-between; }
    .dropdown-toggle::after { display: none; }
    .dropdown-toggle:hover { color: var(--blue); }

    .dropdown-menu {
        position: relative;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        min-width: 0;
        width: 100%;
        padding: 0;
        background-color: var(--paper);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s var(--ease), margin 0.4s var(--ease);
    }

    .has-dropdown.open .dropdown-menu {
        max-height: 200px;
        margin-top: -5em;
    }

    .dropdown-menu a { padding: 0.55em 0.9em; }

    .hero { min-height: auto; }
    .hero-strip { grid-template-columns: repeat(2, 1fr); }
    .hero-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
        gap: 20px;

        background-color: #00000000;
        /* padding: 80px 50px; */
        /* border-radius: 50px; */
    }

    .hero-inner span {
        font-size: 1.25em;
    }

    .hero-inner .lede {
        text-align: left;
    }

    .about-grid { grid-template-columns: 1fr; }
    .about-media { margin-bottom: var(--space-sm); }

    .value-panel { grid-template-columns: 1fr; }
    .value-col { border-left: none; padding: 0; border-top: 1px solid var(--line); padding-top: var(--space-sm); }
    .value-col:first-child { border-top: none; padding-top: 0; }

    .prv-grp { flex-direction: column; }
    .prv-txt, .prv-img { flex: 1 1 100%; width: 100%; }
    .prv-img img { width: 100%; }

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

    .profile-grid { grid-template-columns: 1fr; }
    .profile-side { position: static; text-align: left; display: flex; align-items: center; gap: var(--space-sm); }
    .profile-side .avatar { margin: 0; flex-shrink: 0; }

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

    .foot-grid { grid-template-columns: 1fr; }
    .foot-bottom { flex-direction: column; gap: var(--space-2xs); align-items: flex-start; }
}

@media (max-width: 768px) {
    .areas-grid, .proj-grid { grid-template-columns: 1fr; }

    .value-panel { background: #ebebf7; }

    .novo {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .novo .bar {
        width: 200px;
        height: 5px;
    }
    .novo .title {
        text-align: center;
        font-size: 40px;
    }
    .lede{
        text-align: right;
        hyphens: none;
    }
}

@media (max-width: 480px) {
    .brand img { width: 120px; }
    .nav-right { width: 88vw; }

    .eyebrow { font-size: 1rem; }

    .hero-strip { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { text-align: center; }
    .num { font-size: 1.7em; }

    .about-stat { left: var(--space-xs); bottom: -20px; padding: var(--space-xs) var(--space-sm); min-width: 130px; }
    .about-stat-num { font-size: 1.8em; }

    .avatar { width: 52px; height: 52px; }

    .profile-side { flex-direction: column; text-align: center; }
    .profile-side .avatar { width: 110px; height: 110px; }

    .contact-info li { flex-wrap: wrap; }

    .button { width: 100%; }
}