/* Estilos compartilhados por todas as páginas do site. */

:root {
  --grafite-900: #232325;
  --grafite-800: #2f2f31;
  --grafite-700: #3a3a3c;
  --grafite-600: #4a4a4d;
  --linha: rgba(226, 194, 127, .22);
  --dourado: #d4b06a;
  --dourado-claro: #e2c27f;
  --dourado-escuro: #b8914a;
  --degrade: linear-gradient(100deg, #b8914a 0%, #e2c27f 55%, #c9a45c 100%);
  --texto: #f2efe9;
  --texto-suave: #c9c5be;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", Arial, sans-serif;
  --largura: clamp(1140px, 72vw, 1380px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Tipografia fluida: o texto acompanha telas grandes em vez de ficar pequeno no meio da tela. */
html { font-size: clamp(16px, calc(0.47vw + 10px), 19px); scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: var(--grafite-800); color: var(--texto); font-family: var(--sans); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--dourado-claro); outline-offset: 3px; }

.container { width: min(var(--largura), 100% - 40px); margin-inline: auto; }
.sobretitulo { font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--dourado); }
h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1.1; margin: .5rem 0 1rem; }
h2 em, h1 em { font-style: italic; color: var(--dourado-claro); }
.secao { padding: clamp(64px, 10vw, 110px) 0; }
.secao-alt { background: var(--grafite-700); }
.cabecalho-secao { max-width: 40rem; margin-bottom: 48px; }
.cabecalho-secao p { color: var(--texto-suave); }
.filete { width: 64px; height: 1px; background: var(--degrade); margin: 0 0 1.2rem; }

.botao { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 3px; background: var(--degrade); color: var(--grafite-900); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: filter .2s, transform .2s; }
.botao:hover { filter: brightness(1.08); transform: translateY(-1px); }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao-linha { background: transparent; color: var(--dourado-claro); border: 1px solid var(--dourado); }
.botao-linha:hover { background: rgba(226, 194, 127, .08); }

/* Topo */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(35, 35, 37, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marca img { height: 44px; width: auto; }
.marca span { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .12em; color: var(--dourado-claro); line-height: 1.1; }
.marca small { display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .42em; color: var(--texto-suave); }
.menu { display: flex; align-items: center; gap: 2rem; list-style: none; }
.menu a { text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); transition: color .2s; }
.menu a:hover { color: var(--dourado-claro); }
.menu .botao { padding: .6rem 1.1rem; color: var(--grafite-900); }
.abrir-menu { display: none; background: none; border: 0; color: var(--dourado-claro); cursor: pointer; padding: 8px; }
.abrir-menu svg { width: 28px; height: 28px; }

/* Abertura */
.abertura { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 72px; background: var(--grafite-800) url("../img/abertura.webp") 72% top / cover no-repeat; overflow: hidden; }
/* A foto já vem integrada ao cenário (tools/compor_abertura.py); aqui só escurece o lado do texto. */
.abertura::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35,35,37,.97) 0%, rgba(35,35,37,.88) 30%, rgba(35,35,37,.35) 52%, rgba(35,35,37,0) 64%), linear-gradient(0deg, rgba(35,35,37,.85) 0%, rgba(35,35,37,0) 30%); }
.abertura .container { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 2rem; }
.abertura-texto { padding: 4rem 0; }
/* O h1 leva "Advogada em Recife" (para o Google) e a frase dela (para quem lê). */
h1 { font-weight: inherit; margin: 0 0 1.4rem; }
.h1-local { display: block; font-family: var(--sans); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1rem; }
.h1-frase { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 1.02; }
.abertura-texto p { max-width: 34rem; color: var(--texto-suave); font-size: 1.15rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.abertura-foto { min-height: 1px; }

/* Áreas */
.areas-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.area { position: relative; padding: 2.2rem 2rem 2rem; background: var(--grafite-800); border: 1px solid var(--linha); border-radius: 4px; display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
.area:hover { border-color: var(--dourado); transform: translateY(-3px); }
.area-destaque { background: linear-gradient(160deg, var(--grafite-600), var(--grafite-800) 70%); }
.area-icone { width: 44px; height: 44px; color: var(--dourado-claro); margin-bottom: 1.2rem; }
.area h3 { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.15; margin-bottom: .7rem; }
.area ul { list-style: none; color: var(--texto-suave); font-size: .93rem; margin-bottom: 1.6rem; flex: 1; }
.area li { padding-left: 1.1rem; position: relative; margin-bottom: .3rem; }
.area li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--dourado); }
/* O card inteiro é clicável: o link do título se estende por cima de todo o card. */
.area h3 a { text-decoration: none; }
.area h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.area h3 a:focus-visible { outline: none; }
.area:has(h3 a:focus-visible) { outline: 2px solid var(--dourado-claro); outline-offset: 3px; }
.area-mais { align-self: flex-start; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-claro); border-bottom: 1px solid var(--dourado-escuro); padding-bottom: 3px; transition: color .2s; }
.area:hover .area-mais { color: #fff; }

/* Sobre */
.sobre-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.sobre-foto { position: relative; max-width: 26rem; }
.sobre-foto::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--dourado); border-radius: 2px; }
.sobre-foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 2px; background: linear-gradient(160deg, #6b6b6e 0%, #a8895a 60%, #e2c27f 100%); }
.sobre-texto p { color: var(--texto-suave); margin-bottom: 1.1rem; }
.sobre-texto strong { color: var(--texto); font-weight: 500; }
.citacao { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--dourado-claro); line-height: 1.3; margin: 1.6rem 0 2rem; }
.assinatura { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado); }

