/* ============================================================
   SAUER & MUCCIOLO — DESIGN SYSTEM
   Rustic Luxury + Modern UI + Elegância Natural
   ============================================================ */

/* TOKENS DE DESIGN */
:root {
  /* Cores de superfície / backdrop */
  --bg-deep:     #241a12;   /* marrom profundo / madeira escura */
  --bg-ink:      #1a130c;   /* quase preto quente (nunca absoluto) */
  --bg-sand:     #e9e0d0;   /* areia clara para seções claras */
  --bg-cream:    #f6f1e8;   /* creme/off-white */
  --bg-panel:    #3b2d20;   /* painel translúcido */

  /* Tons terrosos */
  --wood:        #5a3f2b;   /* madeira */
  --caramel:     #8a6a45;   /* caramelo */
  --bronze:      #a98b5f;   /* dourado/bronze envelhecido — DESTAQUE */
  --bronze-bright:#c9ac77;  /* bronze claro hover */
  --olive:       #6b6b52;   /* verde oliva discreto */
  --sand:        #d8cbb2;   /* areia */

  /* Neutros quentes */
  --text-light:  #f4ede1;   /* texto claro sobre escuro */
  --text-invert: #241a12;   /* texto escuro sobre claro */

  /* Escala de cinza quente */
  --gray-100:    #f7f3ea;
  --gray-200:    #eae2d3;
  --gray-300:    #d9ceb8;
  --gray-400:    #b5a88f;
  --gray-500:    #8f8270;
  --gray-600:    #5f5546;
  --gray-700:    #4a4135;
  --gray-800:    #332c22;

  /* Tipografia */
  --font-title:  'Cormorant Garamond', serif;
  --font-body:   'Inter', system-ui, sans-serif;

  /* Radii */
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 36px;
  --r-full: 999px;
  --r-org: 30% 70% 68% 32% / 32% 40% 60% 68%; /* orgânico */

  /* Sombras (extremamente suaves) */
  --shadow-xs: 0 1px 3px rgba(36,26,18,.06);
  --shadow-sm: 0 6px 24px rgba(36,26,18,.10);
  --shadow-md: 0 18px 50px rgba(36,26,18,.14);
  --shadow-lg: 0 30px 80px rgba(20,14,8,.22);
  --shadow-glow: 0 12px 40px rgba(169,139,95,.18);

  /* Blur (glassmorphism) */
  --blur-sm: blur(8px) saturate(1.1);
  --blur-md: blur(18px) saturate(1.2);
  --blur-lg: blur(30px) saturate(1.25);

  /* Transições */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .25s var(--ease);
  --t-med: .45s var(--ease);
  --t-slow: .7s var(--ease);

  /* Espaçamento */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6rem;

  /* Container */
  --container: 1160px;
  --container-narrow: 820px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

::selection { background: var(--bronze); color: var(--bg-ink); }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-invert);
  background: var(--bg-cream);
  overflow-x: hidden;
}

img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

.container { width:min(var(--container), 90%); margin-inline:auto; }
.container-narrow { width:min(var(--container-narrow), 90%); margin-inline:auto; }

.accent { color: var(--bronze); }

h1,h2,h3 { font-family: var(--font-title); font-weight:600; line-height:1.15; letter-spacing:.2px; color:inherit; }
h1 { font-size:clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size:clamp(2rem, 4.5vw, 3rem); }
h3 { font-size:clamp(1.3rem, 2.4vw, 1.6rem); }

/* ============================================================
   BACKGROUND AMBIENTAL (grain + luz + textura natural)
   ============================================================ */
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  /* Imagem de ambiente de advocacia com transparência para reconhecimento visual */
  background:
    linear-gradient(180deg,
      rgba(246,241,232,.86) 0%,
      rgba(233,224,208,.78) 40%,
      rgba(224,213,193,.80) 100%),
    url('office-bg.jpg') center/cover no-repeat fixed;
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding: .9rem 0;
  transition: var(--t-med);
}
.navbar.scrolled {
  padding: .55rem 0;
  background: rgba(26,19,12,.72);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-sm);
  border-bottom:1px solid rgba(201,172,119,.10);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }

