/* ==========================================================================
   RESET & ESTILOS GLOBAIS - CLAUDIO MENDONÇA ADVOGADOS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* overflow-x mora no html, não no body: se ficasse em "body" sem um
     overflow-y correspondente, o navegador transforma o body num contêiner
     de rolagem próprio (overflow computado vira "hidden auto"), separado da
     rolagem do documento. Isso quebra o IntersectionObserver da animação de
     entrada (main.js), que passa a nunca detectar as seções abaixo da
     dobra, deixando o conteúdo delas com opacity:0 permanentemente. */
  overflow-x: hidden;
}

body {
  background-color: var(--bg-body);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar Minimalista e Integrada */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-gold);
}

/* Tipografia Base: peso pesado e tracking negativo — títulos como afirmação
   direta, não como caligrafia elegante. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Layout Utilitário */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
  position: relative;
}

.section-alt {
  background-color: var(--bg-surface-alt);
}

.section-dark {
  background-color: var(--brand-navy);
  color: var(--text-light);
}

.section-dark h2, .section-dark h3 {
  color: #FFFFFF;
}

.section-dark p {
  color: #CBD5E1;
}

/* Cabeçalhos de Seção Editoriais */
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px auto;
}

.section-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-gold);
  margin-bottom: 12px;
}

.section-title {
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA BIDIRECIONAIS (ver main.js, seção 4)
   O JS marca cada elemento com data-anim (variante) e data-anim-state:
     below / above -> oculto, aguardando entrar por baixo / por cima da tela
     in            -> animando até a posição final
     done          -> assentado; nenhuma regra daqui se aplica (hover nativo livre)
   Só existe com a classe html.anim-on, que o JS adiciona. Sem JS, movimento
   reduzido, automação (Puppeteer) ou ?anim=off, o conteúdo fica visível.
   Usa as propriedades individuais translate/scale para não colidir com os
   transform do Tailwind (hover:-translate-y-*, etc.).
   ========================================================================== */
html.anim-on {
  --anim-dist: 34px;
  --anim-dur: 0.9s;
  --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  html.anim-on {
    --anim-dist: 22px;
    --anim-dur: 0.75s;
  }
}

/* Estado oculto: some sem transição (o elemento está fora da tela). */
html.anim-on [data-anim-state="below"],
html.anim-on [data-anim-state="above"] {
  --sign: 1;
  opacity: 0;
  translate: var(--from-x, 0px) calc(var(--from-y, var(--anim-dist)) * var(--sign));
  scale: var(--from-scale, 1);
  transition: none;
}

/* Voltando a rolar para cima, o elemento entra vindo de cima. */
html.anim-on [data-anim-state="above"] {
  --sign: -1;
}

/* Estado de entrada: anima até a posição final, com atraso escalonado do lote. */
html.anim-on [data-anim-state="in"] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity var(--anim-dur) var(--anim-ease),
    translate var(--anim-dur) var(--anim-ease),
    scale var(--anim-dur) var(--anim-ease),
    clip-path calc(var(--anim-dur) * 1.1) var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
}

/* Variantes */
html.anim-on [data-anim="fade"]  { --from-y: 0px; }
html.anim-on [data-anim="left"]  { --from-x: -56px; --from-y: 0px; }
html.anim-on [data-anim="right"] { --from-x: 56px; --from-y: 0px; }
html.anim-on [data-anim="card"]  { --from-y: calc(var(--anim-dist) * 1.3); --from-scale: 0.96; }
html.anim-on [data-anim="pop"]   { --from-y: 18px; --from-scale: 0.92; }
html.anim-on [data-anim="line"]  { --from-y: 0px; --from-scale: 0 1; }

/* Títulos: subida com máscara (o texto emerge de uma "fresta"). */
html.anim-on [data-anim="mask"] { --from-y: 0.45em; }
html.anim-on [data-anim="mask"][data-anim-state="below"] { clip-path: inset(100% -0.1em -0.3em -0.1em); }
html.anim-on [data-anim="mask"][data-anim-state="above"] { clip-path: inset(-0.3em -0.1em 100% -0.1em); }
html.anim-on [data-anim="mask"][data-anim-state="in"]    { clip-path: inset(-0.3em -0.1em -0.3em -0.1em); }

/* Botões: elevação suave no hover (os que já têm hover próprio ficam de fora). */
html.anim-on [data-anim="pop"][data-anim-state="done"]:not(.saas-btn-action):not(.mosaic-cta) {
  transition: translate 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium),
              background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
html.anim-on [data-anim="pop"][data-anim-state="done"]:not(.saas-btn-action):not(.mosaic-cta):hover {
  translate: 0 -3px;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.45);
}
html.anim-on [data-anim="pop"][data-anim-state="done"]:not(.saas-btn-action):not(.mosaic-cta):active {
  translate: 0 0;
  box-shadow: none;
}

/* Impressão: tudo visível. */
@media print {
  html.anim-on [data-anim-state] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Efeito Zoom Out Bidirecional para Pseudo-elementos & Imagens da Hero (2.5s).
   Escopado em html.anim-on: sem animação, a hero fica direto no estado final. */
html.anim-on .section-hero::before,
html.anim-on .hero-zoom-target {
  transform: scale(1.18);
  opacity: 0.85;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

html.anim-on .section-hero.hero-zoom-active::before {
  transform: scale(1) !important;
  opacity: 0.42 !important;
}

html.anim-on .hero-zoom-active .hero-zoom-target,
html.anim-on .hero-zoom-target.hero-zoom-active {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* Respeito a Movimento Reduzido (A11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}