/*
 Theme Name: Fluxo
 Author: Fluxo
 Author URI: https://fluxo.design
*/


/* OS VALORES EM VW SÃO PARA UMA TELA DE 1680px DE LARGURA (frame HOMEPAGE DESKTOP) */


/* COLORS */


:root {
    --laranja: #DD6300;
    --cinza-escuro: #25272A;
    --cinza: #595959;
    --areia: #EAE4E1;
    --off-white: #F6F5F4;
    --branco-gelo: #FDFCFC;
    --branco: #FFF;
}
.color-primary {
    color: var(--laranja);
}
.color-laranja {
    color: var(--laranja);
}
.color-cinza-escuro {
    color: var(--cinza-escuro);
}
.color-cinza {
    color: var(--cinza);
}
.color-areia {
    color: var(--areia);
}
.color-off-white {
    color: var(--off-white);
}
.color-branco-gelo {
    color: var(--branco-gelo);
}
.color-branco {
    color: var(--branco);
}
.bg-primary {
    background-color: var(--laranja);
}
.bg-laranja {
    background-color: var(--laranja);
}
.bg-cinza-escuro {
    background-color: var(--cinza-escuro);
}
.bg-cinza {
    background-color: var(--cinza);
}
.bg-areia {
    background-color: var(--areia);
}
.bg-off-white {
    background-color: var(--off-white);
}
.bg-branco-gelo {
    background-color: var(--branco-gelo);
}
.bg-branco {
    background-color: var(--branco);
}
.montserrat-light {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
.montserrat-light-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic;
}
.montserrat-regular {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.montserrat-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}
.montserrat-medium {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.montserrat-medium-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
}
.montserrat-semibold {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.montserrat-semibold-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
}
.montserrat-bold, b, strong {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.montserrat-bold-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
}
* {
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}
html {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 0.95vw;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--cinza-escuro);
    margin: 0;
}


/* As cores do header e do menu vivem nestas variáveis, no body, para que os dois
   invertam juntos e com a mesma transição. O custom.js só troca a classe .is-dark
   conforme a seção que passa sob o header; quem repinta é o CSS. */


body {
    --ui-fundo: rgba(255,255,255,0.85);
    --ui-texto: var(--cinza-escuro);
    --ui-logo: var(--cinza);
    --ui-btn-fundo: var(--cinza-escuro);
    --ui-btn-texto: var(--branco);
    --ui-header-fundo: rgba(243, 243, 244, 0.6);
    --ui-header-desfoque: blur(8.5px);
    --ui-transicao: 0.3s ease;
    margin: 0;
    background-color: var(--off-white);
}
body.is-dark {
    --ui-fundo: rgba(37, 39, 42,0.95);
    --ui-texto: var(--branco);
    --ui-logo: var(--branco);
    --ui-btn-fundo: var(--branco);
    --ui-btn-texto: var(--cinza-escuro);
    --ui-header-fundo: rgba(37, 39, 42, 0.5);
    --ui-header-desfoque: blur(15px);
}
body.is-dark-transition-0s {
    --ui-transicao: 0s;
}
ul.menu, ul.menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}
input:-webkit-autofill, input:-webkit-autofill::first-line, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--branco) inset !important;
    -webkit-text-fill-color: var(--cinza-escuro) !important;
    font-size: 0.83vw !important; /* font-14 */
    line-height: 100% !important;
    letter-spacing: -0.02em !important;
    font-family: "Montserrat", sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
::placeholder {
    color: var(--cinza);
}
.footer input::placeholder {
    color: var(--branco);
}
::selection {
    color: var(--branco);
    background-color: var(--laranja);
}
.hidden {
    display: none;
}
.mobile-view, .mobile-view-flex {
    display: none;
}
.desktop-view {
    display: block;
}
a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}
.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    outline: none !important;
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    color: inherit;
}
a:hover, a:active, a:focus {
    text-decoration: none;
    color: inherit;
}
a:focus-visible {
    outline: auto;
    outline-offset: 0.4em;
    outline-style: solid;
    border-radius: 0.3em;
}
p {
    line-height: inherit;
    margin: 0;
}
.text-editor p a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.1em;
}
.text-editor p a:hover {
    text-decoration: none;
}
.text-editor p:not(:last-child) {
    margin: 0 0 1em 0;
}
.overflow_hidden {
    overflow: hidden;
}
/* MENU ABERTO — PÁGINA TRAVADA
   O .overflow_hidden no body resolve o desktop e não resolve o toque: no iOS o
   overflow: hidden do body não impede a rolagem por gesto, e o normalizeScroll do
   GSAP, que assume a rolagem no celular, rolava a página por baixo do menu mesmo
   com ele aberto. O custom.js desliga o normalizeScroll enquanto o menu está de pé
   e barra o touchmove que acontece fora do menu; estas regras são a parte que cabe
   ao CSS.
   O overscroll-behavior é o que impede a rolagem de "vazar" do menu para a página
   quando o conteúdo dele chega ao fim. */
html.menu-travado,
html.menu-travado body {
    overflow: hidden;
    overscroll-behavior: none;
}
.post-edit {
    display: none !important;
}
svg, img, embed, object {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}
.grecaptcha-badge, .slick-slide {
    outline: none !important;
}


/* ENTRY ANIMATION */


.animate_trigger {
    transform: translate3d(0, 1.5vw, 0);
    opacity: 0;
    transition: all 0.5s ease 0.1s;
    will-change: auto;
}
.animate_trigger.animate_in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* LAYOUT */


