/* ============================================================
   InnBar - folha principal
   Tema travado: uma só família de superfície por modo, com uma
   única inversão deliberada na seção de fechamento.
   CSS nativo, sem framework e sem etapa de build.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Primitivas ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-section); position: relative; }
/* Era um style inline. Virou classe para a CSP poder recusar
   atributos de estilo soltos no HTML. */
.section--tint { background: var(--bg-2); border-block: 1px solid var(--line); }

/* ---------- Tipografia ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Escala planejada junto com o tamanho da imagem do hero: o título
   tem 13 palavras, então não começa em display gigante. */
.h1 { font-size: clamp(2.2rem, 3.7vw, 3.2rem); }
.h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.12; }
.lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--text-soft);
  max-width: 48ch;
  text-wrap: pretty;
}
.gold { color: var(--gold); }

/* ============================================================
   Botões: pill, com o ícone dentro do seu próprio círculo
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .4375rem .4375rem .4375rem 1.375rem;
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn__ico {
  width: 1.875rem; height: 1.875rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .8125rem;
  transition: transform var(--t-ui) var(--ease-out),
              background-color var(--t-ui) var(--ease-out);
}

/* Sombra neutra e contida: --lift-2 é tingida de navy, e um botão navy
   sobre a foto escura do hero ganhava um halo da própria cor. */
.btn--primary {
  background: var(--navy); color: #f3f6fa;
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 6px 16px -8px rgba(0,0,0,.2);
}
.btn--primary .btn__ico { background: rgba(243,246,250,.14); }
.btn--ghost { background: var(--tint-ink); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost .btn__ico { background: var(--tint-ink); }
.btn--gold {
  background: var(--gold); color: #1a1205;
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 6px 16px -8px rgba(0,0,0,.2);
}
.btn--gold .btn__ico { background: rgba(26,18,5,.16); }
.btn--on-dark {
  background: rgba(243,246,250,.08); color: #f3f6fa;
  box-shadow: inset 0 0 0 1px rgba(243,246,250,.18);
}
.btn--on-dark .btn__ico { background: rgba(243,246,250,.12); }
.btn--sm { padding: .3125rem .3125rem .3125rem 1.125rem; font-size: .8125rem; }
.btn--sm .btn__ico { width: 1.625rem; height: 1.625rem; font-size: .75rem; }

/* O hover só existe onde há cursor de verdade. Em toque, :hover
   dispara no tap e deixa o botão preso no estado ativo. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--navy-800); box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 24px -10px rgba(0,0,0,.26); }
  .btn--primary:hover .btn__ico { background: var(--gold); }
  .btn--ghost:hover { background: rgba(20,35,54,.07); }
  .btn--gold:hover { background: var(--gold-400); box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 24px -10px rgba(0,0,0,.26); }
  .btn--on-dark:hover { background: rgba(243,246,250,.14); }
  .btn:hover .btn__ico { transform: translateX(2px); }
}

/* ============================================================
   Navegação
   ============================================================ */
/* Presa no topo da página, não na janela. Rola junto com o conteúdo em
   vez de deslizar por cima dele. Fica absolute, e não no fluxo, para a
   foto do hero continuar começando no topo em vez de ser empurrada
   para baixo pela altura da barra. */
.nav-wrap {
  position: absolute; inset-inline: 0; top: 0; z-index: 40;
  display: flex; justify-content: center;
  pointer-events: none;
  /* O véu que garante a leitura dos links é fundo deste contêiner, e
     não uma camada separada: só assim ele conta como fundo do texto.
     Vai além da altura da barra e desvanece, para não virar uma faixa
     com borda reta cortando a foto. */
  padding-bottom: 3.5rem;
  background: linear-gradient(to bottom,
    rgba(8,15,25,.88) 0%,
    rgba(8,15,25,.72) 42%,
    rgba(8,15,25,.3) 72%,
    rgba(8,15,25,0) 100%);
}
/* Barra encostada no topo, ocupando a largura inteira. Antes era uma
   ilha com 1rem de respiro acima, e nessa faixa o conteúdo da página
   aparecia passando por cima da barra. */
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%; height: 68px;
  /* Alinha o conteúdo com a coluna do resto da página sem precisar de
     um elemento a mais só para isso. */
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  /* Sem fundo: a barra mora sobre a foto do hero e não muda de aparência
     em nenhum momento. Não há mais estado "colado", porque ela não
     acompanha a rolagem. */
  background: transparent;
}
.nav__brand { flex: none; display: block; }
.nav__brand img {
  height: 26px; width: auto;
  transition: filter var(--t-ui) var(--ease-out);
}
/* Enquanto a barra está transparente, ela flutua sobre a foto escura do
   hero: o wordmark navy sumiria nela, então clareia. Ao ganhar fundo,
   volta à cor da marca. */
