/* =========================================================
   MÍRDAN IT SOLUTIONS — style.css
   Imagens esperadas (mesma pasta do index.html):
     img/logo.png   → logotipo (cabeçalho e rodapé)
     img/hero.png   → fundo da seção Início
     img/sobre.png  → imagem lateral da seção Sobre
     img/banner.png → fundo da faixa "Vamos construir algo grande?"
     img/favicon.png (opcional)
   Enquanto as imagens não existirem, gradientes ocupam o lugar.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --navy-950: #050d19;
  --navy-900: #081527;
  --navy-850: #0a1a30;
  --navy-800: #0d1f38;
  --navy-700: #13294a;
  --ink: #1a2e50;
  --ink-soft: #34455f;

  --gold: #c9a55c;
  --gold-light: #e8cf95;
  --gold-deep: #a5813d;
  --gold-line: rgba(201, 165, 92, .45);
  --gold-faint: rgba(201, 165, 92, .18);

  --text-light: #eef1f6;
  --text-muted: #bcc6d6;

  --font-deco: "Cinzel Decorative", "Cinzel", "Times New Roman", serif;
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-heading: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;

  --header-h: 88px;
  --container: 1180px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) - 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-light);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
.js:not(.no-intro) body.is-loading { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote { margin: 0; }

:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--navy-900); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* ---------- 3. Ornamentos (losangos e linhas) ---------- */
.gem {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.gem::after { content: ""; position: absolute; inset: 2px; background: var(--gold); }
.gem--sm { width: 5px; height: 5px; }
.gem--sm::after { display: none; }

.ornament-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.ornament-line::before,
.ornament-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament-line::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament-line--short { max-width: 150px; margin-inline: auto; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--gold-deep);
}

