/*
|--------------------------------------------------------------------------
| BASE STYLES & RESETS
|--------------------------------------------------------------------------
| Contém resets de navegador e estilos fundamentais para todo o documento.
*/

/* Resets básicos para consistência entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variáveis de Cores e Fontes */
:root {
    --preto: #000000;
    --branco: #FFFFFF;
    --destaque: #8D2043;
    /* Vermelho/Vinculo do design */
    --fonte-bebas: 'Bebas Neue', sans-serif;
    --fonte-montserrat: 'Montserrat', sans-serif;
}

html {
    scroll-behavior: smooth;
    /* Rolagem suave para âncoras */
}

body {
    font-family: var(--fonte-montserrat);
    line-height: 1.6;
    color: var(--preto);
    background-color: var(--branco);
    overflow-x: hidden;
    /* Evita rolagem horizontal indesejada */
}

/* Estilos para títulos */
h1,
h2,
h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--fonte-bebas);
    color: var(--destaque);
    margin-bottom: 20px;
    /* Margem padrão para títulos */
}

h1 {
    font-size: 2.5rem;
    /* Mobile */
    color: var(--branco);
    /* H1 específico do hero slider */
}

h2 {
    font-size: 2rem;
    /* Mobile */
}

h3 {
    font-size: 1.5rem;
    /* Mobile */
}

/* Estilos para parágrafos */
p {
    font-family: var(--fonte-montserrat);
    font-size: 0.7rem;
    color: var(--preto);
    line-height: 1.8;
}

/* Estilos para links */
a {
    color: var(--destaque);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--preto);
}


/*
|--------------------------------------------------------------------------
| LAYOUT & UTILITIES
|--------------------------------------------------------------------------
| Estilos para o layout geral do site e classes de utilidade.
*/

.container {
    max-width: 100%;
    /* Mobile */
    margin: 0 auto;
    padding: 20px 0;
}

.section {
    text-align: center;
}

/* Botões flutuantes */
.btn-whatsapp,
.btn-top,
.btn-instagram,
.btn-linkedin {
    position: fixed;
    right: 20px;
    /* Mobile */
    background-color: var(--branco);
    color: var(--preto);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transition: transform 0.3s ease;
}

.btn-instagram {
    bottom: 150px;
}

.btn-linkedin {
    bottom: 100px;
}

.btn-top {
    bottom: 45px;
}

.btn-whatsapp svg,
.btn-top svg {
    width: 35px;
    height: 35px;
}

.btn-instagram img,
.btn-linkedin img {
    width: 50px;
    /* Define a largura da imagem */
    height: auto;
    /* Mantém a proporção da imagem */
    border-radius: 50%;
    /* Deixa a imagem redonda */
    display: block;
    /* Garante que a imagem se comporte como um bloco */
}

.btn-whatsapp {
    bottom: 200px;
    background-color: #25D366;
    color: #ffffff;
}

.btn-whatsapp .icon {
    fill: #ffffff;
    /* branco no ícone */
    /* finalidade: garantir ícone branco independentemente do 'color' do botão */
}

.btn-whatsapp:hover {
    transform: scale(1.05);
    /* finalidade: feedback visual ao passar o mouse */
}

.btn-top {
    display: none;
    /* Inicialmente oculto via JS */
}

/* Estilo geral para botões */
.btn {
    padding: 12px 30px;
    text-decoration: none;
    border: 2px solid var(--destaque);
    background-color: transparent;
    color: var(--branco);
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1.2rem;
}

.btn:hover {
    background-color: var(--destaque);
    color: var(--branco);
}


/*
|--------------------------------------------------------------------------
| HEADER & NAVIGATION
|--------------------------------------------------------------------------
| Estilos para o cabeçalho e menu de navegação.
*/

