/* ==========================================================================
   RESET & ESTILOS GLOBAIS - PRIETO & THEODORO ADVOGADOS ASSOCIADOS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=Inter:wght@400;500;600;700;800&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: 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;
}

::-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);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 700;
  color: var(--brand-navy);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.025em;
}

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

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;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.metal-divider {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 151, 46, 0.35) 50%, transparent 100%);
  border: none;
  margin: 0;
  overflow: visible;
}

/* Textura de grão sutil para tirar a chapadura das seções escuras/sólidas */
.bg-grain {
  position: relative;
  isolation: isolate;
}

.bg-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.bg-grain > * { position: relative; z-index: 1; }

.metal-divider-glow {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 9px;
  background: radial-gradient(ellipse at center, rgba(201, 151, 46, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA BIDIRECIONAIS (ver main.js)
   ========================================================================== */
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;
  }
}

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;
}

html.anim-on [data-anim-state="above"] {
  --sign: -1;
}

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);
}

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; }

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); }

html.anim-on [data-anim="pop"][data-anim-state="done"]: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(.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(.mosaic-cta):active {
  translate: 0 0;
  box-shadow: none;
}

@media print {
  html.anim-on [data-anim-state] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

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;
}

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