@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   VFX KIT — a identidade visual da VisualFX, sozinha.
   ══════════════════════════════════════════════════════════════════════
   Este arquivo NÃO sabe nada sobre nenhuma página específica. Ele só sabe
   quais são as cores, as fontes, os botões, os títulos, as transições e o
   jeito de aparecer da marca.

   Para uma página nova (um blog, uma landing, uma página de obrigado):
     1. copie a pasta _modelo/ e renomeie;
     2. no <head> ela já chama este arquivo e o vfx-kit.js;
     3. troque os textos;
     4. se precisar de algo que só existe naquela página, escreva no
        <style> no fim do <head> dela — NUNCA aqui.

   A regra de ouro: mexeu aqui, mudou em todas as páginas. É isso que
   faz a identidade continuar sendo uma só.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── 1 · FONTES ─────────────────────── */
@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-latin-standard-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-latin-ext-standard-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian";font-style:normal;font-display:swap;font-weight:100 800;src:url(../fonts/martian-mono-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─────────────────────── 2 · TOKENS ───────────────────────
   TUDO da identidade sai daqui. Trocar uma cor de marca é trocar uma
   linha abaixo — nenhum outro arquivo precisa ser tocado. */
:root{
  /* Cores da marca */
  --violet:#5a24ed;
  --violet-600:#4a1bd0;
  --violet-400:#7b4dff;
  --violet-300:#a78bff;
  --violet-200:#c9b8ff;
  --violet-glow:90 36 237;
  --void:#050505;
  --void-2:#0a0a0c;
  --void-3:#111114;
  --bone:#edeae4;
  --bone-2:#e3dfd7;
  --white:#fff;

  /* Papéis de cor (mudam por seção) */
  --bg:var(--void);
  --fg:#f2f0ee;
  --fg-mid:rgba(242,240,238,.68);
  --fg-low:rgba(242,240,238,.55);
  --rule:rgba(255,255,255,.2);
  --accent:var(--violet-300);
  --accent-solid:var(--violet);

  /* Tipografia */
  --f-display:"Bricolage","Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:"Martian",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-text:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --t-h1:clamp(2.6rem,min(8vw,10.2vh),8rem);
  --t-h2:clamp(2.2rem,5.9vw,5.9rem);
  --t-h3:clamp(1.02rem,1.32vw,1.2rem);
  --t-lead:clamp(1.02rem,1.55vw,1.4rem);
  --t-body:clamp(.95rem,1.05vw,1.06rem);
  --t-micro:clamp(.66rem,.78vw,.76rem);
  --track-label:.16em;
  --track-pill:.12em;

  /* Forma e espaço */
  --r-s:8px;
  --r-m:16px;
  --r-pill:100px;
  --stroke:1.4px;
  --gut:clamp(1.15rem,4vw,4.5rem);
  --sec:clamp(6rem,13vw,14rem);
  --shell:1440px;

  /* Curvas de animação */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* o símbolo da marca, embutido — serve de fundo em .hnav__mark */
:root{--marca-uri:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23edeae4%22%20id%3D%22Camada_2%22%20data-name%3D%22Camada%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2067.21%2047.17%22%3E%0A%20%20%3Cg%20id%3D%22Camada_1_c%C3%B3pia%22%20data-name%3D%22Camada%201%20c%C3%B3pia%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M67.21%2C19.15l-8.21-.23c-1.87-.05-3.8.87-4.88%2C2.35l-2.83%2C3.93-3.73-4.85c-.7-.92-3.07-1.33-4.38-1.54l1.83-3.48%2C4.24%2C2.24-.36-17.57-15.94%2C8.17%2C4.03%2C2.47-5.35%2C8.55c-8.79-1.58-9.12%2C3.81-13.91%2C10.86l-5.73-9.46c-.46-.76-2.31-1.62-3.13-1.62l-8.86.05%2C16.79%2C28.05c5.31.2%2C8.64.48%2C11.28-3.94l5.12-8.58%2C5.55.02%2C1.87-3.29-9.14-.1-6.99%2C11.44c-.52.85-2.65%2C1.25-3.92%2C1.06L41.42%2C9.63l-1.52-1.4%2C5.78-2.83.09%2C6.51-1.85-.95-6.78%2C11.2%2C7.92.24%2C6.17%2C8.29%2C6.08-8.23%2C3.65-.14-7.89%2C10.78%2C7.62%2C10.56c-1.73.89-3.42.11-4.45-1.28l-4.98-6.68-5.64%2C7.66c-.97.23-2.54.2-3.49-.01l7.32-10.11-5.7-8.03-8.52-.14-1.87%2C3.29%2C8.76.1%2C3.34%2C4.77-10.18%2C13.82%2C11.29-.16c1.62-1.49%2C3.39-3.99%2C4.66-5.74%2C1.41%2C1.96%2C3.19%2C4.49%2C4.99%2C5.83%2C3.9.14%2C7.01.12%2C10.95-.04l-10.02-13.81%2C10.06-13.98ZM17.67%2C42.05L5.82%2C22.32c1.61-.21%2C2.77-.16%2C3.52.12l8.36%2C14.06%2C8.19-13.48c.89-.54%2C2.74-.94%2C4.01-.96l-12.23%2C19.99Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E")}


/* ─────────────────────── 3 · BASE ───────────────────────
   Reset curto e as regras que valem para o documento inteiro. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--void);scroll-behavior:smooth}
body{font-family:var(--f-text);font-size:var(--t-body);line-height:1.6;
  color:var(--fg);background:var(--bg);overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
html.trava,html.trava body{overflow:hidden;height:100%}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet-300);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;top:-100px;left:1rem;z-index:200;background:var(--violet);color:#fff;
  padding:.7rem 1.1rem;border-radius:6px;transition:top .2s}
.skip:focus{top:1rem}

/* a caixa padrão: nunca mais de 1440px, sempre com a margem lateral do site */
.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
/* o respiro vertical de uma seção */
.sec{padding:var(--sec) 0}
.sec--curta{padding:clamp(3.4rem,8vh,6rem) 0}

/* ─────────────────────── 4 · TIPOGRAFIA ───────────────────────
   .titulo é o tamanho de abertura; .h2 é o de seção; .lead é o
   parágrafo grande logo abaixo do título. */
.titulo,.h2{font-family:var(--f-display);
  font-variation-settings:"wght" 800,"wdth" 84,"opsz" 72;
  line-height:.92;letter-spacing:-.026em;text-wrap:balance}
.titulo{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2)}
.h3{font-family:var(--f-display);font-variation-settings:"wght" 720,"wdth" 88;
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.15;letter-spacing:-.024em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--fg-mid);
  max-width:52ch;letter-spacing:-.011em;text-wrap:pretty}
