/* ==========================================================================
   BUSCA DO DIREITO — sistema visual
   Paleta e tipografia vêm do brandbook oficial (não inventar cor nova).
   navy #043d5d (Pantone 302C) · dourado #b4a065 (4515C) · off-white #efecea (0961C)
   Proibidas pelo cliente: vermelho, laranja, rosa.
   ========================================================================== */

:root {
  /* --- cor --- */
  --navy:        #043d5d;
  --navy-deep:   #032b41;
  --navy-mid:    #0a5378;
  --gold:        #b4a065;
  --gold-lit:    #cbb87f;
  --gold-deep:   #8f7d47;
  --paper:       #efecea;
  --paper-lift:  #f8f7f5;
  --ink:         #12252f;
  --ink-soft:    #52636d;
  --line:        #dcd6ce;
  --line-soft:   #e7e2dc;

  /* --- tipografia ---
     Trajan Pro (brandbook) -> Cinzel na web. Só caixa alta, só títulos curtos.
     Myriad Pro (brandbook) -> Source Sans 3, humanista, mesma família de forma. */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body:    "Source Sans 3", "Myriad Pro", -apple-system, "Segoe UI", sans-serif;

  /* Escala LARGE PRINT — decisão de projeto, não descuido.
     O público é de 25 a 70 anos, metade trabalhador rural, com pouca
     intimidade com tela. 20px de corpo em vez dos 16px padrão. */
  --fs-body:  1.25rem;
  --fs-small: 1.0625rem;
  --fs-micro: 0.9375rem;
  --lh-body:  1.72;

  /* --- espaço --- */
  --gutter:   clamp(1.25rem, 5vw, 3rem);
  --wrap:     78rem;
  --rail:     4.5rem;
  --sec-y:    clamp(4.5rem, 9vw, 8rem);

  --radius:   3px;      /* quase reto: papel timbrado, não app */
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(4, 61, 93, .06), 0 4px 14px rgba(4, 61, 93, .05);
  --shadow-md: 0 2px 6px rgba(4, 61, 93, .07), 0 18px 40px -12px rgba(4, 61, 93, .16);
}

/* ==========================================================================
   base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: .5rem; top: .5rem; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   tipografia
   ========================================================================== */

.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .012em;
  text-wrap: balance;
}

.t-hero  { font-size: clamp(2.45rem, 6.2vw, 4.6rem); }
.t-sec   { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
.t-sub   { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

/* h3 e menores NUNCA em Cinzel: caixa alta em corpo pequeno não se lê. */
.t-card {
  font-family: var(--body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.006em;
  color: var(--navy);
}

.lede {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.prose p + p { margin-top: 1.15em; }
.prose strong { font-weight: 700; color: var(--navy); }

/* ==========================================================================
   layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--paper { background: var(--paper); }
.section--lift  { background: var(--paper-lift); }
.section--navy  { background: var(--navy); color: var(--paper); }
.section--navy .t-sec,
.section--navy .t-card { color: var(--paper); }
.section--navy .lede { color: rgba(239, 236, 234, .78); }
.section--navy .eyebrow { color: var(--gold-lit); }

/* --------------------------------------------------------------------------
   ASSINATURA — o fio do labirinto
   O símbolo da marca é um labirinto circular com o centro dourado. A página
   inteira é a caminhada até esse centro: cada seção acende um anel a mais,
   e a última é o círculo cheio. O marcador carrega a sequência real do
   conteúdo (chegar -> entender -> escolher -> falar), não é enfeite.
   -------------------------------------------------------------------------- */

.lane {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.lane__rail {
  position: relative;
  align-self: stretch;
  min-height: 100%;
}

/* linha vertical que costura as seções */
.lane__rail::before {
  content: "";
  position: absolute;
  left: 1.09rem;
  top: 2.6rem;
  bottom: -0.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--line) 0%,
    var(--line) 82%,
    transparent 100%
  );
}
.section--navy .lane__rail::before {
  background: linear-gradient(
    to bottom,
    rgba(180, 160, 101, .34) 0%,
    rgba(180, 160, 101, .34) 82%,
    transparent 100%
  );
}
.lane--last .lane__rail::before { display: none; }

.mark {
  position: relative;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  background: var(--paper);
  border-radius: 50%;
}
.section--lift .mark { background: var(--paper-lift); }
.section--navy .mark { background: var(--navy); }

.mark circle { fill: none; stroke-width: 1.4; }
.mark .ring  { stroke: var(--line); }
.mark .core  { fill: var(--line); stroke: none; }
.section--navy .mark .ring { stroke: rgba(180, 160, 101, .32); }
.section--navy .mark .core { fill: rgba(180, 160, 101, .32); }

/* anéis acesos por seção */
.mark[data-ring="1"] .r1,
.mark[data-ring="2"] .r1, .mark[data-ring="2"] .r2,
.mark[data-ring="3"] .r1, .mark[data-ring="3"] .r2, .mark[data-ring="3"] .r3,
.mark[data-ring="4"] .r1, .mark[data-ring="4"] .r2, .mark[data-ring="4"] .r3, .mark[data-ring="4"] .r4 {
  stroke: var(--gold);
}
.mark[data-ring="4"] .core { fill: var(--gold); }

@media (max-width: 62rem) {
  .lane { grid-template-columns: 1fr; }
  .lane__rail { display: none; }
}

/* ==========================================================================
   cabeçalho
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(239, 236, 234, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-head__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 5rem;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 2.9rem; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-left: auto;
}
.nav a {
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.nav a:hover { border-bottom-color: var(--gold); }

@media (max-width: 60rem) {
  .nav { display: none; }
}

/* ==========================================================================
   botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg { flex-shrink: 0; }

/* O CTA é WhatsApp, mas o botão é DOURADO, não verde:
   o brandbook manda destacar nas cores da marca e verde brigaria com o navy. */
.btn--primary {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--gold-lit);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: var(--paper); }

.section--navy .btn--ghost { color: var(--paper); border-color: rgba(239,236,234,.5); }
.section--navy .btn--ghost:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }

.btn--sm { padding: .7rem 1.15rem; font-size: 1rem; }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.1875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
}

/* ==========================================================================
   hero
   ========================================================================== */

.hero {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(4, 61, 93, .05) 0%, transparent 58%),
    var(--paper);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__eyebrow { margin-bottom: 1.35rem; }
.hero h1 { color: var(--navy); }
.hero__lede { margin-top: 1.6rem; max-width: 34ch; }
.hero .btn-row { margin-top: 2.35rem; }

.hero__note {
  margin-top: 1.5rem;
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .95rem;
}
.hero__note span { display: inline-flex; align-items: center; gap: .4rem; }
.hero__note svg { color: var(--gold-deep); }

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .hero__lede { max-width: 46ch; }
}

/* ==========================================================================
   slots de imagem (placeholder até o Codex gerar as fotos reais)
   ========================================================================== */

.shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  isolation: isolate;
}
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/simbolo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78%;
  opacity: .07;
  filter: brightness(0) invert(1);
  z-index: -1;
}
.shot__tag {
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: rgba(239, 236, 234, .74);
  max-width: 30ch;
}
.shot__tag b {
  display: block;
  font-family: var(--display);
  font-size: .8125rem;
  letter-spacing: .16em;
  color: var(--gold-lit);
  margin-bottom: .65rem;
}
.shot--wide { aspect-ratio: 16 / 10; }
.shot--card { aspect-ratio: 3 / 2; border-radius: 0; box-shadow: none; }

/* ==========================================================================
   seções de conteúdo
   ========================================================================== */

.sec-head { max-width: 46rem; }
.sec-head .eyebrow { display: block; margin-bottom: 1rem; }
.sec-head .t-sec { color: var(--navy); }
.sec-head .lede { margin-top: 1.25rem; }
.section--navy .sec-head .t-sec { color: var(--paper); }

