/* ============================================================
   FERNANDES LEMOS OLIVEIRA & ROCHA ADVOCACIA
   Estilos complementares ao Tailwind

   Aqui ficam apenas os componentes recorrentes e os efeitos que
   o Tailwind não resolve bem em utilitários soltos (revelações
   ao rolar, acordeão do FAQ, texturas do fundo). O layout em si
   continua sendo feito com utilitários no HTML.

   Índice
     1.  Base e acessibilidade
     2.  Cabeçalho e navegação
     3.  Botões
     4.  Elementos de seção (eyebrow, links)
     5.  Hero
     6.  Cards de áreas de atuação
     7.  Diferenciais
     8.  Equipe
     9.  Depoimentos
     10. FAQ
     11. Rodapé
     12. Botão flutuante de WhatsApp
     13. Revelação ao rolar
   ============================================================ */

/* ------------------------------------------------------------
   1. Base e acessibilidade
   ------------------------------------------------------------ */

/* Compensa o cabeçalho fixo ao pular para uma âncora — sem isso
   o título da seção fica escondido atrás da navbar. */
section[id] {
  scroll-margin-top: 80px;
}

::selection {
  background: #b5a268;
  color: #10386a;
}

/* Anel de foco visível apenas para navegação por teclado */
:focus-visible {
  outline: 2px solid #b5a268;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  z-index: 100;
  transform: translateX(-50%);
  background: #b5a268;
  color: #10386a;
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  transition: top 0.25s ease;
}
.skip-link:focus {
  top: 0.75rem;
}

/* Trava a rolagem do fundo enquanto o menu mobile está aberto */
body.menu-aberto {
  overflow: hidden;
}

/* ------------------------------------------------------------
   2. Cabeçalho e navegação
   ------------------------------------------------------------ */

/* Estado "rolado": fundo sólido com leve desfoque, aplicado por JS */
#cabecalho.rolado {
  background: rgba(16, 56, 106, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
#cabecalho.rolado .mx-auto {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Logo oficial — a arte não é alterada em nada.
   O arquivo original traz uma moldura branca de ~1,4% em volta do
   círculo, que apareceria como um quadrado claro sobre o azul da
   navbar. Em vez de reeditar a imagem, recortamos em círculo e
   ampliamos o mínimo necessário (4%) para a moldura sair de cena. */
.logo-marca {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}
.logo-marca img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.logo-marca-rodape {
  width: 40px;
  height: 40px;
}

.nav-link {
  position: relative;
  white-space: nowrap;   /* "Áreas de Atuação" quebrava em duas linhas
                            e engordava o cabeçalho entre 1024 e 1280px */
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.3s ease;
}
.nav-link:hover {
  color: #fff;
}

/* Sublinhado dourado que cresce a partir da esquerda */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: #b5a268;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after,
.nav-link.ativo::after {
  width: 100%;
}
.nav-link.ativo {
  color: #fff;
}

/* Ícone hambúrguer que vira "X" quando o menu abre */
.icone-menu {
  position: relative;
  display: block;
  width: 24px;
  height: 14px;
}
.icone-menu span {
  position: absolute;
  left: 0;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 0.35s ease, opacity 0.2s ease;
}
.icone-menu span:nth-child(1) { top: 0; }
.icone-menu span:nth-child(2) { top: 6px; }
.icone-menu span:nth-child(3) { top: 12px; }

.icone-menu.aberto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.icone-menu.aberto span:nth-child(2) { opacity: 0; }
.icone-menu.aberto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.link-mobile {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.7rem 1rem;
  transition: color 0.3s ease;
}
.link-mobile:hover {
  color: #b5a268;
}

/* ------------------------------------------------------------
   3. Botões
   ------------------------------------------------------------ */

.btn-dourado,
.btn-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sem isto o rótulo quebra em três linhas quando a coluna aperta:
     preferimos que o botão inteiro passe para a linha de baixo. */
  white-space: nowrap;
  padding: 1.05rem 2.4rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, transform 0.35s ease;
}

.btn-dourado {
  background: #b5a268;
  color: #10386a;   /* azul mais fundo: o dourado da logo é claro e
                       precisa de um texto escuro para manter o AA */
  border: 1px solid #b5a268;
}
.btn-dourado:hover {
  background: #d8c99b;
  border-color: #d8c99b;
  transform: translateY(-2px);
}

.btn-contorno {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.btn-contorno:hover {
  border-color: #b5a268;
  color: #b5a268;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   4. Elementos de seção
   ------------------------------------------------------------ */

/* Rótulo curto acima dos títulos, com um traço dourado à esquerda.
   Repete-se em todas as seções e cria o ritmo visual da página. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  /* Sobre o azul da logo o dourado puro fica com pouco contraste
     em texto miúdo, então aqui entra a variação clara. */
  color: #d8c99b;
}
.eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: #d8c99b;
}
/* Variante para seções de fundo claro */
.eyebrow-escuro {
  color: #7a6b3c;
}
.eyebrow-escuro::before {
  background: #7a6b3c;
}

