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

/* ═══════════════════════════════════  RESET  ══════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  summary::-webkit-details-marker { display: none; }
}

/* ═══════════════════════════════════  TOKENS  ═════════════════════════════════ */
@layer tokens {
  :root {
    /* Superfícies */
    --ink-900:#0A0C0B; --ink-800:#111413; --ink-700:#161A18; --ink-600:#1D221F;
    --line:#252B28;    --line-strong:#333A36;

    /* Acento */
    --lime-300:#D8FF85; --lime-400:#B4F135; --lime-500:#9BD91C;
    --lime-glow:rgba(180,241,53,.18); --lime-wash:rgba(180,241,53,.07);

    /* Texto */
    --text-1:#F2F5F1; --text-2:#A7AFA9; --text-3:#6E766F;

    /* Apoio */
    --moss:#22372B; --danger:#FF6B5F;

    /* Tipografia */
    --font-display:"Clash Display", ui-sans-serif, system-ui, sans-serif;
    --font-ui:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-display:clamp(2.75rem, 7vw, 5.25rem);
    --fs-h2:clamp(2rem, 4.5vw, 3.25rem);
    --fs-h3:clamp(1.375rem, 2.2vw, 1.75rem);
    --fs-h4:1.125rem;
    --fs-lead:clamp(1.0625rem, 1.6vw, 1.25rem);
    --fs-body:1rem;
    --fs-sm:.9375rem;
    --fs-eyebrow:.75rem;

    /* Espaçamento */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
    --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:160px;
    --section-y:clamp(80px, 11vw, 160px);

    /* Raios */
    --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

    /* Sombras */
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.28);
    --shadow-glow:0 0 0 1px var(--lime-glow), 0 8px 28px var(--lime-glow);

    /* Movimento */
    --ease:cubic-bezier(.16,1,.3,1);
  }
}

/* ═══════════════════════════════════  BASE  ═══════════════════════════════════ */
@layer base {
  /* Fontes self-hosted — ver assets/fonts/README.md.
     Enquanto os ficheiros não existirem, o site cai para a stack do sistema
     sem quebrar nada. */
  @font-face {
    font-family:"Clash Display"; src:url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");
    font-weight:600; font-style:normal; font-display:swap;
  }
  @font-face {
    font-family:"Clash Display"; src:url("../fonts/ClashDisplay-Medium.woff2") format("woff2");
    font-weight:500; font-style:normal; font-display:swap;
  }
  @font-face {
    font-family:"Inter"; src:url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face {
    font-family:"Inter"; src:url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight:600; font-style:normal; font-display:swap;
  }

  html { scroll-behavior:smooth; scroll-padding-top:88px; }

  body {
    background:var(--ink-900); color:var(--text-1);
    font-family:var(--font-ui); font-size:var(--fs-body); line-height:1.7;
    font-variant-numeric:tabular-nums;
  }

  h1, h2, h3 { font-family:var(--font-display); font-weight:600; }
  h1 { font-size:var(--fs-display); line-height:.96; letter-spacing:-.03em; }
  h2 { font-size:var(--fs-h2);      line-height:1.06; letter-spacing:-.02em; }
  h3 { font-size:var(--fs-h3);      line-height:1.2;  letter-spacing:-.01em; font-weight:500; }

  p { max-width:68ch; }
  strong { font-weight:600; }
  code { font-family:ui-monospace, "Cascadia Code", monospace; font-size:.9em; color:var(--lime-300); }

  a { transition:color 180ms var(--ease); }
  a:hover { color:var(--lime-300); }

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

  ::selection { background:var(--lime-400); color:var(--ink-900); }

  .skip-link {
    position:absolute; left:var(--sp-4); top:-100px; z-index:200;
    background:var(--lime-400); color:var(--ink-900); font-weight:600;
    padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill);
    transition:top 180ms var(--ease);
  }
  .skip-link:focus { top:var(--sp-4); color:var(--ink-900); }
}

