/* Base do site. Mobile-first: o CSS fora de @media descreve o celular.
   Paleta provisória (neutra, de arquitetura) — será revista quando a
   identidade visual dela estiver definida. */

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

:root {
  --fundo: #11100e;
  --fundo-cartao: #1a1917;
  --borda: #2e2c29;
  --texto: #f2efe9;
  --texto-suave: #a8a29a;
  --destaque: #c9a227;

  --gutter: 1rem;          /* gutter lateral mínimo, nunca menor que 16px */
  --raio: 10px;
}

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

body {
  margin: 0;
  padding-block: 2rem;
  padding-inline: var(--gutter);
  min-height: 100vh;
  min-height: 100dvh;   /* iOS: desconta a barra de endereco, evita corte */
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}

img, picture, video, iframe { max-width: 100%; height: auto; display: block; }

/* --- Tela de aviso (em construção / 404) --- */

.tela-centrada {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-aviso {
  width: 100%;
  max-width: 34rem;
  padding: clamp(1.5rem, 5vw, 2.75rem);
  text-align: center;
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.selo {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--destaque);
}

.cartao-aviso h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;   /* títulos longos não estouram em 360px */
}

.texto {
  margin: 0;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
}

/* --- Alvos de toque: mínimo 40px de altura --- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 1.75rem;
  padding: 0 1.5rem;
  font-weight: 500;
  color: var(--fundo);
  text-decoration: none;
  background: var(--destaque);
  border-radius: var(--raio);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.botao:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

.idiomas {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.75rem;
  color: var(--texto-suave);
}
.idiomas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: var(--raio);
  transition: color 0.15s ease, background 0.15s ease;
}
.idiomas a:hover { color: var(--texto); background: rgb(255 255 255 / 0.06); }
.idiomas a[aria-current="true"] { color: var(--destaque); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}