/* =========================================================================
   Innotec — sistema visual "Infraestrutura à Vista"
   Os tokens abaixo são o DESIGN.md executável. Antes de alterar um valor,
   confira a regra que o governa; elas estão citadas nos comentários.
   ========================================================================= */

/* Fontes auto-hospedadas: os arquivos .woff2 do Google Fonts eram
   idênticos entre os pesos requisitados de uma mesma família — Inter 400/500/600
   e Montserrat 600/700/800 resolviam para o mesmo binário variável — então
   um único @font-face por família, com o peso como intervalo, é o que
   realmente está sendo servido. Isso elimina dois handshakes de domínio
   terceiro (fonts.googleapis.com + fonts.gstatic.com) do carregamento crítico.
   subset latino: cobre acentuação do português (U+00C0–00FF). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Deixa auto/0 interpolarem: usado na abertura do FAQ. */
  interpolate-size: allow-keywords;

  /* Cor ------------------------------------------------------------------ */
  --ouro-operacional: #FFA600;
  --ouro-brilho:      #FFB612;
  --ouro-superficie:  #C87F00;
  --ouro-texto:       #8A5A00;

  --meia-noite:          #071B2E;
  --meia-noite-elevado:  #0D2947;
  --papel:               #F5F7FA;
  --branco:              #FFFFFF;

  --grafite-corpo:       #41586B;
  --grafite-secundario:  #5B6E80;
  --grafite-terciario:   #5B7185;
  --bruma-corpo:         #C6D2DD;
  --bruma-secundario:    #9AA9B8;

  /* Ferrugem — a única família fora do par ouro/neutro, e só para erro.
     Não é decoração: existe porque campo inválido e falha de envio precisam
     de um sinal que o âmbar não pode dar sem virar ambíguo. */
  --ferrugem:            #A3341F;
  --ferrugem-texto:      #8C2A16;
  --ferrugem-superficie: #FFF7F5;

  /* Forma — A Regra dos Três Raios: existem 0, 4px e 999px. ---------------- */
  --raio-sm:   4px;
  --raio-pill: 999px;

  /* Espaço --------------------------------------------------------------- */
  --e-xs: 8px;  --e-sm: 10px; --e-md: 14px; --e-lg: 20px;
  --e-xl: 28px; --e-2xl: 40px; --e-3xl: 60px;

  /* A Regra da Régua: 1280 / 44 são invariantes. -------------------------- */
  --regua:  1280px;
  --gutter: 44px;
  --secao:  104px;

  /* Tipografia ----------------------------------------------------------- */
  --fonte-display: Montserrat, sans-serif;
  --fonte-corpo:   Inter, system-ui, -apple-system, sans-serif;

  /* Movimento ------------------------------------------------------------ */
  --t-rapida: .18s ease;
  --t-base:   .22s ease;
  --t-lenta:  .25s ease;
  --curva-entrada: cubic-bezier(.2, .7, .2, 1);
  --curva-chegada: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------------------
   A Regra dos Dois Fundos, mecanizada.
   O âmbar não tem um valor: tem três, e o fundo decide qual. Cada superfície
   redefine os papéis abaixo, então um componente escrito com var(--acento-texto)
   acerta o contraste sozinho, em qualquer seção onde for colocado.
   ------------------------------------------------------------------------- */
.sobre-navy {
  --fg:             var(--papel);
  --fg-corpo:       var(--bruma-corpo);
  --fg-secundario:  var(--bruma-secundario);
  --acento-texto:   var(--ouro-operacional);   /* 8.88:1 sobre navy */
  --acento-grafico: var(--ouro-operacional);
  --acento-hover:   var(--ouro-brilho);
  --linha:          rgba(245, 247, 250, .14);
  --linha-suave:    rgba(245, 247, 250, .08);
  --superficie:     var(--meia-noite-elevado);
  background: var(--meia-noite);
  color: var(--fg);
}

.sobre-claro {
  --fg:             var(--meia-noite);
  --fg-corpo:       var(--grafite-corpo);
  --fg-secundario:  var(--grafite-secundario);
  --acento-texto:   var(--ouro-texto);         /* 5.93:1 — texto */
  --acento-grafico: var(--ouro-superficie);    /* 3.23:1 — só ícone, seta, borda */
  --acento-hover:   var(--ouro-texto);
  --linha:          rgba(7, 27, 46, .10);
  --linha-suave:    rgba(7, 27, 46, .08);
  --superficie:     var(--branco);
  background: var(--papel);
  color: var(--fg);
}

.sobre-claro--branco { background: var(--branco); }

/* =========================================================================
   Base
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--meia-noite);
}

body {
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--acento-texto, var(--ouro-operacional)); text-decoration: none; }

/* Superfícies do navegador: o que não desenhamos também carrega o design. */
::selection { background: var(--ouro-operacional); color: var(--meia-noite); }

:focus-visible {
  outline: 2px solid var(--ouro-operacional);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ouro-operacional);
  color: var(--meia-noite);
  font-weight: 600;
  padding: var(--e-md) var(--e-lg);
}
.pular-para-conteudo:focus { left: var(--gutter); top: var(--e-sm); }

/* =========================================================================
   Layout
   ========================================================================= */

