/* ============================================================
   ForjaDev — style.css
   Depende de tokens.css. Nenhuma variavel nova de marca aqui:
   tudo abaixo consome os tokens de FORJADEV-BRAND-GUIDE.
   ============================================================ */

/* ---------- 1. RESET E BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--fd-header-h-scroll) + 16px);
}
body{
  font-family:var(--fd-font-texto);
  font-size:var(--fd-size-body);
  line-height:var(--fd-lh-base);
  color:var(--fd-aco-frio);
  background:var(--fd-bigorna);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}

h1,h2,h3,h4{line-height:var(--fd-lh-tight);text-wrap:balance}
h1,h2{font-family:var(--fd-font-display);font-weight:400;color:var(--fd-aco)}
h3{font-family:var(--fd-font-texto);font-weight:700;font-size:var(--fd-size-h3);color:var(--fd-aco)}
p{text-wrap:pretty}

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

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pular-para-conteudo{
  position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  background:var(--fd-aco);color:#fff;font-weight:700;
  padding:12px 20px;text-decoration:none;
  transition:transform var(--fd-dur-media) var(--fd-ease);
}
.pular-para-conteudo:focus{transform:translateY(0)}

/* ---------- 2. LAYOUT ---------- */
.wrap{
  width:100%;max-width:var(--fd-wrap);
  margin-inline:auto;padding-inline:var(--fd-gutter);
}
.secao{position:relative;padding-block:var(--fd-secao-y);overflow:hidden}

/* Contexto de cor. Toda secao declara o par texto/texto-secundario.
   Em secao escura o secundario e SEMPRE --fd-cinza-claro:
   Cinza Lima (#5F6A76) reprova em contraste sobre Aco. */
.secao--escura{
  --txt:#FFFFFF;
  --txt-2:var(--fd-cinza-claro);
  --superficie:var(--fd-aco-elevado);
  --borda:rgba(255,255,255,.12);
  background-color:var(--fd-aco);
  color:var(--txt);
}
.secao--clara{
  --txt:var(--fd-aco);
  --txt-2:var(--fd-cinza);
  --superficie:var(--fd-branco);
  --borda:rgba(20,26,32,.12);
  background-color:var(--fd-bigorna);
  color:var(--fd-aco-frio);
}
.secao--escura h1,.secao--escura h2,.secao--escura h3{color:var(--txt)}

/* Superficie clara dentro de secao escura (card branco): o texto
   secundario volta ao Cinza Lima, que e aprovado sobre branco (5.51:1). */
.superficie-clara{--txt:var(--fd-aco);--txt-2:var(--fd-cinza)}

/* Texturas de fundo — nunca atras de texto corrido, so no fundo da secao */
.secao__textura{
  position:absolute;inset:-12% 0 -12% 0;
  pointer-events:none;z-index:0;
}

/* Parallax do fundo texturizado.
   Feito com scroll-driven animation: roda no compositor, nao encosta na
   linha principal e nao pode gerar layout shift — ao contrario da versao
   em JS, que reposicionava a camada a cada quadro de scroll e o Chrome
   contabilizava como deslocamento. Onde nao houver suporte, a textura
   simplesmente fica parada, que e um estado valido. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .secao__textura{
      animation:parallaxTextura linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    .hero__brilho{
      animation:parallaxBrilho linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes parallaxTextura{
  from{background-position:0 -70px}
  to{background-position:0 70px}
}
@keyframes parallaxBrilho{
  from{background-position:0 -90px}
  to{background-position:0 90px}
}
.secao__textura--aco{
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.022) 0px,rgba(255,255,255,.022) 1px,
    transparent 1px,transparent 8px);
}
.secao__textura--grid{
  background-image:radial-gradient(circle,rgba(20,26,32,.08) 1px,transparent 1px);
  background-size:16px 16px;
}
.secao > .wrap{position:relative;z-index:1}

/* ---------- 3. TIPOGRAFIA DE APOIO ---------- */
.rotulo{
  font-family:var(--fd-font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:var(--fd-size-label);line-height:1.3;
}
.mono{font-family:var(--fd-font-code);font-size:var(--fd-size-code)}

.secao__cabecalho{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.secao__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--fd-laranja);margin-bottom:.75rem;
}
.secao--clara .secao__eyebrow{color:var(--fd-brasa-texto)} /* laranja nao e texto sobre claro */
.secao__eyebrow::before{content:"//" / "";font-family:var(--fd-font-code);font-weight:700}
.secao__titulo{font-size:clamp(1.75rem,4.2vw,2.75rem)}
.secao__lead{
  font-size:var(--fd-size-body-lg);color:var(--txt-2);
  margin-top:1rem;max-width:56ch;
}

/* Divisor tecnico tracejado 6/6 — substitui a linha simples */
.divisor{
  height:2px;border:0;margin:0;
  background:repeating-linear-gradient(90deg,
    var(--fd-laranja) 0px,var(--fd-laranja) 6px,
    transparent 6px,transparent 12px);
}
.divisor--curto{width:120px}

/* ---------- 4. CHANFRO SISTEMICO ---------- */
.chanfro-lg{clip-path:polygon(0 0,calc(100% - var(--fd-chanfro-lg)) 0,100% var(--fd-chanfro-lg),100% 100%,0 100%)}
.chanfro-sm{clip-path:polygon(0 0,calc(100% - var(--fd-chanfro-sm)) 0,100% var(--fd-chanfro-sm),100% 100%,0 100%)}

