/* ==========================================================================
   PAGES — estilos específicos de páginas (HOME e landing pages de serviço)
   Zanette & Zanette Advogados
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — Home
   -------------------------------------------------------------------------- */
.hero-home {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--branco);
  min-height: 60vh;
}

@media (min-width: 1024px) {
  .hero-home { min-height: 85vh; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 31, 60, .55) 0%, rgba(10, 31, 60, .88) 100%);
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 2;
  padding-block: 4rem 2.5rem;
  width: 100%;
}

.hero-conteudo {
  max-width: 640px;
}

.hero-conteudo h1 {
  color: var(--branco);
  margin-bottom: 1.25rem;
}

.hero-conteudo p {
  color: rgba(255, 255, 255, .92);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-selo {
  position: relative;
  z-index: 2;
  background-color: rgba(10, 31, 60, .6);
  padding-block: .9rem;
  margin-top: auto;
}

.hero-selo p {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dourado-claro);
  text-align: center;
}

@media (min-width: 1024px) {
  .hero-selo p { text-align: left; }
}

/* --------------------------------------------------------------------------
   SOBRE O ADVOGADO
   -------------------------------------------------------------------------- */
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  .sobre-grid {
    grid-template-columns: 380px 1fr;
    gap: 3.5rem;
  }
}

.sobre-foto-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.sobre-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.badge-oab {
  display: inline-block;
  background-color: var(--cinza-claro);
  color: var(--azul-marinho);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 999px;
  margin-block: .6rem 1.1rem;
}

.pilares-grid .pilar-card {
  text-align: center;
}

.pilares-grid .card-icone {
  margin-inline: auto;
  color: var(--dourado-texto);
}

/* --------------------------------------------------------------------------
   SERVIÇOS
   -------------------------------------------------------------------------- */
.servico-card {
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
}

.servico-card:hover {
  border-color: var(--dourado);
}

.servico-card .card-icone img {
  width: 26px;
  height: 26px;
}

/* --------------------------------------------------------------------------
   COMO FUNCIONA
   -------------------------------------------------------------------------- */
.passos-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .passos-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.passo-item {
  position: relative;
  text-align: center;
  padding-top: .5rem;
}

.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--dourado);
  color: var(--dourado);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
}

.passo-item h3 {
  color: var(--branco);
  margin-bottom: .5rem;
}

.passo-item p {
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
}

@media (min-width: 1024px) {
  .passo-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(50% + 45px);
    width: calc(100% - 90px);
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--dourado) 0 6px, transparent 6px 12px);
  }
}

.como-funciona-obs-wrapper {
  margin-top: 3rem;
  text-align: center;
}

.como-funciona-obs {
  display: inline-block;
  background-color: rgba(255, 255, 255, .08);
  border: 1px solid rgba(201, 169, 97, .4);
  border-radius: var(--radius);
  padding: .9rem 1.5rem;
  font-size: .92rem;
  color: var(--dourado-claro);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   NÚMEROS
   -------------------------------------------------------------------------- */
.numeros-section .grid-4 {
  gap: 2rem;
}

.numero-item {
  text-align: center;
}

.numero-valor {
  display: block;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw + 1rem, 3.2rem);
  color: var(--azul-marinho);
  line-height: 1;
  margin-bottom: .6rem;
}

.numero-label {
  font-size: .92rem;
  color: var(--cinza-texto);
  font-weight: 500;
  margin-bottom: 0;
}

.numero-placeholder {
  opacity: .45;
}

.numero-placeholder .numero-valor {
  color: var(--cinza-texto);
}

.numero-aviso {
  display: inline-block;
  margin-top: .4rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dourado-texto);
}

.texto-obs-placeholder {
  margin-top: 2.5rem;
  font-size: .8rem;
  color: var(--cinza-texto);
  font-style: italic;
  opacity: .8;
}

/* --------------------------------------------------------------------------
   DEPOIMENTOS
   -------------------------------------------------------------------------- */
.carrossel-depoimentos {
  position: relative;
}

.carrossel-trilho {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}