/* Como funciona */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: passo; }
.passo { border-top: 1px solid var(--dourado); padding-top: 1.6rem; }
.passo-numero { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--dourado-claro); }
.passo h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: .6rem 0 .5rem; }
.passo p { color: var(--texto-suave); font-size: .95rem; }

/* Contato */
.contato-grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: stretch; }
.info { list-style: none; display: grid; gap: 1.6rem; margin: 2rem 0 2.4rem; }
.info li { display: flex; gap: 1rem; }
.info svg { width: 22px; height: 22px; flex: none; color: var(--dourado-claro); margin-top: .2rem; }
.info b { display: block; font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado); }
.info span, .info a { color: var(--texto-suave); text-decoration: none; overflow-wrap: anywhere; }
.info a:hover { color: var(--dourado-claro); }
.mapa { min-height: 380px; border: 1px solid var(--linha); border-radius: 4px; overflow: hidden; }
.mapa iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.35) contrast(1.05); }

/* Chamada final e rodapé */
.chamada { text-align: center; background: linear-gradient(rgba(35,35,37,.9), rgba(35,35,37,.94)), url("../img/parede-logo.webp") center / cover; }
.chamada p { color: var(--texto-suave); max-width: 36rem; margin: 0 auto 2.2rem; }
.chamada .filete { margin: 0 auto 1.2rem; }
.rodape { background: var(--grafite-900); padding: 3rem 0 6rem; border-top: 1px solid var(--linha); font-size: .85rem; color: var(--texto-suave); }
.rodape .container { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.rodape img { height: 64px; width: auto; }
.rodape-links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: var(--dourado-claro); }
.rodape small { display: block; width: 100%; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .75rem; text-align: center; }
.rodape small strong { color: var(--dourado-claro); font-weight: 600; }

/* WhatsApp flutuante */
.whats-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .2s; }
.whats-flutuante:hover { transform: scale(1.07); }
.whats-flutuante svg { width: 30px; height: 30px; }

/* Entrada suave: só quando o JS está ativo, e o conteúdo nunca começa invisível. */
@media (prefers-reduced-motion: no-preference) {
  .js .surgir { transform: translateY(18px); transition: transform .7s ease; }
  .js .surgir.visivel { transform: none; }
}