.regua {
  max-width: var(--regua);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.secao { padding-top: var(--secao); padding-bottom: 92px; }
.secao--curta { padding-top: 52px; padding-bottom: 52px; }
.secao--topo   { padding-top: 118px; padding-bottom: 0; }

/* Capa de página interna: etiqueta, título e lead sobre a mesma foto do
   hero da home, com um véu na cor do navy por cima — a marca d'água central
   saiu daqui (virou identidade repetida em toda página, não autoria).
   Antes era `secao secao--topo` mais um <div> vazio de altura var(--secao)
   para devolver o respiro que --topo zerava. */
.secao--capa {
  position: relative;
  overflow: hidden;
  padding-top: 118px;
  padding-bottom: var(--secao);
}

.secao--capa__veu {
  position: absolute;
  inset: 0;
  background: #1D4A76;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Seção bem mais curta que o hero: um véu plano na cor do próprio navy
   (não o degradê do hero) basta para manter o contraste do texto. */
.secao--capa__sombra {
  position: absolute;
  inset: 0;
  background: rgba(7, 27, 46, .35);
  pointer-events: none;
}

/* Grades nomeadas. Ficam aqui, e não inline, porque estilo inline vence media
   query: um grid declarado no atributo style nunca colapsa no celular. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Imagem que cobre a seção com margem para o object-fit:cover sempre ter
   folga nas bordas. O reset global "img { max-width: 100% }" prendia essa
   largura a 100% do container mesmo com width:106% — sobrava uma faixa de
   ~3% sem imagem numa borda (o "não chega ao final" relatado no mobile). */
.foto-cheia {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: 64px;
  align-items: end;
  margin-top: 200px;
}

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3xl); }
.duo--fim    { align-items: end; }
.duo--topo   { align-items: start; }
.duo--rotulo { grid-template-columns: 220px 1fr; align-items: start; }
.duo--acao   { grid-template-columns: 1.4fr auto; align-items: center; }

.form__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 460px);
  gap: var(--e-3xl);
  align-items: start;
}

/* Grade de 1px: o hairline É o gap. */
.grade-hairline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.grade-hairline--dupla { grid-template-columns: 1fr 1fr; }

.grade-hairline > .celula {
  background: var(--branco);
  padding: var(--e-2xl) 36px;
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  text-decoration: none;
  color: var(--fg);
  transition: background var(--t-base);
}
.sobre-navy .grade-hairline > .celula { background: var(--meia-noite); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Lista numerada: a primeira coluna existe só para segurar o número. */
.grid-num { display: grid; grid-template-columns: 110px 1fr 1fr; gap: var(--e-2xl); }

/* Corpo do case: ocupa as duas colunas de conteúdo e vai até o fim da seção.
   O `span` mora aqui, não no atributo style, pela mesma razão das grades
   acima — inline venceria a media query e deixaria uma coluna fantasma no
   celular. O teto de `70ch` do .t-body existe para segurar a medida em texto
   corrido, mas aqui parava a linha em 728px numa coluna de 1042px, e o texto
   encostava todo de um lado só. Medida longa é o preço, e foi escolha
   deliberada. */
.case__corpo { grid-column: span 2; }
.case__corpo .t-body { max-width: none; }

.medida      { max-width: min(640px, 56%); }
.medida-larga{ max-width: min(880px, 62%); }
.medida-fixa { max-width: 820px; }

.pilha    { display: flex; flex-direction: column; gap: var(--e-lg); }
.pilha-sm { display: flex; flex-direction: column; gap: var(--e-xs); }
.linha    { display: flex; align-items: center; gap: var(--e-md); flex-wrap: wrap; }

/* =========================================================================
   Tipografia — A Regra do Aperto: display sempre com tracking negativo.
   ========================================================================= */

.t-hero, .t-display, .t-headline, .t-title {
  font-family: var(--fonte-display);
  margin: 0;
  text-wrap: balance;
}

.t-hero {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.04em;
}

.t-display {
  font-weight: 800;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.t-headline {
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.t-title {
  font-weight: 700;
  font-size: clamp(26px, 2.7vw, 36px);
  line-height: 1.14;
  letter-spacing: -.03em;
}

.t-card {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -.025em;
  margin: 0 0 var(--e-lg);
}

.t-card--sm { font-size: 22px; margin: 0 0 12px; }

/* Corpo denso: texto legal e listas longas, um passo abaixo do corpo padrão. */
.t-body--denso { max-width: 72ch; font-size: 16px; line-height: 1.68; }

.t-body {
  max-width: 70ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fg-corpo);
  text-wrap: pretty;
  margin: 0;
}

.t-body-sm {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-corpo);
  margin: 0;
}

.t-meta {
  font-size: 13.5px;
  color: var(--fg-secundario);
}

/* A Regra da Etiqueta: toda seção abre com ela, nunca um título solto.
   É o único lugar do sistema onde caixa alta é permitida em texto. */
.etiqueta {
  margin: 0 0 var(--e-lg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-secundario);
}

.etiqueta--card {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--acento-texto);
}

.destaque { color: var(--ouro-operacional); }

/* Jornada: primeiro e último passo acesos, o meio em repouso. Vira coluna
   abaixo de 560px — ver bloco responsivo. */