/* ---------- 5. BOTOES ---------- */
.btn{
  --fd-ch:var(--fd-chanfro-sm);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--fd-font-texto);font-weight:700;font-size:1rem;
  line-height:1.2;text-decoration:none;text-align:center;
  padding:.95rem 1.6rem;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--fd-ch)) 0,100% var(--fd-ch),100% 100%,0 100%);
  transition:--fd-ch var(--fd-dur-media) var(--fd-ease),
             background-color var(--fd-dur-media) var(--fd-ease),
             transform var(--fd-dur-media) var(--fd-ease),
             box-shadow var(--fd-dur-media) var(--fd-ease),
             color var(--fd-dur-media) var(--fd-ease);
}
.btn:hover,.btn:focus-visible{--fd-ch:var(--fd-chanfro-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Brilho de brasa: acende no ponto onde o cursor esta */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
    rgba(255,176,32,.42),transparent 60%);
  opacity:0;transition:opacity var(--fd-dur-lenta) var(--fd-ease);
}
.btn:hover::after{opacity:1}

.btn--primario{background:var(--fd-brasa);color:#fff}     /* 4.90:1 — unico laranja com texto branco */
.btn--primario:hover{background:#B03A00;box-shadow:0 8px 26px rgba(201,67,0,.36)}

.btn--aco{background:var(--fd-aco);color:#fff}
.btn--aco:hover{background:#0D1217;box-shadow:0 8px 26px rgba(20,26,32,.34)}

.btn--contorno{background:transparent;color:var(--fd-aco);box-shadow:inset 0 0 0 2px var(--fd-aco)}
.btn--contorno:hover{background:var(--fd-aco);color:#fff}
.secao--escura .btn--contorno,.hero .btn--contorno,.header .btn--contorno,.erro .btn--contorno{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.secao--escura .btn--contorno:hover,.hero .btn--contorno:hover,.header .btn--contorno:hover,.erro .btn--contorno:hover{background:#fff;color:var(--fd-aco)}

.btn--bloco{width:100%}
.btn--pequeno{padding:.7rem 1.15rem;font-size:.9375rem}

/* ---------- 6. BADGE / PILL — mantem o raio, nunca recebe chanfro ---------- */
.badge{
  display:inline-block;border-radius:var(--fd-r-pill);
  padding:.25rem .75rem;
  background:rgba(255,106,0,.12);color:var(--fd-brasa-texto);
  font-family:var(--fd-font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--fd-size-label);
}
.badge--escuro{background:var(--fd-faisca);color:var(--fd-aco)}  /* 9.58:1 sobre Aco */

/* ---------- 7. TERMINAL ---------- */
.terminal{
  background:var(--fd-aco);overflow:hidden;
  font-family:var(--fd-font-code);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  clip-path:polygon(0 0,calc(100% - var(--fd-chanfro-lg)) 0,100% var(--fd-chanfro-lg),100% 100%,0 100%);
}
.secao--escura .terminal{box-shadow:0 18px 50px rgba(0,0,0,.5);outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.terminal__header{
  background:var(--fd-aco-frio);padding:.6rem .85rem;
  display:flex;align-items:center;gap:6px;
}
.terminal__header i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.dot--erro{background:var(--fd-erro)}
.dot--alerta{background:var(--fd-faisca)}
.dot--sucesso{background:var(--fd-sucesso)}
.terminal__titulo{
  margin-left:auto;color:var(--fd-cinza-claro);
  font-family:var(--fd-font-code);font-size:.75rem;letter-spacing:.02em;
}
.terminal__body{
  padding:1.15rem;color:var(--fd-bigorna);
  font-size:var(--fd-size-code);line-height:1.75;
  overflow-x:auto;overscroll-behavior-x:contain;
}
@media (max-width:420px){
  .terminal__body{font-size:.8125rem;padding:.9rem}
}
.terminal__body .prompt{color:var(--fd-laranja);font-weight:400}
.terminal__body .comentario{color:#8E99A4}       /* 4.9:1 sobre Aco */
.terminal__body .ok{color:#4ADE80}
.terminal__linha{display:block;white-space:pre}


/* ---------- 8. HEADER ---------- */
.progresso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:var(--fd-laranja);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}
.header{
  position:fixed;top:0;left:0;right:0;z-index:110;
  height:var(--fd-header-h);
  display:flex;align-items:center;
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(20,26,32,.92) 0%,rgba(20,26,32,.55) 55%,rgba(20,26,32,0) 100%);
  transition:height var(--fd-dur-lenta) var(--fd-ease),
             background-color var(--fd-dur-lenta) var(--fd-ease),
             box-shadow var(--fd-dur-lenta) var(--fd-ease),
             backdrop-filter var(--fd-dur-lenta) var(--fd-ease);
}
.header.is-scrolled{
  height:var(--fd-header-h-scroll);
  background-color:rgba(20,26,32,.96);
  background-image:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 26px rgba(0,0,0,.34);
}
.header.is-scrolled::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,
    var(--fd-laranja) 0px,var(--fd-laranja) 6px,transparent 6px,transparent 12px);
  opacity:.85;
}
.header__wrap{display:flex;align-items:center;gap:1.5rem;width:100%}
.header__logo{display:flex;align-items:center;flex:none;text-decoration:none}
.header__logo img{
  height:30px;width:auto;
  transition:height var(--fd-dur-lenta) var(--fd-ease);
}
.header.is-scrolled .header__logo img{height:26px}  /* minimo de marca: 24px */

.nav{margin-left:auto}
.nav__lista{display:flex;align-items:center;gap:clamp(.75rem,1.8vw,1.75rem)}
.nav__link{
  position:relative;display:block;padding:.4rem 0;
  color:rgba(255,255,255,.86);text-decoration:none;
  font-family:var(--fd-font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;font-size:.9375rem;
  transition:color var(--fd-dur-media) var(--fd-ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--fd-laranja);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--fd-dur-media) var(--fd-ease);
}
.nav__link:hover,.nav__link:focus-visible,.nav__link.is-ativo{color:#fff}
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__link.is-ativo::after{transform:scaleX(1)}
.header__cta{flex:none}

.nav__toggle{
  display:none;flex:none;margin-left:auto;
  width:44px;height:44px;background:transparent;border:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav__toggle span{
  display:block;width:24px;height:2px;background:#fff;position:relative;
  transition:background var(--fd-dur-rapida) var(--fd-ease);
}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:#fff;
  transition:transform var(--fd-dur-media) var(--fd-ease),top var(--fd-dur-media) var(--fd-ease);
}
.nav__toggle span::before{top:-7px}
.nav__toggle span::after{top:7px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .nav__toggle{display:inline-flex}
  .header__cta{display:none}
  /* Painel de tela cheia: o menu nao pode deixar o hero aparecer por baixo */
  .nav{
    position:fixed;inset:var(--fd-header-h) 0 0 0;
    background:rgba(20,26,32,.985);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    margin:0;padding:1.25rem var(--fd-gutter) 2.5rem;
    border-top:1px solid rgba(255,255,255,.1);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--fd-dur-lenta) var(--fd-ease),
               transform var(--fd-dur-lenta) var(--fd-ease),
               visibility 0s linear var(--fd-dur-lenta);
  }
  .nav.is-aberto{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav__lista{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{
    padding:.9rem 0;font-size:1.0625rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav__link::after{display:none}
  .nav__cta-mobile{margin-top:1.25rem;display:block}
}
@media (min-width:901px){.nav__cta-mobile{display:none}}

/* ---------- 9. HERO ---------- */
.hero{
  position:relative;
  min-height:min(100svh,940px);
  display:flex;align-items:center;
  padding-top:calc(var(--fd-header-h) + clamp(2rem,6vw,4rem));
  padding-bottom:clamp(3rem,7vw,5rem);
  background-color:var(--fd-aco);
  color:#fff;
  --txt-2:var(--fd-cinza-claro);
  overflow:hidden;
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.hero__brilho{
  position:absolute;z-index:0;pointer-events:none;
  width:min(70vw,760px);aspect-ratio:1;
  top:-18%;right:-14%;
  background:radial-gradient(circle,rgba(255,106,0,.14),transparent 62%);
  will-change:transform;
}
.hero .wrap{position:relative;z-index:2}
.hero__grade{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:1000px){
  .hero__grade{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--fd-laranja);margin-bottom:1rem;
}
.hero__eyebrow::before{
  content:"";width:8px;height:8px;flex:none;
  background:var(--fd-laranja);
  transform:rotate(-18deg);
}
.hero__titulo{
  font-size:clamp(2.1rem,5.2vw,3.5rem);   /* teto de 56px — H1 de landing no brand guide */
  color:#fff;letter-spacing:-.01em;
}
.hero__destaque{color:var(--fd-laranja)}  /* 6.10:1 sobre Aco */
.hero__sub{
  font-size:clamp(1.0625rem,1.9vw,1.1875rem);
  color:var(--txt-2);margin-top:1.35rem;max-width:52ch;
}
.hero__sub strong{color:#fff;font-weight:700}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__nota{
  margin-top:1.5rem;color:var(--txt-2);
  display:flex;align-items:center;gap:.6rem;
}
.hero__nota svg{flex:none;color:var(--fd-laranja)}
/* ---------- 9.1 MOCKUP DE DISPOSITIVOS (HERO) ---------- */
/* Entrou no lugar do bloco de terminal do hero. O comprador principal e
   leigo em tecnologia: estetica de linha de comando ele nao reconhece,
   imagem de site aberto no navegador e no celular ele reconhece na hora.
   O terminal continua onde e reforco tecnico (como funciona, stack, 404).
   Desenhado so em CSS: nenhuma imagem, nenhum request a mais, e a altura
   sai de aspect-ratio, entao nao ha layout shift. */
.hero__mockup{width:100%}
.mockup{
  position:relative;width:100%;
  max-width:540px;margin-inline:auto;
  padding-bottom:clamp(1.5rem,4vw,2.5rem);   /* respiro para o celular transbordar */
}

/* --- janela do navegador --- */
.mockup__janela{
  container-type:inline-size;
  position:relative;aspect-ratio:16/10;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--fd-aco-frio);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;
  clip-path:polygon(0 0,calc(100% - var(--fd-chanfro-lg)) 0,100% var(--fd-chanfro-lg),100% 100%,0 100%);
}
.mockup__barra{
  position:relative;flex:none;
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem .7rem;
}
.mockup__dots{display:flex;gap:5px;flex:none}
.mockup__dots i{display:block;width:7px;height:7px;border-radius:50%}
/* Barra de endereco e interface de navegador, nao bloco de codigo:
   fica em Archivo. JetBrains Mono continua exclusiva do terminal. */
.mockup__url{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:.3rem;
  padding:.18rem .6rem;border-radius:var(--fd-r-pill);
  background:rgba(20,26,32,.55);
  color:var(--fd-cinza-claro);
  font-size:.6875rem;line-height:1.7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mockup__url svg{flex:none;color:#4ADE80}   /* cadeado https — mesmo verde do terminal */
.mockup__carga{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--fd-laranja);
  transform:scaleX(0);transform-origin:0 50%;
}
.mockup__tela{
  position:relative;flex:1;min-height:0;
  overflow:hidden;background:var(--fd-branco);
}

/* --- o site em miniatura --- */
/* --u e a unidade da miniatura e acompanha a largura do proprio aparelho,
   entao a mesma marcacao serve a janela e ao celular. O valor em px e o
   fallback para navegador sem unidade de container. */
.mini{
  --u:4.4px;
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  gap:calc(var(--u) * 3.5);padding:calc(var(--u) * 4);
}
@supports (width:1cqi){
  .mockup__janela .mini{--u:.9cqi}
  .mockup__fone .mini{--u:3.4cqi}
}
.mini__topo{
  flex:none;display:flex;align-items:center;gap:calc(var(--u) * 2.5);
  padding-bottom:calc(var(--u) * 2.5);
  border-bottom:1px solid rgba(20,26,32,.10);
}
.mini__marca{flex:none;width:calc(var(--u) * 13);height:calc(var(--u) * 2.8);background:var(--fd-aco)}
.mini__menu{display:flex;gap:calc(var(--u) * 2);margin-left:auto}
.mini__menu i{display:block;width:calc(var(--u) * 5);height:calc(var(--u) * 1.2);background:rgba(20,26,32,.26)}
/* Laranja aqui e superficie, nunca texto — a miniatura nao tem texto. */
.mini__acao{
  flex:none;width:calc(var(--u) * 11);height:calc(var(--u) * 4);
  background:var(--fd-laranja);
  clip-path:polygon(0 0,calc(100% - var(--u) * 1.2) 0,100% calc(var(--u) * 1.2),100% 100%,0 100%);
}
.mini__hero{flex:none;display:flex;flex-direction:column;gap:calc(var(--u) * 1.8)}
.mini__titulo{width:76%;height:calc(var(--u) * 3.6);background:var(--fd-aco)}
.mini__titulo--curto{width:50%}
.mini__linha{width:86%;height:calc(var(--u) * 1.4);background:rgba(20,26,32,.22)}
.mini__linha--curta{width:62%}
.mini__botao{
  width:calc(var(--u) * 22);height:calc(var(--u) * 5.4);
  margin-top:calc(var(--u) * 1.6);background:var(--fd-laranja);
  clip-path:polygon(0 0,calc(100% - var(--u) * 1.6) 0,100% calc(var(--u) * 1.6),100% 100%,0 100%);
}
.mini__cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 2.5)}
.mini__cards span{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#D9DDE1 0 44%,var(--fd-bigorna) 44%);
  clip-path:polygon(0 0,calc(100% - var(--u) * 2) 0,100% calc(var(--u) * 2),100% 100%,0 100%);
}
.mini__cards span::after{
  content:"";position:absolute;left:14%;right:34%;top:62%;
  height:calc(var(--u) * 1.2);background:rgba(20,26,32,.24);
}

/* --- celular --- */
/* Unica peca do sistema com canto arredondado: e o desenho de um objeto
   real, nao um card. O chanfro sistemico fica na janela do navegador. */
.mockup__fone{
  container-type:inline-size;
  position:absolute;left:0;bottom:0;
  width:clamp(80px,21%,116px);aspect-ratio:9/18.5;
  background:var(--fd-aco);border-radius:16px;
  box-shadow:inset 0 0 0 2px var(--fd-aco-frio),0 16px 36px rgba(0,0,0,.55);
}
.mockup__fone::before{
  content:"";position:absolute;z-index:2;
  top:5px;left:50%;transform:translateX(-50%);
  width:26%;height:3px;border-radius:var(--fd-r-pill);background:var(--fd-aco-frio);
}
.mockup__tela--fone{
  position:absolute;inset:11px 5px 8px;
  border-radius:8px;overflow:hidden;background:var(--fd-branco);
}
.mini--fone{
  inset:0 0 auto 0;height:auto;
  gap:calc(var(--u) * 2.6);padding:calc(var(--u) * 3);
}
.mini--fone .mini__marca{width:calc(var(--u) * 14);height:calc(var(--u) * 3)}
.mini--fone .mini__menu i{width:calc(var(--u) * 4);height:calc(var(--u) * 1.4)}
.mini--fone .mini__titulo{width:88%;height:calc(var(--u) * 4)}
.mini--fone .mini__titulo--curto{width:60%}
.mini--fone .mini__botao{width:70%;height:calc(var(--u) * 6)}
.mini--fone .mini__cards{flex:none;grid-template-columns:1fr;gap:calc(var(--u) * 2.6)}
.mini--fone .mini__cards span{height:calc(var(--u) * 16)}
@media (min-width:1000px){.mockup__fone{left:-7%}}   /* so com a calha do grid ao lado */

/* --- selo "no ar" — pill, entao mantem o raio e nao recebe chanfro --- */
.mockup__selo{
  position:absolute;right:0;bottom:0;z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .75rem;border-radius:var(--fd-r-pill);
  background:var(--fd-aco-elevado);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 24px rgba(0,0,0,.45);
}
.mockup__selo i{flex:none;width:7px;height:7px;border-radius:50%;background:#4ADE80}

/* --- montagem e movimento --- */
/* Estado de repouso = site pronto. A montagem so acontece quando o JS
   marca .is-montando, entao sem JS a peca ja aparece completa. */
@keyframes mockupCarga{0%{transform:scaleX(0);opacity:1}72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes mockupEntra{from{opacity:0;transform:translateY(calc(var(--u) * 2.5))}to{opacity:1;transform:none}}
@keyframes mockupFone{from{opacity:0;transform:translateY(12%)}to{opacity:1;transform:none}}
@keyframes mockupRola{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(-32%)}}
@keyframes mockupPulso{0%,100%{opacity:1}50%{opacity:.28}}

.mockup.is-montando .mockup__carga{animation:mockupCarga 1.2s var(--fd-ease) both}
.mockup.is-montando .mini__topo{animation:mockupEntra .5s var(--fd-ease-out) .34s both}
.mockup.is-montando .mini__hero > *{animation:mockupEntra .5s var(--fd-ease-out) both}
.mockup.is-montando .mini__hero > :nth-child(1){animation-delay:.5s}
.mockup.is-montando .mini__hero > :nth-child(2){animation-delay:.58s}
.mockup.is-montando .mini__hero > :nth-child(3){animation-delay:.66s}
.mockup.is-montando .mini__hero > :nth-child(4){animation-delay:.72s}
.mockup.is-montando .mini__hero > :nth-child(5){animation-delay:.82s}
.mockup.is-montando .mini__cards span{animation:mockupEntra .5s var(--fd-ease-out) both}
.mockup.is-montando .mini__cards span:nth-child(1){animation-delay:.98s}
.mockup.is-montando .mini__cards span:nth-child(2){animation-delay:1.06s}
.mockup.is-montando .mini__cards span:nth-child(3){animation-delay:1.14s}
.mockup.is-montando .mockup__fone{animation:mockupFone .6s var(--fd-ease-out) 1.5s both}
.mockup.is-montando .mockup__selo{animation:mockupEntra .5s var(--fd-ease-out) 1.9s both}

/* Continuos: so rodam com o hero na tela e a aba visivel. */
.mockup .mini--fone{animation:mockupRola 14s var(--fd-ease) 2.4s infinite alternate;animation-play-state:paused}
.mockup .mockup__selo i{animation:mockupPulso 2.4s ease-in-out infinite;animation-play-state:paused}
.mockup.is-ativo .mini--fone,
.mockup.is-ativo .mockup__selo i{animation-play-state:running}

.hero__scroll{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:var(--fd-cinza-claro);text-decoration:none;
}
.hero__scroll::after{
  content:"";width:1px;height:34px;
  background:linear-gradient(180deg,var(--fd-laranja),transparent);
  animation:descer 1.8s var(--fd-ease) infinite;
}
@keyframes descer{0%{transform:scaleY(.3);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}50.01%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(.3);transform-origin:0 100%}}
@media (max-width:1000px){.hero__scroll{display:none}}

/* ---------- 10. PILARES + CONTADORES ---------- */
.pilares{
  display:grid;gap:1px;
  background:var(--borda);
  grid-template-columns:1fr;
  border:1px solid var(--borda);
}
@media (min-width:640px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.pilares{grid-template-columns:repeat(4,1fr)}}
.pilar{
  background:var(--fd-branco);
  padding:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:.75rem;
  transition:background var(--fd-dur-media) var(--fd-ease),
             transform var(--fd-dur-media) var(--fd-ease);
}
.pilar:hover{background:#fff;transform:translateY(-3px);z-index:1;position:relative;box-shadow:var(--fd-elev-hover)}
.pilar__icone{width:36px;height:36px;color:var(--fd-aco)}
.pilar__icone svg{width:36px;height:36px}
.pilar h3{font-family:var(--fd-font-label);font-weight:600;font-size:1.125rem;text-transform:uppercase;letter-spacing:.02em}
.pilar p{color:var(--fd-cinza);font-size:.9375rem}

.contadores{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--borda);border:1px solid var(--borda);
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
@media (min-width:840px){.contadores{grid-template-columns:repeat(4,1fr)}}
.contador{
  background:var(--fd-branco);
  padding:clamp(1.25rem,2.4vw,1.75rem);
  text-align:left;
}
.contador__valor{
  font-family:var(--fd-font-display);
  font-size:clamp(2rem,4.6vw,2.75rem);
  color:var(--fd-aco);line-height:1;
  display:flex;align-items:baseline;gap:.08em;
}
.contador__valor .sufixo,.contador__valor .prefixo{font-size:.55em}
.contador__rotulo{color:var(--fd-cinza);margin-top:.55rem;display:block}

/* ---------- 11. PACOTES ---------- */
.pacotes{
  display:grid;gap:clamp(1.25rem,2.4vw,1.75rem);
  grid-template-columns:1fr;
}
@media (min-width:680px){.pacotes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pacotes{grid-template-columns:repeat(3,1fr)}}

.pacote{
  --fd-ch:var(--fd-chanfro-lg);
  position:relative;display:flex;flex-direction:column;
  background:var(--fd-branco);color:var(--fd-aco-frio);
  padding:clamp(1.5rem,2.6vw,1.875rem);
  box-shadow:var(--fd-elev-repouso);
  clip-path:polygon(0 0,calc(100% - var(--fd-ch)) 0,100% var(--fd-ch),100% 100%,0 100%);
  transition:--fd-ch var(--fd-dur-lenta) var(--fd-ease),
             transform var(--fd-dur-lenta) var(--fd-ease),
             box-shadow var(--fd-dur-lenta) var(--fd-ease);
}
.pacote:hover{transform:translateY(-6px);box-shadow:var(--fd-elev-hover);--fd-ch:28px}
/* Elevacao "destaque": um unico elemento por secao */
.pacote--destaque{box-shadow:var(--fd-elev-destaque)}
.pacote--destaque:hover{box-shadow:0 14px 54px rgba(255,106,0,.28),0 4px 14px rgba(20,26,32,.16)}
.pacote--destaque::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--fd-laranja);
}

.pacote__topo{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.pacote__prazo{color:var(--fd-cinza)}
.pacote__nome{font-size:1.375rem;margin-top:1rem}
.pacote__resumo{margin-top:.6rem;color:var(--fd-aco-frio)}
.pacote__escopo{
  margin-top:1rem;padding-top:1rem;
  border-top:1px dashed rgba(20,26,32,.18);
  color:var(--fd-cinza);font-size:.9375rem;
}
.pacote__rodape{margin-top:auto;padding-top:1.5rem}
.pacote__precoRotulo{color:var(--fd-cinza);display:block;margin-bottom:.5rem}
.preco{
  font-family:var(--fd-font-display);
  font-size:clamp(1.75rem,3.4vw,2rem);
  color:var(--fd-aco);            /* 6.10:1 sobre laranja — nunca laranja sobre claro */
  background:var(--fd-laranja);
  padding:.4rem .85rem;display:inline-block;line-height:1.15;
  clip-path:polygon(0 0,calc(100% - var(--fd-chanfro-sm)) 0,100% var(--fd-chanfro-sm),100% 100%,0 100%);
}
.preco--consulta{font-size:clamp(1.25rem,2.6vw,1.5rem)}
.pacote .btn{margin-top:1.25rem}

/* ---------- 12. ADICIONAIS ---------- */
.tabela-wrap{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;text-align:left}
.tabela caption{text-align:left;color:var(--txt-2);padding-bottom:1rem;font-size:.9375rem}
.tabela th,.tabela td{padding:.9rem 1rem;vertical-align:top}
.tabela thead th{
  font-family:var(--fd-font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--fd-size-label);
  color:var(--txt-2);
  border-bottom:2px solid var(--fd-aco);
  white-space:nowrap;
}
.tabela tbody tr{border-bottom:1px solid var(--borda)}
.tabela tbody tr:last-child{border-bottom:0}
.tabela tbody tr{transition:background var(--fd-dur-rapida) var(--fd-ease)}
.tabela tbody tr:hover{background:rgba(20,26,32,.035)}
.tabela__servico{font-weight:700;color:var(--txt);display:block}
.tabela__desc{color:var(--txt-2);font-size:.9375rem;display:block;margin-top:.2rem}
.tabela__valor{
  font-family:var(--fd-font-display);font-size:1.0625rem;
  color:var(--fd-aco);white-space:nowrap;text-align:right;
}
.tabela th:last-child{text-align:right}

@media (max-width:720px){
  .tabela,.tabela tbody,.tabela tr,.tabela td{display:block;width:100%}
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabela tbody tr{
    border:1px solid var(--borda);border-left:3px solid var(--fd-laranja);
    padding:1rem;margin-bottom:.75rem;background:var(--fd-branco);
  }
  .tabela td{padding:0}
  .tabela__valor{text-align:left;margin-top:.6rem;font-size:1.25rem}
}

/* ---------- 13. TIMELINE — COMO FUNCIONA ---------- */
.timeline{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.timeline__trilho{
  position:absolute;background:rgba(255,255,255,.14);
  overflow:hidden;
}
.timeline__trilho::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    var(--fd-laranja) 0px,var(--fd-laranja) 6px,transparent 6px,transparent 12px);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s var(--fd-ease-out);
}
.timeline.is-visible .timeline__trilho::after{transform:scaleX(1)}
.timeline__etapas{display:grid;gap:clamp(1.75rem,3.4vw,2.5rem)}

/* Desktop: horizontal */
@media (min-width:900px){
  .timeline__trilho{left:0;right:0;top:23px;height:2px}
  .timeline__etapas{grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.4vw,2rem)}
}
/* Mobile: vertical */
@media (max-width:899px){
  .timeline{padding-left:3.25rem}
  .timeline__trilho{left:23px;top:0;bottom:0;width:2px}
  .timeline__trilho::after{
    background:repeating-linear-gradient(180deg,
      var(--fd-laranja) 0px,var(--fd-laranja) 6px,transparent 6px,transparent 12px);
    transform:scaleY(0);transform-origin:50% 0;
  }
  .timeline.is-visible .timeline__trilho::after{transform:scaleY(1)}
  .etapa{position:relative}
  .etapa__num{position:absolute;left:-3.25rem;top:0}
}
.etapa{position:relative}
.etapa__num{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  background:var(--fd-laranja);color:var(--fd-aco);   /* 6.10:1 */
  font-family:var(--fd-font-display);font-size:1.0625rem;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:transform var(--fd-dur-lenta) var(--fd-ease);
}
.etapa:hover .etapa__num{transform:translateY(-3px) scale(1.05)}
.etapa__titulo{
  margin-top:1.15rem;font-family:var(--fd-font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:1.125rem;color:var(--txt);
}
.etapa__texto{margin-top:.5rem;color:var(--txt-2);font-size:.9375rem}
@media (max-width:899px){.etapa__titulo{margin-top:.35rem}}

.painel-nota{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;gap:1.5rem;align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){.painel-nota{grid-template-columns:1fr minmax(0,420px)}}
.painel-nota__texto h3{color:var(--txt);font-size:1.25rem}
.painel-nota__texto p:not(.rotulo){color:var(--txt-2);margin-top:.6rem}

/* ---------- 14. BIO ---------- */
.bio{display:grid;gap:clamp(2rem,4.5vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.bio{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
@media (min-width:1100px){.bio{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}

.bio__midia{max-width:420px}
.bio__foto{position:relative}
.bio__foto::before{                       /* detalhe laranja */
  content:"";position:absolute;
  left:-14px;bottom:-14px;width:58%;height:58%;
  background:var(--fd-laranja);z-index:0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:transform var(--fd-dur-lenta) var(--fd-ease);
}
.bio__foto:hover::before{transform:translate(-4px,4px)}
.bio__foto picture,.bio__foto img{
  position:relative;z-index:1;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
  background:var(--fd-aco-frio);
  clip-path:polygon(0 0,calc(100% - var(--fd-chanfro-lg)) 0,100% var(--fd-chanfro-lg),100% 100%,0 100%);
}
.bio__legenda{
  margin-top:1.25rem;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
}
.bio__texto > * + *{margin-top:1.1rem}
.bio__texto p{color:var(--txt-2);font-size:var(--fd-size-body-lg)}
.bio__nome{font-size:clamp(1.5rem,3.2vw,2rem)}
.bio__cargo{color:var(--fd-laranja);display:block;margin-top:.35rem}
.secao--clara .bio__cargo{color:var(--fd-brasa-texto)}
.bio__links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.link-social{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1rem;text-decoration:none;font-weight:700;font-size:.9375rem;
  color:var(--txt);
  box-shadow:inset 0 0 0 2px var(--borda);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  transition:transform var(--fd-dur-media) var(--fd-ease),
             box-shadow var(--fd-dur-media) var(--fd-ease),
             background var(--fd-dur-media) var(--fd-ease);
}
.link-social:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--fd-laranja)}
.link-social svg{flex:none}

/* ---------- 15. NAO INCLUSO ---------- */
.lista-nao{display:grid;gap:1px;background:var(--borda);border:1px solid var(--borda)}
@media (min-width:700px){.lista-nao{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.lista-nao{grid-template-columns:repeat(3,1fr)}}
.lista-nao li{
  background:var(--fd-aco);
  padding:1.15rem 1.25rem;
  display:flex;align-items:flex-start;gap:.75rem;
  color:var(--txt-2);
  transition:background var(--fd-dur-media) var(--fd-ease);
}
.lista-nao li:hover{background:var(--fd-aco-elevado)}
.lista-nao svg{flex:none;margin-top:.15rem;color:var(--fd-laranja)}

/* ---------- 16. FAQ ---------- */
.faq{max-width:860px;margin-inline:auto}
.faq__item{
  background:var(--fd-branco);
  border:1px solid var(--borda);
  margin-bottom:.75rem;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:box-shadow var(--fd-dur-media) var(--fd-ease);
}
.faq__item:hover{box-shadow:var(--fd-elev-repouso)}
.faq__item.is-aberto{box-shadow:var(--fd-elev-repouso)}
.faq__botao{
  width:100%;display:flex;align-items:center;gap:1rem;
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:1.15rem 1.25rem;
  font-weight:700;font-size:1.0625rem;color:var(--fd-aco);
  transition:color var(--fd-dur-media) var(--fd-ease);
}
.faq__botao:hover{color:var(--fd-brasa-texto)}
.faq__icone{
  margin-left:auto;flex:none;width:22px;height:22px;position:relative;
}
.faq__icone::before,.faq__icone::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--fd-laranja);
  transform:translate(-50%,-50%);
  transition:transform var(--fd-dur-lenta) var(--fd-ease),opacity var(--fd-dur-lenta) var(--fd-ease);
}
.faq__icone::before{width:14px;height:2px}
.faq__icone::after{width:2px;height:14px}
.faq__item.is-aberto .faq__icone::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
/* Animacao de altura real — grid 0fr -> 1fr, sem display:none */
.faq__painel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--fd-dur-lenta) var(--fd-ease);
}
.faq__item.is-aberto .faq__painel{grid-template-rows:1fr}
.faq__painel > div{overflow:hidden;min-height:0}
.faq__painel p{padding:0 1.25rem 1.25rem;color:var(--fd-cinza)}
.faq__painel p + p{padding-top:0}

/* ---------- 17. CTA FINAL ---------- */
.cta-final{
  background:var(--fd-brasa);   /* Brasa solido: unico laranja aprovado com texto branco */
  color:#fff;text-align:center;
  --txt:#fff;--txt-2:rgba(255,255,255,.9);
}
.cta-final .secao__textura--aco{opacity:.7}
.cta-final h2{color:#fff;font-size:clamp(2rem,5.4vw,3.25rem)}
.cta-final p:not(.rotulo){color:rgba(255,255,255,.94);margin-top:1rem;font-size:var(--fd-size-body-lg);max-width:56ch;margin-inline:auto}
.cta-final__acoes{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2rem}
.cta-final .divisor{
  background:repeating-linear-gradient(90deg,#fff 0px,#fff 6px,transparent 6px,transparent 12px);
  margin-inline:auto;margin-bottom:1.5rem;opacity:.75;
}
.cta-final .btn--aco:hover{box-shadow:0 10px 30px rgba(0,0,0,.32)}
.cta-final__contato{
  margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;
  justify-content:center;color:rgba(255,255,255,.92);
}
.cta-final__contato a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 18. RODAPE ---------- */
.rodape{background:var(--fd-aco);color:var(--fd-cinza-claro);padding-block:clamp(3rem,5vw,4rem) 1.75rem}
.rodape__grade{
  display:grid;gap:2rem;grid-template-columns:1fr;
  padding-bottom:2rem;
}
@media (min-width:760px){.rodape__grade{grid-template-columns:1.4fr 1fr 1fr}}
.rodape__logo img{height:32px;width:auto}
.rodape__frase{margin-top:1rem;color:var(--fd-cinza-claro);max-width:34ch}
.rodape h2{font-size:.8125rem;font-family:var(--fd-font-label);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.rodape ul{margin-top:.9rem;display:grid;gap:.6rem}
.rodape a{color:var(--fd-cinza-claro);text-decoration:none;transition:color var(--fd-dur-rapida) var(--fd-ease)}
.rodape a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rodape__social{display:flex;gap:.75rem;margin-top:1rem}
.rodape__social a{
  width:40px;height:40px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  transition:box-shadow var(--fd-dur-media) var(--fd-ease),transform var(--fd-dur-media) var(--fd-ease),background var(--fd-dur-media) var(--fd-ease);
}
.rodape__social a:hover{box-shadow:inset 0 0 0 1px var(--fd-laranja);transform:translateY(-2px);background:rgba(255,106,0,.1)}
.rodape__base{
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.875rem;
}
.rodape__topo{display:inline-flex;align-items:center;gap:.45rem}

/* ---------- 19. WHATSAPP FLUTUANTE ---------- */
.zap{
  position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);
  z-index:105;
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--fd-brasa);color:#fff;border-radius:var(--fd-r-pill);
  box-shadow:0 10px 30px rgba(20,26,32,.34);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity var(--fd-dur-lenta) var(--fd-ease),
             transform var(--fd-dur-lenta) var(--fd-ease),
             visibility 0s linear var(--fd-dur-lenta),
             background var(--fd-dur-media) var(--fd-ease);
}
.zap.is-visivel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.zap:hover{background:#B03A00;transform:translateY(-3px)}
.zap::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(201,67,0,.55);
  animation:pulso 2.6s var(--fd-ease-out) infinite;
}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(201,67,0,.5)}
  70%{box-shadow:0 0 0 16px rgba(201,67,0,0)}
  100%{box-shadow:0 0 0 0 rgba(201,67,0,0)}
}

/* ---------- 20. CURSOR SPARK (desktop, ponteiro fino) ---------- */
.spark{display:none}
@media (hover:hover) and (pointer:fine){
  .spark{
    display:block;position:fixed;top:0;left:0;z-index:130;
    width:26px;height:26px;margin:-13px 0 0 -13px;
    border:1px solid rgba(255,106,0,.7);border-radius:50%;
    pointer-events:none;opacity:0;
    transition:opacity var(--fd-dur-lenta) var(--fd-ease),
               width var(--fd-dur-media) var(--fd-ease),
               height var(--fd-dur-media) var(--fd-ease),
               margin var(--fd-dur-media) var(--fd-ease),
               background var(--fd-dur-media) var(--fd-ease);
    will-change:transform;
  }
  .spark.is-ativo{opacity:1}
  .spark.is-alvo{
    width:44px;height:44px;margin:-22px 0 0 -22px;
    background:rgba(255,106,0,.12);
  }
}

/* ---------- 21. SCROLL REVEAL ----------
   O stagger vem do CSS (nth-child), nao do JS. Marcar 48 elementos por
   script no carregamento invalidava o estilo do documento inteiro e a
   primeira leitura de scrollY forcava um layout de ~290ms no celular. */
.reveal,
[data-reveal-filhos] > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .62s var(--fd-ease-out),transform .62s var(--fd-ease-out);
  transition-delay:calc(var(--i,0) * 75ms);
}
.reveal.is-visible,
[data-reveal-filhos] > .is-visible{opacity:1;transform:none}

[data-reveal-filhos] > *:nth-child(1){--i:0}
[data-reveal-filhos] > *:nth-child(2){--i:1}
[data-reveal-filhos] > *:nth-child(3){--i:2}
[data-reveal-filhos] > *:nth-child(4){--i:3}
[data-reveal-filhos] > *:nth-child(5){--i:4}
[data-reveal-filhos] > *:nth-child(6){--i:5}
[data-reveal-filhos] > *:nth-child(7){--i:6}
[data-reveal-filhos] > *:nth-child(8){--i:7}

/* ---------- 22. MOVIMENTO REDUZIDO — desliga tudo que nao e essencial ---------- */
@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;
  }
  .reveal,[data-reveal-filhos] > *{opacity:1!important;transform:none!important}
  .timeline__trilho::after{transform:none!important}
  .hero__canvas,.spark,.hero__scroll::after{display:none!important}
  .zap{opacity:1;visibility:visible;transform:none}
  .zap::before{display:none}
  .secao__textura,.hero__brilho{animation:none!important;transform:none!important}
}

/* ---------- 23. UTILITARIOS DE SECAO ---------- */
address{font-style:normal}
.secao__acao{margin-top:2rem}
.secao__cabecalho--centro{margin-inline:auto;text-align:center}
.painel-nota__rotulo{color:var(--fd-laranja)}   /* 6.10:1 sobre Aco */
.bio__stack{margin-top:1.5rem}