/* ---------- 4. Botões ---------- */
.btn {
  --btn-c: var(--gold);
  --btn-fill: linear-gradient(100deg, #b8914a, #e8cf95 50%, #c9a55c);
  --btn-ink: var(--navy-900);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding: .8em 1.4em;
  font-family: var(--font-heading);
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--gold-light);
  border: 1px solid var(--btn-c);
  border-radius: 7px;
  transition: color .45s var(--ease-out), box-shadow .45s var(--ease-out), transform .25s;
}
.btn::before { /* preenchimento que "derrete" da esquerda */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.btn::after { /* brilho que atravessa o botão */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover { color: var(--btn-ink); box-shadow: 0 0 26px rgba(201, 165, 92, .35); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover::after { animation: sheen .9s .15s var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn__arrow {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--sm { font-size: .98rem; padding: .55em 1em; }
.btn--glass { background: rgba(8, 21, 39, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.btn--dark {
  --btn-c: var(--ink);
  --btn-fill: var(--ink);
  --btn-ink: #f3f5f8;
  color: var(--ink);
}
.btn--dark:hover { box-shadow: 0 10px 24px rgba(26, 46, 80, .25); }

@keyframes sheen { to { left: 130%; } }

/* Faíscas de clique (geradas pelo script) */
.spark {
  position: fixed;
  left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 8px var(--gold);
  pointer-events: none;
  z-index: 200;
  animation: spark .75s var(--ease-out) forwards;
}
@keyframes spark {
  from { transform: translate(var(--x0), var(--y0)) scale(1); opacity: 1; }
  to   { transform: translate(var(--x1), var(--y1)) scale(0); opacity: 0; }
}

/* ---------- 5. Abertura (loader) — A FORJA ----------
   GEOMETRIA DO GOLPE (leia antes de mexer nos números)

   O martelo é montado sobre um BRAÇO invisível (.forge-hammer):
   uma linha reta que vai do PIVÔ (a mão, base do braço) até a FACE da
   cabeça (ponta do braço). O cabo e a cabeça são desenhados em cima dele.
   Vantagem: se o braço termina no ponto certo, a face bate no ponto certo.

   1) PONTO DE IMPACTO = centro do topo da bigorna, calculado da própria
      img/anvil.png (6250x4419 px, face plana começando na linha y=662):
         altura renderizada = --anvil-w * (4419/6250) = --anvil-w * 0.70704
         face dentro da img = altura * (662/4419)     = --anvil-w * 0.10593
         --anvil-top = --stage-h - --anvil-bottom - --anvil-w * 0.60111
      >>> Se trocar img/anvil.png, recalcule o fator 0.6011. <<<

   2) O PIVÔ fica À DIREITA e ACIMA do ponto de impacto, de modo que no
      instante do golpe o braço aponte para baixo-esquerda em --hit-deg:
         --pivot-dx = --arm * -sin(--hit-deg)
         --pivot-dy = --arm *  cos(--hit-deg)
      Com --hit-deg: -100deg  →  -sin = 0.9848 ; cos = -0.1736
      (o sinal negativo do cos já está embutido no sinal do calc abaixo).
      >>> Se mudar --hit-deg, troque os dois fatores. Referência:
            -90deg  → 1.0000 / 0.0000   (cabo perfeitamente na horizontal)
           -100deg  → 0.9848 / 0.1736   (padrão: ponta 10° abaixo)
           -110deg  → 0.9397 / 0.3420
           -120deg  → 0.8660 / 0.5000

   3) SENTIDO DO GIRO — anti-horário (ângulo CSS diminuindo):
         rotate( -40deg) → cabeça no alto, à direita da bigorna (início)
         rotate( -30deg) → armada (sobe mais um pouco)
         rotate(-100deg) → IMPACTO: cabo deitado, face no topo da bigorna
      O cabo fica perpendicular à cabeça; a rotação completa vem do pivô,
      então no impacto ele fica exatamente na horizontal.

   4) AJUSTE FINO: --arm muda o tamanho do martelo sem desalinhar a batida;
      --hit-x desloca impacto, faíscas e clarão na horizontal.
   ---------------------------------------------------------------- */
.loader { display: none; }
.js:not(.no-intro) .loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #12294a 0%, var(--navy-900) 55%, #030811 100%);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-in-out);
}
.js .loader.is-done { clip-path: inset(0 0 100% 0); }
.loader__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.forge-stage {
  /* --- palco --- */
  --stage-h: 360px;
  --anvil-w: 250px;
  --anvil-bottom: 8px;

  /* --- martelo --- */
  --arm: 165px;          /* pivô → face da cabeça (raio do giro) */
  --handle-w: 13px;
  --handle-tilt: 0deg;    /* o giro do martelo vem do elemento-pivô */
  --head-len: 52px;       /* comprimento da cabeça (face → garra) */
  --head-face: 28px;      /* largura da cabeça */

  /* --- ângulo e ponto do impacto (derivados) --- */
  --hit-deg: -100deg;
  --hit-x: 0px;
  --anvil-top: calc(var(--stage-h) - var(--anvil-bottom) - var(--anvil-w) * 0.6011);
  --hit-y: var(--anvil-top);
  --pivot-dx: calc(var(--arm) * 0.9848);
  --pivot-dy: calc(var(--arm) * 0.1736);

  position: relative;
  width: min(460px, 90vw);
  height: var(--stage-h);
  isolation: isolate;
}

/* ----- luz que acende em volta da bigorna (fica atrás dela) ----- */
.forge-glow {
  position: absolute;
  left: calc(50% + var(--hit-x));
  top: var(--hit-y);
  z-index: 1;
  width: calc(var(--anvil-w) * 2);
  height: calc(var(--anvil-w) * 1.55);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(255, 244, 214, .95) 0%,
    rgba(255, 206, 112, .60) 20%,
    rgba(232, 207, 149, .26) 42%,
    rgba(201, 165, 92, .10) 62%,
    rgba(201, 165, 92, 0) 76%);
  transform: translate(-50%, -40%) scale(.35);
  opacity: 0;
  pointer-events: none;
}
.forge-stage.is-struck .forge-glow { animation: forgeGlow 1.6s var(--ease-out) forwards; }

/* ----- bigorna ----- */
.forge-anvil {
  position: absolute;
  left: 50%;
  bottom: var(--anvil-bottom);
  z-index: 2;
  width: var(--anvil-w);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(232, 207, 149, .28));
}
.forge-stage.is-struck .forge-anvil { animation: anvilGlow 1.1s var(--ease-out); }

/* ----- BRAÇO invisível: base = pivô, ponta = face da cabeça ----- */
.forge-hammer {
  position: absolute;
  left: calc(50% + var(--hit-x) + var(--pivot-dx));
  top: calc(var(--anvil-top) - var(--pivot-dy) - var(--arm));
  z-index: 3;
  width: 0;
  height: var(--arm);
  transform-origin: 50% 100%;
  transform: rotate(-40deg);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5));
  animation:
    forgeStrike 1.5s .25s both,
    forgeImpact .87s .25s both; /* pista p/ o JS: termina no instante do golpe */
}

/* ----- cabo: sai do pivô e entra no meio da cabeça ----- */
.forge-hammer__handle {
  position: absolute;
  left: calc((var(--head-len) - var(--handle-w)) / 2);
  top: -14px;                              /* entra no centro da cabeça */
  width: var(--handle-w);
  height: calc(var(--arm) + 8px);
  border-radius: 6px;
  background: linear-gradient(90deg, #4c3324, #d2a65b 45%, #624229);
  box-shadow: 0 0 8px rgba(201, 165, 92, .3);
  transform-origin: 50% 100%;
  transform: rotate(var(--handle-tilt));
}
/* empunhadura, junto ao pivô */
.forge-hammer__handle::after {
  content: "";
  position: absolute;
  display: none;
}

/* ----- cabeça: a ARESTA ESQUERDA encosta na ponta do braço ----- */
.forge-hammer__head {
  position: absolute;
  left: 0;                                 /* face exatamente na ponta do braço */
  top: calc(var(--head-face) / -2);        /* centrada na linha do braço */
  width: var(--head-len);
  height: var(--head-face);
  border-radius: 5px;
  background: linear-gradient(180deg, #d3ad63, #5a3d25);
  border: 2px solid #e8cf95;
  box-shadow: 0 0 12px rgba(232, 207, 149, .28);
}
/* a face que bate na bigorna (aresta colada na ponta do braço) */
.forge-hammer__head::before {
  content: "";
  display: none;
}
/* o "olho": anel por onde o cabo atravessa a cabeça */
.forge-hammer__head::after {
  content: "";
  position: absolute;
  display: none;
}
.forge-stage.is-struck .forge-hammer__head { animation: headFlash .5s ease-out; }

/* ----- onda de choque rasteira sobre a bigorna ----- */
.forge-ring {
  position: absolute;
  left: calc(50% + var(--hit-x));
  top: var(--hit-y);
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 238, 190, .9);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  pointer-events: none;
}
.forge-stage.is-struck .forge-ring { animation: forgeRing .9s var(--ease-out) forwards; }

/* ----- clarão no ponto do impacto ----- */
.forge-stage::before {
  content: "";
  position: absolute;
  left: calc(50% + var(--hit-x));
  top: var(--hit-y);
  z-index: 5;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 242, .95) 0%,
    rgba(255, 216, 130, .55) 28%,
    rgba(255, 190, 80, 0) 68%);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  pointer-events: none;
}
.forge-stage.is-struck::before { animation: forgeFlash .55s ease-out forwards; }

/* ----- faíscas ----- */
.forge-sparks {
  position: absolute;
  left: calc(50% + var(--hit-x));
  top: var(--hit-y);
  z-index: 6;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff6da;
  box-shadow: 0 0 10px 3px #e8cf95;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  pointer-events: none;
}
.forge-sparks--one   { --spark-x: -96px; --spark-y: -50px; }
.forge-sparks--two   { --spark-x:  78px; --spark-y: -64px; }
.forge-sparks--three { --spark-x: -56px; --spark-y: -86px; }
.forge-sparks--four  { --spark-x:  40px; --spark-y: -82px; }
.forge-sparks--five  { --spark-x: 112px; --spark-y: -28px; }
.forge-sparks--six   { --spark-x:-128px; --spark-y: -24px; }
.forge-sparks--seven { --spark-x: -14px; --spark-y:-104px; }
.forge-sparks--eight { --spark-x: -72px; --spark-y: -34px; }
.forge-stage.is-struck .forge-sparks { animation: forgeSpark .85s var(--ease-out) forwards; }
.forge-stage.is-struck .forge-sparks--two,
.forge-stage.is-struck .forge-sparks--four,
.forge-stage.is-struck .forge-sparks--six { animation-delay: 45ms; }
.forge-stage.is-struck .forge-sparks--three,
.forge-stage.is-struck .forge-sparks--five,
.forge-stage.is-struck .forge-sparks--seven,
.forge-stage.is-struck .forge-sparks--eight { animation-delay: 90ms; }

/* ----- sombra no chão ----- */
.forge-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  z-index: 0;
  width: calc(var(--anvil-w) * .78);
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  transform: translateX(-50%);
  filter: blur(6px);
}