.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--preto);
    padding: 0 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.header.fixed {
    background-color: var(--preto);
    /* Garante fundo sólido quando fixo */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .logo img {
    height: 50px;
    /* Mobile */
    margin-left: 1rem;
}

/* Menu Hambúrguer (Mobile) */
.menu-toggle {
    display: block;
    /* Visível no mobile */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
    /* Acima do menu */
}

.hamburger,
.hamburger::before,
.hamburger::after {
    transition: all 0.3s ease;
    background-color: var(--branco);
    /* Cor do ícone */
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    margin-right: 2rem;
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: var(--branco);
    left: 0;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

.menu-toggle.active .hamburger {
    background-color: transparent;
    /* Oculta a barra central */
}

.menu-toggle.active .hamburger::before {
    transform: translateY(8px) rotate(45deg);
    /* Move para o centro e rotaciona */
}

.menu-toggle.active .hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
    /* Move para o centro e rotaciona */
}

/* Menu de Navegação (Mobile) */
.nav-list {
    flex-direction: column;
    /* Coluna no mobile */
    position: absolute;
    top: 80px;
    /* Abaixo do header */
    right: 0;
    width: 70%;
    /* Largura do menu no mobile */
    background-color: var(--preto);
    border-top: 1px solid var(--destaque);
    box-shadow: -2px 5px 10px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    /* Esconde o menu para a direita */
    transition: transform 0.4s ease-in-out;
    padding: 20px;
    list-style: none;
    /* Remover marcadores de lista */
}

.nav-list.active {
    transform: translateX(0);
    /* Desliza o menu para dentro da tela */
}

.nav-list li {
    padding: 10px 0;
    text-align: left;
}

.nav-list a {
    text-decoration: none;
    color: var(--branco);
    font-weight: 600;
    transition: color 0.3s;
}

.nav-list a:hover,
.nav-list a.is-active {
    /* Realce do link ativo */
    color: var(--destaque);
}


/*
|--------------------------------------------------------------------------
| MAIN CONTENT SECTIONS
|--------------------------------------------------------------------------
| Estilos para as seções principais do site.
*/

/* Hero Slider (Mobile) */

.hero-slider-geral {
    display: block;
}

.hero-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
    /* Pode ser removido */
    isolation: isolate;
    margin: 0 0 0 0;
    /* Margem inferior para separar da próxima seção */
}

.hero-slider .container {
    width: min(1100px, 92%);
    /* Controla a largura máxima do conteúdo dentro do slider */
    margin-inline: auto;
}

.hero-slider__track {
    display: flex;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;

    gap: 0;
    /* [ADICIONADO - OPCIONAL] Evita qualquer espaçamento involuntário entre slides */
    backface-visibility: hidden;
    /* [ADICIONADO - OPCIONAL] Minimiza artefatos de subpixel em alguns browsers */
}

.hero-slide {
    position: relative;
    min-width: 100%;
    height: 40vh;
    top: 0;
    margin-top: 80px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0;

    overflow: hidden;
    /* [ADICIONADO] Recorta o bg e evita “vazar” para o slide ao lado */
    flex: 0 0 100%;
    /* [ADICIONADO] Elimina folgas de arredondamento: cada slide ocupa 100% exatos */
    /* dica: manter min-width:100% não atrapalha, mas flex-basis garante 100% exatos no flex */
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    /* [ALTERADO de comentado -> ativo] Garante cobertura total sem distorcer */
    transform: scale(1.02);
    /* [ALTERADO de 1.07 -> 1.02] Mantém um leve zoom sem exagero de bordas */
    transform-origin: center;
    /* [ADICIONADO] Centraliza o zoom para não “puxar” lateral */
    filter: grayscale(100%);
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .6));
    /* Gradiente de sobreposição */
}

/* === HERO CONTENT: caixa com borda fina, sem blur, alinhada à direita e embaixo === */
.hero-slide__content {
    position: relative;
    z-index: 2;
    display: grid;
    /* Usar grid para alinhar itens internos */
    align-content: end;
    /* Alinha o conteúdo na parte inferior do grid */
    gap: .75rem;
    height: auto;
    /* Ajuste a altura automaticamente */
    padding: 15px 15px;
    /* Padding interno */

    margin-bottom: 1.75rem;
    margin-left: auto;
    /* Alinha a caixa à direita removendo a margem esquerda automática */
    margin-right: clamp(16px, 6vw, 80px);
    /* Adiciona um espaçamento da borda direita */
    align-self: flex-end;
    /* Posiciona a caixa na parte inferior do slide */
    justify-items: end;
    /* Alinha itens internos à direita, se for um grid */
    text-align: right;
    /* Alinha o texto dentro da caixa para a direita */
    /* max-width: 720px; */
    /* Largura máxima para o conteúdo */
    /* visual */
    width: clamp(320px, 52vw, 720px);
    /* ← cresce junto com a tela até 720px */
    max-width: none;
    /* ← garante que o width acima manda */
    box-sizing: border-box;
    /* ← segurança para o padding não “estourar” */
    background: transparent;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 0;
    box-shadow: none;
}

.hero-slider__controls {
    display: flex;
    justify-content: flex-start;
}

.slide__eyebrow {
    font-size: .9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #eaeaea;
}

.slide__title {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--branco);
    /* Cor do título do slide */
}

.slide__desc {
    max-width: 720px;
    color: #e5e5e5;
}

.slide__actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Alinha os botões à direita */
}

/* === WRAPPER DOS CONTROLES: borda fina no bloco com dots + setas === */
.page_wrapper {
    position: absolute;
    margin-bottom: 1rem;
    /* Remove 'bottom: 50%' e usa uma âncora inferior */
    bottom: 24px;
    /* Move para a parte inferior, com um espaçamento */

    /* ANCORAGEM À ESQUERDA: Substitua as propriedades de alinhamento à direita */
    /* right: clamp(16px, 6vw, 80px); */
    /* Remove o alinhamento de canto direito existente */
    left: clamp(16px, 6vw, 80px);
    /* Alinha à esquerda, sincronizando com o 'hero-slide__content' */

    display: flex;
    align-items: center;
    gap: 12px;

    /* Mantém os estilos visuais de borda e fundo */
    padding: 0px 0px;
    background: transparent;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 0;
    box-shadow: none;
}

