/* ==========================================================================
   André Mansur Advogados & Associados
   Sistema visual derivado da referência Frame.io (DESIGN.md / tokens.json),
   com a paleta da marca no lugar da paleta original:
     Iris Glow  -> Dourado #C8962E   (acento cromático único)
     Twilight   -> Navy dessaturado  (bordas e halos)
     Obsidian   -> #0B0F14           (cosmic canvas da marca)
   Regras herdadas: pílulas de 100px, display em peso 400 com tracking
   negativo, eyebrow monoespaçada, colunas tipográficas sem card, fundo
   sempre em gradiente, zero ornamento decorativo, zero sombra em botões.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Superfícies (níveis 0–3 da referência) */
  --canvas:     #0B0F14;   /* nível 0 — cosmic canvas */
  --veil:       #06090D;   /* nível 1 — nav veil */
  --surface:    #0E141C;   /* nível 2 — product surface */
  --halo:       #16202E;   /* nível 3 — card halo */

  /* Cor */
  --navy:       #1B2A4A;
  --gold:       #C8962E;   /* acento único */
  --gold-lt:    #D4AF37;
  --white:      #F8F9FA;   /* carbon vellum */
  --ash:        #A0A9B6;   /* terciário — descrições */
  --smoke:      #767F8C;   /* secundário — metadados */
  --charcoal:   #1E2530;   /* hairline */
  --twilight:   #34405A;   /* borda de contêiner de produto */
  --wa:         #22C55E;
  --alert:      #EF4444;

  /* Tipografia */
  --font:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 38px;
  --text-heading-lg: 48px;
  --text-display: 80px;

  /* Espaço */
  --space-8:8px; --space-16:16px; --space-24:24px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-56:56px; --space-80:80px;
  --space-96:96px; --space-144:144px; --space-160:160px; --space-176:176px;

  /* Layout */
  --page-max-width: 1280px;
  --gutter: 32px;
  --section-y: clamp(72px, 9vw, 144px);
  --card-padding: 24px;

  /* Raios nomeados */
  --radius-nav: 100px;
  --radius-cards: 10px;
  --radius-pills: 100px;
  --radius-buttons: 100px;
  --radius-feature: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --halo-glow: inset 0 0 0 1px rgba(52,64,90,.9), 0 0 60px rgba(27,42,74,.35);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px; }