.loader__name {
  margin-top: 22px;
  font-family: var(--font-deco);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--gold-light);
  letter-spacing: .22em;
  opacity: 0;
  animation: forgeIn 1.2s 1.12s var(--ease-out) forwards; /* acende no impacto */
}
.loader__tag {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .5em;
  color: var(--gold);
  opacity: 0;
  animation: fadeIn .9s 1.52s forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glow { to { filter: drop-shadow(0 0 10px rgba(232, 207, 149, .6)); } }
@keyframes forgeIn {
  from { opacity: 0; letter-spacing: .8em; filter: blur(8px); }
  to   { opacity: 1; letter-spacing: .22em; filter: blur(0); }
}
@keyframes fadeIn { to { opacity: 1; } }

/* GOLPE — anti-horário: -40deg (cabeça no alto) → -100deg (face na bigorna) */
@keyframes forgeStrike {
  0%   { transform: rotate(-40deg);  animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  20%  { transform: rotate(-30deg);  animation-timing-function: cubic-bezier(.62, .02, .88, .26); } /* armada */
  58%  { transform: rotate(-100deg); animation-timing-function: cubic-bezier(.14, .86, .3, 1); }    /* IMPACTO */
  66%  { transform: rotate(-88deg);  animation-timing-function: cubic-bezier(.5, 0, .5, 1); }       /* ricochete */
  76%  { transform: rotate(-100deg); animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
  85%  { transform: rotate(-94deg); }
  100% { transform: rotate(-100deg); }
}
/* animação-pista: não muda nada visualmente, só termina no instante do
   impacto (0.25s de atraso + 0.87s) para o JS soltar faíscas e luz na hora. */
@keyframes forgeImpact { from { opacity: .999; } to { opacity: 1; } }

@keyframes forgeSpark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  8%   { opacity: 1; transform: translate(calc(-50% + var(--spark-x) * .22), calc(-50% + var(--spark-y) * .45)) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y) + 30px)) scale(.12); }
}
@keyframes forgeFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
@keyframes forgeRing {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.2, .2); border-width: 3px; }
  10%  { opacity: .95; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(9, 2.6); border-width: 1px; }
}
@keyframes forgeGlow {
  0%   { opacity: 0;  transform: translate(-50%, -40%) scale(.35); }
  12%  { opacity: 1;  transform: translate(-50%, -40%) scale(1.04); }
  45%  { opacity: .7; transform: translate(-50%, -40%) scale(1.16); }
  100% { opacity: .5; transform: translate(-50%, -40%) scale(1.1); }
}
@keyframes anvilGlow {
  0%   { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(232, 207, 149, .28)); }
  10%  { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)) drop-shadow(0 0 40px rgba(255, 228, 152, 1)) brightness(1.4); }
  45%  { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 26px rgba(255, 216, 140, .75)) brightness(1.15); }
  100% { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 20px rgba(232, 207, 149, .45)); }
}
@keyframes headFlash {
  0%   { box-shadow: 0 0 16px rgba(232, 207, 149, .22), inset 0 0 14px rgba(0, 0, 0, .35); }
  15%  { box-shadow: 0 0 34px rgba(255, 232, 160, .95), inset 0 0 14px rgba(0, 0, 0, .2); }
  100% { box-shadow: 0 0 16px rgba(232, 207, 149, .22), inset 0 0 14px rgba(0, 0, 0, .35); }
}