.hero-slider__dots {
    display: none;
}

.hero-slider__dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .75);
    /* Borda para dot inativo */
    padding: 0;
    cursor: pointer;
}

.hero-slider__dots button[aria-selected="true"] {
    background: #fff;
    /* Preenche dot ativo */
    border-color: #fff;
}

/* Setas de navegação do slider */
.nav-btn {
    position: static;
    /* Ficam dentro do .page_wrapper */
    transform: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    /* Borda para as setas */
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, .08);
}

/* Seção O Escritório (Mobile) */
.escritorio .containe {
    display: flex;
    flex-direction: row;
}

.escritorio h2 {
    color: var(--destaque);
    text-align: center;
    margin-top: 3rem
}

.escritorio p {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 0.5rem
}

.logo_escritorio {
    width: 150px;
    height: auto;
    margin-left: 5px;
    margin-top: 10px;
}

.escritorio2 {
    width: 70px;
    height: auto;
}

/* Seção Áreas de Atuação (Mobile) */
.area-cards-grid-mobile {
    display: block;
}

.area-cards-grid {
    display: none;
}

.areas-atuacao {
    background-color: var(--preto);
    color: var(--branco);
    margin-top: -0.5rem;
}

.areas-atuacao .container {
    max-width: 98%;
}

.area-cards-grid-mobile img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.areas-atuacao h2 {
    display: none;
}

.area-cards-grid-mobile {
    display: grid;
    gap: 0px;
    /* Espaçamento entre os cards */

    /* 🔑 A Mágica Acontece Aqui: Repeat, Auto-Fit e Minmax */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    /* Centraliza o grid dentro do container, se sobrar espaço */
    justify-content: center;
}

.area-card,
.area-card-mobile {
    /* Define uma altura mínima para os cards, garantindo uniformidade */
    /* min-height: 100px; */

    /* Adiciona bordas arredondadas para um visual moderno */
    /* border-radius: 10px; */

    /* Sombra sutil para dar profundidade e destaque ao card */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */

    /* Transição suave para efeitos de hover/interatividade (UX) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Opcional: Adicionar padding interno se tiver conteúdo (como o H3) */
    /* padding: 20px; */

    /* Se estiver usando a tag <img> dentro do card: */
    /* text-align: center; */
    /* Centraliza a imagem e o texto */
}

/* Seção Metodologia (Mobile) */
.metodologia h2 {
    color: var(--destaque);
}

.section.metodologia {
    max-height: 50rem;
}

.timeline {
    position: relative;
    /* padding-left: 50px;
        padding-right: 50px; */
    /* Espaçamento dos lados para a linha */
    padding: 0px 0;
    /* Adiciona algum padding vertical */
    display: flow-root;
    /* Importante: garante que o container abriga a linha e os itens flutuantes */
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0rem;
    bottom: 155px;
    /* Alterado: Faz a linha cobrir toda a altura do .timeline */
    left: 50%;
    /* Linha centralizada */
    width: 2px;
    /* height: 70%; */
    background: var(--destaque);
    /* Cor da linha vertical */
    transform: translateX(-50%);
    /* Ajuste para centralizar a linha */
    z-index: 0;
    /* Garante que fique atrás dos pontos */
}

/* ADICIONE ESTE BLOCO NO CSS DESKTOP */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 6px;
    /* Ajuste para alinhar com o centro vertical do ponto (bolinha de 14px) */
    height: 2px;
    border-top: 2px dotted var(--destaque);
    z-index: 1;
}

.timeline-item.right {
    margin-top: 11rem;
}

/* Linha para Itens ÍMPARES (Esquerda) */
.timeline-item:nth-child(odd)::before {
    /* Inicia no ponto (bolinha) e vai até a borda do conteúdo do item */
    left: 9%;
    /* A largura é a distância entre o item e a linha vertical. 
       Na nossa refatoração, o gap é de 5% + 7px. */
    width: calc(100% + 7px);
}

/* Linha para Itens PARES (Direita) */
.timeline-item:nth-child(even)::before {
    /* Inicia no ponto (bolinha) e vai até a borda do conteúdo do item */
    right: 9%;
    /* A largura é a distância entre o item e a linha vertical. */
    width: calc(100% + 7px);
}

.timeline-item:nth-child(odd) {
    /* Itens ímpares à esquerda */
    float: left;
    clear: left;
    /* transform: translateX(-11px); */
    /* Ajuste visual */
    text-align: right;
    /* Alinha o texto do lado esquerdo para a direita */
}

