/* =============================================================
   CAPOTE & DANTAS — folha de estilo única
   Sistema: design-system/capote-e-dantas/MASTER.md
   Estilo: "Accessible & Ethical" | Padrão: Trust & Authority
   Tipografia: EB Garamond (títulos) + Lato (texto e interface)
   ============================================================= */

/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root{
  /* --- escala tipográfica --- */
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-marca:  "Cinzel", "Playfair Display", Georgia, serif;
  --fonte-texto:  "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- espaçamento (densidade 3/10 — espaçoso) --- */
  --e-xs: 4px;
  --e-sm: 8px;
  --e-md: 24px;
  --e-lg: 32px;
  --e-xl: 48px;
  --e-2xl: 64px;
  --e-3xl: 96px;

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --secao-y: clamp(72px, 9vw, 128px);

  --raio: 0px;
  --raio-md: 0px;

  --t-rapida: 160ms;
  --t-media: 240ms;
  --t-lenta: 420ms;
  --curva: cubic-bezier(.2, .7, .3, 1);

  /* --- TEMA ESCURO (padrão) — paleta do cartão da marca --- */
  --fundo:        #070707;   /* ink */
  --superficie:   #0d0c0a;   /* ink-2, levemente quente */
  --superficie-2: #141310;   /* ink-3 */
  --superficie-3: #1c1a15;
  --linha:        rgba(201, 162, 39, .19);   /* fio dourado, não cinza */
  --linha-media:  rgba(201, 162, 39, .28);   /* --hair da primeira versão */
  --linha-forte:  rgba(201, 162, 39, .36);
  --ouro-veu-2:   rgba(201, 162, 39, .06);  /* lavagem da moldura do ícone */

  --texto:        #e9e4da;   /* bone: nunca branco puro */
  --texto-2:      #cdc7ba;
  --texto-3:      #98928a;

  --ouro-lo:      #8a6420;   /* ouro em sombra */
  --ouro:         #c9a227;   /* ouro base */
  --ouro-claro:   #f0dca0;   /* champanhe */
  --ouro-fundo:   #c9a227;
  --ouro-texto:   #070707;
  --ouro-veu:     rgba(201, 162, 39, .09);
  --ouro-borda:   rgba(201, 162, 39, .30);

  /* paradas do degradê da logo, na luz do cartão original */
  --marca-ouro-1: #8a6420;
  --marca-ouro-2: #f0dca0;
  --marca-ouro-3: #c9a227;
  --marca-ouro-4: #ddc272;
  --marca-ouro-5: #f0dca0;

  --brilho:       rgba(255,255,255,.016);
  --erro:         #ff6b6b;
  --anel:         #f0dca0;

  --sombra-md: 0 4px 6px rgba(0,0,0,.35);
  --sombra-lg: 0 16px 40px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* --- TEMA CLARO --- */
:root[data-theme="light"]{
  --fundo:        #f6f3ec;   /* pergaminho quente */
  --superficie:   #fffdf8;
  --superficie-2: #efeade;
  --superficie-3: #e6e0d0;
  --linha:        rgba(122, 93, 18, .22);
  --linha-media:  rgba(122, 93, 18, .30);
  --linha-forte:  rgba(122, 93, 18, .40);
  --ouro-veu-2:   rgba(122, 93, 18, .05);

  --texto:        #16150f;
  --texto-2:      #44403a;
  --texto-3:      #615c50;

  --ouro-lo:      #5e4709;
  --ouro:         #7a5d12;
  --ouro-claro:   #97772a;
  --ouro-fundo:   #8a6614;
  --ouro-texto:   #ffffff;
  --ouro-veu:     rgba(122, 93, 18, .07);
  --ouro-borda:   rgba(122, 93, 18, .28);

  --marca-ouro-1: #5e4709;
  --marca-ouro-2: #97772a;
  --marca-ouro-3: #7a5d12;
  --marca-ouro-4: #8a6a1c;
  --marca-ouro-5: #97772a;

  --brilho:       rgba(20,18,12,.022);
  --erro:         #b3261e;
  --anel:         #1e3a8a;   /* navy de autoridade */

  --sombra-md: 0 4px 6px rgba(20,22,28,.08);
  --sombra-lg: 0 16px 40px rgba(20,22,28,.12);

  color-scheme: light;
}

/* Sem escolha salva: acompanha o sistema. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --fundo:#f6f3ec; --superficie:#fffdf8; --superficie-2:#efeade; --superficie-3:#e6e0d0;
    --linha:rgba(122,93,18,.22); --linha-media:rgba(122,93,18,.30); --linha-forte:rgba(122,93,18,.40); --ouro-veu-2:rgba(122,93,18,.05);
    --texto:#16150f; --texto-2:#44403a; --texto-3:#615c50;
    --ouro-lo:#5e4709; --ouro:#7a5d12; --ouro-claro:#97772a;
    --ouro-fundo:#8a6614; --ouro-texto:#ffffff;
    --ouro-veu:rgba(122,93,18,.07); --ouro-borda:rgba(122,93,18,.28);
    --marca-ouro-1:#5e4709; --marca-ouro-2:#97772a; --marca-ouro-3:#7a5d12;
    --marca-ouro-4:#8a6a1c; --marca-ouro-5:#97772a;
    --brilho:rgba(20,18,12,.022); --erro:#b3261e; --anel:#1e3a8a;
    --sombra-md:0 4px 6px rgba(20,18,12,.08); --sombra-lg:0 16px 40px rgba(20,18,12,.12);
    color-scheme: light;
  }
}

/* -------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-media) ease, color var(--t-media) ease;
}

/* brilho diagonal do cartão da marca, na mesma inclinação da arte original */
body::before{
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 96px, var(--brilho) 96px 200px);
}
.cabecalho, main, .rodape{ position: relative; z-index: 1 }

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

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