.carrossel-trilho::-webkit-scrollbar {
  display: none;
}

.depoimento-card {
  position: relative;
  flex: 0 0 85%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .depoimento-card { flex-basis: calc(50% - .75rem); }
}

@media (min-width: 1024px) {
  .depoimento-card { flex-basis: calc(33.333% - 1rem); }
}

.depoimento-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.1rem;
}

.depoimento-texto {
  font-style: italic;
  color: var(--cinza-texto);
  margin-bottom: 1rem;
}

.depoimento-nome {
  font-weight: 700;
  color: var(--azul-marinho);
  margin-bottom: 0;
}

.depoimento-cidade {
  font-size: .85rem;
  color: var(--cinza-texto);
}

.selo-exemplo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--cinza-claro);
  color: var(--cinza-texto);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .25rem .6rem;
  border-radius: 999px;
}

.carrossel-controles {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.carrossel-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--branco);
  box-shadow: var(--sombra);
  color: var(--azul-marinho);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}

.carrossel-btn:hover {
  background-color: var(--dourado);
  color: var(--azul-marinho);
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final-section {
  background-color: var(--azul-marinho);
}

.cta-final-box {
  text-align: center;
  border: 2px solid var(--dourado);
  border-radius: var(--radius);
  padding: 3.5rem 1.75rem;
  max-width: 780px;
  margin-inline: auto;
}

.cta-final-box h2 {
  color: var(--branco);
  margin-bottom: 1rem;
}

.cta-final-box p {
  color: rgba(255, 255, 255, .85);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

/* ==========================================================================
   LANDING PAGES DE SERVIÇO (servicos/*.html)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO INTERNO — mais baixo que o da home, texto centralizado
   -------------------------------------------------------------------------- */
.hero-interna {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--branco);
  min-height: 42vh;
  text-align: center;
}

.hero-interna .hero-conteudo {
  margin-inline: auto;
  max-width: 720px;
}

.hero-interna .hero-ctas {
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-interna { min-height: 48vh; }
}

/* --------------------------------------------------------------------------
   CONTEÚDO — "O que é", "Quem tem direito", etc.
   -------------------------------------------------------------------------- */
.conteudo-texto {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.conteudo-texto:last-child {
  margin-bottom: 0;
}

.conteudo-texto h2 {
  margin-bottom: 1.25rem;
}

.conteudo-texto h3 {
  margin-bottom: 1rem;
  color: var(--azul-marinho);
}

.conteudo-texto > p {
  font-size: 1.05rem;
}

.lista-check,
.lista-x {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.lista-check li,
.lista-x li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 1rem;
}

.icone-check {
  color: var(--dourado-texto);
  flex-shrink: 0;
  margin-top: .1rem;
}

.icone-x {
  color: var(--cinza-texto);
  flex-shrink: 0;
  margin-top: .1rem;
  opacity: .65;
}

.bloco-nao-tem {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(10, 31, 60, .1);
}

/* --------------------------------------------------------------------------
   CAIXA "ATENÇÃO" — usada quando existe pagina.atencao (ex.: 28,86%)
   -------------------------------------------------------------------------- */
.caixa-atencao {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background-color: var(--dourado-claro);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 820px;
  margin: 2.5rem auto 0;
}

.caixa-atencao .icone-alerta {
  color: var(--azul-marinho);
  flex-shrink: 0;
  margin-top: .15rem;
}

.caixa-atencao p {
  margin: 0;
  color: var(--azul-marinho);
  font-weight: 600;
  font-size: .96rem;
}

/* --------------------------------------------------------------------------
   CHIPS DE DOENÇAS — usado quando existe pagina.doencas (isenção de IR)
   -------------------------------------------------------------------------- */
.bloco-doencas {
  max-width: 820px;
  margin: 2.5rem auto 0;
}

.chips-doencas {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: 1rem;
}

.chip {
  display: inline-block;
  background-color: var(--cinza-claro);
  color: var(--azul-marinho);
  font-size: .86rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 31, 60, .08);
}

.nota-pequena {
  font-size: .8rem;
  color: var(--cinza-texto);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   FAIXA DE CTA (intermediário e final)
   -------------------------------------------------------------------------- */
.cta-intermediario {
  background-color: var(--azul-marinho);
  text-align: center;
}

.cta-intermediario-texto {
  color: var(--branco);
  font-size: 1.2rem;
  font-weight: 600;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   FAQ — acordeão
   -------------------------------------------------------------------------- */
.acordeao-faq {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.faq-item {
  background-color: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.faq-cabecalho {
  margin: 0;
  font-size: 1rem;
}

.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: var(--azul-marinho);
}

.faq-seta {
  flex-shrink: 0;
  color: var(--dourado-texto);
  transition: transform .25s ease;
}

.faq-item.aberto .faq-seta {
  transform: rotate(180deg);
}

.faq-resposta {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}

.faq-resposta p {
  padding: 0 1.5rem 1.25rem;
  color: var(--cinza-texto);
  font-size: .96rem;
}

/* --------------------------------------------------------------------------
   "O QUE TRATAMOS" — páginas de área (Trabalhista, Sucessória, Demais Benefícios)
   -------------------------------------------------------------------------- */
.lista-servicos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .lista-servicos { grid-template-columns: repeat(2, 1fr); }
}

.lista-servicos li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background-color: var(--branco);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  font-size: .96rem;
}

/* ==========================================================================
   PÁGINA SOBRE
   ========================================================================== */

/* Hero sem imagem de fundo: gradiente sólido no lugar do banner */
.hero-sobre,
.hero-contato {
  background: linear-gradient(135deg, var(--azul-marinho) 0%, var(--azul-profundo) 100%);
}

/* Foto do advogado maior nesta página (bloco de destaque) */
@media (min-width: 1024px) {
  .page-sobre .sobre-grid {
    grid-template-columns: 440px 1fr;
  }
}

.diferencial-item h3 {
  color: var(--azul-marinho);
}

.diferencial-item p {
  color: var(--cinza-texto);
  margin-bottom: 0;
}

/* Mapa do Brasil como fundo/marca d'água da seção inteira (o degradê
   claro por cima é montado via JS, junto com a imagem, em main.js) */
.secao-escritorios {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   CARDS DE ESCRITÓRIO — reaproveitados em sobre.html e contato.html
   -------------------------------------------------------------------------- */
.escritorio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.escritorio-card h3 {
  color: var(--azul-marinho);
  margin-bottom: .6rem;
}

.escritorio-card p {
  font-size: .92rem;
  color: var(--cinza-texto);
  margin-bottom: .3rem;
}

.escritorio-card .escritorio-cep {
  font-weight: 600;
  color: var(--dourado-texto);
  margin-bottom: 0;
}

.escritorio-card .btn-ver-mapa {
  color: var(--dourado-texto);
}

.escritorio-card .btn-ver-mapa:hover,
.escritorio-card .btn-ver-mapa:focus-visible {
  background-color: var(--dourado-texto);
  color: var(--branco);
}

/* Abaixo de 480px, 2 colunas deixam pouco espaço e o botão "Ver no
   mapa" quebra em várias linhas, perdendo a aparência de pílula — nessa
   faixa o grid dos escritórios vira 1 coluna só. */
@media (max-width: 480px) {
  #escritorios-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PÁGINA CONTATO
   ========================================================================== */
.contato-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 640px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .contato-info-grid { grid-template-columns: repeat(2, 1fr); }
}

.contato-info-item {
  background-color: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 1.75rem;
  text-align: center;
}

.contato-info-item h3 {
  color: var(--azul-marinho);
  margin-bottom: .85rem;
}

.contato-info-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.contato-info-link {
  font-weight: 600;
  color: var(--dourado-texto);
  font-size: 1.05rem;
}

.contato-info-link:hover {
  text-decoration: underline;
}

.redes-sociais-contato a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--cinza-claro);
  color: var(--azul-marinho);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}

.redes-sociais-contato a:hover {
  background-color: var(--dourado);
  color: var(--branco);
}