/* ===== RESET ===== */

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


/* ===== CONTAINER FLEXÍVEL DO SITE ===== */

.site-container{

width:100%;
/* permite que o site ocupe toda a largura da tela */

margin:0 auto;
/* centraliza o site */

}


/* ===== CONTAINER INTERNO DAS SEÇÕES ===== */

.container{

width:100%;
/* ocupa toda a largura disponível */

max-width:1200px;
/* largura máxima do site em telas grandes */

margin:0 auto;
/* centraliza o conteúdo */

padding-left:20px;
padding-right:20px;
/* espaço lateral para telas pequenas */

}


/* ===== ROOT ===== */

:root{
color-scheme: dark;
}

/* ===== BASE ===== */

html{
background-color:#0b1c2c;

/* ativa rolagem suave ao clicar nos links */
scroll-behavior:smooth;

-webkit-text-size-adjust:100%;
background-color:#0e2a47;

}

body{

font-family:Arial, sans-serif;

background-color:#e9e9e9;

overflow-x:hidden;

}


/* ===== IMAGENS ===== */

img,
picture{

max-width:100%;
height:auto;

display:block;

}


/* ===== LAYOUT ===== */

/* =========================
HEADER
========================= */
header{

/* imagem do header */
background-image:url("logo.png");

/* alinha mais para a esquerda */
background-position:left center;

/* faz a imagem ocupar TODO o header */
background-size:cover;

/* evita repetição */
background-repeat:no-repeat;

/* altura do header */
height:120px;

/* estrutura */
display:flex;
align-items:center;

}

/* =========================
CONTAINER DO HEADER
========================= */

.header-container{

display:flex;

/* centraliza vertical */
align-items:center;

/* separa logo e menu */
justify-content:space-between;

width:100%;

/* menor distância da borda esquerda */
padding:0 20px;

}

/* =========================
NOME
========================= */

.nome{

color:#ffffff;
font-size:18px;
font-weight:600;
margin:0;
white-space:nowrap;

/* aproxima mais da esquerda */
margin-left:10px;

}

/* =========================
MENU
========================= */

.menu{

display:flex;
gap:28px;

/* mantém menu na direita */
margin-left:auto;

/* centraliza altura */
align-items:center;

/* pequena margem da borda */
padding-right:20px;

}

.menu a{

color:#ffffff;
text-decoration:none;
font-size:15px;
font-weight:500;
white-space:nowrap;
transition:0.3s;

}

.menu a:hover{

color:#d4af37;

}
/* =========================
HERO
========================= */

.hero{

/* cria referência para posicionamento do overlay */
position:relative;

/* imagem de fundo do hero */
background:url('hero.png') no-repeat center center;

/* faz a imagem cobrir toda a área */
background-size:cover;

/* espaço interno vertical da seção */
padding:120px 0;

/* impede que elementos internos ultrapassem o hero */
overflow:hidden;

}


/* layout interno do hero */

.hero .container{

/* ativa flexbox */
display:flex;

/* centraliza verticalmente */
align-items:center;

/* separa texto e imagem */
justify-content:space-between;

/* espaço entre os dois blocos */
gap:40px;

}


/* =========================
EFEITO VIDRO
========================= */

.hero::before{

/* cria elemento virtual antes do conteúdo */
content:"";

/* posicionamento absoluto dentro do hero */
position:absolute;

/* ocupa toda a área do hero */
inset:0;

/* camada escura sobre a imagem */
background:rgba(6, 28, 47, 0.75);

/* aplica desfoque (efeito glassmorphism) */
backdrop-filter:blur(4px);

}


/* garante que texto e imagem fiquem acima do overlay */

.hero-text,
.hero-image{

/* mantém no fluxo normal */
position:relative;

/* camada acima do overlay */
z-index:2;

}


/* =========================
TEXTO
========================= */

.hero-text{

/* limita largura do texto para melhor leitura */
max-width:500px;

}

.hero-text h1{

/* tamanho do título principal */
font-size:32px;

/* cor branca para contraste */
color:#ffffff;

/* espaço abaixo do título */
margin-bottom:20px;

}

.hero-text p{

/* cor mais suave que o título */
color:#e2e8f0;

/* espaço abaixo do parágrafo */
margin-bottom:30px;

}


