/* ============================================================
   GERMÂNIA TURISMO — Tokens compartilhados entre as 4 direções
   Cores extraídas do manual de identidade (2018, Solid Web)
   ============================================================ */

:root {
  /* Cor institucional dominante — NAVY (referência: caneca do mockup) */
  --germania-base: #15284F;       /* Navy profundo — substitui o cinza #374045 a pedido do cliente */
  --germania-base-deep: #0F1E3F;  /* Navy ainda mais escuro para gradientes e hovers */

  /* Cores da rosa dos ventos (compass arrows — manual oficial) */
  --germania-azul: #0C8AC4;       /* Pantone 285C  → ponta Oeste */
  --germania-verde: #41D655;      /* Pantone 802C  → ponta Leste */
  --germania-vermelho: #ED1633;   /* Pantone 185C  → ponta Norte */
  --germania-laranja: #FA6C14;    /* Orange 021C   → ponta Sul */

  /* Neutros */
  --off-white: #FAF7F2;
  --cream: #F3EFE8;
  --paper: #FFFFFF;
  --ink: #1F2428;
  --ink-muted: #6B7279;
  --border: #E5E3DE;
  --border-strong: #CFCCC5;

  /* Categorias → pontos da rosa */
  --cat-ficar: var(--germania-azul);
  --cat-comer: var(--germania-vermelho);
  --cat-fazer: var(--germania-verde);
  --cat-eventos: var(--germania-laranja);
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }

/* Container padrão (1200px do sistema-layout.md) */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px) { .container { padding-inline: 48px; } }
@media (min-width: 1024px) { .container { padding-inline: 64px; } }

/* Barra de navegação entre protótipos (fixa no topo) */
.proto-switcher {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 13px;
  border-bottom: 1px solid #222;
}

/* Regra global do projeto: nunca renderizar em/i como itálico */
em, i { font-style: normal; }
.proto-switcher__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.proto-switcher__label {
  opacity: 0.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
.proto-switcher__links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.proto-switcher__link {
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.2s;
  white-space: nowrap;
}
.proto-switcher__link:hover { background: #2a2a2a; }
.proto-switcher__link.is-active {
  background: #fff;
  color: #111;
  font-weight: 600;
}
.proto-switcher__home {
  margin-left: auto;
  opacity: 0.7;
  font-size: 12px;
}
.proto-switcher__home:hover { opacity: 1; }

/* Rosa dos ventos (componente inline — 4 pontas coloridas) */
.rose-compass {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}