.body-block { margin-top: 2.5rem; max-width: 44rem; }

/* --- manifesto ------------------------------------------------------------ */

.manifesto__quote {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
  border-left: 3px solid var(--gold);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  margin-block: 2.5rem;
  max-width: 30ch;
}
.section--navy .manifesto__quote { color: var(--paper); }

/* --- teses ---------------------------------------------------------------- */

.teses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 3rem;
}

.tese {
  display: flex;
  flex-direction: column;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.tese:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.section--lift .tese { background: var(--paper); }

.tese__body { padding: clamp(1.6rem, 2.6vw, 2.15rem); display: flex; flex-direction: column; flex: 1; }
.tese__alias {
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  margin-top: .6rem;
}
.tese__hr { height: 1px; background: var(--line); margin-block: 1.6rem; border: 0; }

.crit { margin-top: .25rem; }
.crit + .crit { margin-top: 1.5rem; }
.crit__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .8rem;
}
.crit__list li {
  display: flex;
  gap: .7rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}
.crit__list li + li { margin-top: .7rem; }
.crit__list svg { flex-shrink: 0; margin-top: .32em; }
.crit--yes svg { color: var(--gold-deep); }
.crit--no  { color: var(--ink-soft); }
.crit--no svg { color: var(--ink-soft); opacity: .65; }
.crit--no .crit__label { color: var(--ink-soft); }
.crit--no .crit__list li { color: var(--ink-soft); }

.tese__foot { margin-top: auto; padding-top: 1.9rem; }

/* --- passos (como funciona) ----------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 3rem;
  counter-reset: step;
}
.step { position: relative; padding-top: 2.25rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
}
.step::after {
  content: "";
  position: absolute;
  top: 1.85rem; left: 0;
  width: 1.75rem; height: 2px;
  background: var(--gold);
  opacity: .45;
}
.step h3 { margin-bottom: .7rem; }
.step p { font-size: var(--fs-small); color: rgba(239, 236, 234, .8); }
.section--navy .step h3 { color: var(--paper); }

/* --- placeholder de conteúdo pendente ------------------------------------- */

.todo {
  border: 1px dashed var(--gold);
  border-radius: var(--radius-lg);
  background: rgba(180, 160, 101, .07);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 2.5rem;
}
.todo__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}
.todo p { font-size: var(--fs-small); color: var(--ink-soft); }
.todo ul { margin-top: 1rem; }
.todo li {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  padding-left: 1.15rem;
  position: relative;
}
.todo li + li { margin-top: .5rem; }
.todo li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .4rem; height: .4rem;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
}

/* --- cards de advogado (estrutura pronta, dado pendente) ------------------- */

.banca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: 2.5rem;
}
.adv {
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}
.adv__av {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--navy);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
}
.adv__av img { width: 60%; filter: brightness(0) invert(1); opacity: .5; }
.adv__name { font-weight: 700; font-size: 1.1875rem; color: var(--navy); }
.adv__oab { font-size: var(--fs-micro); color: var(--gold-deep); font-weight: 600; margin-top: .3rem; }
.adv__area { font-size: var(--fs-small); color: var(--ink-soft); margin-top: .7rem; }

/* --- blog ----------------------------------------------------------------- */

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 3rem;
}
.post {
  display: flex;
  flex-direction: column;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.post__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post__cat {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.post__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  margin-top: .7rem;
}
.post__meta { margin-top: auto; padding-top: 1.25rem; font-size: var(--fs-micro); color: var(--ink-soft); }

/* --- faq ------------------------------------------------------------------ */

.faq { margin-top: 3rem; max-width: 52rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.05rem; height: 1.05rem;
  margin-top: .3em;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--navy-mid); }
.faq__a { padding-bottom: 1.6rem; font-size: var(--fs-small); color: var(--ink-soft); max-width: 60ch; }

/* --- cta final ------------------------------------------------------------ */

.cta-final { text-align: center; }
.cta-final .t-sec { color: var(--paper); }
.cta-final .lede { margin-inline: auto; max-width: 42rem; }
.cta-final .btn-row { justify-content: center; margin-top: 2.5rem; }
.cta-final__note { margin-top: 1.75rem; font-size: var(--fs-micro); color: rgba(239, 236, 234, .6); }

/* ==========================================================================
   rodapé
   ========================================================================== */

.site-foot {
  background: var(--navy-deep);
  color: rgba(239, 236, 234, .74);
  font-size: var(--fs-small);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem;
}
.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.site-foot img.foot-logo { height: 3.4rem; width: auto; margin-bottom: 1.35rem; }
.site-foot h4 {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: 1.1rem;
}
.site-foot a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-foot a:hover { color: var(--paper); border-bottom-color: var(--gold); }
.site-foot li + li { margin-top: .7rem; }

.foot-legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.85rem;
  border-top: 1px solid rgba(239, 236, 234, .14);
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: rgba(239, 236, 234, .5);
}
.foot-legal p + p { margin-top: .85rem; }

/* ==========================================================================
   entrada suave (respeitando reduced-motion via bloco no topo)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   imagem dentro do slot
   O .shot funciona como placeholder (navy + marca d'água do labirinto).
   Quando o PNG gerado existe, ele cobre o slot; se ainda não foi gerado,
   o placeholder aparece no lugar e a página continua legível.
   ========================================================================== */

.shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.shot__img--contain {
  object-fit: contain;
  padding: 8%;
}
.shot__tag { position: relative; z-index: 0; }

/* ==========================================================================
   arte do hero — duas fotos, uma por público.
   O deslocamento não é enfeite: são as DUAS frentes do escritório,
   ditas em imagem antes de o texto dizer.
   ========================================================================== */

.hero__art { position: relative; padding-bottom: 3.5rem; padding-right: 2.5rem; }

.shot--hero { aspect-ratio: 4 / 5; }

.shot--hero-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--paper);
  box-shadow: var(--shadow-md);
}
.shot--hero-2 .shot__tag { font-size: .8125rem; }
.shot--hero-2 .shot__tag b { font-size: .6875rem; }

@media (max-width: 60rem) {
  .hero__art { padding-bottom: 2.5rem; padding-right: 1.5rem; max-width: 32rem; }
}
@media (max-width: 30rem) {
  .shot--hero-2 { width: 52%; border-width: 4px; }
  .shot--hero-2 .shot__tag { display: none; }
}

/* ==========================================================================
   manifesto — texto + o objeto-assinatura
   ========================================================================== */

.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.manifesto__grid .body-block { margin-top: 0; }

.shot--object {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(70% 70% at 50% 42%, var(--navy-mid) 0%, var(--navy) 55%, var(--navy-deep) 100%);
}
.shot--object::before { background-size: 62%; opacity: .06; }

@media (max-width: 62rem) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .shot--object { max-width: 26rem; margin-inline: auto; }
}

/* ==========================================================================
   ícone 3D dos passos
   ========================================================================== */

.step__ic {
  width: 5.25rem;
  height: 5.25rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.15rem;
  /* enquanto o PNG não existe, não deixa buraco no layout */
  min-height: 1px;
}
.step { padding-top: 2.5rem; }
.step::after { top: 1.95rem; }

/* ==========================================================================
   marca central do CTA final
   ========================================================================== */

.mark--center {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.75rem;
  background: transparent;
}
.mark--center .ring { stroke: rgba(180, 160, 101, .38); }
.mark--center .r1,
.mark--center .r2,
.mark--center .r3,
.mark--center .r4 { stroke: var(--gold); }
.mark--center .core { fill: var(--gold); }

/* ==========================================================================
   documento legal (política de privacidade)
   Coluna estreita, medida de leitura curta — é texto pra ser lido, não escaneado.
   ========================================================================== */

.doc { max-width: 44rem; }
.doc .eyebrow { display: block; margin-bottom: 1rem; }
.doc h1 { color: var(--navy); }
.doc .lede { margin-top: 1.25rem; }

