/* =============================================================
 * Millenierds — v0.2.0
 * One-page institucional: hero, quem-somos, pilares, trabalhos,
 * produtos, contato. Camada ilustrativa em SVG inline (RNF-38).
 *
 * Organização:
 *   1. Design tokens (custom properties em :root)
 *   2. Reset mínimo e preferências globais
 *   3. Topo (header fixo + navegação por âncoras)
 *   4. Hero (landing v0.1 como abertura + onda de partículas)
 *   5. Seções (estrutura comum: path, título, lead; superfícies)
 *   6. Componentes: equação, fatos, pilares, trabalhos, produtos, contato
 *   7. Rodapé
 *   8. Revelação por scroll (progressive enhancement)
 *   9. Preferências do usuário (reduced motion)
 * ============================================================= */

/* 1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* Cores da marca */
  --cor-fundo: #000;
  --cor-texto: #fff;
  --cor-acento: #e22f1a;       /* vermelho da marca — CTAs, paths, detalhes */
  --cor-acento-texto: #ff4a33; /* tom claro p/ texto pequeno em superfícies (≥4.5:1) */
  --cor-texto-suave: #a3a3a3;  /* 8.3:1 sobre preto — acima de AA */
  --cor-linha: #1f1f1f;        /* bordas e divisores discretos */
  --cor-superficie: #0a0a0a;   /* leve elevação de cards */
  --cor-superficie-elevada: #0d0b0b; /* seções alternadas — preto quente (RNF-37) */
  --veu-acento: rgb(226 47 26 / 4%); /* véu do acento sobre superfícies */
  --cor-placa-cliente: #f2efe2; /* creme da Fisions: base do logo marrom (RNF-40) */

  /* Tipografia (apenas system fonts — zero requisições externas) */
  --fonte-base:
    -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen,
    ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;

  /* Voz utilitária "de terminal": nav, paths, selos, metadados */
  --fonte-mono:
    ui-monospace, "Cascadia Code", consolas, "SF Mono", menlo,
    "Liberation Mono", monospace;
  --tam-tagline: clamp(0.875rem, 0.65rem + 0.9vw, 1.125rem);
  --tam-titulo: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --tam-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  --tam-mono: 0.8125rem;

  /* Dimensões */
  --logo-size: clamp(200px, 50vw, 400px);
  --altura-topo: 3.5rem;
  --largura-conteudo: 68rem;
  --respiro-secao: clamp(4rem, 3rem + 5vw, 7rem);
  --respiro-lateral: clamp(1rem, 1rem + 2vw, 2.5rem);
  --raio: 4px;
}

/* 2. Reset mínimo e preferências globais
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%; /* Safari só entende com prefixo (RNF-41) */
  text-size-adjust: 100%;
}

/* Scroll suave apenas para quem não pediu movimento reduzido (RNF-35) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

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

/* Texto presente só para tecnologias assistivas */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 3. Topo — navegação por âncoras (RF-08)
   No mobile a nav quebra em duas linhas, então o topo rola com a
   página; ele só gruda (sticky) a partir de tablets, onde cabe em
   uma linha de altura previsível.
   ------------------------------------------------------------- */
.topo {
  min-height: var(--altura-topo);
  padding: 0.75rem var(--respiro-lateral);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  background-color: rgb(0 0 0 / 88%);
  border-bottom: 1px solid var(--cor-linha);
}