/* ═══════════════════════════════════  LAYOUT  ═════════════════════════════════ */
@layer layout {
  .container { width:100%; max-width:1240px; margin-inline:auto; padding-inline:20px; }
  .container--narrow { max-width:820px; }
  @media (min-width:1024px) { .container { padding-inline:40px; } }

  .section { padding-block:var(--section-y); }
  .section--alt { background:var(--ink-800); }

  .grid { display:grid; gap:var(--sp-5); }
  @media (min-width:768px) {
    .grid--2 { grid-template-columns:repeat(2, 1fr); }
    .grid--3 { grid-template-columns:repeat(3, 1fr); }
  }

  .split { display:grid; gap:var(--sp-8); }
  @media (min-width:1024px) { .split { grid-template-columns:5fr 6fr; gap:var(--sp-9); align-items:start; } }
}

/* ═══════════════════════════════════  COMPONENTES  ════════════════════════════ */
@layer components {

  /* ── Eyebrow ──────────────────────────────────────────── */
  .eyebrow {
    display:flex; align-items:center; gap:10px;
    font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--lime-300); line-height:1;
    margin-bottom:var(--sp-4);
  }
  .eyebrow__dot { width:6px; height:6px; background:var(--lime-400); flex:none; }

  .section__title { margin-bottom:var(--sp-5); }
  .section__lead  { font-size:var(--fs-lead); color:var(--text-2); }

  /* ── Ícones ───────────────────────────────────────────── */
  .ico {
    width:24px; height:24px; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round;
  }

  /* ── Botões ───────────────────────────────────────────── */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    min-height:48px; padding:14px 24px;
    font-size:var(--fs-sm); font-weight:600; line-height:1;
    border:1px solid transparent; border-radius:var(--r-pill); cursor:pointer;
    transition:background-color 180ms var(--ease), transform 180ms var(--ease),
               box-shadow 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
  }
  @media (min-width:1024px) { .btn { padding:16px 32px; } }

  .btn--primary { background:var(--lime-400); color:var(--ink-900); }
  .btn--primary:hover { background:var(--lime-500); color:var(--ink-900); transform:translateY(-2px); box-shadow:var(--shadow-glow); }

  .btn--secondary { border-color:var(--line); color:var(--text-1); }
  .btn--secondary:hover { border-color:var(--line-strong); background:var(--ink-700); color:var(--text-1); }

  .btn--lg { min-height:56px; }
  .btn--block { display:flex; width:100%; }

  /* ── Header ───────────────────────────────────────────── */
  .site-header {
    position:sticky; top:0; z-index:100;
    transition:background-color 200ms var(--ease), box-shadow 200ms var(--ease);
  }
  .site-header.is-stuck {
    background:rgba(10,12,11,.85); backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line);
  }
  .site-header__inner {
    display:flex; align-items:center; justify-content:space-between;
    height:88px; transition:height 200ms var(--ease);
  }
  .site-header.is-stuck .site-header__inner { height:64px; }

  .logo {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
    letter-spacing:-.02em; color:var(--text-1);
  }
  .logo:hover { color:var(--text-1); }
  .logo__mark { width:10px; height:10px; background:var(--lime-400); border-radius:2px; flex:none; }
  .logo__accent { color:var(--lime-400); }

  .nav__list { display:none; }
  .nav__cta  { display:none; }

  @media (min-width:1024px) {
    .nav { display:flex; align-items:center; gap:var(--sp-7); }
    .nav__list { display:flex; gap:var(--sp-6); font-size:var(--fs-sm); color:var(--text-2); }
    .nav__cta { display:inline-flex; }
  }

  /* ── Seletor de idioma ────────────────────────────────── */
  /* Discreto de propósito: quem chega ao site português já está na versão
     certa. O seletor existe para o companheiro holandês ou anglófono
     conseguir ler a mesma proposta, não para o visitante escolher. */
  /* flex:none e nowrap: dentro do cabeçalho flexível, sem isto o seletor
     é espremido e os três idiomas empilham-se em coluna. */
  .lang { flex:none; }
  .lang ul {
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:nowrap;
    white-space:nowrap;
    font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.08em;
  }
  .lang li + li::before {
    content:""; display:inline-block; width:1px; height:11px;
    margin-right:var(--sp-2); background:var(--line-strong);
    vertical-align:-1px;
  }
  .lang a { color:var(--text-3); padding:6px 2px; }
  .lang a:hover { color:var(--text-1); }
  .lang__atual { color:var(--lime-300); }

  @media (max-width:1023px) {
    /* No telemóvel fica ao lado do botão de menu, sem competir com o logo */
    .lang { margin-left:auto; margin-right:var(--sp-4); }
  }

  .nav-toggle {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px;
    background:none; border:none; cursor:pointer;
  }
  .nav-toggle__bar {
    height:1.5px; background:var(--text-1); border-radius:2px;
    transition:transform 200ms var(--ease), opacity 200ms var(--ease);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform:translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform:translateY(-3.25px) rotate(-45deg); }
  @media (min-width:1024px) { .nav-toggle { display:none; } }

  /* Drawer mobile */
  @media (max-width:1023px) {
    .nav {
      position:fixed; inset:0; z-index:99;
      display:flex; flex-direction:column; justify-content:center; gap:var(--sp-7);
      padding:var(--sp-8) 20px;
      background:var(--ink-900);
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
    }
    .nav.is-open { opacity:1; visibility:visible; transform:none; }
    .nav__list { display:flex; flex-direction:column; gap:var(--sp-5); font-family:var(--font-display); font-size:var(--fs-h3); }
    .nav__cta  { display:inline-flex; align-self:flex-start; }
    body.nav-open { overflow:hidden; }
  }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero { padding-block:clamp(48px, 8vw, 96px) var(--section-y); }
  .hero__inner { display:grid; gap:var(--sp-8); }
  @media (min-width:1024px) {
    .hero__inner { grid-template-columns:7fr 5fr; gap:var(--sp-9); align-items:center; }
  }
  .hero .lead { font-size:var(--fs-lead); color:var(--text-2); margin-top:var(--sp-5); }
  .hi { font-style:normal; color:var(--lime-300); }
  .hero__actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-7); }

  .trust {
    display:flex; flex-direction:column; gap:var(--sp-3);
    margin-top:var(--sp-7); font-size:var(--fs-sm); color:var(--text-2);
  }
  .trust li { display:flex; align-items:flex-start; gap:10px; }
  .trust .ico { width:18px; height:18px; color:var(--lime-400); margin-top:4px; }

  /* Mockup de browser */
  .browser {
    border:1px solid var(--line); border-radius:var(--r-xl);
    background:var(--ink-700); box-shadow:var(--shadow-card); overflow:hidden;
  }
  .browser__bar {
    display:flex; align-items:center; gap:6px;
    height:32px; padding-inline:14px; border-bottom:1px solid var(--line);
  }
  .browser__bar span { width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
  .browser__body { aspect-ratio:4/3; }
  .browser__ph { height:100%; background:linear-gradient(160deg, var(--moss), var(--ink-700) 60%); }

  /* ── Cards ────────────────────────────────────────────── */
  .card {
    display:flex; flex-direction:column;
    padding:var(--sp-5); background:var(--ink-700);
    border:1px solid var(--line); border-radius:var(--r-lg);
    transition:background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
  }
  @media (min-width:768px) { .card { padding:var(--sp-6); } }

  /* :where() mantém a especificidade em 0,1,0 para que as regras de
     componente escritas mais abaixo (.chip, .price-deadline, .price-note)
     ganhem por ordem em vez de precisarem de mais especificidade. */
  .card :where(p) { color:var(--text-2); font-size:var(--fs-sm); margin-top:var(--sp-3); }
  .card--icon:hover { background:var(--ink-600); border-color:var(--line-strong); transform:translateY(-4px); }

  .card__icon {
    display:grid; place-items:center;
    width:52px; height:52px; margin-bottom:var(--sp-5);
    background:var(--lime-wash); border-radius:var(--r-md); color:var(--lime-400);
  }

  /* ── Timeline ─────────────────────────────────────────── */
  .track__title {
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4);
    margin-top:var(--sp-9); margin-bottom:var(--sp-6);
    padding-top:var(--sp-6); border-top:1px solid var(--line);
  }
  .track__when {
    font-family:var(--font-ui); font-size:var(--fs-eyebrow); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--lime-300);
    padding:6px 14px; border:1px solid var(--line); border-radius:var(--r-pill);
    white-space:nowrap;
  }
  .track__lead { color:var(--text-2); font-size:var(--fs-sm); margin-top:calc(var(--sp-5) * -1); margin-bottom:var(--sp-6); }

  .timeline { display:grid; gap:var(--sp-6); position:relative; }
  .timeline h4 {
    font-family:var(--font-display); font-weight:500; font-size:var(--fs-h3);
    line-height:1.2; letter-spacing:-.01em;
  }
  .timeline__step { display:flex; gap:var(--sp-5); align-items:flex-start; }
  .timeline__num {
    display:grid; place-items:center; flex:none;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line); background:var(--ink-700);
    font-family:var(--font-display); font-weight:600; color:var(--lime-400);
  }
  .timeline__when {
    font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-2);
  }
  .timeline__step p:last-child { color:var(--text-2); font-size:var(--fs-sm); margin-top:var(--sp-3); }

  @media (min-width:1024px) {
    .timeline { grid-template-columns:repeat(3, 1fr); gap:var(--sp-6); }
    .timeline__step { flex-direction:column; }
  }

  /* ── Lista de verificações (SEO) ───────────────────────── */
  .checks { display:grid; gap:var(--sp-5); }
  .checks li {
    padding-left:var(--sp-6); position:relative;
    font-size:var(--fs-sm); color:var(--text-2);
  }
  .checks li::before {
    content:""; position:absolute; left:0; top:7px;
    width:10px; height:10px; border-radius:2px; background:var(--lime-400);
  }
  .checks strong { display:block; color:var(--text-1); font-size:var(--fs-h4); margin-bottom:var(--sp-1); }

  /* ── Fotografia de pessoa ─────────────────────────────── */
  /* O tratamento de design.md §8 — dessaturar, arrefecer as sombras e
     aplicar vinheta — está gravado nos próprios ficheiros, não aqui.
     Foi feito ao nível da imagem para poder levantar a sombra dura do sol
     antes de escurecer; por CSS, o lado sombrio do rosto fechava em preto.
     NÃO acrescentar filter() aqui: seria tratar duas vezes. */
  .portrait { position:relative; margin:0; }
  .portrait img {
    width:100%; height:auto; display:block;
    border-radius:var(--r-xl); border:1px solid var(--line);
    box-shadow:var(--shadow-card);
  }
  .portrait figcaption {
    position:relative; z-index:1;
    margin-top:var(--sp-4);
    font-size:var(--fs-sm); color:var(--text-3);
  }

  /* Sem aspect-ratio nem object-fit no hero: a foto já vem recortada do
     processamento e forçar uma proporção aqui voltaria a cortar a fila de
     casas de empena — que é a prova visual de que a foto é nos Países Baixos. */

  /* Em ecrã pequeno o retrato é um apoio ao texto, não o protagonista:
     limitado em largura, senão um rosto a 700px domina a secção inteira. */
  .portrait--inline { margin-bottom:var(--sp-6); max-width:180px; }
  .portrait--inline img { border-radius:var(--r-lg); aspect-ratio:1/1; object-fit:cover; }

  /* ── SEO continuado ───────────────────────────────────── */
  .longgame {
    margin-top:var(--sp-9);
    padding:var(--sp-6) var(--sp-5);
    background:var(--ink-700); border:1px solid var(--line); border-radius:var(--r-lg);
    border-left:2px solid var(--lime-400);
  }
  @media (min-width:768px) { .longgame { padding:var(--sp-7); } }
  .longgame p { color:var(--text-2); font-size:var(--fs-sm); margin-top:var(--sp-4); }

  /* A frase é o argumento inteiro desta secção: tamanho de declaração,
     não de subtítulo, e respiro à volta para respirar sozinha. */
  .longgame__claim {
    max-width:20ch;
    font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.02em; font-weight:600;
    margin-bottom:var(--sp-6);
  }
  .longgame__intro { max-width:62ch; }

  /* Três fases dos 3 meses — processo, nunca resultados */
  .phases {
    display:grid; gap:var(--sp-5);
    margin-top:var(--sp-7); padding-top:var(--sp-6);
    border-top:1px solid var(--line);
  }
  @media (min-width:768px) { .phases { grid-template-columns:repeat(3, 1fr); gap:var(--sp-6); } }

  /* A barra ganha força do mês 1 para o mês 3: a reputação constrói-se,
     não se desvanece. Só a última leva acento — um por secção (design.md §1). */
  .phases__item { padding-top:var(--sp-4); border-top:2px solid var(--line); }
  .phases__item:nth-child(2) { border-top-color:var(--line-strong); }
  .phases__item:nth-child(3) { border-top-color:var(--lime-400); }
  .phases__when {
    margin-top:0 !important;
    font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-3);
  }
  .phases h4 { margin-top:var(--sp-2); font-size:var(--fs-h4); font-weight:600; color:var(--text-1); }

  /* Bloco da história pessoal: o retrato acompanha o texto emocional,
     não o bloco inteiro. */
  .story { margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid var(--line); }
  .story__text > p:first-child { margin-top:0; }

  @media (min-width:768px) {
    .story { display:grid; grid-template-columns:220px 1fr; gap:var(--sp-6); align-items:start; }
    .portrait--inline { margin-bottom:0; max-width:none; }
  }
  @media (min-width:1024px) {
    .story { grid-template-columns:260px 1fr; gap:var(--sp-7); }
  }

  /* ── Preços ───────────────────────────────────────────── */
  .prices { align-items:start; }

  .card--featured { border-color:var(--lime-400); background:linear-gradient(var(--lime-wash), var(--lime-wash)) var(--ink-700); }

  .chip {
    align-self:flex-start; margin-bottom:var(--sp-5);
    padding:6px 14px; border-radius:var(--r-pill);
    background:var(--lime-400); color:var(--ink-900);
    font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  }

  .price-name { font-size:var(--fs-h4); font-family:var(--font-ui); font-weight:600; color:var(--text-2); }

  .price { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2); }
  .price__from { flex-basis:100%; font-size:var(--fs-sm); color:var(--text-2); }
  .price__now { font-family:var(--font-display); font-weight:600; font-size:clamp(3rem, 6vw, 4rem); line-height:1; letter-spacing:-.03em; color:var(--text-1); }
  .price__was { font-size:var(--fs-h4); color:var(--text-3); text-decoration:line-through; }
  .price__vat { font-size:var(--fs-sm); color:var(--text-3); }
  .price__consult { font-family:var(--font-display); font-weight:500; font-size:var(--fs-h3); }

  .price-why { color:var(--text-2); font-size:var(--fs-sm); margin-top:var(--sp-4); }

  .price-deadline {
    display:flex; align-items:center; gap:var(--sp-2);
    margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--lime-300);
  }
  .price-deadline .ico { width:16px; height:16px; }

  .includes { display:grid; gap:var(--sp-3); margin-block:var(--sp-6); font-size:var(--fs-sm); color:var(--text-2); }
  .includes li { display:flex; align-items:flex-start; gap:10px; }
  .includes li::before {
    content:""; flex:none; width:16px; height:16px; margin-top:5px;
    background:var(--lime-400);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Extra opcional — visível, nunca letra pequena */
  .addon {
    margin-bottom:var(--sp-6); padding-top:var(--sp-5);
    border-top:1px solid var(--line);
  }
  .addon__title {
    font-size:var(--fs-h4) !important; font-weight:600; color:var(--text-1) !important;
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  }
  .addon__tag {
    font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--lime-300); padding:4px 10px;
    border:1px solid var(--line); border-radius:var(--r-pill);
  }

  .price-note { margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--text-3); }
  .price-note a { color:var(--text-2); text-decoration:underline; text-underline-offset:3px; }

  /* ── FAQ ──────────────────────────────────────────────── */
  .faq { display:grid; gap:var(--sp-3); }
  .faq__item { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-700); overflow:hidden; }
  .faq__item summary {
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
    padding:var(--sp-5); cursor:pointer; list-style:none;
    font-size:var(--fs-h4); font-weight:600;
    transition:color 180ms var(--ease);
  }
  .faq__item summary:hover { color:var(--lime-300); }
  .faq__item summary::after {
    content:""; flex:none; width:16px; height:16px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform 200ms var(--ease);
  }
  .faq__item[open] summary::after { transform:rotate(45deg); }
  .faq__body { padding:0 var(--sp-5) var(--sp-5); color:var(--text-2); font-size:var(--fs-sm); }
  .faq__body p + p { margin-top:var(--sp-3); }
  .faq__body strong { color:var(--text-1); }

  /* ── CTA final ────────────────────────────────────────── */
  .cta-final .lead { font-size:var(--fs-lead); color:var(--text-2); margin:var(--sp-5) auto var(--sp-7); }
  .cta-final__alt { margin:var(--sp-6) auto 0; font-size:var(--fs-sm); color:var(--text-3); }
  .cta-final__alt a { color:var(--lime-300); text-decoration:underline; text-underline-offset:3px; }

  /* ── Footer ───────────────────────────────────────────── */
  .site-footer { border-top:1px solid var(--line); padding-block:var(--sp-8) var(--sp-6); font-size:var(--fs-sm); }
  .site-footer__grid { display:grid; gap:var(--sp-7); }
  @media (min-width:768px) { .site-footer__grid { grid-template-columns:2fr 1fr 1.4fr; gap:var(--sp-8); } }

  .site-footer__tag { color:var(--text-3); margin-top:var(--sp-4); max-width:34ch; }
  .site-footer__h { font-family:var(--font-ui); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-4); }
  .site-footer ul { display:grid; gap:var(--sp-3); color:var(--text-2); }

  .site-footer__bottom {
    display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;
    margin-top:var(--sp-8); padding-top:var(--sp-5);
    border-top:1px solid var(--line); color:var(--text-3);
  }
  .site-footer__bottom ul { display:flex; flex-wrap:wrap; gap:var(--sp-5); }
}

/* ═══════════════════════════════════  UTILITÁRIOS  ════════════════════════════ */
@layer utilities {
  .center { text-align:center; }
  .center p, .center .lead { margin-inline:auto; }
  .mt-7 { margin-top:var(--sp-7); }
  .mt-8 { margin-top:var(--sp-8); }

  /* Entrada — anima só opacity e transform, uma vez por elemento.
     Escondido apenas quando há JS: se o script falhar ou for bloqueado,
     o conteúdo aparece na mesma. Nunca esconder conteúdo à espera de JS. */
  .js [data-reveal] { opacity:0; transform:translateY(16px); }
  .js [data-reveal].is-visible {
    opacity:1; transform:none;
    transition:opacity 500ms var(--ease), transform 500ms var(--ease);
    transition-delay:var(--reveal-delay, 0ms);
  }
}

/* ═══════════════════════════════  REDUCED MOTION  ═════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}