/* Font Faces */
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 100;
    src: url('root/fonts/Apparat Thin.woff2') format('woff2');
}
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 200;
    src: url('root/fonts/Apparat ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 300;
    src: url('root/fonts/Apparat Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 400;
    src: url('root/fonts/Apparat Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 500;
    src: url('root/fonts/Apparat Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 600;
    src: url('root/fonts/Apparat Semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Apparat';
    font-style: normal;
    font-weight: 300;
    src: url('root/fonts/Apparat Bold.woff2') format('woff2');
}

:root{
    --cor-texto-preto: #111110;
    --cor-titulo: #6E7570;
    --cor-cinza: #C8C8C8;
    --fonte: 'Apparat', sans-serif;
}

/* Reset global - inclui padding e border na largura */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html{
    overflow-x: hidden;
}

body{
    font-family: var(--fonte);
    color: var(--cor-texto-principal);
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Background global responsivo com parallax */
/* O JavaScript controla a posição do background para criar efeito de velocidade reduzida */
body{
    background-image: url('root/img/bg.png');
    background-repeat: repeat; /* repete o fundo indefinidamente (vertical e horizontal) */
    background-position: center top; /* posição inicial */
    background-size: 80% auto; /* mantém o tamanho original da imagem para repetir corretamente */
    /* parallax controlado via JS - fundo se move 0.5x mais lento que o scroll */
}

/* Overlay branco leve sobre o fundo */
body::before{
    content: '';
    position: fixed; /* fica fixo sobre o fundo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7f7f748; /* branco semi-transparente - ajuste a opacidade (0.1 a 0.5) */
    pointer-events: none; /* permite clicks através do overlay */
    z-index: -1; /* fica atrás do conteúdo mas sobre o background */
}

.site-header{
    width: 95%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.logo{
    display: block;
    position: relative;
    width: 200px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 10px;
}

.banner {
    display: flex;
    justify-content: center;
    overflow: visible;
    position: relative; /* necessário para posicionar o texto */
}

.bannerimg {
    display: block;
    width: 95%;
    max-width: 1300px;
    height: auto;
}

/* Container de texto sobre o banner - canto inferior direito */
.banner-texto{
    position: absolute;
    bottom: 20px;
    right: calc((100% - min(95vw, 1300px)) / 2 + 20px);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    margin: 0;
    padding: 0;
}

/* Imagem dentro do banner-texto - proporção 1:1 */
.banner-icone{
    width: 45px;
    height: 45px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.banner-texto p,
.banner-texto h2{
    margin: 0;
    padding: 0;
    color: var(--cor-texto-preto);
    font-size: 1rem;
    font-weight: 400;
}

section + section {
    width: 85%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

/* Animação de entrada das sections ao scrollar */
section {
    opacity: 0; /* inicia invisível */
    transform: translateY(30px); /* inicia 30px abaixo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* suaviza a animação - ajuste duração aqui */
}

/* Quando a section entra no viewport */
section.visible {
    opacity: 1; /* totalmente visível */
    transform: translateY(0); /* posição final */
}

.titulo-preto{
    margin-top: auto;
    margin-bottom: auto;
    font-size: 2.7vh;
}
.texto-desc{
    text-align: justify;
    margin-top: auto;
    margin-bottom: auto;
}

.dados{
    width: 90%; /* Garante que a seção ocupe toda a largura */
    padding-top: 50px; /* Espaço entre a linha de cima e o conteúdo */
    padding-bottom: 50px; /* Espaço entre o conteúdo e a linha de baixo */
    border-top: 3px solid #11111057; /* Cria a linha de cima */
    border-bottom: 3px solid #11111057; /* Cria a linha de baixo */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 30px; /* espaço entre as colunas */
    align-items: center; /* centraliza verticalmente o conteúdo em todas as colunas */
}

/* Cada segmento-dados ocupa 1/4 do espaço (4 colunas) */
.segmento-dados{
    flex: 1; /* todas as colunas têm o mesmo tamanho */
    text-align: center; /* centraliza o conteúdo dentro de cada coluna */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centraliza verticalmente o conteúdo interno */
    align-items: center; /* centraliza horizontalmente o conteúdo interno */
}

/* Segmento de texto (citação) - ocupa menos espaço */
.segmento-dados:nth-child(2){
    flex: 0.7; /* ocupa 70% do espaço das outras colunas */
}

/* Imagem do time-grupo */
.time-grupo{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Grupo de estatísticas - mantém as 3 colunas sempre juntas */
.grupo-estatisticas{
    flex: 1.5; /* ocupa 50% a mais de espaço que outras colunas principais */
    display: flex;
    gap: 20px; /* espaço menor entre as estatísticas */
    align-items: center;
}

/* Segmentos dentro do grupo de estatísticas */
.grupo-estatisticas .segmento-dados{
    flex: 1; /* divide igualmente o espaço entre as 3 estatísticas */
    white-space: nowrap; /* evita quebra de linha no texto */
}

/* Texto dentro do grupo de estatísticas - evita quebra de linha */
.grupo-estatisticas .texto-desc{
    white-space: nowrap; /* mantém o texto em uma linha */
    font-size: 1.1rem; /* aumenta o tamanho da fonte */
}

/* Títulos dentro do grupo de estatísticas */
.grupo-estatisticas .titulo-preto{
    font-size: 2.5rem; /* aumenta o tamanho dos números */
}

/* retangulos */
.retangulotipo1{
    background-color: var(--cor-cinza);
    width: 80%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;    
    padding-bottom: 20px;
    box-shadow: #11111057 0px 5px 10px;
    display: flex;
    gap: 20px;
    
    margin-left: auto;
    margin-right: auto;/* espaço entre as caixas */
}

.retangulotipo2{
    background-color: var(--cor-cinza);
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    box-shadow: #11111057 0px 5px 10px;
    padding: 20px 40px;
    margin: 60px auto 0; /* centraliza e respeita o espaçamento de section + section */
    display: flex;
    flex-wrap: wrap; /* permite quebra de linha se necessário */
    gap: 20px; /* espaço entre as colunas - ajuste conforme necessário */
    column-gap: 30px; /* espaço horizontal entre colunas - ajuste conforme necessário */
    align-items: stretch; /* garante que todos os itens tenham a mesma altura */
}

.retangulotipo3{
    background-color: var(--cor-cinza);
    width: 80%;
    padding: 30px 40px; /* padding unificado */
    box-shadow: #11111057 0px 5px 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap; /* permite quebra de linha */
    gap: 25px; /* espaço entre as colunas - ajuste conforme necessário */
    column-gap: 30px; /* espaço horizontal específico entre colunas */
}

.retangulotipo4{
    background-color: var(--cor-cinza);
    width: 80%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;    
    padding-bottom: 20px;
    box-shadow: #11111057 0px 5px 10px;
    display: flex;
    gap: 20px;
    align-items: center; /* centraliza verticalmente */
    justify-content: space-between; /* espaça conteúdo, botão à direita */
    
    margin-left: auto;
    margin-right: auto;/* espaço entre as caixas */
}

.retangulotipo5{
    background-color: #c8c8c8ab;
    /* blur do fundo atrás da coluna */
    background-color: #c8c8c88e;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    width: 80%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;    
    padding-bottom: 20px;
    box-shadow: #11111057 0px 5px 10px;
    display: flex;
    gap: 20px;
    margin-top:  25px;
    align-items: center; /* centraliza verticalmente */
    justify-content: space-between; /* espaça conteúdo, botão à direita */
    will-change: backdrop-filter;
    margin-left: auto;
    margin-right: auto;/* espaço entre as caixas */
}

/* Primeira div com texto no retangulotipo4 */
.retangulotipo4 > div:first-child{
    flex: 1; /* ocupa espaço disponível */
}

/* Segunda div com botão no retangulotipo4 - ancorada à direita */
.retangulotipo4 > div:last-child{
    flex: 0 0 auto; /* não cresce nem encolhe, tamanho do conteúdo */
}

/* Divs dentro do retangulotipo3 - 4 colunas */
.retangulotipo3 > div{
    flex: 0 0 calc(25% - 23px); /* 4 colunas (25% cada), menos ajuste do gap */
    box-sizing: border-box;
    text-align: left;
}

/* Espaçamento entre elementos internos (título e parágrafo) */
.retangulotipo3 > div h2{
    margin-bottom: 8px; /* espaço entre título e texto - ajuste conforme necessário */
}

.retangulotipo3 > div p{
    margin-top: 0; /* remove margem superior padrão */
    display: flex;
    gap: 20px;
    
    margin-left: auto;
    margin-right: auto;/* espaço entre as caixas */
}

/* Parágrafos dentro do retangulotipo2 - 3 colunas com width fixo */
.retangulotipo2 .texto-desc{
    flex: 0 0 calc((100% - 60px) / 3); /* divide em 3 colunas exatas, descontando os 2 gaps (30px cada) */
    margin: 0; /* remove margens padrão */
    box-sizing: border-box; /* inclui padding e border no cálculo da largura */
}

.coluna-fundo{
    background-color: #c8c8c8ab;
    /* blur do fundo atrás da coluna */
    background-color: #c8c8c88e;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    will-change: backdrop-filter;
}

.segmento-contatos{
    background-color: #c8c8c815;
    /* blur do fundo atrás da coluna */
    background-color: #c8c8c88e;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    will-change: backdrop-filter;
}

/* Layout das caixas internas */
.titulo-box{
    flex: 0 0 30%; /* ocupa 30% */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Centraliza verticalmente o conteúdo dentro do wrapper (ajuste rápido: alinhar no centro) */
.titulo-box{
    display: flex; /* habilita alinhamento vertical */
    align-items: center; /* centraliza verticalmente */
    justify-content: flex-start; /* mantém o alinhamento horizontal à esquerda - altere para center se quiser centralizar */
}

.texto-box{
    flex: 0 0 calc(70% - 20px); /* ocupa 70% menos o gap */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Fontes */
.titulo-cinza{
    color: var(--cor-titulo);
    margin-top: -10px; /* reduz espaço acima (ajuste este valor) */
}
.titulo-mini{
    color: var(--cor-texto-preto);
    font-size: 15px;
    font-weight: 200;
    margin-bottom: 5px; /* reduz espaço abaixo (ajuste este valor) */
}

.texto-desc{
    color: var(--cor-texto-preto);
    font-size: 1rem;
    font-weight: 200;
}

/* Grid de imagens de segmento */
.segmentos-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* espaço entre as imagens - ajuste conforme necessário */
    justify-content: center;
    margin-top: 30px;
}

/* Container individual de cada segmento (imagem + texto) */
.segmento-item{
    position: relative; /* permite posicionamento absoluto do texto */
    width: calc(50% - 10px); /* 2 itens por linha, menos metade do gap */
    overflow: hidden; /* não vaza conteúdo */
}

/* Imagens de segmento - tamanho uniforme */
.segmento-item img{
    width: 100%; /* preenche o container */
    height: auto;
    aspect-ratio: 16/9; /* mantém proporção - ajuste se necessário */
    object-fit: cover; /* preenche o espaço mantendo proporção */
    display: block;
}

/* Container de texto sobre a imagem (canto superior esquerdo) */
.segmento-texto{
    position: absolute;
    top: 0; /* canto superior */
    left: 0; /* canto esquerdo */
    padding: 15px; /* espaçamento interno - ajuste conforme necessário */
    max-width: 80%; /* limita a largura do texto - ajuste conforme necessário */
    overflow: hidden; /* garante que nada vaze */
    color: #F7F7F7; /* cor do texto - ajuste conforme necessário */
}

/* Estilização do parágrafo dentro do container */
.segmento-texto p{
    margin: 0; /* remove margem padrão */
    font-size: 1rem; /* tamanho da fonte - ajuste conforme necessário */
    font-weight: 200;
    text-align: justify; /* sombra para melhorar legibilidade */
    text-shadow: #111110 0px 0px 15px,#111110 0px 0px 15px,#111110 0px 0px 15px,#111110 0px 0px 15px,#111110 0px 0px 15px ; /* sombra para melhorar legibilidade */
}

/* Seção Reunião - Layout horizontal texto + imagem */
.reuniao{
    display: flex;
    gap: 20px; /* espaço entre texto e imagem - ajuste conforme necessário */
    align-items: stretch; /* garante que ambos tenham a mesma altura */
}

/* Wrapper de texto - 40% do espaço */
.texto-reuniao{
    flex: 0 0 40%; /* ocupa 40% */
    display: flex;
    flex-direction: column; /* empilha elementos verticalmente */
    justify-content: center; /* centraliza verticalmente */
    align-items: flex-start; /* alinha à esquerda */
    gap: 8px; /* espaço reduzido entre elementos - ajuste conforme necessário */
}

/* Elementos dentro do wrapper de texto */
.texto-reuniao .titulo-cinza{
    margin-top: 0; /* remove margem superior */
    margin-bottom: 0; /* remove margem inferior */
    text-align: left; /* alinha à esquerda */
}

.texto-reuniao .texto-desc{
    margin-top: 0; /* remove margem superior */
    margin-bottom: 0; /* remove margem inferior */
    text-align: left; /* alinha à esquerda */
}

/* Wrapper da imagem - 60% do espaço */
.bannerlife{
    flex: 0 0 calc(60% - 20px); /* ocupa 60% menos o gap */
    overflow: hidden; /* não vaza conteúdo */
    display: flex;
    align-items: center; /* centraliza imagem verticalmente */
}

/* Imagem do banner */
.bannerlifeimg{
    width: 100%; /* preenche o container */
    height: 100%;
    object-fit: cover; /* preenche o espaço mantendo proporção */
    display: block;
}

/* Botão de agendar */
.botao-agendar{
    padding: 12px 30px; /* ajuste o padding conforme necessário */
    font-family: var(--fonte);
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    background-color: var(--cor-titulo);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* alinha à esquerda */
    margin-top: 5px; /* pequeno espaço extra acima do botão - ajuste conforme necessário */
}

.botao-agendar:hover{
    background-color: var(--cor-texto-preto); /* escurece no hover */
}

/* Seção Escritório - Layout título + botão */
.escritorio-box{
    display: flex;
    justify-content: space-between; /* título à esquerda, botão à direita */
    align-items: center; /* centraliza verticalmente */
    gap: 20px; /* espaço entre título e botão */
}

/* Primeira div (título) ocupa espaço disponível */
.escritorio-box > div:first-child{
    flex: 1; /* ocupa o espaço disponível */
    display: flex;
    align-items: center; /* centraliza o texto verticalmente */
}

/* Título dentro do escritorio-box */
.escritorio-box h2{
    margin: 0; /* remove margens para alinhamento perfeito */
}

/* Segunda div (botão) tem largura do conteúdo */
.escritorio-box > div:last-child{
    flex: 0 0 auto; /* não cresce nem encolhe */
    display: flex;
    align-items: center; /* centraliza o botão verticalmente */
}

/* Grid de 4 colunas - Por que escolher nosso escritório */
.escritorio-grid{
    display: flex;
    gap: 30px; /* espaço entre as colunas */
    align-items: stretch; /* todas as colunas mesma altura */
    margin-top: 30px;
}

.escritorio-grid > div{
    flex: 1; /* todas as colunas com tamanho igual */
}

/* Seção Nosso Time - 3 colunas espaçadas igualmente */
.time{
    display: flex;
    gap: 30px; /* espaço entre as colunas */
    align-items: stretch; /* faz todas as colunas terem a mesma altura */
    margin-top: 30px;
}

/* Cada coluna do time */
.coluna-time{
    flex: 1; /* todas as colunas com tamanho igual */
    display: flex;
    flex-direction: column;
    position: relative;/* para posicionamento absoluto do texto */
}

.coluna-time-fundo{
    background-color: var(--cor-cinza);
    padding: 15px;
    box-shadow: #11111057 0px 0px 10px;
}

/* Imagem principal da coluna - define a altura */
.coluna-img{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Texto das colunas 1 e 2 - não afeta layout */
.coluna-time > h2,
.coluna-time > p{
    position: relative; /* fica no fluxo normal mas não afeta altura da coluna */
}

/* Terceira coluna - container com duas imagens empilhadas */
.coluna-time:nth-child(3){
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* separa os dois blocos: topo e fundo */
    gap: 0; /* sem gap entre elementos */
    align-items: stretch; /* garante que os blocos ocupem a largura */
}

/* Blocos empilhados dentro da terceira coluna */
.emp-time{
    box-shadow: #11111057 0px 0px 10px;
    display: flex;
    flex-direction: column;
    position: relative;
     padding: 15px;
    background-color: var(--cor-cinza);
}

/* Primeira imagem empilhada - ancorada no topo da coluna time */
.emp-time:first-child{
    align-self: stretch; /* ocupa largura total */
}

/* Segunda imagem empilhada - ancorada no fundo da coluna time */
.emp-time:last-child{
    align-self: stretch; /* ocupa largura total */
    margin-top: auto; /* empurra para o fundo absoluto do container */
}

/* Imagens empilhadas */
.emp-img{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Texto dos blocos empilhados - não afeta layout */
.emp-time > h2,
.emp-time > p{
    position: relative; /* fica no fluxo mas não afeta posicionamento das imagens */
}

/* Seção Serviços - Layout horizontal título + botão */
.servicos{
    display: flex;
    justify-content: space-between; /* espaça as divs (título à esquerda, botão à direita) */
    align-items: center; /* centraliza verticalmente */
    gap: 20px; /* espaço entre as divs - ajuste conforme necessário */
}

/* Seção Processos - Layout imagem à esquerda e texto à direita */
.processos{
    display: flex;
    gap: 30px; /* espaço entre imagem e texto */
    align-items: stretch; /* faz com que ambas as divs tenham a mesma altura */
}

/* Primeira div com texto ocupa o espaço restante */
.processos > div:first-child{
    flex: 1; /* ocupa o espaço disponível */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centraliza o texto verticalmente */
}

/* Reduz o espaçamento entre os elementos de texto dentro da div */
.processos > div:first-child h3,
.processos > div:first-child h2,
.processos > div:first-child p{
    margin-top: 8px; /* reduz espaço superior */
    margin-bottom: 8px; /* reduz espaço inferior */
}

/* Segunda div com imagem tem largura fixa */
.processos > div:last-child{
    flex: 0 0 40%; /* ocupa 40% da largura */
    order: -1; /* move para a esquerda (antes do texto) */
    display: flex;
    align-items: stretch; /* permite que a imagem ocupe toda a altura */
}

/* Imagem do processo */
.processoimg{
    width: 100%;
    height: 100%; /* ocupa toda a altura do container */
    min-height: 100%; /* garante que nunca seja menor que o texto */
    object-fit: cover; /* preenche o espaço mantendo proporção */
    display: block;
}

/* Esconde banner-texto abaixo de 800px */
@media (max-width: 900px) {
    .banner-texto{
        display: none;
    }
}

/* mobile */
@media (max-width: 900px) {
    /* Previne overflow horizontal - regras gerais */
    *{
        max-width: 100%;
    }

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

    /* Garante que nada ultrapasse os limites */
    .coluna-contatos,
    .coluna-fundo,
    .segmento-contatos{
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Banner texto - centraliza e ajusta no mobile */
    .banner-texto{
        right: 50%;
        transform: translateX(50%); /* centraliza horizontalmente */
        bottom: 10px; /* reduz distância da base */
        gap: 10px; /* reduz gap entre imagem e texto */
        max-width: 85%; /* limita largura */
    }

    .banner-icone{
        width: 35px;
        height: 35px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .banner-texto p{
        font-size: 0.9rem; /* reduz tamanho da fonte */
    }

    .retangulotipo1{
        flex-direction: column;
        gap: 5px;
        width: 90%;
        padding: 20px;
    }
    
    .titulo-box,
    .texto-box{
        flex: 1 1 100%;
    }

    .titulo-preto{
        text-align: center;
        padding-bottom: none;
    }

    /* Remove margens padrões de títulos para evitar deslocamentos inesperados */
    .titulo-preto{
        margin: 0; /* ajuste se precisar de espaçamento vertical */
    }
    .texto-desc{
        padding-top: none;
    }

    /* Imagens empilhadas no mobile */
    .segmento-item{
        width: 100%; /* largura total - empilha verticalmente */
    }

    /* Seção reunião - empilha verticalmente com imagem em cima */
    .reuniao{
        flex-direction: column-reverse; /* inverte a ordem: imagem em cima, texto embaixo */
    }

    .texto-reuniao,
    .bannerlife{
        flex: 1 1 100%; /* ocupa 100% da largura */
    }

    .botao-agendar{
        align-self: center; /* centraliza o botão no mobile */
    }

    /* Parágrafos em coluna única no mobile */
    .retangulotipo2{
        flex-direction: column;
        gap: 20px;
        width: 90%;
        padding: 20px;
    }

    .retangulotipo2 .texto-desc{
        flex: 1 1 100%; /* ocupa 100% da largura */
    }

    /* Seção serviços - mantém layout horizontal no mobile */
    .servicos{
        /* mantém flex-direction: row (padrão) para não empilhar */
        gap: 10px; /* reduz o gap no mobile se necessário */
    }

    /* Retangulotipo3 - 1 coluna no mobile */
    .retangulotipo3{
        width: 90%;
        padding: 20px;
    }
    
    .retangulotipo3 > div{
        flex: 0 0 100%;
    }

    /* Seção processos - empilha verticalmente no mobile com imagem em cima */
    .processos{
        flex-direction: column; /* empilha verticalmente */
        gap: 20px; /* reduz o gap no mobile */
    }

    .processos > div:first-child,
    .processos > div:last-child{
        flex: 1 1 100%; /* ambas ocupam 100% da largura */
        order: 0; /* reseta a ordem */
    }

    .processos > div:last-child{
        order: -1; /* mantém imagem em cima */
    }

    /* Reduz tamanho da imagem no mobile */
    .processoimg{
        max-width: 80%; /* reduz para 80% da largura disponível */
        margin: 0 auto; /* centraliza */
    }

    /* Retangulotipo4 - empilha verticalmente no mobile */
    .retangulotipo4{
        flex-direction: column;
        width: 90%;
        padding: 20px;
    }

    /* Centraliza o botão dentro do retangulotipo4 no mobile */
    .retangulotipo4 > div:last-child{
        margin: 0 auto;
    }

    /* Retangulotipo5 - empilha verticalmente no mobile */
    .retangulotipo5{
        flex-direction: column;
        width: 90%;
        padding: 20px;
        gap: 20px;
    }

    /* Centraliza o botão dentro do retangulotipo5 no mobile */
    .retangulotipo5 > div:last-child{
        margin: 0 auto;
    }

    /* Seção dados - empilha verticalmente no mobile */
    .dados{
        flex-direction: column; /* empilha verticalmente */
        gap: 30px; /* mantém espaçamento entre os segmentos */
        width: 95%; /* aumenta a largura no mobile */
    }

    .segmento-dados{
        width: 100%; /* cada segmento ocupa 100% da largura */
    }

    /* Grupo de estatísticas - empilha verticalmente no mobile */
    .grupo-estatisticas{
        flex-direction: column; /* empilha as 3 estatísticas */
        gap: 25px;
        width: 100%;
    }

    /* Reduz largura da imagem no mobile */
    .time-grupo{
        max-width: 70%; /* reduz para 70% da largura disponível */
        margin: 0 auto;
    }

    /* Seção escritório - empilha verticalmente no mobile */
    .escritorio-box{
        flex-direction: column; /* empilha verticalmente */
        align-items: flex-start; /* alinha à esquerda */
        gap: 15px; /* reduz o gap no mobile */
    }

    .escritorio-box > div:first-child,
    .escritorio-box > div:last-child{
        width: 100%; /* ambas ocupam 100% da largura */
    }

    /* Grid de escritório - empilha verticalmente no mobile */
    .escritorio-grid{
        flex-direction: column; /* empilha verticalmente */
        gap: 25px; /* espaçamento entre items */
    }

    /* Seção time - empilha verticalmente no mobile */
    .time{
        flex-direction: column; /* empilha as 3 colunas */
        gap: 40px; /* espaçamento maior entre membros */
    }

    .coluna-time{
        width: 100%; /* cada coluna ocupa 100% */
    }

    /* Terceira coluna no mobile - mantém empilhamento */
    .coluna-time:nth-child(3){
        gap: 30px; /* espaço entre os dois blocos empilhados */
    }

    /* Elementos dentro da terceira coluna no mobile - mesma largura */
    .emp-time{
        width: 100%; /* ocupa 100% da largura da coluna */
    }

    .emp-img{
        width: 100%; /* imagem ocupa 100% */
    }

    /* Botão centralizado no mobile dentro do escritorio-box */
    .escritorio-box .botao-agendar{
        align-self: center;
    }

    /* Footer - ajusta para mobile */
    .site-footer{
        width: 100%;
        margin-left: 0;
        padding: 40px 0;
    }

    /* Footer content - mantém margens no mobile */
    .footer-content{
        width: 90%;
        padding: 0;
    }

    /* Grid de contatos - empilha verticalmente no mobile */
    .grid-contatos{
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    .coluna-contatos{
        width: 100%;
        max-width: 100%;
    }

    /* Reduz padding no mobile para evitar overflow */
    .coluna-fundo{
        padding: 20px;
        max-width: 100%;
        word-wrap: break-word;
    }

    .segmento-contatos{
        padding: 15px;
        max-width: 100%;
        word-wrap: break-word;
    }

    /* Alinhamento à esquerda no mobile */
    .coluna-contatos h2,
    .coluna-contatos p{
        text-align: left;
        word-wrap: break-word;
    }
}

/* Telas muito pequenas - ajustes extras */
@media (max-width: 400px) {
    .footer-content{
        width: 95%;
    }

    .coluna-fundo{
        padding: 15px;
    }

    .segmento-contatos{
        padding: 12px;
    }

    .grid-contatos{
        gap: 30px;
    }

    /* Reduz ainda mais todos os retangulotipos */
    .retangulotipo1,
    .retangulotipo2,
    .retangulotipo3,
    .retangulotipo4,
    .retangulotipo5{
        width: 95%;
        padding: 15px;
    }
}

/* Telas médias - 2 colunas */
@media (min-width: 900px) and (max-width: 1024px) {
    .retangulotipo3 > div{
        flex: 0 0 calc(50% - 15px); /* 2 colunas (50% cada), menos ajuste do gap */
    }

    /* Seção dados - empilha em telas médias */
    .dados{
        flex-direction: column; /* empilha verticalmente */
        gap: 25px;
    }

    /* Grupo de estatísticas mantém as 3 colunas lado a lado em telas médias */
    .grupo-estatisticas{
        flex-direction: row; /* mantém horizontal */
        width: 100%;
    }
}

/* Footer */
.site-footer{
    width: 100vw; /* ocupa 100% da largura do viewport */
    margin-left: calc(-50vw + 50%); /* remove margens laterais do body */
    background-image: url('root/img/footer-bg.webp');
    background-size: cover; /* cobre toda a área */
    background-position: center; /* centraliza a imagem */
    background-repeat: no-repeat; /* não repete a imagem */
    margin-top: 60px; /* espaçamento igual ao section + section */
    margin-bottom: 0; /* remove margem inferior */
    padding: 60px 0; /* padding vertical - ajuste conforme necessário */
    position: relative; /* necessário para o pseudo-elemento overlay */
}

/* Overlay com gradiente sobre o footer - de baixo para cima */
.site-footer::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #F4F4F4, transparent); /* gradiente de branco semi-transparente (baixo) para transparente (cima) */
    pointer-events: none; /* permite clicks através do overlay */
    z-index: 1; /* fica sobre o background mas abaixo do conteúdo */
}

/* Conteúdo interno do footer - respeita margens de section + section */
.footer-content{
    width: 85%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* fica acima do overlay */
    z-index: 2; /* garante que o conteúdo fique sobre o overlay */
}

/* Grid de contatos - 3 colunas */
.grid-contatos{
    display: flex;
    gap: 30px; /* espaço igual entre as colunas */
    margin-top: 30px; /* espaçamento do topo */
    align-items: stretch; /* todas as colunas com mesma altura */
}

/* Cada coluna do grid de contatos */
.coluna-contatos{
    flex: 1; /* todas as colunas com largura igual */
    display: flex;
    flex-direction: column;
    gap: 30px; /* espaço vertical entre segmentos */
}

/* Primeira coluna - texto ocupa todo o espaço (equivalente a 2 segmentos) */
.coluna-contatos:first-child{
    justify-content: center; /* centraliza o texto verticalmente */
}

/* Segunda e terceira colunas - 2 segmentos cada */
.coluna-contatos:nth-child(2),
.coluna-contatos:nth-child(3){
    justify-content: space-between; /* distribui os segmentos igualmente */
}

/* Segmentos dentro das colunas */
.segmento-contatos{
    flex: 1; /* cada segmento ocupa metade da altura da coluna */
    display: flex;
    flex-direction: column;
    gap: 5px; /* pequeno espaço entre título e texto */
}

/* Títulos e textos dentro dos segmentos */
.segmento-contatos h2{
    margin-bottom: 0; 
}

.segmento-contatos p{
    margin-top: 0
}