.topo__marca {
  font-family: var(--fonte-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.topo__ponto {
  color: var(--cor-acento);
  margin-left: 0.2em;
  font-size: 0.6em;
  vertical-align: 0.2em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.nav__link {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
  text-decoration: none;

  /* Alvo de toque >= 24px de altura (WCAG 2.5.8 / Lighthouse target-size) */
  padding-block: 0.4375rem;

  /* Sublinhado que desliza no hover (0 -> 100% de largura) */
  background: linear-gradient(var(--cor-acento), var(--cor-acento))
    left bottom / 0 1px no-repeat;
  transition: color 150ms ease, background-size 250ms ease;
}

.nav__link:hover {
  color: var(--cor-texto);
  background-size: 100% 1px;
}

/* 4. Hero — logo + tagline centralizados na altura útil (RF-04)
   ------------------------------------------------------------- */
.hero {
  min-height: calc(100vh - var(--altura-topo));
  min-height: calc(100dvh - var(--altura-topo));
  padding: var(--respiro-lateral);
  position: relative;

  /* Contém a onda (evita overflow lateral) e isola o blend do heading */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  text-align: center;
}

/* Brasa atrás do logo: eco da onda incandescente da marca.
   Em pseudo-elemento para poder respirar via transform/opacity. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: 68rem;
  height: 42rem;
  max-width: 130vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(226 47 26 / 8%), transparent 72%);
  pointer-events: none;
}

/* Onda de partículas do logo estendida para fora do círculo (RNF-38) */
.hero__onda {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(78rem, 140vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Traço pontilhado = partículas; o offset animado faz o fluxo */
.hero__fio {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.25;
  stroke-dasharray: 0.1 8.9;
}

.hero__fio--a {
  stroke: var(--cor-acento);
  opacity: 0.55;
}

.hero__fio--b {
  stroke: var(--cor-acento-texto);
  opacity: 0.3;
}

.hero__fio--c {
  stroke: var(--cor-texto);
  opacity: 0.14;
}

/* Rastro de brasas sob o cursor (RNF-39): grade decorativa de células
   :hover atrás do conteúdo. Cada célula acende na passagem do ponteiro
   e apaga devagar — o rastro é a soma das brasas esfriando. Zero JS. */
.rastro {
  display: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rastro {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }

  .rastro__fagulha {
    position: relative;
  }

  /* O brilho é maior que a célula: brasas vizinhas se fundem no rastro */
  .rastro__fagulha::after {
    content: "";
    position: absolute;
    inset: -140%;
    background: radial-gradient(
      closest-side,
      rgb(226 47 26 / 20%),
      rgb(255 74 51 / 7%) 45%,
      transparent 72%
    );
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 2.4s ease, transform 2.4s ease;
    pointer-events: none;
  }

  /* Acende quase instantâneo; o apagar lento fica com a regra acima */
  .rastro__fagulha:hover::after {
    opacity: 1;
    transform: scale(1);
    transition-duration: 80ms, 80ms;
  }
}

.hero__heading {
  /* O <h1> é o container semântico do logotipo; sem peso visual próprio. */
  font-size: 0;
  line-height: 0;

  /* O arquivo do logo tem fundo preto opaco que bloquearia o brilho do
     hero. screen funde preto com o que estiver atrás. Fica no heading
     porque a animação de entrada cria stacking context que isolaria o
     blend se aplicado direto na <img>. */
  mix-blend-mode: screen;
}

.hero__logo {
  width: var(--logo-size);
  height: auto;
  aspect-ratio: 1 / 1; /* previne CLS antes do load */
}

.hero__tagline {
  font-size: var(--tam-tagline);
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* O que a empresa é, em uma frase (RF-18) */
.hero__descricao {
  max-width: 40ch;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

/* Mobile: pilares empilhados, sem separadores; em telas largas a
   tagline volta a ser uma linha única com "·" no acento (como no OG) */
.hero__pilar {
  display: block;
}

.hero__sep {
  display: none;
  color: var(--cor-acento-texto);
}

.hero__seta {
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
  font-family: var(--fonte-mono);
  font-size: 1.25rem;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.hero__seta:hover {
  color: var(--cor-acento);
}

/* Entrada do hero no load (logo -> tagline -> seta) e atmosfera
   ambiente: brasa que respira + partículas em deriva (RNF-36) */
@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: brasa 9s ease-in-out infinite;
  }

  .hero__fio--a {
    animation: fluir 30s linear infinite;
  }

  .hero__fio--b {
    animation: fluir 44s linear infinite reverse;
  }

  .hero__fio--c {
    animation: fluir 60s linear infinite;
  }

  @keyframes brasa {
    0%,
    100% {
      opacity: 0.7;
      transform: translate(-50%, -50%) scale(0.94);
    }

    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.06);
    }
  }

  /* -180 = 20 períodos do padrão pontilhado (0.1 + 8.9): loop perfeito */
  @keyframes fluir {
    to {
      stroke-dashoffset: -180;
    }
  }

  .hero__heading {
    animation: surgir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__tagline {
    animation: surgir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
  }

  .hero__descricao {
    animation: surgir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
  }

  .hero__seta {
    animation:
      surgir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both,
      hero-pulso 2.4s ease-in-out 1.5s infinite;
  }

  @keyframes surgir {
    from {
      opacity: 0;
      transform: translateY(0.875rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes hero-pulso {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.7;
    }

    50% {
      transform: translateY(0.35rem);
      opacity: 1;
    }
  }
}

/* 5. Seções — estrutura comum
   Full-bleed: o fundo ocupa toda a largura e o padding lateral
   centraliza o conteúdo em --largura-conteudo, permitindo a
   alternância de superfícies (RNF-37) sem markup extra.
   ------------------------------------------------------------- */
.secao {
  padding: var(--respiro-secao)
    max(var(--respiro-lateral), calc((100% - var(--largura-conteudo)) / 2));
  scroll-margin-top: calc(var(--altura-topo) + 1rem);
  border-top: 1px solid var(--cor-linha);
}

/* Superfície elevada quente com véu do acento no topo */
.secao--elevada {
  background:
    linear-gradient(180deg, var(--veu-acento), rgb(226 47 26 / 0%) 18rem),
    var(--cor-superficie-elevada);
}

/* Contato: brasa mais presente para dar palco ao CTA final */
.secao--foco {
  background:
    radial-gradient(
      38rem 22rem at 22% 8rem,
      rgb(226 47 26 / 9%),
      transparent 70%
    ),
    var(--cor-superficie-elevada);
}

/* Path decorativo: a voz de terminal que assina cada seção */
.secao__path {
  font-family: var(--fonte-mono);
  font-size: var(--tam-mono);
  color: var(--cor-texto-suave);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.secao__path::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: var(--cor-acento);
}

.secao__til {
  color: var(--cor-acento);
}

.secao__titulo {
  font-size: var(--tam-titulo);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: lowercase;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.secao__lead {
  font-size: var(--tam-lead);
  line-height: 1.65;
  color: var(--cor-texto-suave);
  max-width: 58ch;
}

/* Parágrafo corrido depois dos destaques da seção (RF-19) */
.secao__texto {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cor-texto-suave);
}

.secao__texto strong {
  color: var(--cor-texto);
}

.secao__ancora {
  color: var(--cor-acento-texto);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}

.secao__ancora:hover {
  color: var(--cor-texto);
}

.secao__lead strong {
  color: var(--cor-texto);
  font-weight: 600;
}

/* 6a. Quem somos — equação da marca (RF-09) e fatos
   A assinatura da página: millennials × nerds soldados pelo glifo
   "≡" (o E estilizado do logotipo).
   ------------------------------------------------------------- */
.equacao {
  margin-top: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.equacao__origem {
  font-family: var(--fonte-mono);
  font-size: var(--tam-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 0.625rem;
}

.equacao__operador {
  color: var(--cor-acento-texto);
}

.equacao__resultado {
  font-size: clamp(2.5rem, 1.9rem + 3.2vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.equacao__visual {
  display: inline-flex;
  align-items: center;
}

.equacao__parte {
  display: inline-block;
}

.equacao__selo {
  width: 0.5em;
  height: 0.58em;
  margin-inline: 0.07em;
  fill: var(--cor-acento);
}

.equacao__legenda {
  margin-top: 1rem;
  font-family: var(--fonte-mono);
  font-size: var(--tam-mono);
  color: var(--cor-texto-suave);
  max-width: 52ch;
}

/* Fato — o selo de bagagem em voz mono */
.fatos {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-family: var(--fonte-mono);
  font-size: var(--tam-mono);
  color: var(--cor-texto-suave);
}

/* 6b. Pilares — 3 cards (RF-10)
   ------------------------------------------------------------- */
.pilares {
  list-style: none;
  display: grid;
  gap: 1rem;
}

.pilar {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  box-shadow:
    0 12px 32px -12px rgb(226 47 26 / 0%),
    0 0 24px rgb(226 47 26 / 0%);
  transition: border-color 150ms ease, transform 250ms ease, box-shadow 250ms ease;
}

/* Zoom leve + fogo discreto: calor embaixo, halo suave em volta (TC-32) */
.pilar:hover {
  border-color: var(--cor-acento);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 12px 32px -12px rgb(226 47 26 / 35%),
    0 0 24px rgb(226 47 26 / 10%);
}

.pilar__icone {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.125rem;
  color: var(--cor-texto-suave);
  transition: color 250ms ease;
}

.pilar__detalhe {
  fill: var(--cor-acento);
}

.pilar__traco {
  fill: none;
  stroke: var(--cor-acento);
}

.pilar:hover .pilar__icone {
  color: var(--cor-texto);
}

.pilar__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.pilar__texto {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

/* 6c. Trabalhos — cards-âncora para cases e Instagram (RF-11)
   ------------------------------------------------------------- */
.trabalhos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

/* Moldura wireframe (RNF-38): browser/player desenhado com os tokens */
.quadro {
  width: 100%;
  height: auto;
  margin-bottom: 0.375rem;
}

.quadro__moldura {
  fill: var(--cor-superficie);
  stroke: var(--cor-linha);
}

.quadro__traco {
  fill: none;
  stroke: var(--cor-linha);
}

.quadro__ponto {
  fill: var(--cor-linha);
}

.quadro__campo {
  fill: var(--cor-fundo);
  stroke: var(--cor-linha);
}

.quadro__dominio {
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  fill: var(--cor-texto-suave);
}

.quadro__bloco {
  fill: var(--cor-linha);
}

.quadro__pulso {
  fill: none;
  stroke: var(--cor-acento);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quadro__detalhe {
  fill: var(--cor-acento);
}

.quadro__aro {
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1.5;
}

.trabalho__link,
.app__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);

  /* preto puro sobre a seção elevada; .apps troca pela superfície elevada */
  background-color: var(--fundo-card, var(--cor-fundo));
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  text-decoration: none;
  box-shadow:
    0 12px 32px -12px rgb(226 47 26 / 0%),
    0 0 24px rgb(226 47 26 / 0%);
  transition: border-color 150ms ease, transform 250ms ease, box-shadow 250ms ease;
}

/* Zoom leve + fogo discreto, como nos pilares (TC-32) */
.trabalho__link:hover,
.app__link:hover {
  border-color: var(--cor-acento);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 12px 32px -12px rgb(226 47 26 / 35%),
    0 0 24px rgb(226 47 26 / 10%);
}

.trabalho__pilar {
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-acento-texto);
}

.trabalho__titulo {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.trabalho__texto,
.app__texto {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

.trabalho__acao,
.app__acao {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--fonte-mono);
  font-size: var(--tam-mono);
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.trabalho__link:hover .trabalho__acao,
.app__link:hover .app__acao {
  color: var(--cor-acento);
}

.trabalho__seta {
  display: inline-block;
  transition: transform 250ms ease;
}

.trabalho__link:hover .trabalho__seta,
.app__link:hover .trabalho__seta {
  transform: translate(0.2rem, -0.1rem);
}

/* Placa do logotipo de cliente: mesma proporção da moldura wireframe
   dos outros cards, para os títulos alinharem na grade */
.trabalho__placa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 280 / 150;
  margin-bottom: 0.375rem;
  background-color: var(--cor-placa-cliente);
  border-radius: 7px;
}

.trabalho__logo {
  width: 10rem;
  height: auto;
}

/* 6d. Produtos — apps próprios em cards, depois o resto da lista (RF-12)
   ------------------------------------------------------------- */
.apps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);

  /* Seção de fundo preto: o card sobe para a superfície elevada */
  --fundo-card: var(--cor-superficie-elevada);
}

.app__topo {
  display: flex;
  flex-wrap: wrap; /* v0.2.3: selo "App Store e Google Play" desce para baixo do ícone quando não cabe */
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
}

.app__icone {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.app__nome {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app__plataforma {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--cor-texto);
}

.produtos {
  list-style: none;
}

.produto {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.produto:not(:first-child) {
  border-top: 1px solid var(--cor-linha);
}

/* Ícone oficial do app (RNF-40), no formato de tile de loja */
.produto__icone {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
}

/* Produtos que ainda não são apps: glifo de linha no mesmo tile */
.produto__glifo {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
  color: var(--cor-texto-suave);
}

.produto__detalhe {
  fill: var(--cor-acento);
}

.produto__traco {
  fill: none;
  stroke: var(--cor-acento);
}

.produto__corpo {
  /* Ocupa toda a largura da linha: com colunas de mesma proporção em
     todas as linhas, os selos de status se alinham na vertical */
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.375rem 1.5rem;
}

.produto__nome {
  font-size: 1.125rem;
  font-weight: 700;
}

.produto__status {
  justify-self: start;
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-linha);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

/* Selo do que já está no ar: o acento marca a conquista */
.produto__status--producao {
  color: var(--cor-acento-texto);
  border-color: rgb(226 47 26 / 55%);
}

.produto__status--breve {
  color: var(--cor-texto);
  border-color: rgb(255 255 255 / 30%);
}

.produto__texto {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

.produto__ancora {
  color: var(--cor-acento-texto);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.produto__ancora:hover {
  color: var(--cor-texto);
}

/* 6e. Contato (RF-13)
   ------------------------------------------------------------- */
.contato__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.botao {
  font-family: var(--fonte-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cor-fundo); /* preto sobre acento: 5.1:1, acima de AA */
  background-color: var(--cor-acento);
  border-radius: var(--raio);
  padding: 0.875rem 1.5rem;
  text-decoration: none;
  transition: filter 150ms ease;

  /* O endereço é uma palavra só, sem espaço onde quebrar. Como item flex, o
     botão herda `min-width: auto` e se recusa a ficar menor que ela: em 320px
     media 312px dentro de 260px e empurrava a página inteira, contra a RNF-01.
     `min-width: 0` libera o encolhimento e `break-word` deixa o endereço
     passar para a segunda linha em vez de estourar. */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
}

.botao:hover {
  filter: brightness(1.12);
}

.contato__alt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-mono);
  font-size: var(--tam-mono);
  color: var(--cor-texto-suave);
  text-decoration: none;
  transition: color 150ms ease;
}

/* O sublinhado é do rótulo, não da linha inteira: sublinhar o flex container
   arrastaria o ícone e a seta junto. */
.contato__rotulo {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.contato__alt:hover {
  color: var(--cor-texto);
}

/* Ícone de canal: contorno branco (19,63:1 sobre a superfície elevada), mais
   presente que o rótulo de propósito — é ele que identifica o canal de longe.
   Decorativo nos termos da RNF-38: o nome do canal está no texto do link. */
.contato__icone {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--cor-texto);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 7. Rodapé (RF-14)
   ------------------------------------------------------------- */
.rodape {
  padding: 2.5rem
    max(var(--respiro-lateral), calc((100% - var(--largura-conteudo)) / 2));
  border-top: 1px solid var(--cor-linha);
  display: grid;
  gap: 2rem;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

.rodape__titulo {
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.rodape__lista {
  list-style: none;
}

.rodape__link {
  display: inline-block;
  padding-block: 0.25rem; /* alvo de toque ≥ 24px (WCAG 2.5.8) */
  color: var(--cor-texto-suave);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}

.rodape__link:hover {
  color: var(--cor-texto);
}

.rodape__meta {
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-linha);
}

/* Layout em colunas a partir de tablets (mobile-first, RNF-01).
   Notação prefixada por compatibilidade: a sintaxe de intervalo
   (width >= x) só existe em Safari 16.4+/Firefox 102+/Chrome 104+ e,
   ignorada, derruba TODO o layout desktop (RNF-41).
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  .topo {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .hero__seta {
    position: absolute;
    bottom: clamp(1rem, 4vh, 2.5rem);
    margin-top: 0;
  }

  .hero__pilar,
  .hero__sep {
    display: inline;
  }

  .pilares {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Empresa | produtos | cliente; a linha de meta ocupa a largura toda */
  .rodape {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .rodape__meta {
    grid-column: 1 / -1;
  }

  /* Colunas de largura estável (nome | selo | texto): como todo
     .produto__corpo tem a mesma largura disponível, os selos de status
     ficam alinhados na mesma vertical em todas as linhas */
  .produto__corpo {
    grid-template-columns: minmax(12rem, 1fr) 11rem 2fr;
    align-items: baseline;
  }
}

/* Telas largas: os 4 pilares lado a lado, na ordem da tagline */
@media (min-width: 1024px) {
  .pilares {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 8. Revelação por scroll — progressive enhancement (RNF-36)
   Só existe onde há suporte a scroll-driven animations E o usuário
   aceita movimento; nos demais navegadores o conteúdo aparece
   normalmente, sem estado opacity:0 residual (TC-28).
   O limite de altura garante que a página sempre role: com timeline
   view() inativa (viewport >= conteúdo), o Chrome segura o estado
   inicial (opacity 0) e o conteúdo sumiria em telas muito altas.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (max-height: 2000px) {
  @supports (animation-timeline: view()) {
    .secao__path,
    .secao__titulo,
    .secao__lead,
    .equacao__origem,
    .equacao__legenda,
    .fatos,
    .pilar,
    .trabalho,
    .app,
    .produto,
    .contato__acoes {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    /* Fusão da equação: as metades deslizam e o glifo "≡" solda (TC-31) */
    .equacao__parte--a {
      animation: fundir-esq linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 45%;
    }

    .equacao__parte--b {
      animation: fundir-dir linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 45%;
    }

    .equacao__selo {
      animation: fundir-selo linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 60%;
    }

    @keyframes revelar {
      from {
        opacity: 0;
        transform: translateY(1.25rem);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fundir-esq {
      from {
        opacity: 0;
        transform: translateX(-0.45em);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fundir-dir {
      from {
        opacity: 0;
        transform: translateX(0.45em);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fundir-selo {
      from {
        opacity: 0;
        transform: scaleY(0.25);
      }

      to {
        opacity: 1;
        transform: scaleY(1);
      }
    }
  }
}

/* 8b. Botão flutuante de WhatsApp (RF-17, RNF-42)
   -------------------------------------------------------------
   Verde do WhatsApp, exceção documentada à paleta da RNF-06: é a cor pela
   qual o canal é reconhecido. Glifo preto sobre ele dá 10,59:1, e o círculo
   contra o fundo da página dá os mesmos 10,59:1 — os dois acima do mínimo de
   3:1 da WCAG 1.4.11 para elemento de interface. */
.whatsapp {
  --cor-whatsapp: #25d366;

  position: fixed;
  right: max(var(--respiro-lateral), env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;  /* 56px — acima do alvo mínimo de 44px (WCAG 2.5.5) */
  height: 3.5rem;
  color: var(--cor-whatsapp);

  /* Véu quase transparente, não preenchimento: dá ao anel o corpo de um botão
     sem trazer de volta o disco verde saturado, que era a única cor cheia fora
     da paleta e brigava com o acento vermelho. */
  background-color: rgb(37 211 102 / 12%);
  border: 2px solid currentcolor;
  border-radius: 50%;
  transition: transform 150ms ease, background-color 150ms ease;
}

.whatsapp:hover {
  background-color: rgb(37 211 102 / 22%);
  transform: translateY(-2px);
}

.whatsapp__glifo {
  width: 1.875rem;
  height: 1.875rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 9. Preferências do usuário — acessibilidade (RNF-10)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* A regra acima zera a duração, não o deslocamento; sem isto o botão
     ainda saltaria no hover, só que instantaneamente (RNF-42). */
  .whatsapp:hover,
  .trabalho__link:hover,
  .app__link:hover {
    transform: none;
  }
}