/* ---------- 6. Animações de entrada (scroll) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

.js [data-reveal="line"] {
  opacity: 0; filter: none;
  transform: scaleX(0);
  transition: transform 1.5s var(--ease-out) var(--d, 0ms), opacity .8s var(--d, 0ms);
}
.js [data-reveal="line"].is-visible { opacity: 1; transform: scaleX(1); }

.js [data-reveal="mask"],
.js [data-reveal="stage"] { opacity: 1; transform: none; filter: none; }
.mask { display: block; overflow: hidden; padding-bottom: .06em; }
.mask > span { display: block; }
.js [data-reveal="mask"] .mask > span {
  transform: translateY(110%);
  transition: transform 1.15s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="mask"] .mask + .mask > span { transition-delay: calc(var(--d, 0ms) + 120ms); }
.js [data-reveal="mask"].is-visible .mask > span { transform: none; }

.js [data-reveal="forge"] { transform: none; }
.js [data-reveal="forge"] .hero__name { letter-spacing: .4em; transition: letter-spacing 1.6s var(--ease-out); }
.js [data-reveal="forge"].is-visible .hero__name { letter-spacing: .06em; }

/* ---------- 7. Cabeçalho ---------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  background: linear-gradient(180deg, rgba(5, 13, 25, .88), rgba(8, 21, 39, .6));
  border-bottom: 1px solid rgba(201, 165, 92, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: height .45s var(--ease-out), background .45s, box-shadow .45s, border-color .45s;
}
.header.is-scrolled {
  height: 70px;
  background: rgba(6, 15, 29, .94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.header__inner { height: 100%; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }

.header__progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  box-shadow: 0 0 8px var(--gold);
}

/* Marca / logo */
.brand { display: flex; align-items: center; flex: none; }
.brand__img { height: 58px; width: auto; transition: height .45s var(--ease-out); }
.header.is-scrolled .brand__img { height: 46px; }
.brand__fallback { display: none; align-items: center; gap: 14px; }
.brand.is-fallback .brand__img { display: none; }
.brand.is-fallback .brand__fallback { display: flex; }
.brand__emblem {
  width: 50px; height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(201, 165, 92, .4));
  transition: width .45s var(--ease-out), height .45s var(--ease-out), transform .8s var(--ease-out);
}
.brand:hover .brand__emblem { transform: scale(1.06); }
.header.is-scrolled .brand__emblem { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand__name {
  font-family: var(--font-deco);
  font-size: 1.85rem;
  letter-spacing: .16em;
  color: var(--gold-light);
}
.brand__tag {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .44em;
  color: var(--gold);
}

/* Navegação */
.nav { position: relative; margin-left: auto; }
.nav__list { display: flex; gap: clamp(22px, 3vw, 40px); }
.nav__link {
  display: block;
  padding: 8px 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-light);
  transition: color .3s;
}
.nav__link:hover,
.nav__link.is-active { color: var(--gold-light); }
.nav__indicator {
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold-light) 20%, var(--gold-light) 80%, transparent);
  box-shadow: 0 0 10px rgba(201, 165, 92, .7);
  transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .3s;
  pointer-events: none;
}
.nav__indicator.is-ready { opacity: 1; }
.nav__indicator::after { /* pequeno losango no centro do sublinhado */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--gold-light);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- 8. Botão do menu mobile ---------- */
.burger {
  display: none;
  position: relative;
  z-index: 70;
  width: 48px; height: 48px;
  margin-left: auto;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  transition: border-color .4s, background .4s;
}
.burger::before { /* anel pontilhado que gira quando o menu abre */
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px dashed var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .5s, transform .7s var(--ease-out);
}
.burger__line,
.burger__gem { position: absolute; left: 50%; top: 50%; }
.burger__line {
  width: 20px; height: 1.5px;
  background: var(--gold-light);
  border-radius: 2px;
  transition: transform .6s var(--ease-out), width .6s var(--ease-out);
}
.burger__line:first-child { transform: translate(-50%, -8px); }
.burger__line:last-child  { transform: translate(-50%, 7px); width: 14px; }
.burger:hover .burger__line:last-child { width: 20px; }
.burger__gem {
  width: 6px; height: 6px;
  border: 1px solid var(--gold-light);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .7s var(--ease-out), opacity .4s;
}
.burger[aria-expanded="true"] { border-color: var(--gold); background: rgba(8, 21, 39, .5); }
.burger[aria-expanded="true"]::before { opacity: .6; transform: scale(1); animation: spin 14s linear infinite; }
.burger[aria-expanded="true"] .burger__line:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:last-child  { transform: translate(-50%, -50%) rotate(-45deg); width: 20px; }
.burger[aria-expanded="true"] .burger__gem { transform: translate(-50%, -50%) rotate(225deg) scale(0); opacity: 0; }