b,strong{font-weight:650}

/* a etiqueta em mono que abre cada seção */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet-300);margin-bottom:1rem}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--violet-400);
  animation:vfxPulso 2.6s infinite}
@keyframes vfxPulso{
  0%{box-shadow:0 0 0 0 rgb(var(--violet-glow)/.75)}
  70%{box-shadow:0 0 0 12px rgb(var(--violet-glow)/0)}
  100%{box-shadow:0 0 0 0 rgb(var(--violet-glow)/0)}}

/* cabeçalho de seção centralizado */
.sec__cab{max-width:62ch;margin:0 auto clamp(2.6rem,5vw,4.2rem);text-align:center}
.sec__nota{margin-top:1.1rem;font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.65;
  color:rgb(242 240 238/.62)}

/* ── o brilho que atravessa a palavra em <em> ──
   É a assinatura da marca. Qualquer <em> dentro de um título ganha isso
   de graça. Para desligar num título específico: class="sem-brilho". */
:root{--lit-a:#8f6bff;--lit-b:#c4b2ff;--lit-c:#ffffff;--lit-glow:122,74,255}
.t-claro{--lit-a:#4a1bd0;--lit-b:#7b4dff;--lit-c:#a78bff;--lit-glow:90,36,237}
h1 em,h2 em,h3 em,.titulo em,.h2 em,.h3 em{
  font-family:var(--f-display);font-style:normal;font-weight:800;
  font-variation-settings:"wght" 800,"wdth" 84,"opsz" 72;font-size:1em;letter-spacing:inherit;
  color:var(--lit-a);animation:vfxLit 4.6s cubic-bezier(.45,0,.15,1) infinite}
h1 em .ch,h2 em .ch,h3 em .ch{color:var(--lit-a);
  animation:vfxLit 4.6s cubic-bezier(.45,0,.15,1) infinite;
  animation-delay:calc(var(--i,0) * -.115s)}
.sem-brilho em{animation:none!important;color:var(--violet-300)!important}
@keyframes vfxLit{
  0%,100%{color:var(--lit-a);text-shadow:0 0 18px rgba(var(--lit-glow),.30)}
  34%{color:var(--lit-b);text-shadow:0 0 26px rgba(var(--lit-glow),.55)}
  46%{color:var(--lit-c);text-shadow:0 0 34px rgba(var(--lit-glow),.90),0 0 6px rgba(255,255,255,.55)}
  58%{color:var(--lit-b);text-shadow:0 0 26px rgba(var(--lit-glow),.55)}}

/* ─────────────────────── 5 · BOTÕES ───────────────────────
   Três pesos: solid (ação principal), line (secundária), ghost (terciária).
   Todos preenchem de baixo para cima no hover — é o gesto da marca. */
.btn{--pad:.95rem 1.55rem;position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:var(--pad);font-size:clamp(.82rem,.95vw,.94rem);font-weight:600;font-stretch:104%;
  border-radius:var(--r-pill);isolation:isolate;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  transition:transform .55s var(--ease)}
.btn>*{position:relative;z-index:2}
.btn--xl{--pad:1.15rem 2rem;font-size:clamp(.88rem,1.05vw,1rem)}
.btn--solid{color:#fff;background:var(--violet)}
.btn--solid::before{background:linear-gradient(100deg,var(--violet-400),var(--violet-200));transform:translateY(101%)}
.btn--solid:hover{color:#1a0640;box-shadow:0 12px 44px -10px rgb(var(--violet-glow)/.85)}
.btn--solid:hover::before{transform:translateY(0)}
.btn--line{color:var(--fg);border:1px solid var(--rule);background:rgb(255 255 255/.03);
  backdrop-filter:blur(8px)}
.btn--line::before{background:var(--fg);transform:translateY(101%)}
.btn--line:hover{color:var(--void);border-color:transparent}
.btn--line:hover::before{transform:translateY(0)}
.btn--ghost{color:var(--fg);border:1px solid var(--rule);padding:.62rem 1.15rem;font-size:.8rem}
.btn--ghost::before{background:var(--violet);transform:translateY(101%)}
.btn--ghost:hover{color:#fff;border-color:transparent}
.btn--ghost:hover::before{transform:translateY(0)}
/* link com seta que anda no hover */
.ir{font-size:.82rem;font-weight:600;color:var(--violet-300)}
.ir::after{content:' →';transition:margin .25s var(--ease)}
.ir:hover::after{margin-left:.3rem}

/* ─────────────────────── 6 · ETIQUETAS E CARTÕES ─────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:.32rem}
.pills li,.pill{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r-pill);border:1px solid var(--rule);color:rgb(242 240 238/.58)}
.pills--destaque li{border-color:rgb(167 139 255/.4);color:var(--violet-200)}

.grade{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.3rem,2.4vw,1.9rem);border-radius:var(--r-m);
  background:rgb(255 255 255/.035);box-shadow:inset 0 0 0 1px rgb(255 255 255/.09);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .55s var(--ease)}
.card:hover{transform:translateY(-4px);background:rgb(255 255 255/.055);
  box-shadow:inset 0 0 0 1px rgb(167 139 255/.30),0 22px 50px -30px rgb(var(--violet-glow)/.7)}
.card__n{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;color:var(--violet-300)}
.card p{font-size:.92rem;line-height:1.62;color:rgb(242 240 238/.66)}

/* ─────────────────────── 7 · TEXTO LONGO (artigo / blog) ───────────────────────
   Envolva o corpo do post em <div class="prosa"> e escreva HTML normal:
   h2, h3, p, ul, ol, blockquote, figure, pre. Tudo já sai no ritmo certo. */
.prosa{max-width:68ch;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.75;color:var(--fg-mid)}
.prosa>*+*{margin-top:1.2em}
.prosa h2{font-family:var(--f-display);font-variation-settings:"wght" 760,"wdth" 86;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.028em;
  color:var(--fg);margin-top:2.4em}
.prosa h3{font-family:var(--f-display);font-variation-settings:"wght" 700,"wdth" 90;
  font-size:clamp(1.12rem,1.7vw,1.35rem);letter-spacing:-.02em;color:var(--fg);margin-top:1.9em}
.prosa a{color:var(--violet-300);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:rgb(167 139 255/.4);
  transition:text-decoration-color .3s}
.prosa a:hover{text-decoration-color:var(--violet-300)}
.prosa b,.prosa strong{color:var(--fg)}
.prosa ul,.prosa ol{display:grid;gap:.5em;padding-left:1.3em}
.prosa li{list-style:disc}
.prosa ol li{list-style:decimal}
.prosa li::marker{color:var(--violet-300)}
.prosa blockquote{border-left:2px solid var(--violet);padding:.2em 0 .2em 1.3em;
  font-family:var(--f-display);font-variation-settings:"wght" 500,"wdth" 92;
  font-size:1.18em;line-height:1.4;color:var(--fg)}
.prosa blockquote cite{display:block;margin-top:.7em;font-family:var(--f-mono);font-style:normal;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-low)}
.prosa figure img{border-radius:var(--r-m);width:100%}
.prosa figcaption{margin-top:.7em;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-low)}
.prosa pre{background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.09);
  border-radius:var(--r-s);padding:1.1rem 1.2rem;overflow-x:auto}
.prosa code{font-family:var(--f-mono);font-size:.86em;color:var(--violet-200)}
.prosa hr{border:0;height:1px;background:var(--rule);margin:2.6em 0}
/* legenda de data / autor, acima do título do post */
.meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-low)}
.meta b{color:var(--violet-300);font-weight:400}

