/* YUM-YUM · site institucional
   Regras do desenho
   1. Nenhum texto pousa diretamente no papel de parede: fica num quadro escuro ou num cartão claro,
      para ler bem nas 5 cores.
   2. Todos os cartões partilham a mesma coluna, os mesmos espaços, cantos e molduras.
      Para mexer nas medidas, mudar só as variáveis em :root. */

@font-face { font-family: "Bagel Fat One"; src: url(../fontes/bagel-fat-one-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Quicksand"; src: url(../fontes/quicksand-latin.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

/* Papel de parede de cada dia útil, tirado dos logótipos */
:root, [data-tema="azul"]  { --fundo: #1d7ea4; --padrao: #6bbad6; --realce: #7cc7e3; }
[data-tema="vermelho"]     { --fundo: #e68d5f; --padrao: #b5162b; --realce: #f0a070; }
[data-tema="verde"]        { --fundo: #1b694b; --padrao: #78b376; --realce: #8fcf8b; }
[data-tema="dourado"]      { --fundo: #cfcdcc; --padrao: #aca27e; --realce: #d8c98a; }
[data-tema="preto"]        { --fundo: #f3f3f1; --padrao: #d2d2cf; --realce: #f5f2e9; }

:root {
  --quadro: #1d201f; --giz: #f5f2e9; --tinta: #1a1c1b; --sombra: rgba(0,0,0,.28);
  --bagel: "Bagel Fat One", "Arial Rounded MT Bold", sans-serif;
  /* medidas comuns a todos os cartões */
  --coluna: 960px; --raio: 24px; --moldura: 10px;
  --pad-y: 32px; --pad-x: 22px; --gap: 28px;
}
@media (min-width: 760px) { :root { --pad-y: 44px; --pad-x: 48px; --gap: 44px; } }

* { box-sizing: border-box; }
html { background: var(--fundo); transition: background-color .4s; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; min-height: 100svh; font: 600 17px/1.55 Quicksand, system-ui, sans-serif; color: var(--giz); }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--realce); outline-offset: 3px; }

.papel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; fill: var(--padrao); stroke: var(--padrao); stroke-width: .6; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--giz); color: var(--tinta); border-radius: 10px; font-weight: 700; }
.saltar:focus { top: 12px; }

/* ---------- a coluna: barra, cartões e rodapé têm todos a mesma largura ---------- */
.topo, .cena, .rodape { width: min(var(--coluna), calc(100% - 24px)); margin-inline: auto; }
.cena { padding-top: 22px; display: grid; gap: var(--gap); }

/* ---------- barra de topo ---------- */
.topo { position: sticky; top: 10px; z-index: 20; display: flex; align-items: center; gap: 10px; margin-top: 10px;
        padding: 6px 8px 6px 14px; background: var(--quadro); border-radius: 999px; box-shadow: 5px 6px 0 var(--sombra); }
.topo-logo { display: block; width: 88px; flex: none; line-height: 0; }
.topo-logo img { width: 100%; height: auto; }
.topo nav { display: none; margin-left: auto; gap: 4px; }
/* a bolinha das cores: pequena e discreta */
.topo-cor { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 2px solid rgba(245,242,233,.5); border-radius: 50%; background: none; cursor: pointer; }
.topo-cor:hover, .topo-cor[aria-expanded="true"] { border-color: var(--giz); }
.topo-cor .amostra { width: 24px; height: 24px; box-shadow: none; }
.topo nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; }
.topo nav a:hover { background: rgba(245,242,233,.14); }
.topo-ligar { padding: 9px 18px; border-radius: 999px; background: var(--giz); color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 0 3px 0 var(--realce); }
.burger { padding: 9px 14px; border: 2px solid rgba(245,242,233,.7); border-radius: 999px; background: none; color: var(--giz); font: 700 15px Quicksand, sans-serif; cursor: pointer; }
.topo.aberto nav { display: grid; position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: 10px; background: var(--quadro); border-radius: 22px; border: 2px solid rgba(245,242,233,.35); box-shadow: 5px 6px 0 var(--sombra); }
.topo.aberto nav a { padding: 13px 14px; font-size: 18px; }

/* ---------- os cartões: um quadro de giz (escuro) e um papel (claro), com a mesma forma ---------- */
.quadro, .papel-cartao { position: relative; padding: var(--pad-y) var(--pad-x); border-radius: var(--raio); box-shadow: 8px 9px 0 var(--sombra); }
.quadro::before, .papel-cartao::before { content: ""; position: absolute; inset: var(--moldura); border-radius: 16px; pointer-events: none; }
.quadro > *, .papel-cartao > * { position: relative; z-index: 1; }

.quadro { background: var(--quadro); }
.quadro::before { border: 2px solid rgba(245,242,233,.7); }
.quadro::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); pointer-events: none; opacity: .5; background: url(../img/giz.png) 0 0 / 128px 128px; }