.timeline-item:nth-child(even) {
    /* Itens pares à direita */
    float: right;
    clear: right;
    /* transform: translateX(10px); */
    /* Ajuste visual */
    text-align: left;
    /* Mantém o texto do lado direito para a esquerda */
}

/* PONTOS (bolinhas) */
.timeline-item::after {
    /* Bolinhas na timeline */
    content: '';
    position: absolute;
    /* TOP: 0 ou 50% é o ideal. Se quiser o ponto no topo do item, use 'top: 0;'. */
    top: 0;
    width: 14px;
    height: 14px;
    background-color: var(--destaque);
    border: 2px solid white;
    /* Borda branca para destacar sobre a linha */
    border-radius: 50%;
    z-index: 1;
    /* Garante que fique sobre a linha */
    /* Centraliza o ponto na vertical da linha */
    transform: translateY(0);
    /* Remove o -50% se for para ficar no topo */
}

/* Ponto para Itens ÍMPARES (Esquerda) */
.timeline-item:nth-child(odd)::after {
    right: calc(-11.3% - 7px);
    /* CRUCIAL: Ajuste baseado na largura do contêiner e do ponto */
    /* O valor deve ser a distância da borda do item até o centro da linha. */
    /* Se a linha estiver a 50%, e o item a 45%, você tem 5% de 'gap' entre eles. */
    /* Ajuste este valor de -5% para centralizar o ponto na linha. */
}

/* Ponto para Itens PARES (Direita) */
.timeline-item:nth-child(even)::after {
    left: calc(-11.5% - 7px);
    /* CRUCIAL: Mesmo cálculo do lado oposto */
}


.timeline-item {
    width: 45%;
    /* Quase metade da largura */
    margin-bottom: 215px;
    /* Espaço entre os itens */
    position: relative;
    /* CRUCIAL: Para posicionar o ponto ::after corretamente */
    /* text-align: left; */
    /* Alinha texto à esquerda */
    padding: 10px 0;
    /* Adiciona um padding interno, se necessário */
}

.timeline-item small {
    font-family: var(--fonte-montserrat);
    /* Ajustado para montserrat */
    font-size: 0.8rem;
    color: var(--destaque);
    display: block;
    /* Para quebra de linha */
    margin-bottom: 5px;
}

.timeline-item h3 {
    font-family: var(--fonte-montserrat);
    /* Ajustado para montserrat */
    font-size: 1.2rem;
    /* Mobile */
    margin: 5px 0;
}

.timeline-item p {
    font-family: var(--fonte-montserrat);
    font-size: 0.9rem;
}

/* Ajuste para alinhar o texto com a bolinha */
.timeline-item small,
.timeline-item h3 {
    display: block;
    /* Garante que o texto comece no topo */
}

.timeline::after {
    /* Clearfix para a timeline */
    content: '';
    display: block;
    clear: both;
}

/* Seção Atendimento (Mobile) */
.atendimento {
    padding: 0;
    margin-bottom: 0px;
    /* Adiciona espaço após o testimonial */
}

.background-container {
    position: relative;
    width: 100%;

    /* Configuração da imagem */
    background-image: url("../img/backgrounds/foto_nosso_atendimento.png");
    background-size: cover;
    background-position: 0% 50%;

    /* Define a altura do bloco que terá a foto e o título */
    min-height: 150px;
}

.background-title {
    position: absolute;

    /* Posição no canto inferior esquerdo */
    bottom: 30px;
    /* Distância da borda inferior */
    left: 5%;
    /* Distância da borda esquerda */

    /* Usa a cor do H2 definida para a seção (branco) */
    color: var(--branco);
    z-index: 10;

    /* Remove a margem padrão para não interferir no posicionamento */
    margin-bottom: 0;

    /* OPCIONAL: Adiciona uma sombra para destaque extra */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* Container principal - Define as variáveis e o comportamento de corte */
.testimonial-carousel-container {
    /* [MOBILE] Padrão: 1 card visível por transição */
    --per-view: 1;
    /* Espaçamento entre os cards (pode ajustar) */
    --gap: 20px;

    position: relative;
    overflow: hidden;
    /* Esconde os cards que estão fora da tela */
    padding: 20px 0;
    max-width: 90%;
    /* Ajuste a largura máxima se necessário */
    margin: 0 auto;
}

/* O trilho (track) onde os cards rolam */
.testimonial-inner {
    display: flex;
    gap: var(--gap);
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* Item do Carrossel (o card de depoimento) */
.testimonial-card.carousel-item {
    /* CÁLCULO MÁGICO para o card ocupar a porcentagem correta do trilho, 
       respeitando o gap e o número de cards visíveis (--per-view) */
    min-width: calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
    flex: 0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));

    /* Mantém os estilos visuais do card de depoimento */
    background-color: var(--branco);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: auto;
    /* Altura flexível */
}