body{
  margin:0;
  color:var(--white);
  font-family:var(--font);
  font-size:var(--text-body);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.16px;
  font-feature-settings:"ss01" on,"cv11" on;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* atmosfera: nunca um preto chapado */
  background-color:var(--canvas);
  background-image:
    radial-gradient(120% 80% at 82% -8%, rgba(27,42,74,.55) 0%, transparent 58%),
    radial-gradient(90% 60% at 6% 4%, rgba(200,150,46,.07) 0%, transparent 52%),
    linear-gradient(195deg, #0C121A 0%, #070B10 46%, #0A1220 100%);
  background-attachment:fixed;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--gold); color:var(--canvas); font-weight:500; font-size:14px;
  padding:11px 22px; border-radius:var(--radius-pills);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* --- 3. Tipografia -------------------------------------------------------
   Regra da referência: o peso sussurra, o tamanho fala.
   Display sempre 400; o tracking encolhe conforme o corpo cresce.          */
h1,h2,h3,h4{ margin:0; font-family:var(--font); color:var(--white); }
h1{ font-size:clamp(42px, 6.4vw, var(--text-display)); font-weight:400; line-height:.98; letter-spacing:-.045em; }
h2{ font-size:clamp(30px, 3.6vw, var(--text-heading-lg)); font-weight:400; line-height:1.02; letter-spacing:-.04em; }
h3{ font-size:var(--text-subheading); font-weight:500; line-height:1.3; letter-spacing:-.01em; }
h4{ font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-.01em; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:500; color:var(--white); }

/* Eyebrow: carimbo mecânico. Só identifica seção — nunca outro uso. */
.eyebrow{
  font-family:var(--mono); font-size:var(--text-caption); font-weight:400;
  line-height:.9; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.eyebrow--center{ text-align:center; }

.lede{
  font-size:var(--text-subheading); line-height:1.3; color:var(--smoke);
  font-weight:400; max-width:560px; letter-spacing:0;
}
.muted{ color:var(--ash); }
.gold{ color:var(--gold); }
.domain{ color:var(--gold); font-weight:500; letter-spacing:.02em; }

/* --- 4. Layout ----------------------------------------------------------- */
.container{ width:100%; max-width:var(--page-max-width); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(56px,6vw,var(--space-96)); }

/* Bandas: a luz muda de canto, o quarto é o mesmo. */
.section--navy{
  background-image:radial-gradient(90% 120% at 8% 0%, rgba(27,42,74,.5) 0%, transparent 62%);
}
.section--abyss{
  background-image:radial-gradient(80% 110% at 92% 100%, rgba(27,42,74,.42) 0%, transparent 60%),
                   linear-gradient(180deg, transparent 0%, rgba(4,6,10,.7) 100%);
}

.section__head{ max-width:720px; margin-bottom:var(--space-56); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center h2{ max-width:22ch; margin-inline:auto; }
.section__head--center .lede{ margin-inline:auto; }
.section__head h2 + .lede,
h2 + .lede{ margin-top:var(--space-16); }

.grid{ display:grid; gap:var(--space-48) var(--space-24); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* --- 5. Botões — pílula de 100px, sem sombra ----------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  white-space:nowrap; padding:14px 28px; border-radius:var(--radius-buttons);
  border:1px solid transparent; font-size:var(--text-body-sm); font-weight:500;
  letter-spacing:0; cursor:pointer; box-shadow:none;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), opacity .3s var(--ease);
}
.btn svg{ display:block; width:16px; height:16px; flex:none; }
.btn--gold{ background:var(--gold); color:#100C03; border-color:var(--gold); font-weight:500; }
.btn--gold:hover{ background:var(--gold-lt); border-color:var(--gold-lt); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(248,249,250,.34); font-weight:400; }
.btn--ghost:hover{ background:var(--white); color:var(--canvas); border-color:var(--white); }
.btn--wa{ background:var(--wa); color:#04230F; border-color:var(--wa); }
.btn--wa:hover{ opacity:.86; }
.btn--alert{ background:transparent; color:#FFB4B4; border-color:rgba(239,68,68,.5); }
.btn--alert:hover{ background:var(--alert); color:#2A0808; border-color:var(--alert); }
.btn--sm{ padding:11px 20px; font-size:var(--text-body-sm); }
.btn--block{ width:100%; }
.btn--icon{ padding:0; width:42px; height:42px; flex:none; }

/* Link de continuidade: sublinhado que nasce no hover */
.link-more{
  display:inline-flex; align-items:center; gap:8px; position:relative;
  font-size:var(--text-body-sm); font-weight:500; color:var(--gold);
  letter-spacing:0; padding-bottom:2px;
}
.link-more::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.link-more svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.link-more:hover::after{ transform:scaleX(1); }
.link-more:hover svg{ transform:translateX(4px); }

/* --- 6. Barra superior --------------------------------------------------- */
.topbar{
  background:var(--veil); border-bottom:1px solid var(--charcoal);
  font-size:13px; color:var(--ash); position:relative; z-index:60; letter-spacing:0;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; }
.topbar__left{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.topbar a:hover{ color:var(--white); }
.topbar__item{ display:inline-flex; align-items:center; gap:8px; }
.topbar__item svg{ display:block; width:14px; height:14px; color:var(--gold); flex:none; }
.socials{ display:flex; align-items:center; gap:4px; }
.socials a{
  width:30px; height:30px; display:grid; place-items:center; border-radius:var(--radius-pills);
  color:var(--ash); transition:color .25s var(--ease), background-color .25s var(--ease);
}
.socials a:hover{ color:var(--gold); background:rgba(200,150,46,.1); }
.socials svg{ display:block; width:15px; height:15px; }

/* --- 7. Header — barra slim com navegação em pílula --------------------- */
.header{
  position:sticky; top:0; z-index:70;
  background:rgba(6,9,13,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
          backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.header.is-scrolled{ background:rgba(4,6,10,.92); border-bottom-color:var(--charcoal); }
.header .container{ display:flex; align-items:center; gap:var(--space-24); min-height:72px; }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; }
.brand__mark{
  width:38px; height:38px; flex:none; border:1px solid rgba(200,150,46,.55);
  border-radius:var(--radius-pills); display:grid; place-items:center;
  font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--gold);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.brand:hover .brand__mark{ border-color:var(--gold); background:rgba(200,150,46,.1); }
.brand__name{ font-size:15px; font-weight:500; line-height:1.15; letter-spacing:-.01em; white-space:nowrap; }
.brand__sub{
  display:block; font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; color:var(--smoke); margin-top:4px;
}

/* A pílula é a geometria mais repetida da marca */
.nav{
  display:flex; align-items:center; gap:2px;
  background:rgba(10,14,20,.6); border:1px solid var(--charcoal);
  border-radius:var(--radius-nav); padding:4px;
}
.nav a{
  position:relative; padding:8px 12px; border-radius:var(--radius-nav);
  font-size:13.5px; font-weight:400; color:var(--ash);
  white-space:nowrap; letter-spacing:0;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav a:hover{ color:var(--white); }
.nav a[aria-current="page"]{ color:var(--white); background:rgba(200,150,46,.12); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:2px; width:3px; height:3px;
  margin-left:-1.5px; border-radius:50%; background:var(--gold);
}

.header__cta{ display:flex; align-items:center; gap:10px; flex:none; }
.header__cta-icon{ display:none; }

.burger{
  display:none; flex:none; width:42px; height:42px; background:transparent;
  border:1px solid var(--charcoal); border-radius:var(--radius-pills);
  cursor:pointer; padding:0; place-items:center;
}
.burger span{ display:block; width:17px; height:1px; background:var(--white); position:relative; transition:background-color .2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1px; background:var(--white);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:-5px; }
.burger span::after{ top:5px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(360px,88vw); z-index:90;
  background:var(--veil); border-left:1px solid var(--charcoal);
  transform:translateX(100%); transition:transform .42s var(--ease);
  padding:22px var(--space-24) var(--space-40); overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
}
.drawer.is-open{ transform:translateX(0); }
.drawer a{
  padding:14px 12px; border-radius:var(--radius-cards); font-size:16px;
  color:var(--ash); transition:color .2s var(--ease), background-color .2s var(--ease);
}
.drawer a:hover{ color:var(--white); background:rgba(255,255,255,.04); }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-16); }
.drawer__close{
  background:none; border:1px solid var(--charcoal); border-radius:var(--radius-pills);
  width:38px; height:38px; font-size:20px; line-height:1; cursor:pointer; color:var(--ash);
}
.drawer__foot{ margin-top:var(--space-24); display:grid; gap:10px; }
.scrim{
  position:fixed; inset:0; background:rgba(3,5,8,.72); z-index:85;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.scrim.is-open{ opacity:1; visibility:visible; }

/* --- 8. Hero — composição dividida, produto flutuando ------------------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(64px,8vw,120px) clamp(96px,11vw,var(--space-160)); }
.hero::before{
  content:""; position:absolute; left:50%; bottom:-30%; width:min(1100px,120%); height:70%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(27,42,74,.55), transparent 72%);
}
.hero__grid{ display:grid; grid-template-columns:1fr .92fr; gap:clamp(40px,5vw,var(--space-80)); align-items:center; position:relative; z-index:2; }
.hero h1{ margin-bottom:var(--space-24); max-width:14ch; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__sub{ font-size:var(--text-subheading); line-height:1.3; color:var(--smoke); max-width:560px; margin-bottom:var(--space-40); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:var(--space-40); }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 24px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--smoke); }
.hero__meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero__meta span::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gold); }

/* Contêiner no papel do "product mockup": halo fino, nada mais */
.hero__card{
  background:var(--surface); border-radius:var(--radius-cards);
  box-shadow:var(--halo-glow); padding:var(--space-32) var(--space-24);
  position:relative;
}
.hero__card h2{ font-size:var(--text-heading-sm); letter-spacing:-.03em; margin-bottom:6px; }
.plantao{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#FFB4B4;
  border:1px solid rgba(239,68,68,.36); padding:7px 14px;
  border-radius:var(--radius-pills); margin-bottom:var(--space-24);
}
.plantao .dot{ width:6px; height:6px; border-radius:50%; background:var(--alert); animation:blink 2s infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.2} }

.hero__stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--charcoal); margin:var(--space-24) 0; border-radius:var(--radius-cards); overflow:hidden; }
.hero__stats div{ background:var(--halo); padding:16px 18px; }
.hero__stats dt{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--smoke); margin-bottom:7px; }
.hero__stats dd{ margin:0; font-size:22px; font-weight:400; letter-spacing:-.03em; color:var(--white); font-variant-numeric:tabular-nums; }

/* --- 9. Canais ----------------------------------------------------------- */
.channels{ margin-top:clamp(-88px,-7vw,-64px); position:relative; z-index:5; }
.channel{
  display:block; text-align:left; width:100%; cursor:pointer;
  background:var(--surface); border:1px solid var(--charcoal);
  border-radius:var(--radius-cards); padding:var(--card-padding);
  transition:border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.channel:hover{ border-color:var(--twilight); background:var(--halo); transform:translateY(-3px); }
.channel__icon{ display:block; width:24px; height:24px; color:var(--gold); margin-bottom:var(--space-16); }
.channel h3{ margin-bottom:6px; }
.channel p{ font-size:var(--text-body-sm); line-height:1.5; color:var(--ash); margin:0; letter-spacing:0; }
.channel--wa .channel__icon{ color:var(--wa); }
.channel--alert .channel__icon{ color:var(--alert); }

/* --- 10. Autoridade ------------------------------------------------------ */
.authority__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,var(--space-80)); align-items:center; }
.portrait{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius-feature);
  background:linear-gradient(165deg, rgba(27,42,74,.55), rgba(11,15,20,.9));
  box-shadow:var(--halo-glow); display:grid; place-items:center; text-align:center;
  padding:var(--space-32); overflow:hidden;
}
.portrait img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.portrait__slot{ position:relative; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); line-height:1.7; }
.monogram{
  width:48px; height:48px; border:1px solid rgba(200,150,46,.4); border-radius:var(--radius-pills);
  display:grid; place-items:center; font-size:13px; font-weight:500; letter-spacing:.05em; color:var(--gold);
}
.portrait__slot .monogram{ margin:0 auto var(--space-16); }
.portrait__badge{
  position:absolute; left:var(--space-24); bottom:var(--space-24); z-index:3;
  background:rgba(6,9,13,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(200,150,46,.4); color:var(--gold);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--radius-pills);
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--space-24) 0 var(--space-32); }
.tag{
  font-size:13px; color:var(--ash); border:1px solid var(--charcoal);
  padding:7px 16px; border-radius:var(--radius-pills); letter-spacing:0;
}
.signature{ font-size:var(--text-heading-sm); font-weight:400; line-height:1.25; letter-spacing:-.03em; color:var(--white); max-width:28ch; }