/* =========================
BOTÃO
========================= */

.hero-text a{

/* permite padding e comportamento de botão */
display:inline-block;

/* gradiente dourado */
background:linear-gradient(135deg,#d4af37,#b8962e);

/* cor do texto */
color:#000;

/* espaço interno do botão */
padding:15px 35px;

/* bordas arredondadas */
border-radius:10px;

/* tamanho da fonte */
font-size:14px;

/* remove sublinhado */
text-decoration:none;

/* muda cursor ao passar o mouse */
cursor:pointer;

/* sombra elegante */
box-shadow:0 5px 15px rgba(0,0,0,0.3);

/* animação suave */
transition:0.3s;

}


/* efeito hover do botão */

.hero-text a:hover{

/* levanta levemente o botão */
transform:translateY(-2px);

}


/* =========================
IMAGEM
========================= */

.hero-image img{

/* imagem se adapta ao container */
width:100%;

/* limite máximo da imagem */
max-width:400px;

/* bordas arredondadas */
border-radius:10px;

}

/*/* =========================
   SEÇÃO 2 - BENEFÍCIOS / CARDS
   ========================= */

/* Container dos cards (grid responsivo) */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colunas no desktop */
  gap: 30px; /* espaçamento entre os cards */
  max-width: 1100px; /* largura máxima da seção */
  margin: 0 auto; /* centraliza o container */
}

/* Efeito ao passar o mouse */
.card:hover {
  transform: translateY(-5px); /* levanta o card levemente */
}
:root {
  --azul-principal: #0B1F3A;
  --azul-secundario: #132B4F;
  --dourado: #C9A646;
  --branco: #F5F5F5;
  --cinza: #B0B7C3;
}

/* Seção */
.benefits {
  padding: 80px 20px;
  background: var(--azul-principal);
  text-align: center;
}

/* Título */
.benefits h2 {
  color: var(--branco);
  font-size: 32px;
  margin-bottom: 60px;
}

/* Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card */
.card {
  background: var(--azul-secundario);
  padding: 20px;
  border-radius: 12px;
  text-align: left;
  border-bottom: 2px solid var(--dourado);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

/* Título do card */
.card h3 {
  color: var(--branco);
  font-size: 18px;
  margin-bottom: 10px;
}

/* Imagem */
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border: 1px solid var(--dourado);
  margin-bottom: 15px;
}

/* Texto */
.card p {
  color: var(--cinza);
  font-size: 14px;
}

/* Legenda */
.legenda {
  margin-top: 40px;
  color: var(--cinza);
  font-style: italic;
}


/*sem estrutura você tenta, cor de fundo*/
/* ===== Seção CTA (parte final abaixo dos cards) ===== */

.cta-final {
  text-align: center;          /* Centraliza todo o conteúdo (título, subtítulo e botão) */
  background-color: #0e2a47;   /* Azul marinho (estilo premium/jurídico) */
  padding: 60px 20px;          /* Espaçamento interno (topo/baixo e laterais) */
}


/* ===== Subtítulo ===== */
.cta-subtitulo {
  font-size: 19px;        /* Tamanho equilibrado (menor que o título, maior que textos comuns) */
  color: #c5c5c5;         /* Cinza claro para não competir com o título */
  margin-top: 8px;        /* Espaço entre o título e o subtítulo */
  margin-bottom: 50px;    /* Espaço antes do botão */
  line-height: 1.5;       /* Melhor legibilidade */
  font-weight: 400;       /* Peso leve para manter aparência sofisticada */
}


/* ===== Título ===== */
.cta-final h2 {
  font-size: 28px;        /* Destaque principal da seção */
  font-weight: bold;      /* Deixa o título mais forte */
  color: #fff;            /* Branco para contraste com fundo escuro */
  margin-bottom: 20px;    /* Espaço abaixo do título */
}