.doc__meta {
  margin-top: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}

.doc h2 {
  font-family: var(--body);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 2.75rem;
  margin-bottom: .9rem;
}
.doc h3 {
  font-family: var(--body);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1.75rem;
  margin-bottom: .6rem;
}
.doc p + p { margin-top: 1rem; }
.doc a { color: var(--navy); text-decoration: underline; text-underline-offset: .18em; }
.doc a:hover { color: var(--gold-deep); }
.doc em { color: var(--gold-deep); font-style: italic; }

.doc__list { margin-top: 1rem; }
.doc__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
}
.doc__list li + li { margin-top: .65rem; }
.doc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .45rem; height: .45rem;
  background: var(--gold);
  border-radius: 50%;
}

.doc__back { margin-top: 3rem; }
.doc__back a { text-decoration: none; }

/* ==========================================================================
   CORREÇÕES DE ACABAMENTO (varredura de 20/08)
   ========================================================================== */

/* --- 1. Bloco de pendência sobre navy estava ILEGÍVEL -----------------------
   .todo usa --ink-soft (#52636d), que sobre o navy #043d5d some. Precisa de
   cor própria no contexto escuro. Vale pra qualquer bloco que apareça nos dois. */

.section--navy .todo {
  border-color: rgba(180, 160, 101, .55);
  background: rgba(239, 236, 234, .05);
}
.section--navy .todo__tag { color: var(--gold-lit); }
.section--navy .todo p,
.section--navy .todo li { color: rgba(239, 236, 234, .76); }
.section--navy .todo li::before { border-color: var(--gold-lit); }

/* --- 2. Logotipo do cabeçalho ----------------------------------------------
   O lockup do brandbook é EMPILHADO (símbolo em cima, marca embaixo). Numa
   barra de 5rem a marca fica com menos de 1rem de altura e não se lê. No
   cabeçalho o lockup vira HORIZONTAL: símbolo + marca em Cinzel, que é o
   equivalente web do Trajan Pro do próprio brandbook. O lockup empilhado
   original continua no rodapé, onde tem espaço vertical. */

.brand { gap: .7rem; text-decoration: none; }
.brand__mark { height: 2.6rem; width: auto; }
.brand__name {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}
@media (max-width: 24rem) {
  .brand__name { font-size: 1.1rem; }
}

/* --- 3. H1 estava quebrando em 4 linhas ------------------------------------ */
.t-hero { font-size: clamp(2.3rem, 5.4vw, 4.05rem); }

/* --- 4. Ícone do passo estava pequeno demais pro peso do título ------------ */
.step__ic { width: 6rem; height: 6rem; margin-bottom: 1.35rem; }

/* --- 5. A linha de selos do hero quebrava mal em 2 linhas ------------------ */
.hero__note { gap: .55rem 1.4rem; }

/* --- 6. Vazamento horizontal no celular ------------------------------------
   Duas causas medidas em viewport de 375px (a página saía com 409px):
   (a) o e-mail do rodapé é uma palavra de 28 caracteres que não quebra e
       estoura a coluna do grid;
   (b) o link "pular pro conteúdo" usava left:-9999px, técnica antiga que
       ainda participa do fluxo. Trocado pelo recorte, que não ocupa espaço. */

.site-foot a,
.site-foot p { overflow-wrap: anywhere; }

.skip {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--navy);
  color: var(--paper);
  padding: .75rem 1.25rem;
  z-index: 200;
}
.skip:focus {
  width: auto; height: auto;
  overflow: visible;
  clip-path: none;
  left: .5rem; top: .5rem;
}

/* ==========================================================================
   CORREÇÕES DA REVISÃO DO MATEUS (20/08)
   ========================================================================== */

/* --- 7. Labirinto aparecia DUPLICADO -----------------------------------------
   O .shot nasceu como placeholder: fundo navy + marca d'água do símbolo.
   Agora que a imagem real existe, a marca d'água fica ATRÁS do objeto 3D e
   lê como erro (dois labirintos no mesmo quadro). Some quando há imagem. */

.shot:has(.shot__img)::before { display: none; }

.shot--object {
  display: grid;
  place-items: center;
}
.shot__img--contain { padding: 6%; }

/* --- 8. Bloco de pendência agora ABRE E FECHA --------------------------------
   Aberto por padrão ele dominava a seção e era metade do "muito texto na tela".
   Fechado, continua visível como aviso e não compete com o conteúdo. */

details.todo { padding: 0; }