/* --- 11. Contadores ------------------------------------------------------ */
.counters{ border-block:1px solid var(--charcoal); background-image:radial-gradient(70% 180% at 50% 50%, rgba(27,42,74,.4), transparent 70%); }
.counters .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-24); padding-block:var(--space-56); }
.counter{ text-align:left; border-left:1px solid var(--charcoal); padding-left:var(--space-24); }
.counter__num{
  display:block; white-space:nowrap; font-size:clamp(30px,3.4vw,var(--text-heading-lg)); font-weight:400;
  line-height:1.02; letter-spacing:-.04em; color:var(--white); font-variant-numeric:tabular-nums;
}
.counter__label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); margin-top:12px; }

/* --- 12. Coluna de conteúdo (não é card: é bloco tipográfico) ----------- */
.card{
  display:flex; flex-direction:column; gap:10px; position:relative;
  background:transparent; border:0; padding:0;
  transition:transform .35s var(--ease);
}
.card__icon{ display:block; width:24px; height:24px; color:var(--gold); margin-bottom:6px; }
.card h3{ letter-spacing:-.01em; transition:color .25s var(--ease); }
.card p{ font-size:var(--text-body-sm); line-height:1.5; color:var(--ash); margin:0; flex:1; letter-spacing:0; }
.card .link-more{ margin-top:6px; align-self:flex-start; }
a.card:hover h3{ color:var(--gold-lt); }
a.card:hover .link-more::after{ transform:scaleX(1); }
a.card:hover .link-more svg{ transform:translateX(4px); }