::selection{ background: var(--ouro); color: var(--ouro-texto) }

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pular{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ouro-fundo); color: var(--ouro-texto);
  padding: 14px 22px; font-weight: 700;
}
.pular:focus{ left: 12px; top: 12px }

/* -------------------------------------------------------------
   3. TIPOGRAFIA
   ------------------------------------------------------------- */
h1, h2, h3{
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: clamp(2.45rem, 5.4vw, 4.05rem); font-weight: 400; line-height: 1.06; letter-spacing: -.018em }
h2{ font-size: clamp(1.85rem, 3.7vw, 2.85rem); line-height: 1.14 }
h3{ font-size: clamp(1.22rem, 1.6vw, 1.45rem); line-height: 1.22 }
p{ margin: 0 0 1.15em }
p:last-child{ margin-bottom: 0 }

em{ font-style: italic; color: var(--ouro) }

/* ouro em degradê aplicado ao texto — o brilho do cartão da marca */
.ouro-grad{
  background: linear-gradient(100deg,
    var(--ouro-lo) 0%, var(--ouro-claro) 38%, var(--ouro) 62%, var(--ouro-claro) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero h1 em{ font-style: italic; font-weight: 400 }

.olho{
  font-family: var(--fonte-marca);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 var(--e-md);
}

.lede{
  font-size: clamp(1.05rem, .5vw + .95rem, 1.2rem);
  line-height: 1.65;
  color: var(--texto-2);
  max-width: 58ch;
  text-wrap: pretty;
}

/* -------------------------------------------------------------
   4. ÍCONES
   ------------------------------------------------------------- */
.ico{
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--pequeno{ width: 18px; height: 18px }
.ico--grande{ width: 30px; height: 30px; stroke-width: 1.3 }

/* -------------------------------------------------------------
   5. BOTÕES
   ------------------------------------------------------------- */
.botao{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 26px;
  font-family: var(--fonte-texto); font-size: .8rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--ouro-fundo); color: var(--ouro-texto);
  border: 1px solid var(--ouro-fundo); border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--t-media) ease, border-color var(--t-media) ease,
              color var(--t-media) ease, transform var(--t-media) var(--curva),
              box-shadow var(--t-media) ease;
}
.botao:hover{ transform: translateY(-2px); box-shadow: var(--sombra-md); filter: brightness(1.06) }
.botao:active{ transform: translateY(0) }
.botao .ico{ transition: transform var(--t-media) var(--curva) }
.botao:hover .ico{ transform: translateX(3px) }

.botao--vazado{
  background: transparent; color: var(--ouro); border-color: var(--ouro-borda);
}
.botao--vazado:hover{ background: var(--ouro-veu); border-color: var(--ouro); filter: none }

.botao--pequeno{ min-height: 44px; padding: 11px 18px; font-size: .74rem }
.botao--bloco{ width: 100%; margin-top: var(--e-sm) }

/* botão de ícone (tema, menu, fechar) */
.icone-btn{
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent; border-radius: var(--raio);
  color: var(--texto-2); cursor: pointer;
  transition: color var(--t-rapida) ease, background-color var(--t-rapida) ease, border-color var(--t-rapida) ease;
}
.icone-btn:hover{ color: var(--ouro); background: var(--ouro-veu); border-color: var(--ouro-borda) }
.icone-btn__rotulo{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.icone-btn .ico{ grid-area: 1 / 1 }
.ico--sol{ display: none }
:root[data-theme="light"] .ico--lua{ display: none }
:root[data-theme="light"] .ico--sol{ display: block }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .ico--lua{ display: none }
  :root:not([data-theme="dark"]) .ico--sol{ display: block }
}

/* -------------------------------------------------------------
   6. CABEÇALHO
   ------------------------------------------------------------- */
.cabecalho{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-media) ease, background-color var(--t-media) ease;
}
.cabecalho.fixado{
  border-bottom-color: var(--linha);
  background: color-mix(in srgb, var(--fundo) 94%, transparent);
}
.cabecalho__barra{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-md); min-height: 80px;
}

