/* =============================================================================
   MENDRIX — SOFTWARE SOLUTIONS
   Folha de estilo única, organizada em camadas (@layer).

   SUMÁRIO
   01. tokens      — variáveis de design centralizadas
   02. reset       — normalização
   03. base        — tipografia e elementos nativos
   04. layout      — container, seções, grades
   05. componentes — botões, rótulos, campos, cartões, etc.
   06. secoes      — estilos específicos de cada seção
   07. motion      — animações e prefers-reduced-motion
   08. utilidades  — auxiliares

   CONTRASTE (WCAG 2.1) — combinações verificadas e aprovadas:
     grafite   #242827 sobre marfim  #F1EEE8 → 12.9:1  AAA
     cinza     #626761 sobre marfim  #F1EEE8 →  5.0:1  AA
     bronze-fundo #6E5A47 sobre marfim       →  5.6:1  AA   (texto pequeno)
     bronze    #8C7863 sobre marfim  #F1EEE8 →  3.6:1  AA Large / gráficos
     marfim    #F1EEE8 sobre grafite #242827 → 12.9:1  AAA
     bronze-claro #C4A88A sobre grafite      →  6.6:1  AA
     cinza-claro  #BFBCB6 sobre grafite      →  7.9:1  AA
   O bronze puro nunca é usado em texto corrido: apenas em áreas grandes,
   traços, ícones e títulos de grande porte.
============================================================================= */

@layer tokens, reset, base, layout, componentes, secoes, motion, animacoes,
  utilidades;

/* =============================================================================
   01. TOKENS
============================================================================= */
@layer tokens {
  :root {
    /* --- Cor: paleta da marca -------------------------------------------- */
    --cor-grafite: #242827;
    --cor-marfim: #f1eee8;
    --cor-bronze: #8c7863;
    --cor-cinza: #626761;

    /* --- Cor: derivados com contraste verificado -------------------------- */
    --cor-bronze-fundo: #6e5a47; /* texto pequeno sobre fundo claro */
    --cor-bronze-claro: #c4a88a; /* texto sobre fundo escuro */
    --cor-cinza-claro: #bfbcb6; /* texto de apoio sobre fundo escuro */

    /* Dourado champagne da luz ambiente (~#B59A72), harmonizado com o bronze.
       Em canais RGB para compor os gradientes com alfa variável. */
    --luz-champagne-rgb: 181, 154, 114;
    --luz-feixe-rgb: 255, 224, 165; /* halos do cursor: ouro claro, aplicado com mix-blend screen */

    /* --- Cor: superfícies ------------------------------------------------- */
    --sup-base: #f1eee8;
    --sup-elevada: #f7f5f1;
    --sup-recuada: #e8e4db;
    --sup-escura: #242827;
    --sup-escura-elevada: #2c302f;

    /* --- Cor: texto ------------------------------------------------------- */
    --txt-forte: #242827;
    --txt-medio: #4c514f;
    --txt-suave: #626761;
    --txt-inverso-forte: #f1eee8;
    --txt-inverso-medio: #bfbcb6;
    --txt-inverso-suave: #94918c;

    /* --- Cor: traços ------------------------------------------------------ */
    --traco: rgba(36, 40, 39, 0.14);
    --traco-forte: rgba(36, 40, 39, 0.26);
    --traco-bronze: rgba(140, 120, 99, 0.42);
    --traco-inverso: rgba(241, 238, 232, 0.16);
    --traco-inverso-forte: rgba(241, 238, 232, 0.32);

    /* --- Cor: estados ----------------------------------------------------- */
    --cor-erro: #8a3f34;
    --cor-erro-fundo: rgba(138, 63, 52, 0.08);
    --cor-ok: #3f5f4a;
    --cor-ok-fundo: rgba(63, 95, 74, 0.08);
    --cor-aviso: #7a5c1f;
    --cor-aviso-fundo: rgba(122, 92, 31, 0.08);

    /* --- Tipografia ------------------------------------------------------- */
    --fonte-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
      "Liberation Mono", monospace;

    /* Escala fluida — razão ~1.22 no mobile, ~1.30 no desktop */
    --passo--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
    --passo--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.9rem);
    --passo-0: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
    --passo-1: clamp(1.2rem, 1.14rem + 0.3vw, 1.4rem);
    --passo-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.82rem);
    --passo-3: clamp(1.728rem, 1.54rem + 0.94vw, 2.37rem);
    --passo-4: clamp(2.074rem, 1.78rem + 1.47vw, 3.08rem);
    --passo-5: clamp(2.488rem, 2.03rem + 2.29vw, 4rem);
    --passo-6: clamp(2.986rem, 2.29rem + 3.48vw, 5.2rem);

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semi: 600;
    --peso-forte: 700;

    --altura-apertada: 1.06;
    --altura-titulo: 1.14;
    --altura-media: 1.4;
    --altura-texto: 1.62;

    --tracking-titulo: -0.022em;
    --tracking-display: -0.03em;
    --tracking-rotulo: 0.16em;

    /* --- Espaçamento ------------------------------------------------------ */
    --esp-3xs: 0.25rem;
    --esp-2xs: 0.5rem;
    --esp-xs: 0.75rem;
    --esp-sm: 1rem;
    --esp-md: 1.5rem;
    --esp-lg: 2rem;
    --esp-xl: 3rem;
    --esp-2xl: 4rem;
    --esp-3xl: 6rem;
    --esp-4xl: 8rem;

    --esp-secao: clamp(5rem, 3.2rem + 9vw, 10rem);
    --esp-secao-curta: clamp(3.5rem, 2.4rem + 5.5vw, 6.5rem);

    /* --- Layout ----------------------------------------------------------- */
    --largura-max: 78rem;
    --largura-texto: 40rem;
    --largura-estreita: 52rem;
    --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3.5rem);
    --altura-cabecalho: 4.5rem;
    --altura-ticker: 2.25rem; /* faixa de termos abaixo da barra do cabeçalho */

    /* --- Forma ------------------------------------------------------------ */
    --raio-nulo: 0;
    --raio-xs: 2px;
    --raio-sm: 3px;
    --raio-md: 4px;
    --raio-pill: 999px;

    /* --- Elevação (muito contida) ----------------------------------------- */
    --sombra-sutil: 0 1px 2px rgba(36, 40, 39, 0.04),
      0 8px 24px -16px rgba(36, 40, 39, 0.16);
    --sombra-media: 0 1px 2px rgba(36, 40, 39, 0.05),
      0 18px 48px -24px rgba(36, 40, 39, 0.22);

    /* --- Movimento -------------------------------------------------------- */
    --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-rapida: 160ms;
    --dur-media: 320ms;
    --dur-lenta: 620ms;

    /* --- Foco -------------------------------------------------------------- */
    --anel-foco: 2px solid var(--cor-bronze-fundo);
    --anel-foco-inverso: 2px solid var(--cor-bronze-claro);
    --anel-offset: 3px;

    color-scheme: light;
  }

  /* Escopo escuro: usado nas seções em grafite. Reescreve apenas os papéis. */
  .escopo-escuro {
    --sup-base: var(--sup-escura);
    --sup-elevada: var(--sup-escura-elevada);
    --sup-recuada: #1e2221;
    --txt-forte: var(--txt-inverso-forte);
    --txt-medio: var(--txt-inverso-medio);
    --txt-suave: var(--txt-inverso-suave);
    --traco: var(--traco-inverso);
    --traco-forte: var(--traco-inverso-forte);
    --traco-bronze: rgba(196, 168, 138, 0.42);
    --cor-bronze-fundo: var(--cor-bronze-claro);
    --anel-foco: var(--anel-foco-inverso);
    color-scheme: dark;
  }
}

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

  * {
    margin: 0;
  }

  html {
    /* Escala geral da interface: 100% passa a renderizar como o zoom de 110%
       do navegador. `zoom` escala tudo de forma uniforme (px, vw, imagens,
       camadas fixas) sem quebrar posicionamento nem a barra de rolagem. */
    zoom: 1.1;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Cor de base do site. Fica no <html> para que a luz ambiente, uma camada
       fixa em z-index negativo, possa aparecer entre esta cor e o conteúdo. */
    background-color: var(--sup-base);
  }

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

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

  img,
  svg {
    height: auto;
  }

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

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

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li {
    overflow-wrap: break-word;
    hyphens: auto;
  }

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

  /* Compensa o cabeçalho fixo ao navegar por âncoras. */
  :target,
  section[id],
  [id^="painel-"] {
    scroll-margin-top: calc(var(--altura-cabecalho) + 2rem);
  }
}

/* =============================================================================
   03. BASE
============================================================================= */
@layer base {
  body {
    /* Transparente de propósito: deixa a luz ambiente (camada fixa atrás)
       transparecer na abertura. A cor de base vem do <html>. */
    background-color: transparent;
    color: var(--txt-forte);
    font-family: var(--fonte-sans);
    font-size: var(--passo-0);
    font-weight: var(--peso-normal);
    line-height: var(--altura-texto);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: var(--peso-semi);
    line-height: var(--altura-titulo);
    letter-spacing: var(--tracking-titulo);
    text-wrap: balance;
    color: var(--txt-forte);
  }

  h1 {
    font-size: var(--passo-6);
    line-height: var(--altura-apertada);
    letter-spacing: var(--tracking-display);
  }
  h2 {
    font-size: var(--passo-4);
  }
  h3 {
    font-size: var(--passo-2);
  }
  h4 {
    font-size: var(--passo-1);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: var(--traco-bronze);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-rapida) var(--ease-padrao),
      text-decoration-color var(--dur-rapida) var(--ease-padrao);
  }

  a:hover {
    color: var(--cor-bronze-fundo);
    text-decoration-color: currentColor;
  }

  strong,
  b {
    font-weight: var(--peso-semi);
  }

  ::selection {
    background-color: var(--cor-bronze);
    color: var(--cor-marfim);
  }

  /* Foco visível e consistente em toda a interface. */
  :focus-visible {
    outline: var(--anel-foco);
    outline-offset: var(--anel-offset);
    border-radius: var(--raio-xs);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--traco);
  }
}

/* =============================================================================
   04. LAYOUT
============================================================================= */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .secao {
    position: relative;
    padding-block: var(--esp-secao);
    background-color: var(--sup-base);
    color: var(--txt-forte);
  }

  .secao--curta {
    padding-block: var(--esp-secao-curta);
  }

  .secao--traco-topo {
    border-top: 1px solid var(--traco);
  }

  /* Grade editorial de 12 colunas usada nas seções principais. */
  .grade-editorial {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--esp-lg) var(--gutter);
  }

  .col-titulo {
    grid-column: 1 / -1;
  }

  .col-conteudo {
    grid-column: 1 / -1;
  }

  @media (min-width: 62rem) {
    .col-titulo {
      grid-column: 1 / span 5;
    }
    .col-conteudo {
      grid-column: 7 / -1;
    }
  }

  .pilha > * + * {
    margin-block-start: var(--fluxo, var(--esp-sm));
  }

  .pilha-md > * + * {
    margin-block-start: var(--esp-md);
  }

  .pilha-lg > * + * {
    margin-block-start: var(--esp-lg);
  }
}