/* A barra está sempre sobre a foto escura do hero, então logo, links e
   botão são sempre claros. Não há um segundo estado. */
.nav__brand img { filter: brightness(0) invert(1); }
.burger { background: rgba(243,246,250,.1); box-shadow: inset 0 0 0 1px rgba(243,246,250,.22); }
.burger span { background: #f3f6fa; }

/* O menu abre com um painel claro atrás da barra. Se a página ainda
   estiver no topo, a barra está no modo claro e o logo branco some
   nesse painel, junto com o X de fechar. Aberto o menu, a barra volta
   às cores da marca, não importa onde a rolagem esteja. */
body.menu-open .nav__brand img { filter: none; }
body.menu-open .burger {
  background: var(--tint-ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
body.menu-open .burger span { background: var(--text); }

/* O wordmark é navy sólido; no modo escuro ele precisa clarear
   para não desaparecer na própria superfície. */
@media (prefers-color-scheme: dark) {
  .foot__logo { filter: brightness(0) invert(.92); }
}
.nav__links { display: flex; align-items: center; gap: 1.5rem; margin-inline: auto; }
.nav__link {
  position: relative;
  font-size: .8125rem; font-weight: 500;
  /* Claro: a barra vive sobre a foto escura do hero. Esta cor fica aqui,
     e não numa regra acima, porque duas regras de mesma especificidade
     se resolvem pela ordem, e a de baixo ganhava. */
  color: #eef3f8;
  transition: color var(--t-ui) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: #fff; }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
}

.burger {
  display: none; position: relative; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--tint-ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1.5px; border-radius: 2px; background: var(--text);
  transition: transform var(--t-ui) var(--ease-out), opacity 120ms var(--ease-out);
}
.burger span:nth-child(1) { transform: translate(-50%, -4.5px); }
.burger span:nth-child(2) { transform: translate(-50%, 0); }
.burger span:nth-child(3) { transform: translate(-50%, 4.5px); }
body.menu-open .burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

.overlay {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-ui) var(--ease-out), visibility var(--t-ui) var(--ease-out);
}
body.menu-open .overlay { opacity: 1; visibility: visible; }
.overlay__link {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 9vw, 2.75rem); line-height: 1.6;
  letter-spacing: -.03em;
  opacity: 0; transform: translateY(1rem);
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
body.menu-open .overlay__link { opacity: 1; transform: translateY(0); }
/* Escalonamento curto: passos de 45ms. Mais que isso e o menu
   parece lento em vez de coreografado. */
body.menu-open .overlay__link:nth-child(1) { transition-delay: 40ms; }
body.menu-open .overlay__link:nth-child(2) { transition-delay: 85ms; }
body.menu-open .overlay__link:nth-child(3) { transition-delay: 130ms; }
body.menu-open .overlay__link:nth-child(4) { transition-delay: 175ms; }
body.menu-open .overlay__link:nth-child(5) { transition-delay: 220ms; }

/* ============================================================
   Contêineres: casca externa e núcleo interno, raios concêntricos
   ============================================================ */
.shell {
  padding: 6px;
  border-radius: var(--r-shell);
  background: var(--tint-ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.core {
  height: 100%;
  border-radius: var(--r-core);
  background: var(--surface);
  box-shadow: var(--inner-hi), var(--lift-1);
  overflow: hidden;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center;
  /* Teto de padding no topo: mais que isso e o conteúdo flutua
     no meio da viewport e lê como bug de layout. */
  padding-block: 6rem 4rem;
  overflow: hidden;
}
/* A foto cobre a seção. object-position empurra o enquadramento para a
   direita, deixando a madeira escura do móvel sob a coluna de texto. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 64% center;
}
/* O escurecimento que garante o contraste está embutido no próprio JPG,
   não aqui: uma camada irmã não conta como fundo do texto para auditoria
   de contraste, e o arquivo escuro vale em qualquer recorte da foto.
   Este véu só aprofunda a base e a esquerda. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(8,15,25,.5) 0%, rgba(8,15,25,.22) 48%, rgba(8,15,25,0) 85%),
    linear-gradient(to top, rgba(8,15,25,.45) 0%, rgba(8,15,25,0) 30%);
}
/* O .wrap continua centralizando o container na tela; é este filho que
   limita a coluna de texto, encostada à esquerda sobre a área escura. */
.hero .wrap { position: relative; z-index: 2; }
.hero__inner { max-width: 40rem; }
.hero__title { margin-bottom: 1.5rem; color: #f4f7fa; }
.hero__inner .lede { color: #ccd6e2; }
/* Sobre o véu escuro o dourado da marca cai para 4,4:1. A variante
   clara sobe para bem acima do mínimo sem sair da identidade. */
.hero__inner .gold { color: var(--gold-400); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2rem; }

/* ============================================================
   Faixa de métricas (fora do hero, por disciplina de pilha)
   ============================================================ */
.metrics { border-block: 1px solid var(--line); background: var(--bg-2); }
.metrics__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
/* Escala menor que a de um numeral: são duas palavras, não um dígito,
   e precisam caber em uma linha por coluna. */
.metrics__n {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.1;
  letter-spacing: -.03em; color: var(--gold-600);
  text-wrap: balance;
}
.metrics__l { margin-top: .75rem; font-size: .9375rem; color: var(--text-soft); max-width: 30ch; }

/* ============================================================
   Cabeçalho de seção: empilhado, nunca headline à esquerda com
   um parágrafo solto flutuando na direita.
   ============================================================ */
.head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head__title { margin-block: 1rem .75rem; }

/* ============================================================
   Comparação
   ============================================================ */
/* Nenhuma caixa. O que separa as duas colunas é um filete e o espaço
   entre elas; o que agrupa cada lista é o salto de escala entre o
   rótulo e os itens. Caixa com borda e sombra em volta de texto é o
   recurso que marcas caras justamente evitam. */
.versus {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  position: relative;
}
/* Filete central, do tamanho exato do conteúdo, sem encostar nas pontas. */
.versus::before {
  content: ""; position: absolute;
  left: 50%; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--line);
}
.versus__col { padding: 0; }

.versus__cap {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
  padding-bottom: 1.25rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
}
/* Uma só cor de ação na página, e ela marca o lado que interessa. */
.versus__col--ours .versus__cap {
  color: var(--text);
  border-bottom-color: var(--gold);
}

.versus__list { display: grid; gap: 1.125rem; }
.versus__item {
  font-size: .9375rem; line-height: 1.6;
  color: var(--text-mute);
  padding-left: 1.125rem; position: relative;
}
/* Marcador mínimo no lugar do ícone: um traço de 10px. Ele ordena a
   lista sem competir com o texto, que é o que o ícone fazia. */
.versus__item::before {
  content: ""; position: absolute;
  left: 0; top: .72em;
  width: 10px; height: 1px;
  background: currentColor; opacity: .55;
}
/* O lado da InnBar pesa mais: texto um grau maior e mais escuro. Os
   dois lados no mesmo tamanho anulariam a comparação, que é o ponto
   da seção. */
.versus__col--ours .versus__item {
  color: var(--text);
  font-size: 1.0625rem;
}
.versus__col--ours .versus__item::before { background: var(--gold); opacity: 1; }

/* ============================================================
   Bento
   ============================================================ */
/* Os blocos de texto não têm caixa; só as células com foto, onde o
   recorte é exigido pela própria imagem. O espaço maior entre as
   células substitui a borda que marcava onde cada uma terminava. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); }
.bento__a { grid-column: span 7; }
.bento__b { grid-column: span 5; }
.bento__c { grid-column: span 5; }
.bento__d { grid-column: span 7; }
.bento__e { grid-column: span 6; }
.bento__f { grid-column: span 6; }

.card { height: 100%; display: flex; flex-direction: column; }
/* Card de texto: filete no topo no lugar da borda em volta. */
.card:not(.card--media) { padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* Dentro de uma célula com foto o padding continua, porque ali ainda
   existe um recorte de verdade. */
.card--media { padding: 0; }
/* O ícone perde o disco e o anel: solto, ele pesa menos e deixa o
   texto liderar. */
.card__ico {
  width: auto; height: auto; margin-bottom: 1rem;
  display: block; border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--gold); font-size: 1.5rem; flex: none;
}
.card__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .5rem; }
.card__d { font-size: .875rem; color: var(--text-soft); text-wrap: pretty; }

/* Foto sem moldura: a imagem é recortada direto, como numa página de
   revista. O raio pequeno tira o ar de "cartão" sem deixar o canto
   duro demais ao lado do texto. */
.card--media {
  padding: 0; position: relative; min-height: 20rem;
  border-radius: .25rem; overflow: hidden;
}
.card--media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* Base sólida atrás do texto, com o esmaecimento acima dela, fora da
   caixa de texto. Um gradiente atravessando o próprio texto perde
   opacidade quanto mais linhas ele ocupa, e no mobile isso derrubava
   o título para 3,3:1. Assim o contraste não depende de quantas linhas
   o título quebra, nem da foto que entrar aqui depois. */
.card--media .card__body {
  position: relative; z-index: 1; margin-top: auto;
  padding: 1.75rem;
  background: rgba(9,16,26,.96);
}
.card--media .card__body::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 5rem;
  background: linear-gradient(to top, rgba(9,16,26,.96), rgba(9,16,26,0));
  pointer-events: none;
}
.card--media .card__t { color: #f3f6fa; }
.card--media .card__d { color: #c3ccd8; }
.card--media { display: flex; flex-direction: column; }

/* ============================================================
   Processo
   ============================================================ */
/* Mesma lógica da comparação: sem caixa. Cada passo é ordenado por um
   filete no topo e pelo número, não por uma borda em volta do texto. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); }
.step { padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* O número é o salto de escala que organiza a leitura: grande e leve
   contra o título pequeno e firme. */
.step__n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1;
  letter-spacing: -.04em;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.step__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .5rem; }
.step__d { font-size: .875rem; color: var(--text-soft); }

/* ============================================================
   Fechamento: a única inversão de tema da página
   ============================================================ */
.close { background: var(--navy); color: #f3f6fa; position: relative; overflow: hidden; }
.close::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(171,127,64,.22) 0%, transparent 65%);
  pointer-events: none;
}
.close .wrap { position: relative; z-index: 1; text-align: center; }
.close__title { margin-block: 1.25rem 1rem; color: #f3f6fa; }
.close .lede { color: #a9b6c6; margin-inline: auto; }
.close__actions { display: flex; flex-wrap: wrap; gap: .625rem; justify-content: center; margin-top: 2.25rem; }
.close__fine { margin-top: 1.75rem; font-size: .8125rem; color: #a9b6c6; }
.close__link { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Formulário
   O cartão é claro de propósito: campo de formulário precisa de
   contraste previsível, e borda, placeholder e anel de foco sobre
   o navy cairiam abaixo do mínimo.
   ============================================================ */
.shell--on-dark {
  background: rgba(243,246,250,.07);
  box-shadow: inset 0 0 0 1px rgba(243,246,250,.14);
}
/* Um nível de cartão, não dois. O cartão existe aqui por necessidade:
   campo de formulário precisa de fundo claro e previsível, e o da
   seção é escuro. */
.form-wrap {
  max-width: 46rem; margin-inline: auto; margin-top: 2.5rem; text-align: left;
  background: var(--surface);
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 18px 40px -20px rgba(0,0,0,.3);
}
/* O cartão está dentro da seção escura, que define texto claro. Sem
   retomar a cor aqui, todo rótulo herda o claro e some no fundo branco. */
.form { padding: clamp(1.5rem, 3.5vw, 2.5rem); color: var(--text); }
/* display explícito vence o atributo hidden, então é preciso dizer. */
.form [hidden] { display: none !important; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.125rem; }

/* A armadilha de spam sai da tela sem display:none, que alguns robôs
   detectam, e fica fora da ordem de tabulação. */
.form__trap {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.field { display: flex; flex-direction: column; margin-top: 1rem; }
.form__grid .field { margin-top: 0; }
.field__l { font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
.field__req { color: var(--gold-600); }
.field__h { font-size: .8125rem; color: var(--text-soft); margin-bottom: .625rem; }
.field__i {
  width: 100%; padding: .6875rem .875rem;
  font: inherit; font-size: .9375rem; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: .625rem;
  transition: border-color var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out);
}
.field__i::placeholder { color: var(--text-mute); }
.field__i:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px var(--tint-gold);
}
.field__i--area { resize: vertical; min-height: 5.5rem; }
.field__i[aria-invalid="true"] { border-color: #a8413c; }
.field__i[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(168,65,60,.16); }
/* O erro fica abaixo do campo que ele descreve, nunca só na cor. */
.field__e { margin-top: .375rem; font-size: .8125rem; color: #8f3b37; }

/* ---------- Área de anexo ---------- */
.drop { position: relative; }
/* O input cobre a área inteira e fica invisível, mas continua sendo o
   elemento focado e clicado: o visual é só a face abaixo dele. */
.drop__i {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.drop__face {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; padding: 1.5rem 1rem; text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: .75rem;
  background: var(--bg);
  transition: border-color var(--t-ui) var(--ease-out),
              background-color var(--t-ui) var(--ease-out);
}
.drop__ico { font-size: 1.5rem; color: var(--gold-600); }
.drop__t { font-size: .875rem; font-weight: 600; }
.drop__d { font-size: .75rem; color: var(--text-soft); }
.drop__i:focus-visible + .drop__face,
.drop.is-over .drop__face {
  border-color: var(--gold-600);
  border-style: solid;
  background: var(--tint-gold);
}

.file {
  display: flex; align-items: center; gap: .625rem;
  margin-top: .625rem; padding: .6875rem .875rem;
  border: 1px solid var(--line-strong); border-radius: .625rem;
  background: var(--bg);
  font-size: .875rem;
}
.file__ico { font-size: 1.125rem; color: var(--gold-600); flex: none; }
.file__n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file__s { color: var(--text-soft); flex: none; }
.file__x {
  margin-left: auto; flex: none;
  font-size: .8125rem; font-weight: 600; color: #8f3b37;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---------- Aceite ---------- */
.consent { display: flex; align-items: flex-start; gap: .625rem; margin-top: 1.25rem; }
.consent__i { width: 1.0625rem; height: 1.0625rem; margin-top: .125rem; flex: none; accent-color: var(--gold-600); }
.consent__l { font-size: .8125rem; color: var(--text-soft); line-height: 1.5; }
.consent__a { color: var(--gold-600); text-decoration: underline; text-underline-offset: 2px; }

.form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.25rem;
  margin-top: 1.5rem;
}
.form__fine { font-size: .8125rem; color: var(--text-soft); }

.form__msg {
  margin-top: 1rem; padding: .8125rem 1rem;
  border-radius: .625rem; font-size: .875rem;
}
.form__msg--ok  { background: rgba(58,122,78,.12); color: #2c5c3b; box-shadow: inset 0 0 0 1px rgba(58,122,78,.3); }
.form__msg--erro{ background: rgba(168,65,60,.1);  color: #8f3b37; box-shadow: inset 0 0 0 1px rgba(168,65,60,.28); }

/* O botão não encolhe nem troca de largura entre os estados: isso
   faria o rodapé do formulário pular no meio do envio. */
#enviar[aria-busy="true"] { opacity: .75; pointer-events: none; }

/* ============================================================
   Rodapé
   ============================================================ */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); }
.foot__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.foot__logo { height: 58px; width: auto; margin-bottom: 1.25rem; }
.foot__d { font-size: .875rem; color: var(--text-soft); max-width: 34ch; }
.foot__h { font-size: .8125rem; font-weight: 700; margin-bottom: 1rem; }
.foot__list { display: grid; gap: .625rem; }
.foot__list a, .foot__list span { font-size: .875rem; color: var(--text-soft); transition: color var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__list a:hover { color: var(--gold-600); } }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.5rem; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--text-mute);
}

/* ============================================================
   Botão de voltar ao topo
   ============================================================ */
.subir {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  /* Acompanha a área segura em iPhone, senão o botão encosta na barra
     de gestos e vira um alvo difícil de acertar. */
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 30;

  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #f3f6fa;
  font-size: 1.125rem;
  /* Sombra própria, e não --lift-2: aquela tem 56px de desfoque tingido
     de navy, que sobre a seção escura lê como halo em volta do botão em
     vez de elevação. Aqui o deslocamento é real e a cor é neutra. */
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 10px 22px -10px rgba(0,0,0,.26),
              inset 0 0 0 1px rgba(243,246,250,.14);

  opacity: 0;
  transform: translateY(.5rem) scale(.9);
  transition: opacity var(--t-ui) var(--ease-out),
              transform var(--t-ui) var(--ease-out),
              background-color var(--t-ui) var(--ease-out);
}
/* O atributo hidden some com o botão de vez quando o JavaScript não
   roda; a classe controla a aparição durante a rolagem. */
.subir[hidden] { display: none; }
.subir.is-on { opacity: 1; transform: translateY(0) scale(1); }
.subir:active { transform: scale(.94); }

/* Com o menu aberto o botão sumiria atrás do vidro como uma mancha
   escura, e continuaria alcançável por teclado embora invisível. */
body.menu-open .subir {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .subir:hover { background: var(--navy-800); }
  .subir:hover i { transform: translateY(-2px); }
}
.subir i { transition: transform var(--t-ui) var(--ease-out); }

/* Sem JavaScript o botão nunca aparece, então não ocupa espaço nem
   confunde quem navega por teclado. */
@media (prefers-reduced-motion: reduce) {
  .subir { transition: opacity 1ms; transform: none; }
  .subir.is-on { transform: none; }
}

/* ============================================================
   Entrada por scroll. Observer, nunca listener de scroll.
   ============================================================ */
/* O estado escondido depende de .js no html: sem JavaScript o conteúdo
   nunca é ocultado, porque nada o revelaria depois. */
.js .reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity var(--t-enter) var(--ease-mass),
              transform var(--t-enter) var(--ease-mass);
}
.js .reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"] { transition-delay: 60ms; }
.reveal[data-d="2"] { transition-delay: 120ms; }
.reveal[data-d="3"] { transition-delay: 180ms; }

/* ============================================================
   Colapso responsivo, declarado por seção
   ============================================================ */
@media (max-width: 1024px) {
  /* Telas estreitas: o enquadramento volta ao centro, porque não há
     mais uma coluna lateral livre para a foto respirar. */
  .hero__bg { object-position: 58% center; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .bento__a, .bento__b, .bento__c, .bento__d, .bento__e, .bento__f { grid-column: span 6; }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .nav { justify-content: space-between; padding-right: .4375rem; }

  /* No celular não há coluna lateral: o texto cruza a parte iluminada
     da foto, então o reforço passa a ser uniforme. */
  .hero { min-height: 92dvh; padding-block: 7.5rem 3.5rem; }
  .hero__scrim {
    background: linear-gradient(to bottom, rgba(8,15,25,.55) 0%, rgba(8,15,25,.6) 100%);
  }
  .metrics__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Em coluna única o filete central não separa nada: vira um traço
     solto. A separação passa a ser horizontal, entre os dois blocos. */
  .versus { grid-template-columns: 1fr; gap: 2.5rem; }
  .versus::before { display: none; }
  .versus__col--ours { padding-top: 2.5rem; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  /* Uma coluna de verdade, não um span sobre as doze.
     Com `repeat(12, 1fr)` ativo, os onze gaps internos continuam existindo
     mesmo quando a célula ocupa a linha toda: 11 x 1.75rem = 308px de
     largura mínima, que não encolhe com a tela. Em 320px isso estourava
     a viewport em 23px e a página rolava para o lado. */
  .bento { grid-template-columns: 1fr; }
  .bento__a, .bento__b, .bento__c, .bento__d, .bento__e, .bento__f { grid-column: auto; }
  .foot__top { grid-template-columns: 1fr; }
}

/* ============================================================
   Entrada por toque
   Dedo não é cursor: o que basta para o mouse erra no polegar.
   Separado por ponteiro, e não por largura, porque existe laptop
   com tela sensível e tablet com teclado — a largura não diz
   com o que a pessoa está apontando.
   ============================================================ */
@media (pointer: coarse) {
  /* O Safari no iPhone dá zoom na página ao focar qualquer campo com
     fonte menor que 16px. O zoom desalinha o formulário inteiro e não
     volta sozinho. Os 15px daqui eram exatamente o suficiente para
     disparar isso. */
  .field__i { font-size: 1rem; }

  /* Área de toque sem mudar o desenho: o círculo continua com 40px,
     o alvo passa a 44. Sem isto, o único controle de navegação do
     celular é menor que o mínimo da plataforma. */
  .burger::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }

  /* Links de lista são alvos isolados, não texto corrido: ganham altura
     para passar dos 24px que a WCAG 2.5.8 pede, sem afastar as linhas
     a ponto de desmontar o ritmo do rodapé. */
  .foot__list a { display: inline-block; padding-block: .375rem; }
  .foot__bar a { display: inline-block; padding-block: .25rem; }
  .consent__a { display: inline-block; padding-block: .25rem; }
}