/* ===== Botão CTA ===== */
.btn-cta {
  display: inline-block; 
  /* Permite usar padding e se comportar como botão */

  background: linear-gradient(135deg, #d4af37, #b8962e);
  /* Dourado premium (corrigi o comentário que estava errado) */

  color: #0e2a47; 
  /* Azul escuro fica mais sofisticado que preto puro */

  font-size: 18px; 
  /* 22px estava grande demais (fica mais elegante assim) */

  font-weight: 600; 
  /* Destaque sem exagero */

  padding: 16px 32px; 
  /* Melhor proporção (antes estava “gordo”) */

  border-radius: 8px; 
  /* Mais elegante (12px estava muito “inflado”) */

  text-decoration: none; 
  /* Remove sublinhado */

  transition: all 0.3s ease;
  /* Animação mais suave e completa */

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  /* Sombra premium */

  cursor: pointer;
}

/* ===== Hover (efeito ao passar o mouse) ===== */
.btn-cta:hover {
  transform: translateY(-3px);
  /* Efeito de elevação */

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  /* Sombra mais forte no hover */
}

/* ===== Efeito ao passar o mouse ===== */
.btn-cta:hover {
  background-color: #27ae60; /* Verde mais escuro ao passar o mouse */
  transform: scale(1.05);   /* Leve aumento (efeito de destaque/interação) */
}


/* parte da oferta*/
/* ===== Seção principal ===== */
/* ===== Seção principal (agora com imagem de fundo) ===== */
/* ===== Overlay escuro (efeito premium + melhora leitura) ===== */
/* ===== SEÇÃO PRINCIPAL DA OFERTA ===== */
.oferta{

  position: relative; 
  /* define a seção como referência para o overlay (::before) */

  background: url("oferta.jpg") no-repeat center center; 
  /* imagem de fundo da seção */

  background-size: cover; 
  /* faz a imagem ocupar toda a área da seção */

  background-position: center; 
  /* mantém o foco da imagem centralizado */

  color: #ffffff; 
  /* define a cor padrão do texto como branco */

  padding: 80px 20px; 
  /* espaço interno da seção (80px em cima/baixo e 20px lados) */

  font-family: 'Segoe UI', sans-serif; 
  /* fonte usada no texto */

  display: flex; 
  /* ativa o sistema Flexbox para organizar os elementos internos */

  flex-direction: column; 
  /* GARANTE que todos os elementos fiquem um abaixo do outro */

  justify-content: center; 
  /* centraliza os elementos verticalmente dentro da seção */

  align-items: center; 
  /* centraliza os elementos horizontalmente */

  text-align: center; 
  /* centraliza o texto dentro dos elementos */

  gap: 25px;
  /* cria espaço entre cada elemento (título, texto, lista, botão) */

}


/* overlay azul */
.oferta::before{
  content:"";
  position:absolute;

  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(11,28,44,0.75);

  z-index:1; /* fica acima da imagem */
}


/* conteúdo fica acima do overlay */
.oferta *{
  position:relative;
  z-index:2;
}

/* ===== Título ===== */
.oferta h1 {
  font-size: 36px;
  line-height: 1.3;
  margin-bottom: 30px;
}

.oferta h1 span {
  color: #d4af37; /* dourado */
}


/* ===== Subtítulo ===== */
.sub {
  font-size: 18px;
  color: #cfd8e3;
  margin-bottom: 30px;
  line-height: 1.6;
}


/* ===== Lista de benefícios ===== */
.beneficios {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.beneficios li {
  margin: 10px 0;
  font-size: 16px;
}


/* ===== Observação ===== */
.obs {
  font-size: 15px;
  color: #aab7c4;
  margin-bottom: 40px;
  font-style: italic;
}


/* ===== Botão ===== */
.btn-cta {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37, #b8962e);
  color: #0b1c2c;
  padding: 18px 35px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}


/* ===== EFEITO EXTRA (caso use outra classe de botão) ===== */
.btn-oferta:hover {
  background: #27ae60;
  transform: scale(1.05);
}


/* ===== TEXTO DE GARANTIA ===== */
.garantia {
  font-size: 14px;
  margin-top: 10px;
  color: #c5c5c5; /* ajustado para combinar com fundo escuro */
}


/* ===== SEÇÃO APRESENTAÇÃO PROFISSIONAL ===== */

/* =========================
   SEÇÃO SOBRE
   ========================= */
/* =========================
   SEÇÃO SOBRE
   ========================= */
   /* =========================
   IMAGEM DO ADVOGADO
   ========================= */

.foto-profissional img{

  max-width:420px;
  /* define um tamanho mais equilibrado da foto */

  height:auto;
  /* mantém a proporção da imagem */

  display:block;
  /* evita espaços estranhos em imagens */

}


/* =========================
   SEÇÃO SOBRE
   ========================= */

.sobre{

  background:url('apresentacao.png') no-repeat center right;
  /* imagem de fundo */

  background-size:cover;
  /* faz a imagem cobrir toda a seção */

  color:#ffffff;
  /* texto branco */

  padding:40px 40px;
  /* espaçamento interno da seção */

}


/* =========================
   CONTAINER PRINCIPAL
   ========================= */

.sobre-container{

  max-width:1300px;
  /* largura máxima da seção */

  margin:0 auto;
  /* centraliza na tela */

  display:flex;
  /* ativa layout lado a lado (texto + foto) */

  align-items:flex-start;
  /* alinha tudo pelo topo */

  justify-content:space-between;
  /* cria espaço entre o texto e a foto */

  gap:60px;
  /* espaço fixo entre texto e imagem */

  min-height:500px;
  /* altura mínima da seção */

}


/* =========================
   BLOCO DE TEXTO
   ========================= */

.sobre-texto{

  max-width:520px;
  /* largura ideal para leitura */

  text-align:left;
  /* alinhamento do texto */

}


/* =========================
   TÍTULO PRINCIPAL
   ========================= */

.sobre-texto h2{

  font-size:33px;
  /* tamanho do título */

  font-weight:600;
  /* peso da fonte */

  margin-bottom:15px;
  /* espaço abaixo do título */



}


/* =========================
   SUBTÍTULO
   ========================= */

.sobre-texto h3{

  font-size:22px;
  /* tamanho do subtítulo */

  font-weight:500;
  /* peso médio */

  margin-bottom:25px;
  /* espaço abaixo */

}


/* =========================
   PARÁGRAFOS
   ========================= */

.sobre-texto p{

  font-size:18px;
  /* tamanho confortável para leitura */

  line-height:1.7;
  /* espaçamento entre linhas */

  color:#f3f3f3;
  /* cor clara */

  margin-bottom:15px;
  /* espaço entre parágrafos */

}
/* ===== SEÇÃO DÚVIDAS FREQUENTES ===== */
.faq {
 
  background: #ffffff ; /* fundo off-white levemente azulado (destaca da seção anterior e passa sensação premium) */
  padding: 80px 20px; /* espaço interno (cima/baixo | lados) */
  text-align: center; /* centraliza o título */
}

/* ===== TÍTULO ===== */
.faq h2 {
  color:#0e2a47;
  font-size: 32px; /* tamanho do título */
  margin-bottom: 40px; /* espaço abaixo do título */

}

/* ===== ITEM (CAIXA DE CADA PERGUNTA) ===== */
.faq-item {
  max-width: 800px; /* largura máxima (melhora leitura) */
  margin: 0 auto 20px; /* centraliza e dá espaço entre itens */
  border-radius: 6px; /* cantos levemente arredondados */
  overflow: hidden; /* impede conteúdo de sair da caixa */

  box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* sombra leve (efeito premium) */
}

/* ===== PERGUNTA (BOTÃO CLICÁVEL) ===== */
.faq-pergunta {
  width: 100%; /* ocupa toda a largura */
  background: #08263f; /* azul escuro (autoridade e contraste) */
  color: #fff; /* texto branco */
  padding: 18px 20px; /* espaço interno */
  font-size: 16px; /* tamanho da pergunta */
  border: none; /* remove borda padrão */
  cursor: pointer; /* mostra que é clicável */

  display: flex; /* ativa flexbox */
  justify-content: space-between; /* separa texto e + */
  align-items: center; /* alinha verticalmente */

  transition: 0.3s; /* suaviza hover */
}

/* ===== HOVER (QUANDO PASSA O MOUSE) ===== */
.faq-pergunta:hover {
  background: #0d3558; /* azul um pouco mais claro (feedback visual) */
}

/* ===== RESPOSTA (CAIXA ESCONDIDA) ===== */
.faq-resposta {
  background: #d2d5d8; /* azul claro acinzentado (suave e fácil leitura) */
  max-height: 0; /* começa escondido */
  overflow: hidden; /* esconde conteúdo extra */
  transition: max-height 0.3s ease; /* anima abertura */
}

/* ===== TEXTO DA RESPOSTA ===== */
.faq-resposta p {
  padding: 20px; /* espaço interno */
  text-align: left; /* melhora leitura */
  color: #1e293b; /* texto mais escuro (contraste melhor que cinza claro) */
  line-height: 1.6; /* espaçamento entre linhas */
}

/* ===== ITEM ATIVO (QUANDO CLICA) ===== */
.faq-item.ativo .faq-resposta {
  max-height: 200px; /* altura máxima ao abrir (mostra conteúdo) */
}

/* ===== ANIMAÇÃO DO + ===== */
.faq-item.ativo .faq-pergunta span {
  transform: rotate(45deg); /* gira o + (vira um X visualmente) */
}
/* =========================
   CTA FINAL (SEÇÃO DE OFERTA)
   ========================= */
.cta-final-section {
  background: #08263f;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.cta-final-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
  text-decoration: underline;
}

.cta-final-section p {
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* BOTÃO CTA */
.cta-final-btn {
  display: inline-block;
  background: #d9d9d9;
  color: #000;
  padding: 15px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 20px;
  transition: 0.3s;
}

.cta-final-btn:hover {
  background: #bfbfbf;
}

/* TEXTO PEQUENO ABAIXO DO BOTÃO */
.cta-final-mini {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  opacity: 0.9;
}


/* =========================
   FOOTER (RODAPÉ)
   ========================= */
/* ===== SEÇÃO FINAL (ABAIXO DO FAQ) ===== */

/* ===== FOOTER ===== */
/* ===== FOOTER ===== */
/* =========================
/* =========================
   CTA FINAL (PARTE DE CIMA)
   ========================= */

/* BLOCO PRINCIPAL (SEM IMAGEM) */
.cta-final-section {
  background: #0b1c2c; /* define a cor de fundo (azul escuro elegante) */
  color: #ffffff; /* define a cor padrão do texto como branco */
  text-align: center; /* centraliza todo o conteúdo horizontalmente */
  padding: 80px 20px; /* espaçamento interno: 80px em cima/baixo e 20px nas laterais */
}

/* TÍTULO */
.cta-final-section h2 {
  font-size: 28px; /* tamanho do texto do título */
  margin-bottom: 20px; /* espaço abaixo do título */
}

/* TEXTO */
.cta-final-section p {
  font-size: 16px; /* tamanho do parágrafo */
  margin-bottom: 30px; /* espaço abaixo do texto */
  line-height: 1.6; /* altura da linha para melhorar leitura */
  color: #dbeafe; /* cor azul claro suave para contraste elegante */
}

/* BOTÃO */
.cta-final-btn {
  display: inline-block; /* permite aplicar padding e manter comportamento de botão */
  background: linear-gradient(135deg, #d4af37, #b8962e); /* gradiente dourado (efeito premium) */
  color: #ffffff; /* cor do texto do botão */
  padding: 20px 28px; /* tamanho interno do botão (deixa ele grande e chamativo) */
  border-radius: 6px; /* bordas levemente arredondadas */
  text-decoration: none; /* remove sublinhado do link */
  font-weight: 600; /* deixa o texto mais forte (semi-bold) */
  transition: 0.3s; /* suaviza animações (hover) */
  font-size: 23px; /*  É ESSA LINHA que controla o tamanho do texto */
}

/* EFEITO HOVER */
.cta-final-btn:hover {
  background: #e6eef7; /* muda o fundo ao passar o mouse (efeito de interação) */
  transform: translateY(-2px); /* levanta levemente o botão */
}

/* TEXTO PEQUENO */
.cta-final-mini {
  display: block; /* faz ocupar linha inteira */
  margin-top: 20px; /* espaço acima do texto */
  font-size: 14px; /* tamanho menor para informação secundária */
  opacity: 0.9; /* leve transparência para não competir com o CTA */
}
/* =========================
   FOOTER (COM IMAGEM)
   ========================= */

/* BLOCO PRINCIPAL DO FOOTER */
.site-footer {
  position: relative;

  /* FOTO DE FUNDO (troque pela sua imagem) */
  background: url('desenho.jpeg') no-repeat center center;
  background-size: cover;

  color: #ffffff;
  padding: 80px 20px 60px;
  overflow: hidden;
}

/* "CORTINA" AZUL POR CIMA DA IMAGEM */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;

  /* degradê escuro para melhorar leitura */
  background: linear-gradient(
    rgba(5, 25, 55, 0.85),
    rgba(10, 35, 70, 0.9)
  );

  z-index: 1;
}

/* GARANTE QUE O CONTEÚDO FIQUE NA FRENTE DA IMAGEM */
.site-footer-container {
  position: relative;
  z-index: 2;

  max-width: 1100px;
  margin: 0 auto;
}

/* BLOCO DE CONTATO */
/* BLOCO DE CONTATO (título da seção: ex: "Contato") */
.site-footer-contato h3 {
  font-size: 28px; /* define o tamanho do título */
  margin-bottom: 15px; /* espaço abaixo do título */
  color: #dbeafe; /* cor azul clara para destacar sem pesar */
}

/* TEXTOS DE CONTATO (telefone, @, email) */
.site-footer-contato p {
  font-size: 17px; /* tamanho do texto */
  margin-bottom: 8px; /* espaçamento entre cada linha */
  color: #cbd5e1; /* cor suave para não competir com o título */
}

/* EFEITO AO PASSAR O MOUSE */
.site-footer-contato p:hover {
  color: #ffffff; /* deixa o texto branco ao passar o mouse (destaque) */
  transition: 0.3s; /* animação suave na mudança de cor */
}

.site-footer-contato {
  text-align: center; /* centraliza todo o conteúdo dentro do bloco */
}

/* RESET GLOBAL (remove espaços indesejados) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove borda branca lateral */
body {
  margin: 0;
  background: #0b1c2c; /* mesma cor do site */
}

/* ===== BOTÃO WHATSAPP ===== */
.whatsapp-fixo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  z-index: 999;
  transition: 0.3s;
}

.whatsapp-fixo img {
  width: 30px;
  height: 30px;
}

.whatsapp-fixo:hover {
  transform: scale(1.1);
}


/* ESCONDE FOTO QUADRADA NO DESKTOP */

.foto-profissional{
display:none;
}

/* ============================= */
/* MOBILE */
/* ============================= */
/*responsivo*/
/*header, logo, título, menu*/

/* =========================
MOBILE
========================= */

/* =========================
HEADER MOBILE
========================= */
@media (max-width:768px){

.header{
position:relative;
padding-bottom:60px;
}

.header-container{
display:flex;
flex-direction:column;
align-items:center;
}

.logo img{
width:100%;
height:auto;
display:block;
}

.menu{

position:absolute;
bottom:10px;
left:0;

width:100%;

display:flex;
justify-content:center;

flex-wrap:nowrap;

gap:10px;

padding:0 10px;

}

/* LINKS */

.menu a{

font-size:14px;
padding:4px 3px;
white-space:nowrap;

}

/* ESCONDE INÍCIO */

.menu a:first-child{
display:none;
}

/* TROCA ÁREAS DE ATUAÇÃO */

.menu a:nth-child(3){
font-size:0;
}

.menu a:nth-child(3)::after{
content:"Atuação";
font-size:14px;
}

}

/*hero*/


/*benefícios*/

/* =========================
CARDS RESPONSIVOS
========================= */

@media (max-width:768px){

.benefits-grid{

/* vira uma coluna */
grid-template-columns:1fr;

gap:25px;

}

/* cards ocupam largura total */
.card{

width:100%;

}

/* imagem maior para ficar legível */
.card img{

width:100%;
height:auto;

}

/* texto um pouco maior no celular */
.card h3{

font-size:20px;

}

.card p{

font-size:16px;
line-height:1.5;

}

}
/*fale agora*/
/*oferta*/
/*apresentação*/

/* =========================
SEÇÃO SOBRE - MOBILE
========================= */
@media (max-width:768px){

.sobre{

background:none;
background-color:#0e2a47;

padding:60px 25px;

}

.sobre-container{

display:flex;
flex-direction:column;
align-items:center;

}

.foto-profissional{

display:flex !important;
justify-content:center;

margin-bottom:25px;

}

.foto-profissional img{

width:180px;
height:180px;

object-fit:cover;

border-radius:20px;

display:block;

}

.sobre-texto{
text-align:center;
}

}