/* ==========================================================================
   Marp Company — estilos
   Fonte de verdade visual: specs/design.md
   Camadas: reset → tokens → base → layout → components → sections → utilities
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   Fontes (locais, variáveis, subset latin)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

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

/* Fonte de reserva com métricas próximas da Inter, para reduzir o salto (CLS) na troca */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

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

  * { margin: 0; }

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

  body { min-height: 100vh; }

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

  /* O atributo hidden sempre vence (inclusive sobre display definido acima) */
  [hidden] { display: none !important; }

  img { height: auto; }

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

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

  a { color: inherit; }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  h1, h2, h3, h4, p { overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   Tokens (design.md §2–§5)
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Marca */
    --marp-green: #01B648;
    --marp-black: #000000;
    --marp-white: #FFFFFF;
    --marp-gray-light: #C4C1D0;
    --marp-gray-dark: #55516A;

    /* Verde derivado */
    --green-hover: #14CC5C;
    --green-pressed: #019A3D;
    --green-soft: rgba(1, 182, 72, .12);
    --green-line: rgba(1, 182, 72, .35);

    /* Fundos */
    --bg: #000000;
    --bg-alt: #0B0B0E;
    --surface: #131317;
    --surface-raised: #1B1B21;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);

    /* Texto */
    --text: #FFFFFF;
    --text-2: #C4C1D0;
    --text-3: #8F8C9E;
    --text-accent: #01B648;
    --text-on-green: #000000;
    --error: #FF5C5C;

    /* Tipografia */
    --font-display: "Sora", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-display: clamp(2.25rem, 1.4rem + 4vw, 4rem);
    --fs-h2: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
    --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-eyebrow: .75rem;
    --fs-stat: clamp(2.5rem, 1.8rem + 3vw, 4rem);

    /* Espaços (base 4px) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --space-section: clamp(4rem, 3rem + 5vw, 8rem);
    --space-block: 2rem;
    --space-card: 1.5rem;
    --gap-grid: 1rem;
    --container: 1200px;
    --gutter: 16px;

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

    /* Profundidade */
    --glow-green: 0 0 0 1px var(--green-line), 0 12px 40px rgba(1, 182, 72, .08);

    /* Movimento */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --dur-fast: 200ms;
    --dur-reveal: 500ms;

    /* Header */
    --header-h: 72px;
  }

  @media (min-width: 768px) {
    :root {
      --gutter: 24px;
      --space-block: 3rem;
      --space-card: 2rem;
      --gap-grid: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --gutter: 32px;
      --fs-body: 1.0625rem;
      --header-h: 80px;
    }
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
  }

  body {
    background: var(--bg);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-display); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }

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

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

  a { text-decoration-thickness: 1px; text-underline-offset: .2em; }

  ::selection { background: var(--marp-green); color: var(--text-on-green); }

  :focus-visible {
    outline: 2px solid var(--marp-green);
    outline-offset: 2px;
    border-radius: 4px;
  }

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

    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: var(--space-section); }

  .section--alt {
    background-color: var(--bg-alt);
    background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  .grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
  }

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

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

  .stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
}

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */
@layer components {

  /* Pular para o conteúdo */
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--marp-green);
    color: var(--text-on-green);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus { transform: none; }

  /* Seta-assinatura (geometria do "A" do logo) */
  .arrow-mark {
    display: inline-block;
    width: .7em;
    height: 1em;
    flex: none;
    fill: currentColor;
  }

  /* Eyebrow */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-accent);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    text-wrap: balance;
  }

  .eyebrow .arrow-mark { width: .65rem; height: .9rem; }

  /* Em telas estreitas, o espaçamento menor evita sobrar uma palavra sozinha na 2ª linha */
  @media (max-width: 479px) {
    .eyebrow { letter-spacing: .1em; }
  }

  /* Destaque verde em títulos */
  .hl { color: var(--text-accent); }

  .lead {
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: 1.6;
  }

  /* Cabeçalho de seção */
  .section-header {
    display: grid;
    gap: var(--space-4);
    max-width: 46rem;
    margin-bottom: var(--space-block);
  }

  .section-header--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }

  /* Botões (design.md §6) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-3) 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  .btn__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .btn:hover .btn__icon { transform: translateX(4px); }

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

  .btn--primary:hover { background: var(--green-hover); }
  .btn--primary:active { background: var(--green-pressed); }

  .btn--secondary {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
  }

  .btn--secondary:hover { background: var(--surface-raised); }

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

  @media (max-width: 767px) {
    .btn--cta { width: 100%; }
  }

  @media (min-width: 768px) {
    .btn { min-height: 52px; }
  }

  .link {
    color: var(--text-accent);
    font-weight: 500;
    text-decoration: none;
  }

  .link:hover, .link:focus-visible { text-decoration: underline; }

  /* Cards (design.md §7) */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-card);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  .card p { color: var(--text-2); }

  @media (hover: hover) and (min-width: 1024px) {
    .card--interactive:hover {
      background: var(--surface-raised);
      border-color: var(--green-line);
      transform: translateY(-2px);
    }
  }

  .card--featured { box-shadow: var(--glow-green); }

  .icon-box {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    background: var(--green-soft);
    border-radius: var(--radius-sm);
    color: var(--marp-green);
  }

  .icon-box svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Chip / pílula */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.3;
  }

  .chip .arrow-mark { color: var(--marp-green); width: .55rem; height: .8rem; }

  /* Número de destaque */
  .stat {
    display: grid;
    gap: var(--space-2);
  }

  .stat__value {
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .stat__label {
    color: var(--text);
    font-weight: 600;
  }

  .stat__desc {
    color: var(--text-3);
    font-size: var(--fs-small);
  }

  /* Lista com seta-assinatura */
  .list-arrow {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
  }

  .list-arrow li {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
  }

  .list-arrow .arrow-mark {
    color: var(--marp-green);
    width: .6rem;
    height: .85rem;
    transform: translateY(.1em);
  }

  /* Marcador de conteúdo pendente — nunca deve chegar à publicação */
  .pending {
    display: inline-block;
    padding: .1em .5em;
    background: rgba(255, 92, 92, .12);
    border: 1px dashed var(--error);
    border-radius: var(--radius-sm);
    color: var(--error);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .85em;
  }
}

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */
@layer sections {

  /* Logo (símbolo #logo-marp, enquadrado no desenho) */
  .logo {
    display: block;
    height: 36px;
    width: auto;
    aspect-ratio: 278 / 111;
  }

  @media (min-width: 1024px) {
    .logo { height: 40px; }
  }

  html.menu-open { overflow: hidden; }

  /* ---------- Cabeçalho ---------- */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    border-bottom: 1px solid transparent;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }

  .site-header.is-scrolled {
    background: var(--bg);
    border-bottom-color: var(--border);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 100%;
  }

  .site-header__logo {
    display: block;
    margin-right: auto;
    padding-block: 4px; /* área de toque mínima de 44px */
    border-radius: var(--radius-sm);
  }

  .nav { display: none; }

  .nav__list {
    display: flex;
    gap: var(--space-2);
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-3);
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .nav__link:hover { color: var(--text); }

  .site-header__cta {
    min-height: 44px;
    padding-inline: 20px;
    font-size: .9375rem;
  }

  .nav-toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
  }

  .nav-toggle svg { width: 22px; height: 22px; }

  /* Com JS: celular e tablet usam o botão de menu; no celular, o CTA fica no menu */
  .js .nav-toggle { display: grid; }

  @media (max-width: 767px) {
    .js .site-header__cta { display: none; }
  }

  @media (min-width: 1024px) {
    .nav { display: block; margin-right: var(--space-4); }
    .js .nav-toggle { display: none; }
  }

  /* ---------- Menu mobile (gaveta de tela cheia) ---------- */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg);
  }

  .drawer[hidden] { display: none; }

  .drawer__top {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
  }

  .drawer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-block: var(--space-8);
  }

  .drawer__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
  }

  .drawer__link:hover { color: var(--text-accent); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    padding-top: calc(var(--header-h) + var(--space-8));
    padding-bottom: var(--space-12);
    overflow: hidden;
  }

  .hero__grid {
    display: grid;
    gap: var(--space-8);
    align-items: center;
  }

  .hero__content {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
  }

  .hero__title { max-width: 18ch; }

  .hero__lead { max-width: 52ch; }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-2);
  }

  .hero__visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Brilho verde discreto atrás da foto */
  .hero__visual::before {
    content: "";
    position: absolute;
    inset: 10% -10% 0;
    background: radial-gradient(closest-side, rgba(1, 182, 72, .14), transparent);
    pointer-events: none;
  }

  /* A parede clara "nasce" do preto: esmaece forte pela esquerda e pela base,
     e de leve no topo e à direita, para não sobrar borda reta */
  .hero__photo img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    -webkit-mask-image:
      linear-gradient(to top, transparent 0%, #000 28%),
      linear-gradient(to right, transparent 0%, #000 22%),
      linear-gradient(to bottom, transparent 0%, #000 14%),
      linear-gradient(to left, transparent 0%, #000 12%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to top, transparent 0%, #000 28%),
      linear-gradient(to right, transparent 0%, #000 22%),
      linear-gradient(to bottom, transparent 0%, #000 14%),
      linear-gradient(to left, transparent 0%, #000 12%);
    mask-composite: intersect;
  }

  /* Cartões de interface flutuantes */
  .float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--green-line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    font-size: var(--fs-small);
    line-height: 1.3;
    animation: float-in var(--dur-reveal) var(--ease-out) both;
  }

  .float-card__label {
    color: var(--text-3);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .float-card__title { display: block; color: var(--text); font-weight: 600; }

  .float-card__sub { display: block; color: var(--text-3); font-size: .8125rem; }

  .float-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    background: var(--green-soft);
    border-radius: var(--radius-sm);
    color: var(--marp-green);
  }

  .float-card__icon svg { width: 20px; height: 20px; }

  .float-card__value {
    display: block;
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .float-card--chart {
    top: 12%;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    animation-delay: .25s;
  }

  .mini-chart {
    width: 120px;
    height: 48px;
    overflow: visible;
  }

  .mini-chart polyline {
    fill: none;
    stroke: var(--marp-green);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: draw-line 1.2s var(--ease-out) .5s forwards;
  }

  .mini-chart use { fill: var(--marp-green); }

  .float-card--ai {
    top: 46%;
    left: 0;
    animation-delay: .4s;
  }

  .float-card--proof {
    bottom: 10%;
    right: 4%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    max-width: 220px;
    box-shadow: var(--glow-green), 0 12px 32px rgba(0, 0, 0, .55);
    animation-delay: .55s;
  }

  @keyframes float-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes draw-line {
    to { stroke-dashoffset: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mini-chart polyline { stroke-dashoffset: 0; }
  }

  /* Celular: só a prova real fica sobre a foto */
  @media (max-width: 767px) {
    .hero__photo img { max-height: 440px; object-position: center 20%; }
    .float-card--chart, .float-card--ai { display: none; }
    .float-card--proof { bottom: 6%; right: 0; }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .hero__visual { max-width: 460px; }
  }

  @media (min-width: 1024px) {
    .hero {
      padding-top: calc(var(--header-h) + var(--space-6));
      padding-bottom: var(--space-8);
    }

    .hero__grid {
      grid-template-columns: 55fr 45fr;
      gap: var(--space-12);
    }

    /* A foto acompanha a altura da tela, para o CTA ficar sempre na primeira dobra */
    .hero__visual {
      max-width: min(460px, calc((100svh - var(--header-h) - var(--space-12)) * .8));
    }

    .hero__actions { width: auto; }

    .float-card--ai { left: -12%; }
    .float-card--chart { right: -6%; }
  }

  /* ---------- Faixa de marca ---------- */
  .brand-band {
    position: relative;
    height: 56px;
    overflow: hidden;
    background: var(--marp-green);
  }

  .brand-band__track {
    position: absolute;
    inset: 0 auto 0 0;
    width: 200%;
    /* Seta-assinatura em preto, repetida (geometria do "A" do logo) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpolygon points='19,40.75 28,15.25 37,40.75 31.6,40.75 28,30.55 24.4,40.75' fill='%23000'/%3E%3C/svg%3E");
    background-size: 56px 56px;
    background-repeat: repeat-x;
    animation: band-scroll 40s linear infinite;
  }

  .brand-band.is-paused .brand-band__track { animation-play-state: paused; }

  @keyframes band-scroll {
    to { transform: translateX(-50%); }
  }

  .brand-band__toggle {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--marp-black);
    border-radius: 50%;
    color: var(--marp-white);
    transform: translateY(-50%);
  }

  .brand-band__toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Sem JS não há como pausar: a faixa fica parada */
  html:not(.js) .brand-band__track { animation: none; }
  html:not(.js) .brand-band__toggle { display: none; }

  .brand-band__toggle .icon-play { display: none; fill: currentColor; stroke: none; }
  .brand-band.is-paused .icon-pause { display: none; }
  .brand-band.is-paused .icon-play { display: block; }

  .brand-band__toggle:focus-visible { outline-color: var(--marp-white); }

  @media (prefers-reduced-motion: reduce) {
    .brand-band__track { animation: none; }
    .brand-band__toggle { display: none; }
  }

  /* ---------- Problema ---------- */
  .problem__grid {
    display: grid;
    gap: var(--space-block);
    align-items: start;
  }

  .problem__header { margin-bottom: 0; }

  .problem__turn {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--green-soft);
    border-left: 2px solid var(--marp-green);
    border-radius: var(--radius-sm);
    color: var(--text-2);
  }

  .problem__turn .arrow-mark {
    color: var(--marp-green);
    width: .6rem;
    height: .85rem;
    transform: translateY(.1em);
  }

  @media (min-width: 1024px) {
    .problem__grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
    .problem__header { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
  }

  /* ---------- Serviços ---------- */
  .service { position: relative; }

  .service__visual {
    height: 120px;
    margin-bottom: var(--space-2);
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  /* Tráfego: barras + linha subindo */
  .service__visual--chart svg { width: 100%; height: 100%; padding: var(--space-3); }
  .service__bars rect { fill: rgba(255, 255, 255, .07); }
  .service__line {
    fill: none;
    stroke: var(--marp-green);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  /* IA: conversa */
  .service__visual--chat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .bubble {
    max-width: 85%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: .8125rem;
    line-height: 1.35;
  }

  .bubble--in {
    align-self: flex-start;
    background: rgba(255, 255, 255, .07);
    border-bottom-left-radius: 4px;
    color: var(--text-2);
  }

  .bubble--out {
    align-self: flex-end;
    background: var(--green-soft);
    border: 1px solid var(--green-line);
    border-bottom-right-radius: 4px;
    color: var(--text);
  }

  .bubble__tag {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 0 .4em;
    background: var(--marp-green);
    border-radius: 4px;
    color: var(--marp-black);
    font-size: .6875rem;
    font-weight: 700;
  }

  /* CRM: funil em colunas */
  .service__visual--pipeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .pipe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-2);
    background: rgba(255, 255, 255, .04);
    border-radius: var(--radius-sm);
  }

  .pipe__title {
    color: var(--text-3);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .pipe__card {
    height: 14px;
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
  }

  .pipe--win .pipe__title { color: var(--text-accent); }
  .pipe--win .pipe__card { background: var(--marp-green); }

  .service__step {
    color: var(--text-3);
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
  }

  .service h3 { margin-top: calc(-1 * var(--space-2)); }

  .service__items {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: .9375rem;
  }

  /* Lado a lado, as 5 partes do cartão (visual, número, título, texto, lista) se alinham entre os cartões */
  @media (min-width: 768px) {
    @supports (grid-template-rows: subgrid) {
      .services__list { row-gap: var(--gap-grid); }

      .service {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
        row-gap: var(--space-4);
      }

      .service h3 { margin-top: 0; }
      .service__items { margin-top: 0; align-self: start; }
    }
  }

  .services__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    max-width: none;
    margin-top: var(--space-block);
    color: var(--text-2);
    text-align: center;
  }

  .services__flow .arrow-mark {
    color: var(--marp-green);
    width: .7rem;
    height: 1rem;
    transform: rotate(90deg);
  }

  @media (max-width: 767px) {
    .services__flow { flex-direction: column; }
    .services__flow .arrow-mark { transform: rotate(180deg); }
  }

  /* ---------- Como funciona (linha do tempo) ---------- */
  .steps {
    display: grid;
    gap: var(--space-8);
    padding: 0;
    list-style: none;
  }

  .step {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding-left: 64px;
  }

  .step__num {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--bg);
    border: 2px solid var(--marp-green);
    border-radius: var(--radius-md);
    color: var(--text-accent);
    font-family: var(--font-display);
    font-weight: 700;
    z-index: 1;
  }

  .step--final .step__num {
    background: var(--marp-green);
    color: var(--marp-black);
  }

  .step h3 { margin-top: var(--space-2); }

  /* Conector tracejado (vertical no celular) */
  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 52px;
    bottom: calc(-1 * var(--space-8) + 8px);
    left: 21px;
    border-left: 2px dashed var(--green-line);
  }

  @media (min-width: 1024px) {
    .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }

    .step { padding-left: 0; padding-top: 68px; }

    .step:not(:last-child)::before {
      top: 21px;
      bottom: auto;
      left: 56px;
      right: calc(-1 * var(--space-8) + 8px);
      border-left: 0;
      border-top: 2px dashed var(--green-line);
    }
  }

  /* ---------- Faixa de números ---------- */
  .stats-band {
    padding-block: var(--space-12);
    border-block: 1px solid var(--border);
  }

  .stats-band__list {
    display: grid;
    gap: var(--space-8);
    padding: 0;
    list-style: none;
  }

  .stats-band__item {
    justify-items: center;
    text-align: center;
  }

  .stats-band__item .stat__label { color: var(--text-2); font-weight: 500; }

  @media (min-width: 768px) {
    .stats-band__list { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .stats-band__item + .stats-band__item { border-left: 1px solid var(--border); }
  }

  /* ---------- Quem está por trás ---------- */
  .founder__grid {
    display: grid;
    gap: var(--space-block);
    align-items: center;
  }

  .founder__photo {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--glow-green);
  }

  /* Escurece levemente as bordas para a parede clara não "estourar" no fundo preto */
  .founder__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%);
    pointer-events: none;
  }

  .founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

  .founder__content {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
  }

  .founder__bio { display: grid; gap: var(--space-4); }

  .founder__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
  }

  .founder__content .cta-row { margin-top: var(--space-2); width: 100%; }

  @media (min-width: 1024px) {
    .founder__grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
  }

  /* ---------- Contato / formulário ---------- */
  html:not(.js) .js-only { display: none !important; }

  .contact__grid {
    display: grid;
    gap: var(--space-12);
    align-items: start;
  }

  .contact__intro {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
  }

  .contact__alt {
    margin-top: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    width: 100%;
  }

  .contact__alt-title {
    color: var(--text);
    font-weight: 600;
    margin-bottom: var(--space-1);
  }

  @media (min-width: 1024px) {
    .contact__grid {
      grid-template-columns: 5fr 7fr;
      gap: var(--space-16);
    }

    .contact__intro {
      position: sticky;
      top: calc(var(--header-h) + var(--space-8));
    }
  }

  .form-card {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glow-green);
  }

  @media (min-width: 768px) {
    .form-card { padding: var(--space-8) 40px; }
  }

  .form-card__noscript {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    max-width: none;
  }

  .lead-form__progress {
    height: 4px;
    overflow: hidden;
    background: var(--border);
    border-radius: var(--radius-pill);
  }

  .lead-form__bar {
    display: block;
    height: 100%;
    background: var(--marp-green);
    border-radius: inherit;
    transform: scaleX(var(--progress, .25));
    transform-origin: left;
    transition: transform var(--dur-reveal) var(--ease-out);
  }

  .lead-form__counter {
    margin-top: var(--space-3);
    color: var(--text-3);
    font-size: var(--fs-small);
  }

  /* Campo isca: fora da tela, invisível para pessoas */
  .lead-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-step {
    min-width: 0;
    margin: var(--space-6) 0 0;
    padding: 0;
    border: 0;
  }

  html:not(.js) .form-step + .form-step {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
  }

  .form-step__legend {
    display: grid;
    gap: var(--space-2);
    padding: 0;
  }

  .form-step__title {
    display: block;
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
  }

  .form-step__title:focus { outline: none; }
  .form-step__title:focus-visible { outline: 2px solid var(--marp-green); }

  .form-step__desc {
    margin-top: var(--space-2);
    color: var(--text-3);
    font-size: var(--fs-small);
  }

  .field { margin-top: var(--space-6); }

  .field__label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: .9375rem;
    font-weight: 500;
  }

  .field__input {
    width: 100%;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 1rem;
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  .field__input::placeholder { color: var(--text-3); opacity: 1; }

  .field__input:hover { border-color: rgba(255, 255, 255, .28); }

  .field__input:focus-visible {
    border-color: var(--marp-green);
    outline: 2px solid var(--green-line);
    outline-offset: 0;
  }

  .field__input[aria-invalid="true"] { border-color: var(--error); }

  .field__select {
    appearance: none;
    padding-right: var(--space-12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238F8C9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 20px;
    cursor: pointer;
  }

  .field__select option { background: var(--surface-raised); color: var(--text); }

  .field__hint {
    margin-top: var(--space-2);
    color: var(--text-3);
    font-size: .8125rem;
  }

  .field__error {
    margin-top: var(--space-2);
    color: var(--error);
    font-size: .875rem;
    font-weight: 500;
  }

  .field__error:empty { display: none; }

  /* Explicação do investimento */
  .invest-explain {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-raised);
    border-left: 2px solid var(--marp-green);
    border-radius: var(--radius-sm);
  }

  .invest-explain dt { color: var(--text); font-weight: 600; font-size: .9375rem; }

  .invest-explain dd { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; }

  .invest-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .invest-card {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .invest-card--featured { border-color: var(--green-line); }

  .invest-card__label {
    color: var(--text-3);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .invest-card__value {
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .invest-card__value small {
    display: block;
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .invest-card__note { color: var(--text-3); font-size: .8125rem; line-height: 1.4; }

  /* Celular: cada valor vira uma linha compacta (nome e nota à esquerda, valor à direita) */
  @media (max-width: 479px) {
    .invest-card {
      grid-template-columns: 1fr auto;
      grid-template-areas: "label value" "note value";
      align-items: center;
      gap: var(--space-1) var(--space-3);
      padding: var(--space-3) var(--space-4);
      text-align: left;
    }

    .invest-card__label { grid-area: label; }
    .invest-card__note { grid-area: note; }

    .invest-card__value {
      grid-area: value;
      font-size: 1.25rem;
      text-align: right;
    }
  }

  /* Escolhas (rádio) e consentimento */
  .choice-group {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: var(--space-6) 0 0;
    padding: 0;
    border: 0;
  }

  .choice-group__legend { padding: 0; }

  .choice {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-2);
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }

  .choice:hover { border-color: rgba(255, 255, 255, .28); }

  .choice:has(:checked) {
    background: var(--green-soft);
    border-color: var(--marp-green);
    color: var(--text);
  }

  .choice:has([aria-invalid="true"]) { border-color: var(--error); }

  .choice input,
  .check input {
    width: 20px;
    height: 20px;
    flex: none;
    margin: 0;
    accent-color: var(--marp-green);
    cursor: pointer;
  }

  .check {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--text-2);
    font-size: var(--fs-small);
    line-height: 1.5;
    cursor: pointer;
  }

  .check input { margin-top: 1px; }

  /* Botões do formulário */
  .lead-form__nav {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-8);
  }

  .lead-form__back {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-2);
    color: var(--text-3);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .lead-form__back:hover { color: var(--text); }

  .lead-form__back svg { width: 18px; height: 18px; }

  .btn[aria-busy="true"] { cursor: progress; opacity: .8; }

  .lead-form__safe {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-4);
    color: var(--text-3);
    font-size: .8125rem;
  }

  .lead-form__safe svg { width: 16px; height: 16px; flex: none; }

  .lead-form__status {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 92, 92, .08);
    border: 1px solid rgba(255, 92, 92, .4);
    border-radius: var(--radius-md);
    color: var(--text-2);
    font-size: var(--fs-small);
  }

  /* ---------- Página de obrigado ---------- */
  .thanks {
    display: grid;
    min-height: calc(100svh - 200px);
    place-items: center;
    padding-top: calc(var(--header-h) + var(--space-12));
    padding-bottom: var(--space-section);
  }

  .thanks__inner {
    display: grid;
    gap: var(--space-6);
    justify-items: center;
    max-width: calc(640px + 2 * var(--gutter));
    text-align: center;
  }

  .thanks__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    background: var(--marp-green);
    border-radius: 50%;
    color: var(--marp-black);
    box-shadow: 0 0 0 8px var(--green-soft);
  }

  .thanks__icon svg { width: 32px; height: 32px; }

  .thanks__title { font-size: var(--fs-h2); }

  .thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-2);
  }

  /* ---------- Política de privacidade ---------- */
  .legal {
    padding-top: calc(var(--header-h) + var(--space-12));
    padding-bottom: var(--space-section);
  }

  .legal__container { max-width: calc(760px + 2 * var(--gutter)); }

  .legal h1 { margin-top: var(--space-4); font-size: var(--fs-h2); }

  .legal__updated { margin-top: var(--space-3); color: var(--text-3); font-size: var(--fs-small); }

  .legal h1 + .legal__updated + p { margin-top: var(--space-8); }

  .legal h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    font-size: var(--fs-h3);
  }

  .legal h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .legal p + p, .legal ul + p, .legal p + ul { margin-top: var(--space-4); }

  .legal ul {
    display: grid;
    gap: var(--space-2);
    padding-left: 1.25rem;
  }

  .legal li::marker { color: var(--marp-green); }

  .legal code {
    padding: .1em .35em;
    background: var(--surface-raised);
    border-radius: 4px;
    font-size: .875em;
  }

  .legal__inline-btn {
    color: var(--text-accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .2em;
  }

  /* ---------- Rodapé ---------- */
  .site-footer {
    padding-block: var(--space-16) var(--space-8);
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-12);
  }

  @media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); }
  }

  .site-footer__brand .logo { height: 48px; }

  .site-footer__brand p {
    max-width: 36ch;
    margin-top: var(--space-4);
    color: var(--text-3);
  }

  .site-footer__title {
    margin-bottom: var(--space-3);
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .site-footer__list a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    color: var(--text-2);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .site-footer__list a:hover { color: var(--text); }

  .site-footer__list svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--marp-green);
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    color: var(--text-3);
  }

  .site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-6);
  }

  .site-footer__legal-links a,
  .site-footer__cookies {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-2);
    font-size: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
  }

  .site-footer__legal-links a:hover,
  .site-footer__cookies:hover { color: var(--text); }

  /* ---------- Banner de cookies ---------- */
  .cookie-banner {
    position: fixed;
    inset: auto var(--space-4) var(--space-4);
    z-index: 150;
    max-width: 960px;
    margin-inline: auto;
    padding: var(--space-4) var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  }

  .cookie-banner[hidden] { display: none; }

  .cookie-banner__inner {
    display: grid;
    gap: var(--space-4);
  }

  .cookie-banner__text {
    max-width: none;
    color: var(--text-2);
    font-size: var(--fs-small);
    line-height: 1.5;
  }

  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "recusar aceitar" "personalizar personalizar";
    gap: var(--space-2);
  }

  .cookie-banner__actions .btn {
    min-height: 44px;
    padding-inline: var(--space-4);
    font-size: .9375rem;
  }

  .cookie-banner__actions [data-consent-reject] { grid-area: recusar; }
  .cookie-banner__actions [data-consent-open] { grid-area: personalizar; }
  .cookie-banner__actions [data-consent-accept] { grid-area: aceitar; }

  @media (min-width: 768px) {
    .cookie-banner__actions {
      grid-template-columns: repeat(3, auto);
      grid-template-areas: "recusar personalizar aceitar";
      justify-content: end;
    }
  }

  @media (min-width: 1024px) {
    .cookie-banner__inner {
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-6);
    }
  }

  /* ---------- Preferências de cookies ---------- */
  .cookie-dialog {
    width: calc(100% - 2 * var(--space-4));
    max-width: 520px;
    max-height: calc(100dvh - 2 * var(--space-4));
    margin: auto;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    color: var(--text-2);
  }

  .cookie-dialog::backdrop { background: rgba(0, 0, 0, .72); }

  .cookie-dialog__form > p { font-size: var(--fs-small); margin-top: var(--space-2); }

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

  .consent-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }

  .consent-option__name { color: var(--text); font-weight: 600; }

  .consent-option__desc { color: var(--text-3); font-size: var(--fs-small); line-height: 1.5; }

  .cookie-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }

  @media (max-width: 479px) {
    .cookie-dialog__actions .btn { width: 100%; }
  }

  /* Interruptor (checkbox) */
  .switch {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    appearance: none;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }

  .switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--text-3);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }

  .switch:checked {
    background: var(--marp-green);
    border-color: var(--marp-green);
  }

  .switch:checked::before {
    background: var(--marp-black);
    transform: translateX(20px);
  }

  .switch:disabled { cursor: not-allowed; opacity: .6; }
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
@layer utilities {
  /* Entrada ao rolar (reveal.js só liga .js-reveal quando o movimento é permitido) */
  /* A transição vale só na entrada; esconder no carregamento é instantâneo (sem piscar) */
  .js-reveal [data-reveal].is-visible {
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js-reveal [data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
  }

  /* Ilustrações dos serviços: a linha do gráfico se desenha e o cartão "Venda" acende */
  .js-reveal .service .service__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--ease-out) .3s;
  }

  .js-reveal .service.is-visible .service__line { stroke-dashoffset: 0; }

  .js-reveal .service .pipe--win .pipe__card {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .4s var(--ease-out) .6s, transform .4s var(--ease-out) .6s;
  }

  .js-reveal .service.is-visible .pipe--win .pipe__card { opacity: 1; transform: none; }

  .js-reveal .service .bubble--out {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease-out) .5s, transform .4s var(--ease-out) .5s;
  }

  .js-reveal .service.is-visible .bubble--out { opacity: 1; transform: none; }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }

  .mt-block { margin-top: var(--space-block); }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-block);
  }

  .cta-row--center { justify-content: center; }
}