@media (max-width: 960px) {
  /* Celular: a foto ocupa o alto (imagem em retrato, 900x1500) e o texto começa logo abaixo do rosto. */
  .abertura { display: block; min-height: 0; padding-top: calc(80vw + 40px); background-image: url("../img/abertura-mobile.webp"); background-size: 100% auto; background-position: center 30px; }
  .abertura::before { background: linear-gradient(180deg, rgba(35,35,37,0) 0, rgba(35,35,37,0) calc(62vw + 40px), rgba(35,35,37,.92) calc(92vw + 40px), var(--grafite-800) calc(140vw + 40px)); }
  .abertura .container { grid-template-columns: 1fr; }
  .abertura-texto { padding: 0 0 3.5rem; }
  .abertura-foto { display: none; }
  .sobre-grade, .contato-grade { grid-template-columns: 1fr; }
  .sobre-foto { margin-inline: auto; width: 82%; }
  .passos { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  /* Sem JS: o topo mostra só o botão de WhatsApp. Com JS: menu hambúrguer. */
  .menu li:not(:last-child) { display: none; }
  .menu .botao { padding: .55rem .9rem; font-size: .7rem; }
  .js .abrir-menu { display: block; }
  .js .menu { position: fixed; inset: 72px 0 auto; flex-direction: column; gap: 0; background: var(--grafite-900); border-bottom: 1px solid var(--linha); padding: .5rem 0 1.5rem; display: none; }
  .js .menu.aberto { display: flex; }
  .js .menu li { display: block; width: 100%; text-align: center; }
  .js .menu a { display: block; padding: 1rem; }
  .js .menu .botao { display: inline-flex; margin-top: .6rem; }
}

/* Páginas internas (áreas de atuação e compromisso ético) */
.pagina-topo { position: relative; padding: calc(72px + clamp(48px, 8vw, 96px)) 0 clamp(48px, 8vw, 88px); background: linear-gradient(90deg, rgba(35,35,37,.97) 0%, rgba(35,35,37,.9) 55%, rgba(35,35,37,.75) 100%), url("../img/parede-logo.webp") 75% 30% / cover; border-bottom: 1px solid var(--linha); }
.trilha { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; font-size: .78rem; color: var(--texto-suave); margin-bottom: 1.8rem; }
.trilha li + li::before { content: "/"; margin-right: .4rem; color: var(--dourado); }
.trilha a { text-decoration: none; }
.trilha a:hover { color: var(--dourado-claro); }
.pagina-topo h1 { margin-bottom: 1.2rem; }
.pagina-topo .h1-frase { font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
.pagina-topo .lead { max-width: 42rem; color: var(--texto-suave); font-size: 1.15rem; }
.texto-area { max-width: 48rem; }
.texto-area p { color: var(--texto-suave); margin-bottom: 1.1rem; }
.situacoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; list-style: none; margin-top: 2.4rem; }
.situacoes li { padding: 1rem 0 1rem 1.6rem; border-bottom: 1px solid var(--linha); position: relative; color: var(--texto); }
.situacoes li::before { content: ""; position: absolute; left: 0; top: 1.85em; width: 10px; height: 1px; background: var(--dourado); }
.faq { max-width: 52rem; display: grid; gap: .8rem; }
.faq details { border: 1px solid var(--linha); border-radius: 4px; background: var(--grafite-800); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--dourado-claro); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem 1.3rem; color: var(--texto-suave); }
.outras-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.outras-areas a { display: block; padding: 1.4rem 1.6rem; border: 1px solid var(--linha); border-radius: 4px; text-decoration: none; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; transition: border-color .2s, color .2s; }
.outras-areas a span { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dourado); margin-bottom: .3rem; }
.outras-areas a:hover { border-color: var(--dourado); color: var(--dourado-claro); }
.compromissos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; list-style: none; }
.compromissos li { padding: 1.8rem; border: 1px solid var(--linha); border-radius: 4px; background: var(--grafite-800); }
.compromissos h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; margin-bottom: .6rem; color: var(--dourado-claro); }
.compromissos p { color: var(--texto-suave); font-size: .95rem; }
.texto-legal h2 { font-size: 1.6rem; margin: 2.2rem 0 .6rem; }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal ul { padding-left: 1.2rem; color: var(--texto-suave); margin-bottom: 1.1rem; }
.texto-legal li { margin-bottom: .6rem; }
.texto-legal a, .nota-legal a { color: var(--dourado-claro); }
.texto-legal strong { color: var(--texto); font-weight: 500; }
.nota-legal { max-width: 48rem; margin-top: 2.4rem; font-size: .88rem; color: var(--texto-suave); }