.marca{ display: inline-flex; align-items: center; gap: 14px; min-width: 0 }

/* monograma e assinatura vêm do sprite vetorial da logo original */
.marca__mono{
  height: 42px; width: auto; flex: none; display: block;
  transition: opacity var(--t-media) ease;
}
.marca__assinatura{ display: inline-flex; flex-direction: column; align-items: stretch; min-width: 0 }
.marca__nome{ height: 15px; width: auto; display: block }
.marca__tagline{
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--ouro-borda);
  font-size: .5rem; font-weight: 400; letter-spacing: .285em;
  text-transform: uppercase; color: var(--texto-3);
  line-height: 1; white-space: nowrap;
}
.marca:hover .marca__mono{ opacity: .82 }

/* o sprite não é exibido: só guarda os símbolos referenciados por <use> */
.marca-sprite{ position: absolute; width: 0; height: 0; overflow: hidden }

.menu{ display: flex; align-items: center; gap: var(--e-lg) }
.menu a{
  position: relative; font-size: .88rem; color: var(--texto-2);
  padding: 6px 0; transition: color var(--t-rapida) ease;
}
.menu a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ouro); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-media) var(--curva);
}
.menu a:hover{ color: var(--texto) }
.menu a:hover::after, .menu a[aria-current="true"]::after{ transform: scaleX(1) }
.menu a[aria-current="true"]{ color: var(--ouro) }

.cabecalho__acoes{ display: flex; align-items: center; gap: var(--e-sm) }
.menu-btn{ display: none }

@media (max-width: 1023px){
  .menu{ display: none }
  .menu-btn{ display: inline-grid }
  .cabecalho__acoes .botao--pequeno{ display: none }
  .marca__tagline{ font-size: .46rem; letter-spacing: .24em }
}

/* -------------------------------------------------------------
   7. GAVETA (menu móvel)
   ------------------------------------------------------------- */
.gaveta{ position: fixed; inset: 0; z-index: 90 }
.gaveta[hidden]{ display: none }
.gaveta__fundo{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  animation: surgir var(--t-media) ease both;
}
.gaveta__painel{
  position: absolute; inset-block: 0; right: 0;
  width: min(360px, 88vw);
  background: var(--superficie);
  border-left: 1px solid var(--linha);
  padding: var(--e-md) var(--e-md) var(--e-xl);
  display: flex; flex-direction: column; gap: var(--e-md);
  overflow-y: auto;
  animation: entrar-direita var(--t-lenta) var(--curva) both;
}
.gaveta__topo{ display: flex; align-items: center; justify-content: space-between }
.gaveta__topo .olho{ margin: 0 }
.gaveta__lista{ list-style: none; margin: 0; padding: 0; flex: 1 }
.gaveta__lista li + li{ border-top: 1px solid var(--linha) }
.gaveta__lista a{
  display: flex; align-items: baseline; gap: 14px;
  min-height: 56px; padding: 14px 4px;
  font-family: var(--fonte-titulo); font-size: 1.12rem; color: var(--texto);
  transition: color var(--t-rapida) ease, padding-left var(--t-media) var(--curva);
}
.gaveta__lista a:hover{ color: var(--ouro); padding-left: 10px }
.gaveta__lista i{
  font-style: normal; font-family: var(--fonte-marca); font-size: .68rem;
  font-weight: 400; letter-spacing: .1em; color: var(--ouro);
  min-width: 26px;
}
.gaveta__cta{ width: 100% }