/* =============================================================================
   05. COMPONENTES
============================================================================= */
@layer componentes {
  /* --- Link de pular para o conteúdo ------------------------------------- */
  .pular-link {
    position: absolute;
    top: var(--esp-sm);
    left: var(--esp-sm);
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background-color: var(--cor-grafite);
    color: var(--cor-marfim);
    font-size: var(--passo--1);
    font-weight: var(--peso-medio);
    border-radius: var(--raio-sm);
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--dur-media) var(--ease-saida);
  }

  .pular-link:focus-visible {
    transform: translateY(0);
    color: var(--cor-marfim);
  }

  /* --- Rótulo mono (eyebrow) --------------------------------------------- */
  .rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-fundo);
  }

  .rotulo::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background-color: var(--cor-bronze);
    flex: none;
  }

  .rotulo--sem-traco::before {
    display: none;
  }

  .rotulo__numero {
    color: var(--txt-suave);
  }

  /* --- Botões ------------------------------------------------------------- */
  .botao {
    --botao-fundo: var(--cor-grafite);
    --botao-texto: var(--cor-marfim);
    --botao-borda: var(--cor-grafite);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.95rem 1.6rem;
    min-block-size: 3rem;
    background-color: var(--botao-fundo);
    color: var(--botao-texto);
    border: 1px solid var(--botao-borda);
    border-radius: var(--raio-sm);
    font-size: var(--passo--1);
    font-weight: var(--peso-medio);
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-media) var(--ease-padrao),
      color var(--dur-media) var(--ease-padrao),
      border-color var(--dur-media) var(--ease-padrao),
      transform var(--dur-rapida) var(--ease-padrao);
  }

  .botao:hover {
    --botao-fundo: #171a19;
    --botao-borda: #171a19;
    color: var(--cor-marfim);
  }

  .botao:active {
    transform: translateY(1px);
  }

  .botao__seta {
    inline-size: 0.85em;
    block-size: 0.85em;
    flex: none;
    transition: transform var(--dur-media) var(--ease-saida);
  }

  .botao:hover .botao__seta {
    transform: translate(2px, -2px);
  }

  .botao__icone {
    inline-size: 1.1em;
    block-size: 1.1em;
    flex: none;
  }

  .botao--secundario {
    --botao-fundo: transparent;
    --botao-texto: var(--txt-forte);
    --botao-borda: var(--traco-forte);
  }

  .botao--secundario:hover {
    --botao-fundo: transparent;
    --botao-borda: var(--cor-bronze);
    color: var(--cor-bronze-fundo);
  }

  .botao--inverso {
    --botao-fundo: var(--cor-marfim);
    --botao-texto: var(--cor-grafite);
    --botao-borda: var(--cor-marfim);
  }

  .botao--inverso:hover {
    --botao-fundo: #ffffff;
    --botao-borda: #ffffff;
    color: var(--cor-grafite);
  }

  .botao--fantasma-inverso {
    --botao-fundo: transparent;
    --botao-texto: var(--cor-marfim);
    --botao-borda: var(--traco-inverso-forte);
  }

  .botao--fantasma-inverso:hover {
    --botao-fundo: transparent;
    --botao-borda: var(--cor-bronze-claro);
    color: var(--cor-bronze-claro);
  }

  .botao[disabled],
  .botao[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .botao--bloco {
    inline-size: 100%;
  }

  /* --- Link com seta ------------------------------------------------------ */
  .link-seta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--passo--1);
    font-weight: var(--peso-medio);
    text-decoration: none;
    color: var(--txt-forte);
    border-block-end: 1px solid var(--traco-bronze);
    padding-block-end: 0.2rem;
  }

  .link-seta:hover {
    color: var(--cor-bronze-fundo);
    border-block-end-color: currentColor;
  }

  .link-seta svg {
    inline-size: 0.8em;
    block-size: 0.8em;
    transition: transform var(--dur-media) var(--ease-saida);
  }

  .link-seta:hover svg {
    transform: translate(2px, -2px);
  }

  /* --- Cabeçalho de seção ------------------------------------------------- */
  .cabecalho-secao__titulo {
    margin-block-start: var(--esp-md);
    max-width: 22ch;
  }

  .cabecalho-secao__texto {
    margin-block-start: var(--esp-md);
    max-width: 46ch;
    color: var(--txt-suave);
    font-size: var(--passo-0);
  }

  /* --- Texto de destaque -------------------------------------------------- */
  .texto-guia {
    font-size: var(--passo-1);
    line-height: var(--altura-media);
    color: var(--txt-medio);
    max-width: 34ch;
  }

  /* --- Cabeçalho fixo ----------------------------------------------------- */
  .cabecalho {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    background-color: color-mix(in srgb, var(--cor-marfim) 82%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur-media) var(--ease-padrao),
      background-color var(--dur-media) var(--ease-padrao);
  }

  .cabecalho[data-rolado="true"] {
    border-block-end-color: var(--traco);
    background-color: color-mix(in srgb, var(--cor-marfim) 92%, transparent);
  }

  .cabecalho__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-md);
    block-size: var(--altura-cabecalho);
  }

  .cabecalho__marca {
    display: inline-flex;
    align-items: center;
    flex: none;
    /* Alvo de toque confortável, sem alterar o tamanho visual da marca. */
    min-block-size: 2.75rem;
    text-decoration: none;
    border-radius: var(--raio-xs);
  }

  /* --- Ticker: faixa de termos abaixo da barra, rolagem infinita à direita.
     Vive dentro do <header> fixo, então acompanha o topo o tempo todo. Só
     enfeite: marcada aria-hidden, congela sob prefers-reduced-motion. ------ */
  .ticker {
    /* Ancorado ao topo do documento (não à viewport): rola junto com a
       página e sai de cena logo após a dobra. Não acompanha até o fim. */
    position: absolute;
    inset-block-start: var(--altura-cabecalho);
    inset-inline: 0;
    z-index: 40; /* abaixo do cabeçalho (50) e do menu móvel (45) */
    block-size: var(--altura-ticker);
    overflow: hidden;
    display: flex;
    align-items: center;
    border-block: 1px solid color-mix(in srgb, var(--cor-marfim) 12%, transparent);
    background-color: var(--cor-grafite);
    /* Some nas duas pontas, para os termos entrarem e saírem sem corte seco. */
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 6%,
      #000 94%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  }

  .ticker__trilha {
    display: flex;
    flex: none;
    /* duas metades idênticas: o laço volta de -50% a 0 sem emenda visível */
    animation: ticker-desliza 46s linear infinite;
  }

  .ticker__grupo {
    display: flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ticker__grupo > li {
    flex: none;
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 0.7rem + 1.4vw, 2.1rem);
    padding-inline-end: clamp(1.1rem, 0.7rem + 1.4vw, 2.1rem);
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cor-marfim) 82%, transparent);
    white-space: nowrap;
  }

  /* Losango de bronze no lugar do "•", desenhado depois de cada termo. */
  .ticker__grupo > li::after {
    content: "";
    flex: none;
    inline-size: 4px;
    block-size: 4px;
    rotate: 45deg;
    background-color: var(--cor-bronze);
  }

  /* Move para a DIREITA: começa meia-trilha à esquerda e avança até a origem. */
  @keyframes ticker-desliza {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ticker__trilha {
      animation: none;
      transform: translateX(-50%);
    }
  }

  .cabecalho__marca img {
    block-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.85rem);
    inline-size: auto;
  }

  .cabecalho__nav {
    display: none;
  }

  .cabecalho__lista {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.3rem + 1.7vw, 2.1rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cabecalho__link {
    position: relative;
    display: inline-block;
    padding-block: 0.4rem;
    font-size: var(--passo--1);
    font-weight: var(--peso-medio);
    color: var(--txt-medio);
    text-decoration: none;
  }

  .cabecalho__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background-color: var(--cor-bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-media) var(--ease-saida);
  }

  .cabecalho__link:hover,
  .cabecalho__link[aria-current="true"] {
    color: var(--txt-forte);
  }

  .cabecalho__link:hover::after,
  .cabecalho__link[aria-current="true"]::after {
    transform: scaleX(1);
  }

  .cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--esp-xs);
    flex: none;
  }

  .cabecalho__cta {
    display: none;
  }

  /* --- Botão do menu móvel ------------------------------------------------ */
  .cabecalho__alternar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-inline-end: -0.5rem;
    border-radius: var(--raio-sm);
    color: var(--txt-forte);
  }

  .cabecalho__alternar-traco {
    position: relative;
    display: block;
    inline-size: 1.15rem;
    block-size: 1px;
    background-color: currentColor;
    transition: background-color var(--dur-rapida) var(--ease-padrao);
  }

  .cabecalho__alternar-traco::before,
  .cabecalho__alternar-traco::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background-color: currentColor;
    transition: transform var(--dur-media) var(--ease-saida);
  }

  .cabecalho__alternar-traco::before {
    transform: translateY(-5px);
  }
  .cabecalho__alternar-traco::after {
    transform: translateY(5px);
  }

  .cabecalho__alternar[aria-expanded="true"] .cabecalho__alternar-traco {
    background-color: transparent;
  }

  .cabecalho__alternar[aria-expanded="true"]
    .cabecalho__alternar-traco::before {
    transform: rotate(45deg);
  }

  .cabecalho__alternar[aria-expanded="true"] .cabecalho__alternar-traco::after {
    transform: rotate(-45deg);
  }

  /* Troca de navegação móvel para desktop.
     Declarada DEPOIS das regras base para vencer por ordem de origem — as
     regras têm a mesma especificidade. O CTA volta a inline-flex (e não block)
     para o rótulo e a seta permanecerem na mesma linha. */
  @media (min-width: 62rem) {
    .cabecalho__nav {
      display: block;
    }

    .cabecalho__cta {
      display: inline-flex;
    }

    .cabecalho__alternar {
      display: none;
    }
  }

  /* --- Menu móvel --------------------------------------------------------- */
  .menu-movel {
    position: fixed;
    inset: var(--altura-cabecalho) 0 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: var(--esp-lg) var(--gutter) var(--esp-xl);
    background-color: var(--cor-marfim);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    /* Ao fechar, a visibilidade só muda no fim da transição. */
    transition: opacity var(--dur-media) var(--ease-padrao),
      visibility 0s linear var(--dur-media);
  }

  /* Ao abrir, a visibilidade muda imediatamente: sem isso o menu ainda está
     `visibility: hidden` quando o JS chama focus(), e o foco não se move. */
  .menu-movel[data-aberto="true"] {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-media) var(--ease-padrao),
      visibility 0s linear 0s;
  }

  .menu-movel__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--traco);
  }

  .menu-movel__item {
    border-block-end: 1px solid var(--traco);
  }

  .menu-movel__link {
    display: flex;
    align-items: baseline;
    gap: var(--esp-sm);
    padding-block: 1.1rem;
    font-size: var(--passo-2);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-titulo);
    text-decoration: none;
    color: var(--txt-forte);
  }

  .menu-movel__link:hover {
    color: var(--cor-bronze-fundo);
  }

  .menu-movel__indice {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    color: var(--txt-suave);
  }

  .menu-movel__rodape {
    margin-block-start: var(--esp-xl);
  }

  @media (min-width: 62rem) {
    .menu-movel {
      display: none;
    }
  }

  /* --- Barra de progresso da leitura -------------------------------------- */
  .progresso {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 60;
    block-size: 2px;
    inline-size: 100%;
    transform: scaleX(var(--progresso, 0));
    transform-origin: left;
    background-color: var(--cor-bronze);
    pointer-events: none;
  }

  /* --- Lista de definições numeradas -------------------------------------- */
  .lista-numerada {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--traco);
  }

  .lista-numerada__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--esp-sm) var(--esp-md);
    padding-block: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    border-block-end: 1px solid var(--traco);
  }

  @media (min-width: 48rem) {
    .lista-numerada__item {
      grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr);
      gap: var(--esp-lg);
      align-items: start;
    }
  }

  .lista-numerada__indice {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: 0.1em;
    color: var(--cor-bronze-fundo);
    padding-block-start: 0.45em;
  }

  .lista-numerada__titulo {
    font-size: var(--passo-1);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-titulo);
  }

  .lista-numerada__texto {
    color: var(--txt-suave);
    max-width: 58ch;
  }

  /* --- Campos de formulário ----------------------------------------------- */
  .campo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2xs);
  }

  .campo__rotulo {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--passo--1);
    font-weight: var(--peso-medio);
    color: var(--txt-forte);
  }

  .campo__opcional {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-normal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-suave);
  }

  .campo__controle {
    inline-size: 100%;
    padding: 0.85rem 1rem;
    min-block-size: 3rem;
    background-color: var(--sup-elevada);
    color: var(--txt-forte);
    border: 1px solid var(--traco-forte);
    border-radius: var(--raio-sm);
    font-size: var(--passo-0);
    line-height: 1.5;
    transition: border-color var(--dur-rapida) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao);
  }

  .campo__controle::placeholder {
    color: var(--txt-suave);
    opacity: 0.75;
  }

  .campo__controle:hover {
    border-color: var(--cor-bronze);
  }

  .campo__controle:focus-visible {
    border-color: var(--cor-bronze-fundo);
    background-color: #ffffff;
  }

  textarea.campo__controle {
    min-block-size: 8.5rem;
    resize: vertical;
  }

  select.campo__controle {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23626761' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.7rem;
    padding-inline-end: 2.5rem;
    cursor: pointer;
  }

  .campo[data-invalido="true"] .campo__controle {
    border-color: var(--cor-erro);
    background-color: var(--cor-erro-fundo);
  }

  .campo__erro {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--passo--1);
    color: var(--cor-erro);
  }

  .campo[data-invalido="true"] .campo__erro {
    display: flex;
  }

  /* --- Caixa de seleção --------------------------------------------------- */
  .caixa {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--esp-xs);
    align-items: start;
    /* O rótulo inteiro é o alvo; a folga garante o mínimo de 24px (WCAG 2.5.8). */
    padding-block: 0.35rem;
    cursor: pointer;
  }

  .caixa__entrada {
    appearance: none;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.22em;
    background-color: var(--sup-elevada);
    border: 1px solid var(--traco-forte);
    border-radius: var(--raio-xs);
    cursor: pointer;
    flex: none;
    transition: background-color var(--dur-rapida) var(--ease-padrao),
      border-color var(--dur-rapida) var(--ease-padrao);
  }

  .caixa__entrada:hover {
    border-color: var(--cor-bronze);
  }

  .caixa__entrada:checked {
    background-color: var(--cor-grafite);
    border-color: var(--cor-grafite);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F1EEE8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem;
  }

  .caixa__texto {
    font-size: var(--passo--1);
    line-height: var(--altura-media);
    color: var(--txt-suave);
  }

  .campo[data-invalido="true"] .caixa__entrada {
    border-color: var(--cor-erro);
  }

  /* --- Mensagem de retorno do formulário ---------------------------------- */
  .retorno {
    display: none;
    gap: var(--esp-xs);
    padding: var(--esp-md);
    border: 1px solid var(--traco-forte);
    border-radius: var(--raio-sm);
    font-size: var(--passo--1);
    line-height: var(--altura-media);
  }

  .retorno[data-estado] {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .retorno[data-estado="erro"] {
    border-color: var(--cor-erro);
    background-color: var(--cor-erro-fundo);
    color: var(--cor-erro);
  }

  .retorno[data-estado="ok"] {
    border-color: var(--cor-ok);
    background-color: var(--cor-ok-fundo);
    color: var(--cor-ok);
  }

  .retorno[data-estado="aviso"] {
    border-color: var(--cor-aviso);
    background-color: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
  }

  .retorno__titulo {
    font-weight: var(--peso-semi);
    margin-block-end: 0.25rem;
  }

  .retorno__icone {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    margin-block-start: 0.15em;
    flex: none;
  }

  .retorno__acoes {
    margin-block-start: var(--esp-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-xs);
  }

  /* --- Indicador de carregamento ------------------------------------------ */
  .girando {
    inline-size: 1rem;
    block-size: 1rem;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: girar 700ms linear infinite;
  }

  @keyframes girar {
    to {
      transform: rotate(360deg);
    }
  }

  /* ==========================================================================
     MENDIA — assistente virtual (botão flutuante + painel de conversa)

     Tudo em tokens já existentes. O painel usa .escopo-escuro, o mesmo
     mecanismo da seção institucional: os papéis de cor se invertem e o
     contraste continua verificado, sem cor nova no sistema.

     Empilhamento: 70 — acima do cabeçalho (50) e da barra de progresso (60),
     abaixo do link de pular (100). Some quando o menu móvel está aberto.
  ========================================================================== */
  .mendia {
    position: fixed;
    inset-block-end: calc(
      clamp(1rem, 2.4vw, 1.75rem) + env(safe-area-inset-bottom, 0px)
    );
    inset-inline-end: calc(
      clamp(1rem, 2.4vw, 1.75rem) + env(safe-area-inset-right, 0px)
    );
    z-index: 70;
    /* o container não intercepta cliques; só os filhos */
    pointer-events: none;
  }

  .mendia > * {
    pointer-events: auto;
  }

  /* O menu móvel (z-index 45) cobre a tela: o gatilho sai de cena. */
  .sem-rolagem .mendia {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-rapida) var(--ease-padrao),
      visibility 0s linear var(--dur-rapida);
  }

  /* --- Gatilho ------------------------------------------------------------- */
  .mendia__gatilho {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem 0.7rem 0.75rem;
    min-block-size: 3rem;
    background-color: var(--cor-grafite);
    color: var(--cor-marfim);
    border: 1px solid var(--cor-grafite);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-media);
    cursor: pointer;
    transition: transform var(--dur-media) var(--ease-saida),
      border-color var(--dur-media) var(--ease-padrao),
      box-shadow var(--dur-media) var(--ease-padrao);
  }

  .mendia__gatilho-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    flex: none;
    border-radius: var(--raio-xs);
    background-color: rgba(var(--luz-champagne-rgb), 0.14);
    color: var(--cor-bronze-claro);
  }

  .mendia__gatilho-icone {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    transition: rotate var(--dur-lenta) var(--ease-saida);
  }

  .mendia__gatilho-texto {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    line-height: 1;
  }

  /* Auréola de repouso: um pulso lento e discreto, para o botão existir sem
     pedir atenção. Congela sob prefers-reduced-motion (bloco no fim). */
  .mendia__gatilho::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    animation: mendia-respira 5.5s var(--ease-padrao) infinite;
  }

  @keyframes mendia-respira {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(var(--luz-champagne-rgb), 0);
    }
    45% {
      box-shadow: 0 0 0 6px rgba(var(--luz-champagne-rgb), 0.14);
    }
    70% {
      box-shadow: 0 0 0 11px rgba(var(--luz-champagne-rgb), 0);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .mendia__gatilho:hover {
      transform: translateY(-2px) scale(1.025);
      border-color: var(--traco-bronze);
      box-shadow: var(--sombra-media),
        0 0 22px -4px rgba(var(--luz-champagne-rgb), 0.5);
    }
    .mendia__gatilho:hover .mendia__gatilho-icone {
      rotate: 90deg;
    }
    /* enquanto o cursor está no botão, o pulso de repouso sai de cena */
    .mendia__gatilho:hover::after {
      animation: none;
    }
  }

  .mendia[data-aberto="true"] .mendia__gatilho::after {
    animation: none;
  }

  /* --- Painel --------------------------------------------------------------- */
  .mendia__painel {
    position: absolute;
    inset-block-end: calc(100% + 0.85rem);
    inset-inline-end: 0;

    display: flex;
    flex-direction: column;
    inline-size: 25rem;
    max-inline-size: calc(100vw - 2rem);
    max-block-size: min(34rem, calc(100dvh - 8rem));

    background-color: color-mix(in srgb, var(--cor-grafite) 92%, transparent);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    border: 1px solid var(--traco-inverso);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-media),
      0 0 34px -10px rgba(var(--luz-champagne-rgb), 0.22);
    overflow: hidden;

    opacity: 0;
    translate: 0 14px;
    scale: 0.97;
    transform-origin: bottom right;
    transition: opacity var(--dur-media) var(--ease-saida),
      translate var(--dur-media) var(--ease-saida),
      scale var(--dur-media) var(--ease-saida);
  }

  .mendia[data-aberto="true"] .mendia__painel {
    opacity: 1;
    translate: none;
    scale: 1;
  }

  /* --- Cabeçalho do painel --------------------------------------------------- */
  .mendia__cabecalho {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: var(--esp-sm) var(--esp-sm) 0.75rem;
    border-block-end: 1px solid var(--traco-inverso);
  }

  .mendia__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    flex: none;
    border-radius: var(--raio-sm);
    background-color: rgba(var(--luz-champagne-rgb), 0.16);
    border: 1px solid var(--traco-bronze);
    color: var(--cor-bronze-claro);
  }

  .mendia__avatar-icone {
    inline-size: 1.3rem;
    block-size: 1.3rem;
  }

  .mendia__identidade {
    min-inline-size: 0;
  }

  .mendia__nome {
    font-size: var(--passo-0);
    font-weight: var(--peso-semi);
    line-height: 1.2;
    letter-spacing: var(--tracking-titulo);
    color: var(--txt-inverso-forte);
  }

  .mendia__subtitulo {
    margin-block-start: 0.15rem;
    font-size: var(--passo--2);
    line-height: 1.3;
    color: var(--txt-inverso-medio);
  }

  .mendia__acoes {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .mendia__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--raio-xs);
    color: var(--txt-inverso-medio);
    cursor: pointer;
    transition: color var(--dur-rapida) var(--ease-padrao),
      border-color var(--dur-rapida) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao);
  }

  .mendia__acao svg {
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }

  .mendia__acao:hover {
    color: var(--txt-inverso-forte);
    border-color: var(--traco-inverso-forte);
    background-color: rgba(241, 238, 232, 0.06);
  }

  /* O status ocupa a linha inteira, abaixo dos três primeiros itens. */
  .mendia__status {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: 0.06em;
    color: var(--txt-inverso-suave);
  }

  .mendia__status-ponto {
    inline-size: 0.4rem;
    block-size: 0.4rem;
    flex: none;
    border-radius: 50%;
    background-color: currentColor;
  }

  /* Enquanto não há IA, o ponto é bronze: sinaliza "em preparo", não "no ar". */
  .mendia__status[data-estado="previa"] {
    color: var(--cor-bronze-claro);
  }

  .mendia__status[data-estado="online"] {
    color: #7fa98c;
  }

  .mendia__status[data-estado="online"] .mendia__status-ponto {
    box-shadow: 0 0 0 3px rgba(127, 169, 140, 0.18);
  }

  /* --- Conversa -------------------------------------------------------------- */
  .mendia__conversa {
    flex: 1 1 auto;
    min-block-size: 8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--esp-sm);
    padding: var(--esp-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--traco-inverso-forte) transparent;
  }

  .mendia__msg {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-inline-size: 88%;
    /* entrada curta; o CSS é dono do tempo */
    animation: mendia-entra var(--dur-media) var(--ease-saida) both;
  }

  @keyframes mendia-entra {
    from {
      opacity: 0;
      translate: 0 8px;
    }
    to {
      opacity: 1;
      translate: none;
    }
  }

  .mendia__msg[data-papel="usuario"] {
    align-self: flex-end;
    align-items: flex-end;
  }

  .mendia__balao {
    padding: 0.7rem 0.9rem;
    border-radius: var(--raio-sm);
    font-size: var(--passo--1);
    line-height: var(--altura-media);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .mendia__msg[data-papel="assistente"] .mendia__balao {
    background-color: var(--sup-escura-elevada);
    border: 1px solid var(--traco-inverso);
    border-inline-start: 2px solid var(--traco-bronze);
    color: var(--txt-inverso-forte);
  }

  .mendia__msg[data-papel="usuario"] .mendia__balao {
    background-color: var(--cor-marfim);
    color: var(--cor-grafite);
  }

  .mendia__texto {
    display: block;
  }

  .mendia__acao-cartao {
    display: grid;
    gap: 0.55rem;
    margin-block-start: 0.85rem;
    padding-block-start: 0.8rem;
    border-block-start: 1px solid var(--traco-inverso);
  }

  .mendia__acao-titulo {
    margin: 0;
    color: var(--txt-inverso-medio);
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: 0.03em;
  }

  .mendia__resumo {
    inline-size: 100%;
    min-block-size: 8.2rem;
    padding: 0.65rem 0.7rem;
    resize: vertical;
    border: 1px solid var(--traco-inverso-forte);
    border-radius: var(--raio-sm);
    color: var(--txt-inverso-forte);
    background-color: rgba(241, 238, 232, 0.06);
    font: inherit;
    line-height: var(--altura-media);
  }

  .mendia__resumo[readonly] {
    cursor: default;
    color: var(--txt-inverso-medio);
    background-color: rgba(241, 238, 232, 0.035);
  }

  .mendia__resumo:focus-visible {
    outline: 2px solid var(--cor-bronze-claro);
    outline-offset: 2px;
  }

  .mendia__acao-controles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .mendia__acao-editar {
    inline-size: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--traco-inverso-forte);
    border-radius: var(--raio-sm);
    color: var(--txt-inverso-forte);
    background-color: transparent;
    font: inherit;
    font-weight: var(--peso-medio);
    line-height: 1.2;
    cursor: pointer;
  }

  .mendia__acao-editar:hover {
    border-color: var(--traco-bronze);
    background-color: rgba(var(--luz-champagne-rgb), 0.1);
  }

  .mendia__acao-editar:focus-visible {
    outline: 2px solid var(--cor-bronze-claro);
    outline-offset: 2px;
  }

  .mendia__acao {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--traco-bronze);
    border-radius: var(--raio-sm);
    color: var(--cor-grafite);
    background-color: var(--cor-bronze-claro);
    font-family: var(--fonte-sans);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    transition: background-color var(--dur-rapida) var(--ease-padrao),
      border-color var(--dur-rapida) var(--ease-padrao),
      translate var(--dur-rapida) var(--ease-padrao);
  }

  .mendia__acao:hover {
    background-color: var(--cor-marfim);
    border-color: var(--cor-bronze-claro);
    translate: 0 -1px;
  }

  .mendia__acao:focus-visible {
    outline: 2px solid var(--cor-bronze-claro);
    outline-offset: 3px;
  }

  .mendia__acao[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* --txt-inverso-suave daria 3,79:1 sobre o painel translúcido — abaixo de
     AA para texto pequeno. --txt-inverso-medio sobe para 6,28:1. */
  .mendia__meta {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: 0.04em;
    color: var(--txt-inverso-medio);
  }

  /* Três pontos da escrita */
  .mendia__balao--pontos {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-block: 0.95rem;
  }

  .mendia__ponto {
    inline-size: 0.32rem;
    block-size: 0.32rem;
    border-radius: 50%;
    background-color: var(--cor-bronze-claro);
    animation: mendia-pontos 1.25s var(--ease-padrao) infinite;
    animation-delay: calc(var(--i, 0) * 160ms);
  }

  @keyframes mendia-pontos {
    0%,
    60%,
    100% {
      opacity: 0.28;
      translate: 0 0;
    }
    30% {
      opacity: 1;
      translate: 0 -3px;
    }
  }

  /* --- Sugestões -------------------------------------------------------------- */
  .mendia__sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 var(--esp-sm) 0.85rem;
  }

  .mendia__sugestao {
    padding: 0.45rem 0.75rem;
    background-color: transparent;
    color: var(--txt-inverso-medio);
    border: 1px solid var(--traco-inverso-forte);
    border-radius: var(--raio-pill);
    font-size: var(--passo--2);
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--dur-rapida) var(--ease-padrao),
      border-color var(--dur-rapida) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao);
  }

  .mendia__sugestao:hover {
    color: var(--txt-inverso-forte);
    border-color: var(--traco-bronze);
    background-color: rgba(var(--luz-champagne-rgb), 0.1);
  }

  /* --- Entrada ----------------------------------------------------------------- */
  .mendia__entrada {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.5rem;
    padding: 0.75rem var(--esp-sm) var(--esp-sm);
    border-block-start: 1px solid var(--traco-inverso);
  }

  .mendia__campo {
    inline-size: 100%;
    min-block-size: 2.75rem;
    max-block-size: 7.5rem;
    padding: 0.7rem 0.85rem;
    background-color: rgba(241, 238, 232, 0.05);
    color: var(--txt-inverso-forte);
    border: 1px solid var(--traco-inverso-forte);
    border-radius: var(--raio-sm);
    font-family: var(--fonte-sans);
    font-size: var(--passo--1);
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
    transition: border-color var(--dur-rapida) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao);
  }

  .mendia__campo::placeholder {
    color: var(--txt-inverso-medio);
  }

  .mendia__campo:hover {
    border-color: var(--traco-bronze);
  }

  .mendia__campo:focus-visible {
    border-color: var(--cor-bronze-claro);
    background-color: rgba(241, 238, 232, 0.08);
  }

  .mendia__enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    background-color: var(--cor-marfim);
    color: var(--cor-grafite);
    border: 1px solid var(--cor-marfim);
    border-radius: var(--raio-sm);
    cursor: pointer;
    transition: opacity var(--dur-rapida) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao),
      transform var(--dur-rapida) var(--ease-padrao);
  }

  .mendia__enviar svg {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .mendia__enviar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .mendia__enviar:not(:disabled):hover {
    background-color: var(--cor-bronze-claro);
    border-color: var(--cor-bronze-claro);
    transform: translateY(-1px);
  }

  .mendia__dica {
    grid-column: 1 / -1;
    margin-block-start: 0.15rem;
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: 0.03em;
    color: var(--txt-inverso-medio);
  }

  .mendia__dica kbd {
    font: inherit;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--traco-inverso);
    border-radius: var(--raio-xs);
  }

  /* --- Celular ------------------------------------------------------------------ */
  @media (max-width: 30rem) {
    /* Ancorado pelas DUAS laterais em vez de largura por 100vw: com o zoom
       de 1.1 no <html>, 100vw não bate com a caixa real e o painel estourava
       a borda direita. Assim a largura é derivada, não calculada. */
    .mendia__painel {
      position: fixed;
      inset-inline: calc(
          clamp(1rem, 2.4vw, 1.75rem) + env(safe-area-inset-left, 0px)
        )
        calc(clamp(1rem, 2.4vw, 1.75rem) + env(safe-area-inset-right, 0px));
      inset-block-end: calc(
        clamp(1rem, 2.4vw, 1.75rem) + env(safe-area-inset-bottom, 0px) +
          var(--mendia-gatilho-h, 3rem) + 0.85rem
      );
      inline-size: auto;
      max-inline-size: none;
      max-block-size: min(30rem, calc(100dvh - 9rem));
    }
    .mendia__dica {
      display: none; /* com teclado virtual, a dica de Enter não ajuda */
    }
  }

  /* --- Movimento reduzido -------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mendia__gatilho::after,
    .mendia__ponto,
    .mendia__msg {
      animation: none;
    }
    .mendia__painel {
      transition: opacity 0.01ms linear;
      translate: none;
      scale: 1;
    }
  }
}

/* =============================================================================
   06. SEÇÕES
============================================================================= */
@layer secoes {
  /* --- Luz ambiente ------------------------------------------------------- */
  /*
     Mancha de luz difusa, quente e discreta, atrás de todo o conteúdo.

     Camada fixa e contida: `overflow: hidden` + `contain` impedem que o blur
     vaze e gere barra de rolagem. Fica em z-index -1, abaixo do <body>
     (transparente) e de qualquer seção com fundo próprio — por isso só é
     percebida na abertura, onde o fundo marfim fica exposto. O texto nunca
     perde contraste: as seções pintam por cima.

     AJUSTE VISUAL (no seletor .luz-ambiente__nucleo)
       --luz-diametro   tamanho da mancha
       --luz-blur       desfoque; constante durante a animação
       --luz-opacidade  intensidade geral
       --luz-x / --luz-y  centro da mancha dentro da viewport
  */
  .luz-ambiente {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint size;
  }

  /* --------------------------------------------------------------------------
     FORMAS GEOMÉTRICAS DE FUNDO

     Quatro contornos finos — anel, triângulo, quadrado e mira — girando e
     derivando bem devagar no mesmo plano da luz ambiente (z-index -1). Só
     aparecem onde o fundo fica exposto (abertura e faixa de compromissos);
     as demais seções são opacas e as cobrem, como já acontece com a luz.

     Traço em bronze a ~7% e um leve blur: é textura de engenharia, não
     desenho. Puro CSS; congela sob prefers-reduced-motion.
  -------------------------------------------------------------------------- */
  .formas {
    position: fixed;
    inset: 0;
    z-index: 1; /* acima do fundo das seções (que são position:relative), abaixo
                    do conteúdo — os containers ficam em z-index 1 e vêm depois
                    no DOM, então pintam por cima; o hero sobe para z-index 2. */
    overflow: hidden;
    pointer-events: none;
    /* sem `paint`: o mix-blend-mode dos halos precisa alcançar o fundo das
       seções, que estão atrás desta camada */
    contain: layout size;
    color: var(--cor-bronze);
  }

  .formas__svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    filter: blur(0.5px);
  }

  .forma {
    opacity: 0.06;
    transform-box: fill-box;
    transform-origin: center;
    /* Deslocamento dirigido pelo scroll (JS escreve --fx/--fy/--fr). Fica em
       translate/rotate individuais para compor com o transform dos keyframes,
       sem se sobrescreverem. */
    translate: calc(var(--fx, 0) * 1px) calc(var(--fy, 0) * 1px);
    rotate: calc(var(--fr, 0) * 1deg);
    will-change: transform, translate, rotate;
  }

  .forma--anel {
    animation: forma-anel 74s linear infinite;
  }
  .forma--tri {
    animation: forma-tri 92s linear infinite;
  }
  .forma--quad {
    opacity: 0.055;
    animation: forma-quad 82s linear infinite;
  }
  .forma--mira {
    opacity: 0.05;
    animation: forma-mira 48s ease-in-out infinite;
  }
  .forma--poli {
    animation: forma-poli 100s linear infinite;
  }
  .forma--desliza {
    opacity: 0.055;
    animation: forma-desliza 56s ease-in-out infinite;
  }

  @keyframes forma-anel {
    0% {
      transform: rotate(0) scale(1);
    }
    50% {
      transform: rotate(180deg) scale(1.05);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }
  @keyframes forma-tri {
    0% {
      transform: rotate(0) translate(0, 0);
    }
    50% {
      transform: rotate(-180deg) translate(10px, -16px);
    }
    100% {
      transform: rotate(-360deg) translate(0, 0);
    }
  }
  @keyframes forma-quad {
    0% {
      transform: rotate(0) translate(0, 0);
    }
    50% {
      transform: rotate(200deg) translate(-14px, 12px);
    }
    100% {
      transform: rotate(360deg) translate(0, 0);
    }
  }
  @keyframes forma-mira {
    0% {
      transform: translate(-16px, -8px) rotate(0);
    }
    50% {
      transform: translate(16px, 10px) rotate(8deg);
    }
    100% {
      transform: translate(-16px, -8px) rotate(0);
    }
  }

  @keyframes forma-poli {
    0% {
      transform: rotate(0) scale(1);
    }
    50% {
      transform: rotate(150deg) scale(1.06);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }
  @keyframes forma-desliza {
    0% {
      transform: translateX(-24px) rotate(0);
    }
    50% {
      transform: translateX(24px) rotate(-6deg);
    }
    100% {
      transform: translateX(-24px) rotate(0);
    }
  }

  /* As mesmas formas dentro de seções específicas — atrás do conteúdo
     (container em z-index 1), recortadas pela própria seção. Assim o motivo
     geométrico reaparece ao longo da página, não só na abertura. */
  .secao__formas {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--cor-bronze);
  }

  .secao__formas svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    filter: blur(0.5px);
  }

  @media (prefers-reduced-motion: reduce) {
    .forma {
      animation: none;
      translate: none;
      rotate: none;
      will-change: auto;
    }
  }

  .luz-ambiente__nucleo {
    --luz-diametro: 580px;
    --luz-blur: 115px;
    --luz-opacidade: 0.12;
    --luz-x: 75%;
    --luz-y: 24%;

    position: absolute;
    inset-block-start: var(--luz-y);
    inset-inline-start: var(--luz-x);
    inline-size: var(--luz-diametro);
    block-size: var(--luz-diametro);
    margin-block-start: calc(var(--luz-diametro) / -2);
    margin-inline-start: calc(var(--luz-diametro) / -2);

    border-radius: 50%;
    /* Centro suavemente aceso, bordas totalmente transparentes: sem contorno. */
    background: radial-gradient(
      circle at center,
      rgba(var(--luz-champagne-rgb), 0.9) 0%,
      rgba(var(--luz-champagne-rgb), 0.5) 34%,
      rgba(var(--luz-champagne-rgb), 0.16) 60%,
      rgba(var(--luz-champagne-rgb), 0) 80%
    );
    opacity: var(--luz-opacidade);
    /* O blur fica no elemento, não na animação: permanece constante. */
    filter: blur(var(--luz-blur));

    will-change: transform;
    animation: luz-flutuar 30s ease-in-out infinite;
  }

  /* ----------------------------------------------------------------------------
     HALOS QUE SEGUEM O CURSOR
     Duas manchas que perseguem o ponteiro com velocidades diferentes: a
     próxima responde rápido, a distante fica para trás. A diferença cria
     profundidade sem nenhum elemento a mais na tela.

     Ficam escondidos por padrão. Só aparecem sob html.js.movimento e ponteiro
     fino — sem JS, no toque ou com movimento reduzido, a luz ambiente estática
     continua sendo exatamente o que é hoje.

     O JS escreve --halo-x / --halo-y em pixels de viewport; o resto é CSS.
  ---------------------------------------------------------------------------- */
  .luz-ambiente__halo {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    border-radius: 50%;
    pointer-events: none;
    /* Centraliza a mancha na coordenada recebida. */
    margin-block-start: calc(var(--halo-d) / -2);
    margin-inline-start: calc(var(--halo-d) / -2);
    inline-size: var(--halo-d);
    block-size: var(--halo-d);
    background: radial-gradient(
      circle at center,
      rgba(var(--luz-feixe-rgb), 1) 0%,
      rgba(var(--luz-feixe-rgb), 0.7) 28%,
      rgba(var(--luz-feixe-rgb), 0.28) 54%,
      rgba(var(--luz-feixe-rgb), 0) 78%
    );
    /* screen só clareia — sobre o fundo claro vira brilho de verdade e o
       contraste do texto (escuro sobre claro) melhora em vez de piorar. */
    mix-blend-mode: screen;
    filter: blur(var(--halo-blur));
    opacity: 0;
    translate: calc(var(--halo-x, 0) * 1px) calc(var(--halo-y, 0) * 1px);
    /* Só a opacidade transiciona; a posição é escrita quadro a quadro. */
    transition: opacity 900ms var(--ease-saida);
  }

  /* Vagalumes. Escondidos por padrão: sem JS ou com movimento reduzido a
     página fica exatamente como está hoje, sem a camada. */
  .vagalumes {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
  }

  .js.movimento .vagalumes {
    display: block;
  }

  /* Abaixo do .container da seção (z-index 1), nunca por cima do texto. */
  .institucional__vagalumes {
    z-index: 0;
  }

  /* Canal direto do WhatsApp na seção de contato. */
  .contato__whatsapp {
    margin-block-start: var(--esp-lg);
    inline-size: 100%;
  }

  .contato__whatsapp-nota {
    margin-block-start: var(--esp-2xs);
    color: var(--txt-suave);
    font-size: var(--passo--2);
    letter-spacing: 0.04em;
    text-align: center;
  }

  .luz-ambiente__halo--proximo {
    --halo-d: 420px;
    --halo-blur: 62px;
    --halo-op: 0.42;
  }

  .luz-ambiente__halo--distante {
    --halo-d: 720px;
    --halo-blur: 120px;
    --halo-op: 0.26;
  }

  /* Aceso só quando o ponteiro está na página. */
  .luz-ambiente__halo[data-aceso="true"] {
    opacity: var(--halo-op);
  }

  @media (hover: hover) and (pointer: fine) {
    .js.movimento .luz-ambiente__halo {
      display: block;
    }
  }

  @media (max-width: 47.99rem) {
    .luz-ambiente__halo--proximo {
      --halo-d: 260px;
      --halo-blur: 42px;
    }
    .luz-ambiente__halo--distante {
      --halo-d: 420px;
      --halo-blur: 78px;
    }
  }

  /* Percurso curto e orgânico. Só `transform` — deslocamento ~35-55 px e
     escala até +5,5%. Retorna à origem em repouso, sem emenda perceptível. */
  @keyframes luz-flutuar {
    0% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    24% {
      transform: translate3d(44px, -28px, 0) scale(1.03);
    }
    48% {
      transform: translate3d(22px, 40px, 0) scale(1.055);
    }
    72% {
      transform: translate3d(-38px, 14px, 0) scale(1.02);
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  /* Celular: mancha menor, mais fraca e com percurso mais curto. */
  @media (max-width: 47.99rem) {
    .luz-ambiente__nucleo {
      --luz-diametro: 340px;
      --luz-blur: 72px;
      --luz-opacidade: 0.09;
      --luz-x: 78%;
      --luz-y: 26%;
      animation-name: luz-flutuar-movel;
      animation-duration: 34s;
    }

    @keyframes luz-flutuar-movel {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }
      33% {
        transform: translate3d(20px, -16px, 0) scale(1.025);
      }
      66% {
        transform: translate3d(-14px, 18px, 0) scale(1.04);
      }
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
    }
  }

  /* Movimento reduzido: luz estática, sem camada de composição pendente. */
  @media (prefers-reduced-motion: reduce) {
    .luz-ambiente__nucleo {
      animation: none;
      will-change: auto;
      transform: none;
    }
  }

  /* --- Hero ---------------------------------------------------------------- */
  /*
     AJUSTE RÁPIDO DA ANIMAÇÃO
     --monograma-max → tamanho máximo do monograma (valores por breakpoint
                       mais abaixo).
     A duração da rotação NÃO é definida aqui: é a opção `curso` passada ao
     componente em main.js, em fração da altura da viewport. Ver ali.

     A rolagem é inteiramente nativa: o hero tem altura normal, nada é fixado
     na tela e a página desce enquanto o monograma gira.
  */
  .hero {
    --monograma-max: 38rem;

    position: relative;
    isolation: isolate;
    /* Acima da camada .formas (z-index 1): o hero é um contexto de empilhamento
       próprio e seu conteúdo não pode ser coberto pelas formas/halos. O fundo
       do hero é transparente, então a camada ainda aparece atrás dele. */
    z-index: 2;
  }

  .hero__fixo {
    min-block-size: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(
        var(--altura-cabecalho) + var(--altura-ticker) +
          clamp(1.5rem, 0.8rem + 3vw, 3.5rem)
      )
      clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  }

  .hero__grade {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 3rem);
    align-items: center;
    inline-size: 100%;
  }

  /* Duas colunas já a partir de 48rem: empilhado, o conjunto texto + monograma
     não cabe na altura de uma viewport sticky em tablets. */
  @media (min-width: 48rem) {
    .hero__grade {
      /* Texto à esquerda, monograma à direita, colunas equilibradas. O título
         ainda pesa mais na página pela tipografia; a escultura ocupa a coluna
         inteira, limitada por --monograma-max. */
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(1.5rem, 0.5rem + 4.5vw, 5rem);
    }
  }

  /* Malha técnica discreta — referência de precisão, não decoração. */
  .hero__malha {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(
        to right,
        rgba(36, 40, 39, 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgba(36, 40, 39, 0.05) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    background-position: center;
    mask-image: radial-gradient(
      ellipse 78% 68% at 50% 38%,
      #000 30%,
      transparent 100%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 78% 68% at 50% 38%,
      #000 30%,
      transparent 100%
    );
    pointer-events: none;
  }

  .hero__conteudo {
    max-width: 34rem;
  }

  @media (min-width: 48rem) {
    .hero__conteudo {
      max-width: none;
    }
  }

  /* --- Monograma 3D --------------------------------------------------------- */
  .hero__visual {
    display: flex;
    justify-content: center;
  }

  @media (min-width: 48rem) {
    .hero__visual {
      justify-content: flex-end;
    }
  }

  /*
     O quadro reserva o espaço antes de qualquer imagem carregar — a proporção
     fixa impede que o layout salte quando o primeiro frame chega.
  */
  .hero__quadro {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--monograma-max);
    aspect-ratio: 4 / 3;
  }

  .hero__estatico,
  .hero__canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* Com movimento permitido, o canvas assume e a imagem sai de cena. */
  .js.movimento .hero__estatico {
    display: none;
  }

  .hero__canvas {
    opacity: 0;
    transition: opacity 520ms var(--ease-saida);
  }

  .hero__canvas[data-pronto="true"] {
    opacity: 1;
  }

  /* --------------------------------------------------------------------------
     RESPIRAÇÃO DO MONOGRAMA — flutuação lenta e contínua, tipo slow breathing.
     Sobe e expande um mínimo no "inspirar", desce e contrai no "expirar".

     Alvo é o .hero__quadro (a caixa de proporção), não o canvas: assim o
     sequenciador de scroll continua dono do conteúdo do canvas, e a
     animação compõe com o scale de entrada do .hero__visual e o leve
     deslocamento do .hero__grade pelo cursor — cada um numa propriedade
     diferente (translate / scale / rotate individuais), sem se sobrescrever.

     Amplitudes pequenas de propósito: ~1,3% de deslocamento e 1,8% de escala
     num elemento de ~600 px. Deve ler-se como algo vivo, não como movimento.
  -------------------------------------------------------------------------- */
  .js.movimento .hero__quadro {
    --respira-y: 13px;
    --respira-escala: 0.03;
    --respira-giro: 0.65deg;
    will-change: transform;
    animation: monograma-respira 7.5s ease-in-out infinite;
  }

  @keyframes monograma-respira {
    0%,
    100% {
      translate: 0 calc(var(--respira-y) * 0.5);
      scale: calc(1 - var(--respira-escala) * 0.35);
      rotate: calc(var(--respira-giro) * -0.3);
    }
    50% {
      translate: 0 calc(var(--respira-y) * -1);
      scale: calc(1 + var(--respira-escala));
      rotate: var(--respira-giro);
    }
  }

  /* Celular: monograma menor, amplitude ainda menor e ciclo um pouco mais
     lento, para não parecer tremor. */
  @media (max-width: 47.99rem) {
    .js.movimento .hero__quadro {
      --respira-y: 9px;
      --respira-escala: 0.02;
      --respira-giro: 0.45deg;
      animation-duration: 8.5s;
    }
  }

  /* Movimento reduzido: monograma imóvel, sem camada de composição pendente.
     (O bloco global já zera a duração; aqui limpamos o estado deixado.) */
  @media (prefers-reduced-motion: reduce) {
    .js.movimento .hero__quadro {
      animation: none;
      will-change: auto;
      translate: none;
      scale: none;
      rotate: none;
    }
  }

  /* Se o carregamento falhar, o canvas fica de fora e a imagem estática volta:
     a seção nunca fica vazia. */
  .hero__visual[data-falhou="true"] .hero__canvas {
    display: none;
  }

  .hero__visual[data-falhou="true"] .hero__estatico {
    display: block;
  }

  /* As regras responsivas do hero ficam mais abaixo, depois das regras base de
     título, texto e ações — caso contrário perderiam por ordem de origem. */

  /* Escala própria do hero: o título agora divide a largura com o monograma,
     então é menor que o --passo-6 usado quando ocupava a linha inteira. O
     objetivo é caber com o CTA acima da dobra. */
  .hero__titulo {
    margin-block-start: var(--esp-md);
    font-size: clamp(2.3rem, 1.5rem + 3.1vw, 3.9rem);
  }

  .hero__titulo em {
    font-style: normal;
    color: var(--cor-bronze-fundo);
  }

  .hero__texto {
    margin-block-start: var(--esp-md);
    max-width: 52ch;
    font-size: var(--passo-1);
    line-height: var(--altura-media);
    color: var(--txt-medio);
  }

  .hero__acoes {
    margin-block-start: var(--esp-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-xs);
  }

  .hero__acoes .botao {
    flex: 1 1 15rem;
  }

  @media (min-width: 34rem) {
    .hero__acoes .botao {
      flex: 0 0 auto;
    }
  }

  /* --- Hero: ajustes responsivos -------------------------------------------
     Declarados aqui, depois das regras base acima, para vencerem por ordem de
     origem (mesma especificidade).
  -------------------------------------------------------------------------- */

  /* Tablet: duas colunas, cada uma estreita. O título encolhe para não virar
     um bloco de seis linhas numa coluna de ~350px. */
  @media (min-width: 48rem) and (max-width: 61.99rem) {
    .hero {
      --monograma-max: 25rem;
    }
    .hero__titulo {
      font-size: clamp(1.95rem, 0.4rem + 3.1vw, 2.6rem);
    }
    .hero__texto {
      font-size: var(--passo-0);
      margin-block-start: var(--esp-sm);
    }
    .hero__acoes {
      margin-block-start: var(--esp-md);
    }
  }

  /* Celular: composição vertical, texto em cima e monograma abaixo. */
  @media (max-width: 47.99rem) {
    .hero {
      --monograma-max: 20rem;
    }
    .hero__fixo {
      min-block-size: auto;
      padding-block: calc(var(--altura-cabecalho) + var(--altura-ticker) + 2rem)
        3rem;
    }
    .hero__grade {
      gap: clamp(1.75rem, 1rem + 3vw, 2.5rem);
    }
  }

  /* Paisagem em telas baixas: duas colunas aproveitam melhor a largura. */
  @media (max-height: 36rem) and (orientation: landscape) {
    .hero {
      --monograma-max: 14rem;
    }
    .hero__fixo {
      min-block-size: auto;
      padding-block: calc(var(--altura-cabecalho) + var(--altura-ticker) + 1.25rem)
        2rem;
    }
    .hero__grade {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: var(--esp-lg);
      align-items: center;
    }
    .hero__titulo {
      font-size: clamp(1.6rem, 1rem + 2vw, 2.1rem);
    }
    .hero__texto {
      font-size: var(--passo--1);
      margin-block-start: var(--esp-2xs);
    }
  }

  /* --- Compromissos de método ---------------------------------------------- */
  /* Sem números inventados: são promessas de método, não resultados medidos. */
  .compromissos {
    padding-block-end: clamp(3rem, 2rem + 4vw, 5rem);
  }

  .compromissos__lista {
    padding-block-start: var(--esp-lg);
    border-block-start: 1px solid var(--traco);
    display: grid;
    gap: var(--esp-md);
  }

  @media (min-width: 48rem) {
    .compromissos__lista {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gutter);
    }
  }

  .compromissos__item {
    display: grid;
    gap: 0.4rem;
  }

  .compromissos__chave {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-fundo);
  }

  .compromissos__valor {
    font-size: var(--passo-0);
    color: var(--txt-medio);
    max-width: 34ch;
  }

  /* --- Soluções (lista + painel) ------------------------------------------ */
  .solucoes__corpo {
    margin-block-start: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    display: grid;
    gap: var(--esp-lg);
  }

  @media (min-width: 62rem) {
    .solucoes__corpo {
      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
      gap: clamp(2rem, 1rem + 4vw, 4.5rem);
      align-items: start;
    }
  }

  .solucoes__abas {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--traco);
  }

  .solucoes__aba {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--esp-sm);
    inline-size: 100%;
    padding-block: 1.05rem;
    padding-inline: 0;
    text-align: left;
    border-block-end: 1px solid var(--traco);
    color: var(--txt-suave);
    font-size: var(--passo-0);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-titulo);
    transition: color var(--dur-media) var(--ease-padrao),
      padding-inline-start var(--dur-media) var(--ease-saida);
  }

  .solucoes__aba-indice {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: 0.1em;
    color: var(--txt-suave);
    transition: color var(--dur-media) var(--ease-padrao);
  }

  .solucoes__aba-marca {
    inline-size: 1.25rem;
    block-size: 1px;
    background-color: var(--cor-bronze);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-media) var(--ease-saida);
  }

  .solucoes__aba:hover {
    color: var(--txt-forte);
  }

  .solucoes__aba[aria-selected="true"] {
    color: var(--txt-forte);
    padding-inline-start: 0.75rem;
  }

  .solucoes__aba[aria-selected="true"] .solucoes__aba-indice {
    color: var(--cor-bronze-fundo);
  }

  .solucoes__aba[aria-selected="true"] .solucoes__aba-marca {
    transform: scaleX(1);
  }

  .solucoes__painel[hidden] {
    display: none;
  }

  .solucoes__painel {
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    background-color: var(--sup-elevada);
    border: 1px solid var(--traco);
    border-radius: var(--raio-md);
  }

  .solucoes__painel-titulo {
    margin-block-start: var(--esp-sm);
    font-size: var(--passo-3);
  }

  .solucoes__painel-texto {
    margin-block-start: var(--esp-md);
    max-width: 54ch;
    color: var(--txt-medio);
    font-size: var(--passo-1);
    line-height: var(--altura-media);
  }

  .solucoes__entregas {
    margin-block-start: var(--esp-lg);
    padding-block-start: var(--esp-md);
    border-block-start: 1px solid var(--traco);
    display: grid;
    gap: var(--esp-xs);
  }

  .solucoes__entregas-titulo {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-fundo);
    margin-block-end: var(--esp-2xs);
  }

  .solucoes__entrega {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--esp-xs);
    align-items: start;
    font-size: var(--passo--1);
    color: var(--txt-medio);
  }

  .solucoes__entrega svg {
    inline-size: 0.9rem;
    block-size: 0.9rem;
    margin-block-start: 0.35em;
    color: var(--cor-bronze);
    flex: none;
  }

  /* --- Processo ------------------------------------------------------------ */
  .processo__etapas {
    margin-block-start: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    display: grid;
    gap: 0;
    counter-reset: etapa;
  }

  @media (min-width: 55rem) {
    .processo__etapas {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--gutter);
    }
  }

  .processo__etapa {
    position: relative;
    padding-block: var(--esp-lg);
    border-block-start: 1px solid var(--traco);
  }

  @media (min-width: 55rem) {
    .processo__etapa {
      padding-block: var(--esp-md) 0;
      padding-inline-end: var(--esp-sm);
    }
  }

  /* Marcador de etapa sobre a linha superior. */
  .processo__etapa::before {
    content: "";
    position: absolute;
    inset-block-start: -3px;
    inset-inline-start: 0;
    inline-size: 5px;
    block-size: 5px;
    background-color: var(--cor-bronze);
    border-radius: 50%;
  }

  .processo__etapa-indice {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: 0.14em;
    color: var(--cor-bronze-fundo);
  }

  .processo__etapa-titulo {
    margin-block-start: var(--esp-xs);
    font-size: var(--passo-1);
  }

  .processo__etapa-texto {
    margin-block-start: var(--esp-2xs);
    color: var(--txt-suave);
    font-size: var(--passo--1);
    max-width: 40ch;
  }

  /* --- Segmentos ------------------------------------------------------------
     Mural editorial dos setores atendidos.

     A seção tem DOIS estados de chapa, e os dois precisam parecer acabados:

     1. Sem foto (padrão, e o que vai a produção): a chapa é um bloco grafite
        com uma trama de fios diagonais, ecoando a malha do hero. É um estado
        projetado, não um buraco esperando imagem.
     2. Com foto (só em localhost, ver a trava no main.js): a mesma chapa
        recebe a fotografia, monocromática em repouso e colorida na interação.

     O ícone e o nome ficam no rodapé do card, fora da chapa — assim a troca
     entre os dois estados não move nada e o texto nunca disputa contraste
     com a fotografia.
  --------------------------------------------------------------------------- */
  .segmentos__mural {
    margin-block-start: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 0.55rem + 1.7vw, 1.75rem);
    list-style: none;
    padding: 0;
  }

  @media (min-width: 48rem) {
    .segmentos__mural {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .segmentos__mural {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .segmento {
    position: relative;
    background-color: #f7f5f1;
    border: 1px solid rgba(36, 40, 39, 0.1);
    border-radius: var(--raio-sm);
    padding: clamp(0.5rem, 0.35rem + 0.6vw, 0.75rem);
  }

  /* Luz dourada atrás do card, revelada só na interação (regra no bloco
     @media hover). Fica em z-index negativo — aparece como halo ao redor da
     silhueta, sem lavar o conteúdo. Sem overflow: hidden no .segmento para
     que o brilho vaze pelas bordas; o recorte da foto continua no __chapa. */
  .segmento::before {
    content: "";
    position: absolute;
    inset: -24%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
      circle at center,
      rgba(242, 210, 148, 0.95) 0%,
      rgba(224, 186, 122, 0.55) 34%,
      rgba(214, 176, 116, 0.16) 60%,
      rgba(214, 176, 116, 0) 80%
    );
    filter: blur(30px);
    opacity: 0;
    transition: opacity 420ms var(--ease-saida);
  }

  @keyframes segmento-brilho-pulsa {
    0%,
    100% {
      opacity: 0.92;
    }
    50% {
      opacity: 0.3;
    }
  }

  /* A proporção fixa reserva o espaço antes de qualquer imagem existir: nada
     salta quando o main.js injeta a foto em localhost. */
  .segmento__chapa {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--raio-xs);
    background-color: var(--cor-grafite);
    background-image: repeating-linear-gradient(
      135deg,
      rgba(241, 238, 232, 0.07) 0px,
      rgba(241, 238, 232, 0.07) 1px,
      transparent 1px,
      transparent 9px
    );
  }

  /* Marca do segmento em grande, para a chapa sem foto ter conteúdo próprio
     em vez de parecer um vazio à espera de imagem. É o estado que vai a
     produção enquanto as fotografias licenciadas não chegam. */
  .segmento__marca {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 42%;
    block-size: 42%;
    color: var(--cor-bronze-claro);
    opacity: 0.24;
  }

  .segmentos[data-com-foto="true"] .segmento__marca {
    display: none;
  }

  .segmento__foto {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Monocromático em repouso; a cor é a recompensa da interação. */
    filter: grayscale(1) contrast(1.04);
    transition: filter 380ms var(--ease-saida), scale 520ms var(--ease-saida);
  }

  .segmento__rodape {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: clamp(0.7rem, 0.55rem + 0.5vw, 0.95rem);
    padding-inline: 0.2rem 0;
  }

  .segmento__selo {
    display: inline-flex;
    flex: none;
    color: var(--cor-cinza);
    transition: color 320ms var(--ease-saida);
  }

  .segmento__icone {
    inline-size: 1.7rem;
    block-size: 1.7rem;
  }

  .segmento__nome {
    font-family: var(--fonte-mono);
    font-size: var(--passo-0);
    font-weight: var(--peso-medio);
    letter-spacing: 0.02em;
    color: var(--txt-forte);
    margin: 0;
  }

  /* Telas estreitas: dois cards por linha deixam ~110px para o nome. Nomes
     longos ("Automotivo") encostavam na borda, então ícone e texto encolhem
     junto com o card. */
  @media (max-width: 30rem) {
    .segmento__rodape {
      gap: 0.45rem;
    }

    .segmento__icone {
      inline-size: 1.4rem;
      block-size: 1.4rem;
    }

    .segmento__nome {
      font-size: var(--passo--1);
      letter-spacing: 0;
    }
  }

  /* --- Só no mobile: mural vira CARROSSEL INFINITO com swipe -------------
     O JS envolve a <ul> numa .segmentos__janela (recorta), clona o conjunto
     3× e liga o scroll horizontal nativo. O rAF avança devagar para a
     direita e salta um bloco ao chegar no limite (conteúdo idêntico → sem
     emenda). Toque pausa o avanço por ~1,4 s.

     A luz dourada é a .segmentos__foco: fica fixa no centro da faixa, atrás
     dos cards translúcidos — acende quem passa pelo meio, apaga quem sai. */
  @media (max-width: 47.99rem) {
    #segmentos[data-carrossel] .segmentos__janela {
      position: relative;
      margin-inline: calc(var(--gutter) * -1);
      overflow: hidden;
      padding-block: 4.4rem;
    }

    #segmentos[data-carrossel] .segmentos__foco {
      position: absolute;
      inset-block: 0;
      inset-inline-start: 50%;
      translate: -50% 0;
      inline-size: 82vw;
      max-inline-size: 380px;
      block-size: 108%;
      pointer-events: none;
      background: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        rgba(238, 196, 128, 0.92) 0%,
        rgba(224, 178, 116, 0.46) 38%,
        rgba(210, 164, 106, 0.14) 64%,
        rgba(210, 164, 106, 0) 82%
      );
      filter: blur(22px);
      opacity: 1;
      animation: segmentos-foco-pulsa 5s var(--ease-padrao) infinite;
    }

    #segmentos[data-carrossel] .segmentos__mural {
      display: flex;
      flex-wrap: nowrap;
      /* largura = a da janela; os cards (flex 0 0 58vw, nowrap) transbordam
         e é isso que torna o eixo X rolável */
      inline-size: 100%;
      max-inline-size: none;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;

      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    #segmentos[data-carrossel] .segmentos__mural::-webkit-scrollbar {
      display: none;
    }

    #segmentos[data-carrossel] .segmentos__mural > .segmento {
      flex: 0 0 58vw;
      max-inline-size: 260px;
      /* passo uniforme por card → 24 cards = 3 blocos exatos */
      margin-inline-end: 0.9rem;
      /* anula o estado oculto da revelação escalonada */
      opacity: 1 !important;
      translate: none !important;
      filter: none !important;
      /* card do meio: cresce um tico e fica translúcido para a luz vazar */
      scale: calc(0.955 + var(--brilho, 0) * 0.045);
      background-color: rgba(247, 245, 241, calc(1 - var(--brilho, 0) * 0.34));
      transition: scale 180ms var(--ease-saida),
        background-color 160ms linear;
    }

    /* no carrossel a luz é a .segmentos__foco, não o ::before de cada card */
    #segmentos[data-carrossel] .segmento::before {
      display: none;
    }
  }

  @keyframes segmentos-foco-pulsa {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.78;
    }
  }

  @media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
    #segmentos[data-carrossel] .segmentos__foco {
      animation: none;
    }
  }

  /* Interação: só onde existe cursor. No toque os cards já nascem coloridos
     (regra mais abaixo), sem depender de um hover que nunca acontece. */
  @media (hover: hover) and (pointer: fine) {
    .segmento {
      transition: border-color 320ms var(--ease-saida),
        background-color 320ms var(--ease-saida);
    }

    .segmento:hover {
      border-color: rgba(140, 120, 99, 0.55);
      background-color: #faf8f5;
    }

    .segmento:hover .segmento__foto {
      filter: grayscale(0) contrast(1);
    }

    .segmento:hover .segmento__selo {
      color: var(--cor-bronze-fundo);
    }

    /* Luz dourada acesa, piscando devagar enquanto o card é interagido. */
    .segmento:hover::before,
    .segmento:focus-within::before {
      opacity: 0.92;
      animation: segmento-brilho-pulsa 3.4s var(--ease-padrao) infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .segmento:hover::before,
      .segmento:focus-within::before {
        animation: none;
        opacity: 0.6;
      }
    }
  }

  /* Toque e ponteiro grosso: cor sempre presente, sem exigir interação. */
  @media (hover: none), (pointer: coarse) {
    .segmento__foto {
      filter: none;
    }

    .segmento__selo {
      color: var(--cor-bronze-fundo);
    }
  }

  /* --- Princípios ---------------------------------------------------------- */
  .principios {
    background-color: var(--sup-recuada);
  }

  /* --- Institucional (escopo escuro) --------------------------------------- */
  .institucional {
    background-color: var(--sup-escura);
    color: var(--txt-inverso-forte);
    position: relative;
    overflow: hidden;
  }

  /* Brilho bronze que acompanha o cursor dentro da seção escura. Contido pelo
     overflow: hidden da própria seção e atrás do conteúdo (container em
     z-index 1). Intensidade medida: o texto de apoio cai de 7,9:1 para 6,5:1
     no ponto mais aceso — folga confortável sobre o mínimo AA. */
  .institucional__brilho {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 0;
    inline-size: 620px;
    block-size: 620px;
    margin-block-start: -310px;
    margin-inline-start: -310px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
      circle at center,
      rgba(196, 168, 138, 0.85) 0%,
      rgba(196, 168, 138, 0.4) 38%,
      rgba(196, 168, 138, 0.12) 64%,
      rgba(196, 168, 138, 0) 80%
    );
    filter: blur(110px);
    opacity: 0;
    translate: calc(var(--brilho-x, 0) * 1px) calc(var(--brilho-y, 0) * 1px);
    transition: opacity 700ms var(--ease-saida);
  }

  .institucional__brilho[data-aceso="true"] {
    opacity: 0.09;
  }

  @media (hover: hover) and (pointer: fine) {
    .js.movimento .institucional__brilho {
      display: block;
    }
  }

  .institucional__simbolo {
    position: absolute;
    inset-block-end: -18%;
    inset-inline-start: -6%;
    inline-size: clamp(18rem, 32vw, 30rem);
    color: var(--cor-bronze);
    opacity: 0.08;
    pointer-events: none;
  }

  .institucional__declaracao {
    margin-block-start: var(--esp-md);
    font-size: var(--passo-3);
    line-height: 1.28;
    letter-spacing: var(--tracking-titulo);
    font-weight: var(--peso-normal);
    max-width: 24ch;
    text-wrap: balance;
  }

  .institucional__texto {
    color: var(--txt-inverso-medio);
    max-width: 58ch;
  }

  .institucional__texto + .institucional__texto {
    margin-block-start: var(--esp-md);
  }

  .institucional__dados {
    margin-block-start: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    padding-block-start: var(--esp-lg);
    border-block-start: 1px solid var(--traco-inverso);
    display: grid;
    gap: var(--esp-lg);
  }

  @media (min-width: 48rem) {
    .institucional__dados {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gutter);
    }
  }

  .institucional__dado-chave {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-claro);
  }

  .institucional__dado-valor {
    margin-block-start: 0.5rem;
    color: var(--txt-inverso-medio);
    font-size: var(--passo--1);
    max-width: 32ch;
  }

  /* --- Contato -------------------------------------------------------------- */
  .contato__corpo {
    margin-block-start: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  }

  @media (min-width: 62rem) {
    .contato__corpo {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      align-items: start;
    }
  }

  .contato__formulario {
    display: grid;
    gap: var(--esp-md);
  }

  .contato__dupla {
    display: grid;
    gap: var(--esp-md);
  }

  @media (min-width: 40rem) {
    .contato__dupla {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .contato__nota {
    font-size: var(--passo--2);
    color: var(--txt-suave);
    line-height: var(--altura-media);
  }

  .contato__aparte {
    padding-block-start: var(--esp-sm);
  }

  .contato__canais {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--traco);
  }

  .contato__canal {
    display: grid;
    gap: 0.35rem;
    padding-block: var(--esp-md);
    border-block-end: 1px solid var(--traco);
  }

  .contato__canal-chave {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-fundo);
  }

  .contato__canal-valor {
    color: var(--txt-medio);
    font-size: var(--passo--1);
    max-width: 40ch;
  }

  /* --- Rodapé --------------------------------------------------------------- */
  .rodape {
    background-color: var(--sup-escura);
    color: var(--txt-inverso-forte);
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) var(--esp-lg);
  }

  .rodape__topo {
    display: grid;
    gap: var(--esp-xl);
    padding-block-end: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    border-block-end: 1px solid var(--traco-inverso);
  }

  @media (min-width: 55rem) {
    .rodape__topo {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--gutter);
    }
  }

  .rodape__marca img {
    block-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
    inline-size: auto;
  }

  /* Complemento da marca em texto real. Reproduz o tratamento do logotipo
     (caixa alta, entreletra larga) num tamanho em que se lê. */
  .rodape__complemento {
    margin-block-start: 0.7rem;
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-claro);
  }

  .rodape__frase {
    margin-block-start: var(--esp-md);
    max-width: 34ch;
    color: var(--txt-inverso-medio);
    font-size: var(--passo--1);
  }

  .rodape__titulo {
    font-family: var(--fonte-mono);
    font-size: var(--passo--2);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-claro);
  }

  .rodape__lista {
    margin-block-start: var(--esp-md);
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
  }

  .rodape__lista a {
    font-size: var(--passo--1);
    color: var(--txt-inverso-medio);
    text-decoration: none;
  }

  .rodape__lista a:hover {
    color: var(--cor-bronze-claro);
  }

  .rodape__base {
    margin-block-start: var(--esp-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-sm);
    font-size: var(--passo--2);
    color: var(--txt-inverso-suave);
  }

  .rodape__base a {
    display: inline-block;
    padding-block: 0.6rem;
    color: inherit;
    text-decoration: none;
  }

  .rodape__base a:hover {
    color: var(--cor-bronze-claro);
  }

  /* --- Página 404 ------------------------------------------------------------ */
  .erro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 100svh;
    padding-block: var(--esp-3xl);
  }

  .erro__codigo {
    font-family: var(--fonte-mono);
    font-size: var(--passo--1);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--cor-bronze-fundo);
  }
}