/* Estilos para as setas de navegação */
.testimonial-prev,
.testimonial-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--destaque);
    /* Cor do destaque */
    color: var(--branco);
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s, background-color 0.3s;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    opacity: 1;
    background-color: var(--preto);
}

.testimonial-prev {
    left: 10px;
}

.testimonial-next {
    right: 10px;
}

.testimonial-prev:disabled,
.testimonial-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.testimonial-card {
    /* Centraliza e limita a largura */
    max-width: 800px;
    margin: 0 auto;

    /* Estilos visuais */
    padding: 30px;
    background-color: var(--branco);
    /* Fundo branco ou quase branco sólido */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.testimonial-wrapper {
    padding: 20px 0;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 15px;
}

.testimonial-rating {
    color: var(--destaque);
    /* Estrelas em destaque */
    font-size: 1.2rem;
    margin: 10px 0;
}

.testimonial-author {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--preto);
    font-size: 2.5rem;
}

/* Seção História (Mobile) */
.historia {
    background-color: var(--preto);
    color: var(--branco);
    position: relative;
    padding: 10px 0px;
    overflow: hidden;
}

.historia h2,
.historia p {
    color: var(--branco);
}

.linha {
    width: 30%;
    height: 100%;
}

.historia p {
    width: 80%;
    /* Reduz a largura do parágrafo */
    margin: 10px auto;
    text-align: left;
}

.historia-img {
    display: block;
    /* Imagens visíveis no tablet */
    position: absolute;
    width: 100px;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.historia-img.top-left {
    top: 0%;
    left: 0%;
}

.historia2 {
    margin-right: 6rem
}


.historia-img.bottom-right {
    bottom: 0%;
    right: 0%;
}

.historia1 {
    margin-left: 6rem
}

/*
|--------------------------------------------------------------------------
| MAIN CONTENT SECTIONS - Seção Equipe (Novo Design)
|--------------------------------------------------------------------------
| Transforma o carrossel em um grid responsivo/stack de cartões.
*/

.equipe .container {
    padding: 0 0;
}

.equipe {
    background-color: var(--branco);
    padding-bottom: 0px;
    /* Mais espaço para o final da seção */
    padding-top: 0px;
    /* Mais espaço no topo */
}

.team-carousel-container {
    /* ALTERADO: de 'position: static; overflow: visible;' para... */
    position: relative;
    /* ALTERADO - permite posicionar setas absolutas */
    overflow: hidden;
    /* ALTERADO - oculta áreas fora da viewport */
    --per-view: 1;
    /* ALTERADO - por padrão (mobile) mostra 1 por vez */
    --gap: 12px;
    /* NOVO: controla o espaço entre cards */
}

.carousel-title {
    /* Mantém o estilo do título, ajustando a margem */
    margin-bottom: 0px;
}

.carousel-title h2 {
    /* Mantém o estilo do título, ajustando a margem */
    background-color: var(--preto);
    margin-bottom: 0px;
    color: var(--branco);
    padding-top: 40px;
}

.carousel-inner {
    display: flex;
    /* ALTERADO: itens em linha */
    gap: var(--gap);
    /* ALTERADO: espaço entre cards */
    /* overflow: hidden; */
    /* ALTERADO */
    padding: 0;
    /* mantém */
    transition: transform .45s ease;
    /* ALTERADO: anima o translateX */
    will-change: transform;
    /* ALTERADO: performance */
}

.carousel-item {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    min-width: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    background-color: var(--preto);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.carousel-item img {
    /* Estilo da imagem - profissionaliza o corte */
    width: 100%;
    height: 500px;
    /* Altura fixa para uniformidade */
    object-fit: cover;
    /* Garante que a imagem preencha o espaço sem distorcer */
}

.carousel-info img,
.carousel-info2 img {
    margin-top: 1rem;
    max-width: 90px;
    max-height: 30px;
    width: auto;
    height: auto;
}

.carousel-info,
.carousel-info2 {
    margin-top: -8rem;
    padding: 20px 15px;
    background-color: var(--preto);
    /* Mais padding */
}

.carousel-info h3 {
    font-family: var(--fonte-bebas);
    /* Retorna ao Bebas Neue para o nome */
    font-size: 1.8rem;
    color: var(--branco);
    /* Cor de destaque */
    margin-bottom: 5px;
    line-height: 30px;
}

.carousel-info2 h3 {
    font-family: var(--fonte-bebas);
    /* Retorna ao Bebas Neue para o nome */
    font-size: 1.5rem;
    color: var(--branco);
    /* Cor de destaque */
    margin-bottom: 5px;
    line-height: 30px;
}

.carousel-info p,
.carousel-info2 p {
    font-family: var(--fonte-montserrat);
    font-size: 0.6rem;
    color: var(--branco);
    /* Texto da função em preto */
    font-weight: 400;
}

.carousel-prev,
.carousel-next {
    /* ERA: display: none; */
    display: grid;
    /* ALTERADO */
    place-items: center;
    /* ALTERADO */
    position: absolute;
    /* ALTERADO */
    top: 50%;
    /* ALTERADO */
    transform: translateY(-50%);
    /* ALTERADO */
    width: 44px;
    height: 44px;
    /* ALTERADO */
    border-radius: 50%;
    /* ALTERADO */
    background: rgba(0, 0, 0, .55);
    /* ALTERADO */
    color: #fff;
    /* ALTERADO */
    border: 1px solid rgba(255, 255, 255, .35);
    z-index: 2;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0, 0, 0, .75);
    transform: translateY(-50%) scale(1.05);
}

.carousel-prev {
    left: 2px;
}

/* ALTERADO */
.carousel-next {
    right: 2px;
}

/* ALTERADO */

/* ALTERADO */

/* Container do banner */
.banner {
    text-align: center;
    padding: 20px;
}


/* Texto principal */
.banner-text {
    font-size: 1.2rem;
    /* Ajuste conforme necessário */
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--branco);
}