.papel-cartao { background: var(--giz); color: var(--tinta); }
.papel-cartao::before { border: 3px double var(--padrao); }

/* ---------- tipografia ---------- */
.etiqueta { margin-bottom: 8px; font: 700 13px/1.2 Quicksand, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--realce); }
.papel-cartao .etiqueta { color: #6b5a3c; }
h1, h2 { margin: 0; font: 400 var(--t)/1 var(--bagel); letter-spacing: .01em; text-wrap: balance; }
h1 { --t: clamp(46px, 12.5vw, 76px); }
h2 { --t: clamp(36px, 9.5vw, 56px); }
h1 em, h2 em { font-style: normal; color: var(--realce); }
h3 { margin: 0; font: 400 25px/1.1 var(--bagel); }
.lead { margin-top: 16px; font-size: 19px; max-width: 54ch; }

/* ---------- botões ---------- */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 28px; border-radius: 999px; text-decoration: none; font: 700 18px Quicksand, sans-serif; text-align: center; transition: transform .12s; }
.btn:active { transform: translateY(2px); }
.btn-cheio { background: var(--giz); color: var(--tinta); box-shadow: 0 5px 0 var(--realce); }
.btn-giz { border: 2px solid rgba(245,242,233,.8); }
.btn-fantasma { border: 2px dotted rgba(245,242,233,.55); }
.btn-escuro { background: var(--quadro); color: var(--giz); box-shadow: 0 5px 0 var(--sombra); }
.btn-contorno { border: 2px solid var(--tinta); color: var(--tinta); }

/* ---------- início ---------- */
.heroi { display: grid; justify-items: center; gap: 22px; }
.logo-grande { position: relative; width: min(76vw, 340px); aspect-ratio: 479 / 214; filter: drop-shadow(5px 6px 0 rgba(0,0,0,.22)); }
/* as letras do logótipo são vazadas e mostram uma trama fina (como nos logótipos originais) */
.logo-trama { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--fundo); transition: background-color .4s;
              clip-path: ellipse(48.6% 47.4% at 50% 50%); fill: var(--padrao); stroke: var(--padrao); stroke-width: .4; }
.logo-grande img { position: relative; display: block; width: 100%; height: 100%; }
.heroi-quadro { width: 100%; }
.estado { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 6px 14px 6px 11px; border-radius: 999px; background: rgba(245,242,233,.1); font-size: 14px; font-weight: 700; }
.estado i { width: 10px; height: 10px; border-radius: 50%; background: #9a948a; flex: none; }
.estado.aberto i { background: #6fe08b; box-shadow: 0 0 0 4px rgba(111,224,139,.25); }
.estado.fechado i { background: var(--realce); }

.heroi-quadro .heroi-dados { margin-top: 28px; }
#frase-dia { font: 400 22px/1.15 var(--bagel); }
.bola { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 2px var(--quadro), 0 0 0 4px rgba(245,242,233,.35); }
.bola[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--quadro), 0 0 0 5px var(--giz); }
.bola small { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: rgba(245,242,233,.8); }
.bola[data-hoje]::after { content: ""; position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--giz); border: 2px solid var(--quadro); }

