/* ==========================================================================
   Rafael Tondin — Gestor de tráfego para ecommerce
   styles.css · NÚCLEO do design system (arquivo único, camadas @layer)
   ---------------------------------------------------------------------------
   Ordem da cascata (KB · CSS-PRATICAS-MODERNAS-TOKENS-LAYERS):
     reset → tokens → base → layout → components → utilities
   - Tokens semânticos: componente nunca usa valor cru nem cor literal.
   - Escala Fibonacci em px (mantida do projeto — não trocar por rem no meio).
   - Propriedades lógicas (margin-inline / padding-block / inset-*).
   - clamp() em display/hero; corpo com escala discreta.
   Paleta 60-30-10: branco (clareza) / quase-preto (autoridade) / laranja (ação).
   Assinatura: "barra de automação" (linha laranja que preenche ao rolar).
   graphics.css = camada de animação/data-viz; responsive.css = breakpoints.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- fontes auto-hospedadas (woff2 variáveis, zero CDN) ---------- */
@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ============================ RESET ============================ */
@layer reset{
  *,*::before,*::after{box-sizing:border-box;margin:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{min-height:100svh}
  h1,h2,h3,h4{font-size:inherit;font-weight:inherit;margin:0}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  img,svg,video{max-width:100%;display:block}
  ul,ol{margin:0;padding:0;list-style:none}
  button,input,select,textarea{font:inherit;color:inherit}
  :where(button){cursor:pointer;background:none;border:0}
}

/* ============================ TOKENS ============================ */
@layer tokens{
:root{
  /* ---- primitivos de cor (paleta crua) ---- */
  --c-white:#FFFFFF;
  --c-paper:#FAFAFA;
  --c-mist:#F3F4F6;
  --c-ink:#0A0A0A;
  --c-slate:#6B7280;
  --c-line:#E6E7EB;
  --c-black:#0B0B0D;      /* autoridade (quase-preto) */
  --c-black-2:#141419;    /* superfície sobre o preto */
  --c-black-3:#1C1C22;
  --c-orange:#F97316;
  --c-orange-hi:#FB923C;
  --c-orange-lo:#EA580C;
  --c-orange-ink:#C2410C; /* laranja p/ TEXTO sobre branco (AA 4.9:1) */
  --c-green:#16A34A;
  --c-red:#DC2626;

  /* ---- aliases semânticos (componentes leem SÓ estes) ---- */
  --bg:var(--c-white);
  --bg-alt:var(--c-paper);
  --surface:var(--c-white);
  --ink:var(--c-ink);
  --ink-2:var(--c-slate);
  --line:var(--c-line);
  --authority:var(--c-black);
  --authority-2:var(--c-black-2);
  --accent:var(--c-orange);
  --accent-hi:var(--c-orange-hi);
  --accent-hover:var(--c-orange-lo);
  --accent-text:var(--c-orange-ink);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);
  --accent-soft-2:color-mix(in srgb,var(--accent) 16%,transparent);
  --btn-fg:#0A0A0A;       /* texto escuro sobre laranja (AA 6.5:1) */

  /* ---- escala Fibonacci em px (espaço/raio/gap) ---- */
  --f-2:2px;  --f-3:3px;  --f-5:5px;  --f-8:8px;  --f-13:13px;
  --f-21:21px; --f-34:34px; --f-55:55px; --f-89:89px; --f-144:144px; --f-233:233px;

  /* ---- tipografia ---- */
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-eyebrow:.78rem;
  --t-sm:.9rem;
  --t-body:1.05rem;
  --t-lead:clamp(1.12rem,1.02rem + .5vw,1.3rem);
  --t-h3:clamp(1.2rem,1.05rem + .8vw,1.55rem);
  --t-h2:clamp(1.7rem,1.3rem + 1.8vw,2.55rem);
  --t-h1:clamp(2.5rem,1.55rem + 4vw,4.6rem);
  --t-display:clamp(3rem,1.6rem + 6vw,6.5rem);

  /* ---- raios, sombras, tempos ---- */
  --r-sm:var(--f-8); --r-md:var(--f-13); --r-lg:var(--f-21); --r-xl:var(--f-34);
  --shadow-sm:0 1px 2px rgba(10,10,10,.05);
  --shadow-md:0 8px 34px -12px rgba(10,10,10,.18);
  --shadow-lift:0 24px 60px -24px rgba(10,10,10,.32);
  --shadow-glow:0 20px 60px -24px rgba(249,115,22,.5);
  --t-fast:120ms; --t-base:220ms; --t-slow:520ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- layout ---- */
  --wrap:1180px;
  --wrap-narrow:760px;
  --gut:clamp(20px,5vw,var(--f-55));
  --header-h:66px;
}
}