@keyframes surgir{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes entrar-direita{ from{ transform: translateX(24px); opacity: 0 } to{ transform: none; opacity: 1 } }

/* -------------------------------------------------------------
   8. ESPINHA (índice lateral fixo) — elemento-assinatura
   ------------------------------------------------------------- */
.espinha{
  /* ancorada pela DIREITA: os rótulos crescem para dentro da margem,
     nunca em direção ao texto da página */
  position: fixed; top: 50%; z-index: 40;
  right: calc(50vw + var(--shell) / 2 - var(--gutter) + 24px);
  transform: translateY(-50%);
  pointer-events: none;
}
.espinha ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
}
.espinha__trilho{
  position: absolute; right: -16px; top: 4px; bottom: 4px; width: 1px;
  background: var(--linha);
}
.espinha__preenche{
  position: absolute; inset: 0;
  background: var(--ouro);
  transform: scaleY(0); transform-origin: top;
  transition: transform 120ms linear;
}
.espinha a{
  display: flex; flex-direction: row-reverse; align-items: center; gap: 10px;
  pointer-events: auto; width: max-content;
  color: var(--texto-3);
  transition: color var(--t-rapida) ease;
}
.espinha i{
  font-style: normal; font-family: var(--fonte-marca); font-size: .62rem; font-weight: 400;
  letter-spacing: .08em; min-width: 22px; text-align: right;
  transition: color var(--t-rapida) ease;
}
.espinha span{
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--t-media) ease, transform var(--t-media) var(--curva);
}
.espinha a:hover, .espinha a:focus-visible{ color: var(--ouro) }
.espinha a:hover span, .espinha a:focus-visible span{ opacity: 1; transform: none }
.espinha a[aria-current="true"]{ color: var(--ouro) }
.espinha a[aria-current="true"] span{ opacity: 1; transform: none }

/* abaixo disso a margem não comporta os rótulos sem encostar no conteúdo */
@media (max-width: 1439px){ .espinha{ display: none } }

/* -------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------- */
.hero{ padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 7vw, 88px) }
.hero__grade{
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.hero h1{ margin: 0 0 var(--e-md) }
.hero__botoes{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--e-lg) }
.hero__nota{
  margin: var(--e-lg) 0 0; padding-top: var(--e-md);
  border-top: 1px solid var(--linha);
  font-size: .88rem; color: var(--texto-3); max-width: 46ch;
}

@media (max-width: 899px){
  .hero__grade{ grid-template-columns: 1fr; gap: var(--e-xl) }
}

/* dossiê — índice das áreas */
.dossie{
  position: relative;
  background: linear-gradient(155deg, var(--superficie), var(--fundo) 72%);
  padding: clamp(26px, 3.2vw, 40px);
}
/* a moldura da marca se desenha, traço a traço, na abertura da página */
.dossie .aresta{ position: absolute; background: var(--ouro); opacity: .8 }
.dossie .aresta.t{ top: 0; left: 0; height: 1px; width: 100%; transform-origin: left; transform: scaleX(0) }
.dossie .aresta.r{ top: 0; right: 0; width: 1px; height: 100%; transform-origin: top; transform: scaleY(0) }
.dossie .aresta.b{ bottom: 0; right: 0; height: 1px; width: 100%; transform-origin: right; transform: scaleX(0) }
.dossie .aresta.l{ bottom: 0; left: 0; width: 1px; height: 100%; transform-origin: bottom; transform: scaleY(0) }
.pronto .dossie .aresta.t{ animation: risca-x .7s .15s ease forwards }
.pronto .dossie .aresta.r{ animation: risca-y .7s .55s ease forwards }
.pronto .dossie .aresta.b{ animation: risca-x .7s .95s ease forwards }
.pronto .dossie .aresta.l{ animation: risca-y .7s 1.35s ease forwards }
@keyframes risca-x{ to{ transform: scaleX(1) } }
@keyframes risca-y{ to{ transform: scaleY(1) } }
.dossie__olho{
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 0 var(--e-md);
}
.dossie__lista{ list-style: none; margin: 0; padding: 0 }
.dossie__lista li{ border-top: 1px solid var(--linha) }
.dossie__lista li:last-child{ border-bottom: 1px solid var(--linha) }
.dossie__lista a{
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 2px;
  transition: padding-left var(--t-media) var(--curva);
}
.dossie__lista a:hover{ padding-left: 10px }
.dossie__lista i{
  font-style: normal; font-family: var(--fonte-marca); font-size: .64rem;
  font-weight: 700; letter-spacing: .1em; color: var(--ouro); min-width: 24px;
}
.dossie__lista span{ display: flex; flex-direction: column; flex: 1; min-width: 0 }
.dossie__lista b{
  font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.18rem;
  line-height: 1.2; color: var(--texto);
  transition: color var(--t-rapida) ease;
}
.dossie__lista small{ font-size: .82rem; color: var(--texto-3); line-height: 1.45 }
.dossie__lista .ico{ color: var(--texto-3); opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t-media) ease, transform var(--t-media) var(--curva), color var(--t-rapida) ease }
.dossie__lista a:hover b{ color: var(--ouro) }
.dossie__lista a:hover .ico, .dossie__lista a:focus-visible .ico{ opacity: 1; transform: none; color: var(--ouro) }
.dossie__rodape{
  margin: var(--e-md) 0 0; font-size: .82rem; color: var(--texto-3); line-height: 1.5;
}