/* ---------- menus (cartão de restaurante) ---------- */
.carta-lista { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 24px; }
.carta-lista .linha { display: flex; align-items: baseline; gap: 8px; }
.carta-lista .nome { font-weight: 700; font-size: 17px; }
.carta-lista .pontos { flex: 1; min-width: 8px; border-bottom: 3px dotted rgba(26,28,27,.35); transform: translateY(-5px); }
.carta-lista .preco { font: 400 26px/1 var(--bagel); white-space: nowrap; }
.carta-lista p { margin-top: 4px; font-size: 16px; color: #46463f; }
.carta-nota { margin-top: 28px; padding-top: 18px; border-top: 2px dotted rgba(26,28,27,.3); font-size: 16px; }

/* ---------- a casa ---------- */
.dia-grelha { display: grid; gap: 22px; margin-top: 26px; }
.dia-grelha article { padding-top: 16px; border-top: 2px dotted rgba(245,242,233,.35); }
.dia-grelha h3 { margin-bottom: 6px; color: var(--realce); }
.fecho { margin-top: 30px; font: 400 clamp(26px, 7vw, 38px)/1.05 var(--bagel); }
.fecho em { font-style: normal; color: var(--realce); }

/* ---------- encomendas ---------- */
.encomendas .cab p:last-child { margin-top: 14px; font-size: 19px; max-width: 46ch; }
.factos { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.factos div { padding-top: 14px; border-top: 2px dotted rgba(26,28,27,.3); }
.factos dt { font: 700 12.5px/1.3 Quicksand, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6b5a3c; }
.factos dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.factos small { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: #46463f; }
.notas-cartao { margin-top: 22px; padding-top: 18px; border-top: 2px dotted rgba(26,28,27,.3); display: grid; gap: 6px; font-size: 16px; color: #46463f; }
.notas-cartao strong { color: var(--tinta); }

/* ---------- onde estamos ---------- */
.onde-grelha { display: grid; gap: 34px; margin-top: 26px; }
.dados { margin: 0; display: grid; gap: 16px; }
.dados div { padding-top: 14px; border-top: 2px dotted rgba(245,242,233,.35); }
.dados dt { font: 700 12.5px/1.3 Quicksand, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--realce); }
.dados dd { margin: 2px 0 0; }
.dados .nota { display: block; margin-top: 4px; font-size: 15.5px; opacity: .88; }
.dados a { text-decoration-color: var(--realce); text-underline-offset: 3px; }
.horas { border-collapse: collapse; }
.horas th { padding: 0 18px 0 0; text-align: left; font-weight: 600; }
.horas td { padding: 0; font-weight: 700; white-space: nowrap; }
.onde-grelha .acoes { flex-direction: column; align-items: stretch; }
.onde-direita { display: grid; gap: 22px; align-content: start; }
.opiniao { padding-top: 14px; border-top: 2px dotted rgba(245,242,233,.35); }
.opiniao h3 { margin: 6px 0; font-size: 27px; }
.estrelas { font-size: 30px; letter-spacing: 5px; color: #f2c14e; line-height: 1; }

/* ---------- rodapé ---------- */
.rodape { margin-top: var(--gap); margin-bottom: 96px; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.8); font-size: 13.5px; line-height: 1.7; text-align: center; color: rgba(245,242,233,.92); }
.rodape a { color: #fff; }

/* ---------- ecrãs maiores: os cartões passam a duas colunas (título à esquerda, conteúdo à direita) ---------- */
@media (min-width: 760px) {
  .topo nav { display: flex; }
  .topo-cor { margin-left: 8px; }
  .burger { display: none; }
  .btn { flex: 0 0 auto; }
  .dia-grelha { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .onde-grelha { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .carta-lista .nome { font-size: 22px; }
  .carta-lista .preco { font-size: 38px; }
}
@media (min-width: 900px) {
  .cena { padding-top: 38px; }
  .logo-grande { width: 360px; }

  .heroi-quadro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 0; align-items: center; }
  .heroi-quadro .heroi-dados { margin: 0; padding: 0 0 0 48px; border-left: 2px dotted rgba(245,242,233,.35); }
  .heroi-quadro .heroi-dados div:first-child { padding-top: 0; border-top: 0; }

  .carta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); grid-template-areas: "cab lista" "nota lista"; grid-template-rows: auto 1fr; column-gap: 56px; }
  .carta .cab { grid-area: cab; }
  .carta-lista { grid-area: lista; margin-top: 0; align-content: center; }
  .carta-nota { grid-area: nota; align-self: end; }

  .encomendas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
  .encomendas .factos, .encomendas .notas-cartao { grid-column: 1 / -1; }
  .factos { grid-template-columns: repeat(4, 1fr); }
  .encomendas .acoes { margin-top: 0; flex-direction: column; align-items: stretch; }
}

/* ---------- brincadeira: mudar as cores ---------- */
@keyframes abana { 0% { transform: none; } 25% { transform: rotate(-3deg) scale(1.04); } 60% { transform: rotate(2deg) scale(1.02); } 100% { transform: none; } }
.logo-grande.abana { animation: abana .55s ease; }

.cores-painel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(320px, calc(100vw - 24px)); padding: 20px 20px 18px; background: var(--quadro); border: 2px solid rgba(245,242,233,.7); border-radius: 20px; box-shadow: 6px 7px 0 var(--sombra); }
.cores-bolas { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 34px; }
.cores-acoes { display: flex; gap: 10px; }
.cores-acoes button { flex: 1; min-height: 46px; padding: 8px 10px; border: 2px solid rgba(245,242,233,.7); border-radius: 999px; background: none; color: var(--giz); font: 700 15px Quicksand, sans-serif; cursor: pointer; }
.cores-acoes button:first-child { background: var(--giz); color: var(--tinta); box-shadow: 0 4px 0 var(--realce); }
.amostra { display: block; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--c1, #1d7ea4) 50%, var(--c2, #6bbad6) 50%); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; transition: none; } .btn { transition: none; } .logo-trama { transition: none; } .logo-grande.abana { animation: none; } }