/* ---------------------------------------------------------------------------
   namos.com.br — folha única.

   Sem framework: a página é uma só, e o utilitário de CSS existe para reaproveitar
   entre muitas telas. O que sobra aqui é o que a marca precisa — as quatro cores
   com os MESMOS nomes usados no namos-portal (grafite/ambar/osso/aco), para que
   crescer o site depois seja mover token, não redescobrir a identidade.

   Cor nova não entra sem passar por :root.
--------------------------------------------------------------------------- */

:root {
  --grafite: #181D23;   /* fundo global — a marca nunca é clara */
  --ambar:   #FFB000;   /* acento ÚNICO: é o que o olho deve seguir */
  --osso:    #F4F2ED;   /* texto principal */
  --aco:     #8A8F98;   /* texto secundário */

  /* Derivados — tons de superfície, não cores novas. */
  --superficie: #1C222A;
  --borda:      #262D36;
  --ambar-quente: #FF8000;   /* hover do âmbar */

  --faixa-max: 1120px;
  --raio:   14px;
  --raio-g: 20px;
  --transicao: 180ms cubic-bezier(.2,.7,.3,1);
}

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/poppins-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/poppins-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/poppins-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--grafite);
  color: var(--osso);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* O alvo da âncora não pode nascer embaixo do topo fixo. */
:target { scroll-margin-top: 96px; }

.faixa {
  width: 100%;
  max-width: var(--faixa-max);
  margin-inline: auto;
  padding-inline: 20px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--ambar); color: var(--grafite);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--raio) 0;
  font-weight: 500; text-decoration: none; z-index: 100;
}
.pular:focus { left: 0; top: 0; }

:where(a, button):focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Topo ------------------------------------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(24, 29, 35, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.topo__interno {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding-block: .8rem;
}
.topo__marca { display: block; }
.topo__marca img { width: 116px; height: auto; }

.topo__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.topo__nav a {
  color: var(--aco);
  font-size: .9rem; font-weight: 500;
  text-decoration: none;
  transition: color var(--transicao);
}
.topo__nav a:hover { color: var(--osso); }

@media (min-width: 640px) {
  .topo__interno { flex-direction: row; justify-content: space-between; padding-block: 1rem; }
  .topo__nav { gap: 1.6rem; }
  .topo__marca img { width: 128px; }
}

/* --- Herói ------------------------------------------------------------ */

.heroi {
  position: relative;
  overflow: hidden;
  padding-block: 4rem 3rem;
  /* Um só brilho âmbar no alto, atrás do wordmark. Decoração que compete com
     o acento faz o botão deixar de ser o ponto mais quente da tela. */
  background:
    radial-gradient(60rem 26rem at 50% -6rem, rgba(255, 176, 0, .13), transparent 70%),
    var(--grafite);
}
.heroi__interno { display: flex; flex-direction: column; align-items: center; text-align: center; }

.heroi__marca { width: min(300px, 78vw); height: auto; }
/* No desktop o wordmark é o elemento maior da tela — é ele que apresenta a
   marca a quem chegou pelo link e ainda não sabe quem somos. */
@media (min-width: 900px) { .heroi__marca { width: 420px; } }

.heroi__promessa {
  margin: 2rem 0 0;
  font-size: clamp(1.7rem, 6.2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  max-width: 16ch;
  text-wrap: balance;
}
.heroi__linha {
  margin: 1.1rem 0 0;
  color: var(--aco);
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  max-width: 52ch;
  text-wrap: pretty;
}
.heroi__zap { margin: .9rem 0 0; color: var(--aco); font-size: .85rem; }

/* --- Botão ------------------------------------------------------------ */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2rem;
  padding: .95rem 2rem;
  border: 0; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao--ambar { background: var(--ambar); color: var(--grafite); }
.botao--ambar:hover { background: var(--ambar-quente); box-shadow: 0 0 26px -6px var(--ambar-quente); }
.botao--ambar:active { transform: translateY(1px); }

/* --- Seções ----------------------------------------------------------- */

.secao { padding-block: 3.5rem; }
.secao--alt { background: #15191F; border-block: 1px solid var(--borda); }

.secao__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 4.4vw, 2.2rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
/* Régua âmbar sob o título: assina a seção sem gastar mais uma cor. */
.secao__titulo::after {
  content: ''; display: block;
  width: 44px; height: 3px; margin-top: .85rem;
  background: var(--ambar); border-radius: 2px;
}
.secao__linha {
  margin: 1.1rem 0 2.2rem;
  color: var(--aco);
  max-width: 56ch;
  text-wrap: pretty;
}

/* --- Cards de produto ------------------------------------------------- */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 940px)  { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 1.5rem;
  transition: border-color var(--transicao), transform var(--transicao);
}
.card:hover { border-color: rgba(255, 176, 0, .45); transform: translateY(-3px); }

.card__nome {
  margin: 0 0 .55rem;
  font-size: 1.16rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--aco);
}
/* "Namos" fica discreto e o NOME do produto ganha o peso: o que distingue os
   seis cards é a segunda palavra, não a primeira, que se repete em todos. */
.card__nome b { color: var(--osso); font-weight: 600; }

.card__texto { margin: 0; color: var(--aco); font-size: .94rem; line-height: 1.7; text-wrap: pretty; }

/* --- Passos ----------------------------------------------------------- */

.passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem; grid-template-columns: 1fr;
}
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.passo { padding-top: 1.1rem; border-top: 2px solid var(--borda); }
.passo__num {
  display: block;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  color: var(--ambar);
}
.passo__nome { margin: .5rem 0 .55rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.passo__texto { margin: 0; color: var(--aco); font-size: .94rem; line-height: 1.7; text-wrap: pretty; }

.destaque {
  margin: 2.6rem 0 0;
  padding: 1.2rem 1.4rem;
  background: rgba(255, 176, 0, .07);
  border-left: 3px solid var(--ambar);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 1.02rem;
  text-wrap: pretty;
}
.destaque b { font-weight: 600; }

/* --- Contato ---------------------------------------------------------- */

.contato { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contato { grid-template-columns: repeat(3, 1fr); } }

.contato__item {
  margin: 0;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.3rem 1.4rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-decoration: none;
  transition: border-color var(--transicao);
}
a.contato__item:hover { border-color: rgba(255, 176, 0, .45); }

.contato__rotulo { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--aco); }
.contato__valor { font-size: 1.02rem; font-weight: 500; color: var(--osso); overflow-wrap: anywhere; }