.todo > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 1rem 1.35rem;
  user-select: none;
}
.todo > summary::-webkit-details-marker { display: none; }
.todo > summary::after {
  content: "";
  margin-left: auto;
  width: .55rem; height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.todo[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.todo > summary:hover { background: rgba(180, 160, 101, .08); }

.todo > ul { margin: 0; padding: 0 1.35rem 1.35rem; }

/* --- 9. A citação da marca agora fecha o bloco, não abre --------------------- */
.manifesto__quote { margin-block: 2.25rem 0; }

/* --- 10. Título colava no texto no manifesto -------------------------------
   .manifesto__grid zerava a margem do .body-block (herança de quando a
   citação vinha entre os dois). Com a citação no fim, o espaço voltou. */
.manifesto__grid .body-block { margin-top: 1.9rem; }

/* --- 11. O CTA do hero caía abaixo da dobra em notebook ---------------------
   Medido: em 1440x760 (notebook comum) o botão ficava em y=764, fora da tela.
   O título grande é bonito e não vale um CTA que ninguém vê sem rolar. */
.t-hero { font-size: clamp(2.2rem, 4.6vw, 3.45rem); }
.hero { padding-block: clamp(2.5rem, 4.5vw, 4.25rem) clamp(3.5rem, 7vw, 6rem); }
.hero__eyebrow { margin-bottom: 1rem; }
.hero__lede { margin-top: 1.3rem; }
.hero .btn-row { margin-top: 1.9rem; }
.hero__note { margin-top: 1.25rem; }

/* ==========================================================================
   REVISÃO 2 DO MATEUS (20/08) — tipografia, logotipo e o labirinto
   ========================================================================== */

/* --- 12. FORA O CINZEL ------------------------------------------------------
   O brandbook pede Trajan Pro nos títulos, e o Cinzel é o equivalente web.
   Só que Trajan é um alfabeto ROMANO: só tem maiúscula. Título inteiro em
   caixa alta cansa e briga com o objetivo da página, que é ser fácil de ler
   pra quem tem 60 anos. Decisão do Mateus: cair fora e usar sans sóbrio.

   Poppins nos títulos (geométrica, limpa, caixa normal) + Source Sans 3 no
   corpo (humanista, feita pra leitura longa). O par é proposital: geométrica
   pra título, humanista pra texto. O logotipo continua com a tipografia
   original da marca, porque ali é imagem, não fonte. */

:root {
  --display: "Poppins", "Segoe UI", system-ui, sans-serif;
}

.display {
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.021em;
}

/* Caixa normal ocupa menos que caixa alta: dá pra crescer sem estourar a dobra. */
.t-hero { font-size: clamp(2.3rem, 5vw, 3.7rem); }
.t-sec  { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.t-sub  { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* --- 13. Logotipo do cabeçalho vira IMAGEM ----------------------------------
   O lockup do brandbook é empilhado e não cabe numa barra. Antes eu montava
   um horizontal com o símbolo + o nome em Cinzel; sem Cinzel isso não fecha
   mais, e escrever a marca em Poppins descaracterizaria o logotipo.
   Agora o `_gen/logo.py` gera um lockup horizontal de verdade a partir do
   PNG oficial — tipografia original da marca, símbolo inteiro. */

.brand__logo { height: 2.5rem; width: auto; }
@media (max-width: 30rem) { .brand__logo { height: 2.1rem; } }

/* --- 14. Marca d'água atrás do labirinto: fora de vez -----------------------
   O `:has()` já escondia, mas o Mateus continuou vendo o desenho no fundo.
   Regra direta no elemento, sem depender de seletor novo do navegador. */

.shot--object::before,
.shot--hero::before,
.shot--hero-2::before,
.shot--card::before { content: none; }

/* --- 15. A citação da marca em sans quer peso leve e aspas ------------------ */
.manifesto__quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -.015em;
}

/* --- 16. Números dos passos: Poppins tabular -------------------------------- */
.step::before { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

/* --- 17. Reajuste da dobra depois da troca de fonte ------------------------- */
.t-hero { font-size: clamp(2.15rem, 4.2vw, 3.15rem); }
.hero { padding-block: clamp(2.25rem, 3.8vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }

/* ==========================================================================
   REVISÃO 3 (20/08) — Archivo, e o site inteiro mais leve
   Escolha do Mateus depois de comparar 5 fontes retas lado a lado
   (`_gen/fontes.html`). Poppins saiu por ser redonda demais e pesada.
   Archivo: reta, um pouco estreita, ar editorial. Peso 500 nos títulos.
   ========================================================================== */

:root {
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
}

.display {
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.018em;
}

/* Archivo é mais estreita que a Poppins: o mesmo título ocupa menos linha,
   então dá pra crescer um pouco sem empurrar o botão pra fora da tela. */
.t-hero { font-size: clamp(2.25rem, 4.6vw, 3.45rem); }
.t-sec  { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.t-sub  { font-size: clamp(1.3rem, 2.3vw, 1.65rem); }

/* --- "menos negrito" vale pra página toda, não só pro título --------------- */
.t-card      { font-weight: 600; }
.eyebrow     { font-weight: 600; }
.crit__label { font-weight: 600; }
.post__title { font-weight: 600; }
.adv__name   { font-weight: 600; }
.faq summary { font-weight: 600; }
.site-foot h4 { font-weight: 600; }
.todo__tag   { font-weight: 600; }
.prose strong { font-weight: 600; }
.hero__lede strong { font-weight: 600; }

.manifesto__quote { font-weight: 500; letter-spacing: -.012em; }
.step::before { font-weight: 600; }

/* --- 18. Lista de critérios colava no parágrafo do card -------------------- */
.tese__body > p + .crit { margin-top: 1.7rem; }

/* ==========================================================================
   REVISÃO 4 (20/08) — de volta pra Poppins, no peso leve
   O Mateus escolheu a Archivo olhando a comparação, mas nunca chegou a ver
   ela no ar: o CSS estava em cache e a página caiu na fonte de reserva.
   Vendo a comparação de novo, ele ficou com a Poppins. Mantido o peso 500,
   que era a outra metade do pedido ("menos negrito").
   ⚠️ Sem fallback serifado na lista: se a Poppins não carregar, cai em sans
   do sistema, nunca em Georgia (foi assim que a serifada apareceu).
   ========================================================================== */

:root {
  --display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.display {
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.022em;
}

/* Poppins é mais larga que a Archivo: volta um degrau no tamanho pro título
   não empurrar o botão do WhatsApp pra fora da primeira tela. */
.t-hero { font-size: clamp(2.1rem, 4.1vw, 3.1rem); }
.t-sec  { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
.t-sub  { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }

.manifesto__quote { font-weight: 500; letter-spacing: -.018em; }

/* --- 19. Labirinto sai da caixa azul ---------------------------------------
   Dentro do quadrado o objeto nunca ficava centrado: o disco fica de um lado
   e o pedestal embaixo, então a peça é assimétrica por natureza e a moldura
   denunciava isso. Solto na página, a assimetria vira composição em vez de
   erro de alinhamento. */

.shot--object {
  background: none;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: 1 / 1;
  overflow: visible;
}
.shot--object .shot__img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  /* sombra própria acompanhando o recorte, pra peça não flutuar chapada */
  filter: drop-shadow(0 24px 34px rgba(4, 61, 93, .18));
}

/* ==========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   Acompanha a tela em toda a página. Verde oficial do WhatsApp de propósito:
   é o único elemento aqui que NÃO deve parecer da marca — a pessoa tem que
   reconhecer o que é sem ler, e metade do público tem mais de 55 anos.
   Verde não está na lista de cores proibidas pelo cliente. O selinho de
   notificação é DOURADO em vez de vermelho, que é proibido.
   Trocar pro dourado da marca = mudar --wa-verde. Uma linha.
   ========================================================================== */

:root { --wa-verde: #25d366; --wa-verde-esc: #1da851; }

.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  /* entra depois que a página assenta (classe posta pelo script) */
  opacity: 0;
  transform: translateY(14px) scale(.9);
  transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1);
}
.wa.is-in { opacity: 1; transform: none; }

/* --- a etiqueta --- */
.wa__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: .8rem 0;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(4, 61, 93, .1), 0 12px 28px -8px rgba(4, 61, 93, .28);
  transition: max-width .34s cubic-bezier(.22, .61, .36, 1),
              padding .34s cubic-bezier(.22, .61, .36, 1),
              opacity .24s ease;
}
.wa.is-aberto .wa__label,
.wa:focus-visible .wa__label {
  max-width: 14rem;
  opacity: 1;
  padding: .8rem 1.1rem;
}
@media (hover: hover) {
  .wa:hover .wa__label { max-width: 14rem; opacity: 1; padding: .8rem 1.1rem; }
}

/* --- o círculo verde --- */
.wa__btn {
  position: relative;
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--wa-verde);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16), 0 14px 30px -10px rgba(29, 168, 81, .6);
  transition: transform .22s cubic-bezier(.34, 1.4, .5, 1), background-color .22s ease;
}
.wa:hover .wa__btn { background: var(--wa-verde-esc); transform: scale(1.06); }
.wa:active .wa__btn { transform: scale(.97); }

.wa__icon { width: 1.85rem; height: 1.85rem; }

/* anel que pulsa, chamando o olho sem piscar na cara */
.wa__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--wa-verde);
  opacity: .55;
  z-index: -1;
  animation: wa-pulso 2.8s cubic-bezier(.25, .6, .3, 1) infinite;
}
@keyframes wa-pulso {
  0%        { transform: scale(1);   opacity: .5; }
  55%, 100% { transform: scale(1.75); opacity: 0; }
}
.wa:hover .wa__btn::before { animation-play-state: paused; }

/* --- selinho de notificação --- */
.wa__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--body);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
  box-shadow: 0 0 0 2.5px var(--paper);
  animation: wa-selo .5s cubic-bezier(.34, 1.5, .5, 1) 1.4s both;
}
@keyframes wa-selo {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wa { opacity: 1; transform: none; }
  .wa__btn::before { animation: none; opacity: 0; }
  .wa__badge { animation: none; }
}

/* o botão fica por cima do rodapé, então o corpo ganha uma folga no fim */
body { padding-bottom: 5.5rem; }
@media (min-width: 60rem) { body { padding-bottom: 0; } }

/* --- 20. Fundo navy estava chapado ------------------------------------------
   Textura gerada pela máquina de criativos (`_gen/gerar-textura.mjs`):
   cerâmica navy com grão fino, luz caindo do canto e os anéis do labirinto
   só no relevo. Regra do Mateus: riqueza vem de LUZ, SOMBRA, MATERIAL e
   PROFUNDIDADE — não de gradiente e ruído fake no CSS.
   A cor de fundo continua embaixo: se a imagem não carregar, a seção segue
   navy e o texto claro continua legível. */

.section--navy {
  background-color: var(--navy);
  background-image: url("../img/textura-navy.jpg");
  background-size: cover;
  background-position: 68% center;
  background-repeat: no-repeat;
}

/* A segunda seção navy usa outro recorte da MESMA textura, senão as duas
   parecem a mesma imagem colada duas vezes. */