/* Onde a superfície é necessária (barra lateral, blocos de apoio) */
.card--flat{
  background:var(--surface); border:1px solid var(--charcoal);
  border-radius:var(--radius-cards); padding:var(--card-padding); gap:14px;
}
.card--flat:hover{ transform:none; }

/* --- 13. Abas e perfis --------------------------------------------------- */
.tabs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:var(--space-48); }
.tab{
  background:transparent; border:1px solid var(--charcoal); color:var(--ash);
  padding:9px 20px; border-radius:var(--radius-pills); cursor:pointer;
  font-size:var(--text-body-sm); font-weight:400; letter-spacing:0;
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.tab:hover{ color:var(--white); border-color:var(--twilight); }
.tab[aria-selected="true"]{ background:var(--white); border-color:var(--white); color:var(--canvas); font-weight:500; }

.profile{
  display:flex; gap:14px; align-items:flex-start; padding:var(--space-24) 0;
  border-top:1px solid var(--charcoal);
  transition:border-color .3s var(--ease);
}
.profile:hover{ border-top-color:var(--twilight); }
.profile:hover h3{ color:var(--gold-lt); }
.profile__icon{ display:block; width:22px; height:22px; color:var(--gold); flex:none; margin-top:3px; }
.profile h3{ margin-bottom:4px; transition:color .25s var(--ease); }
.profile p{ font-size:13px; line-height:1.5; color:var(--smoke); margin:0; letter-spacing:0; }

/* --- 14. Depoimentos ----------------------------------------------------- */
.quote{
  background:var(--surface); border:1px solid var(--charcoal);
  border-radius:var(--radius-cards); padding:var(--space-32) var(--card-padding) var(--card-padding);
  position:relative;
}
.quote__body{ font-size:15px; line-height:1.5; color:var(--ash); letter-spacing:0; }
.quote__meta{ margin-top:var(--space-24); padding-top:var(--space-16); border-top:1px solid var(--charcoal); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--smoke); }
.quote__meta strong{ display:block; color:var(--gold); font-weight:400; margin-bottom:4px; }
.notice{
  border-left:1px solid var(--gold); padding:var(--space-16) var(--space-24);
  font-size:var(--text-body-sm); line-height:1.5; color:var(--ash);
  margin-top:var(--space-32); letter-spacing:0;
}