/* ─────────────────────── 8 · SEÇÃO CLARA ───────────────────────
   Ponha class="t-claro" numa <section> e ela inverte para o fundo osso,
   com todos os textos e botões se ajustando sozinhos. */
.t-claro{--bg:var(--bone);--fg:#0b0b0d;--fg-mid:rgb(11 11 13/.70);--fg-low:rgb(11 11 13/.58);
  --rule:rgb(11 11 13/.18);--accent:var(--violet);
  background:var(--bone);color:#0b0b0d}
.t-claro .eyebrow{color:var(--violet)}
.t-claro .card{background:rgb(11 11 13/.03);box-shadow:inset 0 0 0 1px rgb(11 11 13/.12)}
.t-claro .card:hover{background:rgb(11 11 13/.05);box-shadow:inset 0 0 0 1px rgb(90 36 237/.35)}
.t-claro .btn--line{color:#0b0b0d;border-color:rgb(11 11 13/.28)}
.t-claro .btn--line::before{background:#0b0b0d}
.t-claro .btn--line:hover{color:var(--bone)}
.t-claro .sec__nota,.t-claro .prosa{color:rgb(11 11 13/.72)}

/* ─────────────────────── 9 · NAVEGAÇÃO ─────────────────────── */
.hnav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:1.4rem;
  padding:.9rem var(--gut);
  transition:transform .45s var(--ease),background .3s,backdrop-filter .3s}
.hnav.is-solid{background:rgb(8 6 16/.72);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgb(255 255 255/.07)}
.hnav.is-up{transform:translateY(-104%)}
.hnav__marca{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.hnav__mark{display:block;width:34px;height:24px;flex:none;
  background:var(--marca-uri) left center/contain no-repeat}
.hnav__nome{font-weight:700;letter-spacing:-.02em}
.hnav__links{display:flex;gap:clamp(1rem,2.2vw,2rem)}
.hnav__links a{position:relative;font-size:.85rem;color:rgb(242 240 238/.72);transition:color .3s}
.hnav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;
  background:var(--violet-300);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--ease)}
.hnav__links a:hover{color:#fff}
.hnav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.hnav__burger{display:none;width:34px;height:34px;position:relative}
.hnav__burger i{position:absolute;left:7px;width:20px;height:1.5px;background:#fff;
  transition:transform .45s var(--ease)}
.hnav__burger i:nth-child(1){top:14px}
.hnav__burger i:nth-child(2){top:20px}
.hnav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.hnav__burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.hdraw{position:fixed;inset:0;z-index:55;background:rgb(5 5 5/.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.hdraw.is-open{clip-path:inset(0 0 0 0)}
.hdraw a{font-family:var(--f-display);font-variation-settings:"wght" 800,"wdth" 88;
  font-size:clamp(1.9rem,8vw,3.2rem);letter-spacing:-.04em;line-height:1.14;color:#fff;
  opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.hdraw.is-open a{opacity:1;transform:none}
.hdraw.is-open a:nth-child(1){transition-delay:.14s}
.hdraw.is-open a:nth-child(2){transition-delay:.20s}
.hdraw.is-open a:nth-child(3){transition-delay:.26s}
.hdraw.is-open a:nth-child(4){transition-delay:.32s}
.hdraw.is-open a:nth-child(5){transition-delay:.38s}
.hdraw.is-open a:nth-child(6){transition-delay:.44s}

/* ─────────────────────── 10 · RODAPÉ ─────────────────────── */
.hfoot{border-top:1px solid rgb(255 255 255/.08);padding:clamp(2.6rem,5vw,4rem) var(--gut) 1.6rem}
.hfoot__in{width:min(100%,var(--shell));margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:clamp(1.4rem,4vw,3rem);align-items:flex-start}
.hfoot__marca{display:flex;align-items:center;gap:.7rem}
.hfoot__marca p{font-size:.86rem;line-height:1.5}
.hfoot__marca i{font-style:normal;color:var(--fg-low);font-size:.8rem}
.hfoot__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-left:auto}
.hfoot__nav a{font-size:.86rem;color:var(--fg-mid);transition:color .3s}
.hfoot__nav a:hover{color:var(--violet-300)}
.hfoot__fim{width:min(100%,var(--shell));margin:2.4rem auto 0;padding-top:1.4rem;
  border-top:1px solid rgb(255 255 255/.07);font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgb(242 240 238/.35)}

/* ─────────────────────── 11 · BOTÃO FLUTUANTE DO WHATSAPP ─────────────────────── */
.fab{position:fixed;right:clamp(.9rem,2vw,1.6rem);
  bottom:max(clamp(.9rem,2vw,1.6rem),calc(env(safe-area-inset-bottom) + .8rem));
  z-index:70;display:grid;place-items:center;width:clamp(48px,5vw,56px);aspect-ratio:1;
  border-radius:50%;background:var(--violet);
  box-shadow:0 12px 34px -8px rgb(var(--violet-glow)/.75);
  opacity:0;transform:translateY(20px) scale(.85);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{transform:scale(1.09);background:var(--violet-400)}
.fab svg{width:46%;height:46%;fill:#fff}

/* ─────────────────────── 12 · APARECER AO ROLAR ───────────────────────
   Ponha data-reveal em qualquer elemento. O vfx-kit.js coloca .is-in
   quando ele entra na tela. data-reveal="lado" entra pela esquerda. */
html.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js [data-reveal="lado"]{transform:translateX(-28px)}
html.js [data-reveal="zoom"]{transform:scale(.96)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-split] .ch{display:inline-block;will-change:transform}

/* ─────────────────────── 13 · TELAS ESTREITAS ─────────────────────── */
@media(max-width:860px){
  :root{--sec:clamp(4rem,11vw,7rem)}
  .hnav__links{display:none}
  .hnav__burger{display:block}
  .hfoot__nav{margin-left:0}
}
@media(max-width:620px){
  .btn{width:100%;justify-content:center}
  .btn--ghost,.btn--auto{width:auto}
}

/* ─────────────────────── 14 · QUEM PEDIU MENOS MOVIMENTO ───────────────────────
   Respeitar isto não é opcional: é acessibilidade. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1!important;transform:none!important}
  h1 em,h2 em,h3 em{animation:none!important;color:var(--lit-b)!important;
    text-shadow:0 0 20px rgba(var(--lit-glow),.4)!important}
  .eyebrow__dot{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   15 · BLOG — índice, artigo e os blocos que o Google lê
   ══════════════════════════════════════════════════════════════════════ */

/* ── caminho de migalhas: some no visual, mas o Google usa para montar
      a linha "visualfx.site › Blog › Artigo" no resultado da busca ── */
.migalhas{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-low);margin-bottom:1.6rem}
.migalhas a{color:var(--fg-low);transition:color .3s}
.migalhas a:hover{color:var(--violet-300)}
.migalhas li+li::before{content:"›";margin-right:.45rem;opacity:.5}
.migalhas li{display:inline-flex;align-items:center}
.migalhas [aria-current]{color:var(--fg-mid)}

/* ── índice do blog: a lista de posts ── */
.post-lista{display:grid;gap:clamp(.9rem,1.8vw,1.3rem)}
.post-card{position:relative;display:grid;gap:.7rem;padding:clamp(1.3rem,2.6vw,2rem);
  border-radius:var(--r-m);background:rgb(255 255 255/.035);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.09);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .55s var(--ease)}
.post-card:hover{transform:translateY(-3px);background:rgb(255 255 255/.055);
  box-shadow:inset 0 0 0 1px rgb(167 139 255/.30),0 22px 50px -30px rgb(var(--violet-glow)/.7)}
.post-card h2,.post-card h3{font-family:var(--f-display);font-variation-settings:"wght" 740,"wdth" 88;
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.1;letter-spacing:-.026em;color:var(--fg)}
/* o link cobre o cartão inteiro — a área de clique é o bloco todo */
.post-card h2 a::after,.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card p{font-size:.95rem;line-height:1.6;color:var(--fg-mid);max-width:64ch}
.post-card--destaque{background:rgb(90 36 237/.10);
  box-shadow:inset 0 0 0 1px rgb(167 139 255/.28)}
.post-card--destaque h2{font-size:clamp(1.5rem,3vw,2.3rem)}

/* ── cabeçalho do artigo ── */
.artigo__cab{max-width:68ch;margin-bottom:clamp(2rem,4vw,3rem)}
.artigo__cab h1{font-family:var(--f-display);font-variation-settings:"wght" 800,"wdth" 84;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.032em;text-wrap:balance}
.artigo__cab .meta{margin-top:1.1rem}
.artigo__cab .lead{margin-top:1.2rem}
.artigo__capa{margin:clamp(1.8rem,3.4vw,2.6rem) 0;border-radius:var(--r-m);overflow:hidden}
.artigo__capa img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── a resposta curta, logo abaixo do título ──
      É o bloco que o Google e os buscadores com IA leem para citar a
      página. Uma resposta direta em 2 a 4 linhas, antes de qualquer rodeio. */
.resumo{max-width:68ch;margin:0 0 clamp(2rem,3.4vw,2.8rem);
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,2.4vw,1.8rem);
  border-radius:var(--r-m);border-left:2px solid var(--violet);
  background:rgb(90 36 237/.10);font-size:1.05rem;line-height:1.65;color:var(--fg)}
.resumo b{color:#fff}
.resumo__t{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet-200);margin-bottom:.6rem}

/* ── sumário: ajuda a leitura longa e vira sitelink de salto na busca ── */
.sumario{max-width:68ch;margin-bottom:clamp(2rem,3.4vw,2.8rem);padding:1.1rem 1.3rem;
  border-radius:var(--r-m);background:rgb(255 255 255/.035);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.09)}
.sumario__t{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-low);margin-bottom:.7rem}
.sumario ol{display:grid;gap:.4rem;counter-reset:s}
.sumario li{counter-increment:s}
.sumario a{font-size:.94rem;color:var(--fg-mid);transition:color .3s}
.sumario a::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.7rem;
  color:var(--violet-300);margin-right:.7rem}