/* -------------------------------------------------------------
   10. FAIXA DE GARANTIAS
   ------------------------------------------------------------- */
.garantias{ border-top: 1px solid var(--linha); background: var(--superficie) }
.garantias__lista{
  list-style: none; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--e-lg);
  gap: var(--e-md);
}
.garantias__lista li{
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px; align-items: start;
}
.garantias__lista .ico{ grid-row: 1 / 3; color: var(--ouro); margin-top: 2px }
.garantias__lista b{ font-size: .95rem; font-weight: 700; color: var(--texto) }
.garantias__lista small{ font-size: .84rem; color: var(--texto-3); line-height: 1.5 }

@media (max-width: 959px){ .garantias__lista{ grid-template-columns: repeat(2, 1fr); gap: var(--e-md) var(--e-lg) } }
@media (max-width: 519px){ .garantias__lista{ grid-template-columns: 1fr } }

/* -------------------------------------------------------------
   11. SEÇÕES
   ------------------------------------------------------------- */
.secao{
  position: relative;
  padding-block: var(--secao-y);
  border-top: 1px solid var(--linha);   /* um fio por limite, sem dobrar */
}
.secao--alt{ background: var(--superficie) }
.secao__cabeca{ max-width: 62ch; margin-bottom: clamp(40px, 5vw, 72px) }
.secao__cabeca h2{ margin-bottom: var(--e-md) }
.secao__cabeca--centro{ margin-inline: auto; text-align: center }
.secao__cabeca--centro .lede{ margin-inline: auto }

/* -------------------------------------------------------------
   12. ÁREAS DE ATUAÇÃO
   ------------------------------------------------------------- */
.areas{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--linha);
}
@media (max-width: 819px){ .areas{ grid-template-columns: 1fr } }

.area{
  position: relative;
  background: var(--fundo);
  padding: clamp(30px, 3.6vw, 50px);
  scroll-margin-top: 100px;
  transition: background-color .4s ease;
}
.area:hover{ background: var(--superficie) }

/* cantoneiras que se abrem no hover — assinatura da marca */
.area::before, .area::after{
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--ouro); opacity: .5;
  transition: width .45s ease, height .45s ease, opacity .45s ease;
}
.area::before{ top: 0; left: 0; border-width: 1px 0 0 1px }
.area::after{ right: 0; bottom: 0; border-width: 0 1px 1px 0 }
.area:hover::before, .area:hover::after{ width: 46px; height: 46px; opacity: 1 }

.area__cabeca{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 22px; margin-bottom: 18px;
}
.area__num{
  display: block; margin-bottom: 14px;
  font-family: var(--fonte-marca); font-size: .74rem; font-weight: 400;
  letter-spacing: .24em; color: var(--ouro); opacity: .85;
}
.area__cabeca h3{ margin: 0 }
.area > p{ color: var(--texto-3); font-size: .93rem; margin-bottom: 22px }
.area__itens{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.area__itens li{
  position: relative; padding-left: 20px;
  font-size: .88rem; line-height: 1.55; color: var(--texto-2);
}
.area__itens li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--ouro); opacity: .7;
}

/* moldura do ícone: o traço de ouro se desenha dentro do quadro da marca */
.art{
  margin: 0; flex: none; width: clamp(72px, 8vw, 96px); aspect-ratio: 1;
  display: grid; place-items: center; position: relative;
  border: 1px solid var(--linha-media);
  background: linear-gradient(155deg, var(--ouro-veu-2), transparent 70%);
  transition: border-color .45s ease, background .45s ease;
}
.area:hover .art{
  border-color: var(--ouro);
  background: linear-gradient(155deg, var(--ouro-veu), transparent 70%);
}
.art svg{ width: 64%; height: 64%; color: var(--ouro-claro); overflow: visible }
.art .d{
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  --ed: 0s;
}
.art .d:nth-child(2){ --ed: .07s }  .art .d:nth-child(3){ --ed: .14s }
.art .d:nth-child(4){ --ed: .21s }  .art .d:nth-child(5){ --ed: .28s }
.art .d:nth-child(6){ --ed: .35s }  .art .d:nth-child(7){ --ed: .42s }
.art .d:nth-child(8){ --ed: .49s }  .art .d:nth-child(9){ --ed: .56s }
.area.visivel .art .d{
  animation: risca-traco 1.3s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: var(--ed, 0s);
}
@keyframes risca-traco{ to{ stroke-dashoffset: 0 } }

/* -------------------------------------------------------------
   13. ETAPAS
   ------------------------------------------------------------- */
.etapas{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 799px){ .etapas{ grid-template-columns: 1fr } }