.link-texto {
  color: #184f90;
  border-bottom: 1px solid #b5a268;
  padding-bottom: 1px;
  transition: color 0.3s ease;
}
.link-texto:hover {
  color: #7a6b3c;
}

/* ------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------ */

/* Duas camadas sobre a foto: a primeira garante o contraste do
   texto (acessibilidade), a segunda escurece a base para o
   conteúdo "assentar" na dobra. */
.hero-overlay {
  background:
    linear-gradient(100deg, #184f90 12%, rgba(24, 79, 144,0.82) 55%, rgba(24, 79, 144,0.55) 100%),
    linear-gradient(to top, #184f90 2%, transparent 45%);
}

/* Trama fina que remete a papel timbrado — quase imperceptível,
   mas tira a sensação de fundo "chapado". */
.hero-grade {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* A foto da estátua vem com a travessa da balança pendendo 3,64°
   para a direita (ângulo medido sobre a própria imagem). Numa página
   de advocacia uma balança desalinhada chama atenção pelo motivo
   errado, então giramos a foto de volta. O scale compensa os cantos
   que a rotação descobriria — 1.12 cobre a proporção mais exigente
   da caixa (757x440 no tablet). */
.foto-nivelada img {
  transform: rotate(-3.64deg) scale(1.12);
  transform-origin: center;
}

.item-confianca {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}
.item-confianca::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 5px;
  height: 5px;
  background: #b5a268;
  transform: rotate(45deg);
}

/* --- Retratos dos sócios no hero ---------------------------
   As duas fotos vieram da mesma sessão e trazem o mesmo fundo
   (mármore à esquerda, painel azul à direita). Lado a lado elas
   leem como um par institucional, não como duas fotos avulsas. */
.socios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (min-width: 1024px) {
  .socios { gap: 1.35rem; }
}

.socio { margin: 0; }

.socio-foto {
  position: relative;
  /* No celular o retrato é menos alto: a foto inteira é vertical
     demais e empurraria os rostos para fora da primeira dobra.
     O enquadramento (object-position no topo) preserva o rosto. */
  aspect-ratio: 5 / 6;
  overflow: hidden;
  /* A base da foto é apagada de verdade (mask), não coberta por um
     degradê sólido: assim ela se dissolve no fundo real do hero,
     que tem imagem e gradiente por baixo, sem deixar emenda. */
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0.45) 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0.45) 80%, transparent 100%);
}
.socio-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 640px) {
  .socio-foto { aspect-ratio: 600 / 824; }
}

/* A legenda sobe para dentro da área dissolvida — o nome nasce de
   dentro da foto, em vez de ficar num bloco separado embaixo. */
.socio figcaption {
  position: relative;
  margin-top: -3.2rem;
  text-align: center;
}
.socio-nome {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.3;
  color: #fff;
}
.socio-area {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d8c99b;
}

.indicador-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
@media (min-width: 1024px) {
  .indicador-scroll { display: block; }
}
.indicador-scroll .linha {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(181, 162, 104,0.9));
  animation: descer 2.4s ease-in-out infinite;
}
@keyframes descer {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}

