/* ==========================================================================
   EarnEat — páginas de tabelas (calorias por atividade e por alimento)
   Geradas por scripts/gerar_paginas_site.py. Usa os tokens de style-v2.css.
   ========================================================================== */

.pag-topo{padding-block:clamp(28px,5vw,56px) clamp(8px,2vw,16px)}
.pag-topo h1{
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.12;letter-spacing:-.02em;
  margin:.35em 0 .5em;text-wrap:balance;
}
.pag-lead{color:var(--txt-suave);font-size:clamp(1rem,1.2vw,1.1rem);max-width:62ch}

.resposta{
  background:var(--branco);border:1px solid var(--borda);border-left:5px solid var(--ouro);
  border-radius:var(--r-md);box-shadow:var(--sombra);
  padding:18px 22px;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;margin:0 0 1.2em;
}
.resposta strong{color:var(--ouro-escuro)}

.secao--curta{padding-block:clamp(28px,4vw,48px)}
/* style-v2 limita .secao > .wrap > h2 a 20ch, pensado para os títulos grandes da
   página inicial; aqui os títulos são menores e mais longos. */
.secao--curta > .wrap > h2,.secao--curta h2{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;margin:0 0 .45em;max-width:none}
.secao--curta > .wrap > p{color:var(--txt-suave);margin:0 0 1.1em}
.h2--espaco{margin-top:1.6em!important}

/* Migalhas (breadcrumb) */
.migalhas{margin-bottom:18px}
.migalhas ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0;font-size:.88rem;color:var(--txt-suave)}
.migalhas li + li::before{content:"›";margin-right:8px;opacity:.6}
.migalhas a{color:var(--coral-escuro);text-decoration:none;font-weight:600}
.migalhas a:hover{text-decoration:underline}

/* Tabelas */
.tabela-rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md);box-shadow:var(--sombra);border:1px solid var(--borda)}
.tabela{width:100%;border-collapse:collapse;background:var(--branco);font-variant-numeric:tabular-nums;min-width:420px}
.tabela th,.tabela td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--borda);white-space:nowrap}
.tabela thead th{background:var(--coral-claro);color:var(--coral-escuro);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.tabela th:first-child{text-align:left}
.tabela tbody th{font-weight:700}
.tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:nth-child(even){background:#FFFBF6}
.tabela a{color:var(--txt);text-decoration:none}
.tabela a:hover{color:var(--coral)}

/* Cartões de intensidade */
.cartoes-int{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cartao-int{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);box-shadow:var(--sombra);padding:18px}
.cartao-int__rotulo{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-suave)}
.cartao-int__kcal{margin:.2em 0 .35em;font-size:2rem;font-weight:800;color:var(--ouro-escuro);line-height:1}
.cartao-int__kcal small{font-size:.9rem}
.cartao-int__desc{margin:0;font-size:.92rem;color:var(--txt-suave)}

/* Barras de comparação */
.barras{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.barras li{display:grid;grid-template-columns:minmax(120px,170px) 1fr auto;align-items:center;gap:12px}
.barras__nome{font-weight:700;color:var(--txt);text-decoration:none}
a.barras__nome:hover{color:var(--coral)}
.barras__trilho{height:12px;background:var(--borda);border-radius:var(--r-full);overflow:hidden}
.barras__trilho span{display:block;height:100%;background:var(--ouro);border-radius:var(--r-full)}
.barras--atual .barras__trilho span{background:var(--coral)}
.barras--atual .barras__nome{color:var(--coral-escuro)}
.barras__valor{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Chips de alimentos */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{
  display:inline-flex;align-items:center;gap:6px;padding:9px 14px;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-full);
  color:var(--txt);text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:var(--sombra);
  transition:transform .15s ease, border-color .15s ease;
}
.chips a:hover{transform:translateY(-1px);border-color:var(--coral)}
.chips small{color:var(--ouro-escuro);font-weight:800}

@media (max-width:760px){
  .cartoes-int{grid-template-columns:1fr}
  .barras li{grid-template-columns:1fr auto;grid-template-areas:"nome valor" "trilho trilho";row-gap:6px}
  .barras__nome{grid-area:nome}
  .barras__valor{grid-area:valor}
  .barras__trilho{grid-area:trilho}
}