/* block 1 */
html.w-mod-js:not(.w-mod-ix3) :is(#hero-overline, #background-logo-02, #background-logo-01, #text-pattern-04, #text-pattern-03, #text-pattern-02, #text-pattern-01) {visibility: hidden !important;}
/* block 2 */
/* ================================================================================================ */
/* == CSS para Rolagem Suave (Lenis.js) =========================================================== */
/* ================================================================================================ */
/* Estilos necessários para o funcionamento correto da biblioteca de rolagem suave Lenis.js. */
html.lenis {
height: auto; /* Permite que a altura da tag se ajuste automaticamente. */
}
.lenis.lenis-smooth {
scroll-behavior: auto; /* Desativa a rolagem suave nativa do navegador para evitar conflitos. */
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain; /* Impede que a rolagem dentro de um elemento "vaze" para a página. */
}
.lenis.lenis-stopped {
overflow: hidden; /* Esconde a barra de rolagem quando o Lenis está pausado. */
}
/* ================================================================================================ */
/* End of CSS para Rolagem Suave (Lenis.js) ======================================================= */
/* ================================================================================================ */
/* block 3 */
/* ================================================================================================ */
/* Configurações Globais de Layout e Elementos ==================================================== */
/* ================================================================================================ */
/* Configurações gerais para layout, elementos HTML e componentes interativos */
/* ------------------------------------------------------------- */
/* Configuração de Variáveis CSS ------------------------------- */
/* ------------------------------------------------------------- */
:root {
--grid-breakout: [full-start] minmax(0, 1fr) [content-start]
repeat(var(--site--column-count), minmax(0, var(--site--column-width)))
[content-end] minmax(0, 1fr) [full-end]; /* Grid breakout para múltiplas colunas com áreas nomeadas */
--grid-breakout-single: [full-start] minmax(0, 1fr) [content-start]
minmax(0, var(--container--main)) [content-end] minmax(0, 1fr) [full-end]; /* Grid breakout para coluna única com áreas nomeadas */
}
/* ------------------------------------------------------------- */
/* Configurações Gerais de Elementos HTML ---------------------- */
/* ------------------------------------------------------------- */
* {
vertical-align: bottom; /* Alinha verticalmente todos os elementos para a parte inferior */
}
::before,
::after {
box-sizing: border-box; /* Define como o padding e a borda são calculados no modelo de caixa */
}
html {
background-color: var(
--_theme---background
); /* Define a cor de fundo do documento usando variável CSS */
}
/* ------------------------------------------------------------- */
/* Configurações de Botões ------------------------------------- */
/* ------------------------------------------------------------- */
button {
background-color: unset; /* Remove a cor de fundo padrão do botão */
padding: unset; /* Remove o preenchimento padrão do botão */
text-align: inherit; /* Herda o alinhamento de texto do elemento pai */
}
button:not(:disabled) {
cursor: pointer; /* Altera o cursor para "pointer" quando o botão não está desabilitado */
}
/* ------------------------------------------------------------- */
/* Configurações de Mídia -------------------------------------- */
/* ------------------------------------------------------------- */
video {
width: 100%; /* Faz o vídeo ocupar 100% da largura do contêiner pai */
object-fit: cover; /* Ajusta o tamanho do vídeo para cobrir completamente o contêiner, mantendo a proporção */
}
/* Remove padding de elementos vazios */
.wf-empty {
padding: 0; /* Remove padding para elementos com a classe 'wf-empty' */
}
svg {
max-width: 100%; /* Define a largura máxima de SVGs para 100% do contêiner pai */
}
/* ------------------------------------------------------------- */
/* Configurações de Seções Estruturais ------------------------- */
/* ------------------------------------------------------------- */
section,
header,
footer {
position: relative; /* Define o posicionamento como relativo para se tornar um ponto de referência para elementos filhos posicionados de forma absoluta */
}
/* ------------------------------------------------------------- */
/* Configurações para Modo Claro ------------------------------- */
/* ------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
option {
color: black; /* Define a cor do texto das opções de seleção para preto em temas claros */
}
}
/* ------------------------------------------------------------- */
/* Configuração de Seleção de Imagens -------------------------- */
/* ------------------------------------------------------------- */
img::selection {
background: transparent; /* Define o fundo como transparente quando uma imagem é selecionada, evitando destacar a seleção com uma cor */
}
/* ------------------------------------------------------------- */
/* Estilos de Visibilidade ------------------------------------- */
/* ------------------------------------------------------------- */
/* Ocultar elementos vazios ou condicionais */
.u-hide-if-empty:empty,
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
.u-embed-js,
.u-embed-css {
display: none !important; /* Força a não exibição do elemento, importante para sobrepor outras regras */
}
/* ------------------------------------------------------------- */
/* Seletores de Classes Globais -------------------------------- */
/* ------------------------------------------------------------- */
/* Elementos com posição absoluta */
[class*="u-float-"] {
position: absolute;
z-index: 0;
margin-top: var(--_content---float-margin-h);
margin-right: var(--_content---float-margin-h);
margin-bottom: var(--_content---float-margin-h);
margin-left: var(--_content---float-margin-h);
}
/* Classes variadas de Aspect Ratio */
[class*="u-ratio-"] {
position: relative;
object-fit: cover;
overflow: hidden;
}
/* Classes utilitárias para definir os tamanhos dos ícones */
[class*="u-svg-icon-"] {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
}
/* Classes utilitárias para definir os tamanhos dos ícones */
[class*="u-media-wrap-"] {
position: relative;
overflow: hidden;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
/* ------------------------------------------------------------- */
/* Estilos de Visibilidade ------------------------------------- */
/* ------------------------------------------------------------- */
.u-grid-custom {
display: grid;
grid-auto-columns: minmax(0px, 1fr);
column-gap: var(--site--gutter);
row-gap: var(--site--gutter);
grid-template-rows: auto;
--_column-count---value: 1;
grid-template-columns: repeat(var(--_column-count---value), minmax(0, 1fr));
}
.styleguide_layout {
position: relative;
display: flex;
flex-flow: row;
align-items: start;
grid-auto-columns: 1fr;
column-gap: var(--site--gutter);
row-gap: var(--_spacing---space--9);
--_column-count---value: 12;
}
/* block 4 */
/* ================================================================================================ */
/* Configurações Globais de Texto ================================================================= */
/* ================================================================================================ */
/* Ajustes de configurações nativas do Webflow para textos e classes de customização */
/* ---------------------------------------------------------- */
/* Configurações Gerais do Body ----------------------------- */
/* ---------------------------------------------------------- */
body {
text-transform: var(
--_text-style---text-transform
); /* Aplica transformação de texto definida em variável CSS */
font-smoothing: antialiased; /* Suaviza as fontes para melhor renderização */
-webkit-font-smoothing: antialiased; /* Suaviza as fontes no WebKit/Safari */
}
/* ---------------------------------------------------------- */
/* Limpeza de Estilos Padrão -------------------------------- */
/* ---------------------------------------------------------- */
/* -- Links sem classe específica -- */
a:not([class]) {
text-decoration: underline; /* Adiciona sublinhado a links que não possuem classe específica */
}
/* -- Títulos, parágrafos e elementos de texto -- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
label {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-wrap: inherit;
margin-top: 0;
margin-bottom: 0;
}
/* ------------------------------------------------------------- */
/* Configuração de Seleção de Texto ---------------------------- */
/* ------------------------------------------------------------- */
::selection {
background-color: var(
--_theme---selection--background
); /* Define a cor de fundo da seleção de texto usando variável CSS */
color: var(
--_theme---selection--text
); /* Define a cor do texto selecionado usando variável CSS */
}
/* -------------------------------------------------------------------------------------------- */
/* Estilos de Links em Rich Text --------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.w-richtext a {
position: relative; /* Define o posicionamento como relativo para links dentro de rich text */
z-index: 4; /* Garante que os links em rich text fiquem sobrepostos a outros elementos */
}
/* -------------------------------------------------------------------------------------------- */
/* Limitação de Linhas (Line Clamp) ----------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.u-line-clamp-1,
.u-line-clamp-2,
.u-line-clamp-3,
.u-line-clamp-4 {
-webkit-line-clamp: 1; /* Define o número máximo de linhas para 1 */
-webkit-box-orient: vertical; /* Define a orientação vertical para o overflow de texto */
}
.u-line-clamp-2 {
-webkit-line-clamp: 2; /* Define o número máximo de linhas para 2 */
}
.u-line-clamp-3 {
-webkit-line-clamp: 3; /* Define o número máximo de linhas para 3 */
}
.u-line-clamp-4 {
-webkit-line-clamp: 4; /* Define o número máximo de linhas para 4 */
}
/* block 5 */
/* ================================================================================================ */
/* Ajustes Globais de altura das fontes - Line Height Trim ======================================= */
/* ================================================================================================ */
/* Ajuste a altura padrão das caixas de texto de cada fonte para um melhor espaçamento */
/* ---------------------------------------------------------- */
/* Heading Styles ------------------------------------------- */
/* ---------------------------------------------------------- */
[class*="u-heading-style-"]:not(.w-richtext, .u-text-trim-off) {
display: flow-root;
}
[class*="u-heading-style-"]:not(.w-richtext, .u-text-trim-off)::before {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_heading-style---trim-top));
}
[class*="u-heading-style-"]:not(.w-richtext, .u-text-trim-off)::after {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_heading-style---trim-bottom));
}
/* ---------------------------------------------------------- */
/* Subtitles Styles ----------------------------------------- */
/* ---------------------------------------------------------- */
[class*="u-subtitle-style-"]:not(.w-richtext, .u-text-trim-off) {
display: flow-root;
}
[class*="u-subtitle-style-"]:not(.w-richtext, .u-text-trim-off)::before {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_subtitle-style---trim-top));
}
[class*="u-subtitle-style-"]:not(.w-richtext, .u-text-trim-off)::after {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_subtitle-style---trim-bottom));
}
/* ---------------------------------------------------------- */
/* Text Styles ---------------------------------------------- */
/* ---------------------------------------------------------- */
[class*="u-text-style-"]:not(.w-richtext, .u-text-trim-off) {
display: flow-root;
}
[class*="u-text-style-"]:not(.w-richtext, .u-text-trim-off)::before {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_text-style---trim-top));
}
[class*="u-text-style-"]:not(.w-richtext, .u-text-trim-off)::after {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_text-style---trim-bottom));
}
/* ---------------------------------------------------------- */
/* Overline Styles ------------------------------------------ */
/* ---------------------------------------------------------- */
[class*="u-overline-style-"]:not(.w-richtext, .u-text-trim-off) {
display: flow-root;
}
[class*="u-overline-style-"]:not(.w-richtext, .u-text-trim-off)::before {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_overline-style---trim-top));
}
[class*="u-overline-style-"]:not(.w-richtext, .u-text-trim-off)::after {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_overline-style---trim-bottom));
}
/* ---------------------------------------------------------- */
/* Caption Styles ------------------------------------------- */
/* ---------------------------------------------------------- */
[class*="u-caption-style-"]:not(.w-richtext, .u-text-trim-off) {
display: flow-root;
}
[class*="u-caption-style-"]:not(.w-richtext, .u-text-trim-off)::before {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_caption-style---trim-top));
}
[class*="u-caption-style-"]:not(.w-richtext, .u-text-trim-off)::after {
content: "";
display: table;
margin-bottom: calc(-0.5em + var(--_caption-style---trim-bottom));
}
/* block 6 */
*::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
border-radius: var(--_border-styles---radius--round);
}
/*track*/
*::-webkit-scrollbar-track {
background: var(--_color-primitives---neutral--700);
border-radius: var(--_border-styles---radius--round);
}
/*thumb*/
*::-webkit-scrollbar-thumb {
background: var(--_theme---brand-primary--main);
border-radius: var(--_border-styles---radius--round);
border-color: var(--_color-primitives---neutral--700);
border-width: 0.125rem;
border-style: solid;
}
/*thumb hover*/
*::-webkit-scrollbar-thumb:hover {
background: var(--_theme---brand-primary--light);
border-radius: var(--_border-styles---radius--round);
}
/*thumb pressed*/
*::-webkit-scrollbar-thumb:active {
background: var(--_theme---brand-primary--light);
border-radius: var(--_border-styles---radius--round);
}
/* block 7 */
/* ================================================================================================ */
/* Configurações Globais de Espaçamento =========================================================== */
/* ================================================================================================ */
/* Ajustes de configurações nativas do Webflow para espaçamentos e classes de customização */
/* ------------------------------------------------------------- */
/* Ajuste de Margens (Margin Trim) ----------------------------- */
/* ------------------------------------------------------------- */
:is(.u-margin-trim, .u-rich-text)
> :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)) {
margin-top: 0; /* Remove a margem superior seletivamente para evitar margens indesejadas entre elementos condicionais */
}
:is(.u-margin-trim, .u-rich-text) > :not(:has(~ :not(.w-condition-invisible))) {
margin-bottom: 0; /* Remove a margem inferior seletivamente para evitar margens indesejadas entre elementos condicionais */
}
/* ------------------------------------------------------------- */
/* Contenção de Elementos Filhos ------------------------------- */
/* ------------------------------------------------------------- */
.u-child-contain > * {
width: 100%; /* Define a largura dos elementos filhos como 100% */
max-width: inherit !important; /* Força a herança da largura máxima do elemento pai */
margin-inline: 0 !important; /* Remove as margens laterais dos elementos filhos */
margin-top: 0 !important; /* Remove a margem superior dos elementos filhos */
}
[class*="u-base-vertical-layout"] > * > :not(.overline-wrap) {
margin-bottom: 0;
}
/* ================================================================================================ */
/* End of Configurações Globais de Texto ========================================================== */
/* ================================================================================================ */
/* Galeria sliders: overlays “cortina” (.background-load-*-2) vêm com display:block inline e cobrem a
foto até a animação IX do Webflow rodar — em export/file:// elas ficam eternamente visíveis.
O lightbox não usa essas divs, por isso lá as imagens ok. */
.slide_img-2 .background-load-top-2,
.slide_img-2 .background-load-bottom-2 {
display: none !important;
}
/* Lightbox simples (dialog) — mesma ideia visual: fundo escuro, imagem central, miniaturas em baixo */
.arborea-lb-dlg {
border: none;
padding: 0;
margin: auto;
max-width: 100vw;
max-height: 100vh;
width: min(96vw, 1400px);
background: transparent;
color: #fff;
}
.arborea-lb-dlg::backdrop {
background: rgba(0, 0, 0, 0.92);
}
.arborea-lb-shell {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 40vh;
padding: 2.5rem 0.5rem 0.75rem;
box-sizing: border-box;
}
.arborea-lb-stage {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-height: 78vh;
}
.arborea-lb-img {
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
object-fit: contain;
vertical-align: middle;
}
.arborea-lb-close {
position: absolute;
top: 0.25rem;
right: 0.25rem;
z-index: 3;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
line-height: 1;
color: #fff;
background: rgba(0, 0, 0, 0.35);
border-radius: 4px;
border: none;
cursor: pointer;
}
.arborea-lb-close:hover {
background: rgba(255, 255, 255, 0.15);
}
.arborea-lb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 2.75rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.25rem;
line-height: 1;
color: #fff;
background: rgba(0, 0, 0, 0.35);
border: none;
cursor: pointer;
border-radius: 4px;
}
.arborea-lb-arrow:hover {
background: rgba(255, 255, 255, 0.12);
}
.arborea-lb-arrow--prev {
left: 0.15rem;
}
.arborea-lb-arrow--next {
right: 0.15rem;
}
.arborea-lb-strip {
display: flex;
flex-wrap: nowrap;
gap: 0.35rem;
overflow-x: auto;
max-width: 100%;
padding: 0.5rem 0 0;
margin-top: 0.25rem;
-webkit-overflow-scrolling: touch;
}
.arborea-lb-thumb {
flex: 0 0 auto;
width: 56px;
height: 42px;
padding: 0;
border: 2px solid transparent;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
opacity: 0.75;
background: #111;
}
.arborea-lb-thumb:hover {
opacity: 1;
}
.arborea-lb-thumb.is-active {
opacity: 1;
border-color: #fff;
}
.arborea-lb-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
vertical-align: middle;
}