/*
 * Sakamoto Lub — sistema visual
 *
 * Construído sobre o brandbook Lubrax, e as regras dele são restrições reais,
 * não sugestões:
 *
 *   - Verde e amarelo ocupam a maior porção. Off-white e verde denso são os
 *     únicos fundos permitidos.
 *   - Apenas UMA cor secundária por layout. Aqui a escolhida é o verde cítrico;
 *     o laranja turbo aparece só como cor de alerta, que é função e não
 *     decoração.
 *   - Nunca só amarelo com laranja, nem só verde com laranja — a combinação
 *     remete a concorrente direto. Sempre entra a cor principal que falta.
 *   - O grafismo é encaixe de polígonos irregulares de seis vértices, entre
 *     duas e cinco formas, com vão entre células e vértices arredondados.
 *     Nunca um hexágono sozinho.
 *   - Caixa alta só até três linhas. Bold e extended em títulos; light a
 *     regular em texto corrido.
 *
 * Sem etapa de build: CSS nativo, servido direto.
 */

/* ============================================================ tipografia */

@font-face {
  font-family: 'Lubrax';
  src: url('../fontes/LubraxDisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax';
  src: url('../fontes/LubraxDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax';
  src: url('../fontes/LubraxDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax Condensada';
  src: url('../fontes/LubraxDisplay-Condensed.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax Condensada';
  src: url('../fontes/LubraxDisplay-BoldCondensed.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax Extendida';
  src: url('../fontes/LubraxDisplay-ExtendedBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax Extendida';
  src: url('../fontes/LubraxDisplay-Extended.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax Extendida';
  src: url('../fontes/LubraxDisplay-LightExtended.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Lubrax Condensada';
  src: url('../fontes/LubraxDisplay-LightCondensed.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

/*
 * Acumin Pro — a fonte de texto.
 *
 * O brandbook é explícito: a Lubrax Display é para títulos e chamadas, e a
 * Acumin Pro para "manuais técnicos, versos das embalagens, textos internos e
 * materiais utilitários, em que é mais importante garantir leitura com corpo
 * de texto reduzido". Usar a Lubrax em texto corrido, como estava, cansava a
 * leitura — a fonte tem personalidade demais para parágrafo.
 */
@font-face {
  font-family: 'Acumin';
  src: url('../fontes/AcuminPro-Book.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin';
  src: url('../fontes/AcuminPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin';
  src: url('../fontes/AcuminPro-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ================================================================ tokens */

:root {
  /* paleta oficial, do brandbook */
  --verde-vibra: #004415;      /* PANTONE 357 C */
  --amarelo-lubrax: #f9ee00;   /* PANTONE 3945 C */
  --verde-denso: #032b1a;      /* PANTONE 627 C */
  --off-white: #e3e2e2;        /* COOL GRAY 1 */
  --verde-citrico: #84ea00;    /* PANTONE 2287 C — a única secundária deste layout */
  --cinza-grafite: #63666f;    /* PANTONE 425 C */
  --laranja-alerta: #e87200;   /* PANTONE 151 C — só função de alerta */

  /* derivados para interface */
  /* o verde denso é quase preto: é ele que dá a profundidade do fundo */
  --fundo: #02170e;
  --fundo-elevado: #062415;
  --superficie: #ffffff;
  --superficie-fosca: #f4f6f3;
  --texto-claro: #f2f5f1;
  --texto-claro-suave: rgba(242, 245, 241, 0.72);
  --texto-escuro: var(--verde-denso);
  --texto-escuro-suave: #4c6154;
  --linha-clara: rgba(242, 245, 241, 0.16);
  --linha-escura: #d3d9d2;

  --raio: 4px;              /* cantos discretos: o arredondado forte é do grafismo */
  --raio-celula: 14px;
  /*
   * A largura cresce em telas maiores. 760px é bom para uma coluna de leitura,
   * mas no desktop apertava o cabeçalho a ponto de cortar o último item do
   * menu. O texto continua limitado por max-width próprio, então a leitura não
   * sofre com a caixa mais larga.
   */
  --largura-max: 760px;
  --toque-min: 52px;        /* alvo confortável no polegar */

  --transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* a Lubrax fica nos títulos; a Acumin carrega o texto */
  --fonte-titulo: 'Lubrax Extendida', 'Lubrax', sans-serif;
  --fonte-texto: 'Acumin', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-rotulo: 'Lubrax Condensada', 'Lubrax', sans-serif;
}

/* =============================================================== base */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--fundo);
  color: var(--texto-claro);
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 20px;
}

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ cabeçalho */

/*
 * Cabeçalho discreto.
 *
 * A versão anterior tinha fundo verde chapado e uma faixa amarela de 5px —
 * competia com o conteúdo e pesava a tela toda. Agora é translúcido sobre o
 * fundo, com desfoque, e a marca é o único elemento com presença.
 */
.cabecalho {
  position: relative;
  background: rgba(2, 23, 14, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(242, 245, 241, 0.08);
}

/*
 * Grafismo do cabeçalho.
 *
 * As células recebem o verde denso e o vão entre elas é o próprio fundo verde
 * Vibra aparecendo — assim a leitura de encaixe existe sem introduzir uma
 * terceira cor, e o conjunto continua dominado pelas cores principais.
 */
.cabecalho__grafismo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.grafismo__vao {
  fill: var(--amarelo-lubrax);
  opacity: 0.22;
}

.grafismo__celulas path {
  fill: var(--verde-vibra);
}

.cabecalho__conteudo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

.marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

/* o logotipo oficial da empresa, em vez do nome escrito em tipografia */
.marca__logo {
  display: block;
  height: clamp(26px, 5.4vw, 34px);
  width: auto;
}

.marca__nome {
  font-family: 'Lubrax Extendida', 'Lubrax', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 4vw, 19px);
  letter-spacing: 0.01em;
  /* caixa mista: caixa alta em tudo era o que mais pesava a tela */
  text-transform: none;
  color: var(--texto-claro);
  line-height: 1;
}

.marca__nome em {
  font-style: normal;
  font-weight: 300;
  color: rgba(242, 245, 241, 0.55);
}

/* O brandbook permite o símbolo reduzido em contexto digital desde que o nome
   Lubrax apareça por extenso e visível ao lado. É o caso aqui. */
.marca__endosso {
  display: none; /* o endosso vive no conteúdo, não no cabeçalho */
}

/* ================================================================ passos */

.principal {
  flex: 1 0 auto;
  padding: 48px 0 64px;
}

.titulo-pagina {
  font-family: 'Lubrax Extendida', 'Lubrax', sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0 0 14px;
  max-width: 18ch;
  text-wrap: balance;
}

.titulo-pagina em {
  font-style: normal;
  font-weight: 400;
  color: var(--verde-citrico);
}

.subtitulo-pagina {
  font-family: var(--fonte-texto);
  margin: 0 0 40px;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(242, 245, 241, 0.55);
  max-width: 46ch;
}

/* trilha de escolhas já feitas */
.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}

.trilha__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trilha__botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid rgba(242, 245, 241, 0.14);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 300;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.trilha__botao:hover {
  background: rgba(242, 245, 241, 0.16);
  border-color: rgba(242, 245, 241, 0.34);
}

.trilha__rotulo {
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
}

/* pergunta do passo atual */
.pergunta {
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 245, 241, 0.42);
  margin: 0 0 20px;
}

/* ================================================= grade de escolhas */

.escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.escolhas--anos {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

.escolha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: var(--toque-min);
  padding: 16px 18px;
  text-align: left;
  background: rgba(242, 245, 241, 0.035);
  color: var(--texto-claro);
  border: 1px solid rgba(242, 245, 241, 0.09);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transicao), border-color var(--transicao),
    background var(--transicao);
}

.escolha:hover {
  background: rgba(242, 245, 241, 0.07);
  border-color: rgba(132, 234, 0, 0.42);
  transform: translateY(-2px);
}

.escolha:active {
  transform: translateY(0);
}

.escolha__nome {
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
}

.escolha__detalhe {
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-weight: 300;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 245, 241, 0.4);
}

.escolha--ano {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.escolha--ano .escolha__nome {
  font-size: 18px;
}

/* ============================================================ resultado */

.resultado {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.versao {
  background: rgba(242, 245, 241, 0.035);
  color: var(--texto-claro);
  border: 1px solid rgba(242, 245, 241, 0.09);
  border-radius: 16px;
  overflow: hidden;
}

.versao__cabecalho {
  padding: 20px 22px 18px;
  background: rgba(242, 245, 241, 0.03);
  border-bottom: 1px solid rgba(132, 234, 0, 0.28);
}

.versao__motor {
  font-family: 'Lubrax Extendida', 'Lubrax', sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  margin: 0;
}

.versao__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 7px;
}

.versao__dado {
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 245, 241, 0.42);
}

.versao__dado strong {
  font-weight: 400;
  color: var(--texto-claro);
  font-variant-numeric: tabular-nums;
}

.produtos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.produto {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(242, 245, 241, 0.07);
}

.produto:last-child {
  border-bottom: 0;
}

.produto__codigo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(132, 234, 0, 0.12);
  color: var(--verde-citrico);
  border: 1px solid rgba(132, 234, 0, 0.3);
  border-radius: 10px;
  font-family: 'Lubrax Extendida', 'Lubrax', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

.produto__corpo {
  min-width: 0;
}

.produto__nome {
  font-family: 'Lubrax Extendida', 'Lubrax', sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin: 0;
}

/*
 * O nome que consta na tabela impressa aparece em segundo plano, para quem
 * está com o pôster na mão conseguir conferir. A informação principal é o nome
 * atual do produto.
 */
.produto__nome-tabela {
  margin: 5px 0 0;
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(242, 245, 241, 0.34);
}

.produto__norma {
  font-family: var(--fonte-texto);
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: rgba(242, 245, 241, 0.5);
}

.produto__especificacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: rgba(242, 245, 241, 0.42);
}

.produto__viscosidade {
  color: var(--verde-citrico);
  font-weight: 400;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  line-height: 1.1;
  border-radius: 100px;
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.selo--componente {
  background: rgba(132, 234, 0, 0.16);
  color: var(--verde-citrico);
}

.selo--alternativa {
  background: rgba(242, 245, 241, 0.08);
  color: rgba(242, 245, 241, 0.55);
}

.selo--conferir {
  background: var(--laranja-alerta);
  color: #fff;
}

/* ==================================================== aviso do manual */

/*
 * O aviso de consultar o manual do proprietário aparece em toda tela de
 * resultado. Não é rodapé decorativo: óleo errado danifica motor, e a própria
 * Lubrax registra na tabela que os dados servem apenas como referência.
 */
/* o aviso continua em amarelo: aqui a cor tem função de alerta, não decoração */
.aviso-manual {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-top: 8px;
  background: var(--amarelo-lubrax);
  color: var(--verde-denso);
  border-radius: 16px;
}

.aviso-manual__icone {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.aviso-manual__texto {
  font-family: var(--fonte-texto);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 400;
}

.aviso-manual__texto strong {
  font-weight: 700;
}

.procedencia {
  margin-top: 6px;
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
}

/* ============================================================ vazio/erro */

.aviso-vazio {
  padding: 34px 26px;
  background: rgba(242, 245, 241, 0.035);
  border: 1px solid rgba(242, 245, 241, 0.09);
  border-radius: 16px;
  text-align: center;
}

.aviso-vazio__titulo {
  font-family: 'Lubrax Extendida', 'Lubrax', sans-serif;
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 10px;
}

.aviso-vazio__texto {
  font-family: var(--fonte-texto);
  margin: 0;
  font-weight: 300;
  color: var(--texto-claro-suave);
}

/* ============================================================== rodapé */

.rodape {
  font-family: var(--fonte-texto);
  flex: 0 0 auto;
  padding: 46px 0 54px;
  border-top: 1px solid rgba(242, 245, 241, 0.08);
  font-size: 13.5px;
  color: rgba(242, 245, 241, 0.42);
  font-weight: 300;
}

.rodape p {
  margin: 0 0 8px;
}

.rodape__legal {
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 68ch;
}

/* ========================================================== movimento */

/*
 * Movimento discreto e com propósito: as opções entram em sequência curta,
 * o que dá a sensação de resposta imediata sem virar espetáculo.
 */
@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.anima-entrada > * {
  animation: entrar 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.anima-entrada > *:nth-child(1) { animation-delay: 0ms; }
.anima-entrada > *:nth-child(2) { animation-delay: 22ms; }
.anima-entrada > *:nth-child(3) { animation-delay: 44ms; }
.anima-entrada > *:nth-child(4) { animation-delay: 66ms; }
.anima-entrada > *:nth-child(5) { animation-delay: 88ms; }
.anima-entrada > *:nth-child(6) { animation-delay: 110ms; }
.anima-entrada > *:nth-child(7) { animation-delay: 132ms; }
.anima-entrada > *:nth-child(8) { animation-delay: 154ms; }
.anima-entrada > *:nth-child(n + 9) { animation-delay: 170ms; }

.carregando {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Lubrax Condensada', 'Lubrax', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
}

.carregando::before {
  content: '';
  width: 15px;
  height: 15px;
  border: 2px solid var(--linha-clara);
  border-top-color: var(--amarelo-lubrax);
  border-radius: 50%;
  animation: girar 640ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .anima-entrada > *,
  .carregando::before {
    animation: none;
  }
  .escolha:hover {
    transform: none;
  }
  * {
    transition-duration: 1ms !important;
  }
}

/* ============================================================ telas maiores */

@media (min-width: 900px) {
  :root {
    --largura-max: 1180px;
  }
  /* margem lateral maior no desktop: o texto encostado na borda cansa a leitura */
  .envelope {
    padding: 0 44px;
  }
}

@media (min-width: 620px) {
  body {
    font-size: 17.5px;
  }
  .cabecalho__conteudo {
    padding: 22px 0;
  }
  .marca__nome {
    font-size: 23px;
  }
  .principal {
    padding: 38px 0 52px;
  }
}