/* --- 15. Destaques ------------------------------------------------------- */
.highlight{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--charcoal);
  border-radius:var(--radius-feature); padding:var(--space-32);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.highlight:hover{ border-color:var(--twilight); background:var(--halo); }
.badge{
  align-self:flex-start; font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(200,150,46,.3); padding:6px 14px; border-radius:var(--radius-pills);
}
.highlight h3{ font-size:var(--text-heading-sm); font-weight:400; letter-spacing:-.03em; }
.highlight p{ font-size:var(--text-body-sm); line-height:1.5; color:var(--ash); flex:1; margin:0; letter-spacing:0; }
.highlight .link-more{ align-self:flex-start; }

/* --- 16. Publicações ----------------------------------------------------- */
.post{ display:flex; flex-direction:column; gap:var(--space-16); }
.post__thumb{
  aspect-ratio:16/10; border-radius:var(--radius-cards); overflow:hidden;
  background:linear-gradient(150deg, rgba(27,42,74,.6), rgba(8,11,16,.95));
  box-shadow:var(--halo-glow); display:grid; place-items:center;
  transition:transform .5s var(--ease);
}
.post:hover .post__thumb{ transform:scale(1.015); }
.post__thumb .monogram{ width:40px; height:40px; font-size:11px; opacity:.6; }
.post__body{ display:flex; flex-direction:column; gap:8px; flex:1; }
.post__meta{ display:flex; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--smoke); }
.post__meta .cat{ color:var(--gold); }
.post h3{ font-size:var(--text-heading-sm); font-weight:400; letter-spacing:-.03em; transition:color .25s var(--ease); }
.post:hover h3{ color:var(--gold-lt); }
.post p{ font-size:var(--text-body-sm); line-height:1.5; color:var(--ash); margin:0; flex:1; letter-spacing:0; }

/* --- 17. FAQ ------------------------------------------------------------- */
.faq{ max-width:860px; margin-inline:auto; border-top:1px solid var(--charcoal); }
.faq__item{ border-bottom:1px solid var(--charcoal); }
.faq__q{
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-24);
  padding:var(--space-24) 0; font-size:var(--text-subheading); font-weight:400;
  letter-spacing:-.01em; color:var(--white); transition:color .25s var(--ease);
}
.faq__q:hover{ color:var(--gold-lt); }
.faq__q svg{ display:block; width:18px; height:18px; flex:none; color:var(--gold); transition:transform .4s var(--ease); }
.faq__q[aria-expanded="true"] svg{ transform:rotate(180deg); }
.faq__a{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.faq__a > div{ padding:0 0 var(--space-24); color:var(--ash); font-size:var(--text-body-sm); line-height:1.6; max-width:70ch; }

/* --- 18. CTA final ------------------------------------------------------- */
.cta{ text-align:center; border-top:1px solid var(--charcoal); background-image:radial-gradient(60% 140% at 50% 100%, rgba(27,42,74,.5), transparent 68%); }
.cta h2{ max-width:18ch; margin:0 auto var(--space-24); }
.cta .lede{ margin-inline:auto; text-align:center; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:var(--space-40) 0 var(--space-32); }
.cta .seal{ display:flex; justify-content:center; margin-bottom:var(--space-32); }

/* --- 19. Rodapé ---------------------------------------------------------- */
.footer{ background:var(--veil); border-top:1px solid var(--charcoal); padding-top:var(--space-80); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--space-48) var(--space-32); }
.footer h4{
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:var(--space-24);
}
.footer li{ margin-bottom:12px; }
.footer a{ font-size:var(--text-body-sm); color:var(--ash); transition:color .2s var(--ease); }
.footer a:hover{ color:var(--white); }
.footer__about{ font-size:var(--text-body-sm); line-height:1.5; color:var(--smoke); margin:var(--space-24) 0; max-width:36ch; letter-spacing:0; }
.footer__oab{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--gold); border:1px solid rgba(200,150,46,.3); display:inline-block; padding:7px 14px; border-radius:var(--radius-pills); }
.footer__contact li{ display:flex; gap:12px; font-size:var(--text-body-sm); color:var(--ash); align-items:flex-start; line-height:1.5; }
.footer__contact svg{ display:block; width:15px; height:15px; color:var(--gold); flex:none; margin-top:4px; }
.footer__bar{
  margin-top:var(--space-56); border-top:1px solid var(--charcoal); padding-block:var(--space-24);
  display:flex; flex-wrap:wrap; gap:12px var(--space-24); justify-content:space-between;
  align-items:center; font-size:13px; color:var(--smoke);
}

