/* ==========================================================================
   CONCEPTLAB — styles.css
   Arquivo único. Ordem das camadas definida em specs/site.md §10.
   Todos os valores vêm de specs/design.md. Nada de número mágico solto.
   ========================================================================== */

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

/* ==========================================================================
   TOKENS — specs/design.md §3 a §6 e §10
   ========================================================================== */
@layer tokens {
  :root {
    /* Superfícies */
    --bg: #141414;
    --surface-1: #1a1a1a;
    --surface-2: #202020;
    --surface-3: #282828;
    --surface-invert: #f5f5f5;

    /* Texto — contrastes medidos sobre --bg */
    --text-primary: #ffffff;  /* 18.42:1 */
    --text-body: #c9c9c9;     /* 11.34:1 */
    --text-muted: #a0a0a0;    /*  7.04:1 */
    --text-faint: #8a8a8a;    /*  5.34:1 */
    --gray: #6b6b6b;          /*  3.46:1 — NÃO-TEXTO apenas */

    /* Linhas */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --line-lime: rgba(198, 255, 61, 0.32);

    /* Destaque */
    --lime: #c6ff3d;
    --lime-hover: #d4ff6b;
    --lime-dim: rgba(198, 255, 61, 0.12);
    --text-on-lime: #141414;

    /* Tipografia */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    --fs-display: clamp(2.75rem, 1.5rem + 6.2vw, 6rem);
    --fs-h2: clamp(2rem, 1.2rem + 4vw, 3.5rem);
    --fs-h3: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
    --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-eyebrow: 0.75rem;
    --fs-button: 0.9375rem;

    /* Espaçamento — escala base 8px */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;
    --s-11: 10rem;
    --s-12: 12.5rem;

    /* Layout */
    --section-pad: clamp(5rem, 10vw, 10rem);
    --container: 1200px;
    --container-wide: 1440px;
    --gutter: 1.5rem;

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

    /* Movimento */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-slow: 520ms;

    /* Altura do header, usada pelo scroll-margin das âncoras */
    --header-h: 80px;

    /* Quanto a esteira da dobra 2 sobe para atravessar a emenda do hero.
       O hero reserva esse espaço embaixo, para a copy nunca cair sob ela.
       Os dois componentes leem o MESMO token: se um mudar, o outro acompanha. */
    --strip-pull: 90px;
  }

  @media (min-width: 1024px) {
    :root {
      --gutter: 3rem;
      --strip-pull: 170px;
    }
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  /*
    Sem isto, o atributo height="..." do HTML vence e a imagem é ESTICADA
    verticalmente — com object-fit no padrão `fill`, os pixels distorcem.
    Foi exatamente o que quebrou os cards de bônus.
  */
  img {
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  :target {
    scroll-margin-top: calc(var(--header-h) + var(--s-6));
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   BASE — fontes e tipografia padrão
   ========================================================================== */
@layer base {
  /* Fontes variáveis: um arquivo cobre toda a faixa de pesos declarada. */
  @font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  body {
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    color: var(--text-primary);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
  }

  h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
  }

  h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }

  h4 {
    font-size: var(--fs-h4);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  p {
    max-width: 68ch;
    text-wrap: pretty;
  }

  strong,
  b {
    color: var(--text-primary);
    font-weight: 600;
  }

  /* Foco visível em qualquer elemento interativo. design.md §7 */
  :focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .section {
    padding-block: var(--section-pad);
    position: relative;
  }

  /* Eixo 1 do sistema de ritmo — design.md §11 */
  .section--alt {
    background: var(--surface-1);
  }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--wide {
    max-width: var(--container-wide);
  }

  .container--narrow {
    max-width: 900px;
  }

  /* Cabeçalho de seção centralizado, medida de leitura contida */
  .section-head {
    text-align: center;
    margin-inline: auto;
    max-width: 60ch;
  }

  .section-head p {
    margin-inline: auto;
    margin-top: var(--s-5);
    max-width: 60ch;
    font-size: var(--fs-body-lg);
  }

  .eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: var(--s-4);
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* ---------- Botões — design.md §7 ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 52px;
    padding: 1rem 2rem;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  @media (min-width: 768px) {
    .btn {
      padding: 1.125rem 2.5rem;
    }
  }

  .btn--primary {
    background: var(--lime);
    color: var(--text-on-lime);
  }

  .btn--primary:hover {
    background: var(--lime-hover);
    transform: translateY(-1px);
  }

  .btn--primary:active {
    transform: translateY(0);
  }

  /* O limão sumiria contra o próprio botão, então o anel é branco. */
  .btn--primary:focus-visible {
    outline-color: #ffffff;
  }

  .btn--secondary {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-primary);
  }

  .btn--secondary:hover {
    border-color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  /* ---------- Wordmark ---------- */
  /*
    PLACEHOLDER: não existe logo vetorial. O wordmark reproduz a marca como ela
    aparece nas artes — CONCEPT em branco + LAB em limão. Trocar por SVG quando
    o arquivo chegar. Ver site.md §9.
  */
  .wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
  }

  .wordmark span {
    color: var(--lime);
  }

  .wordmark--lg {
    font-size: 1.5rem;
  }

  /* ---------- Header — design.md §8 ---------- */
  .header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
      height var(--dur-base) var(--ease-out),
      background-color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }

  .header.is-compact {
    height: 60px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
  }

  .header__inner {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .header .btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-sm);
  }

  @media (min-width: 768px) {
    .header .btn {
      padding: 0.875rem 1.75rem;
      font-size: var(--fs-button);
    }
  }

  /* ---------- CTA fixo mobile — design.md §8 ---------- */
  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .sticky-cta.is-visible {
    transform: translateY(0);
  }

  .sticky-cta__price {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--text-primary);
    line-height: 1.2;
  }

  .sticky-cta__price small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
  }

  .sticky-cta .btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  @media (min-width: 1024px) {
    .sticky-cta {
      display: none;
    }
  }

  /* ---------- Footer — design.md §8 ---------- */
  .footer {
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-block: var(--s-9);
    /* espaço para o CTA fixo não cobrir o conteúdo final no mobile */
    padding-bottom: calc(var(--s-9) + 5rem);
  }

  @media (min-width: 1024px) {
    .footer {
      padding-bottom: var(--s-9);
    }
  }

  .footer__inner {
    display: grid;
    gap: var(--s-6);
  }

  @media (min-width: 768px) {
    .footer__inner {
      grid-template-columns: 1fr auto;
      align-items: start;
    }
  }

  .footer__legal {
    font-size: var(--fs-sm);
    color: var(--text-faint);
    line-height: 1.6;
  }

  .footer__legal p {
    max-width: 52ch;
  }

  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    font-size: var(--fs-sm);
  }

  .footer__links a {
    color: var(--text-muted);
    border-bottom: 1px solid transparent;
    transition:
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }

  .footer__links a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--lime);
  }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {
  /* ---------- Dobra 1 — Hero. design.md §9 ----------
     Arte escura full-bleed, composição centralizada, scrim radial. */
  .hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--s-8)) calc(var(--strip-pull) + var(--s-5));
    overflow: hidden;
    isolation: isolate;
  }

  /*
    A arte tem 1920x1071. Acima de 1024px o hero passa a ter a ALTURA da própria
    arte (55.78vw), com teto no tamanho nativo: assim ela aparece inteira e nunca
    é ampliada além do que o arquivo aguenta. O piso de 620px garante espaço para
    a copy. Abaixo disso, mobile continua em 100svh com recorte 4:5.
  */
  @media (min-width: 1024px) {
    .hero {
      /* PISO, não altura fixa. A arte tem 1920x1071 e 55.78vw é a razão dela,
         então em telas largas o hero continua com a altura exata da arte.
         Mas entre ~1024px e ~1540px a copy é mais alta que esse valor: com
         `height` fixo ela transbordava 149px e ia parar embaixo da esteira,
         deixando o CTA do hero inclicável. Com `min-height` o hero cresce
         nessa faixa — mesma lógica que o mobile já usava com 100svh. */
      min-height: clamp(620px, 55.78vw, 1071px);
      padding-bottom: calc(var(--strip-pull) + var(--s-5));
    }
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 35%;
  }

  @media (min-width: 768px) {
    .hero__media img {
      object-position: 58% 40%;
    }
  }

  /* Scrim radial + emenda para a seção seguinte */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        80% 90% at 50% 45%,
        rgba(20, 20, 20, 0.92) 0%,
        rgba(20, 20, 20, 0.7) 45%,
        rgba(20, 20, 20, 0.35) 100%
      ),
      linear-gradient(180deg, rgba(20, 20, 20, 0.6) 0%, transparent 30%),
      /* fecha no preto sólido: a emenda com a dobra 2 some por completo */
      linear-gradient(180deg, transparent 45%, rgba(20, 20, 20, 0.75) 78%, var(--bg) 100%);
  }

  .hero__inner {
    position: relative;
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .hero .wordmark {
    margin-bottom: var(--s-7);
  }

  /*
    O h1 do hero usa uma escala própria, mais contida que --fs-display: a copy
    tem 15 palavras e, no mobile, 44px empurravam CTA e prova social para fora
    da primeira tela.
  */
  .hero h1 {
    font-size: clamp(1.875rem, 1.1rem + 3.6vw, 4.5rem);
    margin-bottom: var(--s-4);
  }

  .hero .wordmark {
    margin-bottom: var(--s-6);
  }

  .hero h1 em {
    font-style: normal;
    color: var(--lime);
  }

  .hero__sub {
    margin-inline: auto;
    max-width: 54ch;
    font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem);
    line-height: 1.6;
    color: var(--text-body);
  }

  @media (max-width: 767px) {
    .hero__cta {
      margin-top: var(--s-6);
    }

    .proof {
      margin-top: var(--s-6);
    }
  }

  .hero__cta {
    margin-top: var(--s-7);
  }

  /* Barra de prova social — design.md §8 */
  .proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    margin-top: var(--s-7);
  }

  .proof__avatars {
    display: flex;
  }

  .proof__avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg);
  }

  .proof__avatars img + img {
    margin-left: -10px;
  }

  @media (min-width: 768px) {
    .proof__avatars img {
      width: 40px;
      height: 40px;
    }

    .proof__avatars img + img {
      margin-left: -12px;
    }
  }

  .proof__count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.3;
    text-align: left;
  }

  .proof__count b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Dobra 2 — Esteira de processo ----------
     Sobe por margem negativa e atravessa a emenda hero/dobra 2, ficando por cima
     do degradê. Loop infinito com as travas de sempre. */
  .processtrip {
    --pull: var(--strip-pull);
    position: relative;
    z-index: 2;
    margin-top: calc(var(--pull) * -1 - var(--section-pad));
    margin-bottom: var(--s-8);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  }

  .processtrip__track {
    display: flex;
    width: max-content;
    animation: processtrip 60s linear infinite;
  }

  .processtrip:hover .processtrip__track,
  .processtrip:focus-within .processtrip__track,
  .processtrip.is-offscreen .processtrip__track {
    animation-play-state: paused;
  }

  .processtrip__group {
    display: flex;
  }

  /* margin, não gap: com gap, -50% não cai em uma cópia exata e a emenda salta. */
  .processtrip__slide {
    flex: 0 0 auto;
    width: 300px;
    margin: 0 var(--s-5) 0 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .processtrip__slide {
      width: 420px;
    }
  }

  .processtrip__slide img {
    width: 100%;
    height: auto;
  }

  .carousel__caption {
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
  }

  @keyframes processtrip {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .processtrip__track {
      animation-name: none;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      width: 100%;
    }

    .processtrip__group[aria-hidden="true"] {
      display: none;
    }
  }

  /* ---------- Dobra 2 — Coverflow de artes de aluno ----------
     Uma fileira só, as 21 peças. Dirigido pelo usuário: arraste, teclado e setas.
     Sem autoplay — não precisa da exceção ao §10 que as esteiras exigiam.
     Cards em 16:10 (a arte é 16:10; quadrado cortaria a peça e o selo).
     Sem sombra projetada: §6 proíbe. Profundidade vem da perspectiva e do fade. */
  .coverflow {
    --cf-card: clamp(268px, 42vw, 520px);
    --cf-persp: 3;
    position: relative;
    margin-top: var(--s-8);
  }

  .coverflow__frame {
    overflow: hidden;
    padding-block: var(--s-6);
    cursor: grab;
    outline: none;
    perspective: calc(var(--cf-card) * var(--cf-persp));
    /* arraste horizontal é nosso; a página mantém o scroll vertical */
    touch-action: pan-y;
  }

  .coverflow__frame:active {
    cursor: grabbing;
  }

  .coverflow__frame:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 4px;
    border-radius: var(--r-lg);
  }

  .coverflow__stage {
    position: relative;
    height: calc(var(--cf-card) / 1.6);
    transform-style: preserve-3d;
    user-select: none;
  }

  .coverflow__card {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--cf-card);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface-2);
    will-change: transform;
  }

  .coverflow__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Setas: mesmo desenho do resto do site. Só no desktop — no toque, arrasta. */
  .coverflow__nav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 200;
    transform: translateY(-50%);
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--text-primary);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }

  @media (min-width: 1024px) {
    .coverflow__nav {
      display: grid;
    }
  }

  .coverflow__nav:hover {
    background: var(--surface-3);
    border-color: var(--text-primary);
  }

  .coverflow__nav svg {
    width: 18px;
    height: 18px;
  }

  .coverflow__nav--prev { left: var(--s-5); }
  .coverflow__nav--next { right: var(--s-5); }

  /* O crédito ao artista sai de dentro da imagem, como manda o §9. */
  .coverflow__caption {
    margin: var(--s-5) auto 0;
    text-align: center;
    font-size: var(--fs-sm);
    line-height: 1.4;
  }

  .coverflow__handle {
    color: var(--text-primary);
    font-weight: 500;
  }

  .coverflow__count {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
  }

  /* Sem movimento: vira grade estática, e nada depende de arrastar. */
  @media (prefers-reduced-motion: reduce) {
    .coverflow__frame {
      overflow-x: auto;
      perspective: none;
      scroll-snap-type: x proximity;
    }

    .coverflow__stage {
      display: flex;
      gap: var(--s-4);
      height: auto;
      transform-style: flat;
    }

    .coverflow__card {
      position: static;
      flex: 0 0 auto;
      transform: none !important;
      opacity: 1 !important;
      scroll-snap-align: start;
    }

    .coverflow__nav {
      display: none;
    }
  }

  /* ---------- Dobra 13 — Card do instrutor. design.md §8 ---------- */
  .instructor {
    max-width: var(--container);
    margin-inline: auto;
    margin-top: var(--s-8);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: grid;
  }

  @media (min-width: 1024px) {
    .instructor {
      grid-template-columns: 1fr 1fr;
    }
  }

  .instructor__text {
    order: 2;
    background: var(--surface-invert);
    color: #141414;
    padding: var(--s-6);
  }

  @media (min-width: 768px) {
    .instructor__text {
      padding: var(--s-8);
    }
  }

  @media (min-width: 1024px) {
    .instructor__text {
      order: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .instructor__text h2,
  .instructor__text h3 {
    color: #141414;
  }

  .instructor__role {
    margin-top: var(--s-2);
    font-size: var(--fs-body-lg);
    color: #4a4a4a;
  }

  .instructor__text p:not(.instructor__role) {
    margin-top: var(--s-5);
    color: #333333;
  }

  /* Painel preto declarado: a foto desvanece para preto e funde no painel. */
  .instructor__photo {
    order: 1;
    background: #000000;
    aspect-ratio: 4 / 5;
  }

  /*
    No desktop a altura da linha passa a ser ditada pelo TEXTO, não pela foto.
    Com aspect-ratio fixo aqui, a bio mais longa era cortada pelo overflow:hidden
    do card — foi o que aconteceu quando a copy nova entrou.
  */
  @media (min-width: 1024px) {
    .instructor {
      align-items: stretch;
    }

    .instructor__photo {
      order: 2;
      aspect-ratio: auto;
      min-height: 100%;
    }

    .instructor__text {
      padding-block: var(--s-8);
    }
  }

  .instructor__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
  }

  /* ---------- Dobra 12 — Como funciona depois da compra ----------
     Seção silenciosa: só número, título e texto. Sem card, sem borda,
     sem ícone. design.md §8 "Lista de passos". */
  .steps {
    display: grid;
    gap: var(--s-8);
    margin-top: var(--s-9);
  }

  @media (min-width: 768px) {
    .steps {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-7);
    }
  }

  .step__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--lime);
    margin-bottom: var(--s-5);
  }

  .step__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--s-3);
  }

  .step p {
    max-width: 40ch;
  }

  /* ---------- Páginas de apoio ---------- */
  .page {
    padding-top: calc(var(--header-h) + var(--section-pad));
    padding-bottom: var(--section-pad);
    min-height: 70svh;
  }

  .page__inner {
    max-width: 760px;
    margin-inline: auto;
  }

  .page__inner h2 {
    margin-top: var(--s-8);
    font-size: var(--fs-h3);
  }

  .page__inner p {
    margin-top: var(--s-4);
  }

  .page__lede {
    margin-top: var(--s-5);
    font-size: var(--fs-body-lg);
  }

  .page__inner h3 {
    margin-top: var(--s-6);
    font-size: var(--fs-h4);
  }

  .doc-list {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-4);
    max-width: 68ch;
  }

  .doc-list li {
    position: relative;
    padding-left: var(--s-5);
    line-height: 1.65;
  }

  .doc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background: var(--lime);
  }

  .page__inner a:not(.btn) {
    color: var(--text-primary);
    border-bottom: 1px solid var(--line-strong);
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  .page__inner a:not(.btn):hover {
    border-bottom-color: var(--lime);
  }

  .page__actions {
    margin-top: var(--s-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
  }

  /* ---------- Placeholder de conteúdo pendente ----------
     TEMPORÁRIO. Marca o que ainda depende de material real do Augusto.
     Todos devem sumir antes do lançamento — buscar por "placeholder". */
  .placeholder {
    display: grid;
    place-items: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-5);
    border: 1px dashed var(--gray);
    border-radius: var(--r-lg);
    text-align: center;
    color: var(--text-muted);
  }

  .placeholder[data-ratio="16/10"] {
    aspect-ratio: 16 / 10;
    align-content: center;
  }

  .placeholder[data-ratio="16/9"] {
    aspect-ratio: 16 / 9;
    align-content: center;
  }

  .placeholder__label {
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* --gray é proibido em texto abaixo de 24px: reprova em AA. design.md §3 */
    color: var(--text-muted);
  }

  .placeholder p {
    max-width: 44ch;
    font-size: var(--fs-sm);
  }

  /* ---------- Dobras 3 e 5 — Fachada de vídeo. design.md §8 ---------- */
  .video {
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    margin-top: var(--s-8);
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
  }

  .video__play {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--text-on-lime);
    transition:
      width var(--dur-fast) var(--ease-out),
      height var(--dur-fast) var(--ease-out);
  }

  .video__play:hover:not(:disabled) {
    width: 76px;
    height: 76px;
  }

  /* Sem embed configurado, o controle fica desabilitado de verdade. */
  .video__play:disabled {
    background: var(--surface-3);
    color: var(--text-muted);
    cursor: default;
  }

  .video__play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
  }

  .video__play:focus-visible {
    outline-color: #ffffff;
  }

  .video__note {
    position: absolute;
    inset: auto 0 var(--s-5) 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  /* ---------- Dobra 4 — Currículo. design.md §8 ---------- */
  .curriculum {
    margin-top: var(--s-9);
    display: grid;
    gap: var(--s-7);
  }

  /* Coluna única centralizada: a grade 40/60 era do layout antigo, que tinha uma
     coluna de introdução. Sem ela, o accordion ficava espremido nos 40% da esquerda. */
  .curriculum .accordion {
    margin-top: 0;
    margin-inline: auto;
    max-width: 800px;
  }

  .lessons {
    display: grid;
    gap: var(--s-3);
    padding: 0 var(--s-5) var(--s-5);
  }

  @media (min-width: 768px) {
    .lessons {
      padding: 0 var(--s-6) var(--s-6);
    }
  }

  .lessons li {
    position: relative;
    padding-left: var(--s-5);
    color: var(--text-body);
    line-height: 1.5;
  }

  .lessons li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--lime);
  }

  .lessons-count {
    margin-left: var(--s-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-muted);
  }

  /* Módulo extra: filete de 2px é o máximo que a doutrina do limão permite
     fora de botão. Sem campo limão, que seria exclusividade da dobra 14. */
  .accordion__item--featured {
    border-left: 2px solid var(--lime);
  }

  .tag-new {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: var(--s-4);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    background: var(--lime-dim);
    color: var(--lime);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .day {
    display: inline-block;
    min-width: 4.5em;
    font-family: var(--font-display);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--lime);
  }

  /* ---------- Dobra 6 — Mosaico de depoimentos. design.md §8 ---------- */
  /* As peças já vêm compostas (arte + foto + depoimento + estrelas), todas 1:1.
     Com proporção igual, grade regular lê melhor que masonry. */
  .mosaic {
    margin-top: var(--s-8);
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .mosaic {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .mosaic {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .testimonial {
    margin: 0;
  }

  .testimonial img {
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
  }

  /* ---------- Dobra 7 — Lista de entregáveis. design.md §8 ---------- */
  .stack {
    max-width: 900px;
    margin-inline: auto;
    margin-top: var(--s-8);
  }

  .stack__item {
    position: relative;
    padding: var(--s-5) 0 var(--s-5) var(--s-5);
    border-top: 1px solid var(--line);
  }

  /* Marcador quadrado em limão. Nunca ícone, nunca emoji. */
  .stack__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--s-5) + 0.55em);
    width: 6px;
    height: 6px;
    background: var(--lime);
  }

  .stack__item h3 {
    font-size: var(--fs-h4);
    font-weight: 500;
  }

  .stack__item p {
    margin-top: var(--s-3);
  }

  /* ---------- Dobra 7 — Mockup da comunidade ---------- */
  .community {
    max-width: 900px;
    margin: var(--s-6) auto 0;
  }

  /* PNG com alpha: nada de card, borda ou raio — a peça funde na página. */
  .community img {
    width: 100%;
    height: auto;
  }

  /* ---------- Dobra 7 — Slider de comparação. design.md §8 ---------- */
  /*
    Proporção 3:2, casada com a do briefing. O par veio desigual (1.50 e 1.33) e
    o briefing é documento com texto até as bordas — recortá-lo perderia
    informação. O resultado, que é render, absorve o recorte via object-fit.
  */
  .compare {
    --pos: 50%;
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    margin-top: var(--s-6);
    aspect-ratio: 3 / 2;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
    touch-action: pan-y;
    cursor: ew-resize;
  }

  .compare__pane {
    position: absolute;
    inset: 0;
  }

  .compare__pane picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .compare__pane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* O painel de cima é recortado pela posição da alça. */
  .compare__pane--top {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  }

  .compare.is-keyboard .compare__pane--top,
  .compare.is-keyboard .compare__handle {
    transition: clip-path var(--dur-base) var(--ease-out),
      left var(--dur-base) var(--ease-out);
  }

  .compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: var(--lime);
    pointer-events: none;
  }

  .compare__grab {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--text-primary);
  }

  .compare__grab svg {
    width: 20px;
    height: 20px;
  }

  .compare:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
  }

  .compare__chip {
    position: absolute;
    bottom: var(--s-4);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: rgba(20, 20, 20, 0.72);
    border: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: 1.3;
    pointer-events: none;
  }

  .compare__chip--start {
    left: var(--s-4);
  }

  .compare__chip--end {
    right: var(--s-4);
  }

  /* Enquanto o par de imagens não existe, os painéis são placeholders. */
  .compare .placeholder {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .compare__pane--top .placeholder {
    background: var(--surface-3);
  }

  /* ---------- Dobra 3 — Projetos profissionais ----------
     Cinco peças em 3:4. Proporção nova no acervo: registrada em design.md §9. */
  .projects {
    margin-top: var(--s-6);
  }

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

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

  @media (min-width: 1024px) {
    .projects__row {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .project {
    margin: 0;
  }

  .project picture {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
  }

  .project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project figcaption {
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.4;
  }

  /* ---------- Dobra 8 — Esteira de logos ----------
     ⚠️ EXCEÇÃO ao design.md §12 (loop infinito), autorizada pelo Augusto.
     Uma fileira só, lado a lado, correndo. Travas: hover, foco, fora da tela
     e prefers-reduced-motion. */
  .logostrip {
    margin-top: var(--s-8);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  }

  .logostrip__track {
    display: flex;
    width: max-content;
    animation: logostrip 34s linear infinite;
  }

  .logostrip:hover .logostrip__track,
  .logostrip:focus-within .logostrip__track,
  .logostrip.is-offscreen .logostrip__track {
    animation-play-state: paused;
  }

  .logostrip__group {
    display: flex;
    align-items: center;
  }

  /* margin, não gap: com gap, -50% não cai em exatamente uma cópia e a emenda salta. */
  .logostrip__group li {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-right: var(--s-10);
  }

  .logostrip img {
    max-height: 40px;
    width: auto;
    opacity: 0.85;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  @media (min-width: 768px) {
    .logostrip img {
      max-height: 56px;
    }
  }

  .logostrip li:hover img {
    opacity: 1;
  }

  @keyframes logostrip {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .logostrip__track {
      animation-name: none;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--s-7);
      width: 100%;
    }

    .logostrip__group[aria-hidden="true"] {
      display: none;
    }

    .logostrip__group li {
      margin-right: 0;
    }
  }

  /* ---------- Dobra 9 — Cards de bônus. design.md §8 ---------- */
  .bonuses {
    display: grid;
    gap: var(--s-5);
    margin-top: var(--s-8);
  }

  @media (min-width: 768px) {
    .bonuses {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .bonus {
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .bonus__media {
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
    overflow: hidden;
  }

  /* O arquivo já sai em 16:10 do pipeline, então cover aqui é só uma trava. */
  .bonus__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bonus__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bonus__media .placeholder {
    height: 100%;
    border: 0;
    border-bottom: 1px dashed var(--gray);
    border-radius: 0;
  }

  .bonus__body {
    padding: var(--s-6);
  }

  .bonus__title {
    font-size: var(--fs-h4);
    font-weight: 500;
  }

  .bonus__value {
    color: var(--text-muted);
    font-weight: 400;
  }

  .bonus__list {
    margin-top: var(--s-5);
    display: grid;
    gap: var(--s-3);
  }

  .bonus__list li {
    position: relative;
    padding-left: var(--s-5);
  }

  .bonus__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--lime);
  }

  .bonus__footnote {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
  }

  /* ---------- Dobra 10 — Recap ---------- */
  .recap {
    max-width: 760px;
    margin-inline: auto;
    margin-top: var(--s-8);
  }

  .recap__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-5);
    border-top: 1px solid var(--line);
  }

  .recap__name {
    flex: 1 1 60%;
    color: var(--text-primary);
    font-weight: 500;
  }

  .recap__name span {
    display: block;
    color: var(--text-muted);
    font-weight: 400;
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .recap__value {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .recap__total {
    margin-top: var(--s-7);
    padding-top: var(--s-7);
    border-top: 1px solid var(--line-strong);
    text-align: center;
  }

  .recap__total p {
    margin-inline: auto;
    margin-top: var(--s-5);
    font-size: var(--fs-body-lg);
  }

  /* ---------- Dobras 11 e 14 — Planos ----------
     Dois blocos lado a lado. Sem sombra (§6), sem emoji nos bullets (§12),
     sem contador animado no preço (§10). O destaque do plano anual é borda
     limão de 1px + chip — o máximo que a doutrina permite fora de botão. */
  .plans {
    display: grid;
    gap: var(--s-5);
    margin-top: var(--s-8);
    align-items: start;
  }

  @media (min-width: 900px) {
    .plans {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-6);
      max-width: 1000px;
      margin-inline: auto;
    }
  }

  .plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--s-6);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
  }

  @media (min-width: 768px) {
    .plan {
      padding: var(--s-7);
    }
  }

  .plan--featured {
    border-color: var(--line-lime);
  }

  .plan__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--lime);
    color: var(--text-on-lime);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .plan__name {
    font-size: var(--fs-h3);
  }

  .plan__pitch {
    margin-top: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .plan__price {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-top: var(--s-6);
  }

  .plan__amount {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  .plan__period {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--text-muted);
  }

  .plan__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .plan__save {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    background: var(--lime-dim);
    color: var(--lime);
    font-weight: 600;
  }

  .plan__features {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
  }

  .plan__features li {
    position: relative;
    padding-left: var(--s-5);
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: 1.6;
  }

  /* quadrado de 6px em limão — nunca emoji de check, apesar do rascunho usar ✅ */
  .plan__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--lime);
  }

  .plan__closer {
    margin-top: var(--s-5);
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.6;
  }

  .plan__foot {
    margin-top: auto;
    padding-top: var(--s-6);
  }

  /* Obrigatória e nunca oculta, mas sem competir com o botão. site.md §3 */
  .plan__renewal {
    margin-top: var(--s-4);
    font-size: 0.75rem;
    color: var(--text-faint);
    opacity: 0.75;
    line-height: 1.45;
    text-align: center;
  }

  /* Selos dentro do próprio card, pequenos e distribuídos. */
  .plan__seals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-4);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }

  .plan__seals li {
    position: relative;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
  }

  /* separador em ponto médio entre os selos, sem virar lista com marcador */
  .plan__seals li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--s-4) / -2);
    top: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--gray);
    transform: translate(-50%, -50%);
  }

  /* ---------- Campo de estrelas — dobra 11 ----------
     ⚠️ Movimento contínuo: exceção ao design.md §10, autorizada pelo Augusto.
     Fica só na dobra 11: na 14 o campo limão já é o evento visual, e estrela
     branca sobre limão brigaria com a exceção única do §3.
     Puramente decorativo, aria-hidden, e some por completo em reduced-motion. */
  .section--starfield {
    isolation: isolate;
  }

  .section--starfield > .container {
    position: relative;
    z-index: 1;
  }

  .starfield {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .starfield i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: var(--text-primary);
    will-change: transform, opacity;
    animation: twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  }

  @keyframes twinkle {
    0%, 100% { opacity: 0; }
    50%      { opacity: var(--peak, 0.7); }
  }

  @media (prefers-reduced-motion: reduce) {
    .starfield {
      display: none;
    }
  }


  /* ---------- Dobra 14 — Campo limão, único da página ---------- */
  .final-cta {
    background: var(--lime);
  }

  .final-cta .section-head h2,
  .final-cta .section-head .eyebrow {
    color: var(--text-on-lime);
  }

  .final-cta .eyebrow {
    opacity: 0.7;
  }

  /* Sobre limão, o chip limão do plano sumiria: inverte para escuro. */
  .final-cta .plan__badge {
    background: var(--bg);
    color: var(--lime);
  }

  .final-cta .badge {
    border-color: rgba(20, 20, 20, 0.25);
    color: rgba(20, 20, 20, 0.75);
  }

  /* Sobre limão, um botão limão desapareceria: inverte. design.md §8 */
  .final-cta .btn--primary {
    background: var(--bg);
    color: var(--lime);
  }

  .final-cta .btn--primary:hover {
    background: #000000;
  }

  .final-cta .btn--primary:focus-visible {
    outline-color: var(--bg);
  }

  /* ---------- Dobra 15 — FAQ / Accordion ---------- */
  .accordion {
    max-width: 800px;
    margin-inline: auto;
    margin-top: var(--s-8);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .accordion__item + .accordion__item {
    border-top: 1px solid var(--line);
  }

  .accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* A tag do módulo extra não cabe ao lado do título em telas estreitas:
       com wrap ela desce sozinha em vez de estourar a linha. */
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    width: 100%;
    min-height: 44px;
    padding: var(--s-5) var(--s-5);
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--text-primary);
    transition: background-color var(--dur-base) var(--ease-out);
  }

  @media (min-width: 768px) {
    .accordion__trigger {
      padding: var(--s-5) var(--s-6);
    }
  }

  .accordion__trigger:hover {
    background: var(--surface-2);
  }

  .accordion__trigger[aria-expanded="true"] {
    background: var(--surface-2);
  }

  /*
    Escopo obrigatório no .curriculum: no FAQ o gatilho não tem span de título
    (o texto é nó solto), então `span:first-child` casava com o ÍCONE e o
    esticava para 14ch — virava um traço atravessando a linha.
  */
  .curriculum .accordion__trigger > span:first-child {
    flex: 1 1 14ch;
    min-width: 0;
  }

  .accordion__icon {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 16px;
    height: 16px;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .accordion__icon::before,
  .accordion__icon::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: var(--text-muted);
  }

  .accordion__icon::after {
    transform: rotate(90deg);
  }

  .accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(45deg);
  }

  .accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    background: var(--surface-2);
    transition: grid-template-rows 280ms var(--ease-out);
  }

  .accordion__panel[data-open="true"] {
    grid-template-rows: 1fr;
  }

  .accordion__panel > div {
    overflow: hidden;
  }

  .accordion__panel p {
    padding: 0 var(--s-5) var(--s-5);
    max-width: 68ch;
  }

  @media (min-width: 768px) {
    .accordion__panel p {
      padding: 0 var(--s-6) var(--s-6);
    }
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    z-index: 200;
    padding: var(--s-3) var(--s-5);
    background: var(--lime);
    color: var(--text-on-lime);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /*
    Revelação em scroll — design.md §10. Dispara uma vez só.
    O estado inicial só existe sob .js, aplicada por um script inline no <head>.
    Sem essa guarda, uma falha de JS deixaria a página inteira invisível.
  */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* O que já está na primeira tela entra sem transição: não penaliza o LCP. */
  .js .reveal.is-instant {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal {
      opacity: 1;
      transform: none;
    }
  }
}