/* Halo dourado difuso atrás do CTA final */
.brilho-dourado {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 780px;
  height: 780px;
  max-width: 130vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(181, 162, 104,0.14) 0%, transparent 62%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   6. Cards de áreas de atuação
   ------------------------------------------------------------ */

/* A grade usa gap-px sobre um fundo acinzentado: os cards brancos
   se separam por fios de 1px, sem bordas duplicadas nos encontros. */
.card-area {
  position: relative;
  background: #fff;
  padding: 2.75rem 2.25rem 2.5rem;
  transition: background-color 0.4s ease;
}

/* Fio dourado que desce do topo ao passar o mouse */
.card-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #b5a268;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-area:hover::before { width: 100%; }
.card-area:hover { background: #fbfaf7; }

.icone-area {
  width: 34px;
  height: 34px;
  color: #b5a268;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-area:hover .icone-area { transform: translateY(-3px); }

.card-area h3 {
  margin-top: 1.6rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 500;
  color: #184f90;
}
.card-area p {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Benefício para o cliente: o "e daí?" de cada área */
.card-area .beneficio {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(24, 79, 144,0.09);
  font-size: 0.78rem;
  font-style: italic;
  color: #184f90;
}

/* ------------------------------------------------------------
   7. Diferenciais
   ------------------------------------------------------------ */

.diferencial { position: relative; }

.diferencial .numero {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  color: #d8c99b;
  letter-spacing: 0.1em;
}
.diferencial h3 {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
}
.diferencial p {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------
   8. Equipe
   ------------------------------------------------------------ */

.card-advogado {
  background: #fff;
  border: 1px solid rgba(24, 79, 144,0.09);
  padding: 1.35rem 1.35rem 1.9rem;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.card-advogado:hover {
  border-color: rgba(181, 162, 104,0.55);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -22px rgba(24, 79, 144,0.4);
}

/* Espaço reservado à foto — proporção de retrato 4:5.
   Enquanto não houver foto real, exibe o monograma. */
.card-advogado .retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, #1e5fad 0%, #184f90 68%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-advogado .retrato::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(181, 162, 104,0.32);
  pointer-events: none;
}
/* As fotos oficiais já vêm na proporção 4:5 do slot, então o cover
   não corta nada — só garante o encaixe exato. */
.card-advogado .retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mantido para eventuais advogados ainda sem foto: o monograma
   entra no lugar do retrato sem quebrar o layout do card. */
.card-advogado .monograma {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 3.6rem;
  font-weight: 400;
  color: rgba(181, 162, 104,0.9);
  line-height: 1;
}

.card-advogado h3 {
  margin-top: 1.5rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 500;
  color: #184f90;
}
.card-advogado .cargo {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6b3c;
}
.card-advogado .oab {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #4b5563;
}

.link-whats {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #184f90;
  transition: color 0.3s ease, gap 0.3s ease;
}
.link-whats svg { width: 14px; height: 14px; }
.link-whats:hover {
  color: #7a6b3c;
  gap: 0.8rem;
}

/* ------------------------------------------------------------
   9. Depoimentos
   ------------------------------------------------------------ */

.card-depoimento {
  position: relative;
  background: #fff;
  border: 1px solid rgba(24, 79, 144,0.09);
  padding: 2.4rem 2rem 2rem;
}
.card-depoimento .aspas {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 3.4rem;
  line-height: 0.6;
  color: rgba(181, 162, 104,0.35);
}
.card-depoimento .texto {
  margin-top: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: #4b5563;
}
.card-depoimento .rodape-dep {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(24, 79, 144,0.09);
}
.card-depoimento .nome {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  color: #184f90;
}
.card-depoimento .caso {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a6b3c;
}
.card-depoimento .estrelas {
  margin-top: 0.7rem;
  letter-spacing: 0.18em;
  color: #b5a268;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------ */

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.6rem 0;
  text-align: left;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  color: #184f90;
  transition: color 0.3s ease;
}
.faq-pergunta:hover { color: #7a6b3c; }

/* Sinal de "+" que se transforma em "−" quando aberto */
.faq-sinal {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  background: #b5a268;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-sinal::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.faq-sinal::after  { left: 6px; top: 0; width: 1.5px; height: 14px; }
.faq-item.aberto .faq-sinal::after { transform: rotate(90deg); }

/* Animação de altura sem max-height "chutado":
   grid-template-rows de 0fr para 1fr mede o conteúdo real. */
.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-resposta > p {
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #4b5563;
}
.faq-item.aberto .faq-resposta {
  grid-template-rows: 1fr;
}
.faq-item.aberto .faq-resposta > p {
  padding-bottom: 1.7rem;
}

/* ------------------------------------------------------------
   11. Rodapé
   ------------------------------------------------------------ */

.titulo-rodape {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #b5a268;
}
.link-rodape {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}
.link-rodape:hover { color: #fff; }

/* ------------------------------------------------------------
   12. Botão flutuante de WhatsApp
   ------------------------------------------------------------ */

/* Marinho com anel dourado em vez do verde do WhatsApp: mantém a
   paleta da marca. O ícone continua sendo reconhecido de imediato. */
.btn-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #184f90;
  border: 1px solid rgba(181, 162, 104,0.6);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(24, 79, 144,0.7);
  transition: background-color 0.35s ease, transform 0.35s ease;
}
/* Começa oculto: no hero ele cobriria o nome de um dos sócios, e a
   ação já está coberta pelos dois botões da primeira dobra. Entra
   assim que o visitante rola — que é quando ele passa a fazer falta. */
.btn-whatsapp {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease,
              visibility 0.4s, background-color 0.35s ease;
}
.btn-whatsapp.visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.btn-whatsapp.visivel:hover { transform: scale(1.07); }

.btn-whatsapp svg { width: 27px; height: 27px; }
.btn-whatsapp:hover {
  background: #b5a268;
  color: #10386a;
}

/* Pulso discreto para atrair o olhar sem competir com o conteúdo */
.btn-whatsapp::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(181, 162, 104,0.55);
  animation: pulso 2.8s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (min-width: 1024px) {
  .btn-whatsapp {
    right: 2rem;
    bottom: 2rem;
    width: 60px;
    height: 60px;
  }
}

/* ------------------------------------------------------------
   13. Revelação ao rolar
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visivel {
  opacity: 1;
  transform: none;
}

/* Respeita quem pediu menos movimento no sistema operacional:
   o conteúdo aparece normalmente, apenas sem deslocamento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}