@keyframes spin { to { rotate: 360deg; } }

/* ---------- 9. Menu mobile ("portal") ---------- */
.portal {
  --ox: calc(100% - 44px);
  --oy: 44px;
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) clamp(28px, 8vw, 56px) 36px;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, #173561 0%, var(--navy-850) 50%, #030811 100%);
  clip-path: circle(0 at var(--ox) var(--oy));
  visibility: hidden;
  transition: clip-path .9s var(--ease-in-out), visibility 0s linear .9s;
}
.portal.is-open {
  clip-path: circle(150% at var(--ox) var(--oy));
  visibility: visible;
  transition: clip-path 1s var(--ease-in-out), visibility 0s;
}
.portal__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 64% 38%, rgba(232, 207, 149, .9), transparent),
    radial-gradient(1px 1px at 30% 62%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 88% 72%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 18% 86%, rgba(232, 207, 149, .8), transparent),
    radial-gradient(1px 1px at 52% 92%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 42% 24%, rgba(255, 255, 255, .5), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.portal__emblem {
  position: absolute;
  left: 50%; top: 52%;
  width: 150vmin; height: 150vmin;
  translate: -50% -50%;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: .25;
  opacity: .08;
  pointer-events: none;
  animation: spin 90s linear infinite;
}
.portal__nav { position: relative; margin-block: auto; }
.portal__list { display: flex; flex-direction: column; gap: clamp(6px, 2.2vh, 18px); }
.portal__link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 6px 0;
  opacity: 0;
  transform: translateX(48px);
  filter: blur(8px);
  transition: opacity .5s, transform .7s var(--ease-out), filter .5s;
}
.portal.is-open .portal__link {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(.4s + var(--i, 0) * 90ms);
}
.portal__list li { --i: 0; }
.portal__list li .portal__link { transition-delay: 0s; }
.portal.is-open .portal__list li .portal__link { transition-delay: calc(.4s + var(--i) * 90ms); }
.portal__num {
  width: 2.4em;
  flex: none;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .15em;
  color: var(--gold);
}
.portal__label {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 11vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-light);
  transition: color .3s;
}
.portal__label::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-light), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.portal__link:hover .portal__label,
.portal__link.is-active .portal__label { color: var(--gold-light); }
.portal__link:hover .portal__label::after,
.portal__link.is-active .portal__label::after { transform: scaleX(1); }
.portal__footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid var(--gold-faint);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s, transform .7s var(--ease-out);
}
.portal.is-open .portal__footer { opacity: 1; transform: none; transition-delay: .8s; }
.portal__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 34ch;
}
body.menu-open .header {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-open .header__progress { opacity: 0; }

/* ---------- 10. Hero / Início ---------- */
.hero {
  position: relative;
  z-index: 2;
  min-height: clamp(620px, 100svh, 880px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 56px) 0 96px;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero__bg {
  position: absolute;
  inset: -10% 0 0;
  background:
    radial-gradient(ellipse 48% 66% at 50% 46%, rgba(8, 21, 39, .18) 0%, rgba(8, 21, 39, .66) 58%, rgba(5, 13, 25, .94) 100%),
    linear-gradient(180deg, rgba(5, 13, 25, .52) 0%, rgba(8, 21, 39, .12) 32%, rgba(8, 21, 39, .22) 68%, rgba(8, 21, 39, .95) 100%),
    url("img/hero.png") center / cover no-repeat,
    radial-gradient(ellipse at center top, #f0d7a0 0%, #6d86a8 16%, #274670 38%, #0d1f38 70%, #081527 100%);
  will-change: transform;
}
.hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero::after { /* fio dourado na base */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold) 50%, var(--gold-line) 80%, transparent);
}
.hero__seam {
  position: absolute;
  left: 50%; bottom: 0;
  z-index: 3;
  width: 13px; height: 13px;
  background: var(--navy-850);
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: translate(-50%, 50%) rotate(45deg);
  animation: seam 2.4s ease-in-out infinite;
}
@keyframes seam {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 165, 92, 0); }
  50%      { box-shadow: 4px 4px 14px rgba(232, 207, 149, .55); }
}

