/* ============================================================
   MAESTRIA — Camada de polimento premium sobre o design base
   Martinhago Advocacia — layer de detalhes de nível sênior
   ============================================================ */

/* ---------- 1. TOKENS DE MOTION E RITMO ---------- */
:root{
  --m-ease-out: cubic-bezier(.22,.61,.36,1);
  --m-ease-in-out: cubic-bezier(.77,0,.175,1);
  --m-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --m-dur-fast: .18s;
  --m-dur-med: .32s;
  --m-dur-slow: .6s;
  --m-gold: #b6a371;
  --m-gold-soft: #c9b48a;
  --m-gold-deep: #8f7f54;
  --m-ink: #0f0f10;
  --m-paper: #fbf0e4;
  --m-hairline: rgba(182,163,113,.28);
  --m-shadow-soft: 0 10px 30px -12px rgba(15,15,16,.18);
  --m-shadow-lift: 0 24px 50px -16px rgba(15,15,16,.28);
}

/* ---------- 2. TIPOGRAFIA DE LUXO (optical + kerning) ---------- */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 140px; /* compensa header fixo ao clicar âncora */
}

body{
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  font-optical-sizing: auto;
}

/* Ajuste fino dos cabeçalhos — balance + tracking perfeito */
:where(h1,h2,h3,h4){
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}

/* Parágrafos com pretty wrapping (evita órfãs) */
:where(p){
  text-wrap: pretty;
  hanging-punctuation: first last;
}

/* Ajuste do letter-spacing do H1 principal (já é -3.52 → refina em mobile) */
@media (max-width: 767px){
  :where(h1){ letter-spacing: -1.8px !important; }
  :where(h2){ letter-spacing: -0.8px !important; }
}

/* ---------- 3. SELEÇÃO DE TEXTO DOURADA ---------- */
::selection{
  background: var(--m-gold);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
::-moz-selection{
  background: var(--m-gold);
  color: #fff;
}

/* ---------- 4. FOCUS VISIBLE UNIFORME ---------- */
:where(a,button,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline: 2px solid var(--m-gold);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset .15s var(--m-ease-out);
}

/* Remove o focus ring feio padrão em mouse (já está via :focus-visible) */
:where(a,button):focus:not(:focus-visible){
  outline: none;
}

/* ---------- 5. SCROLLBAR REFINADO ---------- */
body::-webkit-scrollbar{
  width: 11px;
  background: #1d1d1d;
}
body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--m-gold-soft) 0%, var(--m-gold) 50%, var(--m-gold-deep) 100%);
  border-radius: 100px;
  border: 2px solid #1d1d1d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #d9c599 0%, var(--m-gold) 50%, var(--m-gold-deep) 100%);
}
html{
  scrollbar-color: var(--m-gold) #1d1d1d;
  scrollbar-width: thin;
}

/* ---------- 6. GRAIN OVERLAY (textura sutil de luxo) ---------- */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ---------- 7. TAP HIGHLIGHT MOBILE REFINADO ---------- */
*{
  -webkit-tap-highlight-color: rgba(182,163,113,.2);
}

/* ---------- 8. LINKS COM UNDERLINE ANIMADO (reveal middle-out) ---------- */
:where(.content a, article a, .post-content a, .artigo-body a):not(.btn):not([class*="btn"]):not(.nav-link){
  position: relative;
  color: inherit;
  background-image: linear-gradient(var(--m-gold), var(--m-gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .35s var(--m-ease-out), color .2s var(--m-ease-out);
}
:where(.content a, article a, .post-content a, .artigo-body a):not(.btn):not([class*="btn"]):not(.nav-link):hover{
  background-size: 100% 2px;
  color: var(--m-gold-deep);
}

/* ---------- 9. BOTÕES — MICRO-INTERAÇÕES PREMIUM ---------- */
:where(.btn-padrao, .btn, a.btn, button.btn){
  position: relative;
  overflow: hidden;
  transition: transform var(--m-dur-med) var(--m-ease-spring),
              box-shadow var(--m-dur-med) var(--m-ease-out),
              background-position var(--m-dur-slow) var(--m-ease-out);
  will-change: transform;
}
:where(.btn-padrao, .btn, a.btn, button.btn):hover{
  transform: translateY(-2px);
  box-shadow: var(--m-shadow-lift);
}
:where(.btn-padrao, .btn, a.btn, button.btn):active{
  transform: translateY(0);
  transition-duration: .08s;
}

/* Shine sweep ao hover em botões com BG sólido */
:where(.btn-padrao, a.btn, button.btn)::after{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.25) 50%,
    transparent 100%);
  transform: skewX(-22deg);
  transition: left .7s var(--m-ease-out);
  pointer-events: none;
}
:where(.btn-padrao, a.btn, button.btn):hover::after{
  left: 120%;
}

/* ---------- 10. CARDS / IMAGENS — HAIRLINE DOURADA + LIFT ---------- */
:where(.card, article.card, .box, [class*="-card"]){
  transition: transform var(--m-dur-med) var(--m-ease-out),
              box-shadow var(--m-dur-med) var(--m-ease-out),
              border-color var(--m-dur-med) var(--m-ease-out);
}

/* Imagens com decoding e loading otimizados via CSS helper */
:where(img){
  -webkit-user-drag: none;
  user-select: none;
}