.jornada {
  list-style: none;
  margin: 70px 0 0;
  padding: var(--e-xl) 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: var(--e-xs);
  flex-wrap: wrap;
  overflow: hidden;
}
.jornada__item {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  padding: var(--e-xs) 12px;
  border-radius: var(--raio-sm);
}
.jornada__ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  background: rgba(7, 27, 46, .3);
}
.jornada__item--aceso .jornada__ponto { background: var(--ouro-operacional); }
.jornada__rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-secundario);
}
.jornada__item--aceso .jornada__rotulo { color: var(--fg); }
.jornada__linha {
  flex: 1;
  min-width: 14px;
  height: 1px;
  background: rgba(7, 27, 46, .16);
}

/* O destaque dentro de display grande pode usar o âmbar de superfície:
   acima de 24px o piso que vale é 3:1, e ele o satisfaz. */
.sobre-claro .t-headline .destaque,
.sobre-claro .t-display .destaque,
.sobre-claro .t-title .destaque { color: var(--ouro-superficie); }

/* =========================================================================
   Botões e links — precisos e contidos.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-sm);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--raio-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-rapida), transform var(--t-rapida);
}

.btn__seta { font-size: 15px; line-height: 1; }

.btn--primario {
  background: var(--ouro-operacional);
  color: var(--meia-noite);
  padding: 17px 26px;
}

.btn--compacto { font-size: 14px; padding: 13px 22px; }

/* Desabilitado/ocupado: o botão continua legível — some a reação, não o texto.
   Opacidade sozinha derrubaria o contraste, então o fundo é que recua. */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: progress;
  transform: none !important;
  filter: saturate(.55);
  opacity: .8;
}
.btn:disabled:hover { transform: none; }
.btn--escuro:disabled { background: var(--meia-noite-elevado); }
.btn--primario:disabled { background: var(--ouro-superficie); }

.btn--escuro {
  background: var(--meia-noite);
  color: var(--papel);
  padding: 17px 24px;
  transition: background var(--t-lenta);
}
.btn--escuro:hover { background: var(--meia-noite-elevado); color: var(--papel); }

.btn--contorno {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--linha);
  padding: 16px 24px;
  transition: border-color var(--t-base), background var(--t-base);
}
.btn--contorno:hover { border-color: var(--ouro-operacional); color: var(--fg); }

/* Link de texto com sublinhado próprio. Usa --acento-texto: em fundo claro
   isso é #8A5A00, o único âmbar que passa em 4.5:1. */
.link-inline {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--e-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--acento-texto);
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom: 4px;
  transition: border-color var(--t-rapida);
}
.link-inline:hover { color: var(--acento-texto); border-bottom-color: currentColor; }

/* Gancho de card: texto em Grafite, só a seta carrega o âmbar (o traço, não
   o texto). A grade de soluções tinha 12 elementos âmbar numa tela — a Regra
   do Sinal permite um por card, e aqui é a seta. */
.gancho {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-corpo);
}
.gancho__seta { color: var(--acento-grafico); }

/* =========================================================================
   Chip — a única forma arredondada do sistema.
   ========================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ouro-texto);
  background: rgba(255, 166, 0, .12);
  border: 1px solid rgba(255, 166, 0, .35);
  padding: var(--e-xs) var(--e-md);
  border-radius: var(--raio-pill);
}

.sobre-navy .chip { color: var(--ouro-operacional); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-sm); }

/* Chip neutro: mesma forma, sem âmbar. Para contexto denso (5-8 por case) onde
   o chip âmbar do sistema (uso raro, 1-3 por seção) viraria textura em vez de
   sinal — a Regra do Sinal existe para isto. */
.chip--neutro {
  color: var(--fg-secundario);
  background: transparent;
  border-color: var(--linha);
}

/* Domínio sob o nome do site nos cases: versalete pequeno, mas é link. */
/* Card dos "Sites no ar": link único, print real como capa. */
.card-site {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  color: var(--meia-noite);
  border: 1px solid rgba(7, 27, 46, .10);
  border-radius: 0;
  text-decoration: none;
  transition: border-color var(--t-base);
}
.card-site:focus-visible { outline-offset: -2px; }

.case-site__capa {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--papel);
  border-bottom: 1px solid var(--linha-suave);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-site__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }

.link-dominio {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-secundario);
  transition: color var(--t-rapida);
}
.link-dominio:hover { color: var(--acento-texto); }

/* =========================================================================
   Cards — A Regra do Card Reto: card não tem raio.
   A Regra Sem Sombra: profundidade é pilha tonal e hairline de 1px.
   ========================================================================= */

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  padding: 36px var(--e-2xl) var(--e-2xl);
}

.card--escuro { background: var(--meia-noite); color: var(--papel); }
.card--claro  { background: var(--branco); color: var(--meia-noite); border: 1px solid rgba(7, 27, 46, .10); }
.card--alto   { min-height: 300px; justify-content: space-between; gap: var(--e-2xl); }

a.card { text-decoration: none; transition: border-color var(--t-base), transform var(--t-base); }

.card__topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-lg);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}