.hero__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero__content { max-width: 720px; margin-inline: auto; }

.hero__wordmark { display: flex; flex-direction: column; align-items: center; }
.hero__name {
  font-family: var(--font-deco);
  font-size: clamp(3.2rem, 7.4vw, 5.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .06em;
  background: linear-gradient(100deg, #b08843 0%, #f5e1ad 22%, #c9a55c 42%, #fff3d1 55%, #c9a55c 70%, #a07a36 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShift 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45));
}
@keyframes goldShift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.hero__tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-left: .2em;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.7vw, 1.3rem);
  letter-spacing: .48em;
  color: #e9dcc0;
}
.hero__tag::before,
.hero__tag::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .8; }

.hero__divider { margin: 30px 0 26px; }
.hero__divider { justify-content: center; }
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.7vw, 3rem);
  font-weight: 500;
  line-height: 1.16;
  color: #f4f6fa;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero__text {
  max-width: 34em;
  margin: 20px 0 32px;
  font-size: 1.16rem;
  line-height: 1.6;
  color: #d9e0ea;
  margin-inline: auto;
}

.hero__quote {
  align-self: start;
  justify-self: end;
  max-width: 300px;
  margin-top: -20px;
  text-align: center;
}
.hero__quote p {
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #26395a;
  text-shadow: 0 0 18px rgba(255, 244, 220, .6);
}
/* Sem a imagem do hero, a citação ficaria sobre fundo escuro: fica clara até a imagem existir */
.hero--no-image .hero__quote p { color: #e9dcc0; text-shadow: none; }

/* ---------- 11. Serviços ---------- */
.services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(68px, 8vw, 96px) 0 clamp(72px, 9vw, 110px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, #122a4b 0%, #0c1d36 55%, var(--navy-900) 100%);
}
.services::before { /* poeira estelar */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 22% 30%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 70% 18%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 84% 64%, rgba(232, 207, 149, .6), transparent),
    radial-gradient(1px 1px at 36% 80%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1px 1px at 55% 50%, rgba(255, 255, 255, .3), transparent);
}

.circuit {
  position: absolute;
  top: 0;
  z-index: -1;
  width: clamp(80px, 14vw, 210px);
  height: 100%;
  color: var(--gold);
}
.circuit--left { left: 0; }
.circuit--right { right: 0; transform: scaleX(-1); }
.circuit__path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .26; vector-effect: non-scaling-stroke; }
.circuit__node { fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.circuit__pulse {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px var(--gold));
  animation: pulse var(--t, 7s) linear infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes pulse { to { stroke-dashoffset: 0; } }

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(44px, 5vw, 58px);
  font-family: var(--font-display);
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .42em;
  color: var(--gold);
}
.section-title__text { white-space: nowrap; padding-left: .42em; }
.section-title__line {
  flex: 0 1 210px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section-title__line--r { background: linear-gradient(90deg, var(--gold), transparent); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  align-items: start;
  max-width: 1010px;
  margin-inline: auto;
}

.card { --cut: 14px; position: relative; perspective: 900px; }
.card__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out);
}
.card:hover .card__inner { transform: translateY(-6px); }
.card__gem {
  position: absolute;
  left: 50%; top: 0;
  z-index: 3;
  width: 11px; height: 11px;
  background: var(--navy-800);
  border: 1px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background .4s, box-shadow .4s;
}
.card:hover .card__gem,
.card.is-open .card__gem { background: var(--gold-light); box-shadow: 0 0 12px var(--gold); }

.card__frame { /* o fundo desta camada é a "borda"; o ::before é o miolo */
  --mx: -999px;
  --my: -999px;
  position: relative;
  padding: 42px clamp(20px, 2.4vw, 30px) 30px;
  text-align: center;
  background:
    radial-gradient(240px circle at var(--mx) var(--my), var(--gold-light), transparent 70%),
    var(--gold-line);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.card__frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(180deg, rgba(14, 33, 60, .97), rgba(9, 22, 41, .98));
  clip-path: inherit;
}
.card__frame > * { position: relative; }
.card__glow {
  position: absolute !important;
  inset: 0;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(232, 207, 149, .12), transparent 65%);
  pointer-events: none;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  margin: 0 auto 22px;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  transition: color .4s, box-shadow .5s;
}
.card__icon::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(201, 165, 92, .6);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .5s;
  animation: spin 16s linear infinite;
}
.card__icon svg {
  width: 36px; height: 36px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .7s var(--ease-out);
}
.card:hover .card__icon { color: var(--gold-light); box-shadow: 0 0 24px rgba(201, 165, 92, .3), inset 0 0 16px rgba(201, 165, 92, .18); }
.card:hover .card__icon::before { opacity: 1; }
.card:hover .card__icon svg { transform: scale(1.08); }