/* ============================ BASE ============================ */
@layer base{
  body{
    font-family:var(--font-body);
    font-size:var(--t-body);
    line-height:1.65;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
  h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.035em}
  h2{font-size:var(--t-h2)}
  h3{font-size:var(--t-h3)}
  strong{font-weight:600}
  ::selection{background:var(--accent);color:#fff}

  /* acessibilidade */
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--f-3)}
  .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}
  .skip{position:absolute;inset-inline-start:var(--f-13);inset-block-start:-60px;z-index:100;background:var(--ink);color:#fff;padding:var(--f-8) var(--f-13);border-radius:var(--r-sm);transition:inset-block-start var(--t-fast)}
  .skip:focus{inset-block-start:var(--f-13)}

  /* grão de textura sutil no fundo — dá profundidade "premium" sem peso */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background-image:radial-gradient(rgba(10,10,10,.02) 1px,transparent 1px);
    background-size:4px 4px;
  }
}

/* ============================ LAYOUT ============================ */
@layer layout{
  .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
  .narrow{max-width:var(--wrap-narrow)}
  .section{padding-block:clamp(var(--f-55),9vw,var(--f-144));position:relative}
  .section--tight{padding-block:clamp(var(--f-34),6vw,var(--f-89))}
  .section--alt{background:var(--bg-alt)}
  .section--dark{background:var(--authority);color:#EDEDF0}
  .section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
  .stack>*+*{margin-block-start:var(--f-21)}
  .measure{max-width:62ch}

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

  /* separador com "costura" de dados entre seções */
  .seam{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}
}

/* ============================ COMPONENTS ============================ */
@layer components{

  /* ---- eyebrow (rótulo mono estrutural) ---- */
  .eyebrow{
    font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
    display:inline-flex;align-items:center;gap:var(--f-8);
  }
  .eyebrow::before{content:"";width:var(--f-21);height:2px;background:var(--accent);transform-origin:left;animation:eb 900ms var(--ease) both}
  @keyframes eb{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .section--dark .eyebrow{color:var(--accent-hi)}

  /* ---- ASSINATURA: barra de automação (sublinhado que preenche) ---- */
  .autobar{position:relative;display:inline-block;color:var(--accent-text)}
  .section--dark .autobar{color:var(--accent-hi)}
  .autobar::after{
    content:"";position:absolute;inset-inline:0;inset-block-end:-.1em;height:.14em;
    background:var(--accent);border-radius:2px;transform-origin:left;transform:scaleX(0);
    animation:autofill 1100ms var(--ease) 250ms forwards;
  }
  @keyframes autofill{to{transform:scaleX(1)}}

  /* ---- HEADER ---- */
  .site-header{
    position:sticky;inset-block-start:0;z-index:50;
    background:color-mix(in srgb,var(--bg) 82%,transparent);
    backdrop-filter:saturate(1.4) blur(14px);
    border-block-end:1px solid transparent;
    transition:border-color var(--t-base),background var(--t-base),box-shadow var(--t-base);
  }
  .site-header.is-stuck{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(10,10,10,.5)}
  .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--f-21);min-height:var(--header-h)}
  .brand{display:flex;align-items:center;gap:var(--f-8);font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink)}
  .brand__mark{flex:none;border-radius:7px;display:block;transition:transform var(--t-base) var(--ease-spring)}
  .brand:hover .brand__mark{transform:rotate(-8deg) scale(1.08)}
  .brand__word{white-space:nowrap}
  .nav{display:flex;align-items:center;gap:var(--f-3)}
  .nav a{position:relative;padding:var(--f-8) var(--f-13);font-size:.95rem;color:var(--ink-2);border-radius:var(--r-sm);transition:color var(--t-fast)}
  .nav a:not(.btn)::after{content:"";position:absolute;inset-inline:var(--f-13);inset-block-end:4px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
  .nav a:not(.btn):hover,.nav a[aria-current="page"]{color:var(--ink)}
  .nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
  .nav-toggle{display:none;padding:var(--f-8)}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform var(--t-base),opacity var(--t-base)}

  /* ---- BOTÕES ---- */
  .btn{
    --_bg:var(--accent);--_fg:var(--btn-fg);
    position:relative;display:inline-flex;align-items:center;gap:var(--f-8);
    font-family:var(--font-display);font-weight:700;font-size:.98rem;
    padding:var(--f-13) var(--f-21);border-radius:var(--r-md);
    background:var(--_bg);color:var(--_fg);border:1px solid transparent;isolation:isolate;overflow:hidden;
    transition:transform var(--t-fast),box-shadow var(--t-base);
    box-shadow:0 8px 22px -10px rgba(234,88,12,.55);
  }
  /* brilho que varre no hover */
  .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-120%);transition:transform var(--t-slow) var(--ease)}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
  .btn:hover::before{transform:translateX(120%)}
  .btn:active{transform:translateY(0)}
  .btn .arw{transition:transform var(--t-base)}
  .btn:hover .arw{transform:translateX(4px)}
  .btn--ghost{--_bg:transparent;--_fg:var(--ink);border-color:var(--line);box-shadow:none}
  .btn--ghost:hover{background:var(--bg-alt);border-color:var(--ink-2);box-shadow:none}
  .btn--onDark{--_fg:#fff}
  .btn--lg{font-size:1.05rem;padding:var(--f-13) var(--f-34)}
  .btn--block{width:100%;justify-content:center}
  .nav a.btn,.nav a.btn:hover{color:var(--btn-fg);background:var(--accent)}
  .nav a.btn:hover{background:var(--accent-hover)}

  /* link com seta */
  .tlink{font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:var(--f-8);border-block-end:1px solid var(--line);padding-block-end:2px;transition:color var(--t-fast),border-color var(--t-fast),gap var(--t-fast)}
  .tlink:hover{color:var(--accent-text);border-color:var(--accent);gap:var(--f-13)}

  /* ---- HERO ---- */
  .hero{padding-block:clamp(var(--f-55),8vw,var(--f-144)) clamp(var(--f-34),6vw,var(--f-89));position:relative;overflow:clip}
  .hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(var(--f-34),5vw,var(--f-89));align-items:center}
  .hero h1{margin-block-start:var(--f-21);max-width:15ch}
  .hero__lead{margin-block-start:var(--f-21);font-size:var(--t-lead);color:var(--ink-2);max-width:48ch}
  .hero__cta{margin-block-start:var(--f-34);display:flex;flex-wrap:wrap;gap:var(--f-13);align-items:center}
  .hero__note{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2)}
  /* trust row abaixo do CTA (elemento novo, pouco texto) */
  .trust{display:flex;flex-wrap:wrap;gap:var(--f-21);margin-block-start:var(--f-34);padding-block-start:var(--f-21);border-block-start:1px solid var(--line)}
  .trust__item{display:flex;flex-direction:column;line-height:1.1}
  .trust__n{font-family:var(--font-display);font-weight:700;font-size:1.4rem;font-variant-numeric:tabular-nums}
  .trust__l{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-block-start:4px}

  /* painel ROAS real vs inflado */
  .roas{position:relative;background:var(--authority);color:#EDEDF0;border-radius:var(--r-xl);padding:clamp(var(--f-21),3vw,var(--f-34));box-shadow:var(--shadow-lift);overflow:hidden}
  .roas__cap{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8a8a96}
  .roas__foot{margin-block-start:var(--f-13);font-size:.74rem;color:#8a8a90;line-height:1.5}

  /* ---- cabeçalho de seção ---- */
  .section-head{max-width:60ch;margin-block-end:clamp(var(--f-34),5vw,var(--f-55))}
  .section-head h2{margin-block-start:var(--f-13)}
  .section-head p{margin-block-start:var(--f-13);color:var(--ink-2);font-size:var(--t-lead)}
  .section--dark .section-head p{color:#a9a9b4}

  /* ---- card genérico ---- */
  .card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(var(--f-21),2.5vw,var(--f-34));transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);overflow:hidden}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d3d6db}
  .card h3{margin-block-end:var(--f-8)}
  .card p{color:var(--ink-2);font-size:.98rem}
  .card__ico{width:var(--f-55);height:var(--f-55);display:grid;place-items:center;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);margin-block-end:var(--f-13);transition:transform var(--t-base) var(--ease-spring),background var(--t-base)}
  .card:hover .card__ico{transform:scale(1.08) rotate(-4deg);background:var(--accent-soft-2)}
  .card__ico svg{width:24px;height:24px}
  /* realce radial que segue o cursor (via --mx/--my do JS) */
  .card--spot::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--t-base);background:radial-gradient(220px circle at var(--mx,50%) var(--my,0),var(--accent-soft),transparent 70%);pointer-events:none}
  .card--spot:hover::before{opacity:1}

  /* "como funciona" — blocos de benefício em linguagem leiga (mais leve que os cards) */
  .howto__item{text-align:center}
  .howto__ico{width:var(--f-55);height:var(--f-55);margin-inline:auto;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent);margin-block-end:var(--f-13);transition:transform var(--t-base) var(--ease-spring),background var(--t-base)}
  .howto__item:hover .howto__ico{transform:translateY(-4px) scale(1.06);background:var(--accent-soft-2)}
  .howto__ico svg{width:26px;height:26px}
  .howto__item h3{font-size:1.12rem}
  .howto__item p{color:var(--ink-2);font-size:.95rem;margin-block-start:var(--f-8);max-width:28ch;margin-inline:auto}

  /* dor (problema) */
  .pain{display:flex;gap:var(--f-13);align-items:flex-start}
  .pain__mark{flex:none;width:var(--f-21);height:var(--f-21);margin-block-start:3px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px}
  .pain h3{font-size:1.08rem}
  .pain p{color:var(--ink-2);font-size:.96rem;margin-block-start:4px}

  /* lista de checagem */
  .checks{display:grid;gap:var(--f-13)}
  .checks li{display:flex;gap:var(--f-13);align-items:flex-start;font-size:1rem}
  .checks svg{flex:none;width:20px;height:20px;color:var(--accent);margin-block-start:3px}
  .section--dark .checks li{color:#d6d6de}

  /* tags */
  .tags{display:flex;flex-wrap:wrap;gap:var(--f-5)}
  .tag{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-2);background:var(--bg-alt);border:1px solid var(--line);border-radius:100px;padding:3px 10px;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
  .tag:hover{color:var(--accent-text);border-color:var(--accent);background:var(--accent-soft)}
  .section--dark .tag{color:#b6b6c0;background:#17171d;border-color:#2a2a34}

  /* detalhe de projeto (portfólio rico) */
  .pd{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(var(--f-21),3vw,var(--f-34));margin-block-end:var(--f-21);background:var(--surface);transition:box-shadow var(--t-base),border-color var(--t-base)}
  .pd:hover{box-shadow:var(--shadow-md);border-color:#d3d6db}
  .pd__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--f-13);flex-wrap:wrap;margin-block-end:var(--f-13)}
  .pd__kicker{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
  .pd h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
  .pd__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(var(--f-21),4vw,var(--f-55))}
  .pd-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-block:var(--f-21) var(--f-5)}
  .pd-label:first-child{margin-block-start:0}
  .pd p{color:var(--ink-2);font-size:.98rem;line-height:1.7}
  .pd p+p{margin-block-start:var(--f-8)}
  .pd-result{background:var(--accent-soft);border-inline-start:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--f-13) var(--f-21);color:var(--ink);font-weight:500;font-size:.96rem;line-height:1.6}
  /* tradução leiga do projeto — o que aquilo faz pela loja do cliente */
  .pd__benefit{display:block;font-size:1rem;line-height:1.5;color:var(--ink);background:linear-gradient(90deg,var(--accent-soft),transparent);border-inline-start:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--f-8) var(--f-13);margin-block:var(--f-5) var(--f-21)}
  .pd__benefit strong{color:var(--accent-text)}
  .pd-more{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--f-13);margin-block-start:var(--f-21)}
  .pd-more__item{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--f-21);background:var(--bg-alt);transition:transform var(--t-base),border-color var(--t-base)}
  .pd-more__item:hover{transform:translateY(-3px);border-color:var(--accent)}
  .pd-more__item h4{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin-block-end:var(--f-5)}
  .pd-more__item p{color:var(--ink-2);font-size:.9rem;line-height:1.55}

  /* pacote (oferta) */
  .plan{position:relative;display:flex;flex-direction:column;gap:var(--f-13);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(var(--f-21),2.5vw,var(--f-34));height:100%;transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
  .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .plan--feature{border-color:var(--accent);box-shadow:var(--shadow-glow)}
  .plan--feature::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  .plan__badge{position:absolute;inset-block-start:calc(-1 * var(--f-13));inset-inline-start:clamp(var(--f-21),2.5vw,var(--f-34));font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--btn-fg);padding:4px 12px;border-radius:100px}
  .plan__name{font-family:var(--font-display);font-weight:600;font-size:1.25rem}
  .plan__price{display:flex;align-items:baseline;gap:var(--f-8);flex-wrap:wrap;margin-block:var(--f-8) var(--f-5)}
  .plan__from{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);width:100%}
  .plan__amount{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.2rem);letter-spacing:-.03em;line-height:1}
  .plan__per{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2)}
  .plan--feature .plan__amount{color:var(--accent-text)}
  .plan__note{display:flex;align-items:flex-start;gap:6px;font-family:var(--font-mono);font-size:.7rem;line-height:1.4;color:var(--ink-2);background:var(--accent-soft);border-radius:var(--r-sm);padding:6px 10px;margin-block-end:var(--f-5)}
  .plan__note svg{flex:none;width:13px;height:13px;color:var(--accent);margin-block-start:1px}
  .plan__for{color:var(--ink-2);font-size:.92rem;min-height:2.6em}
  .plan__feat{display:grid;gap:var(--f-8);margin-block-start:var(--f-8)}
  .plan__feat li{display:flex;gap:var(--f-8);font-size:.94rem;color:var(--ink)}
  .plan__feat svg{flex:none;width:18px;height:18px;color:var(--accent);margin-block-start:3px}
  .plan .btn{margin-block-start:auto}

  /* FAQ */
  .faq{max-width:var(--wrap-narrow);margin-inline:auto;display:grid;gap:var(--f-13)}
  .faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;transition:border-color var(--t-base)}
  .faq details[open]{border-color:var(--accent)}
  .faq summary{cursor:pointer;list-style:none;padding:var(--f-21);font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;gap:var(--f-13);align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent-text);font-size:1.3rem;transition:transform var(--t-base)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details[open] summary{color:var(--accent-text)}
  .faq p{padding:0 var(--f-21) var(--f-21);color:var(--ink-2)}

  /* ---- TIMELINE (trajetória — usado em /sobre/) ---- */
  .timeline{position:relative;max-width:68ch}
  .timeline::before{content:"";position:absolute;inset-inline-start:calc(var(--f-8) - 1px);inset-block:var(--f-5) var(--f-5);width:2px;background:var(--line)}
  .section--dark .timeline::before{background:#2a2a34}
  .timeline-item{position:relative;padding-inline-start:clamp(var(--f-34),4vw,var(--f-55));padding-block-end:clamp(var(--f-34),4vw,var(--f-55))}
  .timeline-item:last-child{padding-block-end:0}
  .timeline-item::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:6px;width:var(--f-13);height:var(--f-13);border-radius:50%;background:var(--surface);border:2px solid var(--accent);z-index:1;transition:box-shadow var(--t-base)}
  .section--dark .timeline-item::before{background:var(--authority)}
  .timeline-item.is-current::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
  .timeline-date{font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
  .section--dark .timeline-date{color:var(--accent-hi)}
  .timeline-item h3{margin-block-start:var(--f-5);font-size:1.15rem}
  .timeline-item p{color:var(--ink-2);font-size:.98rem;margin-block-start:var(--f-5);max-width:56ch}

  /* ---- TABELA COMPARATIVA (eu vs agência — usado em /trafego-pago-ecommerce/) ---- */
  .compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
  .compare{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;background:var(--surface)}
  .compare th,.compare td{padding:var(--f-13) var(--f-21);text-align:start;font-size:.92rem;vertical-align:middle}
  .compare thead th{font-family:var(--font-display);font-weight:700;background:var(--bg-alt);border-block-end:1px solid var(--line);white-space:nowrap}
  .compare thead th:not(:first-child){text-align:center}
  .compare tbody td:first-child{color:var(--ink);font-weight:500}
  .compare tbody tr:not(:last-child) td{border-block-end:1px solid var(--line)}
  .compare tbody td:not(:first-child){text-align:center;color:var(--ink-2)}
  .compare tbody tr:hover td{background:var(--bg-alt)}
  .compare .col--me{background:var(--accent-soft)}
  .compare tbody tr:hover td.col--me{background:var(--accent-soft-2)}
  .compare .cell--yes{color:var(--c-green);font-weight:700}
  .compare .cell--no{color:var(--ink-2);opacity:.6}
  .compare thead th.col--me{color:var(--accent-text)}

  /* prose (blog/artigos) */
  .prose{max-width:68ch;margin-inline:auto}
  .prose>*+*{margin-block-start:var(--f-21)}
  .prose h2{font-size:var(--t-h3);margin-block-start:var(--f-55)}
  .prose h3{font-size:1.25rem;margin-block-start:var(--f-34)}
  .prose p,.prose li{color:#26262b;font-size:1.08rem;line-height:1.75}
  .prose ul,.prose ol{padding-inline-start:var(--f-21);display:grid;gap:var(--f-8)}
  .prose ul li{list-style:disc}.prose ol li{list-style:decimal}
  .prose strong{color:var(--ink)}
  .prose blockquote{border-inline-start:3px solid var(--accent);padding:var(--f-8) var(--f-21);color:var(--ink-2);font-size:1.1rem;background:var(--bg-alt);border-radius:0 var(--r-sm) var(--r-sm) 0}
  .prose code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
  .prose a{color:var(--accent-text);border-block-end:1px solid var(--accent-soft);font-weight:500}
  .prose a:hover{border-color:var(--accent)}
  .callout{border:1px solid var(--line);border-inline-start:3px solid var(--accent);background:var(--bg-alt);border-radius:var(--r-md);padding:var(--f-21)}
  .callout p{font-size:1rem;color:var(--ink-2)}

  /* breadcrumb / meta de artigo */
  .crumb{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);display:flex;gap:var(--f-8);flex-wrap:wrap;align-items:center}
  .crumb a:hover{color:var(--accent-text)}
  .crumb .sep{opacity:.5}
  .article-head{max-width:68ch;margin-inline:auto;margin-block-end:var(--f-34)}
  .article-head h1{font-size:clamp(2rem,1.5rem + 2.4vw,3rem);margin-block-start:var(--f-21)}
  .article-meta{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-2);margin-block-start:var(--f-13);display:flex;gap:var(--f-13);flex-wrap:wrap}

  /* lista de posts */
  .post-list{display:grid;gap:var(--f-5)}
  .post-item{display:flex;gap:var(--f-21);padding-block:var(--f-21);border-block-end:1px solid var(--line);align-items:baseline;transition:padding var(--t-base)}
  .post-item:hover{padding-inline-start:var(--f-8)}
  .post-item__date{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-2);flex:none;width:96px}
  .post-item h3{font-size:1.2rem}
  .post-item h3 a:hover{color:var(--accent-text)}
  .post-item p{color:var(--ink-2);font-size:.95rem;margin-block-start:4px}

  /* contato */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--f-34),5vw,var(--f-89));align-items:start}
  .field{display:grid;gap:var(--f-8);margin-block-end:var(--f-21)}
  .field label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  .field input,.field textarea,.field select{font-family:var(--font-body);font-size:1rem;padding:var(--f-13);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .field textarea{min-height:130px;resize:vertical}
  .contact-side{display:grid;gap:var(--f-21)}
  .contact-side .card{padding:var(--f-21)}

  /* ---- seção final (CTA) com fundo próprio, distinto do rodapé ---- */
  .section--finale{
    background:
      radial-gradient(130% 92% at 50% 116%, rgba(249,115,22,.20), transparent 58%),
      linear-gradient(180deg,#18181f 0%,#111116 58%,#0d0d12 100%);
  }

  /* ---- FOOTER (fundo mais profundo e frio + divisor no topo) ---- */
  .site-footer{--t-hover:300ms;position:relative;background:#08080b;color:#a9a9b4;padding-block:clamp(var(--f-55),7vw,var(--f-89)) var(--f-34)}
  .site-footer::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,rgba(249,115,22,.55) 42%,rgba(22,163,74,.5) 58%,transparent)}
  .site-footer h4{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#6f6f7a;margin-block-end:var(--f-13);font-weight:500}
  /* hover ÚNICO do rodapé: fade de luminosidade (sem laranja, sem deslocamento) */
  .site-footer a{color:#f2f2f7;opacity:.79;font-size:.95rem;display:inline-block;padding-block:3px;transition:opacity var(--t-hover) var(--ease)}
  .site-footer a:hover,.site-footer a:focus-visible{opacity:1}
  .footer-top{display:grid;grid-template-columns:1fr 2fr;gap:clamp(var(--f-34),5vw,var(--f-89));padding-block-end:clamp(var(--f-34),5vw,var(--f-55))}
  .footer-brandblock{max-width:44ch}
  .footer-mark{display:inline-flex;align-items:center;gap:var(--f-13);color:#fff}
  .site-footer a.footer-mark{opacity:1}
  .site-footer a.footer-mark:hover,.site-footer a.footer-mark:focus-visible{opacity:.86}
  .footer-mark svg{flex:none}
  .footer-mark span{display:flex;flex-direction:column;line-height:1.25}
  .footer-mark strong{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.03em}
  .footer-mark em{font-family:var(--font-mono);font-style:normal;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8a96}
  .footer-pitch{margin-block-start:var(--f-21);color:#a9a9b4;font-size:.95rem;line-height:1.7}
  .footer-iglink{display:flex;width:fit-content;align-items:center;gap:var(--f-8);white-space:nowrap;margin-block-start:var(--f-21);padding:var(--f-8) var(--f-21) var(--f-8) var(--f-13);border:1px solid #2a2a34;border-radius:100px;color:#fff;font-size:.9rem;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
  .footer-iglink svg{flex:none}
  .footer-iglink:hover{border-color:var(--accent);color:var(--accent-hi);background:rgba(249,115,22,.08)}
  .footer-cols{display:grid;grid-template-columns:1fr 1fr max-content;gap:var(--f-34)}
  .footer-col h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#6f6f7a;margin-block-end:var(--f-13);font-weight:500}
  .footer-col a{display:block;color:#f2f2f7;font-size:.95rem;padding-block:5px;transition:opacity var(--t-hover) var(--ease)}
  .footer-col a:hover,.footer-col a:focus-visible{opacity:1}
  .footer-col--cta p{color:#8a8a96;font-size:.9rem;margin-block-end:var(--f-13);max-width:28ch;line-height:1.6}
  .footer-bottom{margin-block-start:var(--f-55);padding-block-start:var(--f-21);border-block-start:1px solid #22222a;display:flex;justify-content:space-between;gap:var(--f-13);flex-wrap:wrap;font-family:var(--font-mono);font-size:.76rem;color:#6f6f7a}

  /* pills de contato do rodapé (WhatsApp + Instagram) — substitui o pill solto */
  .footer-contacts{display:flex;flex-wrap:wrap;gap:var(--f-8);margin-block-start:var(--f-21)}
  .footer-col--social .footer-contacts{flex-direction:column;align-items:flex-start;margin-block-start:0;gap:var(--f-8)}
  .site-footer .footer-pill{display:inline-flex;padding-block:var(--f-8)}
  .footer-col--social .footer-pill{width:100%;justify-content:flex-start}
  /* pílula: mesmo fade do resto do rodapé + borda que clareia de leve. Sem laranja, sem "pulo". */
  .footer-pill{display:inline-flex;align-items:center;gap:var(--f-8);white-space:nowrap;padding:var(--f-8) var(--f-21);border-radius:100px;font-size:.9rem;font-weight:500;border:1px solid #2a2a34;color:#fff;transition:opacity var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
  .footer-pill svg{flex:none;width:18px;height:18px}
  .site-footer .footer-pill:hover,.site-footer .footer-pill:focus-visible{opacity:1;border-color:#3c3c47}
  @media (prefers-reduced-motion:reduce){.site-footer a{transition:none}}
  /* coluna "fale comigo" (sem botão) */
  .footer-contact-links{display:grid;gap:var(--f-5)}
  .footer-contact-links a{display:inline-flex;align-items:center;gap:var(--f-8)}
  .footer-contact-links a .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#6f6f7a;min-width:74px}

  /* ---- faixa final de CTA (substitui o formulário) ---- */
  .final-cta{position:relative;text-align:center;max-width:var(--wrap-narrow);margin-inline:auto}
  .final-cta h2{margin-block-start:var(--f-13)}
  .final-cta__lead{margin-block:var(--f-21) var(--f-34);color:#a9a9b4;font-size:var(--t-lead)}
  .final-cta__actions{display:flex;flex-wrap:wrap;gap:var(--f-13);justify-content:center;align-items:center}
  .cta-wa{--_bg:#25D366;--_fg:#0A0A0A;box-shadow:0 12px 30px -12px rgba(37,211,102,.6)}
  .cta-wa:hover{--_bg:#20bd5a}
  .final-cta__phone{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);color:#fff;display:inline-flex;align-items:center;gap:var(--f-13);letter-spacing:-.02em}
  .final-cta__phone svg{width:26px;height:26px;color:var(--accent-hi)}
  .final-cta__alt{margin-block-start:var(--f-21);font-family:var(--font-mono);font-size:.82rem;color:#8a8a96;display:flex;gap:var(--f-13);justify-content:center;flex-wrap:wrap;align-items:center}
  .final-cta__alt a{color:#fff;border-block-end:1px solid #2a2a34;padding-block-end:2px;transition:color var(--t-fast),border-color var(--t-fast)}
  .final-cta__alt a:hover{color:var(--accent-hi);border-color:var(--accent)}
}

/* ============================ UTILITIES ============================ */
@layer utilities{
  .center{text-align:center;margin-inline:auto}
  .mt-13{margin-block-start:var(--f-13)}
  .mt-21{margin-block-start:var(--f-21)}
  .mt-34{margin-block-start:var(--f-34)}
  .lead{font-size:var(--t-lead);color:var(--ink-2)}
  .mono{font-family:var(--font-mono)}
  .accent{color:var(--accent-text)}
  .flow{display:flex;flex-wrap:wrap;gap:var(--f-13);align-items:center}
}