.card__conteudo { position: relative; }
.card__seta { font-size: 15px; color: var(--acento-grafico); line-height: 1; }

/* Marca d'água do símbolo: textura de superfície, nunca conteúdo. */
.marca-dagua {
  position: absolute;
  right: -70px;
  top: -70px;
  width: 250px;
  /* height:auto neutraliza o atributo height do <img>, que de outro modo vira
     altura CSS e achata a arte. Os atributos ficam só pela proporção. */
  height: auto;
  opacity: .16;
  pointer-events: none;
}
.marca-dagua--clara { opacity: .07; }
.marca-dagua--centro {
  right: auto; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76%;
  opacity: .055;
  /* grayscale(1) brightness(3) assado em innotec-simbolo-brilho-890.webp:
     era um filtro de pintura de ~970px reavaliado a cada scroll. */
}

/* =========================================================================
   Formulário
   ========================================================================= */

.campo { display: flex; flex-direction: column; gap: var(--e-xs); }

.campo__rotulo { font-size: 13px; font-weight: 500; color: var(--grafite-corpo); }

/* Opt-in: a caixa e o texto são um alvo só, e o texto não encosta na caixa. */
.campo__aceite {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-corpo);
  cursor: pointer;
}
.campo__aceite input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ouro-operacional);
  cursor: pointer;
}

.campo__entrada {
  font-family: var(--fonte-corpo);
  font-size: 15px;
  padding: var(--e-md) 16px;
  border: 1px solid rgba(7, 27, 46, .16);
  border-radius: var(--raio-sm);
  background: var(--papel);
  color: var(--meia-noite);
  outline: none;
  transition: border-color var(--t-base), background var(--t-base);
}
.campo__entrada::placeholder { color: var(--grafite-terciario); }
.campo__entrada:focus { border-color: var(--ouro-operacional); background: var(--branco); }
.campo__entrada[aria-invalid="true"] { border-color: var(--ferrugem); background: var(--ferrugem-superficie); }

textarea.campo__entrada { resize: vertical; min-height: 130px; }

.campo__erro { font-size: 13px; font-weight: 500; color: var(--ferrugem-texto); }

/* reCAPTCHA v2 --------------------------------------------------------------
   O widget tem 304x78px fixos e não é responsivo: o conteúdo vive num iframe
   de outra origem, fora do alcance deste arquivo. Abaixo de ~420px ele estoura
   o card (largura útil = viewport - 48 de gutter - 68 do padding do card), e a
   única saída é reduzir por transform. A altura do invólucro acompanha a
   escala; sem isso sobraria um vão do tamanho exato do que foi encolhido. */
.recaptcha {
  --escala: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  margin-top: 4px;
}
.recaptcha__caixa {
  transform: scale(var(--escala));
  transform-origin: 0 0;
  height: calc(78px * var(--escala));
}
@media (max-width: 419px) { .recaptcha { --escala: .86; } }
@media (max-width: 382px) { .recaptcha { --escala: .76; } }
@media (max-width: 352px) { .recaptcha { --escala: .64; } }

.aviso {
  border-left: 1px solid var(--ouro-operacional);
  background: rgba(255, 166, 0, .08);
  padding: 18px var(--e-lg);
  font-size: 15px;
  line-height: 1.6;
  color: var(--grafite-corpo);
}
.aviso--ok { border-left-color: var(--ouro-operacional); }
.aviso--erro { border-left-color: var(--ferrugem); background: var(--ferrugem-superficie); color: var(--ferrugem-texto); }
.aviso strong { color: var(--meia-noite); }

/* =========================================================================
   Cabeçalho e navegação
   ========================================================================= */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 27, 46, .9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(245, 247, 250, .08);
  padding-top: env(safe-area-inset-top);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-xl);
  min-height: 78px;
}

.cabecalho__acoes { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

/* O link do logo carrega a área de toque; a imagem mantém o tamanho visual. */
.marca {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 12px 0;
}
.marca img { height: 26px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; justify-content: center; }

.nav__item {
  position: relative;
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--papel);
  padding: 25px 0;
  transition: color var(--t-rapida);
}
.nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 20px;
  height: 2px;
  background: var(--ouro-operacional);
}

.social { display: flex; align-items: center; gap: 4px; }

/* 18px de ícone dentro de 44px de alvo: o desenho não muda, o dedo acerta. */
.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bruma-secundario);
  transition: color var(--t-rapida);
}
.social__link:hover { color: var(--ouro-operacional); }

.divisor-vertical { width: 1px; height: 20px; background: rgba(245, 247, 250, .14); display: block; }

/* =========================================================================
   Menu mobile — <details> nativo: sem JS, com teclado e Esc de graça.
   Não é a nav de desktop encolhida: é outra arquitetura para outro contexto.
   ========================================================================= */

.menu { display: none; }

.menu__botao {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: 44px;
  padding: 0 4px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--papel);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu__botao::-webkit-details-marker { display: none; }