.etapa{ position: relative; padding-top: 26px; border-top: 1px solid var(--linha-forte) }
.etapa__num{
  display: block; margin-bottom: 16px;
  font-family: var(--fonte-marca); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .18em; line-height: 1.2;
  background: linear-gradient(100deg,
    var(--ouro-lo) 0%, var(--ouro-claro) 38%, var(--ouro) 62%, var(--ouro-claro) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.etapa h3{ margin-bottom: 12px }
.etapa p{ color: var(--texto-2); font-size: .95rem }

/* -------------------------------------------------------------
   14. VÍDEO
   ------------------------------------------------------------- */
.video{ max-width: 900px; margin-inline: auto }
.video__capa{
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--linha); border-radius: var(--raio-md);
  cursor: pointer;
  transition: border-color var(--t-media) ease, box-shadow var(--t-media) ease;
}
.video__capa{ border-color: var(--linha-forte) }
.video__capa:hover{ border-color: var(--ouro); box-shadow: var(--sombra-lg) }
.video__capa::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--fundo) 6%, transparent),
    color-mix(in srgb, var(--fundo) 58%, transparent));
}
.video__capa img{ width: 100%; height: 100%; object-fit: cover; opacity: .82;
  transition: opacity var(--t-media) ease, transform var(--t-lenta) var(--curva) }
.video__capa:hover img{ opacity: .95; transform: scale(1.02) }
.video__play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: clamp(62px, 9vw, 86px); height: clamp(62px, 9vw, 86px); border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ouro);
  background: color-mix(in srgb, var(--fundo) 55%, transparent);
  color: var(--ouro-claro);
  transition: background var(--t-media) ease, transform var(--t-media) var(--curva), color var(--t-media) ease;
}
.video__play svg{ width: 40%; height: 40%; margin-left: 8%; fill: currentColor }
.video__capa:hover .video__play{
  background: linear-gradient(100deg,
    var(--ouro-lo) 0%, var(--ouro-claro) 38%, var(--ouro) 62%, var(--ouro-claro) 100%);
  color: var(--ouro-texto);
  transform: translate(-50%, -50%) scale(1.06);
}
.video__capa iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video__capa.tocando .video__play, .video__capa.tocando img{ display: none }
.video__legenda{
  margin: var(--e-md) 0 0; text-align: center;
  font-size: .84rem; color: var(--texto-3);
}

/* -------------------------------------------------------------
   15. ESCRITÓRIO
   ------------------------------------------------------------- */
.escritorio{
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
@media (max-width: 899px){ .escritorio{ grid-template-columns: 1fr } }

.escritorio h2{ margin-bottom: var(--e-md) }

.fatos{ margin: var(--e-xl) 0 0; display: grid; gap: 0 }
.fatos > div{
  display: grid; grid-template-columns: 150px 1fr; gap: var(--e-md);
  padding: 18px 0; border-top: 1px solid var(--linha);
}
.fatos > div:last-child{ border-bottom: 1px solid var(--linha) }
.fatos dt{
  font-family: var(--fonte-marca); font-size: .68rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ouro);
}
.fatos dd{ margin: 0; font-size: .94rem; color: var(--texto-2); line-height: 1.6 }
@media (max-width: 599px){ .fatos > div{ grid-template-columns: 1fr; gap: 6px } }

.citacao{
  margin: 0; padding: clamp(28px, 3.4vw, 44px);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-left: 2px solid var(--ouro);
  border-radius: var(--raio-md);
}
.citacao blockquote{ margin: 0 }
.citacao p{
  font-family: var(--fonte-titulo); font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.45;
  color: var(--texto); margin: 0;
}
.citacao figcaption{
  margin-top: var(--e-md); padding-top: var(--e-md);
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-marca); font-size: .68rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3);
}

/* -------------------------------------------------------------
   16. DÚVIDAS (acordeão)
   ------------------------------------------------------------- */
.faq{ max-width: 820px; border-top: 1px solid var(--linha) }
.qa{ border-bottom: 1px solid var(--linha) }
.qa summary{
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-md);
  min-height: 64px; padding: 18px 2px;
  font-family: var(--fonte-titulo); font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  font-weight: 400; color: var(--texto);
  cursor: pointer; list-style: none;
  transition: color var(--t-rapida) ease;
}
.qa summary::-webkit-details-marker{ display: none }
.qa summary:hover{ color: var(--ouro) }
.qa summary .ico{ color: var(--ouro); transition: transform var(--t-media) var(--curva) }
.qa[open] summary .ico{ transform: rotate(180deg) }
.qa[open] summary{ color: var(--ouro) }
.qa__corpo{ padding: 0 2px 24px; max-width: 68ch }
.qa__corpo p{ color: var(--texto-2); font-size: .95rem }

