/* Estilo comum das páginas de idioma (/en/, /pt-br/, …). Mobile-first. */

/* ── Tema: tokens de cor ──────────────────────────────────────────────
   Claro é o padrão, para todo mundo (inclusive sem JS). O escuro só vale
   quando a pessoa escolhe no botão sol/lua: o script do <head> grava
   data-theme="dark" no <html> a partir da escolha salva. */
:root {
  color-scheme: light;
  --bg: #f5f4f0;
  --fg: #151515;
  --muted: #5c5c5c;
  --lead: #3a3a3a;
  --footer: #666666;
  --field: #ffffff;
  --border: #c9c7c1;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555555' stroke-width='1.6'/%3E%3C/svg%3E");
  /* No claro o contorno branco some: vira uma sombra escura sutil */
  --logo-shadow: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.08));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151515;
  --fg: #ffffff;
  --muted: #9a9a9a;
  --lead: #c4c4c4;
  --footer: #8a8a8a;
  --field: #1f1f1f;
  --border: #3a3a3a;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c4c4c4' stroke-width='1.6'/%3E%3C/svg%3E");
  /* Contorno e brilho brancos leves em volta da logo */
  --logo-shadow: drop-shadow(0 0 1px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

/* ── Reset enxuto ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Japonês: Hanken não tem os glifos; usa as fontes japonesas do sistema */
html[lang="ja"] body {
  font-family: "Hanken Grotesk", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}

/* Links sem efeito de hover, conforme pedido */
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--fg); }
/* Foco visível para navegação por teclado (acessibilidade) */
a:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; }

/* Texto só para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout: página ocupa a tela toda, rodapé no fim ──────────────── */
.page {
  min-height: 100vh;
  min-height: 100dvh;               /* respeita a barra dinâmica do mobile */
  display: flex;
  flex-direction: column;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px clamp(24px, 5vw, 64px);
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 96px;
}

/* ── Cabeçalho ────────────────────────────────────────────────────── */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.brand {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.header-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.tagline { font-size: 15px; color: var(--muted); }

/* ── Seletor de idioma ────────────────────────────────────────────── */
.lang-select {
  min-height: 44px;                 /* alvo de toque confortável */
  padding: 8px 36px 8px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background-color: var(--field);
  /* Seta desenhada em SVG, porque appearance: none remove a nativa */
  background-image: var(--arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--border);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.lang-select option { background: var(--field); color: var(--fg); }

/* ── Botão de tema (sol/lua) ──────────────────────────────────────── */
/* Só aparece com JavaScript, que é quem faz a troca */
.theme-toggle { display: none; }
.js .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
/* Mostra o tema para onde o clique leva: lua no claro, sol no escuro */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* Sem JavaScript o seletor não funciona: mostra a lista de links no lugar */
.lang-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { display: flex; flex-direction: column; gap: 32px; }
.logo {
  margin: 0;
  width: fit-content;
  font-family: "Montserrat", "Helvetica Neue", sans-serif;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  user-select: none;
}
.logo span { display: block; }
.logo-main { font-size: clamp(72px, 13vw, 168px); }
/* O padding estende a caixa do h1 até as descendentes (g), senão o
   background-clip: text corta a perna da letra. A compensação do
   espaçamento fica no h1 (margem negativa no flex do hero): no span ela
   colapsaria com a borda do h1 e encolheria a caixa de novo. */
.logo-sub {
  font-size: clamp(31px, 5.6vw, 72px);
  padding-bottom: 0.2em;
}
.logo { margin-bottom: calc(-0.2 * clamp(31px, 5.6vw, 72px)); }

/* Imagem da nebulosa recortada dentro das letras (background-clip: text).
   Maior que a caixa (140% da largura) para sobrar margem ao movimento;
   a cor de fundo é o fallback enquanto a imagem carrega. */
.logo-nebula {
  background-color: #3a2a8f;
  background-image: url("nebula.jpg");
  background-size: 140% auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Contorno leve (cor no token --logo-shadow). text-shadow não serve aqui:
     ele é pintado por cima do fundo recortado e cobriria a nebulosa; o
     drop-shadow age sobre o resultado final, só em volta das letras. */
  filter: var(--logo-shadow);
}
.lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--lead);
}

/* ── Produtos ─────────────────────────────────────────────────────── */
.products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.6;
}
.products p { margin: 0; }
.products-title { font-weight: 300; }
.muted { color: var(--muted); }

/* ── Rodapé ───────────────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  color: var(--footer);
}