/*
  Design System - Gali
  Infraestrutura visual reutilizavel: tokens, tipografia, escala de
  espacamento, radius, sombras, containers, botoes e links.
  Compartilhada por todas as paginas do site (Home, Conversa, Catalogo,
  Produto, Sobre). Ver knowledge/fundacao/direcao-design-gali-v1.md.

  Nao inclui: animacoes, microinteracoes ou efeitos sofisticados -
  isso fica para uma proxima etapa.
*/

:root {
  /* Paleta oficial */
  --cor-fundo: #faf6f0;
  --cor-fundo-painel: #ffffff;
  --cor-fundo-alt: #f2ece2;
  --cor-texto: #1f2a2e;
  --cor-texto-suave: #5c6b6e;
  --cor-borda: rgba(31, 42, 46, 0.09);
  --cor-ouro: #d6a25c;
  --cor-coral: #dd8a68;
  --cor-oceano: #2c6068;
  --gradiente-poente: linear-gradient(135deg, #e6b96e 0%, #dd8a68 55%, #c46a63 100%);
  --gradiente-oceano: linear-gradient(135deg, #2c6068 0%, #1c454c 100%);

  /* Tipografia: Fraunces e a voz (Gali/visitante), Manrope e o chrome de interface */
  --fonte-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala de espacamento (4 a 64px) */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;

  /* Radius */
  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 18px;

  /* Sombras */
  --sombra-suave: 0 8px 30px rgba(31, 42, 46, 0.06);
  --sombra-card: 0 4px 18px rgba(31, 42, 46, 0.08);
}

/* ---------- Reset base ---------- */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  margin: 0;
}

/* ---------- Container ---------- */

.gali-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.gali-container--estreito {
  max-width: 560px;
}

/* ---------- Links ---------- */

a {
  color: var(--cor-oceano);
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

.gali-link-discreto {
  color: var(--cor-texto-suave);
}

.gali-link-discreto:hover,
.gali-link-discreto:focus-visible {
  color: var(--cor-texto);
}

/* ---------- Botoes ---------- */

.botao {
  display: inline-block;
  border: none;
  border-radius: var(--raio-md);
  padding: 14px 28px;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  text-decoration: none;
}

.botao:focus-visible {
  outline: 2px solid var(--cor-oceano);
  outline-offset: 2px;
}

.botao--primario {
  background: var(--gradiente-poente);
  color: #2a1810;
}

.botao--secundario {
  background: var(--cor-fundo-painel);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}

/* ---------- Cabecalho (Presenca discreta) ---------- */
/* Usado por todas as paginas exceto a Home, que tem sua propria
   Presenca plena (ver home.css).
   GPG-TABUA-MOBILE-031: a Home (public/home.html + home.css) passa a
   ser a referencia oficial do header DESKTOP (secao 9 do brief) - nao
   mais um "header pre-028" reconstruido de memoria. Desktop (>767px,
   sem media query) = logo a esquerda + nav horizontal a direita,
   MESMA estrutura de grid (auto 1fr), MESMA tipografia/hover de
   .home-cabecalho__nav - exceto o transform:translateX(170px) da Home,
   que e um ajuste especifico do Hero dela (alinhar com o braco da Gali
   do hero, ver comentario original em home.css) e nao existe aqui, ja
   que esta pagina nao tem hero. Sem CTA nem hamburguer no desktop,
   porque a Home tambem nao tem CTA no header (fica dentro do hero) e
   so mostra hamburguer no proprio mobile dela.
   Mobile (<=767px, MESMO breakpoint da Home) continua exatamente o
   padrao aprovado nas sprints 028-030: logo | CTA reduzido central |
   hamburguer - ver @media abaixo. */
.gali-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-5) clamp(20px, 4vw, 56px);
}

.gali-header__marca {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  color: var(--cor-texto);
  text-decoration: none;
}

.gali-header__marca:hover {
  text-decoration: none;
}

/* GPG-IDENTIDADE-TABUA-MOBILE-027: logotipo oficial (PNG com bastante
   halo/glow transparente ao redor da marca em si - ver assets/logotipo
   guiaportodegalinhas.png). object-fit:cover + object-position:center
   ocupam a caixa fixa recortando esse halo, mantendo a mesma altura de
   30px que o simbolo provisorio ja ocupava (preserva a altura do
   header) mas exibindo a marca legivel, em vez do halo inteiro
   espremido. Proporcao da caixa (85:30) aproxima o recorte real do
   conteudo visivel do PNG (medido: ~2.83:1). */