@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size: allow-keywords }
  .qa::details-content{
    block-size: 0; overflow: hidden;
    transition: block-size var(--t-lenta) var(--curva), content-visibility var(--t-lenta) allow-discrete;
  }
  .qa[open]::details-content{ block-size: auto }
}

/* -------------------------------------------------------------
   17. CONTATO E FORMULÁRIO
   ------------------------------------------------------------- */
.contato{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
@media (max-width: 899px){ .contato{ grid-template-columns: 1fr } }

.contato h2{ margin-bottom: var(--e-md) }

.canais{ list-style: none; margin: var(--e-xl) 0 0; padding: 0; display: grid; gap: 0 }
.canais li{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--linha);
}
.canais li:last-child{ border-bottom: 1px solid var(--linha) }
.canais .ico{ color: var(--ouro); margin-top: 2px }
.canais span{ display: flex; flex-direction: column; gap: 2px }
.canais b{ font-family: var(--fonte-marca); font-size: .68rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3) }
.canais a{ font-size: 1.02rem; color: var(--texto); border-bottom: 1px solid var(--ouro-borda);
  align-self: flex-start; transition: color var(--t-rapida) ease, border-color var(--t-rapida) ease }
.canais a:hover{ color: var(--ouro); border-color: var(--ouro) }
.canais__val{ font-size: 1.02rem; color: var(--texto) }

.formulario{
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  padding: clamp(24px, 3vw, 40px);
  display: grid; gap: var(--e-md);
}
.formulario__erros{
  background: color-mix(in srgb, var(--erro) 12%, transparent);
  border: 1px solid var(--erro);
  border-radius: var(--raio); padding: 16px 18px;
  font-size: .9rem; color: var(--texto);
}
.formulario__erros[hidden]{ display: none }
.formulario__erros b{ display: block; margin-bottom: 8px }
.formulario__erros ul{ margin: 0; padding-left: 20px; display: grid; gap: 4px }
.formulario__erros a{ color: var(--erro); text-decoration: underline; text-underline-offset: 3px }

.campo{ display: grid; gap: 7px }
.campo label{ font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--texto-2) }
.campo__opc{ font-weight: 400; color: var(--texto-3); letter-spacing: 0 }

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea{
  width: 100%; min-height: 48px;
  padding: 13px 15px;
  font-family: var(--fonte-texto); font-size: 16px; line-height: 1.5;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  transition: border-color var(--t-rapida) ease, box-shadow var(--t-rapida) ease, background-color var(--t-rapida) ease;
}
.secao--alt .formulario input, .secao--alt .formulario select, .secao--alt .formulario textarea{
  background: var(--superficie-2);
}
.campo textarea{ resize: vertical; min-height: 132px }
.campo input::placeholder, .campo textarea::placeholder{ color: var(--texto-3); opacity: 1 }
.campo input:hover, .campo select:hover, .campo textarea:hover{ border-color: var(--ouro-borda) }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible{
  outline: 3px solid var(--anel); outline-offset: 1px; border-color: var(--anel);
}

.campo__select{ position: relative; display: grid }
.campo__select select{ appearance: none; padding-right: 44px; cursor: pointer }
.campo__select .ico{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ouro); pointer-events: none;
}

.campo__dica{ margin: 0; font-size: .8rem; color: var(--texto-3) }
.campo__erro{ margin: 0; font-size: .82rem; font-weight: 700; color: var(--erro) }
.campo__erro[hidden]{ display: none }
.campo[data-invalido] input,
.campo[data-invalido] select,
.campo[data-invalido] textarea{ border-color: var(--erro) }

.consent{
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  font-size: .86rem; font-weight: 400 !important; line-height: 1.55; color: var(--texto-2);
  cursor: pointer;
}
.consent input{
  width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--ouro-fundo); cursor: pointer; flex: none;
}
.consent a{ color: var(--ouro); text-decoration: underline; text-underline-offset: 3px }

