@charset "utf-8";
/* ==========================================================================
   Avell Labs — Design System
   Paleta e logo originais preservados. Cobre #B5651D / Grafite #1C1C1C / Osso #F2F1EF
   Camadas de cascata: tokens < reset < base < layout < components < utilities
   ========================================================================== */

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

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Cor primitiva: cobre (mantida da marca) --- */
    --copper-50:  #FAF1E8;
    --copper-100: #F2DFC9;
    --copper-200: #E6BF95;
    --copper-300: #D98A3D;  /* já usado na marca */
    --copper-400: #C5741F;
    --copper-500: #B5651D;  /* PRIMÁRIA da marca */
    --copper-600: #94500F;
    --copper-700: #6E3B0B;

    /* --- Cor primitiva: grafite --- */
    --ink-950: #0E0E0D;
    --ink-900: #141413;
    --ink-800: #1C1C1C;     /* header/dark da marca */
    --ink-700: #262625;
    --ink-600: #3D3D3D;     /* secundária da marca */
    --ink-500: #5A5955;
    --ink-400: #78766F;

    /* --- Cor primitiva: osso --- */
    --bone-50:  #FDFDFC;
    --bone-100: #F8F7F5;
    --bone-200: #F2F1EF;    /* background da marca */
    --bone-300: #E7E5E0;
    --bone-400: #D6D3CB;

    /* --- Semânticos: superfície clara (padrão) --- */
    --bg:            var(--bone-200);
    --bg-raised:     var(--bone-50);
    --bg-sunken:     var(--bone-300);
    --text:          var(--ink-800);
    --text-soft:     var(--ink-500);
    --text-faint:    #706E67;   /* 4.52:1 sobre a neutra — o #78766F anterior dava 4.03 e reprovava em AA */
    --border:        color-mix(in oklab, var(--ink-800) 12%, transparent);
    --border-strong: color-mix(in oklab, var(--ink-800) 22%, transparent);
    --accent:        var(--copper-500);
    --accent-text:   var(--copper-600);
    --accent-soft:   var(--copper-50);
    --on-accent:     #FFFFFF;
    /* Superfície cheia de cobre com texto branco por cima.
       Branco sobre o cobre oficial #B5651D dá 4.34:1 e reprova em AA (min 4.5).
       O cobre-600 resolve com 6.15:1 sem sair da família da marca. O #B5651D
       segue sendo O cobre em tudo que é traço, ícone, borda e destaque. */
    --accent-solid:  var(--copper-600);

    /* --- Tipografia ---
       Kit de marca "Avell Arco Acolhedor": Poppins nos títulos, Calibri no corpo.
       Calibri vem instalada no Windows e com o Office no Mac — que é onde está a
       maior parte do público PME. Fora daí a pilha cai em Carlito (clone livre e
       metricamente idêntico à Calibri, se estiver instalado) e só então em fonte
       de sistema. Para ser conforme em 100% dos visitantes seria preciso
       hospedar a Carlito em woff2 (~90 KB); ver README. */
    --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: Calibri, "Calibri Light", Carlito, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* Escala fluida, razão ~1.15 no celular e ~1.25 no desktop.
       Duas regras que ela precisa respeitar:
       1. Nunca inverter — cada passo maior que o anterior em QUALQUER largura.
          (O piso do --step-6 já ficou abaixo do --step-5 uma vez, e no celular
          o maior título do site aparecia menor que o segundo maior.)
       2. O piso do --step-6 é ditado pela palavra mais larga do hero
          ("para e-commerce"): em 360–390 px ela tem de caber sem estourar. */
    --step--2: clamp(0.75rem, 0.73rem + 0.10vw, 0.80rem);
    --step--1: clamp(0.87rem, 0.84rem + 0.14vw, 0.95rem);
    --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.08rem);
    --step-1:  clamp(1.14rem, 1.08rem + 0.28vw, 1.30rem);
    --step-2:  clamp(1.32rem, 1.22rem + 0.48vw, 1.62rem);
    --step-3:  clamp(1.55rem, 1.38rem + 0.78vw, 2.05rem);
    --step-4:  clamp(1.85rem, 1.55rem + 1.35vw, 2.70rem);
    --step-5:  clamp(2.15rem, 1.70rem + 2.05vw, 3.45rem);
    --step-6:  clamp(2.35rem, 1.55rem + 3.45vw, 4.50rem);

    --leading-tight: 1.04;
    --leading-snug: 1.18;
    --leading-normal: 1.6;
    --leading-relaxed: 1.72;
    --tracking-tight: -0.022em;
    --tracking-tighter: -0.035em;
    --tracking-wide: 0.14em;

    /* --- Espaçamento --- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --section-y: clamp(4.5rem, 3rem + 7vw, 8.75rem);
    --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
    --measure: 68ch;

    /* --- Forma --- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* --- Elevação (quente, não cinza-azulada) --- */
    --shadow-sm: 0 1px 2px rgb(28 28 28 / 0.05), 0 1px 3px rgb(28 28 28 / 0.06);
    --shadow-md: 0 4px 6px -2px rgb(28 28 28 / 0.05), 0 12px 20px -6px rgb(28 28 28 / 0.10);
    --shadow-lg: 0 10px 20px -8px rgb(28 28 28 / 0.12), 0 30px 50px -16px rgb(28 28 28 / 0.18);
    --shadow-copper: 0 10px 34px -12px rgb(181 101 29 / 0.45);

    /* --- Movimento --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 140ms;
    --dur: 260ms;
    --dur-slow: 520ms;

    --header-h: 76px;
    color-scheme: light;
  }

  /* Contexto escuro — inverte os semânticos. Usado em .section--dark, header, footer. */
  .on-dark {
    --bg:            var(--ink-900);
    --bg-raised:     var(--ink-800);
    --bg-sunken:     var(--ink-950);
    --text:          var(--bone-100);
    --text-soft:     color-mix(in oklab, var(--bone-100) 66%, transparent);
    --text-faint:    color-mix(in oklab, var(--bone-100) 47%, transparent);  /* 4.59:1 — em 44% dava 4.17 e reprovava */
    --border:        color-mix(in oklab, var(--bone-100) 14%, transparent);
    --border-strong: color-mix(in oklab, var(--bone-100) 26%, transparent);
    --accent:        var(--copper-300);
    --accent-text:   var(--copper-300);
    --accent-soft:   color-mix(in oklab, var(--copper-500) 18%, transparent);
    --on-accent:     var(--ink-900);
    /* No escuro o cobre claro já dá 6.72:1 com o grafite por cima — não precisa de escurecer. */
    --accent-solid:  var(--copper-300);
    color-scheme: dark;
    /* `color` precisa ser reaplicado: os filhos herdam o valor JÁ COMPUTADO
       do <body>, não reavaliam var(--text) sozinhos. */
    color: var(--text);
  }
}

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

  * { margin: 0; }

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

  :where(html:focus-within) { scroll-behavior: smooth; }

  body {
    min-block-size: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

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

  :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

  :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(p, li) { text-wrap: pretty; }

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

  :where(a) { color: inherit; text-decoration: none; }

  :where(button) { background: none; border: 0; cursor: pointer; }

  /* Nada de `fill: currentColor` global aqui: atributo de apresentação
     (fill="none") perde para qualquer regra CSS, inclusive :where(), e os
     ícones de traço virariam manchas sólidas. Cada ícone declara o próprio fill. */

  :target { scroll-margin-block-start: calc(var(--header-h) + 2rem); }

  @media (prefers-reduced-motion: reduce) {
    :where(html:focus-within) { 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
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    color: var(--text);
    background-color: var(--bg);
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  h1 { font-size: var(--step-5); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
  h2 { font-size: var(--step-4); line-height: 1.08; letter-spacing: var(--tracking-tighter); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  strong, b { font-weight: 600; }

  ::selection { background: var(--copper-500); color: #fff; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }
  :focus:not(:focus-visible) { outline: none; }

  /* Barra de rolagem discreta e quente */
  @supports (scrollbar-color: auto) {
    html { scrollbar-color: var(--bone-400) transparent; scrollbar-width: thin; }
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    inline-size: min(100% - var(--gutter) * 2, 1200px);
    margin-inline: auto;
  }
  .container--narrow { inline-size: min(100% - var(--gutter) * 2, 880px); }
  .container--wide   { inline-size: min(100% - var(--gutter) * 2, 1400px); }

  .section {
    padding-block: var(--section-y);
    position: relative;
  }
  .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

  .section--dark {
    background-color: var(--ink-900);
    color: var(--bone-100);
  }
  .section--raised { background-color: var(--bone-50); }

  /* Seções abaixo da dobra: o browser pula layout/paint até chegarem perto */
  .section[data-defer] {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }

  .stack > * + * { margin-block-start: var(--flow, 1.5rem); }

  .grid { display: grid; gap: var(--grid-gap, var(--space-md)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

  .split {
    display: grid;
    gap: clamp(2rem, 1rem + 5vw, 5rem);
    align-items: center;
    grid-template-columns: 1fr;
  }
  @media (min-width: 62rem) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split--wide-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .split--sticky-start > :first-child { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  }
}

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

  /* ---------- Skip link ---------- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--gutter);
    inset-block-start: -100%;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--ink-900);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: inset-block-start var(--dur) var(--ease-out);
  }
  .skip-link:focus-visible { inset-block-start: 1rem; }

  /* ---------- Header: pílula flutuante, nav centralizada ---------- */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    padding-block: 0.875rem;
    transition: padding-block var(--dur) var(--ease-out);
  }
  .site-header[data-scrolled] { padding-block: 0.5rem; }

  .nav-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: 0.5rem 0.625rem 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--ink-900) 78%, transparent);
    border: 1px solid color-mix(in oklab, #fff 10%, transparent);
    box-shadow: 0 1px 0 0 color-mix(in oklab, #fff 6%, transparent) inset;
    transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .nav-shell {
      background: color-mix(in oklab, var(--ink-900) 84%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
      backdrop-filter: blur(16px) saturate(1.6);
    }
  }
  .site-header[data-scrolled] .nav-shell {
    background: color-mix(in oklab, var(--ink-900) 88%, transparent);
    box-shadow: var(--shadow-lg), 0 1px 0 0 color-mix(in oklab, #fff 8%, transparent) inset;
  }

  .nav-logo {
    display: flex;
    align-items: center;
    color: var(--bone-100);
    padding-block: 0.25rem;
  }
  .nav-logo img { block-size: 26px; inline-size: auto; }
  @media (min-width: 48rem) { .nav-logo img { block-size: 32px; } }

  .nav-menu {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 62rem) { .nav-menu { display: flex; } }

  .nav-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 500;
    color: color-mix(in oklab, var(--bone-100) 88%, transparent);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .nav-link:hover { color: var(--bone-100); background: color-mix(in oklab, #fff 8%, transparent); }
  .nav-link[aria-current="page"] { color: var(--bone-100); }
  .nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-block-end: 0.15rem;
    inset-inline: 0.875rem;
    block-size: 2px;
    border-radius: 2px;
    background: var(--copper-300);
  }

  .nav-actions { display: flex; align-items: center; gap: 0.5rem; }

  /* Botão hambúrguer */
  .nav-toggle {
    --bar: var(--bone-100);
    /* flex-column com gap fixo, e não grid: com grid as linhas automáticas
       esticam para preencher o botão e o "X" não fecha. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--radius-pill);
    color: var(--bone-100);
    background: color-mix(in oklab, #fff 8%, transparent);
  }
  @media (min-width: 62rem) { .nav-toggle { display: none; } }
  .nav-toggle span {
    display: block;
    inline-size: 17px;
    block-size: 1.5px;
    background: var(--bar);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Painel mobile */
  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.25rem;
    padding: 6rem var(--gutter) 3rem;
    background: color-mix(in oklab, var(--ink-950) 96%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
  }
  .nav-drawer[data-open] { opacity: 1; visibility: visible; }
  @media (min-width: 62rem) { .nav-drawer { display: none; } }
  .nav-drawer a {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--bone-100);
    padding-block: 0.4rem;
    opacity: 0;
    transform: translateY(12px);
  }
  .nav-drawer[data-open] a {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 45ms),
                transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 45ms);
  }
  .nav-drawer .btn { margin-block-start: var(--space-lg); opacity: 1; transform: none; }

  body[data-nav-open] { overflow: hidden; }

  /* ---------- Botões ---------- */
  .btn {
    --btn-bg: var(--accent-solid);
    /* Segue o contexto: branco sobre o cobre-600 no claro (6.15:1), grafite
       sobre o cobre-300 no escuro (6.72:1). Fixar em #fff deixava o botão do
       header em 2.74:1 — branco sobre cobre claro. */
    --btn-fg: var(--on-accent);
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.4rem;
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .btn--primary:hover { --btn-bg: var(--copper-500); box-shadow: var(--shadow-copper); }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
  }
  .btn--ghost:hover { --btn-bg: color-mix(in oklab, var(--text) 6%, transparent); --btn-bd: var(--text); }

  .btn--dark { --btn-bg: var(--ink-800); --btn-fg: #fff; }
  .btn--dark:hover { --btn-bg: var(--ink-700); box-shadow: var(--shadow-md); }

  .btn--lg { padding: 1rem 1.75rem; font-size: var(--step-0); }
  .btn--sm { padding: 0.55rem 1rem; font-size: var(--step--2); }
  .btn--block { inline-size: 100%; }

  .btn .icon { inline-size: 1.05em; block-size: 1.05em; flex: none; transition: transform var(--dur) var(--ease-out); }
  .btn:hover .icon--arrow { transform: translateX(3px); }

  .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

  /* ---------- Eyebrow / rótulo de seção ---------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .eyebrow::before {
    content: "";
    inline-size: 1.5rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.55;
  }
  .eyebrow--center::after {
    content: "";
    inline-size: 1.5rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.55;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem 0.4rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .pill .dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--copper-500);
    flex: none;
  }
  .on-dark .pill .dot { background: var(--copper-300); }

  /* ---------- Cabeçalho de seção ---------- */
  .section-head { max-inline-size: 56ch; display: grid; gap: var(--space-sm); }
  .section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
  .section-head p { color: var(--text-soft); font-size: var(--step-1); line-height: var(--leading-relaxed); }
  .section-head + * { margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

  /* ---------- HERO (base compartilhada) ---------- */
  .hero {
    position: relative;
    display: grid;
    align-items: center;
    padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem)) clamp(3.5rem, 2rem + 6vw, 7rem);
    isolation: isolate;
    overflow: hidden;
  }
  .hero__inner { position: relative; z-index: 2; }
  .hero p.lede {
    max-inline-size: 54ch;
    font-size: var(--step-1);
    line-height: var(--leading-relaxed);
    color: var(--text-soft);
  }
  .hero .btn-row { margin-block-start: var(--space-lg); }

  /* Fundos decorativos */
  .hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
      linear-gradient(to right, color-mix(in oklab, var(--copper-500) 18%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--copper-500) 18%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 38%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 80% 62% at 50% 38%, #000 10%, transparent 72%);
    opacity: 0.5;
  }
  .hero__glow {
    position: absolute;
    z-index: 0;
    inline-size: min(120vw, 1100px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--copper-500) 20%, transparent) 0%, transparent 58%);
    filter: blur(28px);
    inset-block-start: -46%;
    inset-inline-start: 50%;
    translate: -50% 0;
    pointer-events: none;
  }

  /* --- HERO A: "Rotativo" (escuro, tipografia grande) --- */
  .hero--a { text-align: center; background: #0a0908; }

  /* Background "Recursive Erosion": esfera de partículas em WebGL. */
  .hero__erosion {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    opacity: 0;
    transition: opacity 900ms var(--ease-out);
    pointer-events: none;
  }
  .hero[data-erosion-on] .hero__erosion { opacity: 1; }

  /* Sem WebGL o canvas fica invisível e o grid/glow do CSS segue como fundo;
     com WebGL eles saem de cena para não competir com as partículas. */
  .hero[data-erosion-on] .hero__grid { opacity: 0.16; }
  .hero[data-erosion-on] .hero__glow { opacity: 0.45; }

  /* Escurece o miolo para o título ficar legível por cima da esfera,
     e fecha as bordas contra o fundo da seção. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 48% 44% at 50% 47%, rgb(10 9 8 / 0.86) 0%, rgb(10 9 8 / 0.62) 42%, rgb(10 9 8 / 0) 76%),
      radial-gradient(ellipse 104% 78% at 50% 50%, rgb(10 9 8 / 0) 42%, #0a0908 94%);
  }
  .hero--a .hero__inner { display: grid; justify-items: center; gap: var(--space-md); }
  .hero--a h1 { font-size: var(--step-6); font-weight: 700; max-inline-size: 16ch; }
  .hero--a .lede { margin-inline: auto; text-align: center; }

  /* A palavra mais larga (o "sizer" invisível) reserva a largura, então o
     resto do título não salta a cada troca. O texto fica centrado nessa caixa. */
  .rotator {
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    text-align: center;
  }
  /* Rolo vertical: a palavra que sai sobe e a que entra vem de baixo, as duas
     na mesma direção. Um crossfade simples deixaria as duas sobrepostas no
     mesmo lugar por meio segundo, o que lê como defeito. */
  .rotator__item {
    grid-area: 1 / 1;
    color: var(--copper-300);
    opacity: 0;
    translate: 0 0.62em;
    transition: opacity 380ms var(--ease-out), translate 380ms var(--ease-out);
    white-space: nowrap;
  }
  .rotator__item[data-active] { opacity: 1; translate: 0 0; }
  .rotator__item[data-leaving] { opacity: 0; translate: 0 -0.62em; }
  .rotator__sizer { grid-area: 1 / 1; opacity: 0; pointer-events: none; white-space: nowrap; }

  /* --- HERO B: "Prova" (claro, split editorial com mockup) --- */
  .hero--b { background: var(--bone-200); }
  .hero--b .hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 6vw, 4.5rem); align-items: center; }
  @media (min-width: 64rem) {
    .hero--b .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  }
  .hero--b h1 { font-size: var(--step-5); max-inline-size: 14ch; }
  .hero--b .hero__copy { display: grid; gap: var(--space-md); justify-items: start; }
  .hero--b .hero__grid {
    background-image:
      linear-gradient(to right, color-mix(in oklab, var(--ink-800) 8%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--ink-800) 8%, transparent) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 82% 45%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 60% at 82% 45%, #000 0%, transparent 70%);
    opacity: 1;
  }

  /* --- HERO C: "Arco" (escuro, marca em destaque). Usado na página Sobre. --- */
  .hero--c { background: var(--ink-950); text-align: center; }
  .hero--c .hero__inner { display: grid; justify-items: center; gap: var(--space-md); }
  .hero--c h1 { font-size: var(--step-5); max-inline-size: 15ch; font-weight: 600; }
  .hero--c .lede { margin-inline: auto; text-align: center; }

  /* O arco da marca entra como máscara: colorível, sem SVG no HTML. */
  .hero--c .hero__arch {
    position: absolute;
    z-index: 0;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -52%;
    inline-size: min(128vw, 1000px);
    aspect-ratio: 1;
    opacity: 0.15;
    pointer-events: none;
    background-color: var(--copper-500);
    -webkit-mask: url("../img/avell-arch.svg") center / contain no-repeat;
    mask: url("../img/avell-arch.svg") center / contain no-repeat;
  }
  .hero--c .hero__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 62% 55% at 50% 45%, transparent 20%, var(--ink-950) 82%);
    pointer-events: none;
  }

  /* ---------- Faixa de confiança ---------- */
  .trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem clamp(1.25rem, 0.5rem + 3vw, 3rem);
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--border);
    inline-size: 100%;
  }
  .trust__item { display: flex; align-items: baseline; gap: 0.5rem; }
  .trust__item b {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: var(--tracking-tight);
  }
  .trust__item span { font-size: var(--step--1); color: var(--text-soft); }

  /* ---------- Cards ---------- */
  .card {
    position: relative;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
  }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .card h3 { font-size: var(--step-1); }
  .card p { color: var(--text-soft); font-size: var(--step--1); line-height: var(--leading-relaxed); }
  .on-dark .card { background: color-mix(in oklab, #fff 4%, transparent); }

  .card__icon {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-text);
    margin-block-end: 0.25rem;
  }
  .card__icon svg { inline-size: 22px; block-size: 22px; }

  /* Card de serviço com link no card inteiro */
  .card--link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .card__arrow {
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--accent-text);
  }
  .card:hover .card__arrow svg { transform: translateX(3px); }
  .card__arrow svg { inline-size: 1em; block-size: 1em; transition: transform var(--dur) var(--ease-out); }

  /* ---------- Marquee de tecnologias ---------- */
  .marquee {
    --marquee-dur: 42s;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee__track {
    display: flex;
    inline-size: max-content;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    animation: marquee var(--marquee-dur) linear infinite;
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--text-faint);
    white-space: nowrap;
  }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; justify-content: center; flex-wrap: wrap; inline-size: 100%; }
  }

  /* ---------- Processo: trilha de checkpoints ----------
     Cada etapa é um marco numerado ligado ao próximo por um trilho que se
     preenche conforme você rola — a leitura de um pipeline de entrega, que
     é o que o processo de fato é. */
  .steps {
    --node: clamp(44px, 40px + 0.8vw, 54px);
    --rail: 2px;
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .step {
    position: relative;
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: clamp(1rem, 0.7rem + 1.4vw, 1.9rem);
    padding-block-end: clamp(2.25rem, 1.75rem + 2.4vw, 3.5rem);
    view-timeline: --step block;
  }
  .step:last-child { padding-block-end: 0; }

  /* Absoluto: `inset-block-end: 0` resolve contra a caixa de padding, então
     o trilho chega exatamente ao nó da etapa seguinte, sem vão. */
  .step__rail {
    position: absolute;
    inset-block-start: var(--node);
    inset-block-end: 0;
    inset-inline-start: calc(var(--node) / 2 - var(--rail) / 2);
    inline-size: var(--rail);
    background: var(--border);
    border-radius: var(--rail);
    overflow: hidden;
  }
  .step:last-child .step__rail { display: none; }

  .step__rail-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      var(--accent),
      color-mix(in oklab, var(--accent) 45%, transparent));
    transform-origin: top center;
  }

  .step__node {
    position: relative;
    z-index: 1;
    inline-size: var(--node);
    block-size: var(--node);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--accent-solid);
    background: var(--accent-solid);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  .step__body { display: grid; gap: 0.4rem; align-content: start; padding-block-start: 0.35rem; }
  .step h3 { font-size: var(--step-2); }
  .step p { color: var(--text-soft); max-inline-size: var(--measure); }

  @media (min-width: 56rem) {
    .step { grid-template-columns: var(--node) minmax(10rem, 15rem) minmax(0, 1fr); }
    .step__body { display: contents; }
    .step__body p { padding-block-start: 0.5rem; }
  }

  /* Estado BASE = checkpoint alcançado. Onde não houver scroll-driven
     animations, a trilha aparece inteira e legível, em vez de apagada. */
  @keyframes step-node-reach {
    from {
      border-color: var(--border-strong);
      background: transparent;
      color: var(--text-faint);
      scale: 0.86;
    }
    70% { scale: 1.06; }
    to {
      border-color: var(--accent-solid);
      background: var(--accent-solid);
      color: var(--on-accent);
      scale: 1;
    }
  }
  @keyframes step-rail-draw {
    from { scale: 1 0; }
    to   { scale: 1 1; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .step__node {
        animation: step-node-reach linear both;
        animation-timeline: --step;
        animation-range: cover 30% cover 52%;
      }
      .step__rail-fill {
        animation: step-rail-draw linear both;
        animation-timeline: --step;
        animation-range: cover 44% cover 86%;
      }
    }
  }

  /* ---------- Projetos ---------- */
  .projects { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  @media (min-width: 48rem) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .project--wide { grid-column: 1 / -1; }

  .project {
    position: relative;
    display: grid;
    gap: var(--space-sm);
    border-radius: var(--radius-lg);
  }
  .project__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bone-300);
    border: 1px solid var(--border);
    aspect-ratio: 16 / 9;
  }
  .project__frame img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top center;
    transition: scale var(--dur-slow) var(--ease-out);
  }
  .project:hover .project__frame img { scale: 1.035; }
  .project__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
  .project h3 { font-size: var(--step-1); }
  .project__tag {
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    padding: 0.18rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
  }
  .project p { color: var(--text-soft); font-size: var(--step--1); max-inline-size: 52ch; }

  /* ---------- Palco 3D com scroll (Projetos) ----------
     Equivalente nativo ao useScroll/useTransform do framer-motion: a
     progressão vem de uma view-timeline, sem uma linha de JavaScript.
     Estado BASE = estado final (plano). Navegador sem scroll-driven
     animations mostra o cartão reto, nunca travado inclinado. */
  /* O palco é deliberadamente ALTO (60rem / 80rem, como no original) e o
     cartão fica centrado nele. É essa altura que faz a animação "fluir pela
     tela": o cartão sobe e se endireita ao longo de um trecho generoso de
     rolagem, em vez de já chegar reto. */
  .stage {
    position: relative;
    min-block-size: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    view-timeline: --stage block;
  }
  @media (min-width: 48rem) {
    .stage { min-block-size: 80rem; padding: 5rem; }
  }

  .stage__inner {
    position: relative;
    inline-size: 100%;
    perspective: 1000px;
    padding-block: 2.5rem;
  }
  @media (min-width: 48rem) { .stage__inner { padding-block: 10rem; } }

  /* O cabeçalho do palco reaproveita .section-head: mesma grade, mesmo ritmo
     entre rótulo/título/apoio e mesmo respiro até o bloco seguinte que o
     resto do site. Aqui ele só ganha o gancho da animação.
     (O original encaixa o cartão com margin-top negativa, mas lá o cabeçalho
     é só um h1; com rótulo + título + linha de apoio isso jogava o cartão
     por cima do subtítulo.) */
  .stage__head { position: relative; z-index: 1; }

  .stage__device {
    inline-size: 100%;
    max-inline-size: 64rem;
    block-size: 30rem;
    /* Explícito: o atalho `margin` zera o margin-block-start que
       `.section-head + *` aplicaria, e o cartão subia para perto do texto. */
    margin: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem) auto 0;
    padding: 0.5rem;
    border: 4px solid color-mix(in oklab, var(--bone-100) 22%, var(--ink-600));
    border-radius: 30px;
    background: var(--ink-700);
    box-shadow:
      0 9px 20px rgb(0 0 0 / 0.29),
      0 37px 37px rgb(0 0 0 / 0.26),
      0 84px 50px rgb(0 0 0 / 0.15),
      0 149px 60px rgb(0 0 0 / 0.04),
      0 233px 65px rgb(0 0 0 / 0.01);
    transform-style: preserve-3d;
  }
  @media (min-width: 48rem) {
    .stage__device { block-size: 40rem; padding: 1.5rem; }
  }

  /* Painel interno com respiro: é este padding que deixa a miniatura do
     projeto um pouco menor que a moldura, em vez de sangrar até a borda. */
  .stage__screen {
    position: relative;
    block-size: 100%;
    inline-size: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: var(--ink-950);
  }
  @media (min-width: 48rem) { .stage__screen { padding: 1rem; } }

  @keyframes stage-tilt {
    from { transform: rotateX(20deg) scale(1.05); }
    to   { transform: rotateX(0deg) scale(1); }
  }
  @keyframes stage-tilt-sm {
    from { transform: rotateX(20deg) scale(0.7); }
    to   { transform: rotateX(0deg) scale(0.9); }
  }
  @keyframes stage-lift {
    from { transform: translateY(0); }
    to   { transform: translateY(-100px); }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .stage__device,
      .stage__head {
        animation: linear both;
        animation-timeline: --stage;
        /* `cover`, e não `contain`.
           `contain` mede (altura do palco − altura da viewport), o que traz
           dois problemas sérios no celular:
           1. O intervalo fica curtíssimo — num palco de 960 px com viewport de
              812 px sobram 148 px de rolagem, e a animação inteira acontece
              nesse piscar. Se a viewport chegar perto da altura do palco, o
              intervalo tende a ZERO e vira um salto seco, sem transição.
           2. A barra de URL do celular aparece e some durante a rolagem. Cada
              mudança dessas altera a altura da viewport e, com `contain`,
              encolhe ou estica o intervalo no meio do caminho — o progresso
              pula de posição sozinho.
           `cover` mede (altura do palco + altura da viewport): nunca degenera,
           e uma variação de 100 px na barra de URL desloca menos de 6% do
           intervalo, em vez de engolir metade dele.
           12% é mais ou menos quando o cartão assoma por baixo; 50% é quando
           ele fica centrado na tela, já reto. */
        animation-range: cover 12% cover 50%;
      }
      .stage__device { animation-name: stage-tilt; }
      .stage__head { animation-name: stage-lift; }

      @media (max-width: 48rem) {
        .stage__device { animation-name: stage-tilt-sm; }
      }
    }
  }

  /* ---------- Carrossel de projetos (dentro do palco) ---------- */
  .pcar {
    position: relative;
    block-size: 100%;
    border-radius: 12px;
    overflow: hidden;
  }

  .pcar__viewport {
    display: flex;
    block-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .pcar__viewport::-webkit-scrollbar { display: none; }
  @media (prefers-reduced-motion: reduce) { .pcar__viewport { scroll-behavior: auto; } }

  .pcar__slide {
    position: relative;
    flex: 0 0 100%;
    block-size: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    overflow: hidden;
    background: var(--ink-950);
  }

  /* A miniatura aparece INTEIRA e menor que a moldura, com respiro em volta,
     em vez de cortada e ampliada até a borda. O recuo inferior reserva a
     faixa da legenda, que assim não cai por cima do print do cliente. */
  .pcar__slide picture {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    padding: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
    padding-block-end: clamp(4.25rem, 3rem + 3vw, 6rem);
  }
  .pcar__slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 8px;
  }

  .pcar__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    padding: clamp(0.9rem, 0.7rem + 1.2vw, 1.5rem) clamp(1.1rem, 0.8rem + 1.6vw, 2rem);
    /* A imagem agora reserva esta faixa, então basta um véu curto para
       fechar contra o fundo — sem o gradiente pesado de antes. */
    background: linear-gradient(to top,
      rgb(10 9 8 / 1) 0%,
      rgb(10 9 8 / 1) 62%,
      rgb(10 9 8 / 0) 100%);
    color: var(--bone-100);
    text-align: start;
  }
  .pcar__caption h3 { font-size: var(--step-2); color: var(--bone-100); }
  .pcar__caption p {
    color: color-mix(in oklab, var(--bone-100) 72%, transparent);
    font-size: var(--step--1);
    max-inline-size: 56ch;
  }

  .pcar__arrow {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 3;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    color: var(--bone-100);
    background: color-mix(in oklab, var(--ink-950) 62%, transparent);
    border: 1px solid color-mix(in oklab, #fff 18%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
  }
  .pcar__arrow:hover { background: var(--copper-500); scale: 1.06; }
  .pcar__arrow[disabled] { opacity: 0.32; pointer-events: none; }
  .pcar__arrow svg { inline-size: 20px; block-size: 20px; }
  .pcar__arrow--prev { inset-inline-start: clamp(0.5rem, 0.2rem + 1vw, 1rem); }
  .pcar__arrow--prev svg { rotate: 180deg; }
  .pcar__arrow--next { inset-inline-end: clamp(0.5rem, 0.2rem + 1vw, 1rem); }
  @media (max-width: 34rem) { .pcar__arrow { inline-size: 38px; block-size: 38px; } }

  .pcar__dots {
    position: absolute;
    inset-block-end: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
    inset-inline-end: clamp(1.1rem, 0.8rem + 1.6vw, 2.25rem);
    z-index: 3;
    display: flex;
    gap: 0.4rem;
  }
  .pcar__dots button {
    inline-size: 7px;
    block-size: 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--bone-100) 38%, transparent);
    transition: inline-size var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }
  .pcar__dots button[aria-selected="true"] { inline-size: 22px; background: var(--copper-300); }

  /* ---------- Páginas jurídicas ---------- */
  .legal-body { display: grid; gap: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
  .legal-item { display: grid; gap: 0.5rem; }
  .legal-item h2 {
    font-size: var(--step-1);
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
  }
  .legal-item__n { color: var(--accent-text); font-variant-numeric: tabular-nums; flex: none; }
  .legal-item p { color: var(--text-soft); line-height: var(--leading-relaxed); }

  /* ---------- Depoimentos ---------- */
  /* auto-fit: funciona com 1, 2 ou 3 depoimentos sem deixar cartao orfao */
  .quotes {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    max-inline-size: 72rem;
    margin-inline: auto;
  }
  .quote {
    display: grid;
    gap: var(--space-md);
    align-content: start;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
  }
  .on-dark .quote { background: color-mix(in oklab, #fff 4%, transparent); }
  .quote blockquote { font-size: var(--step-0); line-height: var(--leading-relaxed); color: var(--text); }
  .quote__mark { color: var(--accent); inline-size: 26px; block-size: 26px; opacity: 0.9; }
  .quote figcaption { display: grid; gap: 0.1rem; margin-block-start: auto; padding-block-start: var(--space-sm); border-block-start: 1px solid var(--border); }
  .quote figcaption b { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; }
  .quote figcaption span { font-size: var(--step--2); color: var(--text-faint); }

  /* ---------- FAQ (nativo, zero JS) ---------- */
  .faq { display: grid; border-block-start: 1px solid var(--border); }
  .faq details {
    border-block-end: 1px solid var(--border);
  }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--accent-text); }
  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    background: currentColor;
    -webkit-mask: var(--icon-plus) center / contain no-repeat;
    mask: var(--icon-plus) center / contain no-repeat;
    transition: rotate var(--dur) var(--ease-out);
  }
  .faq details[open] summary { color: var(--accent-text); }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq__answer { padding-block-end: 1.4rem; }
  .faq__answer p { color: var(--text-soft); max-inline-size: var(--measure); }

  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }

  /* ---------- Compromissos / features em lista ---------- */
  .checklist { display: grid; gap: var(--space-md); list-style: none; padding: 0; }
  .checklist li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; align-items: start; }
  .checklist svg {
    inline-size: 22px;
    block-size: 22px;
    color: var(--accent);
    grid-row: span 2;
    margin-block-start: 0.15rem;
  }
  .checklist b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }
  .checklist p { color: var(--text-soft); font-size: var(--step--1); }

  /* ---------- CTA final ---------- */
  .cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--ink-900);
    color: var(--bone-100);
    padding: clamp(2.5rem, 1.5rem + 5vw, 5rem);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--space-md);
    isolation: isolate;
  }
  .cta-band h2 { max-inline-size: 18ch; }
  .cta-band p { color: color-mix(in oklab, var(--bone-100) 68%, transparent); max-inline-size: 52ch; font-size: var(--step-1); }
  .cta-band__glow {
    position: absolute;
    z-index: -1;
    inset-block-end: -60%;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: min(140%, 900px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--copper-500) 42%, transparent), transparent 62%);
    filter: blur(16px);
  }

  /* ---------- Contato ---------- */
  .contact-grid { display: grid; gap: var(--space-md); }
  @media (min-width: 48rem) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
  .contact-card { position: relative; }
  .contact-card__value {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    word-break: break-word;
  }
  .contact-card__badge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent-solid);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
  }

  .hours { display: grid; gap: 0; }
  .hours div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: 0.8rem;
    border-block-end: 1px solid var(--border);
    font-size: var(--step--1);
  }
  .hours div:last-child { border-block-end: 0; }
  .hours dt { color: var(--text-soft); }
  .hours dd { font-weight: 600; margin: 0; }

  /* ---------- WhatsApp flutuante ---------- */
  .wa-fab {
    position: fixed;
    inset-block-end: clamp(1rem, 0.5rem + 2vw, 1.75rem);
    inset-inline-end: clamp(1rem, 0.5rem + 2vw, 1.75rem);
    z-index: 90;
    display: grid;
    place-items: center;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 24px -6px rgb(37 211 102 / 0.55);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  .wa-fab:hover { transform: scale(1.06); box-shadow: 0 12px 30px -6px rgb(37 211 102 / 0.65); }
  .wa-fab svg { inline-size: 28px; block-size: 28px; }

  /* ---------- Rodapé ---------- */
  .site-footer {
    background: var(--ink-950);
    color: var(--bone-100);
    padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-lg);
  }
  .footer-grid {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 3.5rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 52rem) {
    .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  }
  .footer-brand { display: grid; gap: var(--space-sm); align-content: start; max-inline-size: 36ch; }
  .footer-brand img { block-size: 34px; inline-size: auto; }
  .footer-brand p { color: var(--text-soft); font-size: var(--step--1); line-height: var(--leading-relaxed); }
  .footer-col h2 {
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-block-end: var(--space-sm);
  }
  .footer-col ul { display: grid; gap: 0.6rem; list-style: none; padding: 0; }
  .footer-col a {
    font-size: var(--step--1);
    color: color-mix(in oklab, var(--bone-100) 72%, transparent);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .footer-col a:hover { color: var(--bone-100); }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--border);
    font-size: var(--step--2);
    color: var(--text-faint);
  }
  .footer-social { display: flex; gap: 0.5rem; }
  .footer-social a {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text-soft);
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .footer-social a:hover { color: var(--bone-100); border-color: var(--border-strong); background: color-mix(in oklab, #fff 6%, transparent); }
  .footer-social svg { inline-size: 17px; block-size: 17px; }

  /* ---------- Banner de cookies (LGPD) ---------- */
  .cookie {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 95;
    padding: var(--gutter);
    translate: 0 110%;
    transition: translate var(--dur-slow) var(--ease-out);
  }
  .cookie[data-open] { translate: 0 0; }
  .cookie__inner {
    display: grid;
    gap: var(--space-md);
    align-items: center;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
    border-radius: var(--radius-lg);
    background: var(--ink-900);
    color: var(--bone-100);
    border: 1px solid color-mix(in oklab, #fff 12%, transparent);
    box-shadow: var(--shadow-lg);
  }
  @media (min-width: 56rem) { .cookie__inner { grid-template-columns: 1fr auto; } }
  .cookie p { font-size: var(--step--1); color: color-mix(in oklab, var(--bone-100) 72%, transparent); }
  .cookie p a { color: var(--copper-300); text-decoration: underline; text-underline-offset: 3px; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }
  .text-accent { color: var(--accent-text); }
  .text-soft { color: var(--text-soft); }
  .measure { max-inline-size: var(--measure); }
  .mt-lg { margin-block-start: var(--space-lg); }
  .mt-xl { margin-block-start: var(--space-xl); }
  .mt-2xl { margin-block-start: var(--space-2xl); }
  .mx-auto { margin-inline: auto; }
  .flow-sm { --flow: 0.75rem; }
  .flow-lg { --flow: 2rem; }

  [hidden] { display: none !important; }

  /* Ícones como máscaras (evita SVGs inline repetidos) */
  :root { --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v16h-2z'/%3E%3Cpath d='M4 11h16v2H4z'/%3E%3C/svg%3E"); }

  /* Entrada do conteúdo acima da dobra.
     Roda em CSS puro, no load: não espera JS nem IntersectionObserver,
     então o herói nunca fica invisível enquanto o script carrega. */
  @keyframes rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
  }
  .rise {
    animation: rise 640ms var(--ease-out) both;
    animation-delay: var(--rise-delay, 0ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
  }

  /* Revelação ao rolar (apenas abaixo da dobra).
     Caminho 1 — JS: IntersectionObserver marca .is-visible.
     Caminho 2 — CSS puro: animação guiada pelo scroll, sem JS nenhum.
     Em qualquer falha o conteúdo aparece; nunca fica preso invisível. */
  .reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 620ms var(--ease-out), translate 620ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-visible { opacity: 1; translate: 0 0; }

  /* Se o JS falhar ou estiver desativado, nada fica invisível */
  html:not(.js) .reveal { opacity: 1; translate: none; }

  /* Navegadores com scroll-driven animations dispensam o observer: a
     progressão vem do próprio scroll, então pular a seção (âncora, Fim,
     rolagem rápida) já entrega o elemento em 100%, nunca invisível. */
  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 1;
      translate: none;
      transition: none;
      animation: rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }

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