.card__title {
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.2;
  color: #f2f4f8;
}
.card__text { min-height: 4.95em; font-size: 1.02rem; line-height: 1.65; color: var(--text-muted); }

.card__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-out);
}
.card.is-open .card__more { grid-template-rows: 1fr; }
.card__more-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity .5s;
}
.card.is-open .card__more-inner { opacity: 1; transition-delay: .2s; }
.card__more-inner p { font-size: 1rem; line-height: 1.65; color: var(--text-muted); }
.card__more-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 14px;
  width: 70%;
}
.card__more-divider::before,
.card__more-divider::after { content: ""; flex: 1; height: 1px; background: var(--gold-faint); }

.card__toggle {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 22px;
  padding: 4px 2px;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--gold);
  background: linear-gradient(var(--gold-light), var(--gold-light)) left bottom / 0 1px no-repeat;
  transition: color .3s, background-size .5s var(--ease-out);
}
.card__toggle:hover { color: var(--gold-light); background-size: 100% 1px; }
.card__toggle svg {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--ease-out);
}
.card__toggle:hover svg { transform: translateX(4px); }
.card.is-open .card__toggle svg { transform: rotate(-90deg); }

/* ---------- 12. Sobre ---------- */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 84px) 0;
  color: var(--ink-soft);
  background:
    radial-gradient(ellipse 60% 80% at 15% 20%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(ellipse 40% 50% at 40% 90%, rgba(196, 206, 219, .45), transparent 70%),
    linear-gradient(115deg, #f5f7fa 0%, #e9edf2 45%, #dde3eb 100%);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.about__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: -1;
  width: 48%;
  background:
    url("img/sobre.png") center / cover no-repeat,
    radial-gradient(circle at 62% 58%, #4f86c9 0%, #1d3f70 26%, #0f2446 55%, #0a1629 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, #000 62%);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, 1.05fr);
  align-items: center;
}
.about__content { padding-right: clamp(24px, 4vw, 48px); }
.about__title {
  margin: 14px 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
}
.about__text { max-width: 36em; margin-bottom: 28px; font-size: 1.04rem; line-height: 1.7; }

.values {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 6px 0 6px clamp(20px, 2.5vw, 30px);
}
.values::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s var(--ease-out);
}
.values.is-visible::before,
html:not(.js) .values::before { transform: scaleY(1); }

.value { display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-items: start; }
.value__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: transform .7s var(--ease-out), box-shadow .5s, background .5s;
}
.value__icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.value:hover .value__icon { transform: rotate(-12deg) scale(1.06); background: #fff; box-shadow: 0 0 18px rgba(201, 165, 92, .45); }
.value__title { margin-top: 2px; font-family: var(--font-heading); font-size: 1.28rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.value__text { margin-top: 4px; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }

/* ---------- 13. Faixa de contato (CTA) ---------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(46px, 5.5vw, 62px) 0;
  border-bottom: 1px solid var(--gold-line);
}
.cta__bg {
  position: absolute;
  inset: -18% 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 21, 39, .9) 0%, rgba(8, 21, 39, .45) 50%, rgba(8, 21, 39, .85) 100%),
    url("img/banner.png") center / cover no-repeat,
    radial-gradient(ellipse at 60% 30%, #3b5d8a 0%, #15305a 40%, var(--navy-800) 80%);
  will-change: transform;
}
.cta__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 34px); }
.cta__emblem {
  flex: none;
  width: 46px; height: 92px;
  color: var(--gold);
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(201, 165, 92, .4));
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.cta__title {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 500;
  line-height: 1.2;
  color: #f3f5f9;
}
.cta__text p { max-width: 28em; font-size: 1.02rem; line-height: 1.55; color: var(--text-muted); }
.cta__btn { margin-left: auto; flex: none; }

/* ---------- 14. Rodapé ---------- */
.footer {
  padding: 40px 0 26px;
  font-size: .95rem;
  color: var(--text-muted);
  background: linear-gradient(180deg, #071224, var(--navy-950));
}
.footer__top {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gold-faint);
}
.brand--footer .brand__img { height: 50px; }
.brand--footer .brand__emblem { width: 42px; height: 42px; }
.brand--footer .brand__name { font-size: 1.55rem; }

.footer__contacts {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 16px 32px;
}
.footer__contacts a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .3s;
}
.footer__contacts svg {
  width: 21px; height: 21px;
  color: var(--gold);
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--ease-out);
}
.footer__contacts a:hover { color: var(--gold-light); }
.footer__contacts a:hover svg { transform: translateY(-2px) rotate(-8deg); }