.p-relative {
    position: relative;
}
.p-absolute {
    position: absolute;
}
.p-fixed {
    position: fixed;
}
.p-sticky {
    position: sticky;
}
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.grid-9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.grid-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.grid-span-1 {
    grid-column: span 1;
}
.grid-span-2 {
    grid-column: span 2;
}
.grid-span-3 {
    grid-column: span 3;
}
.grid-span-4 {
    grid-column: span 4;
}
.grid-span-5 {
    grid-column: span 5;
}
.grid-span-6 {
    grid-column: span 6;
}
.grid-span-7 {
    grid-column: span 7;
}
.grid-span-8 {
    grid-column: span 8;
}
.grid-span-9 {
    grid-column: span 9;
}
.grid-span-10 {
    grid-column: span 10;
}
.grid-span-11 {
    grid-column: span 11;
}
.grid-span-12 {
    grid-column: span 12;
}
.column_count-2 {
    column-count: 2;
}
.column_count-3 {
    column-count: 3;
}
.column_count-4 {
    column-count: 4;
}
.column_count-2 > *, .column_count-3 > *, .column_count-4 > * {
    break-inside: avoid;
}
.flex, .desktop-flex {
    display: flex;
}
.flex-justify {
    justify-content: space-between;
}
.flex-justify-end {
    justify-content: flex-end;
}
.flex-justify-start {
    justify-content: flex-start;
}
.flex-justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-start {
    justify-content: start;
}
.flex-align-end {
    align-items: flex-end;
}
.flex-align-center {
    align-items: center;
}
.flex-align-start {
    align-items: flex-start;
}
.flex-end {
    align-items: flex-end;
}
.flex-start {
    align-items: flex-start;
}
.flex-center {
    align-items: center;
}
.flex-baseline {
    align-items: baseline;
}
.flex-row {
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.flex-column {
    flex-direction: column;
}
.flex-column-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-align-self-end {
    align-self: flex-end;
}
.flex-align-self-center {
    align-self: center;
}


/* ==========================================================================
   ESPAÇAMENTO — VALORES DO FIGMA (frame HOMEPAGE DESKTOP, 1680px)
   O número da classe é o valor em px no Figma. Ex.: .gap-24 = 24px = 1.43vw.
   ========================================================================== */


/* gap */


.gap-5 {
    gap: 0.3vw;
}
.gap-8 {
    gap: 0.48vw;
}
.gap-10 {
    gap: 0.6vw;
}
.gap-12 {
    gap: 0.71vw;
}
.gap-14 {
    gap: 0.83vw;
}
.gap-15 {
    gap: 0.89vw;
}
.gap-16 {
    gap: 0.95vw;
}
.gap-18 {
    gap: 1.07vw;
}
.gap-20 {
    gap: 1.19vw;
}
.gap-24 {
    gap: 1.43vw;
}
.gap-28 {
    gap: 1.67vw;
}
.gap-30 {
    gap: 1.79vw;
}
.gap-36 {
    gap: 2.14vw;
}
.gap-40 {
    gap: 2.38vw;
}
.gap-48 {
    gap: 2.86vw;
}
.gap-50 {
    gap: 2.98vw;
}
.gap-60 {
    gap: 3.57vw;
}
.gap-70 {
    gap: 4.17vw;
}
.gap-72 {
    gap: 4.29vw;
}
.gap-80 {
    gap: 4.76vw;
}
.gap-90 {
    gap: 5.36vw;
}
.gap-95 {
    gap: 5.65vw;
}
.gap-100 {
    gap: 5.95vw;
}
.gap-120 {
    gap: 7.14vw;
}
.gap-136 {
    gap: 8.1vw;
}
.gap-150 {
    gap: 8.93vw;
}
.gap-180 {
    gap: 10.71vw;
}
.gap-240 {
    gap: 14.29vw;
}
.gap-280 {
    gap: 16.67vw;
}
.gap-300 {
    gap: 17.86vw;
}


/* margin-bottom */


.mb-5 {
    margin-bottom: 0.3vw;
}
.mb-8 {
    margin-bottom: 0.48vw;
}
.mb-10 {
    margin-bottom: 0.6vw;
}
.mb-12 {
    margin-bottom: 0.71vw;
}
.mb-14 {
    margin-bottom: 0.83vw;
}
.mb-15 {
    margin-bottom: 0.89vw;
}
.mb-16 {
    margin-bottom: 0.95vw;
}
.mb-18 {
    margin-bottom: 1.07vw;
}
.mb-20 {
    margin-bottom: 1.19vw;
}
.mb-22 {
    margin-bottom: 1.31vw;
}
.mb-24 {
    margin-bottom: 1.43vw;
}
.mb-28 {
    margin-bottom: 1.67vw;
}
.mb-30 {
    margin-bottom: 1.79vw;
}
.mb-36 {
    margin-bottom: 2.14vw;
}
.mb-40 {
    margin-bottom: 2.38vw;
}
.mb-48 {
    margin-bottom: 2.86vw;
}
.mb-50 {
    margin-bottom: 2.98vw;
}
.mb-60 {
    margin-bottom: 3.57vw;
}
.mb-70 {
    margin-bottom: 4.17vw;
}
.mb-72 {
    margin-bottom: 4.29vw;
}
.mb-80 {
    margin-bottom: 4.76vw;
}
.mb-90 {
    margin-bottom: 5.36vw;
}
.mb-95 {
    margin-bottom: 5.65vw;
}
.mb-100 {
    margin-bottom: 5.95vw;
}
.mb-120 {
    margin-bottom: 7.14vw;
}
.mb-136 {
    margin-bottom: 8.1vw;
}
.mb-150 {
    margin-bottom: 8.93vw;
}
.mb-180 {
    margin-bottom: 10.71vw;
}
.mb-240 {
    margin-bottom: 14.29vw;
}
.mb-280 {
    margin-bottom: 16.67vw;
}
.mb-300 {
    margin-bottom: 17.86vw;
}


/* margin-top */


.mt-5 {
    margin-top: 0.3vw;
}
.mt-8 {
    margin-top: 0.48vw;
}
.mt-10 {
    margin-top: 0.6vw;
}
.mt-12 {
    margin-top: 0.71vw;
}
.mt-14 {
    margin-top: 0.83vw;
}
.mt-15 {
    margin-top: 0.89vw;
}
.mt-16 {
    margin-top: 0.95vw;
}
.mt-18 {
    margin-top: 1.07vw;
}
.mt-20 {
    margin-top: 1.19vw;
}
.mt-24 {
    margin-top: 1.43vw;
}
.mt-28 {
    margin-top: 1.67vw;
}
.mt-30 {
    margin-top: 1.79vw;
}
.mt-36 {
    margin-top: 2.14vw;
}
.mt-40 {
    margin-top: 2.38vw;
}
.mt-48 {
    margin-top: 2.86vw;
}
.mt-50 {
    margin-top: 2.98vw;
}
.mt-60 {
    margin-top: 3.57vw;
}
.mt-70 {
    margin-top: 4.17vw;
}
.mt-72 {
    margin-top: 4.29vw;
}
.mt-80 {
    margin-top: 4.76vw;
}
.mt-90 {
    margin-top: 5.36vw;
}
.mt-95 {
    margin-top: 5.65vw;
}
.mt-100 {
    margin-top: 5.95vw;
}
.mt-120 {
    margin-top: 7.14vw;
}
.mt-136 {
    margin-top: 8.1vw;
}
.mt-150 {
    margin-top: 8.93vw;
}
.mt-180 {
    margin-top: 10.71vw;
}
.mt-240 {
    margin-top: 14.29vw;
}
.mt-280 {
    margin-top: 16.67vw;
}
.mt-300 {
    margin-top: 17.86vw;
}


/* margin-left */


.ml-5 {
    margin-left: 0.3vw;
}
.ml-8 {
    margin-left: 0.48vw;
}
.ml-10 {
    margin-left: 0.6vw;
}
.ml-12 {
    margin-left: 0.71vw;
}
.ml-14 {
    margin-left: 0.83vw;
}
.ml-15 {
    margin-left: 0.89vw;
}
.ml-16 {
    margin-left: 0.95vw;
}
.ml-18 {
    margin-left: 1.07vw;
}
.ml-20 {
    margin-left: 1.19vw;
}
.ml-24 {
    margin-left: 1.43vw;
}
.ml-28 {
    margin-left: 1.67vw;
}
.ml-30 {
    margin-left: 1.79vw;
}
.ml-36 {
    margin-left: 2.14vw;
}
.ml-40 {
    margin-left: 2.38vw;
}
.ml-48 {
    margin-left: 2.86vw;
}
.ml-50 {
    margin-left: 2.98vw;
}
.ml-60 {
    margin-left: 3.57vw;
}
.ml-70 {
    margin-left: 4.17vw;
}
.ml-72 {
    margin-left: 4.29vw;
}
.ml-80 {
    margin-left: 4.76vw;
}
.ml-90 {
    margin-left: 5.36vw;
}
.ml-95 {
    margin-left: 5.65vw;
}
.ml-100 {
    margin-left: 5.95vw;
}
.ml-120 {
    margin-left: 7.14vw;
}
.ml-136 {
    margin-left: 8.1vw;
}
.ml-150 {
    margin-left: 8.93vw;
}
.ml-180 {
    margin-left: 10.71vw;
}
.ml-240 {
    margin-left: 14.29vw;
}
.ml-280 {
    margin-left: 16.67vw;
}
.ml-300 {
    margin-left: 17.86vw;
}


/* margin-right */


.mr-5 {
    margin-right: 0.3vw;
}
.mr-8 {
    margin-right: 0.48vw;
}
.mr-10 {
    margin-right: 0.6vw;
}
.mr-12 {
    margin-right: 0.71vw;
}
.mr-14 {
    margin-right: 0.83vw;
}
.mr-15 {
    margin-right: 0.89vw;
}
.mr-16 {
    margin-right: 0.95vw;
}
.mr-18 {
    margin-right: 1.07vw;
}
.mr-20 {
    margin-right: 1.19vw;
}
.mr-24 {
    margin-right: 1.43vw;
}
.mr-28 {
    margin-right: 1.67vw;
}
.mr-30 {
    margin-right: 1.79vw;
}
.mr-36 {
    margin-right: 2.14vw;
}
.mr-40 {
    margin-right: 2.38vw;
}
.mr-48 {
    margin-right: 2.86vw;
}
.mr-50 {
    margin-right: 2.98vw;
}
.mr-60 {
    margin-right: 3.57vw;
}
.mr-70 {
    margin-right: 4.17vw;
}
.mr-72 {
    margin-right: 4.29vw;
}
.mr-80 {
    margin-right: 4.76vw;
}
.mr-90 {
    margin-right: 5.36vw;
}
.mr-95 {
    margin-right: 5.65vw;
}
.mr-100 {
    margin-right: 5.95vw;
}
.mr-120 {
    margin-right: 7.14vw;
}
.mr-136 {
    margin-right: 8.1vw;
}
.mr-150 {
    margin-right: 8.93vw;
}
.mr-180 {
    margin-right: 10.71vw;
}
.mr-240 {
    margin-right: 14.29vw;
}
.mr-280 {
    margin-right: 16.67vw;
}
.mr-300 {
    margin-right: 17.86vw;
}


/* padding-bottom */


.pb-5 {
    padding-bottom: 0.3vw;
}
.pb-8 {
    padding-bottom: 0.48vw;
}
.pb-10 {
    padding-bottom: 0.6vw;
}
.pb-12 {
    padding-bottom: 0.71vw;
}
.pb-14 {
    padding-bottom: 0.83vw;
}
.pb-15 {
    padding-bottom: 0.89vw;
}
.pb-16 {
    padding-bottom: 0.95vw;
}
.pb-18 {
    padding-bottom: 1.07vw;
}
.pb-20 {
    padding-bottom: 1.19vw;
}
.pb-24 {
    padding-bottom: 1.43vw;
}
.pb-28 {
    padding-bottom: 1.67vw;
}
.pb-30 {
    padding-bottom: 1.79vw;
}
.pb-36 {
    padding-bottom: 2.14vw;
}
.pb-40 {
    padding-bottom: 2.38vw;
}
.pb-48 {
    padding-bottom: 2.86vw;
}
.pb-50 {
    padding-bottom: 2.98vw;
}
.pb-60 {
    padding-bottom: 3.57vw;
}
.pb-70 {
    padding-bottom: 4.17vw;
}
.pb-72 {
    padding-bottom: 4.29vw;
}
.pb-80 {
    padding-bottom: 4.76vw;
}
.pb-90 {
    padding-bottom: 5.36vw;
}
.pb-95 {
    padding-bottom: 5.65vw;
}
.pb-100 {
    padding-bottom: 5.95vw;
}
.pb-120 {
    padding-bottom: 7.14vw;
}
.pb-136 {
    padding-bottom: 8.1vw;
}
.pb-150 {
    padding-bottom: 8.93vw;
}
.pb-180 {
    padding-bottom: 10.71vw;
}
.pb-240 {
    padding-bottom: 14.29vw;
}
.pb-280 {
    padding-bottom: 16.67vw;
}
.pb-300 {
    padding-bottom: 17.86vw;
}


/* padding-top */


.pt-5 {
    padding-top: 0.3vw;
}
.pt-8 {
    padding-top: 0.48vw;
}
.pt-10 {
    padding-top: 0.6vw;
}
.pt-12 {
    padding-top: 0.71vw;
}
.pt-14 {
    padding-top: 0.83vw;
}
.pt-15 {
    padding-top: 0.89vw;
}
.pt-16 {
    padding-top: 0.95vw;
}
.pt-18 {
    padding-top: 1.07vw;
}
.pt-20 {
    padding-top: 1.19vw;
}
.pt-24 {
    padding-top: 1.43vw;
}
.pt-28 {
    padding-top: 1.67vw;
}
.pt-30 {
    padding-top: 1.79vw;
}
.pt-36 {
    padding-top: 2.14vw;
}
.pt-40 {
    padding-top: 2.38vw;
}
.pt-48 {
    padding-top: 2.86vw;
}
.pt-50 {
    padding-top: 2.98vw;
}
.pt-60 {
    padding-top: 3.57vw;
}
.pt-70 {
    padding-top: 4.17vw;
}
.pt-72 {
    padding-top: 4.29vw;
}
.pt-80 {
    padding-top: 4.76vw;
}
.pt-90 {
    padding-top: 5.36vw;
}
.pt-95 {
    padding-top: 5.65vw;
}
.pt-100 {
    padding-top: 5.95vw;
}
.pt-120 {
    padding-top: 7.14vw;
}
.pt-136 {
    padding-top: 8.1vw;
}
.pt-150 {
    padding-top: 8.93vw;
}
.pt-180 {
    padding-top: 10.71vw;
}
.pt-240 {
    padding-top: 14.29vw;
}
.pt-280 {
    padding-top: 16.67vw;
}
.pt-300 {
    padding-top: 17.86vw;
}


/* padding-left */


.pl-5 {
    padding-left: 0.3vw;
}
.pl-8 {
    padding-left: 0.48vw;
}
.pl-10 {
    padding-left: 0.6vw;
}
.pl-12 {
    padding-left: 0.71vw;
}
.pl-14 {
    padding-left: 0.83vw;
}
.pl-15 {
    padding-left: 0.89vw;
}
.pl-16 {
    padding-left: 0.95vw;
}
.pl-18 {
    padding-left: 1.07vw;
}
.pl-20 {
    padding-left: 1.19vw;
}
.pl-24 {
    padding-left: 1.43vw;
}
.pl-28 {
    padding-left: 1.67vw;
}
.pl-30 {
    padding-left: 1.79vw;
}
.pl-36 {
    padding-left: 2.14vw;
}
.pl-40 {
    padding-left: 2.38vw;
}
.pl-48 {
    padding-left: 2.86vw;
}
.pl-50 {
    padding-left: 2.98vw;
}
.pl-60 {
    padding-left: 3.57vw;
}
.pl-70 {
    padding-left: 4.17vw;
}
.pl-72 {
    padding-left: 4.29vw;
}
.pl-80 {
    padding-left: 4.76vw;
}
.pl-90 {
    padding-left: 5.36vw;
}
.pl-95 {
    padding-left: 5.65vw;
}
.pl-100 {
    padding-left: 5.95vw;
}
.pl-120 {
    padding-left: 7.14vw;
}
.pl-136 {
    padding-left: 8.1vw;
}
.pl-150 {
    padding-left: 8.93vw;
}
.pl-180 {
    padding-left: 10.71vw;
}
.pl-240 {
    padding-left: 14.29vw;
}
.pl-280 {
    padding-left: 16.67vw;
}
.pl-300 {
    padding-left: 17.86vw;
}


/* padding-right */


.pr-5 {
    padding-right: 0.3vw;
}
.pr-8 {
    padding-right: 0.48vw;
}
.pr-10 {
    padding-right: 0.6vw;
}
.pr-12 {
    padding-right: 0.71vw;
}
.pr-14 {
    padding-right: 0.83vw;
}
.pr-15 {
    padding-right: 0.89vw;
}
.pr-16 {
    padding-right: 0.95vw;
}
.pr-18 {
    padding-right: 1.07vw;
}
.pr-20 {
    padding-right: 1.19vw;
}
.pr-24 {
    padding-right: 1.43vw;
}
.pr-28 {
    padding-right: 1.67vw;
}
.pr-30 {
    padding-right: 1.79vw;
}
.pr-36 {
    padding-right: 2.14vw;
}
.pr-40 {
    padding-right: 2.38vw;
}
.pr-48 {
    padding-right: 2.86vw;
}
.pr-50 {
    padding-right: 2.98vw;
}
.pr-60 {
    padding-right: 3.57vw;
}
.pr-70 {
    padding-right: 4.17vw;
}
.pr-72 {
    padding-right: 4.29vw;
}
.pr-80 {
    padding-right: 4.76vw;
}
.pr-90 {
    padding-right: 5.36vw;
}
.pr-95 {
    padding-right: 5.65vw;
}
.pr-100 {
    padding-right: 5.95vw;
}
.pr-120 {
    padding-right: 7.14vw;
}
.pr-136 {
    padding-right: 8.1vw;
}
.pr-150 {
    padding-right: 8.93vw;
}
.pr-180 {
    padding-right: 10.71vw;
}
.pr-240 {
    padding-right: 14.29vw;
}
.pr-280 {
    padding-right: 16.67vw;
}
.pr-300 {
    padding-right: 17.86vw;
}


/* ESPAÇAMENTO RELATIVO (em / rem) — mantido para casos que acompanham o texto */


.gap-0_5rem {
    gap: 0.5rem;
}
.gap-1rem {
    gap: 1rem;
}
.gap-2rem {
    gap: 2rem;
}
.gap-3rem {
    gap: 3rem;
}
.gap-4rem {
    gap: 4rem;
}
.gap-5rem {
    gap: 5rem;
}
.gap-0_5em {
    gap: 0.5em;
}
.gap-0_75em {
    gap: 0.75em;
}
.gap-1em {
    gap: 1em;
}
.gap-1_5em {
    gap: 1.5em;
}
.gap-2em {
    gap: 2em;
}
.gap-3em {
    gap: 3em;
}
.gap-4em {
    gap: 4em;
}
.gap-5em {
    gap: 5em;
}
.mb-0_5rem {
    margin-bottom: 0.5rem;
}
.mb-1rem {
    margin-bottom: 1rem;
}
.mb-1_5rem {
    margin-bottom: 1.5rem;
}
.mb-2rem {
    margin-bottom: 2rem;
}
.mb-3rem {
    margin-bottom: 3rem;
}
.mb-4rem {
    margin-bottom: 4rem;
}
.mb-5rem {
    margin-bottom: 5rem;
}
.mb-0_5em {
    margin-bottom: 0.5em;
}
.mb-1em {
    margin-bottom: 1em;
}
.mb-1_25em {
    margin-bottom: 1.25em;
}
.mb-1_5em {
    margin-bottom: 1.5em;
}
.mb-2em {
    margin-bottom: 2em;
}
.mb-3em {
    margin-bottom: 3em;
}
.mb-4em {
    margin-bottom: 4em;
}
.mb-5em {
    margin-bottom: 5em;
}
.mt-0_5rem {
    margin-top: 0.5rem;
}
.mt-1rem {
    margin-top: 1rem;
}
.mt-2rem {
    margin-top: 2rem;
}
.mt-3rem {
    margin-top: 3rem;
}
.mt-4rem {
    margin-top: 4rem;
}
.mt-5rem {
    margin-top: 5rem;
}
.mt-0_5em {
    margin-top: 0.5em;
}
.mt-1em {
    margin-top: 1em;
}
.mt-2em {
    margin-top: 2em;
}
.mt-3em {
    margin-top: 3em;
}
.mt-4em {
    margin-top: 4em;
}
.mt-5em {
    margin-top: 5em;
}
.ml-0_5rem {
    margin-left: 0.5rem;
}
.ml-1rem {
    margin-left: 1rem;
}
.ml-2rem {
    margin-left: 2rem;
}
.ml-3rem {
    margin-left: 3rem;
}
.ml-4rem {
    margin-left: 4rem;
}
.ml-5rem {
    margin-left: 5rem;
}
.ml-0_5em {
    margin-left: 0.5em;
}
.ml-1em {
    margin-left: 1em;
}
.ml-2em {
    margin-left: 2em;
}
.ml-3em {
    margin-left: 3em;
}
.ml-4em {
    margin-left: 4em;
}
.ml-5em {
    margin-left: 5em;
}
.mr-0_5rem {
    margin-right: 0.5rem;
}
.mr-1rem {
    margin-right: 1rem;
}
.mr-2rem {
    margin-right: 2rem;
}
.mr-3rem {
    margin-right: 3rem;
}
.mr-4rem {
    margin-right: 4rem;
}
.mr-5rem {
    margin-right: 5rem;
}
.mr-0_5em {
    margin-right: 0.5em;
}
.mr-1em {
    margin-right: 1em;
}
.mr-2em {
    margin-right: 2em;
}
.mr-3em {
    margin-right: 3em;
}
.mr-4em {
    margin-right: 4em;
}
.mr-5em {
    margin-right: 5em;
}
.pb-0_5rem {
    padding-bottom: 0.5rem;
}
.pb-1rem {
    padding-bottom: 1rem;
}
.pb-2rem {
    padding-bottom: 2rem;
}
.pb-3rem {
    padding-bottom: 3rem;
}
.pb-4rem {
    padding-bottom: 4rem;
}
.pb-5rem {
    padding-bottom: 5rem;
}
.pb-0_5em {
    padding-bottom: 0.5em;
}
.pb-1em {
    padding-bottom: 1em;
}
.pb-1_5em {
    padding-bottom: 1.5em;
}
.pb-2em {
    padding-bottom: 2em;
}
.pb-3em {
    padding-bottom: 3em;
}
.pb-4em {
    padding-bottom: 4em;
}
.pb-5em {
    padding-bottom: 5em;
}
.pt-0_5rem {
    padding-top: 0.5rem;
}
.pt-1rem {
    padding-top: 1rem;
}
.pt-2rem {
    padding-top: 2rem;
}
.pt-3rem {
    padding-top: 3rem;
}
.pt-4rem {
    padding-top: 4rem;
}
.pt-5rem {
    padding-top: 5rem;
}
.pt-0_5em {
    padding-top: 0.5em;
}
.pt-1em {
    padding-top: 1em;
}
.pt-1_5em {
    padding-top: 1.5em;
}
.pt-2em {
    padding-top: 2em;
}
.pt-3em {
    padding-top: 3em;
}
.pt-4em {
    padding-top: 4em;
}
.pt-5em {
    padding-top: 5em;
}
.pl-0_5rem {
    padding-left: 0.5rem;
}
.pl-1rem {
    padding-left: 1rem;
}
.pl-2rem {
    padding-left: 2rem;
}
.pl-3rem {
    padding-left: 3rem;
}
.pl-4rem {
    padding-left: 4rem;
}
.pl-5rem {
    padding-left: 5rem;
}
.pl-0_5em {
    padding-left: 0.5em;
}
.pl-1em {
    padding-left: 1em;
}
.pl-2em {
    padding-left: 2em;
}
.pl-3em {
    padding-left: 3em;
}
.pl-4em {
    padding-left: 4em;
}
.pl-5em {
    padding-left: 5em;
}
.pr-0_5rem {
    padding-right: 0.5rem;
}
.pr-1rem {
    padding-right: 1rem;
}
.pr-2rem {
    padding-right: 2rem;
}
.pr-3rem {
    padding-right: 3rem;
}
.pr-4rem {
    padding-right: 4rem;
}
.pr-5rem {
    padding-right: 5rem;
}
.pr-0_5em {
    padding-right: 0.5em;
}
.pr-1em {
    padding-right: 1em;
}
.pr-2em {
    padding-right: 2em;
}
.pr-3em {
    padding-right: 3em;
}
.pr-4em {
    padding-right: 4em;
}
.pr-5em {
    padding-right: 5em;
}
.mt-auto {
    margin-top: auto;
}
.mb-auto {
    margin-bottom: auto;
}
.ml-auto {
    margin-left: auto;
}
.mr-auto {
    margin-right: auto;
}
.m-auto {
    margin: auto;
}
.p-unset {
    padding: unset;
}
.m-unset {
    margin: unset;
}


/* SIZE */


.h-100 {
    height: 100%;
}
.w-10 {
    width: 10%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width: 25%;
}
.w-33 {
    width: 33.33%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-50 {
    width: 50%;
}
.w-55 {
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-66 {
    width: 66.66%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-90 {
    width: 90%;
}
.w-95 {
    width: 95%;
}
.w-100 {
    width: 100%;
}
.w-fit-content {
    width: fit-content;
}
.img-wrapper.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-wrapper.contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hide-br br {
    display: none;
}


/* ==========================================================================
   TYPOGRAPHY — o número da classe é o font-size em px no Figma
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    margin: 0;
}
.font-8 {
    font-size: 0.48vw;
    line-height: 1.3;
    letter-spacing: 0.1em;
}
.font-10 {
    font-size: 0.6vw;
    line-height: 1.2;
    letter-spacing: 0.17em;
}
.font-12 {
    font-size: 0.7143vw;
    line-height: 1;
    letter-spacing: -0.02em;
}
.font-14 {
    font-size: 0.83vw;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.font-16 {
    font-size: 0.95vw;
    line-height: 1.375;
    letter-spacing: -0.02em;
}
.font-18 {
    font-size: 1.07vw;
    line-height: 1.33;
    letter-spacing: -0.02em;
}
.font-20 {
    font-size: 1.19vw;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.font-22 {
    font-size: 1.31vw;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.font-24 {
    font-size: 1.43vw;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.font-26 {
    font-size: 1.55vw;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.font-30 {
    font-size: 1.79vw;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.font-35 {
    font-size: 2.08vw;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.font-40 {
    font-size: 2.38vw;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.font-50 {
    font-size: 2.98vw;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.font-60 {
    font-size: 3.57vw;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.font-72 {
    font-size: 4.29vw;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.font-light {
    font-weight: 300;
}
.font-regular {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.font-bold, b, strong {
    font-weight: 700;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.uppercase {
    text-transform: uppercase;
}
.hyphens {
    hyphens: auto;
}
.nowrap {
    white-space: nowrap;
}


/* Tracking dos rótulos em caixa alta (valores do Figma) */


.tracking-btn {
    letter-spacing: 0.17em; /* 2.04px @ 12px */
}
.tracking-label {
    letter-spacing: 0.19em; /* 2.66px @ 14px */
}
.tracking-tag {
    letter-spacing: 0.14em; /* 1.68px @ 12px */
}
.tracking-ano {
    letter-spacing: 0.2em; /* 2.8px @ 14px  */
}
.tracking-eyebrow {
    letter-spacing: 0.2em; /* 2.4px @ 12px  */
}


/* ==========================================================================
   COMPONENTES
   ========================================================================== */


/* HEADER */


.header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background-color: var(--ui-header-fundo);
    backdrop-filter: var(--ui-header-desfoque);
    -webkit-backdrop-filter: var(--ui-header-desfoque);
    transition: background-color var(--ui-transicao), backdrop-filter var(--ui-transicao);
}


/* Com o menu aberto o header fica sobre a nav, que é opaca — sem desfoque. */


.header.menu-active {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
a.header__logo {
    display: flex;
    align-items: center;
    width: 12.8vw; /* 215px */
    flex-shrink: 0;
    color: var(--ui-logo);
    transition: color var(--ui-transicao);
}
a.header__logo:hover, a.header__logo:focus, a.header__logo:focus-visible, a.header__logo:active {
    color: var(--ui-logo);
}
.header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.lang-switcher a {
    color: var(--ui-texto);
    transition: color var(--ui-transicao);
}


/* NAV */


/* Figma: os links começam na 4ª das 12 colunas e o bloco de baixo é formado por
   quatro blocos de 3 colunas. O recuo do topo (174px) deixa a lista logo abaixo
   do header, e o de baixo (56px) é a folga até o "Site por Fluxo". */


.main-nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    margin: auto auto 0;
    padding-top: 6vw;
    padding-bottom: 2.14vw;
    gap: 3.57vw;
    background-color: var(--ui-fundo);
    backdrop-filter: blur(0);
    color: var(--ui-texto);
    transform: translateY(-110%);
    filter: blur(50px);
    transition: transform 0.35s ease, background-color var(--ui-transicao), color var(--ui-transicao), filter 0.35s ease, opacity 0.35s ease, backdrop-filter 0.35s ease;
    overflow-y: scroll;
    /* A rolagem do menu é dele: ao chegar ao fim do conteúdo, ela para aqui em vez
       de continuar na página que está atrás. */
    overscroll-behavior: contain;
    z-index: 90;
}
.header.menu-active + .main-nav {
    transform: translateY(0);
    filter: blur(0px);
    backdrop-filter: blur(13px);
    opacity: 1;
}
.main-nav__list {
    grid-column: 4 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav__list a, .main-nav__list a:focus, .main-nav__list a:focus-visible, .main-nav__list a:active {
    transition: color var(--ui-transicao);
}
.main-nav__list a:focus-visible {
    outline-color: var(--ui-transicao);
    outline-width: 0.1em;
    outline-offset: 0em;
    padding: 0 0.5em;
    transition: 0.2s;
}
.main-nav__list a:hover {
    color: var(--laranja);
}
.main-nav__rodape {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
}
.main-nav__col {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.main-nav__contato {
    display: flex;
    flex-direction: column;
}


/* NEWSLETTER E RÓTULOS — compartilhados entre o rodapé e o menu */


.rotulo {
    display: block;
    color: currentColor;
}
.newsletter-msg {
    color: var(--laranja);
}
.newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.newsletter-form input, .newsletter-form input:hover, .newsletter-form input:focus-visible, .newsletter-form input:active {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0.54vw 0; /* 9px */
    color: inherit;
    outline: none;
    transition: border-color var(--ui-transicao), color var(--ui-transicao);
}
.newsletter-form input:focus {
    border-bottom: 2px solid currentColor;
}
.newsletter-form input::placeholder {
    color: currentColor;
}
.newsletter-form input:focus::placeholder {
    color: transparent;
}


/* Crédito da Fluxo — o sublinhado tem a espessura da haste do "l" da Montserrat
   (0.096em de tinta) e a mesma medida de distância até a palavra. */


.footer__credit, .main-nav__credito {
    text-decoration: none;
    text-decoration-thickness: 0.096em;
    text-underline-offset: 0.096em;
}
.footer__credit:hover, .main-nav__credito:hover {
    text-decoration: underline;
}
.lang-switcher ul, .lang-switcher li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lang-switcher a {
    text-transform: uppercase;
}
/* A largura de cada estado é medida pelo custom.js e guardada nas variáveis
   abaixo, senão não há o que animar (width: auto não transiciona). */


.btn-menu {
    position: relative;
    width: var(--btn-menu-abrir, auto);
    transition: width 0.3s ease,
                background-color var(--ui-transicao),
                border-color var(--ui-transicao),
                color var(--ui-transicao);
}
.header.menu-active .btn-menu {
    width: var(--btn-menu-fechar, auto);
}
.btn-menu__label {
    display: block;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.btn-menu__label--fechar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.header.menu-active .btn-menu__label--abrir {
    opacity: 0;
}
.header.menu-active .btn-menu__label--fechar {
    opacity: 1;
}


/* BOTÕES — px 16 / py 12 / raio 50px no Figma */


.btn, .btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    height: 1.91vw;
    padding: 0 0.85vw;
    border-radius: 3em;
    border: 1px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s ease;
}
.btn span, .btn-menu span {
    user-select: none;
    outline: none !important;
}
.btn--center {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.btn--primary, .btn--orange, .btn--primary:active, .btn--primary:focus, .btn--primary:focus-visible, .btn--orange:active, .btn--orange:focus, .btn--orange:focus-visible  {
    background-color: var(--laranja);
    border-color: var(--laranja);
    color: var(--branco);
}
.btn--primary:hover, .btn--orange:hover {
    background-color: var(--cinza-escuro);
    border-color: var(--cinza-escuro);
    color: var(--branco);
}
.btn--primary:focus-visible, .btn--orange:focus-visible {
    outline-color: var(--cinza-escuro);
}
.btn--dark, .btn--dark:active, .btn--dark:focus, .btn--dark:focus-visible {
    background-color: var(--cinza-escuro);
    border-color: var(--cinza-escuro);
    color: var(--branco);
}
.btn--dark:hover {
    background: transparent;
    border-color: var(--cinza-escuro);
    color: var(--cinza-escuro);
}
.btn--dark:focus-visible {
    outline-color: var(--cinza-escuro);
}
.btn-menu, .btn-menu:active, .btn-menu:focus, .btn-menu:focus-visible {
    background-color: var(--ui-btn-fundo);
    border-color: var(--ui-btn-fundo);
    color: var(--ui-btn-texto);
}
.btn-menu:hover {
    background: transparent;
    border-color: var(--ui-btn-fundo);
    color: var(--ui-btn-fundo);
}
.btn-menu:focus-visible {
    outline-color: var(--ui-btn-fundo);
}
.btn--ui, .btn--ui:active, .btn--ui:focus, .btn--ui:focus-visible {
    background-color: var(--ui-btn-fundo);
    border-color: var(--ui-btn-fundo);
    color: var(--ui-btn-texto);
    transition: background-color var(--ui-transicao), border-color var(--ui-transicao), color var(--ui-transicao);
}
.btn--ui:hover {
    background: transparent;
    border-color: var(--ui-btn-fundo);
    color: var(--ui-btn-fundo);
}
.btn--ui:focus-visible {
    outline-color: var(--ui-btn-fundo);
}
.btn--light, .btn--light:active, .btn--light:focus, .btn--light:focus-visible {
    background-color: var(--branco);
    border-color: var(--branco);
    color: var(--cinza-escuro);
}
.btn--light:hover {
    background: transparent;
    border-color: var(--branco);
    color: var(--branco);
}
.btn--light:focus-visible {
    outline-color: var(--branco);
}
.btn--outline, .btn--outline:active, .btn--outline:focus, .btn--outline:focus-visible {
    background: transparent;
    border-color: var(--cinza-escuro);
    color: var(--cinza-escuro);
}
.btn--outline:hover {
    background: var(--cinza-escuro);
    border-color: var(--cinza-escuro);
    color: var(--branco);
}
.btn--outline:focus-visible {
    outline-color: var(--cinza-escuro);
}


/* HOMEPAGE — bases de seção */


.homepage section {
    position: relative;
/*    background-color: var(--off-white);*/
}
.homepage section.dark {
    background-color: var(--cinza-escuro);
    color: var(--branco);
}
/* Histórico + Time: uma imagem só cobre as duas seções, sem emenda no meio.
   O tamanho é 100% 100% e não cover: a altura do bloco depende do conteúdo
   cadastrado, e o degradê precisa começar e terminar junto com ele. Esticar
   não aparece — o degradê é vertical e as faixas diagonais são muito suaves.
   A cor fica de reserva: é a mesma do rodapé da imagem. */
.dark-block {
    background-color: var(--cinza-escuro);
    background-image: url('images/bgdarkG.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}
.homepage .dark-block section.dark {
    background-color: transparent;
}
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-header p {
    max-width: 26.31vw; /* 442px */
}


/* ==========================================================================
   PRELOADER
   Uma cortina branca sobre o site inteiro e, dentro dela, a mesma semente da
   hero — só que servindo de barra de carga. A posição e o tamanho vêm do JS,
   com a mesma conta que põe a semente laranja no lugar dentro da hero, para
   que a troca de uma pela outra não tenha deslocamento nenhum.
   ========================================================================== */
/* Só existe com JS: sem ele ninguém tiraria a cortina da frente do site. */
.preloader-wrapper {
    display: none;
}
.js .preloader-wrapper {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    transition: opacity 0.3s ease;
}
/* A classe que encerra o preloader. Fora dele também serve para qualquer
   elemento que precise sair de cena sem deixar de ocupar o lugar. */
.opacity_0_evt_nont {
    opacity: 0;
    pointer-events: none;
}
/* Rolagem travada enquanto a cortina está de pé. O padding-right que o JS
   escreve no <html> repõe a largura da barra de rolagem que o overflow: hidden
   acabou de tirar — sem ele a página inteira daria um salto lateral na hora de
   travar e outro na hora de soltar, e a semente da hero não cairia mais no
   mesmo lugar em que o preloader a deixou. */
html.preloader-travado,
html.preloader-travado body {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    height: 100vh;
}
/* A semente do preloader. width, height, left, top e font-size são escritos
   pelo custom.js — aqui fica só o que não depende da medida da tela. */
.preloader__semente {
    position: absolute;
    opacity: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums; /* a porcentagem não treme ao contar */
    transition: opacity 0.3s ease;
}
.preloader__semente.is-visivel {
    opacity: 1;
}
.preloader__forma {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.preloader__forma--fundo path {
    fill: #25272A;
}
.preloader__forma--frente path {
    fill: #DD6300;
}
/* A subida do laranja. As duas formas são a mesma, uma sobre a outra; a de
   cima é recortada por um inset() que desce de 100% a 0% conforme a carga.
   Mais barato que máscara SVG, anima na GPU e não precisa de um terceiro nó. */
.preloader__forma--frente {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    transition: -webkit-clip-path 0.25s linear, clip-path 0.25s linear;
}
/* A porcentagem acompanha a linha do laranja: o bottom é a própria porcentagem,
   medida na altura da semente, que é exatamente onde o recorte está. O
   translateY(50%) centra o texto nessa linha em vez de pendurá-lo abaixo. */
.preloader__valor {
    position: absolute;
    right: calc(100% + 1.2em);
    bottom: 0;
    transform: translateY(50%);
    line-height: 1;
    white-space: nowrap;
    color: #25272A;
    transition: bottom 0.25s linear;
}


/* ==========================================================================
   CONTAGEM REGRESSIVA DA ROLAGEM AUTOMÁTICA
   Fica parada, centrada na tela, no meio do caminho entre a base da semente e a
   margem de baixo — mesma posição nos dois breakpoints. O JS escreve só o top,
   que depende de onde a semente caiu; o resto é aparência.
   As classes de tipografia (font-12, mobile-font-12, font-semibold, uppercase)
   vêm do próprio sistema do site e são aplicadas junto no JS.
   ========================================================================== */
.hero-contagem {
    position: fixed;
    top: 0; /* o JS escreve o valor */
    left: 50%;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
    transform: translate(-50%, -50%);
    pointer-events: none; /* nunca rouba o clique da semente */
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    color: #25272A;
    font-variant-numeric: tabular-nums; /* a largura não muda a cada segundo */
    transition: opacity 0.3s ease;
}


/* Seção 1 — Abertura */


/* O frame do Figma é 1680 x 994 — proporção 1.69. Numa tela mais horizontal que
   isso, escalar tudo pela largura faria a composição pedir mais altura do que
   existe, e ela era cortada embaixo. Então a hero inteira passa a caber na tela:
   a escala é min(largura/1680, altura/994), como o preserveAspectRatio
   "xMidYMid meet" de um SVG. Os recuos abaixo são os 240 e 60 px do layout
   nessa escala — quando a altura manda, viram 24.15vh e 6.04vh. */


/* Estado de carregamento da hero.

   Antes de o custom.js rodar, o navegador desenha a composição de um jeito e o
   JS estabelece outro: a semente sai do preserveAspectRatio="xMaxYMid meet"
   (colada à direita) e o ajustarEscala a recentraliza; o clipPath ainda não tem
   o transform de escala; o conteúdo está opaco e o gsap.set o zera. Cada uma
   dessas diferenças aparecia como um piscar no reload.

   A saída é esconder a hero na primeira pintura e revelá-la no instante em que
   o JS termina de posicionar tudo, adicionando .hero-pronta no <html>. As três
   redes de segurança: sem JS a classe .js nunca entra e nada é escondido; se o
   GSAP não carregar o próprio iniciarHero() libera; e o setTimeout do header
   libera em 3s se o custom.js nem chegar a rodar.

   Depois de liberada, quem manda no conteúdo é o style inline do GSAP, que
   ganha da regra abaixo por ser inline — por isso no desktop ele continua
   invisível até a linha do tempo trazê-lo, e no mobile (onde o JS não mexe na
   opacidade) ele simplesmente aparece. */


.js .s-hero__media,
.js .s-hero__content {
    opacity: 0;
}
.js.hero-pronta .s-hero__media,
.js.hero-pronta .s-hero__content {
    opacity: 1;
}
.s-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100vh;
    padding-top: min(14.29vw, 24.15vh); /* 240px */
    padding-bottom: min(3.57vw, 6.04vh); /* 60px */
    overflow: hidden;
}
.s-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* O recorte mora aqui, na caixa, e não no <video>.
   Com o clip-path aplicado ao próprio vídeo, o WebKit perde o caminho rápido de
   composição: a cada mudança da máscara — ou seja, a cada quadro da rolagem — o
   quadro do vídeo precisa ser rasterizado de novo por software, em tela cheia.
   Aplicado à caixa, o vídeo segue sendo uma camada de hardware que ninguém
   redesenha, e o recorte é trabalho de composição.
   Não dá para usar a .s-hero__media como caixa: ali dentro também vive a semente
   laranja, que não pode ser recortada. */
.s-hero__recorte {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-clip-path: url(#s-hero-clip);
    clip-path: url(#s-hero-clip);
}
.s-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Empurra o vídeo para a própria camada, para que a máscara acima não o
       arraste de volta para a rasterização por software. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
.s-hero__video.show-mobile {
    display: none;
}


/* O <svg> das máscaras não é desenhado, só guarda o clipPath. */


.s-hero__mascara {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* As formas do mobile são outras (3 colunas em vez de 8), então cada conjunto
   fica escondido no breakpoint do outro. display: none num filho de clipPath
   tira mesmo a forma do recorte. */


.s-hero__forma--mobile {
    display: none;
}


/* preserveAspectRatio="xMaxYMid meet" no markup: mesma escala e mesma âncora que
   o custom.js aplica no clipPath (direita, centro vertical), então a semente
   visível e o recorte do vídeo ficam sempre alinhados. */


.s-hero__semente {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.s-hero__semente--mobile {
    display: none;
}


/* Só a forma em si é clicável — o resto do SVG é área vazia. */


.s-hero__semente path {
    pointer-events: auto;
    cursor: pointer;
}
/* --hero-k vem do custom.js: 1 enquanto a largura manda, menor que 1 quando a
   tela é mais horizontal que o frame e a altura passa a mandar. Ancorado embaixo
   e à esquerda, que é onde o bloco de texto vive no layout. */


.s-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 31.01vw; /* 521px */
    transform: scale(var(--hero-k, 1));
    transform-origin: left bottom;
}
.s-hero__texto {
    max-width: 27.62vw; /* 464px */
}


/* Seção 2 — Big Numbers */


.stats {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* Quebra de linha forçada pelo custom.js quando o último item ficaria sozinho.
   Ocupa a linha inteira com altura zero; o recuo negativo aplicado via JS nos
   itens seguintes compensa o row-gap extra que essa linha vazia criaria. */


.stats__quebra {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.stats__number {
    display: flex;
    align-items: baseline;
    color: var(--laranja);
}


/* A largura fica reservada para o total de dígitos do valor final (--digitos vem do PHP),
   então a contagem não empurra o prefixo e o sufixo para os lados. */

.stats__number-value {
    display: inline-block;
    min-width: calc(var(--digitos, 1) * 1ch);
    text-align: center;
}
.stats__label {
    display: block;
    color: var(--cinza);
}
.s-about__eyebrow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--cinza);
    user-select: none;
}
.s-about__eyebrow a {
    color: var(--cinza);
}
.s-about__eyebrow a:hover {
    color: var(--laranja);
}


/* Wrapper interno das seções centralizadas — 136px de recuo no Figma */


.wrapper-inset {
    padding-left: 8.1vw;
    padding-right: 8.1vw;
}


/* Seção 3 — Origem / Trajetória / Filosofia */


.values-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.value-card__icon {
    width: auto;
    height: 2.14vw; /* 36px */
}
.value-card h3 {
    color: var(--laranja);
}
.value-card__texto {
    color: var(--cinza);
    max-width: 20.3vw; /* 341px */
}


/* Divisor laranja 40 x 3 px */


.divider-laranja {
    display: block;
    width: 2.38vw;
    height: 0.18vw;
    background-color: var(--laranja);
}


/* Seção 4 — Histórico de Investimentos */


/* Flex em vez de grid: a última linha incompleta centraliza sozinha.
   O gap vive na variável porque o cálculo da largura do card depende dele. */

.track-grid {
    --track-cols: 5;
    --track-gap: 1.43vw; /* 24px */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--track-gap);
}
.track-grid--6 {
    --track-cols: 6;
}
.track-grid > .track-card {
    flex: 0 0 auto;
    width: calc((100% - (var(--track-cols) - 1) * var(--track-gap)) / var(--track-cols));
}
.track-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1;
    background-color: var(--off-white);
    border-radius: 0.36vw; /* 6px */
    box-shadow: 0 0 0.77vw 0.36vw rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.track-card__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.98vw; /* 50px */
}


/* SVG inline em vez de mask. O 1px de sangria no topo cobre a linha de antialiasing
   que o Chrome desenha na borda do overflow:hidden + border-radius do card. */

.track-card__ribbon {
    position: absolute;
    left: 0;
    top: -1px;
    width: 7.68vw; /* 129px */
    height: calc(2.98vw + 1px); /* 50px */
    fill: var(--cinza-escuro);
}
.track-card.is-active .track-card__ribbon {
    fill: var(--laranja);
}
.track-card__ano {
    position: relative;
    z-index: 1;
    width: 50%;
    color: var(--branco);
}
.track-card__logo {
    position: absolute;
    z-index: 1;
    width: auto;
    max-height: 4.2vw;
    max-width: 35%;
    top: 0.6vw;
    right: 3.8vw;
    transform: translateX(50%);
    margin: 0 auto;
}
.track-card__nome, .track-card__setor {
    color: var(--cinza-escuro);
}
.track-card.is-active .track-card__nome, .track-card.is-active .track-card__setor {
    color: var(--laranja);
}
.track-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--laranja);
}
.track-legend__dot {
    width: 0.83vw;
    height: 0.83vw;
    border-radius: 0.12vw;
    background-color: var(--laranja);
    flex-shrink: 0;
}


/* Seção 5 — Time */


.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--cinza-escuro);
    border-radius: 1.43vw; /* 24px */
    box-shadow: 0 0 0.77vw 0.24vw rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.team-card__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


/* z-index: 0 cria o contexto de empilhamento para o quadrado laranja ficar atrás da foto */

.team-card__photo-wrap {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
}
.team-card__photo {
    position: relative;
    z-index: 1;
    width: 17.68vw; /* 297px */
    aspect-ratio: 1 / 1;
    border-top-left-radius: 4.88vw; /* 82px */
    overflow: hidden;
}
.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Figma: 10px à direita e 10px abaixo da foto, por baixo dela */

.team-card__accent {
    position: absolute;
    right: -0.6vw;
    bottom: -0.6vw;
    z-index: 0;
    width: 5.77vw; /* 97px */
    height: 5.77vw;
    background-color: var(--laranja);
}


/* Ornamento do canto inferior direito — 100 x 37px no Figma */

.team-card__ornamento {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5.95vw;
    height: auto;
    pointer-events: none;
}
.team-card__badge {
    width: 1.41vw; /* 23.6px */
    height: auto;
    flex-shrink: 0;
}
.team-card__content {
    position: relative;
    display: flex;
    flex-direction: column;
}
.team-card__cargo {
    color: var(--laranja);
}
.team-card__toggle {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--laranja);
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}


/* Abre/fecha por grid-template-rows: anima até a altura real do conteúdo e aceita cubic-bezier */

.team-card__bio {
    display: grid;
    grid-template-rows: 0fr;
    color: var(--branco);
    transition: grid-template-rows 300ms cubic-bezier(0.75, 0, 0.25, 1);
}
.team-card__bio-inner {
    overflow: hidden;
    min-height: 0;
}
.team-card.is-open .team-card__bio {
    grid-template-rows: 1fr;
}
.team-card.is-open .team-card__toggle {
    padding-top: 1.7em;
}
@media (prefers-reduced-motion: reduce) {
    .team-card__bio {
        transition-duration: 1ms;
    }
}


/* Seção 6 — Cobertura na mídia */


.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: row dense;
    align-items: stretch;
}


/* Figma: 160px da borda da página até o grid — 36 de gutter + 124.5 de recuo */

.media-inset {
    padding-left: 7.41vw;
    padding-right: 7.41vw;
}
.media-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--branco-gelo);
    border-radius: 1.43vw; /* 24px */
    box-shadow: 0 0 0.77vw rgba(0, 0, 0, 0.1);
}
.media-card.is-hidden {
    display: none;
}


/* O card vertical ocupa a altura de duas linhas do grid */

.media-card--vertical {
    grid-row: span 2;
}
.media-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.media-card__meta {
    display: flex;
    flex-direction: column;
}
.media-card__veiculo, .media-card__data {
    color: var(--laranja);
}
.media-card__logo-link {
    display: block;
    flex-shrink: 0;
    max-width: 45%;
}
.media-card__logo {
    width: auto;
    height: 2.2vw; /* 37px */
    max-width: 100%;
    object-fit: contain;
}
.media-card__chamada {
    display: block;
    color: var(--cinza-escuro);
}
.media-card__texto {
    color: var(--cinza-escuro);
}
.media-card__imagem {
    display: block;
    width: 100%;
}
.media-card__imagem img {
    display: block;
    width: 100%;
    height: auto;
}
.media-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.36vw; /* 6px */
    margin-top: auto;
    color: var(--laranja);
}
.media-card__link-icon {
    width: 0.83vw; /* 14px */
    height: auto;
    flex-shrink: 0;
}


/* FOOTER */


.footer {
    min-height: 100vh;
    margin-top: 1px;
    display: flex;
/*    max-height: 60vw;*/
    background-color: var(--cinza-escuro);
    color: var(--branco);
}
.footer__wrapper {
    width: 100%;
    margin-top: auto;
    height: auto;
    min-height: 33vw; /* Figma: 580px = 34.52vw */
}
.redes_sociais i {
    font-size: 1.7em;
}


/* O parágrafo de abertura não soma margin ao gap-48 da coluna */

.footer__col--intro > p {
    margin: 0;
}
.footer__inner {
    display: flex;
    align-items: flex-start;
}
.footer__col--intro {
    width: 46.43vw; /* 780px */
}
.footer__col--resto {
    display: flex;
    align-items: flex-start;
    flex: 1 0 0;
    min-width: 0;
}
.footer__col--contatos, .footer__col--newsletter {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    min-width: 0;
}
.footer__logo {
    display: block;
    width: 12.8vw;
    height: auto;
}
.footer__contato-label {
    display: block;
    color: var(--branco);
}
.footer__contato-valor a {
    text-decoration: none;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 0.055em;
}
.footer__contato-valor a:hover {
    text-decoration: underline;
}
.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer__credit {
    margin-left: auto;
}