.cta-final {
  background-position: 22% 70%;
}

/* ==========================================================================
   SERVIÇOS SECUNDÁRIOS
   Os casos com tráfego pago (salário-maternidade e aposentadoria rural) são
   os cartões grandes. Estes aqui são mais leves de propósito: mostram que o
   escritório é maior do que dois assuntos, sem competir com o que converte.
   ========================================================================== */

.servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: 2.75rem;
}

.servico { position: relative; padding-top: .25rem; }
.servico__ic {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.1rem;
}
.servico h3 { margin-bottom: .65rem; font-size: 1.3rem; }
.servico p { font-size: var(--fs-small); color: var(--ink-soft); }

/* ==========================================================================
   RECONSTRUÇÃO (20/08) — o site deixa de ser sobre dois casos
   O briefing só listou 2 porque a pergunta era sobre tráfego pago. O site é
   institucional: mostra o escritório inteiro. Decisão do Mateus: organizar
   por SITUAÇÃO DA PESSOA, não por nome de serviço — o público não sabe o
   nome do que precisa, que é a premissa da marca inteira.
   ========================================================================== */

/* --- hero: mosaico de 4 fotos ----------------------------------------------
   Duas fotos diziam "dois públicos". Quatro dizem "qualquer um de vocês".
   A coluna da direita desce um degrau pra virar mosaico e não grade morta. */

.hero__art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 1.2vw, .9rem);
  padding: 0;
  align-items: start;
}
.hero__art .shot {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(4, 61, 93, .1), 0 14px 30px -14px rgba(4, 61, 93, .3);
}
.hero__art .shot:nth-child(2),
.hero__art .shot:nth-child(4) { margin-top: clamp(1.25rem, 3vw, 2.25rem); }

@media (max-width: 60rem) {
  .hero__art { max-width: 30rem; }
}

/* --- grade das 6 situações -------------------------------------------------
   Todos IGUAIS de propósito. Antes dois eram gigantes (com foto e lista) e o
   resto pequeno; a página inteira pendia pros dois e escondia o resto. */

.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-top: 3rem;
}

.caso {
  display: flex;
  flex-direction: column;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.caso:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.caso__ic {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.25rem;
}

/* O título é a FRASE DA PESSOA ("Tive um filho"), não o nome jurídico.
   O nome do serviço vem embaixo, menor — quem já sabe o nome reconhece,
   quem não sabe não precisa dele pra se achar. */
.caso__titulo {
  font-family: var(--body);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.008em;
  color: var(--navy);
}
.caso__servico {
  margin-top: .45rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.caso__texto {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.caso .crit { margin-top: 1.5rem; }
.caso__foot { margin-top: auto; padding-top: 1.75rem; }
.caso__foot .btn { width: 100%; }

/* ==========================================================================
   PÁGINAS DE TESE (salário-maternidade, aposentadoria rural)
   São o destino do tráfego pago. É aqui que moram as listas longas de
   critério que saíram da home.
   ========================================================================== */

.hero--tese { padding-block: clamp(2rem, 3.5vw, 3.25rem) clamp(3rem, 6vw, 5rem); }
.hero--tese .hero__grid { align-items: center; }

.migalha {
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.migalha a { color: var(--gold-deep); text-decoration: none; font-weight: 600; }
.migalha a:hover { text-decoration: underline; }
.migalha span { margin-inline: .35rem; }

.hero__art--tese { display: block; }
.hero__art--tese .shot {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: 0;
}

/* as duas listas lado a lado, com peso visual diferente */
.crit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.75rem;
}
.crit-grid .crit {
  margin: 0;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
}
.crit-grid .crit--yes { border-color: rgba(180, 160, 101, .5); }

/* ==========================================================================
   ACORDEÃO DAS SITUAÇÕES
   A grade de 6 cartões passava de 1.800px. Fechado, isto cabe numa tela.
   E é como a pessoa usa de verdade: ela procura a situação DELA e abre só
   aquela. <details name> = acordeão nativo, sem JavaScript, um por vez.
   ========================================================================== */

.situacoes {
  margin-top: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-lift);
}

.sit + .sit { border-top: 1px solid var(--line); }
.sit { transition: background-color .2s ease; }
.sit[open] { background: var(--paper); }

/* --- a linha clicável --- */
.sit__head {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.35rem);
  padding: clamp(.9rem, 1.8vw, 1.15rem) clamp(1.1rem, 2.2vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sit__head::-webkit-details-marker { display: none; }
.sit__head:hover { background: rgba(180, 160, 101, .07); }

.sit__ic {
  flex-shrink: 0;
  width: 3.1rem;
  height: 3.1rem;
  object-fit: contain;
}

.sit__nome { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sit__titulo {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.008em;
  color: var(--navy);
}
.sit__servico {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* seta */
.sit__head::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: .7rem;
  height: .7rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.sit[open] .sit__head::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* --- o conteúdo aberto ---
   Duas colunas no desktop: sem isso o painel aberto fica alto e estreito
   e a seção volta a crescer, que é justamente o que se queria resolver. */
.sit__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  padding: 0 clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.5rem, 2.6vw, 2rem);
  padding-left: calc(3.1rem + clamp(.9rem, 1.8vw, 1.35rem) + clamp(1.1rem, 2.2vw, 1.6rem));
}
.sit__texto p { font-size: var(--fs-small); color: var(--ink-soft); }
.sit__texto .btn { margin-top: 1.4rem; }
.sit__corpo .crit { margin: 0; }

@media (max-width: 52rem) {
  .sit__corpo {
    grid-template-columns: 1fr;
    padding-left: clamp(1.1rem, 2.2vw, 1.6rem);
  }
  .sit__ic { width: 2.6rem; height: 2.6rem; }
}

/* abertura suave onde o navegador souber animar altura automática */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .situacoes { interpolate-size: allow-keywords; }
    .sit::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .3s ease, content-visibility .3s allow-discrete;
    }
    .sit[open]::details-content { block-size: auto; }
  }
}

/* --- 21. Afordância de clique no acordeão -----------------------------------
   Nenhum item nasce aberto (item aberto de cara confunde quem não conhece o
   padrão) — então a linha precisa GRITAR que abre. Seta sozinha não basta
   pra público leigo: vai a PALAVRA "Ver mais", num botão redondo visível. */

.sit__acao {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-left: auto;
  flex-shrink: 0;
}

.sit__acao-txt {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--gold-deep);
  white-space: nowrap;
}
.sit__acao-txt--fechar { display: none; }
.sit[open] .sit__acao-txt--abrir { display: none; }
.sit[open] .sit__acao-txt--fechar { display: inline; }

/* botão redondo: lê como controle, não como enfeite */
.sit__seta {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--paper);
  transition: background-color .2s ease, transform .22s ease, border-color .2s ease;
}
.sit__seta::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform .22s ease, border-color .2s ease;
}
.sit[open] .sit__seta { background: var(--gold); border-color: var(--gold); }
.sit[open] .sit__seta::before {
  transform: translate(-50%, -30%) rotate(-135deg);
  border-color: var(--navy-deep);
}
.sit__head:hover .sit__seta { background: var(--gold); }
.sit__head:hover .sit__seta::before { border-color: var(--navy-deep); }

/* a seta antiga do ::after some, quem manda agora é o botão */
.sit__head::after { content: none; }

/* a linha inteira reage ao mouse, reforçando que é clicável */
.sit__head:hover .sit__titulo { color: var(--navy-mid); }

@media (max-width: 40rem) {
  .sit__acao-txt { display: none !important; }
  .sit__acao { gap: 0; }
}

/* ==========================================================================
   BOTÕES — mais cara de botão, e o de WhatsApp em verde
   Dois pesos com significados diferentes:
     dourado (.btn--primary) = navegar dentro do site
     verde   (.btn--wa)      = falar com uma pessoa AGORA
   A pessoa aprende a diferença sem ninguém explicar.
   ========================================================================== */