/* Destaque em vinho */
.highlight {
    color: #8b1c3d;
    /* tom vinho semelhante ao da imagem */
}

/* Seção Localização (Mobile) */
.localizacao {
    background-color: var(--preto);
    padding: 10px 20px;
}

.localizacao h2 {
    color: var(--branco);
    margin-bottom: 30px;
}

.map-link {
    display: block;
    width: 100%;
    margin: 20px 0;
}

.map-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-info-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    /* Uma coluna no mobile */
    text-align: center;
}

.contact-item1 h3 {
    color: var(--destaque);
    font-family: var(--fonte-montserrat);
    font-size: 1rem;
    margin-bottom: 5px;
    text-align: center;
}

.contact-item1 p {
    font-size: 1rem;
    color: var(--branco);
}

.contact-item1 a {
    font-size: 1rem;
    color: var(--branco);
}

.contact-item2 h3 {
    color: var(--destaque);
    font-family: var(--fonte-montserrat);
    font-size: 1rem;
    margin-bottom: 5px;
    text-align: center;
}

.contact-item2 p {
    font-size: 1rem;
    color: var(--branco);
    text-align: center;
}

.contact-item2 a {
    font-size: 1rem;
    color: var(--branco);
}

.contact-item3 h3 {
    color: var(--destaque);
    font-family: var(--fonte-montserrat);
    font-size: 1rem;
    margin-bottom: 5px;
    text-align: center;
}

.contact-item3 p {
    font-size: 1rem;
    color: var(--branco);
    text-align: center;
}

.contact-item3 a {
    font-size: 0.9rem;
    color: var(--branco);
}

.contact-info-grid {
    grid-template-columns: repeat(1, 1fr);
}

.btn-contato {
    /* Cor de Alto Contraste: Amarelo (excelente contra preto) */
    /* color: #FFD700; */
    /* Amarelo Dourado Brilhante */

    /* Remoção do sublinhado Padrão do Navegador */
    text-decoration: none;

    /* Torna o texto mais visível e destacado (Negrito) */
    font-weight: bold;

    /* Adiciona Sublinhado Customizado: cria uma linha sólida */
    /* É mais limpo que o sublinhado padrão do navegador e garante que a cor seja a mesma do texto */
    /* border-bottom: 2px solid #FFD700; */

    /* Transição suave para o efeito hover */
    transition: all 0.3s ease;
}

.btn-contato:hover {
    /* 1. Mudança de Cor (Feedback Visual Rápido) */
    /* Sugestão: Aumentar o brilho para um amarelo ainda mais vibrante ou mudar para ciano */
    color: #FFFFFF;
    /* Muda para Branco Puro no hover */

    /* 2. Remoção do Sublinhado (Feedback Alternativo) */
    /* Em vez de sublinhar, podemos remover o sublinhado e dar um 'zoom' visual na linha.
       Ou simplesmente aumentar a espessura da linha para um efeito "clicável" */

    /* Exemplo: Aumenta a espessura da linha para 4px para dar um efeito de destaque */
    border-bottom: 4px solid #FFFFFF;

    /* Aumenta a opacidade para garantir que esteja 100% visível, caso alguma regra geral tenha diminuído */
    opacity: 1;

    /* Muda o cursor para indicar que é clicável (melhora a usabilidade) */
    cursor: pointer;
}

.instagram img {
    width: 50px;
    /* Define a largura da imagem */
    height: auto;
    /* Mantém a proporção da imagem */
    border-radius: 50%;
    /* Deixa a imagem redonda */
    display: block;
    /* Garante que a imagem se comporte como um bloco */
    margin: 10px auto;
    /* Centraliza a imagem horizontalmente */
}