.menu__traços { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.menu__traços span {
  display: block;
  height: 2px;
  background: var(--papel);
  transition: transform var(--t-base), opacity var(--t-rapida);
}
.menu[open] .menu__traços span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu__traços span:nth-child(2) { opacity: 0; }
.menu[open] .menu__traços span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Bloco normal dentro do cabeçalho sticky, não position:fixed: o Chrome aplica
   contenção de layout no conteúdo de <details>, o que torna esse conteúdo o
   bloco-contêiner de descendentes fixos — um painel fixo ali colapsa. Como o
   cabeçalho já é sticky, o painel fica preso no topo de qualquer jeito. */
/* Só existe quando o <details> está aberto. :has() faz a ponte porque o painel
   deixou de ser descendente dele. */
.menu__painel { display: none; }
.cabecalho:has(.menu[open]) .menu__painel { display: flex; }

.menu__painel {
  height: calc(100dvh - 64px - env(safe-area-inset-top));
  background: var(--meia-noite);
  border-top: 1px solid rgba(245, 247, 250, .08);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-xs) max(var(--gutter), env(safe-area-inset-left)) calc(var(--e-2xl) + env(safe-area-inset-bottom));
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-2xl);
}

.menu__lista { display: flex; flex-direction: column; }

.menu__item {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--fonte-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--papel);
  border-bottom: 1px solid rgba(245, 247, 250, .1);
}
/* A barra do item ativo troca de eixo: horizontal na barra, vertical na lista. */
.menu__item[aria-current="page"] {
  color: var(--ouro-operacional);
  box-shadow: inset 3px 0 0 var(--ouro-operacional);
  padding-left: var(--e-md);
}

.menu__rodape { display: flex; flex-direction: column; gap: var(--e-md); }
.menu__contato {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--bruma-corpo);
  font-size: 15px;
}
.social--menu { gap: var(--e-xs); }
.social--menu .social__link { border: 1px solid rgba(245, 247, 250, .16); }

/* Na coluna da marca do rodapé os ícones ficam SEM moldura: ali eles seguem o
   logo e um parágrafo, e uma caixa desenhada em volta pesaria mais que os dois
   canais que ela anuncia. Sem moldura, porém, os 44px do alvo de toque viram
   13px de vazio de cada lado do desenho de 18px — o ícone começaria recuado em
   relação ao logo e ao texto acima, e o topo cairia 33px abaixo do parágrafo em
   vez dos 20px de ritmo da pilha. As duas margens negativas devolvem exatamente
   esses 13px: o alvo continua com 44px, o DESENHO é que passa a encostar na
   margem. Mesmo problema do .contato-grupo logo abaixo, resolvido do mesmo
   jeito — alinhar pelo que se vê, não pela caixa que não se vê. */
.social--rodape { margin: -13px 0 0 -13px; }

/* =========================================================================
   Seletor de idioma — PT · EN · ES

   Três links, não um menu: quem precisa dele é justamente quem não está
   lendo a página, e uma saída que só aparece depois de abrir alguma coisa é
   a pior saída possível nessa situação. Fica visível na barra até 560px;
   abaixo disso não há largura para logo + idioma + CTA + menu, e ele
   continua a um toque dentro do painel.
   ========================================================================= */

.seletor-idioma { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* 12px de texto dentro de 44px de alvo, como o .social__link ao lado: o
   desenho não muda, o dedo acerta. O tabular-nums não entra aqui — são
   letras —, mas a largura mínima impede que "PT" e "EN" desenhem caixas de
   larguras diferentes e a fileira fique irregular. */
.seletor-idioma__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bruma-secundario);
  transition: color var(--t-rapida);
}
.seletor-idioma__item:hover { color: var(--ouro-operacional); }

/* O idioma atual é o único em branco cheio, com a mesma barra âmbar que
   marca a página atual na nav. Sem a barra, "PT" aceso só por contraste de
   cor não se lê como estado — se lê como o link mais bonito dos três. */
.seletor-idioma__item--atual {
  position: relative;
  color: var(--papel);
  cursor: default;
}
.seletor-idioma__item--atual::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 11px;
  height: 2px;
  background: var(--ouro-operacional);
}

/* No painel do menu o seletor ganha rótulo escrito e caixas maiores: ali há
   espaço, e o dedo chega com menos precisão do que o ponteiro. */
.menu__idioma { display: flex; flex-direction: column; gap: var(--e-xs); }
.menu__idioma-rotulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bruma-secundario);
}
.seletor-idioma--menu { gap: var(--e-xs); margin-left: -4px; }
.seletor-idioma--menu .seletor-idioma__item {
  min-width: 48px;
  border: 1px solid rgba(245, 247, 250, .16);
}
.seletor-idioma--menu .seletor-idioma__item--atual {
  border-color: var(--ouro-operacional);
  color: var(--ouro-operacional);
}
/* Dentro da caixa com borda, a barra embaixo repetiria o que a borda já diz. */
.seletor-idioma--menu .seletor-idioma__item--atual::after { display: none; }

/* Na base do rodapé o seletor senta numa fileira de texto em caixa alta de
   12px, entre o copyright e a política. Herda essa métrica em vez de impor
   a sua, e perde o alvo de 44px porque a fileira inteira já é de 40px. */
.seletor-idioma--rodape { gap: 0; }
.seletor-idioma--rodape .seletor-idioma__item {
  min-width: 0;
  min-height: 40px;
  padding: 0 8px;
  letter-spacing: .1em;
}
.seletor-idioma--rodape .seletor-idioma__item--atual { color: var(--papel); }
.seletor-idioma--rodape .seletor-idioma__item--atual::after { bottom: 9px; left: 8px; right: 8px; }