/* Chamada de "Seus Direitos" na página inicial: só frases curtas, para despertar a curiosidade. */
.chamada-direitos { background: var(--grafite-900); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.chamada-direitos-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.chamada-direitos-grade > div > p:not(.sobretitulo) { color: var(--texto-suave); margin-bottom: 1.8rem; max-width: 26rem; }
.ganchos { list-style: none; border-top: 1px solid var(--linha); }
.ganchos li { border-bottom: 1px solid var(--linha); }
.ganchos a { display: grid; grid-template-columns: 1fr auto; column-gap: 1.2rem; padding: 1.2rem .2rem; text-decoration: none; }
.gancho-area { grid-column: 1; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dourado); }
.gancho-texto { grid-column: 1; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin-top: .2rem; transition: color .2s; }
.gancho-seta { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.4rem; color: var(--dourado-claro); transition: transform .2s; }
.ganchos a:hover .gancho-texto { color: var(--dourado-claro); }
.ganchos a:hover .gancho-seta { transform: translateX(6px); }

/* Informativos */
.informativos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.informativo-card { position: relative; display: flex; flex-direction: column; padding: 1.8rem; border: 1px solid var(--linha); border-radius: 4px; background: var(--grafite-800); transition: border-color .25s, transform .25s; }
.informativo-card:hover { border-color: var(--dourado); transform: translateY(-3px); }
.informativo-card[hidden] { display: none; }
.informativo-area { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dourado); margin-bottom: .7rem; }
.informativo-card h2, .informativo-card h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; margin: 0 0 .8rem; }
.informativo-card h2 a, .informativo-card h3 a { text-decoration: none; }
.informativo-card h2 a::after, .informativo-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.informativo-card:hover h2 a, .informativo-card:hover h3 a { color: var(--dourado-claro); }
.informativo-resumo { color: var(--texto-suave); font-size: .93rem; flex: 1; margin-bottom: 1.2rem; }
.informativo-data { font-size: .8rem; color: var(--dourado); }
.ver-todos { margin-top: 2.4rem; text-align: center; }
.filtros { display: none; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.4rem; }
.js .filtros { display: flex; }
.filtros button { font: inherit; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--linha); background: transparent; color: var(--texto-suave); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.filtros button:hover { border-color: var(--dourado); color: var(--dourado-claro); }
.filtros button[aria-pressed="true"] { background: var(--degrade); border-color: transparent; color: var(--grafite-900); font-weight: 600; }
.h1-informativo { font-size: clamp(2rem, 3.8vw, 3.4rem) !important; max-width: 52rem; }
.informativo-meta { margin-top: 1.4rem; font-size: .85rem; color: var(--dourado); }
.texto-legal p { color: var(--texto-suave); margin-bottom: 1.1rem; }
.norma-box { margin: 2.4rem 0 1.4rem; padding: 1.4rem 1.6rem; border-left: 2px solid var(--dourado); background: var(--grafite-700); border-radius: 0 4px 4px 0; }
.norma-box p { margin-bottom: .3rem; }
.origem-instagram { margin-top: 1rem; font-size: .9rem; color: var(--texto-suave); }
.origem-instagram a { color: var(--dourado-claro); }
.aviso { margin-top: 1.6rem; font-size: .85rem; color: var(--texto-suave); font-style: italic; }

@media (max-width: 960px) {
  .chamada-direitos-grade { grid-template-columns: 1fr; }
  .informativos-grade { grid-template-columns: 1fr; }
  .situacoes, .compromissos { grid-template-columns: 1fr; }
  .outras-areas { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Filtro dos informativos: uma linha que rola para o lado, em vez de cinco botões empilhados. */
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 0 20px .4rem; scrollbar-width: none; }
  .filtros button { flex: none; white-space: nowrap; }
  .areas-grade { grid-template-columns: 1fr; }
  .area { padding: 1.8rem 1.4rem; }
  .marca img { height: 40px; }
  .marca span { font-size: 1rem; }
  .acoes .botao { width: 100%; justify-content: center; }
  .mapa, .mapa iframe { min-height: 300px; }
}