/* Overlay gradiente sutil em imagens de hero/capa (realça legibilidade) */
:where(.hero img, .hero-image img, .slide img, [class*="hero"] img){
  image-rendering: -webkit-optimize-contrast;
}

/* ---------- 11. DIVISORES COM ACENTO DOURADO ---------- */
hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--m-hairline) 20%,
    var(--m-gold) 50%,
    var(--m-hairline) 80%,
    transparent 100%);
  margin: 2.4rem 0;
}

/* ---------- 12. FIGURE / BLOCKQUOTE REFINADOS ---------- */
blockquote{
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 2.5rem;
  border-left: 3px solid var(--m-gold);
  font-style: italic;
  color: #2a2a2a;
  background: linear-gradient(90deg,
    rgba(182,163,113,.06) 0%,
    rgba(182,163,113,0) 40%);
  margin: 1.5rem 0;
}
blockquote::before{
  content: "\201C";
  position: absolute;
  top: -8px; left: 10px;
  font-family: Georgia, serif;
  font-size: 3.4rem;
  color: var(--m-gold);
  opacity: .5;
  line-height: 1;
  pointer-events: none;
}

/* ---------- 13. WHATSAPP FLOATING — PULSE REFINADO ---------- */
:where([class*="whatsapp-float"], .wa-float, .wa-bubble){
  box-shadow: 0 8px 24px -6px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.6);
  animation: m-wa-pulse 2.6s var(--m-ease-out) infinite;
}
@keyframes m-wa-pulse{
  0%,100%{ box-shadow: 0 8px 24px -6px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.5);}
  50%{ box-shadow: 0 8px 24px -6px rgba(37,211,102,.5), 0 0 0 18px rgba(37,211,102,0);}
}

/* ---------- 14. RESPEITO A prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. IMAGENS SKELETON (shimmer durante lazy-load) ---------- */
img[loading="lazy"]:not([src]),
img[data-src]{
  background: linear-gradient(90deg,
    rgba(182,163,113,.08) 0%,
    rgba(182,163,113,.18) 50%,
    rgba(182,163,113,.08) 100%);
  background-size: 200% 100%;
  animation: m-shimmer 1.6s linear infinite;
}
@keyframes m-shimmer{
  0%{ background-position: 200% 0;}
  100%{ background-position: -200% 0;}
}

/* ---------- 16. SEÇÕES — RESPIRO VERTICAL CONSISTENTE ---------- */
@media (min-width: 992px){
  section{
    scroll-margin-top: 120px;
  }
}

/* ---------- 17. HERO SUBTEXT — SHIMMER AO HOVER ---------- */
.hero-subtext{
  position: relative;
  overflow: hidden;
  transition: border-color var(--m-dur-med) var(--m-ease-out),
              background var(--m-dur-med) var(--m-ease-out);
}
.hero-subtext::after{
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(182,163,113,.22) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left 1.2s var(--m-ease-out);
  pointer-events: none;
}
.hero-subtext:hover::after{
  left: 130%;
}

/* ---------- 18. FIRST-LETTER EM ARTIGOS DE BLOG ---------- */
.artigo-body > p:first-of-type::first-letter,
.post-content > p:first-of-type::first-letter,
article .content > p:first-of-type::first-letter{
  font-size: 3.2em;
  font-weight: 600;
  float: left;
  line-height: .85;
  padding: .1em .12em 0 0;
  color: var(--m-gold-deep);
  font-feature-settings: "ss01" 1;
}

/* ---------- 19. MENU DESKTOP — HOVER POLIMENTO ---------- */
:where(.mh-nav a, .menu a, nav a):not(.btn):not([class*="btn"]):not(.mh-cta){
  transition: color .2s var(--m-ease-out), letter-spacing .3s var(--m-ease-out);
}

/* ---------- 20. SEÇÃO DE CONTATO / FOOTER — HAIRLINE ---------- */
footer{
  position: relative;
}
footer::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(90%, 1100px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--m-hairline) 20%,
    var(--m-gold) 50%,
    var(--m-hairline) 80%,
    transparent 100%);
  pointer-events: none;
  opacity: .7;
}

/* ---------- 21. PRINT — VERSÃO LIMPA ---------- */
@media print{
  body::before{ display: none; }
  .mh-top, .mh-nav, footer .contact, .whatsapp-float{ display: none !important; }
  a::after{ content: " (" attr(href) ")"; font-size: .8em; color: #666; }
}

/* ---------- 22. UTILITÁRIO: REVEAL ON INTERSECTION ---------- */
[data-rv]:not(.is-in){
  opacity: 0;
  transform: translateY(18px);
}
[data-rv].is-in{
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--m-ease-out), transform .7s var(--m-ease-out);
}
[data-rv="left"]:not(.is-in){ transform: translateX(-22px); }
[data-rv="right"]:not(.is-in){ transform: translateX(22px); }
[data-rv="scale"]:not(.is-in){ transform: scale(.96); }

/* ---------- 23. CURSOR DE LUXO EM ELEMENTOS CLICÁVEIS ---------- */
:where(button, a, [role="button"], [class*="btn"], .card[data-href], [onclick]){
  cursor: pointer;
}

/* ---------- 24. DESTAQUE EM NÚMEROS / STATS ---------- */
:where(.stat-num, .num-destaque, [class*="contador"]){
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -.02em;
}