/* =========================================================================
   Rodapé
   ========================================================================= */

.rodape { background: var(--meia-noite); color: var(--papel); padding: 80px 0 0; }

.rodape__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: var(--e-2xl);
  padding-bottom: var(--e-3xl);
}

.rodape__titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bruma-secundario);
  margin: 0 0 var(--e-lg);
}

.rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rodape__lista a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--papel);
  font-size: 15px;
  transition: color var(--t-rapida);
}
.rodape__lista a:hover { color: var(--ouro-operacional); }

/* align-items: center resolve um desencontro de 11px entre os dois lados: o
   link tem min-height de 40px (alvo de toque) e centraliza o próprio texto,
   enquanto o <span> do copyright era esticado pelo stretch padrão e escrevia
   no topo da caixa. Sem isto, os dois textos ficam em alturas diferentes. */
.rodape__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-lg);
  flex-wrap: wrap;
  padding: var(--e-xl) 0 calc(var(--e-xl) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(245, 247, 250, .08);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bruma-secundario);
}
/* Os dois lados da base recebem a MESMA caixa. Só centralizar pelo container
   deixava o <span> com 19,2px e o link com 40px, e a compensação virava um
   deslocamento fracionário de 10,4px — valor que arredonda para linhas de
   pixel diferentes conforme zoom e densidade de tela. Caixas iguais alinham
   por construção, não por cálculo. */
.rodape__base > * { display: inline-flex; align-items: center; min-height: 40px; }
.rodape__base a { color: var(--bruma-secundario); }

/* Links soltos dentro de colunas do rodapé (e-mail) também são alvo. */
.rodape a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
.rodape__base a:hover { color: var(--ouro-operacional); }

/* Canal de contato em linha: ícone no lugar do rótulo escrito. O ícone marca
   o tipo, o valor é o que se lê — e o alvo de toque cobre os dois. */
.contato-linha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-size: 14.5px;
  color: var(--bruma-corpo);
  transition: color var(--t-rapida);
}
.contato-linha svg { flex: 0 0 auto; color: var(--bruma-secundario); transition: color var(--t-rapida); }

/* O hover é só de link. A cidade usa a mesma linha para alinhar com as outras
   duas, mas não leva a lugar nenhum — acender no hover prometeria clique. */
a.contato-linha:hover,
a.contato-linha:hover svg { color: var(--ouro-operacional); }
.contato-linha--texto { margin: 0; color: var(--bruma-secundario); cursor: default; }

/* As três linhas de contato são um bloco só: some o gap de 12px da pilha que
   as separava dos botões, e o ritmo cai de 52px para 40px. O que encolhe é o
   espaço ENTRE as linhas, não a área clicável — os 40px de alvo de toque do
   rodapé ficam. A cidade repete a mesma altura mesmo sem ser link, senão o
   intervalo entre a segunda e a terceira linha sai menor que o das outras. */
.contato-grupo { display: flex; flex-direction: column; }
.contato-grupo .contato-linha { min-height: 40px; }

/* Mesma ideia em bloco, para a coluna ao lado do formulário: caixa do ícone,
   nome do canal em versalete e o valor em display. Herda os papéis de cor da
   superfície, então funciona tanto sobre navy quanto sobre claro. */
.canal {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--e-md);
  align-items: center;
  padding: var(--e-md) 0;
  color: var(--fg);
}
.canal + .canal { border-top: 1px solid var(--linha-suave); }

.canal__caixa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linha);
  color: var(--acento-grafico);
  transition: border-color var(--t-rapida);
}
.canal:hover .canal__caixa { border-color: var(--acento-grafico); }

.canal__rotulo {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-secundario);
}
/* O valor usa o Título Pequeno da rampa (.t-card--sm) — aqui só o que é
   layout: sem margem, e quebrando para o e-mail não estourar a coluna. */
.canal__valor {
  display: block;
  margin: 3px 0 0;
  word-break: break-word;
}
.canal:hover .canal__valor { color: var(--acento-texto); }

/* A nota é o que separa dois canais que mostram o mesmo número: sem ela,
   WhatsApp e Telefone leem como a mesma linha repetida. Tipografia é a do
   .t-meta — aqui só o que é layout. */
.canal__nota {
  display: block;
  margin-top: 4px;
}


/* =========================================================================
   FAQ
   ========================================================================= */

.faq__item { border-bottom: 1px solid var(--linha); }

.faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-lg);
  background: none;
  border: none;
  padding: 26px 0;
  font-family: var(--fonte-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.faq__pergunta:hover { color: var(--acento-texto); }

.faq__sinal { flex: 0 0 auto; font-size: 22px; color: var(--fg-secundario); transition: transform var(--t-base), color var(--t-rapida); }
.faq__item[open] .faq__sinal,
.faq__pergunta:hover .faq__sinal { color: var(--acento-grafico); }
.faq__item[open] .faq__sinal { transform: rotate(45deg); }

/* max-width em ch, não em px: sobrescrevia o piso de leitura de .t-body por
   ordem de cascata (mesma especificidade, regra posterior vence) — os 9
   achados de linha longa do detector em /faq vinham daqui. */
.faq__resposta { padding: 0 0 26px; max-width: 70ch; }

details.faq__item > summary { list-style: none; }
details.faq__item > summary::-webkit-details-marker { display: none; }

/* =========================================================================
   Movimento — um momento autorado, e estados que se explicam. Nada mais.
   ========================================================================= */

/* O MOMENTO FOCAL: os três verbos chegam como três estados da mesma operação.
   Cada linha sobe de trás de um recorte — o hairline do sistema virando régua —
   e a terceira acende em âmbar, o mesmo sinal da faixa da jornada. */
.hero__titulo { color: var(--branco); }

.hero__linha { display: block; overflow: hidden; }
/* O estado base é o estado FINAL. A entrada é fornecida pelo keyframe, não
   removida por ele: se a animação não rodar por qualquer motivo, o título
   aparece em vez de sumir atrás do recorte. */
.hero__linha > span {
  display: block;
  animation: inno-sobe-recorte .62s var(--curva-chegada) both;
}
.hero__linha:nth-child(2) > span { animation-delay: .11s; }
.hero__linha:nth-child(3) > span { animation-delay: .22s; }

/* O âmbar não aparece: liga. Cor é estado, não entrada. */
.hero__linha--sinal > span {
  color: var(--ouro-operacional);
  animation: inno-sobe-recorte .62s var(--curva-chegada) .22s both,
             inno-acende .28s ease .74s backwards;
}

@keyframes inno-sobe-recorte {
  from { transform: translateY(105%); }
  to { transform: none; }
}
/* Acende: sai do branco do resto do título e liga no âmbar. */
@keyframes inno-acende {
  from { color: var(--papel); }
  to { color: var(--ouro-operacional); }
}

/* Apoio do hero: entra depois que o título assenta, sem competir com ele. */
.hero__acoes, .hero__apoio { animation: inno-surge .5s var(--curva-chegada) both; }
.hero__acoes { animation-delay: .56s; }
.hero__apoio { animation-delay: .66s; }

@keyframes inno-surge { from { opacity: 0; } to { opacity: 1; } }

/* Aviso do formulário: confirma que o envio aconteceu. */
.aviso { animation: inno-aviso .32s var(--curva-chegada) both; }
@keyframes inno-aviso {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* FAQ: a resposta cresce em vez de piscar. Onde ::details-content não existe,
   o conteúdo simplesmente aparece — degradação limpa, sem script. */
/* O estado fechado NÃO declara altura: quem esconde é o próprio <details>.
   O zero entra só como ponto de partida da transição, via @starting-style —
   assim, se a transição não rodar, a resposta aparece em vez de ficar presa. */
.faq__item::details-content {
  overflow: hidden;
  transition: block-size .32s var(--curva-chegada), content-visibility .32s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
@starting-style {
  .faq__item[open]::details-content { block-size: 0; }
}

/* Painel do menu: desce da barra em vez de surgir do nada. */
.menu__painel {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .24s ease, transform .24s var(--curva-chegada), display .24s allow-discrete;
}
.cabecalho:has(.menu[open]) .menu__painel { opacity: 1; transform: none; }
@starting-style {
  .cabecalho:has(.menu[open]) .menu__painel { opacity: 0; transform: translateY(-10px); }
}

/* =========================================================================
   Responsivo — A Regra do Zero Breakpoint diz para tentar clamp(), min() e
   flex-wrap antes de uma media query. O que resta aqui é o que não escala
   sozinho: grades de coluna fixa e a régua em telas estreitas.
   ========================================================================= */

/* Faixa intermediária: cabe navegação OU enfeite, não os dois.

   O seletor de idioma somou ~125px à direita da barra, e entre o ponto em que
   o menu de hambúrguer aparece (900px) e ~1150px isso não cabia junto com a
   navegação de seis itens — que em inglês e espanhol é mais larga que em
   português ("Case studies", "Soluciones"). Quem sai são os ícones sociais: o
   Instagram e o Facebook estão repetidos no rodapé e no painel do menu, e
   nesta largura um atalho para a rede social vale menos que a única saída de
   quem não lê a língua da página. O CTA encolhe pelo mesmo motivo, com a
   mesma métrica que ele já usa no celular.
   ========================================================================= */
@media (max-width: 1200px) {
  /* Pega o bloco de ícones E o divisor ao lado: os dois carregam a classe. */
  .social--barra { display: none; }
  .cabecalho__cta { font-size: 13px; padding: 12px 16px; }
  /* Os últimos ~24px vêm daqui, e é o que faz a barra em espanhol — a mais
     larga das três — voltar a caber na mesma janela que a em português já
     exigia antes do seletor existir. O alvo de toque continua nos 44px de
     altura; o que encolhe é a folga lateral. */
  .cabecalho__acoes { gap: 12px; }
  .seletor-idioma--barra .seletor-idioma__item { min-width: 30px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --secao: 72px; }

  .grid-2, .grid-3,
  .hero__grid, .duo, .duo--rotulo, .duo--acao,
  .form__grid, .grade-hairline, .grade-hairline--dupla { grid-template-columns: 1fr; }
  .hero__grid { margin-top: 120px; gap: var(--e-xl); align-items: start; }
  .duo, .form__grid { gap: var(--e-xl); }
  .grid-num { grid-template-columns: 1fr; gap: var(--e-md); }
  .case__corpo { grid-column: auto; }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
  .medida, .medida-larga { max-width: 100%; }
  .card { padding: var(--e-xl) 24px 24px; }

  /* A barra de navegação dá lugar ao menu. Não é a mesma nav menor:
     é uma lista vertical de toque, com o contato junto. */
  .nav--barra, .social--barra { display: none; }
  .menu { display: block; }
  .cabecalho__barra { min-height: 64px; }
  .cabecalho__acoes { gap: var(--e-sm); }
}

@media (max-width: 560px) {
  .rodape__grid { grid-template-columns: 1fr; }
  /* Três itens empilhados: o space-between de duas colunas deixava o seletor
     sozinho numa linha, encostado à esquerda. */
  .rodape__base { justify-content: center; text-align: center; gap: var(--e-sm); }
  .btn { width: 100%; }
  /* O CTA da barra encolhe para caber ao lado do menu, sem quebrar linha. */
  .cabecalho__cta { font-size: 13px; padding: 11px 14px; white-space: nowrap; }
  .cabecalho__cta .btn__seta { display: none; }
  .menu__rotulo { display: none; }
  .menu__botao { padding: 0 4px; }
  /* Logo + idioma + CTA + menu não cabem em 375px. O seletor sai da barra e
     continua no painel do menu, com rótulo escrito e caixas maiores. */
  .seletor-idioma--barra { display: none; }

  /* Tira da jornada: 7 passos + 6 conectores num único flex-wrap horizontal
     quebravam linha por linha, cada conector começando e terminando no vazio.
     Empilhada, a sequência linear volta a se ler como sequência. */
  .jornada { flex-direction: column; align-items: flex-start; gap: 0; overflow: visible; }
  .jornada__item { width: 100%; padding: 10px 0; }
  .jornada__linha { flex: none; width: 1px; height: 14px; min-width: 0; margin-left: 3px; }
}

/* Abaixo de ~380px o CTA persistente some: logo + CTA + botão de menu não
   cabem em 320px de largura (91 + 137 + 26 + 48 de gutter = 302, mas o CTA
   real ficava recortado pelo overflow-x:hidden do body). O CTA continua a um
   toque de distância dentro do painel do menu. */
@media (max-width: 380px) {
  .cabecalho__cta { display: none; }
  .menu__botao {
    width: 44px;
    justify-content: center;
    padding: 0;
  }
}

/* Celular deitado: 390px de altura não comporta um hero de tela cheia.
   Encolhe o respiro em vez de empurrar o CTA para fora da tela. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; }
  /* Deitado há largura de sobra: empilhar era herança do retrato. Voltar a
     duas colunas corta quase metade da altura do hero. */
  .hero__grid { grid-template-columns: 1fr minmax(200px, 280px); margin-top: var(--e-2xl); gap: var(--e-xl); align-items: end; }
  .hero .regua { padding-bottom: var(--e-2xl); }
  .secao { padding-top: 56px; padding-bottom: 48px; }
  .secao--topo { padding-top: 64px; }
  .menu__painel { padding-top: var(--e-xs); }
}

/* Ponteiro grosso (dedo, caneta): o alvo cresce, o desenho não.
   Vale em qualquer largura — tablet com teclado, laptop com toque. */
@media (pointer: coarse) {
  .rodape__lista a, .rodape__base a { min-height: 44px; }
  .nav__item { padding-top: 20px; padding-bottom: 20px; }
  .link-inline { padding-top: 10px; padding-bottom: 10px; }
  .menu__contato { min-height: 48px; }
  .campo__entrada { padding-top: 15px; padding-bottom: 15px; }
}

/* Sem hover não deve existir estado preso: o toque "gruda" o :hover em
   muitos navegadores, deixando cartões levantados depois do tap. */
@media (hover: hover) {
  a.card:hover { transform: translateY(-3px); }
  a.card--claro:hover { border-color: var(--ouro-operacional); }
  .card-site:hover { border-color: var(--ouro-operacional); }
    .celula:hover { background: var(--papel); }
  .celula:hover .gancho { color: var(--acento-texto); }
  .sobre-navy .celula:hover { background: var(--meia-noite-elevado); }
}

/* Quem pede menos movimento não pediu menos retorno. Some o deslocamento
   espacial e a entrada coreografada; ficam cor, borda, opacidade e contorno —
   é o que confirma hover, foco, abertura do FAQ e envio do formulário. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, outline-color, opacity, box-shadow, fill, stroke !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }

  /* Sem a animação, o estado final precisa valer desde o primeiro quadro. */
  .hero__linha > span { transform: none; opacity: 1; }
  .hero__linha--sinal > span { color: var(--ouro-operacional); }
  .hero__acoes, .hero__apoio, .aviso { opacity: 1; transform: none; }

  /* O FAQ abre e fecha na hora, mas continua abrindo e fechando. */
  .faq__item::details-content { transition: none; }
}