.linkedin img {
    width: 50px;
    /* Define a largura da imagem */
    height: auto;
    /* Mantém a proporção da imagem */
    border-radius: 50%;
    /* Deixa a imagem redonda */
    display: block;
    /* Garante que a imagem se comporte como um bloco */
    margin: 10px auto;
    /* Centraliza a imagem horizontalmente */
}

a {
    display: inline-block;
    /* Permite aplicar margens e padding */
    text-decoration: none;
    /* Remove o sublinhado padrão do link */
}

.contact-social-icons h3 {
    margin-bottom: 0px;
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
| Estilos para o rodapé do site.
*/

.footer {
    background-color: var(--branco);
    color: var(--branco);
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

.footer p {
    font-size: 1rem;
    color: var(--preto);
}

.footer a {
    color: var(--preto);
}

/*
|--------------------------------------------------------------------------
| MEDIA QUERIES (Tablet & Desktop - Mobile First)
|--------------------------------------------------------------------------
| Estilos aplicados para telas maiores.
*/

/* ===== MOBILE (abaixo de 768px) ===== */
@media (max-width: 767px) {

    /* [ADICIONADO] Seleciona apenas os dois parágrafos desejados */
    .historia1 p:nth-of-type(3),
    .historia1 p:nth-of-type(4) {
        width: 110%;
        /* ocupa toda a largura disponível */
        margin-left: -65px;
        /* remove recuo lateral */
        margin-right: 0;
        /* remove recuo lateral */
        text-align: left;
        /* opcional: mantém leitura agradável */
    }

    .historia2 p:nth-of-type(1),
    .historia2 p:nth-of-type(2) {
        width: 110%;
        /* ocupa toda a largura disponível */
        margin-left: 34px;
        /* remove recuo lateral */
        margin-right: 0;
        /* remove recuo lateral */
        text-align: left;
        /* opcional: mantém leitura agradável */
    }
}

/* Tablet (768px e acima) */
@media (min-width: 768px) {
    .container {
        max-width: 100%;
        margin: 0 20px 0 20px;
        /* Aumenta largura do container */
    }

    h1 {
        font-size: 4rem;
        /* H1 maior para tablet */
    }

    h2 {
        font-size: 2.5rem;
        /* H2 maior para tablet */
    }

    h3 {
        font-size: 1.8rem;
        /* H3 maior para tablet */
    }

    p {
        font-size: 1rem;
    }

    /* Header */
    .header .logo img {
        height: 70px;
        /* Logo maior */
    }

    .nav {
        display: block;
        /* Torna o nav visível por padrão */
    }

    .nav-list {
        position: static;
        /* Remove posicionamento absoluto */
        flex-direction: row;
        /* Volta a ser uma linha */
        transform: none;
        /* Remove transformação */
        box-shadow: none;
        width: auto;
        /* Largura automática */
        padding: 0;
        border: none;
        display: flex;
        /* Garante que os itens do nav sejam exibidos */
        gap: 20px;
        /* Espaço entre os itens */
    }

    .menu-toggle {
        display: none;
        /* Oculta o menu hambúrguer */
    }

    /* Hero Slider */

    /* 1. ESTILOS DA ÂNCORA CENTRALIZADA: .hero-slider-geral */
    .hero-slider-geral {
        position: relative;
        max-width: none;
        /* Permite ocupar 100% da largura do viewport */
        margin: 0;
        /* Remove a margem automática, garantindo que vá de ponta a ponta */
        height: 100%;
        padding: 0;
        /* Remove qualquer padding horizontal */
    }

    .hero-slide {
        height: calc(110vh - 80px);
        top: 80px;
        margin-top: 0;
        height: 100vh;
        padding-bottom: 170px;
        /* Ajusta padding para o page_wrapper */
    }

    .hero-slider .container {
        width: min(1440px, 88%);
        /* Controla a largura máxima do conteúdo dentro do slider */
        margin-inline: auto;
    }

    /*     .hero-slider-geral {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 16px;
        position: relative;
    } */

    .hero-slider__dots {
        position: static;
        display: flex;
        gap: 8px;
        margin: 10px;
    }

    .hero-slide__content {
        width: clamp(420px, 50vw, 720px);
        padding: 24px 20px;
    }

    .page_wrapper {
        right: clamp(16px, 4vw, 80px);
        left: clamp(16px, 4vw, 80px);
    }

    .page_wrapper .nav-btn-prev,
    .page_wrapper .nav-btn-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* Garante a centralização vertical perfeita */
    }

    .page_wrapper .nav-btn-prev {
        left: 0;
    }

    .page_wrapper .nav-btn-next {
        right: 0;
    }

    .escritorio p {
        margin-left: 9rem;
        margin-right: 4rem;
        margin-bottom: 2rem;
        font-size: 0.9rem
    }

    .escritorio2 {
        width: 95px;
    }

    /* Áreas de Atuação */
    .areas-atuacao {
        display: block;
    }

    .area-cards-grid-mobile {
        display: none;
    }

    .areas-atuacao h2 {
        display: block;
        color: var(--branco);
    }

    .area-cards-grid img{
        width: 90%;
        height: auto;
        object-fit: cover;
    }

    .area-cards-grid {
        display: grid;
        /* Espaçamento entre os cards */
        /* gap: 5px; */

        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));

        /* Centraliza o grid dentro do container, se sobrar espaço */
        justify-content: center;
    }

    /* .area-card {
        height: 550px;
        width: 100%;  
    } */

    /* Metodologia */
    .timeline::before {
        bottom: -15px;
    }

    /* Atendimento */
    .background-container {
        /* Define a altura do bloco que terá a foto e o título */
        min-height: 375px;
    }

    /* Equipe */
    .team-carousel-container {
        --per-view: 4;
        /* ALTERADO - tablet vê 2 */
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.8rem;
    }

    p {
        font-size: 1rem;
    }

    /* REMOÇÃO/OVERRIDE: garantir que o display:flex prevaleça no tablet */
    .carousel-inner {
        display: flex;
        /* ALTERADO */
        gap: var(--gap);
        /* ALTERADO */
    }

    .carousel-item {
        min-width: calc(100% / var(--per-view));
        /* ALTERADO */
        flex: 0 0 calc(100% / var(--per-view));
        /* ALTERADO */
    }

    /* Localização */
    .contact-info-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Duas colunas para tablet */
    }

    .historia-img {
        width: 140px;
    }

    /* .historia {
        padding: 60px 20px;
    } */

    .historia .container {
        padding: 0 0 0 0;
    }

    .historia-img.top-left {
        top: 0%;
        left: 0%;
    }

    .historia1 {
        margin-left: 10rem
    }

    .historia2 {
        margin-right: 10rem
    }

    .historia p {
        margin: 20px auto;
    }


    .historia-img.bottom-right {
        bottom: 0%;
        right: 0%;
    }

    .equipe .container {
        max-width: 100%;
        margin: 0 0 0 0;
        /* Aumenta largura do container */
    }

    .contact-item1 h3 {
        text-align: left;
    }

    .contact-item3 h3 {
        text-align: right;
    }

    .contact-item3 p {
        text-align: right;
    }

    .contact-info-grid {
        text-align: left;
    }

    .banner-text {
        font-size: 1.5rem;
    }

    /* [DESKTOP] Transição de 3 cards para telas acima de 1024px */
    .testimonial-carousel-container {
        --per-view: 3;
        /* Altera para 3 cards visíveis */
    }

    /* Equipe */
    .team-carousel-container {
        --per-view: 4;
        /* ALTERADO - desktop vê 4 */
    }

    /* REMOÇÃO/OVERRIDE: garante que não haja grid-columns antigas */
    .carousel-inner {
        display: flex;
        /* ALTERADO */
        gap: var(--gap);
        /* ALTERADO */
    }

    .carousel-item img {
        height: 500px;
        /* mantém seu desktop maior */
    }

    .carousel-item {
        min-width: calc(100% / var(--per-view));
        /* ALTERADO */
        flex: 0 0 calc(100% / var(--per-view));
        /* ALTERADO */
    }

    /* Localização */
    .contact-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