.sumario a:hover{color:var(--fg)}
/* o título não fica escondido atrás da barra fixa ao saltar */
.prosa h2[id],.prosa h3[id]{scroll-margin-top:5.5rem}

/* ── quem escreveu: sinal de E-E-A-T, o Google pesa isso ── */
.autor{display:flex;gap:1.1rem;align-items:flex-start;max-width:68ch;
  margin:clamp(2.4rem,4vw,3.4rem) 0 0;padding-top:clamp(1.6rem,2.6vw,2.2rem);
  border-top:1px solid var(--rule)}
.autor img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;
  object-position:50% 15%}
.autor__n{font-weight:650;color:var(--fg)}
.autor__p{margin-top:.35rem;font-size:.9rem;line-height:1.6;color:var(--fg-mid);max-width:52ch}
.autor__l{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.9rem;font-size:.82rem}
.autor__l a{color:var(--violet-300)}

/* ── chamada dentro do texto: o artigo tem de levar a algum lugar ── */
.artigo__cta{max-width:68ch;margin:clamp(2.4rem,4vw,3.2rem) 0;
  padding:clamp(1.4rem,2.6vw,2rem);border-radius:var(--r-m);
  background:linear-gradient(150deg,rgb(90 36 237/.20),rgb(90 36 237/.06));
  box-shadow:inset 0 0 0 1px rgb(167 139 255/.26)}
.artigo__cta h3{font-family:var(--f-display);font-variation-settings:"wght" 740,"wdth" 88;
  font-size:1.25rem;letter-spacing:-.022em;color:#fff;margin-bottom:.5rem}
.artigo__cta p{font-size:.95rem;line-height:1.6;color:var(--fg-mid);margin-bottom:1.1rem;max-width:52ch}

/* ── continue lendo: linka post com post, que é o que espalha
      autoridade dentro do site ── */
.relacionados{margin-top:clamp(2.6rem,5vw,4rem)}
.relacionados__t{font-family:var(--f-mono);font-size:.62rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-low);margin-bottom:1.1rem}

.tags{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:1rem}
.tags a{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r-pill);border:1px solid var(--rule);
  color:rgb(242 240 238/.58);transition:border-color .3s,color .3s}
.tags a:hover{border-color:var(--violet-300);color:var(--violet-200)}
