/* Gaëlle Confeitaria — identidade.
 *
 * Extraída do material gráfico dela, não inventada: as cores saem de
 * amostragem de pixel nas capas dos PDFs de menu e portfólio.
 *
 *   #526145  verde-musgo — 72% da contracapa do menu de doces finos
 *   #495d3d  verde da capa do menu de bolos (mesma família, mais escuro)
 *   #f6f7f1  off-white esverdeado — fundo das páginas do portfólio
 *   #5f5848  marrom-oliva — texto secundário do portfólio
 *
 * A paleta dela é declaradamente "suave e apastelada, sem corantes
 * artificiais" (menu de bolos, p.8). O verde é a única cor saturada da
 * marca; o resto da cor vem da foto do bolo. A página respeita isso:
 * superfícies neutras quentes e a comida como único ponto de saturação.
 */

@import url("https://fonts.googleapis.com/css2?family=Prata&family=Cormorant+Garamond:wght@400;500&family=Quicksand:wght@400;500;600;700&display=swap");

:root {
  /* ---- cor ----
   * #526145 sobre #f6f7f1 = 6.0:1 · sobre branco = 6.6:1. Passa AA folgado
   * nos dois, o que é raro em marca de confeitaria — sorte dela, e vale
   * dizer isso na reunião.
   */
  --acento: #526145;
  --acento-forte: #3b472f;
  --sobre-acento: #f6f7f1;

  --superficie: #fdfdfa;
  --superficie-2: #f6f7f1;
  --superficie-3: #e9ece0;
  --texto: #2b3025;
  --texto-suave: #5f5848;
  --borda: #dee2d3;

  /* Marrom da casquinha de chocolate do pão de mel dela — média do decil
   * escuro da foto, não um marrom escolhido de catálogo. Usado na
   * cobertura que escorre sobre as seções de sabores e de doces. */
  --chocolate: #5a3d24;

  /* Cor auxiliar: o terracota-rosé dos bolos rosa dela, isolado por matiz
   * e saturação nas fotos (média em torno de #9c6554, escurecido para
   * passar AA). Serve para separar o nome do sabor da descrição sem
   * gastar o verde, que é a cor de ação da página — se o nome do sabor
   * ficasse verde igual à CTA, viraria falso link.
   * 5,55:1 na página · 5,12:1 na faixa. */
  --acento-2: #8f5a4c;

  /* ---- tipografia ----
   * Display: didone de contraste alto — é o registro do "Menu" da capa.
   * Marca: serifada de caixa alta com entreletras larguíssimo, imitando o
   *        logotipo GAËLLE até o SVG real chegar.
   * Texto: grotesca geométrica arredondada, que é o que ela usa nos
   *        subtítulos ("Bolos festivos e doces artesanais", "Botucatu - SP").
   */
  --fonte-display: "Prata", Georgia, serif;
  --fonte-marca: "Cormorant Garamond", Georgia, serif;
  --fonte-texto: "Quicksand", system-ui, sans-serif;
  --peso-display: 400;
  --peso-forte: 600;

  /* Prata só tem um peso e é estreita: sobe a escala pra manter presença. */
  --t-3xl: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);
  --t-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);

  /* ---- forma ----
   * Cantos discretos. O material dela é fotográfico e retangular; raio
   * grande brigaria com a diagramação de portfólio que ela já usa.
   */
  --raio: 6px;
  --raio-g: 10px;
}

/* Logotipo — substituir por SVG quando ela mandar o arquivo.
 *
 * Centralização: `letter-spacing` acrescenta o espaço DEPOIS da última
 * letra também, e esse espaço entra na caixa. Texto centralizado fica
 * meio tracking à esquerda do eixo. A correção confiável é encolher a
 * caixa (inline-block + margem negativa igual ao tracking) — não
 * `text-indent`, que empurra demais e desalinha as duas linhas entre si.
 */
.logo {
  display: grid;
  justify-items: center; /* cada linha é um item que encolhe até o conteúdo */
  font-family: var(--fonte-marca);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
}

.logo__nome {
  display: inline-block;
  margin-right: -0.24em;
  letter-spacing: 0.24em;
  font-size: var(--t-logo, clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem));
}

.logo__linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85em;
  margin-top: 0.7em;
  margin-right: -0.42em;
  font-family: var(--fonte-texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.42em;
}

/* os traços laterais do logotipo original */
.logo__linha::before,
.logo__linha::after {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
}

/* Tabela de tamanhos — o menu dela é literalmente uma tabela de preços,
 * e transformar isso em cartão descaracterizaria. Mantém tabela. */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.tabela th {
  text-align: left;
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borda);
}

.tabela td {
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--borda);
}

.tabela td:last-child,
.tabela th:last-child {
  text-align: right;
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

/* ---- menu de sabores ----
 * Reproduz o desenho do PDF dela: coluna de fotos ao lado, nome do sabor
 * em caixa alta espaçada, descrição em cinza e um tracinho verde entre um
 * sabor e outro. As fotos são de ambiente, não uma por sabor — no menu
 * dela também são: três imagens ao lado de quatro sabores. Vira catálogo
 * sabor a sabor quando houver foto identificada de cada um.
 */
.menu-sabores {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 900px) {
  .menu-sabores {
    grid-template-columns: 0.78fr 1fr;
    align-items: start;
    gap: var(--e-7);
  }
}

.menu-sabores__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.menu-sabores__fotos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--superficie-3);
}

/* A foto do bolo cortado é a que mostra o miolo — camada, recheio,
 * altura. É o que o cliente quer ver e não dá pra deduzir de fora.
 * Ocupa a largura toda. */
.menu-sabores__fotos img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

.sabores {
  display: grid;
  gap: var(--e-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* tracinho entre sabores — detalhe do menu dela */
.sabores li + li {
  padding-top: var(--e-5);
  position: relative;
}

.sabores li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--acento);
  opacity: 0.55;
}

.sabor__nome {
  margin-bottom: var(--e-2);
  font-family: var(--fonte-texto);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-2);
}

.sabor__desc {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 54ch;
}

/* Preço na linha do sabor, quando existe (doces finos são por unidade) */
.sabor__preco {
  float: right;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  color: var(--texto);
}