.brand { display:flex; align-items:center; gap:.6rem; }
.brand-logo { height:64px; width:auto; object-fit:contain; transition: var(--t-med); filter: drop-shadow(0 4px 16px rgba(0,0,0,.25)); }
.navbar.scrolled .brand-logo { height:52px; }

.nav-links { display:flex; align-items:center; gap:2.4rem; }
.nav-links a {
  position:relative;
  color: rgba(244,237,225,.82);
  font-size:.92rem;
  font-weight:400;
  letter-spacing:.4px;
  padding:.3rem 0;
  transition: color var(--t-fast);
}
.nav-links a::after {
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  height:1px; width:0;
  background: var(--bronze);
  transition: width var(--t-med) var(--ease);
}
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { width:100%; }

.nav-toggle {
  display:none;
  background:none; border:none;
  cursor:pointer;
  flex-direction:column; gap:5px;
  padding:6px;
  z-index:1001;
}
.nav-toggle span { width:26px; height:2px; background:var(--bronze-bright); border-radius:2px; transition:var(--t-med); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 8rem 1.5rem 5rem;
  background:
    radial-gradient(1300px 800px at 18% 12%, rgba(169,139,95,.16), transparent 60%),
    radial-gradient(1000px 700px at 85% 88%, rgba(107,107,82,.14), transparent 55%),
    linear-gradient(165deg, var(--bg-ink) 0%, var(--bg-deep) 55%, #2c2015 100%);
}
/* Camada de imagem de advocacia no hero (escurecida p/ legibilidade) */
.hero::before {
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(165deg, rgba(26,19,12,.82), rgba(36,26,18,.6) 60%, rgba(44,32,21,.78)),
    url('office-bg.jpg') center/cover no-repeat;
  background-blend-mode:multiply;
}
/* Marca d'água ao fundo */
.hero-watermark {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0;
}
.hero-watermark img {
  width:min(80vw, 720px);
  opacity:.10;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.4));
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 82%);
}
.hero-overlay { position:absolute; inset:0; z-index:1; }

/* Painel translúcido centralizado */
.hero-panel {
  position:relative; z-index:2;
  width:min(760px, 100%);
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(59,45,32,.55), rgba(36,26,18,.45));
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border:1px solid rgba(216,203,178,.14);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-panel-head { margin-bottom: 1.8rem; }
.hero-logo { height:92px; width:auto; margin:0 auto; object-fit:contain; opacity:.96; filter:drop-shadow(0 6px 20px rgba(0,0,0,.3)); }

.hero-title { color:var(--text-light); margin-bottom:1.3rem; }
.hero-title .accent { color:var(--bronze-bright); font-style:italic; }
.hero-sub {
  color: rgba(216,203,178,.82);
  font-size:clamp(1rem, 2vw, 1.15rem);
  font-weight:300;
  max-width:560px;
  margin:0 auto 2.6rem;
  line-height:1.8;
}
.hero-actions { display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 2.2rem;
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.6px;
  text-transform:uppercase;
  border:none; cursor:pointer;
  border-radius: var(--r-full);
  transition: all var(--t-med) var(--ease);
  overflow:hidden;
}
.btn::after { /* brilho de passagem */
  content:'';
  position:absolute; top:0; left:-130%;
  width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
}
.btn:hover::after { left:160%; }

.btn-gold {
  color:#221a0f; /* texto escuro sobre bronze */
  background: linear-gradient(160deg, var(--bronze-bright), var(--bronze));
  box-shadow: var(--shadow-glow);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(169,139,95,.30); }

.btn-ghost {
  color:var(--bronze-bright);
  background: rgba(169,139,95,.08);
  border:1px solid rgba(201,172,119,.35);
  box-shadow: inset 0 0 0 0 rgba(169,139,95,0);
}
.btn-ghost:hover { background: rgba(169,139,95,.16); border-color: rgba(201,172,119,.6); transform: translateY(-2px); }

.btn-block { width:100%; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(4rem, 10vw, 8rem) 0; position:relative; }
.section-dark { background: linear-gradient(170deg, var(--bg-deep), var(--bg-ink)); color:var(--text-light); }