/* Mapa do site */
.site-map__list li{ margin-bottom:10px; }
.site-map__list a{ font-size:var(--text-body-sm); color:var(--ash); }
.site-map__list a:hover{ color:var(--gold-lt); }

/* --- 20. WhatsApp flutuante --------------------------------------------- */
.wa{ position:fixed; right:24px; bottom:24px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.wa__toggle{
  position:relative; width:54px; height:54px; border-radius:var(--radius-pills); border:none;
  cursor:pointer; background:var(--wa); color:#04230F; display:grid; place-items:center;
}
.wa__toggle svg{ display:block; width:26px; height:26px; }
.wa__toggle::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius-pills);
  border:1px solid var(--wa); animation:pulse 2.8s infinite; pointer-events:none;
}
@keyframes pulse{ 0%{transform:scale(1);opacity:.6} 70%{transform:scale(1.45);opacity:0} 100%{opacity:0} }
.wa__menu{
  background:var(--surface); border:1px solid var(--charcoal); border-radius:var(--radius-cards);
  width:268px; padding:8px; box-shadow:0 24px 48px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.96); transform-origin:bottom right;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.wa__menu.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.wa__menu p{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--smoke); padding:10px 12px 8px; margin:0; }
.wa__menu a{ display:block; padding:11px 12px; font-size:var(--text-body-sm); color:var(--ash); border-radius:6px; transition:background-color .2s, color .2s; }
.wa__menu a:hover{ background:rgba(34,197,94,.1); color:var(--wa); }

/* --- 21. Cabeçalho de página interna ------------------------------------ */
.page-head{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,6vw,var(--space-80)) clamp(24px,3vw,var(--space-40));
  background-image:radial-gradient(80% 140% at 88% 0%, rgba(27,42,74,.5), transparent 62%);
}
.crumbs{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--smoke); margin-bottom:var(--space-24); }
.crumbs a:hover{ color:var(--white); }
.crumbs span{ color:#3D4553; margin-inline:8px; }
.page-head h1{ max-width:20ch; font-size:clamp(30px,4vw,42px); letter-spacing:-.035em; line-height:1.06; }
.page-head .lede{ margin-top:var(--space-24); }

/* Conteúdo colado ao cabeçalho da página: o resumo é a própria abertura */
.page-head + .section{ padding-top:clamp(40px,5vw,var(--space-56)); }

/* --- 22. Conteúdo editorial ---------------------------------------------- */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(40px,5vw,var(--space-80)); align-items:start; }
.prose{ max-width:640px; }
.prose h2{ margin:var(--space-56) 0 var(--space-16); font-size:var(--text-heading-sm); font-weight:500; letter-spacing:-.02em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin:var(--space-40) 0 12px; }
.prose p,.prose li{ color:var(--ash); font-size:var(--text-body); line-height:1.6; letter-spacing:0; }
.prose ul{ margin:0 0 var(--space-24); }
.prose ul li{ position:relative; padding-left:22px; margin-bottom:10px; }
.prose ul li::before{ content:""; position:absolute; left:0; top:12px; width:8px; height:1px; background:var(--gold); }
.prose blockquote{
  margin:var(--space-32) 0; padding:0 0 0 var(--space-24); border-left:1px solid var(--gold);
  font-size:var(--text-heading-sm); font-weight:400; line-height:1.25; letter-spacing:-.03em; color:var(--white);
}
.prose a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--gold-lt); }
.prose em{ font-style:normal; color:var(--smoke); }