:root {
  /* verde um tom mais fundo que o #25D366 puro, que fica ácido ao lado do
     navy e do dourado. Continua reconhecível como WhatsApp. */
  --wa-topo:  #2bc768;
  --wa-base:  #1ba556;
  --wa-borda: #16904a;
  --wa-verde: #1fae5d;   /* usado também pelo botão flutuante */
  --wa-verde-esc: #17924d;
}

/* --- profundidade em TODOS os botões ------------------------------------- */
.btn {
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s cubic-bezier(.34, 1.3, .5, 1),
              box-shadow .22s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease, filter .2s ease;
}
.btn svg { transition: transform .22s cubic-bezier(.34, 1.4, .5, 1); }
.btn:active { transform: translateY(0) scale(.985); }

/* o brilho que atravessa no hover — um movimento só, sem piscar */
.btn--primary::after,
.btn--wa::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -140%;
  width: 70%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
}
.btn--primary:hover::after,
.btn--wa:hover::after { animation: btn-brilho .75s ease-out; }
@keyframes btn-brilho { to { inset: 0 auto 0 160%; } }

/* --- dourado: navegar --------------------------------------------------- */
.btn--primary {
  background: linear-gradient(180deg, #c2ae74 0%, var(--gold) 100%);
  color: var(--navy-deep);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
              0 1px 2px rgba(4, 61, 93, .16),
              0 8px 18px -8px rgba(143, 125, 71, .55);
}
.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
              0 2px 4px rgba(4, 61, 93, .18),
              0 14px 26px -10px rgba(143, 125, 71, .7);
}

/* --- verde: falar agora -------------------------------------------------- */
.btn--wa {
  background: linear-gradient(180deg, var(--wa-topo) 0%, var(--wa-base) 100%);
  color: #fff;
  border-color: transparent;
  border-bottom: 2px solid var(--wa-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 1px 2px rgba(0, 0, 0, .14),
              0 10px 22px -9px rgba(27, 165, 86, .7);
}
.btn--wa:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
              0 2px 5px rgba(0, 0, 0, .16),
              0 16px 30px -10px rgba(27, 165, 86, .8);
}
.btn--wa:hover svg { transform: scale(1.12) rotate(-6deg); }
.btn--wa:focus-visible { outline-color: var(--wa-base); }

/* dentro da seção navy o verde precisa de mais separação do fundo */
.section--navy .btn--wa {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 1px 2px rgba(0, 0, 0, .22),
              0 12px 26px -8px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after, .btn--wa::after { display: none; }
  .btn:hover { transform: none; }
  .btn--wa:hover svg { transform: none; }
}

/* --- 22. Trava do verde no hover -------------------------------------------
   O botão de WhatsApp virava DOURADO ao passar o mouse: ele tinha as duas
   classes, e `.btn--primary:hover` (0,2,0) ganha de `.btn--wa` (0,1,0).
   O `btn--primary` saiu do HTML desses botões — mas a declaração fica aqui
   como rede de segurança, caso alguém devolva a classe sem perceber. */
.btn--wa,
.btn--wa:hover,
.btn--wa:focus-visible,
.btn--wa:active {
  background: linear-gradient(180deg, var(--wa-topo) 0%, var(--wa-base) 100%);
  color: #fff;
}
.btn--wa:hover { filter: brightness(1.07); }

/* --- 23. E-mail do rodapé quebrava no meio da palavra -----------------------
   `overflow-wrap: anywhere` resolvia o vazamento horizontal mas partia
   "gmail.co / m". Agora a quebra é sugerida no @ (com <wbr> no HTML) e o
   navegador só parte em lugar arbitrário se ainda não couber. */
.site-foot a,
.site-foot p { overflow-wrap: break-word; }
.site-foot li a { word-break: normal; }

/* ==========================================================================
   BLOG — índice e artigo
   Os artigos moram como markdown em `conteudo/blog/` e o `_gen/blog.py`
   monta o HTML. É o mesmo formato que o Astro vai usar, então o CLI do
   Codex já pode escrever `.md` e rodar o gerador.
   ========================================================================== */

/* coluna estreita: texto longo se lê em 65-75 caracteres, não em 1180px */
.wrap--leitura { max-width: 46rem; }

.artigo__topo { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem); }
.artigo__topo h1 { color: var(--navy); margin-top: .35rem; }
.artigo__topo .lede { margin-top: 1.1rem; }

.artigo__meta {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.artigo__capa {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.artigo__capa img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* --- o corpo do texto ---
   Estes seletores valem pro HTML que o markdown cospe, então precisam
   funcionar sem classe nenhuma nos elementos. */
.artigo__corpo { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.artigo__corpo h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--navy);
  margin-top: 2.75rem;
  margin-bottom: .9rem;
}
.artigo__corpo h3 {
  font-family: var(--body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 2rem;
  margin-bottom: .6rem;
}
.artigo__corpo p { margin-top: 1.1rem; }
.artigo__corpo p:first-child { margin-top: 0; }
.artigo__corpo strong { font-weight: 600; color: var(--navy); }
.artigo__corpo em { font-style: italic; }
.artigo__corpo a { color: var(--navy); text-decoration: underline; text-underline-offset: .18em; }
.artigo__corpo a:hover { color: var(--gold-deep); }

.artigo__corpo ul { margin-top: 1.1rem; }
.artigo__corpo ul li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-small);
}
.artigo__corpo ul li + li { margin-top: .7rem; }
.artigo__corpo ul li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .62em;
  width: .45rem; height: .45rem;
  background: var(--gold);
  border-radius: 50%;
}

.artigo__ressalva {
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}

/* --- o bloco que empurra pro pilar (a página de tese) ---
   Sem isto o artigo gera tráfego e não gera lead: é ele que liga
   satélite -> pilar -> WhatsApp. */