.section-head { text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,6vw,4rem); }
.eyebrow {
  display:inline-block;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.1rem;
  position:relative;
}
.eyebrow::before, .eyebrow::after { /* linhas decorativas finas */
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:34px; height:1px;
  background: var(--bronze);
  opacity:.55;
  margin:0 .8rem;
}
.section-title { margin-bottom:.8rem; }
.section-title .accent { font-style:italic; }
.section-head p { color:var(--gray-500); font-size:1.02rem; }
.section-dark .section-head p { color: rgba(216,203,178,.72); }

/* ============================================================
   SOBRE
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about-text p { color:var(--gray-600); font-size:1.03rem; margin-bottom:1.2rem; }
.about-text p strong { color:var(--bronze); font-weight:600; }
.about-list { list-style:none; margin-top:1.6rem; display:flex; flex-direction:column; gap:.9rem; }
.about-list li {
  position:relative;
  padding-left:1.9rem;
  color:var(--gray-700);
  font-weight:400;
  font-size:1rem;
}
.about-list li::before {
  content:'';
  position:absolute; left:0; top:.45em;
  width:14px; height:1.5px;
  background:var(--bronze);
  box-shadow: 4px 3px 0 -1px var(--bronze); /* traço duplo fino */
}
.about-stats { display:flex; flex-direction:column; gap:1.2rem; }
.stat {
  position:relative;
  padding:1.6rem 1.8rem 1.6rem 1.9rem;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(244,237,225,.9), rgba(234,226,211,.7));
  box-shadow: var(--shadow-sm);
  border:1px solid rgba(216,203,178,.5);
  backdrop-filter: var(--blur-sm);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.stat:hover { transform:translateY(-3px); box-shadow: var(--shadow-md); }
.stat::before {
  content:'';
  position:absolute; left:-3px; top:22%;
  height:56%; width:4px;
  border-radius:4px;
  background:linear-gradient(180deg, var(--bronze-bright), var(--bronze));
}
.stat-num { display:block; font-family:var(--font-title); font-size:2.4rem; font-weight:700; color:var(--wood); line-height:1; }
.stat-label { color:var(--gray-500); font-size:.85rem; letter-spacing:.6px; text-transform:uppercase; margin-top:.4rem; display:block; }

/* ============================================================
   CARDS (Áreas de Atuação) — painéis translúcidos sobrepostos
   ============================================================ */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.6rem;
  padding-top:.8rem;
}
.card {
  position:relative;
  padding:2.2rem 2rem;
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border:1px solid rgba(201,172,119,.16);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  overflow:hidden;
}
.card::before { /* mancha de luz no canto */
  content:'';
  position:absolute; top:-40%; right:-30%;
  width:70%; height:120%;
  background: radial-gradient(circle, rgba(169,139,95,.14), transparent 70%);
  opacity:0;
  transition: opacity var(--t-med) var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: var(--shadow-md);
}
.card:hover::before { opacity:1; }
.card-icon {
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.4rem;
  border-radius: var(--r-org);
  background: linear-gradient(160deg, rgba(169,139,95,.2), rgba(169,139,95,.06));
  border:1px solid rgba(201,172,119,.25);
  transition: transform var(--t-med) var(--ease);
}
.card:hover .card-icon { transform: translateY(-2px) scale(1.04); }
.card h3 { color:var(--bronze-bright); margin-bottom:.7rem; font-weight:600; }
.card p { color: rgba(216,203,178,.72); font-weight:300; font-size:.96rem; line-height:1.7; }