.sidebar{ position:sticky; top:104px; display:grid; gap:var(--space-16); }
.sidebar h4{ font-size:var(--text-body); font-weight:500; letter-spacing:-.01em; }
.sidebar .card--flat p{ font-size:var(--text-body-sm); color:var(--ash); line-height:1.5; }
.sidebar ul li{ margin-bottom:11px; }
.sidebar ul li:last-child{ margin-bottom:0; }
.sidebar ul a{ font-size:var(--text-body-sm); color:var(--ash); display:block; transition:color .2s var(--ease); }
.sidebar ul a:hover{ color:var(--gold-lt); }

.subservices{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--space-32); }
.subservices li{
  padding:var(--space-24) 0; border-top:1px solid var(--charcoal);
  font-size:var(--text-body-sm); line-height:1.5; color:var(--ash);
  display:flex; gap:14px; align-items:flex-start; letter-spacing:0;
}
.subservices li::before{ content:""; width:5px; height:5px; margin-top:8px; flex:none; border-radius:50%; background:var(--gold); }

.timeline{ position:relative; padding-left:var(--space-32); }
.timeline::before{ content:""; position:absolute; left:3px; top:8px; bottom:8px; width:1px; background:var(--charcoal); }
.timeline li{ position:relative; padding-bottom:var(--space-32); }
.timeline li::before{ content:""; position:absolute; left:-32px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.timeline .year{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--gold); margin-bottom:8px; }
.timeline p{ font-size:var(--text-body-sm); line-height:1.5; color:var(--ash); margin:0; }

.steps{ counter-reset:step; display:grid; gap:0; }
@media (max-width:768px){ .steps{ grid-template-columns:1fr !important; } }
.steps li{ padding:var(--space-24) 0; border-top:1px solid var(--charcoal); counter-increment:step; }
.steps li::before{
  content:counter(step,decimal-leading-zero); display:block; font-family:var(--mono);
  font-size:11px; letter-spacing:.07em; color:var(--gold); margin-bottom:10px;
}
.steps h4{ margin-bottom:6px; }
.steps p{ font-size:var(--text-body-sm); line-height:1.5; color:var(--ash); margin:0; }

/* --- 23. Formulários ----------------------------------------------------- */
.form{ display:grid; gap:var(--space-24); max-width:640px; }
.form > .btn{ justify-self:start; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); }
.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--charcoal); border-radius:var(--radius-cards);
  color:var(--white); padding:14px 16px; font-family:var(--font); font-size:var(--text-body-sm);
  width:100%; letter-spacing:0;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--twilight); background:var(--halo); outline:none; }