.pilar {
  max-width: 46rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
}
.pilar__rotulo {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pilar__nome {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  margin-block: .35rem 1.15rem;
}

/* --- índice --- */
.posts--indice { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.post__resumo {
  margin-top: .7rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.posts--indice .post__meta { padding-top: 1.1rem; }

/* --- 24. Blocos novos do artigo: sumário, foto do meio e CTA do meio -------
   O artigo é escrito por robô, então nada aqui depende de alguém marcar o
   ponto no texto: o gerador posiciona sozinho. */

.sumario {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.sumario__titulo {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}
.sumario__lista { counter-reset: sum; }
.sumario__lista li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--fs-small);
}
.sumario__lista li + li { margin-top: .55rem; }
.sumario__lista li::before {
  counter-increment: sum;
  content: counter(sum, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gold);
}
.sumario__lista a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sumario__lista a:hover { border-bottom-color: var(--gold); }

/* a segunda foto: sangra um pouco além da coluna de leitura, pra respirar */
.artigo__foto {
  margin-block: clamp(2rem, 4vw, 2.75rem);
  margin-inline: clamp(-2.5rem, -3vw, 0rem);
}
.artigo__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 46rem) { .artigo__foto { margin-inline: 0; } }

/* CTA no meio do texto — o leitor não precisa chegar no fim pra ter o botão */
.cta-meio {
  margin-block: clamp(2.25rem, 4.5vw, 3rem);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  background: var(--navy);
  /* caminho é relativo ao ARQUIVO CSS (assets/css/), não à página. Estava
     "../assets/img/..." e virava /assets/assets/img/ — 404 silencioso: o CTA
     do meio do artigo caía no navy chapado e ninguém via o erro. */
  background-image: url("../img/textura-navy.jpg");
  background-size: cover;
  background-position: 40% center;
  border-radius: var(--radius-lg);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}
.cta-meio__titulo {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.2;
  color: var(--paper);
}
.cta-meio__texto {
  margin-block: .8rem 1.5rem;
  font-size: var(--fs-small);
  color: rgba(239, 236, 234, .82);
  max-width: 42ch;
}

/* diagrama que o Codex escreve em SVG: o container trava a largura,
   senão sai estourando a coluna no celular */
.artigo__corpo svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.artigo__corpo figure { margin-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.artigo__corpo figcaption {
  margin-top: .7rem;
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  text-align: center;
}

/* --- 25. O ícone do botão estava sendo tratado como diagrama ---------------
   A regra de SVG pro diagrama do Codex (`.artigo__corpo svg`) pegava TODO svg
   do artigo, inclusive o ícone do WhatsApp dentro do botão: virava bloco,
   ganhava height:auto e 2.5rem de margem, e o botão saía 260x135, quadrado.
   Agora só vale pra svg SOLTO no corpo ou dentro de figure, que é o que o
   diagrama vai ser. */
.artigo__corpo svg { display: initial; max-width: none; height: initial; margin-block: 0; }
.artigo__corpo > svg,
.artigo__corpo > figure > svg,
.artigo__corpo > p > svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.btn { white-space: nowrap; }
.btn svg { flex-shrink: 0; }

/* --- 26. Botão dentro do corpo do artigo herdava estilo de link ------------
   `.artigo__corpo a { text-decoration: underline }` é pra link no meio do
   texto. O botão do CTA mora dentro do corpo e vinha sublinhado, com a cor
   de link. Botão não é link de texto. */
.artigo__corpo a.btn,
.artigo__corpo a.btn:hover,
.pilar a.btn,
.cta-meio a.btn {
  text-decoration: none;
  border-bottom: 0;
}
.artigo__corpo a.btn--wa,
.cta-meio a.btn--wa { color: #fff; }
.artigo__corpo a.btn--primary { color: var(--navy-deep); }

/* ==========================================================================
   BANNER DE CONSENTIMENTO (LGPD)
   Recusar tem o MESMO peso visual que aceitar. Banner com "Aceitar" grande e
   "Recusar" escondido num link não é consentimento — é o padrão que a ANPD
   vem multando. Aqui os dois botões têm o mesmo tamanho e a mesma altura.
   ========================================================================== */

.cookie {
  position: fixed;
  left: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 120;
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(4, 61, 93, .1), 0 24px 50px -16px rgba(4, 61, 93, .35);
}
.cookie[hidden] { display: none; }

.cookie__texto { flex: 1 1 20rem; min-width: 0; }
.cookie__titulo {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}
.cookie__texto p:last-child {
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--ink-soft);
}
.cookie__texto a { color: var(--navy); text-decoration: underline; text-underline-offset: .16em; }
.cookie__texto a:hover { color: var(--gold-deep); }

.cookie__botoes { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookie__botoes .btn { flex: 1 1 auto; justify-content: center; min-width: 7.5rem; }

@media (max-width: 34rem) {
  .cookie { flex-direction: column; align-items: stretch; }
  .cookie__botoes .btn { flex: 1 1 0; }
}

/* o botão flutuante do WhatsApp não pode ficar embaixo do banner */
.cookie:not([hidden]) ~ .wa { bottom: auto; }

/* ==========================================================================
   PÁGINA 404
   Quem cai aqui está perdido e com pressa. Três saídas grandes e um atalho
   pras páginas que mais importam, em vez de um "voltar" solitário.
   ========================================================================== */

.erro404 { text-align: center; }
.erro404__marca { width: 4.5rem; margin: 0 auto 1.75rem; opacity: .5; }
.erro404 .eyebrow { display: block; margin-bottom: .9rem; }
.erro404 h1 { color: var(--navy); }
.erro404 .lede { margin: 1.25rem auto 0; max-width: 38rem; }

.erro404__saidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .875rem;
  margin-top: 2.5rem;
}

.erro404__atalhos {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.erro404__rotulo {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.erro404__atalhos ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.75rem;
}
.erro404__atalhos a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.erro404__atalhos a:hover { border-bottom-color: var(--gold); }

/* ==========================================================================
   AS ADVOGADAS — agora com gente de verdade (26/08)
   O card nasceu com o símbolo da marca num círculo, porque não havia foto.
   Com retrato real, a foto vira o topo do cartão: é ela que responde
   "dá pra confiar?", que é a objeção número um do público.
   ========================================================================== */

.adv {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.adv:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.adv__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: var(--paper);
}

.adv .adv__name {
  padding: clamp(1.15rem, 2vw, 1.4rem) clamp(1.15rem, 2vw, 1.4rem) 0;
  font-size: 1.1875rem;
  line-height: 1.25;
}
.adv .adv__oab {
  padding-inline: clamp(1.15rem, 2vw, 1.4rem);
  margin-top: .3rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--gold-deep);
}
.adv .adv__area {
  padding: .85rem clamp(1.15rem, 2vw, 1.4rem) clamp(1.3rem, 2.2vw, 1.6rem);
  margin-top: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* o círculo com o símbolo só aparece se ainda faltar foto de alguém */
.adv__av {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  margin-bottom: 0;
  background: var(--navy);
  display: grid;
  place-items: center;
}
.adv__av img { width: 34%; }

/* --- 27. "Como funciona" saiu do navy e virou superfície clara -------------
   Feedback do Mateus: "gosto desse bg mas os icones tao mt baguncados nesse
   fundo colorido, teria como manter esse aspecto de textura mas em um tom
   claro". O diagnóstico é esse mesmo: os ícones 3D foram gerados em navy e
   osso, então em cima do navy o corpo do ícone some e só a parte clara
   sobra — o desenho fica picado, sem silhueta.

   Sobre fundo claro os dois tons do ícone aparecem inteiros. A textura é a
   MESMA peça de cerâmica com os anéis do labirinto em relevo, só que
   queimada em osso (`_gen/gerar-textura.mjs`, id `textura-clara`), então a
   página não perde o material.

   A âncora escura da página continua existindo: a `.cta-final` segue navy.
   Se as duas fossem claras, a página inteira viraria um bloco só. */

.section--passos {
  background-color: var(--paper);
  background-image: url("../img/textura-clara.jpg");
  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
}

/* O texto do passo herdava a cor clara de quando a seção era navy: em cima
   do fundo claro ele sumia. */
.section--passos .step p { color: var(--ink-soft); }
.section--passos .step h3,
.section--passos .t-sec,
.section--passos .t-card { color: var(--ink); }
.section--passos .lede { color: var(--ink-soft); }
.section--passos .eyebrow { color: var(--gold-deep); }

/* Fio de costura e selo voltam ao traço claro das outras seções. */
.section--passos .mark { background: var(--paper); }

/* Uma linha fina de cada lado separa a seção das vizinhas claras, senão o
   bloco encosta na anterior e some a divisão. */
.section--passos {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --- 28. `aspect-ratio` estava sendo ignorado em toda foto ------------------
   Achado em 28/08, ao entrar a quarta pessoa no time. Os retratos saíam
   339x640 na tela, não quadrados, apesar do `aspect-ratio: 1 / 1` — e as fotos
   dos artigos saíam 640x800 em vez de 3:2.

   CAUSA: `aspect-ratio` só manda quando a altura é `auto`. O `_gen/dimensoes.py`
   carimba `width="640" height="640"` no HTML pra impedir o texto de pular no
   carregamento, e o atributo `height` vira altura de verdade, que ganha do
   `aspect-ratio`. Ou seja: o gerador que conserta o pulo do layout quebrava o
   enquadramento. Os dois são necessários, então a regra abaixo é obrigatória em
   TODA imagem que use `aspect-ratio`.

   Sem isso o recorte quadrado do `_gen/retratos.py` era jogado fora pelo CSS:
   as fotos eram cortadas em tira vertical e os rostos voltavam a ficar em
   alturas diferentes, que é exatamente o que aquele script existe pra resolver.
   Checado agora pelo `_gen/auditar.py`. */

.adv__foto,
.artigo__capa img,
.artigo__foto img { height: auto; }

/* --- a banca agora tem 4 pessoas ------------------------------------------
   Com `auto-fit` a grade parava em 3 colunas e a quarta pessoa ficava sozinha
   numa segunda linha, com um buraco do lado. Colunas explícitas, pulando o 3
   de propósito: 1 no celular, 2x2 no meio, 4 em linha no desktop.
   ⚠️ Se entrar uma 5ª pessoa, revisar aqui — 5 em grade de 4 deixa órfã. */

.banca { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .banca { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75rem) {
  .banca { grid-template-columns: repeat(4, 1fr); }
  /* nome comprido ("Regina Gonçalves Machado Prates") em coluna estreita */
  .adv .adv__name { font-size: 1.0625rem; }
}

/* --- 29. O ícone encostava no fundo claro ---------------------------------
   Mateus, olhando o passo 2: "falta uma sombrinha, uma coisa atrás aqui, pra
   não mesclar o branco no fundo".

   É o contrário do problema que o fundo claro resolveu. No navy sumia o CORPO
   do ícone (navy sobre navy); no claro encosta a BASE dele (osso sobre osso),
   e a peça perde o contorno embaixo.

   Sombra em `drop-shadow` e não em `box-shadow`: o PNG é recortado, então a
   sombra tem que seguir o CONTORNO do objeto. `box-shadow` desenharia um
   retângulo em volta de uma imagem transparente, que é justamente o erro que
   dá cara de colagem.

   Duas camadas, como sombra de verdade: uma curta e fechada logo abaixo da
   peça (contato com a mesa) e uma larga e fraca (luz do ambiente). A sombra
   cai pra DIREITA porque na textura desta seção a luz vem do canto superior
   esquerdo — se caísse pro outro lado, o olho estranha sem saber por quê.
   Tom navy rebaixado em vez de preto: preto sobre bege esverdeia e suja. */

.step__ic {
  filter:
    drop-shadow(1px 2px 2px rgba(4, 61, 93, .20))
    drop-shadow(3px 9px 14px rgba(4, 61, 93, .14));
}

/* Os ícones da lista de situações são pequenos (2.6rem a 3.1rem) e sentam no
   mesmo bege. Sombra na mesma direção, porém mais curta: sombra grande em
   ícone pequeno vira borrão. */
.sit__ic {
  filter: drop-shadow(1px 2px 3px rgba(4, 61, 93, .18));
}

/* --- 30. marcador de pendência na versão de aprovação -----------------------
   Só existe no build de rascunho (`python _gen/publicar.py --rascunho`), que é
   o que vai pro Cloudflare pro cliente aprovar. Na versão final não sobra
   nenhum, porque o `publicar.py` se recusa a montar com pendência visível.

   Motivo de existir: os marcadores `[PREENCHER]` são bilhetes escritos pra mim
   ("não colocar número inventado aqui", "confirmar com o Gabriel"). Mostrar
   isso pro cliente parece descuido e ainda cita o nome de gente por dentro.
   Aqui vira um aviso curto, em português, que o próprio cliente entende como
   "falta você me mandar isso". */

.pendente {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .1em .55em;
  border: 1px dashed var(--gold);
  border-radius: 999px;
  background: rgba(180, 160, 101, .1);
  color: var(--gold-deep);
  font-size: .9em;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}
.pendente::before {
  content: "";
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.section--navy .pendente {
  border-color: var(--gold-lit);
  color: var(--gold-lit);
  background: rgba(203, 184, 127, .12);
}
.section--navy .pendente::before { background: var(--gold-lit); }

/* --- 31. Hero institucional -----------------------------------------------
   O hero mostrava 4 fotos do público em grade. Vinicius, em 28/08: "essa hero
   tá muito pra captação". Quatro rostos de gente com papel na mão dizem
   "pode ser você que tem dinheiro pra receber", que é anúncio, não escritório.

   Virou UMA imagem: os anéis do labirinto como LUZ projetada no chão de um
   corredor, e uma pessoa comum caminhando para o ponto dourado no centro.
   O labirinto está DENTRO da fotografia, e não colado ao lado dela — colagem
   de objeto 3D com fotografia sempre parece remendo.

   A imagem é escura de propósito, contra o fundo claro da página: é o único
   ponto de peso visual da dobra, então o olho vai nela e volta pro título. */

.hero__art--unica {
  display: block;
  padding: 0;
  max-width: none;
}

/* .hero__art .shot tem especificidade (0,2,0) e definia 1/1 pras 4 fotos
   antigas. Um seletor de classe só (0,1,0) perde pra ele e a imagem saía
   cortada em quadrado. Precisa empatar em especificidade e vir depois. */
.hero__art--unica .shot--hero-unica {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* sombra mais funda que a das outras fotos: a imagem é escura e sem isso
     ela encosta no fundo claro sem transição */
  box-shadow: 0 2px 6px rgba(4, 61, 93, .14), 0 26px 50px -20px rgba(4, 61, 93, .45);
}
.shot--hero-unica .shot__img {
  width: 100%;
  height: auto;                /* obrigatório: sem isso o atributo height do
                                  HTML vence o aspect-ratio (bloco 28) */
  object-fit: cover;
}

@media (max-width: 60rem) {
  .hero__art--unica { max-width: 30rem; margin-inline: auto; }
}

/* --- 32. Hero com o objeto da marca ---------------------------------------
   O hero passou por três tentativas até aqui: 4 fotos do público (lia como
   anúncio), uma foto gerada de anéis de luz (não agradou) e uma fileira com
   os advogados recortados (as fotos não davam conta). Ficou o objeto: o
   labirinto da logo em 3D, com os anéis vazados e o disco dourado chapado.

   Objeto pede tratamento oposto ao de fotografia. Foto quer moldura, canto
   arredondado e sombra, porque é uma janela para outro lugar. Objeto quer AR
   e nada em volta: ele já vem com a própria sombra na imagem, e qualquer
   caixa em torno mata a ilusão de que a peça está ali na página.

   Por isso o fundo da imagem é o mesmo bege do site: sem borda, a peça
   simplesmente pousa na página. */

.hero__art--objeto {
  display: block;
  padding: 0;
  max-width: none;
  background: none;
}

.hero__art--objeto .shot--objeto {
  padding: 0;
  display: block;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
  margin: 0;
}
.hero__art--objeto .shot--objeto::before { content: none; }

.hero__art--objeto .shot__img {
  /* A base do .shot__img é position:absolute; inset:0 — serve pra foto dentro
     de moldura, onde a moldura define o tamanho. Aqui é o contrário: quem
     manda no tamanho é a PEÇA. Absoluto não empurra altura nenhuma, então a
     figura ficava com 64px (só o padding) e a imagem vazava por baixo da
     dobra. Voltar pro fluxo normal resolve. */
  position: static;
  inset: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
  /* A peça é recortada, então a sombra tem que seguir o CONTORNO dela e passar
     pelos vãos entre os anéis. box-shadow desenharia um retângulo em volta de
     uma imagem transparente, que é o erro clássico. Duas camadas: contato
     curto e ambiente largo, caindo pra direita como a luz da imagem. */
  filter:
    drop-shadow(2px 4px 5px rgba(4, 61, 93, .18))
    drop-shadow(6px 18px 30px rgba(4, 61, 93, .16));
  /* Limite pela ALTURA, não pela largura. Deixando a peça ocupar a coluna
     inteira ela ficava com 590px e era cortada pela dobra: o visitante via
     meio labirinto. O hero tem cerca de 540px úteis de altura. */
  max-height: 30rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  display: block;
}

@media (max-width: 60rem) {
  .hero__art--objeto { max-width: 26rem; margin-inline: auto; }
  .hero__art--objeto .shot__img { max-width: 100%; margin-left: 0; }
}