.pote-mel{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.formulario__nota{ margin: 0; font-size: .82rem; color: var(--texto-3); text-align: center }

/* -------------------------------------------------------------
   18. RODAPÉ
   ------------------------------------------------------------- */
.rodape{
  padding-block: var(--e-3xl) var(--e-xl);
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.rodape__grade{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: var(--e-xl);
  border-bottom: 1px solid var(--linha);
}
@media (max-width: 799px){ .rodape__grade{ grid-template-columns: 1fr; gap: var(--e-lg) } }

.rodape__lema{
  margin: var(--e-md) 0 0; max-width: 30ch;
  font-family: var(--fonte-titulo); font-size: 1.05rem; font-style: italic;
  color: var(--texto-3);
}
.rodape__links, .rodape__contato{ display: flex; flex-direction: column; gap: 10px }
.rodape__links .olho, .rodape__contato .olho{ margin-bottom: 6px }
.rodape__links a, .rodape__contato a, .rodape__contato span{
  font-size: .9rem; color: var(--texto-2); width: max-content; max-width: 100%;
  transition: color var(--t-rapida) ease;
}
.rodape__links a:hover, .rodape__contato a:hover{ color: var(--ouro) }

.rodape__legal{
  margin: var(--e-lg) 0 0; max-width: 92ch;
  font-size: .76rem; line-height: 1.7; color: var(--texto-3);
}

/* -------------------------------------------------------------
   19. BOTÃO FLUTUANTE
   ------------------------------------------------------------- */
.flutuante{
  position: fixed; right: 20px; z-index: 45;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 18px;
  background: #0f7a41; color: #fff;
  border-radius: 999px;
  box-shadow: var(--sombra-lg);
  transition: transform var(--t-media) var(--curva), filter var(--t-media) ease;
}
.flutuante svg{ width: 26px; height: 26px; flex: none }
.flutuante__rotulo{ font-size: .85rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap }
.flutuante:hover{ transform: translateY(-3px); filter: brightness(1.08) }
@media (max-width: 599px){
  .flutuante{ width: 56px; padding: 0; justify-content: center }
  .flutuante__rotulo{
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}

/* -------------------------------------------------------------
   20. REVELAÇÃO AO ROLAR (stagger — motion 5/10)
   ------------------------------------------------------------- */
.rv{
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-lenta) var(--curva), transform var(--t-lenta) var(--curva);
}
.rv.visivel{ opacity: 1; transform: none }
.areas .rv:nth-child(2){ transition-delay: 70ms }
.areas .rv:nth-child(3){ transition-delay: 140ms }
.areas .rv:nth-child(4){ transition-delay: 210ms }
.etapas .rv:nth-child(2){ transition-delay: 70ms }
.etapas .rv:nth-child(3){ transition-delay: 140ms }

/* -------------------------------------------------------------
   21. MOVIMENTO REDUZIDO
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv{ opacity: 1; transform: none }
  .dossie .aresta{ transform: none !important }
  .art .d{ stroke-dashoffset: 0 !important; animation: none !important }
}

/* -------------------------------------------------------------
   22. IMPRESSÃO
   ------------------------------------------------------------- */
@media print{
  .cabecalho, .espinha, .gaveta, .flutuante, .video, .pular{ display: none !important }
  body{ background: #fff; color: #000 }
  .rv{ opacity: 1; transform: none }
  .dossie .aresta{ transform: none !important }
  .art .d{ stroke-dashoffset: 0 !important; animation: none !important }
  .secao{ padding-block: 24px; break-inside: avoid }
}

/* -------------------------------------------------------------
   23. PÁGINA DE TEXTO (política de privacidade)
   ------------------------------------------------------------- */
.pagina-texto{ padding-block: clamp(48px, 6vw, 88px) }
.pagina-texto .shell{ max-width: 76ch }
.pagina-texto h1{ font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: var(--e-md) }
.pagina-texto h2{
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: var(--e-xl) 0 var(--e-md);
  padding-top: var(--e-md); border-top: 1px solid var(--linha);
}
.pagina-texto p, .pagina-texto li{ color: var(--texto-2); font-size: 1rem }
.pagina-texto ul{ padding-left: 22px; display: grid; gap: 8px; margin: 0 0 1.15em }
.pagina-texto .atualizado{ font-size: .82rem; color: var(--texto-3); margin-bottom: var(--e-xl) }
.pagina-texto .voltar{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--e-xl); color: var(--ouro);
  font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pagina-texto .voltar:hover{ text-decoration: underline; text-underline-offset: 4px }

/* -------------------------------------------------------------
   24. AJUSTES DE GRADE
   ------------------------------------------------------------- */
/* filhos de grid precisam de min-width:0 para não estourar a coluna */
.hero__texto, .contato__texto{ min-width: 0 }
.campo--consent{ margin-top: var(--e-xs) }

/* -------------------------------------------------------------
   25. AJUSTES DE TELAS MUITO ESTREITAS
   ------------------------------------------------------------- */
@media (max-width: 479px){
  .marca__mono{ height: 34px }
  .marca__nome{ height: 12px }
  .marca__tagline{ display: none }
  .cabecalho__barra{ min-height: 68px; gap: var(--e-sm) }
  html{ scroll-padding-top: 84px }
}

/* estado vazio do player, enquanto o id do vídeo não é configurado */
.video__capa:not(:has(img)){
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, var(--ouro-veu) 22px 44px),
    var(--superficie-2);
}