/* ============================================================
   Vasconcellos & Aranha — sistema visual compartilhado (MPA)
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* rede contra overflow horizontal (a causa é corrigida nos componentes) */
html, body { overflow-x: hidden; max-width: 100%; }

/* ------------------------------------------------------------
   SHELL — trilho fluido e generoso (substitui max-w-6xl fixo).
   Em 1920/2560 a página continua composta, sem boiar no vazio:
   o teto sobe para 1600px e o respiro lateral cresce por clamp.
   ------------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: min(92vw, 1600px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 6rem);
}
/* variante mais estreita para blocos de leitura/editorial */
.shell-narrow {
  width: 100%;
  max-width: min(92vw, 1040px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 6rem);
}
.shell-mid {
  width: 100%;
  max-width: min(92vw, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 6rem);
}

/* full-bleed: a faixa de cor/foto sangra 100vw; o texto fica no trilho interno */
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* respiro de safe-area em telas com notch */
@supports (padding: max(0px)) {
  .safe-r { padding-right: max(1.25rem, env(safe-area-inset-right)); }
  .safe-b { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}

/* filete dourado fininho */
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, #a98b54 18%, #a98b54 82%, transparent); }

/* numeração / kicker editorial */
.kicker { letter-spacing: .28em; }

/* scrim real sobre foto */
.scrim {
  background:
    linear-gradient(180deg, rgba(8,16,26,.40) 0%, rgba(8,16,26,.78) 60%, rgba(8,16,26,.94) 100%),
    linear-gradient(90deg, rgba(8,16,26,.82) 0%, rgba(8,16,26,.20) 70%, rgba(8,16,26,.10) 100%);
}

/* reveal — transição de estado com propósito */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* link com underline animado */
.navlink { position: relative; }
.navlink::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: #a98b54; transition: width .35s ease;
}
.navlink:hover::after, .navlink:focus-visible::after { width: 100%; }

/* alvos de toque: links de nav (header/rodapé) com altura efetiva >=44px
   no mobile, sem alterar o layout visual em telas maiores */
@media (max-width: 767px) {
  .tap-nav { min-height: 44px; display: inline-flex; align-items: center; }
}

/* item de nav ativo (rota atual) */
.navlink-active { color: #0d1b2a; }
.navlink-active::after { width: 100%; }
.navlink-active-ivory { color: #f4f0e8; }

/* foco visível acessível */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #a98b54; outline-offset: 3px; border-radius: 2px;
}

/* capitular editorial */
.firstletter::first-letter {
  font-family: "Cormorant Garamond", Georgia, serif;
  float: left; font-size: 4.6rem; line-height: .82; padding: .05em .14em 0 0;
  color: #6e1423; font-weight: 600;
}

/* ------------------------------------------------------------
   DETALHE-ASSINATURA: "filete do auto" / margem de processo
   Linha vertical de bordo com um nó dourado — referência à
   margem lateral dos autos forenses. Aparece junto a títulos
   e abre seções como uma "rubrica" da banca.
   ------------------------------------------------------------ */
.rubrica { position: relative; padding-left: 1.5rem; }
.rubrica::before {
  content: ''; position: absolute; left: 0; top: .15em; bottom: .15em; width: 2px;
  background: linear-gradient(180deg, #6e1423, #6e1423 60%, rgba(110,20,35,0));
}
.rubrica::after {
  content: ''; position: absolute; left: -3px; top: .15em; width: 8px; height: 8px;
  border-radius: 50%; background: #a98b54;
  box-shadow: 0 0 0 3px rgba(169,139,84,.18);
}

/* selo monograma — usado em fichas e citações */
.monogram-seal {
  width: 44px; height: 44px; border: 1px solid rgba(169,139,84,.55);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif; color: #a98b54; font-size: 1.05rem;
}

/* citação editorial com aspa serifada */
.pull-quote { position: relative; }
.pull-quote::before {
  content: '\201C'; position: absolute; left: -.55em; top: -.25em;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 4rem; line-height: 1;
  color: rgba(169,139,84,.45);
}

/* acordeão de FAQ — transição de estado, não decorativa */
.faq-item summary { list-style: none; cursor: pointer; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.faq-item[open] .faq-chevron { transform: rotate(90deg); }
/* corpo da resposta com abertura suave (state, não ornamento) */
.faq-item[open] .faq-body { animation: faqIn .28s cubic-bezier(.16,.84,.44,1); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   MICRO-ANIMAÇÕES — feedback / estado / transição (canon Dalmasio)
   ============================================================ */

/* header sticky: compacta e ganha sombra ao rolar (estado de scroll) */
header { transition: box-shadow .3s ease, background-color .3s ease; }
header.is-scrolled { box-shadow: 0 1px 0 rgba(13,27,42,.06), 0 8px 24px -16px rgba(13,27,42,.5); }

/* botões e CTAs: lift sutil no hover, afundar no toque (feedback) */
.btn-press { transition: transform .18s ease, background-color .25s ease, box-shadow .25s ease; will-change: transform; }
.btn-press:hover { transform: translateY(-1px); }
.btn-press:active { transform: translateY(0) scale(.98); }

/* cards/linhas de área: realce de estado via transform GPU (não layout) */
.area-row { transition: background-color .3s ease, transform .3s cubic-bezier(.16,.84,.44,1); }
@media (hover: hover) {
  .area-row:hover { transform: translateX(4px); }
}

/* selo/portrait: realce de foto no hover (brand) */
.portrait { transition: filter .5s ease, transform .6s cubic-bezier(.16,.84,.44,1); }
@media (hover: hover) {
  .portrait:hover { filter: grayscale(0); transform: scale(1.015); }
}

/* ------------------------------------------------------------
   menu mobile: anima de verdade (sem display:none cortando a
   transição) e fica inacessível por teclado/leitor quando fechado.
   Estado fechado = padrão (sem .open). Estado aberto = .open.
   A acessibilidade real vem de visibility:hidden + [hidden]/inert
   aplicados pelo JS; max-height/opacity dão a animação.
   ------------------------------------------------------------ */
#mobileMenu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .3s cubic-bezier(.16,.84,.44,1),
              opacity .25s ease,
              visibility 0s linear .3s;
}
#mobileMenu.open {
  max-height: 22rem;
  opacity: 1;
  visibility: visible;
  transition: max-height .3s cubic-bezier(.16,.84,.44,1),
              opacity .25s ease,
              visibility 0s linear 0s;
}
#menuBtn svg { transition: transform .3s ease; }
#menuBtn[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  #mobileMenu { transition: none; }
}

/* float WhatsApp: pressão no toque, sem loop decorativo */
.wa-float { transition: transform .2s ease, box-shadow .3s ease; }
.wa-float:active { transform: scale(.94); }

/* detalhe-assinatura: o nó dourado da rubrica pulsa UMA vez quando revelado */
.reveal.is-in .rubrica::after { animation: noPulse .9s ease .15s 1; }
@keyframes noPulse {
  0% { box-shadow: 0 0 0 3px rgba(169,139,84,.18); }
  45% { box-shadow: 0 0 0 7px rgba(169,139,84,.04); }
  100% { box-shadow: 0 0 0 3px rgba(169,139,84,.18); }
}

/* respeito cardinal à preferência do usuário — zera/again reduz tudo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn-press:hover, .area-row:hover, .portrait:hover { transform: none; }
}