/* Rogana Freire Advocacia
   Layout: marinho institucional com a balança da marca como marca d'água,
   seções de leitura em papel claro, texto alinhado à esquerda, caramelo só como acento. */
:root {
  --marinho: #152b3c;
  --marinho-fundo: #0f2231;
  --marinho-linha: #24405a;
  --caramelo: #e3bd8a;
  --caramelo-tinta: #8a5e2b;
  --papel: #f5f3ef;
  --branco: #ffffff;
  --tinta: #1a2632;
  --cinza: #56616d;
  --linha: #ddd6cb;
  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --corpo: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --largura: 1160px;
  --raio: 4px;
  color-scheme: light;
}

*, *::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(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--caramelo-tinta); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible + label, summary:focus-visible {
  outline: 2px solid var(--caramelo);
  outline-offset: 3px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
.envoltorio { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.texto { max-width: 62ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabeçalho */
.topo { background: var(--marinho-fundo); color: var(--branco); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--marinho-linha); }
.topo .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--branco); text-decoration: none; }
.marca img { width: 42px; }
.marca span { display: grid; line-height: 1; }
.marca b { font-family: var(--display); font-weight: 400; font-size: 1.32rem; letter-spacing: 0.06em; }
.marca small { font-size: 0.62rem; letter-spacing: 0.42em; color: var(--caramelo); margin-top: 6px; }
.menu { display: flex; gap: 28px; align-items: center; font-size: 0.92rem; }
.menu a { color: #cfd7df; text-decoration: none; }
.menu a:hover { color: var(--branco); }

.botao {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--raio);
  font-family: var(--corpo); font-weight: 600; font-size: 0.98rem; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.botao svg { width: 20px; height: 20px; flex: none; }
.botao-ouro { background: var(--caramelo); color: var(--marinho-fundo); }
.botao-ouro:hover { background: #ecc999; }
.botao-linha { border-color: #4b6680; color: var(--branco); }
.botao-linha:hover { border-color: var(--caramelo); }
.botao-pequeno { padding: 10px 16px; font-size: 0.88rem; }

/* Abertura */
.abertura { background: var(--marinho); color: var(--branco); position: relative; overflow: hidden; }
.abertura::before {
  content: ""; position: absolute; right: -22%; top: -4%; width: min(82vw, 980px); aspect-ratio: 1168 / 912;
  background: var(--marinho-fundo);
  -webkit-mask: url("img/icone-grande.png") no-repeat center / contain;
  mask: url("img/icone-grande.png") no-repeat center / contain;
  opacity: .85;
}
.abertura .envoltorio { position: relative; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(56px, 8vw, 104px); }
.abertura .local { color: var(--caramelo); font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 22px; }
.abertura .local a { color: var(--caramelo); text-decoration: none; }
.abertura .local a:hover { text-decoration: underline; }
.abertura h1 { max-width: 18ch; }
.abertura .apoio { color: #c9d3dc; max-width: 56ch; margin-top: 24px; font-size: 1.1rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.credenciais { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--marinho-linha); font-size: 0.9rem; color: #aebccb; }
.credenciais b { color: var(--branco); font-weight: 500; }

/* Seções */
.secao { padding: clamp(64px, 9vw, 112px) 0; }
.secao-branca { background: var(--branco); }
.secao-marinho { background: var(--marinho); color: var(--branco); }
.cabeca { display: grid; gap: 14px; margin-bottom: 48px; }
.cabeca p { color: var(--cinza); max-width: 60ch; }
.secao-marinho .cabeca p { color: #c2cdd8; }

/* Áreas */
.destaques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.area-destaque { background: var(--branco); border-top: 3px solid var(--caramelo); padding: 36px 34px 34px; display: grid; gap: 14px; align-content: start; }
.area-destaque p { color: var(--cinza); }
.temas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.temas li { border-top: 1px solid var(--linha); }
.temas li:last-child { border-bottom: 1px solid var(--linha); }
.temas a, .temas span { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; color: var(--tinta); text-decoration: none; font-weight: 500; }
.temas a { color: var(--marinho); }
.temas a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--caramelo-tinta); border-right: 2px solid var(--caramelo-tinta); transform: rotate(45deg); align-self: center; flex: none; }
.temas a:hover { color: var(--caramelo-tinta); }
.outras { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.outras h3 { font-size: 1.12rem; font-family: var(--corpo); font-weight: 600; }
.outras div { padding: 22px 0; border-top: 1px solid var(--linha); display: grid; gap: 6px; }
.outras p { color: var(--cinza); font-size: 0.96rem; }
.outras-titulo { font-family: var(--display); font-size: 1.5rem; margin-top: 72px; }

/* Etapas */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: etapa; }
.etapas li { counter-increment: etapa; display: grid; gap: 10px; align-content: start; }
.etapas li::before {
  content: counter(etapa); font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--caramelo);
  padding-bottom: 14px; border-bottom: 1px solid var(--marinho-linha); margin-bottom: 6px;
}
.etapas h3 { font-family: var(--corpo); font-weight: 600; font-size: 1.05rem; }
.etapas p { color: #c2cdd8; font-size: 0.97rem; }
.secao:not(.secao-marinho) .etapas li::before { border-bottom-color: var(--linha); color: var(--caramelo-tinta); }
.secao:not(.secao-marinho) .etapas p { color: var(--cinza); }

/* Equipe */
.equipe { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.equipe .texto p + p { margin-top: 16px; }
.retratos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.retrato { margin: 0; }
.retrato .moldura { position: relative; }
.retrato .moldura::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--caramelo); z-index: 0; }
.retrato img { position: relative; z-index: 1; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; width: 100%; }
.retrato figcaption { margin-top: 28px; display: grid; gap: 2px; }
.retrato figcaption b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.retrato figcaption span { color: var(--cinza); font-size: 0.92rem; }

/* Perguntas */
.perguntas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.pergunta { border-top: 1px solid var(--linha); padding: 26px 0 30px; display: grid; gap: 10px; }
.pergunta h3 { font-family: var(--corpo); font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.pergunta p { color: var(--cinza); }

/* Contato */
.contato { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.dados { display: grid; gap: 0; margin: 0; }
.dados div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--marinho-linha); }
.dados dt { color: var(--caramelo); font-size: 0.9rem; padding-top: 2px; }
.dados dd { margin: 0; }
.dados a { color: var(--branco); }

/* Rodapé */
.rodape { background: var(--marinho-fundo); color: #9fb0c0; font-size: 0.88rem; padding: 48px 0 40px; }
.rodape .envoltorio { display: grid; grid-template-columns: auto 1fr; gap: 24px 56px; align-items: start; }
.rodape img { width: 150px; }
.rodape .linhas { display: grid; gap: 6px; }
.rodape b { color: var(--branco); font-weight: 500; }
.rodape a { color: #c9d3dc; }

/* Barra fixa no celular */
.barra-whats { display: none; }

/* Página de tema (landing page) */
.abertura-tema .envoltorio { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: end; }
.abertura-tema h1 { max-width: 20ch; font-size: clamp(2rem, 4.2vw, 3.25rem); }
.requisitos { background: rgba(15, 34, 49, .78); border: 1px solid var(--marinho-linha); padding: 30px 30px 26px; display: grid; gap: 0; }
.requisitos div { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--marinho-linha); }
.requisitos div:first-child { padding-top: 0; }
.requisitos strong { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--caramelo); font-variant-numeric: tabular-nums; min-width: 2ch; }
.requisitos span { color: #d6dee6; }
.requisitos small { color: #93a5b7; font-size: 0.8rem; line-height: 1.5; margin-top: 16px; display: block; }

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.lista-marcada { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.lista-marcada li { padding-left: 26px; position: relative; }
.lista-marcada li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--caramelo-tinta); }
.nota { background: var(--branco); border-left: 3px solid var(--caramelo); padding: 26px 28px; display: grid; gap: 10px; }
.nota h3 { font-size: 1.3rem; }
.nota p { color: var(--cinza); }

.checklist { background: var(--branco); border: 1px solid var(--linha); padding: 8px 28px 28px; }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { border-bottom: 1px solid var(--linha); }
.checklist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checklist label { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; cursor: pointer; line-height: 1.45; }
.checklist label::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #9aa5b0; border-radius: 3px; background: var(--branco);
  transition: background-color .12s ease, border-color .12s ease;
}
.checklist input:checked + label::before {
  background: var(--marinho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23e3bd8a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  border-color: var(--marinho);
}
.checklist input:focus-visible + label::before { outline: 2px solid var(--caramelo); outline-offset: 2px; }
.checklist .rodape-lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }
.checklist .contagem { color: var(--cinza); font-size: 0.93rem; font-variant-numeric: tabular-nums; }
.botao-marinho { background: var(--marinho); color: var(--branco); }
.botao-marinho:hover { background: var(--marinho-fundo); }

.chamada { background: var(--marinho); color: var(--branco); padding: clamp(56px, 8vw, 96px) 0; }
.chamada .envoltorio { display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center; }
.chamada p { color: #c2cdd8; margin-top: 14px; max-width: 56ch; }
.aviso { font-size: 0.82rem; color: #8597a8; margin-top: 10px; }

@media (max-width: 960px) {
  .menu { display: none; }
  .destaques, .equipe, .contato, .colunas, .abertura-tema .envoltorio, .chamada .envoltorio { grid-template-columns: 1fr; }
  .outras { grid-template-columns: 1fr 1fr; }
  .etapas { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .perguntas { grid-template-columns: 1fr; }
  .abertura::before { right: -40%; top: 4%; width: 130vw; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; padding-bottom: 72px; }
  .topo .envoltorio { min-height: 64px; }
  .topo .botao { display: none; }
  .marca b { font-size: 1.12rem; }
  .marca img { width: 36px; }
  .outras, .etapas, .retratos { grid-template-columns: 1fr; }
  .retratos { gap: 40px; max-width: 360px; }
  .area-destaque { padding: 28px 22px; }
  .acoes .botao { width: 100%; justify-content: center; }
  .dados div { grid-template-columns: 1fr; gap: 2px; }
  .rodape .envoltorio { grid-template-columns: 1fr; }
  .checklist { padding: 4px 18px 22px; }
  .checklist .rodape-lista .botao { width: 100%; justify-content: center; }
  .barra-whats {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--marinho-fundo); border-top: 1px solid var(--marinho-linha);
  }
  .barra-whats .botao { width: 100%; justify-content: center; }
}

/* Lista de temas nas páginas de área */
.temas-grandes { margin-top: 0; }
.temas-grandes a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 14px; gap: 8px 32px; align-items: center; padding: 26px 0; }
.temas-grandes .tema-nome, .temas-grandes .tema-desc { display: block; padding: 0; }
.temas-grandes .tema-nome { font-family: var(--display); font-weight: 400; font-size: 1.45rem; color: var(--marinho); }
.temas-grandes .tema-desc { color: var(--cinza); font-weight: 400; font-size: 0.98rem; }
.temas-grandes a:hover .tema-nome { color: var(--caramelo-tinta); }
.nota ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.nota li { color: var(--cinza); }
.nota li b { color: var(--tinta); font-weight: 600; }
@media (max-width: 620px) {
  .temas-grandes a { grid-template-columns: 1fr 14px; }
  .temas-grandes .tema-desc { grid-column: 1; }
  .temas-grandes a::after { grid-column: 2; grid-row: 1 / span 2; }
}
.titulo-area { color: inherit; text-decoration: none; }
.titulo-area:hover { color: var(--caramelo-tinta); text-decoration: underline; text-decoration-thickness: 1px; }

/* Links legais no rodapé */
.links-legais { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 6px; }
.links-legais a { color: #c9d3dc; }

/* Aviso de cookies */
.aviso-cookies {
  position: fixed; left: 20px; bottom: 20px; z-index: 40; max-width: 440px;
  background: var(--marinho-fundo); color: #d6dee6; border: 1px solid var(--marinho-linha);
  padding: 20px 22px; font-size: 0.9rem; line-height: 1.55; box-shadow: 0 12px 32px rgba(8, 20, 30, .35);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies a { color: var(--caramelo); }
.aviso-acoes { display: flex; gap: 10px; margin-top: 14px; }
@media (max-width: 620px) {
  .aviso-cookies { left: 10px; right: 10px; bottom: 80px; max-width: none; }
}

/* Texto longo (política de privacidade) */
.documento { max-width: 72ch; }
.documento h2 { font-size: 1.6rem; margin-top: 48px; }
.documento h2:first-child { margin-top: 0; }
.documento p, .documento ul { margin: 14px 0 0; }
.documento ul { padding-left: 1.2em; display: grid; gap: 8px; }
.documento .atualizado { color: var(--cinza); font-size: 0.92rem; }