.gali-header__simbolo {
  width: 85px;
  height: 30px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.gali-header__nome {
  font-family: var(--fonte-display);
  font-size: 1.4rem;
  font-weight: 600;
}

/* CTA e hamburguer: exclusivos do mobile (ver @media abaixo) - a Home
   desktop nao tem CTA no header (fica no hero) nem hamburguer (usa nav
   horizontal), entao aqui tambem nao, por padrao. */
.gali-header__cta {
  display: none;
}

.gali-header__menu-toggle {
  display: none;
}

/* Nav desktop - horizontal, mesma estrutura/tipografia/hover de
   .home-cabecalho__nav (ver home.css) SEM o transform:translateX(170px)
   especifico do Hero da Home (nao ha hero aqui). Mesmo elemento <nav>
   reaproveitado para o dropdown mobile (ver @media abaixo) - nao e
   duplicado, so estilizado diferente por breakpoint. */
.gali-header__nav {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  font-size: 1.25rem;
  font-weight: 500;
}

.gali-header__nav a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 150ms ease;
}

.gali-header__nav a:hover,
.gali-header__nav a:focus-visible {
  opacity: 1;
  font-weight: 700;
  letter-spacing: -0.015em;
}

@media (max-width: 767px) {
  .gali-header {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
  }

  .gali-header__marca {
    grid-column: 1;
    justify-self: start;
  }

  /* CTA central - mesmas classes/tokens de .botao.botao--primario
     (gradiente, cor, cursor, radius), so reduzido e recentralizado no
     grid de 3 colunas do header mobile (secao 14 do brief da sprint
     028: "moderadamente reduzido", nao um botao novo). */
  .gali-header__cta {
    display: inline-block;
    grid-column: 2;
    justify-self: center;
    padding: 10px 20px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* Hamburguer - visual identico ao ja aprovado na Home
     (.home-cabecalho__menu-toggle). */
  .gali-header__menu-toggle {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--cor-texto);
    padding: 0;
    cursor: pointer;
  }

  .gali-header__menu-toggle:focus-visible {
    outline: 2px solid var(--cor-oceano);
    outline-offset: 2px;
  }

  .gali-header__menu-toggle-linha {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }

  /* Dropdown - mesmo visual do painel mobile da Home
     (.home-cabecalho__nav em <=767px). Reseta explicitamente o
     grid-column/justify-self e a tipografia/hover do nav desktop
     acima, que nao se aplicam aqui - o dropdown mobile e o mesmo
     padrao ja aprovado nas sprints 028-030, sem nenhuma mudanca. */
  .gali-header__nav {
    grid-column: unset;
    justify-self: unset;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(20px, 4vw, 56px);
    z-index: 30;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-1);
    background: rgba(253, 250, 245, 0.97);
    border-radius: var(--raio-md);
    box-shadow: 0 14px 30px rgba(42, 24, 16, 0.22);
    padding: var(--espaco-3);
    min-width: 200px;
    font-size: 1.05rem;
    font-weight: 400;
  }

  .gali-header__nav[hidden] {
    display: none;
  }

  .gali-header__nav a {
    width: 100%;
    padding: 10px 8px;
    border-radius: var(--raio-sm);
    color: inherit;
    text-decoration: none;
    opacity: 1;
  }

  .gali-header__nav a:hover,
  .gali-header__nav a:focus-visible {
    background: var(--cor-fundo-alt);
    opacity: 1;
    font-weight: 400;
    letter-spacing: normal;
  }
}

/* ---------- Rodape institucional ---------- */

.gali-rodape {
  padding: var(--espaco-6) var(--espaco-5);
}

.gali-rodape__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--espaco-4);
  row-gap: var(--espaco-2);
  font-size: 0.8rem;
}

/* ---------- Card de produto ---------- */
/* Mesma peca de dado do Catalogo e da Mesa (Conversa) - aqui, a
   variante de navegacao (leva para a Pagina de Produto). */

.gali-lista-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espaco-5);
}

.gali-card-produto {
  background: var(--cor-fundo-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--espaco-5);
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.gali-card-produto__titulo {
  font-size: 1.1rem;
  margin: 0;
}

.gali-card-produto__meta {
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
}

.gali-card-produto__preco {
  font-size: 0.88rem;
  margin-top: auto;
  padding-top: var(--espaco-2);
}

.gali-card-produto__link {
  margin-top: var(--espaco-2);
  font-weight: 600;
  font-size: 0.9rem;
}