/* --- Rodapé ----------------------------------------------------------- */

.rodape { border-top: 1px solid var(--borda); padding-block: 2.6rem; background: #14181D; }
.rodape__interno { display: flex; flex-direction: column; gap: 1.3rem; }
.rodape__marca { width: 92px; height: auto; opacity: .9; }

/* Os dados legais são o motivo do rodapé existir. Ficam legíveis — não em
   cinza apagado, não dentro de imagem, não atrás de clique. */
.rodape__dados {
  display: flex; flex-direction: column; gap: .18rem;
  font-style: normal;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--aco);
}
.rodape__dados strong { color: var(--osso); font-weight: 600; letter-spacing: .01em; }
.rodape__dados a { color: var(--aco); text-decoration: underline; text-underline-offset: 3px; }
.rodape__dados a:hover { color: var(--ambar); }

.rodape__nota { margin: 0; font-size: .78rem; color: #5F666E; }

/* ---------------------------------------------------------------------------
   Documento longo (/privacidade)

   Página de leitura, não de navegação: medida de linha curta, hierarquia clara
   e nada competindo com o texto. A régua âmbar sob os títulos é a mesma da
   home — é o que mantém o documento dentro da marca sem inventar cor nova.
--------------------------------------------------------------------------- */

.doc { padding-block: 3rem 4rem; }
.doc .faixa { max-width: 46rem; }   /* ~75 caracteres: medida de leitura */

.doc__titulo {
  margin: 0;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
}
.doc__data {
  margin: .6rem 0 0;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ambar);
}
.doc__abertura {
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.4rem;
  background: var(--superficie);
  border-left: 3px solid var(--ambar);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: var(--osso);
  text-wrap: pretty;
}

.doc h2 {
  margin: 2.8rem 0 0;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
.doc h2::after {
  content: ''; display: block;
  width: 32px; height: 2px; margin-top: .7rem;
  background: var(--ambar); border-radius: 2px;
}

.doc p { margin: 1rem 0 0; color: var(--aco); text-wrap: pretty; }
.doc p strong, .doc li strong { color: var(--osso); font-weight: 600; }
.doc em { font-style: normal; color: var(--osso); }

.doc a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--ambar-quente); }

.doc__bloco {
  margin: 1.2rem 0 0;
  padding: 1.2rem 1.4rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-style: normal;
  line-height: 1.85;
  color: var(--aco);
}
.doc__bloco strong { color: var(--osso); }

.doc__lista { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--aco); }
.doc__lista li { margin-top: .6rem; text-wrap: pretty; }
.doc__lista::marker, .doc__lista li::marker { color: var(--ambar); }
@media (min-width: 720px) {
  .doc__lista--duas { columns: 2; column-gap: 2.2rem; }
  .doc__lista--duas li { break-inside: avoid; }
}

/* Tabela larga rola dentro do próprio quadro — a página nunca rola de lado. */
.doc__tabela {
  margin: 1.2rem 0 0;
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.doc__tabela table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc__tabela th, .doc__tabela td {
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borda);
}
.doc__tabela th {
  background: #15191F;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--aco);
  white-space: nowrap;
}
.doc__tabela td { color: var(--aco); }
.doc__tabela tr:last-child td { border-bottom: 0; }

/* --- Links do rodapé -------------------------------------------------- */

.rodape__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.rodape__links a {
  font-size: .82rem;
  color: var(--aco);
  text-decoration: none;
  transition: color var(--transicao);
}
.rodape__links a:hover { color: var(--ambar); }
.rodape__links a[aria-current="page"] { color: var(--osso); }

/* --- 404 -------------------------------------------------------------- */

/* O código em âmbar diz o que aconteceu antes de a frase ser lida. */
.erro__codigo {
  margin: 0 0 .6rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .24em;
  color: var(--ambar);
}