/* Carvalho Netto Advocacia — folha de estilo institucional
   Cores e tipografia conforme Manual de Identidade Visual */

@font-face { font-family: "Cinzel"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
  --marrom: #2E2419;      /* RGB 46,36,25  */
  --ouro: #B8966B;        /* RGB 184,150,107 */
  --offwhite: #F7F5EF;    /* RGB 247,245,239 */
  --taupe: #A8988A;       /* RGB 168,152,138 */
  --verde: #1F2E26;       /* RGB 31,46,38 */
  --texto-sec: #5E5246;   /* marrom suavizado p/ textos secundários com contraste AA */
  --linha: rgba(184,150,107,.45);
  --serif: "Cinzel", "Times New Roman", serif;
  --sans: "Source Sans 3", Arial, sans-serif;
  --larg: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--offwhite); color: var(--marrom);
  font-family: var(--sans); font-size: 18px; line-height: 1.65; font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marrom); text-decoration-color: var(--ouro); text-underline-offset: 3px; }
a:hover { color: #000; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

.container { max-width: var(--larg); margin: 0 auto; padding: 0 24px; }
.estreito { max-width: 760px; }

.pular { position: absolute; left: -9999px; top: 0; background: var(--marrom); color: var(--offwhite); padding: 10px 16px; z-index: 100; }
.pular:focus { left: 16px; top: 16px; }

/* Títulos */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--marrom); line-height: 1.25; margin: 0 0 .6em; letter-spacing: .02em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.12rem; letter-spacing: 0; margin-bottom: .35em; }
p { margin: 0 0 1em; }

.rotulo { font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #8A6A43; margin: 0 0 .9em; }
.filete { width: 64px; height: 1px; background: var(--ouro); border: 0; margin: 0 0 1.6em; }
.centro { text-align: center; }
.centro .filete { margin-left: auto; margin-right: auto; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 40; background: rgba(247,245,239,.97); border-bottom: 1px solid var(--linha); }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.topo .marca img { height: 48px; width: auto; }
@media (max-width: 560px) { .topo .marca img { height: 36px; } .topo .btn { padding: 10px 14px; font-size: .92rem; } .topo .btn .txt-longo { display: none; } }

/* Botões */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: .02em;
  padding: 14px 26px; border: 1px solid var(--marrom); border-radius: 2px;
  background: var(--marrom); color: var(--offwhite); transition: background .2s, color .2s;
}
.btn:hover { background: var(--verde); border-color: var(--verde); color: var(--offwhite); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-claro { background: transparent; color: var(--marrom); }
.btn-claro:hover { background: var(--marrom); color: var(--offwhite); }
.btn-ouro { background: var(--ouro); border-color: var(--ouro); color: var(--marrom); }
.btn-ouro:hover { background: var(--offwhite); border-color: var(--offwhite); color: var(--marrom); }

/* Seções */
section { padding: 88px 0; }
@media (max-width: 700px) { section { padding: 60px 0; } }
.fundo-branco { background: #FFFFFF; }
.fundo-verde { background: var(--verde); color: var(--offwhite); }
.fundo-verde h2, .fundo-verde h3 { color: var(--offwhite); }
.fundo-verde .rotulo { color: var(--ouro); }
.fundo-verde a { color: var(--offwhite); }

/* Abertura */
.abertura { padding: 72px 0 88px; text-align: center; border-bottom: 1px solid var(--linha); }
.abertura .logo-principal { width: 260px; margin: 0 auto 40px; }
.abertura .sub { font-size: 1.2rem; color: var(--texto-sec); max-width: 640px; margin: 0 auto 2em; }
.abertura .nota { font-size: .95rem; color: var(--texto-sec); margin-top: 1.4em; }
@media (max-width: 560px) { .abertura .logo-principal { width: 190px; } }

/* Grades */
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px) { .duas-col { grid-template-columns: 1fr; gap: 28px; } }
.cartao { border-top: 1px solid var(--ouro); padding-top: 22px; }
.cartao ul { margin: .4em 0 0; padding-left: 1.1em; }
.cartao li { margin-bottom: .35em; }

.lista-docs { columns: 2; column-gap: 48px; padding-left: 1.1em; margin: 0; }
.lista-docs li { break-inside: avoid; margin-bottom: .55em; }
@media (max-width: 700px) { .lista-docs { columns: 1; } }

/* Etapas */
.etapas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: etapa; }
.etapas li { counter-increment: etapa; border-top: 1px solid var(--ouro); padding-top: 22px; }
.etapas li::before { content: counter(etapa, upper-roman); display: block; font-family: var(--serif); color: var(--ouro); font-size: 1.6rem; margin-bottom: 8px; }
@media (max-width: 800px) { .etapas { grid-template-columns: 1fr; gap: 28px; } }