/* Desktop (1024px e acima) */
@media (min-width: 1024px) {
    h1 {
        font-size: 5rem;
        /* H1 maior para desktop */
    }

    h2 {
        font-size: 3rem;
        /* H2 maior para desktop */
    }

    h3 {
        font-size: 1.3rem;
        /* H3 maior para desktop */
    }

    .hero-slide__content {
        width: clamp(520px, 46vw, 720px);
    }

    .hero-slider .container {
        width: min(1637px, 92%);
        /* Controla a largura máxima do conteúdo dentro do slider */
        margin-inline: auto;
    }

}

@media (min-width: 1440px) {
    /* .area-card {
        height: 680px;
        width: 100%;
    } */

    .timeline::before {
        bottom: 130px;
    }

    .section.metodologia {
        max-height: 40rem;
    }

    .hero-slide {
        height: 75vh;
        padding-bottom: 170px;
    }

    /*     .page_wrapper {
        right: clamp(16px, 6vw, 80px);
    } */

    .hero-slider .container {
        width: min(1760px, 92%);
        /* Controla a largura máxima do conteúdo dentro do slider */
        margin-inline: auto;
    }

}

/*
|--------------------------------------------------------------------------
| ACCESSIBILITY & UTILITIES (Visually Hidden)
|--------------------------------------------------------------------------
| Classes para acessibilidade, como elementos ocultos para leitores de tela.
*/
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}