/* =============================================================================
   07. MOTION
   Animações discretas e funcionais. Tudo desligado sob prefers-reduced-motion.
============================================================================= */
@layer motion {
  /* O estado inicial oculto só é aplicado quando há JavaScript (a classe .js é
     adicionada no <head>). Sem JS, nada some — o conteúdo aparece direto. */
  .js [data-revelar] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-lenta) var(--ease-saida),
      transform var(--dur-lenta) var(--ease-saida);
    transition-delay: var(--atraso, 0ms);
  }

  .js [data-revelar][data-visivel="true"] {
    opacity: 1;
    transform: none;
  }

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

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

    .js [data-revelar] {
      opacity: 1;
      transform: none;
    }

    .progresso {
      display: none;
    }
  }
}

/* =============================================================================
   07b. ANIMAÇÕES AVANÇADAS

   Coreografia de entrada, parallax, profundidade pelo cursor e microinterações.

   Princípios
   - Ativa só sob html.js.movimento. Sem JS ou sob prefers-reduced-motion,
     tudo permanece no estado final (visível, sem transform).
   - Anima apenas transform / translate / scale / rotate / opacity / filter /
     clip-path. Nada que provoque reflow.
   - O JS (assets/scripts/animacoes.js) apenas alterna atributos e escreve
     custom properties; toda a temporização vive aqui.
   - Amplitudes pequenas de propósito: o movimento acompanha a leitura, não
     compete com ela.

   Ponte JS -> CSS
     [data-visivel]     revelação disparada ao entrar na viewport
     [data-entrou]      entrada cinematográfica da abertura (uma vez, no load)
     --i                índice do item/palavra para escalonar o atraso
     --par / --gir      deslocamento e giro de parallax (px / graus)
     --mx / --my        profundidade pelo cursor (px)
     --luz-mx/--luz-my  deriva da luz ambiente pelo cursor (px)
     --saida-op         opacidade da abertura ao sair de cena
============================================================================= */
@layer animacoes {
  :root {
    --stagger: 62ms; /* passo entre palavras / itens de um grupo */
    --anim-dur: 720ms;
    --anim-ease: var(--ease-saida);
  }

  /* ----------------------------------------------------------------------------
     REVELAÇÃO AO ENTRAR NA VIEWPORT — variantes
     Cada elemento com [data-anim] parte de um estado oculto e chega ao estado
     final quando ganha [data-visivel="true"].
  ---------------------------------------------------------------------------- */

  /* subir — fade + deslize vertical + desfoque discreto (o padrão) */
  .js.movimento [data-anim="subir"] {
    opacity: 0;
    translate: 0 18px;
    filter: blur(2px);
    transition: opacity var(--anim-dur) var(--anim-ease),
      translate var(--anim-dur) var(--anim-ease),
      filter var(--anim-dur) var(--anim-ease);
    transition-delay: var(--atraso, 0ms);
  }
  .js.movimento [data-anim="subir"][data-visivel="true"] {
    opacity: 1;
    translate: none;
    filter: none;
  }

  /* desfoque — entra saindo de um blur, desliza pouco */
  .js.movimento [data-anim="desfoque"] {
    opacity: 0;
    translate: 0 10px;
    filter: blur(5px);
    transition: opacity calc(var(--anim-dur) + 140ms) var(--anim-ease),
      translate calc(var(--anim-dur) + 140ms) var(--anim-ease),
      filter calc(var(--anim-dur) + 140ms) var(--anim-ease);
    transition-delay: var(--atraso, 0ms);
  }
  .js.movimento [data-anim="desfoque"][data-visivel="true"] {
    opacity: 1;
    translate: none;
    filter: none;
  }

  /* lado-esq / lado-dir — entra deslizando na horizontal */
  .js.movimento [data-anim="lado-esq"],
  .js.movimento [data-anim="lado-dir"] {
    opacity: 0;
    transition: opacity var(--anim-dur) var(--anim-ease),
      translate var(--anim-dur) var(--anim-ease);
    transition-delay: var(--atraso, 0ms);
  }
  .js.movimento [data-anim="lado-esq"] {
    translate: -26px 0;
  }
  .js.movimento [data-anim="lado-dir"] {
    translate: 26px 0;
  }
  .js.movimento [data-anim="lado-esq"][data-visivel="true"],
  .js.movimento [data-anim="lado-dir"][data-visivel="true"] {
    opacity: 1;
    translate: none;
  }

  /* mascara — clip-path revela de baixo para cima enquanto sobe */
  .js.movimento [data-anim="mascara"] {
    opacity: 0;
    translate: 0 14px;
    clip-path: inset(0 0 100% 0);
    transition: opacity var(--anim-dur) var(--anim-ease),
      translate var(--anim-dur) var(--anim-ease),
      clip-path var(--anim-dur) var(--anim-ease);
    transition-delay: var(--atraso, 0ms);
  }
  .js.movimento [data-anim="mascara"][data-visivel="true"] {
    opacity: 1;
    translate: none;
    /* folga negativa: não corta descidas de letra nem a sombra */
    clip-path: inset(-8% -4% -14% 0);
  }

  /* titulo — máscara horizontal no container + palavras em sequência
     (fade + deslize + desfoque). Combina três técnicas numa só entrada. */
  .js.movimento [data-anim="titulo"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 860ms var(--anim-ease);
    transition-delay: var(--atraso, 0ms);
  }
  .js.movimento [data-anim="titulo"][data-visivel="true"] {
    clip-path: inset(-8% -3% -16% 0);
  }
  .js.movimento [data-anim="titulo"] .palavra__i {
    display: inline-block;
    opacity: 0;
    translate: 0 0.42em;
    filter: blur(2.5px);
    transition: opacity 680ms var(--anim-ease),
      translate 680ms var(--anim-ease), filter 680ms var(--anim-ease);
    transition-delay: calc(
      var(--atraso, 0ms) + 120ms + var(--i, 0) * var(--stagger)
    );
  }
  .js.movimento [data-anim="titulo"][data-visivel="true"] .palavra__i {
    opacity: 1;
    translate: none;
    filter: none;
  }

  /* Cursor de terminal ao fim da declaração de "A Mendrix": um "_" em bronze
     que pisca sem parar — detalhe técnico discreto, na cor da marca.
     Fica dentro do grupo aria-hidden (leitor de tela não o anuncia). Sob
     prefers-reduced-motion o bloco global congela a animação no quadro 0
     (opacidade 1), deixando o "_" estático e visível. */
  #mendrix-titulo[data-visivel="true"] .palavra-grupo::after {
    content: "_";
    margin-inline-start: 0.06em;
    color: var(--cor-bronze-claro);
    font-weight: var(--peso-normal);
    animation: caret-pisca 1.15s infinite;
  }
  @keyframes caret-pisca {
    0%,
    58% {
      opacity: 1;
    }
    58.01%,
    100% {
      opacity: 0;
    }
  }

  /* rotulo — letra a letra, curto, para o eyebrow em mono */
  .js.movimento [data-anim="rotulo"] .letra {
    display: inline-block;
    opacity: 0;
    translate: 0 0.45em;
    transition: opacity 460ms var(--anim-ease),
      translate 460ms var(--anim-ease);
    transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * 24ms);
  }
  .js.movimento [data-anim="rotulo"][data-visivel="true"] .letra {
    opacity: 1;
    translate: none;
  }
  .js.movimento [data-anim="rotulo"] .letra--espaco {
    inline-size: 0.32em;
  }

  /* grupos escalonados — os filhos diretos entram em cascata */
  .js.movimento [data-stagger] > * {
    opacity: 0;
    translate: 0 16px;
    filter: blur(1.5px);
    transition: opacity var(--anim-dur) var(--anim-ease),
      translate var(--anim-dur) var(--anim-ease),
      filter var(--anim-dur) var(--anim-ease);
    transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * var(--stagger));
  }
  .js.movimento [data-stagger][data-visivel="true"] > * {
    opacity: 1;
    translate: none;
    filter: none;
  }

  /* ----------------------------------------------------------------------------
     PARALLAX E PROFUNDIDADE PELO SCROLL
  ---------------------------------------------------------------------------- */
  /* will-change entra e sai pelo JS (só enquanto o elemento está em cena). */
  .js.movimento [data-parallax] {
    translate: 0 calc(var(--par, 0) * 1px);
    rotate: calc(var(--gir, 0) * 1deg);
  }

  /* Abertura saindo de cena: sobe um pouco mais rápido e some com suavidade. */
  .js.movimento [data-hero-saida] {
    translate: 0 calc(var(--par, 0) * 1px);
    opacity: var(--saida-op, 1);
  }

  /* ----------------------------------------------------------------------------
     PROFUNDIDADE PELO CURSOR (só ponteiro fino; o JS nem liga no toque)
  ---------------------------------------------------------------------------- */
  .js.movimento [data-mouse] {
    translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px);
    transition: translate 700ms var(--anim-ease);
  }

  /* A luz ambiente combina o float (transform, no layer secoes) com a deriva
     pelo cursor (translate). As duas propriedades compõem sem conflito. */
  .js.movimento .luz-ambiente__nucleo {
    translate: calc(var(--luz-mx, 0) * 1px) calc(var(--luz-my, 0) * 1px);
    transition: translate 900ms var(--anim-ease);
  }

  /* ----------------------------------------------------------------------------
     ENTRADA CINEMATOGRÁFICA DA ABERTURA (uma vez, ao carregar)
     A ordem: cabeçalho -> malha -> eyebrow (letras) -> título (palavras) ->
     visual -> texto -> botões. Tudo encadeado por transition-delay.
  ---------------------------------------------------------------------------- */
  .js.movimento [data-intro] {
    opacity: 0;
  }
  .js.movimento [data-intro][data-entrou] {
    opacity: 1;
  }

  /* O cabeçalho nunca some — só desliza um toque. Segurança: se algo atrasar
     o disparo da entrada, a navegação continua visível. */
  .js.movimento #cabecalho[data-intro] {
    opacity: 1;
    translate: 0 -8px;
    transition: translate 720ms var(--anim-ease) 140ms;
  }
  .js.movimento #cabecalho[data-intro][data-entrou] {
    translate: none;
  }

  .js.movimento .hero__malha[data-intro] {
    scale: 1.045;
    transition: opacity 1500ms var(--anim-ease),
      scale 1700ms var(--anim-ease), translate 600ms var(--anim-ease);
  }
  .js.movimento .hero__malha[data-intro][data-entrou] {
    scale: 1;
  }

  /* Eyebrow e título do hero: o container fica visível; quem entra são as
     letras / palavras (data-anim), controladas por [data-visivel]. Evita
     multiplicar opacidades (container + peças) e embaçar a leitura. */
  .js.movimento .rotulo[data-intro],
  .js.movimento .hero__titulo[data-intro] {
    opacity: 1;
  }

  .js.movimento .hero__visual[data-intro] {
    scale: 0.94;
    transition: opacity 1100ms var(--anim-ease) 220ms,
      scale 1200ms var(--anim-ease) 220ms;
  }
  .js.movimento .hero__visual[data-intro][data-entrou] {
    scale: 1;
  }

  .js.movimento .hero__texto[data-intro] {
    translate: 0 12px;
    transition: opacity 820ms var(--anim-ease) 380ms,
      translate 820ms var(--anim-ease) 380ms;
  }
  .js.movimento .hero__texto[data-intro][data-entrou] {
    translate: none;
  }

  /* Os botões da abertura só têm data-stagger para numerar os filhos (--i).
     A entrada deles é controlada por estas regras — fade + deslize, sem o
     desfoque do grupo escalonado. `filter: none` neutraliza o blur herdado de
     [data-stagger] > *, que aqui nunca seria limpo (data-visivel não é setado
     em .hero__acoes). Era isso que deixava os dois botões borrados. */
  .js.movimento .hero__acoes[data-intro] > * {
    opacity: 0;
    translate: 0 10px;
    filter: none;
    transition: opacity 620ms var(--anim-ease),
      translate 620ms var(--anim-ease);
    transition-delay: calc(540ms + var(--i, 0) * 90ms);
  }
  .js.movimento .hero__acoes[data-intro][data-entrou] > * {
    opacity: 1;
    translate: none;
  }

  /* ----------------------------------------------------------------------------
     TROCA DE PAINEL NAS SOLUÇÕES — entrada curta ao mudar de aba
  ---------------------------------------------------------------------------- */
  .js.movimento .solucoes__painel--entra {
    animation: painel-entra 460ms var(--ease-saida);
  }
  @keyframes painel-entra {
    from {
      opacity: 0.35;
      translate: 0 10px;
      filter: blur(3px);
    }
    to {
      opacity: 1;
      translate: none;
      filter: none;
    }
  }

  /* ----------------------------------------------------------------------------
     MICROINTERAÇÕES — só com ponteiro fino (mouse/trackpad)
  ---------------------------------------------------------------------------- */
  @media (hover: hover) and (pointer: fine) {
    /* Carta 3D sutil — o painel de soluções e os cards de segmento. O JS
       escreve --rx/--ry conforme a posição do cursor; o ângulo máximo é baixo
       (ver iniciarTilt). Só `transform`, então não colide com o `translate`
       da revelação escalonada. */
    .js.movimento [data-tilt] {
      transform: perspective(var(--tilt-persp, 1000px)) rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg)) scale(var(--tilt-escala, 1));
      transition: transform 600ms var(--anim-ease),
        box-shadow 600ms var(--anim-ease);
    }
    .js.movimento [data-tilt][data-tilt-ativo] {
      transition: transform 140ms linear, box-shadow 140ms linear;
    }
    .js.movimento [data-tilt]:hover {
      box-shadow: var(--sombra-media);
    }

    /* Cards de segmento: acumulam a revelação escalonada (opacity / translate /
       filter, com atraso por --i) e a carta 3D (transform). São propriedades
       distintas e compõem — mas o `transition` precisa citar TODAS, senão a
       regra genérica de [data-tilt] (que só transiciona transform) apaga a
       transição da revelação e os cards passam a "pular" ao entrar.
       O atraso escalonado fica só nas propriedades da revelação: o tilt
       responde na hora. */
    .js.movimento .segmento[data-tilt] {
      /* Perspectiva mais curta = 3D mais pronunciado que o painel. */
      --tilt-persp: 620px;
      --reveal-atraso: calc(var(--atraso, 0ms) + var(--i, 0) * var(--stagger));
      transition: opacity var(--anim-dur) var(--anim-ease) var(--reveal-atraso),
        translate var(--anim-dur) var(--anim-ease) var(--reveal-atraso),
        filter var(--anim-dur) var(--anim-ease) var(--reveal-atraso),
        transform 600ms var(--anim-ease),
        box-shadow 600ms var(--anim-ease),
        border-color 320ms var(--ease-saida),
        background-color 320ms var(--ease-saida);
    }
    .js.movimento .segmento[data-tilt][data-tilt-ativo] {
      --tilt-escala: 1.03;
      transition: transform 140ms linear, box-shadow 140ms linear,
        border-color 320ms var(--ease-saida),
        background-color 320ms var(--ease-saida);
    }

    /* Elevação leve nos cartões de hairline (transform livre nestes elementos,
       então não colide com o translate da revelação). */
    .js.movimento [data-hover-lift] {
      transition: transform 420ms var(--anim-ease);
    }
    .js.movimento [data-hover-lift]:hover {
      transform: translateY(-4px);
    }
    .js.movimento .processo__etapa[data-hover-lift]::before {
      transition: scale 420ms var(--anim-ease),
        background-color 420ms var(--anim-ease);
    }
    .js.movimento .processo__etapa[data-hover-lift]:hover::before {
      scale: 1.7;
    }

    /* Botões magnéticos. O JS escreve translate/scale inline; a transição curta
       aqui dá o "elástico" ao seguir o cursor e a volta suave ao soltar.
       Inclui as transições próprias do .botao (cor/borda) porque esta regra
       substitui a propriedade `transition` inteira do elemento. */
    .js.movimento [data-ima] {
      transition: translate 200ms var(--anim-ease),
        scale 200ms var(--anim-ease),
        background-color var(--dur-media) var(--ease-padrao),
        color var(--dur-media) var(--ease-padrao),
        border-color var(--dur-media) var(--ease-padrao);
    }
  }

  /* ----------------------------------------------------------------------------
     COSTURA ENTRE SEÇÕES — transição longa e difusa entre o claro e o grafite.

     Cada limite ganha DOIS gradientes, um em cada seção, que se encontram no
     mesmo tom médio sobre a linha divisória:
       ::after  na seção clara  → transparente ... rgba(cor oposta)
       ::before/::after na seção grafite → tom médio ... cor sólida

     Juntos ocupam ~40% da altura da viewport no desktop (menos no celular).
     Cada pseudo pinta só sobre o fundo da própria seção, atrás do conteúdo
     (container em z-index 1) e sem receber ponteiro — nunca é uma faixa opaca
     sobre o texto, nem sombra, nem blur.

     --seam-claro / --seam-escuro controlam a altura de cada metade.
  ---------------------------------------------------------------------------- */
  .principios,
  .institucional,
  .contato,
  .rodape {
    position: relative;
    --seam-claro: clamp(190px, 26vh, 340px);
    --seam-escuro: clamp(130px, 17vh, 230px);
  }

  .compromissos > .container,
  .segmentos > .container,
  .solucoes > .container,
  .processo > .container,
  .principios > .container,
  .institucional > .container,
  .contato > .container,
  .rodape > .container {
    position: relative;
    z-index: 1;
  }

  /* A costura substitui o filete de topo da seção. */
  .contato.secao--traco-topo {
    border-block-start: 0;
  }

  .principios::after,
  .institucional::before,
  .institucional::after,
  .contato::before,
  .contato::after,
  .rodape::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
    z-index: 0;
  }

  /* --- metades CLARAS: o próprio fundo aparece no topo e escurece descendo --- */
  .principios::after,
  .contato::after {
    inset-block-end: 0;
    block-size: var(--seam-claro);
  }
  /* recuada / marfim  ->  grafite */
  .principios::after,
  .contato::after {
    background: linear-gradient(
      to bottom,
      rgba(36, 40, 39, 0) 0%,
      rgba(36, 40, 39, 0.015) 16%,
      rgba(36, 40, 39, 0.05) 34%,
      rgba(36, 40, 39, 0.12) 52%,
      rgba(36, 40, 39, 0.24) 70%,
      rgba(36, 40, 39, 0.4) 86%,
      rgba(36, 40, 39, 0.55) 100%
    );
  }

  /* --- metade CLARA no topo do contato: grafite dissolvendo em marfim --- */
  .contato::before {
    inset-block-start: 0;
    block-size: var(--seam-claro);
    background: linear-gradient(
      to bottom,
      rgba(36, 40, 39, 0.5) 0%,
      rgba(36, 40, 39, 0.36) 16%,
      rgba(36, 40, 39, 0.22) 34%,
      rgba(36, 40, 39, 0.11) 54%,
      rgba(36, 40, 39, 0.04) 74%,
      rgba(36, 40, 39, 0.012) 88%,
      rgba(36, 40, 39, 0) 100%
    );
  }

  /* --- metades ESCURAS: do tom médio até o grafite sólido --- */
  .institucional::before,
  .rodape::before {
    inset-block-start: 0;
    block-size: var(--seam-escuro);
    background: linear-gradient(
      to bottom,
      #7c7c78 0%,
      #605d57 24%,
      #46443e 46%,
      #33342f 66%,
      #2a2c29 84%,
      #242827 100%
    );
  }

  /* --- metade ESCURA no fundo do institucional: grafite clareando --- */
  .institucional::after {
    inset-block-end: 0;
    block-size: var(--seam-escuro);
    background: linear-gradient(
      to bottom,
      #242827 0%,
      #2c2e2a 20%,
      #3d3b36 42%,
      #57544d 66%,
      #74716a 86%,
      #8a8884 100%
    );
  }

  /* Celular: mesma suavidade, altura menor para não atrasar a leitura. */
  @media (max-width: 47.99rem) {
    .principios,
    .institucional,
    .contato,
    .rodape {
      --seam-claro: clamp(110px, 15vh, 165px);
      --seam-escuro: clamp(80px, 10vh, 120px);
    }
  }

  /* ----------------------------------------------------------------------------
     MOVIMENTO REDUZIDO — nada anima; tudo no estado final.
     O bloco global no layer motion já zera durações; aqui garantimos que os
     estados iniciais não deixem nada escondido.
  ---------------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .js.movimento [data-anim],
    .js.movimento [data-anim] .palavra__i,
    .js.movimento [data-anim] .letra,
    .js.movimento [data-stagger] > *,
    .js.movimento [data-intro],
    .js.movimento [data-intro] > *,
    .js.movimento [data-hero-saida] {
      opacity: 1 !important;
      translate: none !important;
      transform: none !important;
      filter: none !important;
      clip-path: none !important;
      scale: 1 !important;
    }

    .js.movimento [data-parallax],
    .js.movimento [data-mouse],
    .js.movimento .luz-ambiente__nucleo {
      translate: none !important;
      rotate: none !important;
      will-change: auto;
    }

    /* As costuras entre seções são fundo estático, não movimento — ficam. */
  }
}

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

  .sem-rolagem {
    overflow: hidden;
  }

  .texto-suave {
    color: var(--txt-suave);
  }

  .medida {
    max-width: var(--largura-texto);
  }

  .medida-estreita {
    max-width: var(--largura-estreita);
  }

  [hidden] {
    display: none !important;
  }
}