/* Sobre */
.sobre { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.sobre .foto { width: 100%; max-width: 300px; margin: 0 auto; border: 1px solid var(--ouro); padding: 8px; background: var(--offwhite); }
@media (max-width: 800px) { .sobre { grid-template-columns: 1fr; gap: 24px; text-align: center; } .sobre .foto { max-width: 240px; } .sobre .filete { margin-left: auto; margin-right: auto; } }
.oab { font-size: .98rem; color: var(--texto-sec); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-of-type { border-top: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-family: var(--serif); font-size: 1.5rem; color: #8A6A43; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; color: var(--marrom); }

/* Rodapé */
.rodape { background: var(--marrom); color: #E9E3D6; font-size: .95rem; padding: 56px 0 28px; }
.rodape a { color: #E9E3D6; }
.rodape .logo-rodape { width: 260px; margin-bottom: 24px; }
.rodape .grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
@media (max-width: 800px) { .rodape .grade { grid-template-columns: 1fr; gap: 24px; } }
.rodape .links { list-style: none; padding: 0; margin: 0; }
.rodape .links li { margin-bottom: 6px; }
.rodape .links button { background: none; border: 0; padding: 0; color: #E9E3D6; font: inherit; text-decoration: underline; text-decoration-color: var(--ouro); text-underline-offset: 3px; cursor: pointer; }
.rodape .legal { border-top: 1px solid rgba(184,150,107,.35); margin-top: 36px; padding-top: 20px; font-size: .85rem; color: #CFC5B6; }

/* Botão flutuante */
.flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 56px; height: 56px; border-radius: 50%;
  background: var(--marrom); border: 1px solid var(--ouro); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(46,36,25,.18);
}
.flutuante svg { width: 26px; height: 26px; }
.flutuante:hover { background: var(--verde); }

/* Banner de cookies */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  background: #FFFFFF; color: var(--marrom); border: 1px solid var(--ouro); padding: 22px 24px;
  box-shadow: 0 6px 30px rgba(46,36,25,.18); font-size: .95rem; line-height: 1.55;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner h2 { font-size: 1.15rem; margin-bottom: .4em; }
.cookie-banner .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cookie-banner .btn { padding: 10px 18px; font-size: .95rem; flex: 1 1 140px; justify-content: center; }
.cookie-banner .opcoes { margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 12px; }
.cookie-banner .opcoes[hidden] { display: none; }
.cookie-banner label { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.cookie-banner input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--marrom); flex: none; }

/* Páginas de texto (políticas) */
.pagina-texto { padding: 64px 0 88px; }
.pagina-texto h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.pagina-texto h2 { font-size: 1.35rem; margin-top: 1.8em; }
.pagina-texto .atualizacao { color: var(--texto-sec); font-size: .95rem; }
.pagina-texto table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0 1.6em; display: block; overflow-x: auto; }
.pagina-texto th, .pagina-texto td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.pagina-texto th { font-weight: 600; background: #EFEAE0; }
.pendente { background: #F3E6C9; color: #2E2419; padding: 0 4px; }
.voltar { display: inline-block; margin-bottom: 28px; font-size: .95rem; }
h2 + .duas-col, h2 + .etapas, .faq h2 + details { margin-top: 1.6em; }