.field textarea{ min-height:140px; resize:vertical; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px; background-repeat:no-repeat;
}
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-24); }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--smoke); line-height:1.5; letter-spacing:0; }
.check input{ width:16px; height:16px; margin-top:2px; accent-color:var(--gold); flex:none; }
.form__note{ font-size:12px; color:var(--smoke); letter-spacing:0; }
.form__status{ font-size:var(--text-body-sm); padding:14px 18px; border-radius:var(--radius-cards); display:none; letter-spacing:0; }
.form__status.is-ok{ display:block; border:1px solid rgba(34,197,94,.35); color:#A7F3C4; }
.form__status.is-err{ display:block; border:1px solid rgba(239,68,68,.35); color:#FFC4C4; }

.map{ border-radius:var(--radius-cards); overflow:hidden; box-shadow:var(--halo-glow); min-height:360px; height:100%; }
.map iframe{ width:100%; height:100%; min-height:360px; border:0; display:block; filter:grayscale(1) contrast(1.08) brightness(.75); }

/* --- 24. Movimento -------------------------------------------------------
   Revelação discreta: opacidade + deslocamento curto, nada mais.          */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* Sequência de entrada do hero */
.js .hero__grid > *{ opacity:0; transform:translateY(20px); animation:enter .9s var(--ease) forwards; }
.js .hero__grid > *:nth-child(1){ animation-delay:.05s; }
.js .hero__grid > *:nth-child(2){ animation-delay:.22s; }
@keyframes enter{ to{ opacity:1; transform:none; } }

/* --- 25. Responsivo ------------------------------------------------------ */
@media (max-width:1300px){
  .nav a{ padding:8px 10px; font-size:13px; }
  .header .container{ gap:var(--space-16); }
  .brand__sub{ display:none; }
}
@media (max-width:1220px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .header__cta .btn--ghost{ display:none; }
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  :root{ --gutter:24px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__card{ max-width:540px; }
  .authority__grid{ grid-template-columns:1fr; }
  .portrait{ max-width:340px; }
  .counters .container{ grid-template-columns:repeat(2,1fr); row-gap:var(--space-40); }
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .topbar__item--hours{ display:none; }
  .subservices{ grid-template-columns:1fr; }
  .channels{ margin-top:-48px; }
}
@media (max-width:700px){
  .header__cta-text{ display:none; }
  .header__cta-icon{ display:inline-flex; }
}
@media (max-width:640px){
  html{ scroll-padding-top:92px; }
  :root{ --gutter:20px; --card-padding:20px; }
  .grid--4,.grid--3,.grid--2{ grid-template-columns:1fr; }
  .header .container{ min-height:64px; }
  .brand__sub{ display:none; }
  .hero__stats{ grid-template-columns:1fr; }
  .sidebar{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:var(--space-40); }
  .counter{ border-left:0; padding-left:0; border-top:1px solid var(--charcoal); padding-top:var(--space-24); }
  .btn{ width:100%; }
  .header__cta .btn{ width:auto; }
  .header__cta .btn--icon{ width:42px; }
  .wa{ right:16px; bottom:16px; }
  .wa__menu{ width:min(280px,calc(100vw - 32px)); }
}

/* --- 26. Movimento reduzido --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal,.js .hero__grid > *{ opacity:1; transform:none; }
}


/* --- 28. Logo e marcas ---------------------------------------------------- */
.brand{ display:flex; align-items:center; margin-right:auto; min-width:0; }
.brand__logo{ height:30px; width:auto; display:block; }
.drawer .brand__logo{ height:26px; }
.footer .brand__logo{ height:32px; }
.seal{ display:flex; justify-content:center; margin-bottom:var(--space-32); }
.seal__mark{ height:36px; width:auto; opacity:.5; }
.portrait__mark{ height:44px; width:auto; margin:0 auto var(--space-16); opacity:.55; }
.crumbs__current{ color:var(--ash); }

/* Resumo em 30 segundos — o bloco que o leitor lê antes de decidir ler */
.summary{
  border:1px solid var(--charcoal); border-radius:var(--radius-cards);
  background:var(--surface); padding:var(--card-padding);
  margin-bottom:var(--space-48); max-width:640px;
}
.summary .eyebrow{ margin-bottom:var(--space-16); }
.summary ul{ display:grid; gap:10px; }
.summary li{
  position:relative; padding-left:22px; font-size:var(--text-body-sm);
  line-height:1.55; color:var(--ash); letter-spacing:0;
}
.summary li::before{
  content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--gold);
}
.summary strong{ color:var(--white); font-weight:500; }

.prose h2{ font-size:var(--text-heading-sm); }
.prose h3{ font-size:var(--text-subheading); font-weight:500; color:var(--white); }
.prose strong{ color:var(--white); }
@media (max-width:640px){ .brand__logo{ height:26px; } }


/* --- 29. Fotografia ------------------------------------------------------ */
.portrait__img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait picture{ display:block; width:100%; height:100%; }

/* Recorte sobre fundo escuro: sem moldura, a foto funde com a página */
.portrait--bleed{
  background:none; box-shadow:none; border-radius:0; padding:0;
  aspect-ratio:3/4; place-items:end start;
}
.portrait--bleed .portrait__img{
  border-radius:var(--radius-feature);
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 98%);
          mask-image:linear-gradient(180deg,#000 76%,transparent 98%);
}
.portrait--bleed picture{ position:absolute; inset:0; }

.figure{ margin:0 0 var(--space-48); max-width:640px; }
.figure picture{ display:block; }
.figure__img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-cards); box-shadow:var(--halo-glow);
}
.figure figcaption{
  margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--smoke); line-height:1.5;
}
.figure--retrato{ max-width:420px; }
.figure--quadro{ max-width:360px; }
.figure--larga{ max-width:100%; }
/* A foto só flutua quando sobra coluna de texto suficiente ao lado dela */
@media (min-width:1180px){
  .figure--retrato,.figure--quadro{
    float:right; max-width:300px; margin:6px 0 var(--space-32) var(--space-40);
  }
}
@media (max-width:640px){
  .figure--retrato,.figure--quadro{ max-width:100%; }
}

/* --- 27. Impressão ------------------------------------------------------- */
@media print{
  .topbar,.header,.wa,.cta__actions,.drawer,.scrim{ display:none !important; }
  body{ background:#fff; color:#111; }
  .section{ padding-block:20px; }
}