.footer__social {
  display: flex;
  gap: 18px;
  padding-left: clamp(24px, 3vw, 38px);
  border-left: 1px solid var(--gold-faint);
  align-self: stretch;
  align-items: center;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  color: #9fb2cf;
  border-radius: 50%;
  transition: color .3s, transform .4s var(--ease-out), box-shadow .4s;
}
.footer__social svg { width: 19px; height: 19px; }
.footer__social a:hover { color: var(--gold-light); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold-line), 0 0 16px rgba(201, 165, 92, .3); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 22px;
  font-size: .8rem;
}
.footer__motto {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--gold);
}
.footer__motto span { margin-inline: .7em; font-size: .7em; vertical-align: .15em; }

/* ---------- 15. Modal "Nossa história" ---------- */
.modal {
  width: min(680px, calc(100% - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  color: var(--text-light);
  background: transparent;
  overflow: visible;
}
.modal::backdrop {
  background: rgba(3, 8, 17, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal[open] { animation: modalIn .7s var(--ease-out); }
.modal[open]::backdrop { animation: fadeIn .5s forwards; opacity: 0; }
.modal.is-closing { animation: modalOut .35s ease-in forwards; }
.modal.is-closing::backdrop { animation: fadeOut .35s forwards; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes modalOut { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.modal__frame {
  position: relative;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  padding: clamp(36px, 6vw, 56px) clamp(24px, 6vw, 56px);
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #173561 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.modal__frame::before { /* cantoneiras douradas */
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  --c: var(--gold);
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px 22px,
    linear-gradient(var(--c), var(--c)) top right / 22px 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px 22px,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 22px,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 22px;
  background-repeat: no-repeat;
}
.modal .eyebrow { color: var(--gold); }
.modal__title {
  margin: 12px 0 18px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  color: #f3f5f9;
}
.modal .ornament-line { max-width: 220px; margin: 0 auto 26px; }
.modal__body { text-align: left; }
.modal__body p { margin-bottom: 1em; font-size: 1.08rem; line-height: 1.75; color: var(--text-muted); }
.modal__body p:last-child { margin-bottom: 0; }
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--gold);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  transition: color .3s, transform .5s var(--ease-out), background .3s;
}
.modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.modal__close:hover { color: var(--navy-900); background: var(--gold); transform: rotate(90deg); }

/* ---------- 16. Responsivo ---------- */
@media (max-width: 1080px) {
  .header__cta { display: none; }
}

@media (max-width: 960px) {
  :root { --header-h: 76px; }
  .header.is-scrolled { height: 66px; }
  .nav { display: none; }
  .burger { display: block; }
  .brand__img { height: 48px; }
  .brand__emblem { width: 42px; height: 42px; }
  .brand__name { font-size: 1.55rem; }

  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__quote { justify-self: start; margin-top: 0; max-width: 360px; text-align: left; }
  .hero__quote .ornament-line--short { margin-left: 0; }
  .hero__quote p { color: #e9dcc0; text-shadow: none; }

  .about { display: flex; flex-direction: column; padding-bottom: 0; }
  .about__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); row-gap: 44px; }
  .about__media {
    position: relative;
    order: 2;
    width: 100%;
    height: clamp(240px, 45vw, 340px);
    margin-top: 48px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  }

  .footer__top { flex-direction: column; align-items: center; text-align: center; }
  .footer__contacts { justify-content: center; }
  .footer__social { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--gold-faint); }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 820px) {
  .services__grid { grid-template-columns: minmax(0, 460px); justify-content: center; gap: 28px; }
  .card__text { min-height: 0; }
  .circuit { opacity: .55; }
  .circuit--right { display: none; }
}

@media (max-width: 720px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__content { padding-right: 0; }

  .cta__inner { flex-direction: column; text-align: center; }
  .cta__text p { margin-inline: auto; }
  .cta__btn { margin-left: 0; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }

  /* forja menor no celular — o impacto continua alinhado sozinho */
  .forge-stage {
    --stage-h: 268px;
    --anvil-w: 190px;
    --arm: 122px;
    --handle-w: 9px;
    --head-len: 46px;
    --head-face: 24px;
  }
  .forge-hammer__handle::after { height: 28px; }
  .loader__name { margin-top: 16px; }

  .hero { min-height: auto; padding: calc(var(--header-h) + 44px) 0 80px; }
  .hero__content { text-align: center; margin-inline: auto; }
  .hero__wordmark { align-items: center; }
  .hero__text { margin-inline: auto; }
  .hero__quote { justify-self: center; text-align: center; }
  .hero__quote .ornament-line--short { margin-inline: auto; }
  .hero__bg {
    background:
      linear-gradient(180deg, rgba(5, 13, 25, .7) 0%, rgba(8, 21, 39, .75) 55%, rgba(8, 21, 39, .95) 100%),
      url("img/hero.png") 65% center / cover no-repeat,
      radial-gradient(ellipse at 70% 20%, #f0d7a0 0%, #6d86a8 18%, #274670 42%, #0d1f38 75%, #081527 100%);
  }

  .section-title { gap: 10px; letter-spacing: .3em; }
  .section-title__text { padding-left: .3em; }
  .section-title__line { flex-basis: 40px; }

  .footer__contacts { flex-direction: column; align-items: center; }
}

/* ---------- 17. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .loader { display: none !important; }
}