/* ============================================================
   EQUIPE
   ============================================================ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.6rem; }
.team-member {
  text-align:center;
  padding:2.6rem 1.8rem 2.2rem;
  border-radius: var(--r-md);
  background: var(--gray-100);
  box-shadow: var(--shadow-sm);
  border:1px solid var(--gray-200);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.team-member:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.team-avatar {
  width:96px; height:96px;
  margin:0 auto 1.4rem;
  border-radius: var(--r-org);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title);
  font-size:1.7rem; font-weight:700;
  color:var(--bronze-bright);
  background: linear-gradient(160deg, var(--bg-deep), var(--bg-ink));
  border:1px solid rgba(169,139,95,.3);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05);
}
.team-member h3 { color:var(--wood); margin-bottom:.25rem; }
.team-role { color:var(--bronze); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:500; }
.team-member p { color:var(--gray-500); font-size:.95rem; margin-top:.8rem; }

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position:relative;
  padding: clamp(4rem,9vw,6.5rem) 0;
  overflow:hidden;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(26,19,12,.15), transparent 60%),
    radial-gradient(700px 400px at 80% 80%, rgba(26,19,12,.12), transparent 60%),
    linear-gradient(160deg, var(--bronze-bright), var(--bronze));
  text-align:center;
}
.cta-inner { max-width:660px; margin:0 auto; }
.cta h2 { color:#221a0f; margin-bottom:.9rem; }
.cta p { color: rgba(34,26,15,.75); margin-bottom:2rem; font-size:1.05rem; }
.cta .btn { background:var(--bg-ink); color:var(--bronze-bright); box-shadow: var(--shadow-md); }
.cta .btn:hover { transform:translateY(-2px); background:#2c2116; }

/* ============================================================
   CONTATO
   ============================================================ */
#contato { background: transparent; }
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-info {
  padding:2.4rem 2.6rem;
  border-radius: var(--r-md);
  background: var(--gray-100);
  border:1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.contact-info p { margin-bottom:1.6rem; color:var(--gray-600); font-size:.98rem; }
.contact-info p:last-child { margin-bottom:0; }
.contact-info strong {
  display:block;
  color:var(--wood);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:.3rem;
}
.contact-form {
  display:flex; flex-direction:column; gap:1.1rem;
  padding:2.6rem;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(244,237,225,.4));
  backdrop-filter: var(--blur-sm);
  border:1px solid rgba(216,203,178,.4);
  box-shadow: var(--shadow-md);
}
.contact-form input, .contact-form textarea {
  width:100%;
  padding:.95rem 1.2rem;
  font-family:var(--font-body);
  font-size:.98rem;
  font-weight:300;
  color:var(--gray-700);
  background: rgba(255,255,255,.6);
  border:1px solid var(--gray-300);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--gray-400); }
.contact-form input:focus, .contact-form textarea:focus {
  outline:none;
  background:#fff;
  border-color:var(--bronze);
  box-shadow: 0 0 0 4px rgba(169,139,95,.14);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding:3.5rem 0 2.5rem;
  text-align:center;
  background: linear-gradient(165deg, var(--bg-ink), var(--bg-deep));
  border-top:1px solid rgba(201,172,119,.12);
}
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.footer-logo { height:72px; width:auto; object-fit:contain; margin-bottom:.6rem; opacity:.95; filter:drop-shadow(0 4px 16px rgba(0,0,0,.3)); }
.footer p { color: rgba(216,203,178,.55); font-size:.82rem; font-weight:300; }
.footer .footer-copy { color: rgba(216,203,178,.75); }

/* ============================================================
   MICROINTERAÇÕES — surgimento suave (respecta prefers-reduced-motion)
   ============================================================ */
.fade-in { opacity:0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade-in.visible { opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
  html { scroll-behavior:auto; }
  .fade-in { opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width: 900px) {
  .about-grid, .contact-grid { grid-template-columns:1fr; }
  .contact-form { padding:2rem 1.6rem; }
}

@media (max-width: 768px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(78vw, 320px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.6rem;
    padding:5rem 2.5rem;
    background: rgba(26,19,12,.92);
    backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-lg);
    transform: translateX(110%);
    transition: transform var(--t-med) var(--ease);
    border-left:1px solid rgba(201,172,119,.15);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size:1.15rem; color:var(--text-light); }
  .nav-links a::after { width:0; }

  .hero-panel { width:100%; border-radius: var(--r-md); }
  .hero-actions .btn { width:100%; text-align:center; }
  .section { padding:clamp(3.2rem,8vw,5rem) 0; }
}

@media (max-width: 480px) {
  .card, .team-member, .contact-info { padding:1.8rem 1.4rem; }
  .hero-panel { padding:2.2rem 1.3rem; }
  .eyebrow::before, .eyebrow::after { width:20px; margin:0 .5rem; }
}