/* =========================================================
   CHURREX · Landing page
   Por cima de tokens.css e componentes.css (design system v1).
   Escrito a partir do telemóvel; os @media só acrescentam.
   ========================================================= */

:root {
  --topo-h: 60px; --barra-h: 72px;
  /* tudo retangular, como as faixas dos posts */
  --raio-sm: 0; --raio-md: 0; --raio-foto: 0; --raio-full: 0;
}
@media (min-width: 900px) { :root { --topo-h: 72px; } }

html { scroll-padding-top: calc(var(--topo-h) + 8px); }
html, body { overflow-x: clip; }
body { padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body { padding-bottom: 0; } }

[hidden] { display: none !important; }
.saltar { position: absolute; left: var(--s-3); top: -100px; z-index: 100; padding: var(--s-2) var(--s-4); background: var(--carvao-900); color: var(--branco); font-weight: var(--peso-forte); }
.saltar:focus { top: var(--s-3); color: var(--branco); }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: var(--z-nav); background: rgb(255 247 236 / 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--fio-w) solid var(--fio); }
.topo-linha { display: flex; align-items: center; gap: var(--s-3); height: var(--topo-h); }
.topo-marca { display: block; flex: none; }
.topo-marca img { width: 40px; height: auto; transition: opacity .2s ease-out; }
@media (min-width: 900px) { .topo-marca img { width: 46px; } }
.topo-nav { display: none; gap: var(--s-1); margin-left: var(--s-4); }
.topo-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); color: var(--texto); text-decoration: none; font-weight: var(--peso-forte); font-size: var(--t-sm); letter-spacing: var(--tr-rotulo); text-transform: uppercase; border-radius: var(--raio-sm); }
.topo-nav a:hover { background: var(--creme-200); color: var(--texto); }
@media (min-width: 1080px) { .topo-nav { display: flex; } }
.estado { margin-left: auto; white-space: nowrap; }
.estado--fechado { background: var(--creme-200); color: var(--carvao-700); }
.estado--fechado::before { background: var(--carvao-300); box-shadow: none; }
.topo-ligar { flex: none; }
.estado[hidden] + .topo-ligar { margin-left: auto; }
@media (max-width: 899px) { .topo-ligar { display: none; } }
@media (max-width: 359px) { .estado { font-size: var(--t-xs); padding-inline: var(--s-2); } }

/* ---------- Hero ---------- */
.hero { position: relative; height: calc(100svh - var(--topo-h)); min-height: 560px; max-height: 960px; overflow: hidden; background: var(--brasa-500); isolation: isolate; }
.hero-lume { position: absolute; inset: 0; }
/* os vídeos entram dentro do .lume por JS; sem JS ficam escondidos */
.hero > .lume-videos { display: none; }
.rotulo--claro { color: var(--chama-300); }
.rotulo--chama { color: var(--chama-500); }

/* o hero fica só com a marca: SEMPRE EM BRASA, grande e inclinado */
.hero-conteudo { position: absolute; z-index: 4; inset: 0 0 18% 0; display: grid; place-items: center; pointer-events: none; }
.hero-tipo { position: absolute; left: -15%; right: -15%; top: 40%; translate: 0 -50%; rotate: -7deg; display: grid; gap: 0.04em; font-size: clamp(3.2rem, 1.4rem + 8vw, 8.5rem); }
.tipo-linha { overflow: hidden; white-space: nowrap; line-height: 0.92; }
.tipo-pista { display: inline-block; font-family: var(--fonte-display); text-transform: uppercase; color: var(--chama-500); text-shadow: 0.04em 0.05em 0 var(--brasa-900); animation: desliza 60s linear infinite; }
.tipo-linha--inversa .tipo-pista { animation-direction: reverse; animation-duration: 70s; }
.tipo-pista .oco { color: transparent; -webkit-text-stroke: 0.025em var(--chama-500); text-shadow: none; }
.tipo-pista .ponto { color: var(--brasa-500); text-shadow: none; }
@keyframes desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tipo-pista { animation: none; } }
/* o frango na tenaz à frente das letras; a tenaz some-se nas chamas */
.hero-frango { position: absolute; z-index: 4; left: 50%; bottom: 2%; height: 90%; width: auto; max-width: none; translate: -50% 0; pointer-events: none; }
.hero-cta { position: absolute; z-index: 6; left: 50%; bottom: 22%; translate: -50% 0; display: flex; align-items: flex-start; pointer-events: auto; }
.hero-cta .tracos { display: none; }
.hero-cta .btn { white-space: nowrap; }
@media (max-width: 699px) {
  /* telemóvel: hero mais baixo, o frango ao centro e o botão por cima da tenaz */
  .hero { height: clamp(480px, 68svh, 580px); min-height: 0; }
  .hero-tipo { top: 26%; }
  .hero-frango { height: 74%; left: 50%; bottom: 6%; }
  .hero-cta { left: 50%; bottom: 24%; translate: -50% 0; }
  html.js .hero .hero-cta { translate: -50% 20px; }
  html.js .hero.mostrar .hero-cta { translate: -50% 0; }
  .hero-cta .tracos { display: none; }
}

/* botão torto, com traços à mão (da referência KŌ) */
.btn--torto { rotate: -4deg; white-space: nowrap; }
.btn--torto:hover { rotate: -2deg; }
.tracos { width: 34px; height: 34px; margin: -18px 0 0 4px; fill: none; stroke: var(--chama-500); stroke-width: 3; stroke-linecap: square; flex: none; }

/* com JS, a tipografia e o botão só entram quando o selo voa para o topo */
.js .hero-tipo, .js .hero-cta { opacity: 0; transition: opacity .9s var(--e-sai), translate .9s var(--e-sai); }
.js .hero-cta { translate: -50% 20px; }
.js .hero-frango { opacity: 0; transform: translateY(18%) rotate(6deg); transition: opacity .8s var(--e-sai), transform 1s var(--e-mola); }
.js .hero.mostrar .hero-tipo { opacity: 1; }
.js .hero.mostrar .hero-frango { opacity: 1; transform: none; transition-delay: .15s; }
.js .hero.mostrar .hero-cta { opacity: 1; translate: -50% 0; transition-delay: .45s; }
/* véu sobre o vídeo, para a tipografia sobressair */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgb(36 16 12 / 0.45); opacity: 0; transition: opacity 1s ease-out; }
.hero.mostrar::after, html:not(.js) .hero::after { opacity: 1; }
/* as chamas de baixo ficam por cima do véu e da tipografia */
.hero-lume { isolation: auto; }
.hero-lume .lume-camada { z-index: 5; }

/* ---------- Promoção do mês: dois posts do Facebook, a informação vai na imagem ---------- */
.oferta { background: var(--chama-500); color: var(--carvao-900); padding-bottom: calc(var(--seccao) + 14px); text-align: center; }
/* sobe 2px por cima do hero: tapa o fio do fundo que as chamas deixam ver na base */
.oferta { margin-top: -2px; z-index: 1; }
.oferta-titulo { color: var(--branco); text-shadow: 0.05em 0.06em 0 var(--brasa-900); font-size: clamp(2.6rem, 1.4rem + 6vw, 5.5rem); rotate: var(--inclina); margin-bottom: var(--s-6); }
/* telemóvel: um post de cada vez, a deslizar, com a ponta do outro à vista */
.oferta-posts { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--s-5); margin: 0 calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter) var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.oferta-posts::-webkit-scrollbar { display: none; }
.oferta-post { margin: 0; scroll-snap-align: start; border: var(--traco) solid var(--carvao-900); background: var(--carvao-900); box-shadow: var(--sh-duro-carvao); rotate: -1.5deg; }
.oferta-post:nth-child(2) { rotate: 1.5deg; }
.oferta-post img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.oferta-dica { margin-top: calc(var(--s-2) * -1); font-size: var(--t-sm); font-weight: var(--peso-forte); }
/* computador (ou quando só resta um post): lado a lado, sem deslizar */
@media (min-width: 760px) {
  .oferta-posts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; padding-inline: 0; overflow: visible; gap: var(--s-7); }
  .oferta-dica { display: none; }
}
.oferta-posts--um { grid-auto-columns: 100%; justify-content: center; }
@media (min-width: 760px) { .oferta-posts--um { grid-template-columns: minmax(0, 440px); } }
.oferta-posts--um + .oferta-dica { display: none; }
.oferta-acoes { display: flex; justify-content: center; margin-top: var(--s-6); }
@media (max-width: 479px) { .oferta-acoes .btn { flex: 1; } }

/* ---------- Fita de produtos ---------- */
.fita { overflow: hidden; background: var(--carvao-900); color: var(--chama-500); padding-block: var(--s-3); rotate: -1.5deg; margin-block: -14px; position: relative; z-index: 3; border-block: var(--traco) solid var(--chama-500); }
.fita-pista { display: inline-flex; white-space: nowrap; font-family: var(--fonte-display); text-transform: uppercase; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); line-height: 1; animation: desliza 40s linear infinite; }
.fita-pista span { display: inline-flex; align-items: center; gap: var(--s-5); padding-right: var(--s-5); }
.fita-pista span::after { content: ""; width: 0.6em; height: 0.8em; background: var(--brasa-500); clip-path: path("M9 0C10.5 4.5 18 7.5 18 15.75C18 20.7 13.95 24 9 24C4.05 24 0 20.7 0 15.75C0 12 2.1 9.9 3.9 8.4C3.9 11.1 5.1 12.9 6.9 13.5C6 9 6.9 4.5 9 0Z"); transform: scale(0.8); }
@media (prefers-reduced-motion: reduce) { .fita-pista { animation: none; } }

/* ---------- Secções ---------- */
.sec { padding-block: var(--seccao); position: relative; overflow-x: clip; }
.sec--branca { background: var(--fundo-alto); }
.sec--carvao { background: var(--carvao-900); color: var(--creme-100); }
.sec--chama { background: var(--chama-500); color: var(--carvao-900); }
.cab .rotulo { white-space: nowrap; }
.cab { display: grid; gap: var(--s-3); justify-items: start; margin-bottom: var(--s-7); max-width: 720px; position: relative; z-index: 2; }
/* produtos e avisos por SMS seguidos, sem o espaço duplo entre as duas */
.sec--junta-baixo { padding-bottom: var(--s-7); }
.sec--junta-cima { padding-top: 0; }
.cab--escuro .lead { color: var(--creme-200); }
.revela { transition: opacity .6s var(--e-sai), translate .6s var(--e-sai); }
.js .revela:not(.visto) { opacity: 0; translate: 0 24px; }


/* ---------- O que sai da brasa ---------- */
/* telemóvel: carrossel a deslizar; computador: os 5 numa linha */
/* ementa: o quadro da loja sobre a brasa, sem preços */
.ementa-sec { background: var(--carvao-900); color: var(--creme-100); isolation: isolate; }
.ementa-fundo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: saturate(1.3); }
.ementa-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 70% 60%, transparent 0 30%, var(--carvao-900) 85%); }
.ementa-sec .h2 { color: var(--creme-100); }
.quadro-cena { display: grid; gap: var(--s-3); position: relative; z-index: 2; }
.quadro-menu { margin: 0 0 var(--s-5); text-align: center; font-family: var(--fonte-display); text-transform: uppercase; line-height: .85; font-size: clamp(3.5rem, 2rem + 6vw, 6rem); color: var(--creme-100); text-shadow: 0.04em 0.05em 0 var(--brasa-900); }
.quadro { position: relative; padding: var(--s-5) var(--s-4) var(--s-6); background: var(--brasa-500); box-shadow: 8px 10px 0 rgb(0 0 0 / .45); }
@media (min-width: 700px) { .quadro { padding: var(--s-6) var(--s-6) var(--s-7); box-shadow: 10px 12px 0 rgb(0 0 0 / .45); } }
.quadro-grelha { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .quadro-grelha { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); } }
.quadro-grupo { display: grid; gap: var(--s-3); align-content: start; }
.quadro-grupo--painel { padding: 0 var(--s-3) var(--s-4); background: var(--creme-100); box-shadow: 4px 4px 0 var(--brasa-900); }
.quadro-tit { justify-self: center; padding: 0.2em 0.7em 0.08em; font-family: var(--fonte-display); font-weight: 400; text-transform: uppercase; font-size: var(--t-xl); line-height: 1; background: var(--creme-100); color: var(--brasa-600); box-shadow: 3px 3px 0 var(--brasa-900); }
.quadro-grupo--painel .quadro-tit { justify-self: stretch; text-align: center; margin: 0 calc(var(--s-3) * -1); padding-block: 0.35em 0.15em; border-bottom: 3px solid var(--brasa-600); box-shadow: none; }
.quadro ul { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
/* cada linha: o quadradinho escuro (onde estava a unidade) e a etiqueta */
.quadro li { display: flex; align-items: center; gap: 6px; font-family: var(--fonte-display); text-transform: uppercase; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); line-height: 1; }
.quadro li::before { content: ""; flex: none; width: 1.15em; height: 1.15em; background: var(--carvao-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23F19F21' d='M6 0C7 3 12 5 12 10.5C12 13.8 9.3 16 6 16C2.7 16 0 13.8 0 10.5C0 8 1.4 6.6 2.6 5.6C2.6 7.4 3.4 8.6 4.6 9C4 6 4.6 3 6 0Z'/%3E%3C/svg%3E") center / 45% no-repeat; }
.quadro li { --etq-fundo: var(--brasa-500); --etq-cor: var(--branco); }
.quadro-grupo:not(.quadro-grupo--painel) li { --etq-fundo: var(--creme-100); --etq-cor: var(--brasa-600); }
/* no telemóvel, o conteúdo das caixas fica ao centro */
@media (max-width: 699px) { .quadro ul { justify-items: center; } }
.quadro .etq { padding: 0.2em 0.45em 0.08em; background: var(--etq-fundo); color: var(--etq-cor); box-shadow: 2px 2px 0 var(--brasa-900); }
.quadro small { font-size: 0.55em; letter-spacing: 0.02em; opacity: .85; }
.nota-ementa { margin-top: var(--s-6); font-weight: var(--peso-semi); }
.nota-ementa a { white-space: nowrap; }
.ementa-sec .nota-ementa a { color: var(--chama-300); }

/* ---------- Quinzenas e sopa ---------- */
.especiais { display: grid; gap: var(--s-5); align-items: stretch; }

.promo { padding-bottom: calc(var(--s-9) + var(--s-3)); }
/* sempre numa linha: encolhe com o ecrã (a Barthowheel ocupa ~7,6× o tamanho da letra) */
.promo-titulo { font-size: clamp(2rem, calc((100vw - 96px) / 8.1), 5.5rem); white-space: nowrap; }
.promo-txt { max-width: 46ch; font-weight: var(--peso-semi); position: relative; z-index: 1; }

/* formulário de avisos por SMS, dentro do cartaz das quinzenas */
.avisos { position: relative; z-index: 1; display: grid; gap: var(--s-4); width: 100%; max-width: 560px; margin-top: var(--s-3); text-align: left; }
.avisos-campos { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .avisos-campos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: var(--s-1); }
.campo-rotulo { font-weight: var(--peso-forte); font-size: var(--t-xs); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--creme-100); }
.campo input { width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4); border: var(--traco) solid var(--carvao-900); border-radius: 0; background: var(--creme-100); color: var(--carvao-900); font: inherit; font-size: max(16px, var(--t-base)); font-weight: var(--peso-semi); }
.campo input::placeholder { color: var(--carvao-300); }
.campo input:focus-visible { outline: var(--traco) solid var(--branco); outline-offset: 2px; }
.campo input[aria-invalid="true"] { border-color: var(--lume-400); box-shadow: inset 0 0 0 2px var(--lume-400); }
.consentimento { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-sm); font-weight: var(--peso-semi); line-height: 1.4; cursor: pointer; }
.consentimento input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--chama-500); }
.consentimento.erro span { text-decoration: underline wavy var(--lume-400); text-underline-offset: 4px; }
.avisos .btn { justify-self: center; }
@media (max-width: 559px) { .avisos .btn { justify-self: stretch; } }
.avisos-msg { min-height: 1.4em; font-weight: var(--peso-forte); }
.avisos-msg.erro { color: var(--lume-200); }
.avisos.enviado .avisos-campos, .avisos.enviado .consentimento, .avisos.enviado .btn { display: none; }
.avisos.enviado .avisos-msg { font-family: var(--fonte-display); text-transform: uppercase; font-size: var(--t-xl); color: var(--chama-500); text-shadow: var(--sh-texto); text-align: center; }
.promo .btn { position: relative; z-index: 1; margin-top: var(--s-2); }
.promo .borda-chamas { height: 80px; }

/* ---------- Prova: críticas em cartões tortos, em carrossel (referência KŌ) ---------- */
.prova-sec { background: var(--brasa-500); }
.prova-sec .h2 { color: var(--creme-100); text-shadow: 0.04em 0.05em 0 var(--brasa-900); }
.prova-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.prova-topo .cab { margin-bottom: var(--s-5); }
.opinioes-setas { display: none; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 640px) { .opinioes-setas { display: flex; } }
.opinioes-setas .btn { min-width: 52px; font-family: var(--fonte-texto); font-weight: var(--peso-forte); }
.opinioes-setas .btn:disabled { opacity: .45; cursor: default; translate: none; }
.link-seta { font-weight: var(--peso-forte); display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.link-seta::after { content: "→"; transition: translate var(--d-rapido) var(--e-sai); }
.link-seta:hover::after { translate: 4px 0; }
.prova-link { margin-top: var(--s-3); color: var(--creme-100); }
.prova-link:hover { color: var(--branco); }

/* faixa que desliza: espaço à volta para as sombras e a inclinação não serem cortadas */
.opinioes { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--s-5); margin: 0 calc(var(--gutter) * -1); padding: var(--s-4) var(--gutter) var(--s-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.opinioes::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .opinioes { grid-auto-columns: calc((100% - 2 * var(--gutter) - var(--s-5)) / 2.2); } }
@media (min-width: 1000px) { .opinioes { grid-auto-columns: calc((100% - 2 * var(--gutter) - 2 * var(--s-5)) / 3.2); } }
@media (prefers-reduced-motion: reduce) { .opinioes { scroll-behavior: auto; } }
@media (hover: hover) and (pointer: fine) { .opinioes { cursor: grab; } }
.opinioes.a-arrastar { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.opinioes-dica { margin-top: calc(var(--s-3) * -1); font-size: var(--t-sm); font-weight: var(--peso-semi); color: var(--creme-100); }
@media (min-width: 640px) { .opinioes-dica { display: none; } }
.opiniao { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--s-4); padding: var(--s-5); scroll-snap-align: start; border: var(--traco) solid var(--carvao-900); box-shadow: 6px 6px 0 var(--brasa-900); }
.opiniao blockquote { margin: 0; }
.opiniao blockquote p { font-family: var(--fonte-display); text-transform: uppercase; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.05; }
.opiniao blockquote p::before { content: "\201C"; }
.opiniao blockquote p::after { content: "\201D"; }
.opiniao figcaption { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.opiniao figcaption b { display: block; font-weight: var(--peso-forte); font-size: var(--t-base); }
.opiniao-ini { display: grid; place-items: center; width: 40px; height: 40px; flex: none; font-family: var(--fonte-display); font-size: var(--t-md); background: var(--brasa-500); color: var(--branco); }
.opiniao--creme { background: var(--creme-100); color: var(--carvao-900); rotate: 1.5deg; }
.opiniao--carvao { background: var(--carvao-900); color: var(--creme-100); border-color: var(--carvao-900); rotate: -2deg; }
.opiniao--carvao blockquote p { color: var(--chama-500); }
.opiniao--carvao figcaption { color: var(--creme-200); }
.opiniao--chama { background: var(--chama-500); color: var(--carvao-900); rotate: 2deg; }
.opiniao--chama .opiniao-ini { background: var(--carvao-900); color: var(--chama-500); }

/* ---------- Onde estamos ---------- */
.onde-grelha { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .onde-grelha { grid-template-columns: 5fr 6fr; gap: var(--s-9); } }
@media (max-width: 899px) { .onde-foto { justify-self: center; width: min(100%, 400px); } }
.onde-foto { position: relative; margin: 0 var(--s-2); rotate: -2deg; padding: var(--s-3) var(--s-3) var(--s-7); background: var(--branco); border: var(--traco) solid var(--carvao-900); box-shadow: var(--sh-duro-carvao); }
.onde-foto img { width: 100%; height: auto; }
.onde-faixa { position: absolute; left: 50%; bottom: var(--s-4); translate: -50% 0; white-space: nowrap; font-size: var(--t-xl); padding: 0.2em 0.5em 0.1em; }
.onde-info { display: grid; gap: var(--s-4); justify-items: start; }

/* o estado de agora, em grande */
.agora { display: flex; align-items: center; gap: var(--s-4); width: 100%; max-width: 480px; margin-top: var(--s-2); padding: var(--s-4) var(--s-5); background: var(--carvao-900); color: var(--branco); border-radius: var(--raio-md); box-shadow: var(--sh-duro-md); }
.agora-luz { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--carvao-300); }
.agora.aberto .agora-luz { background: #2BC160; box-shadow: 0 0 0 5px rgb(43 193 96 / 0.25); animation: pulsa 2s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 9px rgb(43 193 96 / 0.08); } }
.agora-titulo { font-family: var(--fonte-display); text-transform: uppercase; font-size: var(--t-2xl); line-height: 1; color: var(--chama-500); }
.agora-sub { font-weight: var(--peso-semi); font-size: var(--t-sm); color: var(--creme-200); margin-top: var(--s-1); }

/* a semana: sete dias clicáveis, a terça riscada, hoje marcado */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; max-width: 480px; margin-top: var(--s-2); }
.semana button { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: var(--chama-500); color: var(--carvao-900); font-family: var(--fonte-display); text-transform: uppercase; font-size: clamp(0.85rem, 0.7rem + 0.8vw, 1.15rem); line-height: 1; cursor: pointer; transition: translate var(--d-rapido) var(--e-sai), box-shadow var(--d-rapido) var(--e-sai), background-color var(--d-rapido) var(--e-sai); }
.semana button:hover { translate: 0 -2px; box-shadow: 2px 2px 0 var(--brasa-900); }
.semana .folga { background: transparent; color: var(--carvao-300); box-shadow: inset 0 0 0 2px var(--cinza-fio); overflow: hidden; }
.semana .folga::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: var(--brasa-500); rotate: -35deg; }
.semana button[aria-pressed="true"] { background: var(--brasa-500); color: var(--branco); box-shadow: 3px 3px 0 var(--brasa-900); translate: 0 -3px; }
.semana .folga[aria-pressed="true"] { background: var(--carvao-900); color: var(--creme-200); }
/* "hoje" por baixo do dia de hoje */
.semana .hoje::before { content: "hoje"; position: absolute; left: 50%; bottom: -18px; translate: -50% 0; font-family: var(--fonte-texto); font-weight: var(--peso-forte); font-size: 10px; letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--brasa-600); }
.semana-dica { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--texto-suave); }
.dia-escolhido { margin-top: 0; font-weight: var(--peso-forte); font-size: var(--t-sm); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--texto-suave); }

/* os dois turnos */
.turnos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); width: 100%; max-width: 480px; }
.turno { display: grid; gap: var(--s-1); padding: var(--s-4); border: var(--traco) solid var(--carvao-900); border-radius: var(--raio-md); background: var(--fundo-alto); }
.turno-nome { font-weight: var(--peso-forte); font-size: var(--t-xs); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--brasa-600); }
.turno-horas { font-family: var(--fonte-display); font-size: clamp(1.35rem, 1rem + 1.4vw, 1.953rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 359px) { .turno { padding: var(--s-3); } .turno-horas { font-size: 1.15rem; } }
.turno--fechado { width: 100%; max-width: 480px; border-style: dashed; }
.turno--fechado .turno-horas { color: var(--carvao-500); }
.turno-nota { font-weight: var(--peso-semi); font-size: var(--t-sm); color: var(--texto-suave); }

.dados { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4) var(--s-5); margin: var(--s-3) 0 0; }
@media (min-width: 480px) { .dados { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.dados dt { font-weight: var(--peso-forte); font-size: var(--t-xs); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--texto-suave); }
.dados dd { margin: 0; font-weight: var(--peso-semi); }
.onde-acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
/* no telemóvel, os dois botões a toda a largura, um por baixo do outro */
@media (max-width: 479px) { .onde-acoes { display: grid; justify-self: stretch; } .onde-acoes .btn { justify-content: center; } }

/* ---------- Perguntas ---------- */
.faq-grelha { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .faq-grelha { grid-template-columns: 4fr 7fr; gap: var(--s-8); } }
/* o cabeçalho não estica até à altura da lista (senão o espaço sobra entre o rótulo e o título) */
.faq-grelha .cab { align-self: start; }
.faq { display: grid; gap: var(--s-3); }
.faq details { background: var(--creme-100); border: var(--fio-w) solid var(--fio); border-radius: var(--raio-md); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-5); cursor: pointer; list-style: none; font-weight: var(--peso-forte); font-size: var(--t-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--fonte-display); font-size: var(--t-2xl); line-height: 1; color: var(--brasa-600); transition: rotate var(--d-medio) var(--e-sai); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 var(--s-5) var(--s-5); }

/* ---------- Fecho ---------- */
.fecho { background: var(--brasa-500); color: var(--branco); position: relative; }
.fecho-chamas { height: 90px; background: var(--fundo-alto); }
@media (min-width: 900px) { .fecho-chamas { height: 150px; } }
/* tapa o fio da cor de trás que o arredondamento deixa ver na base das chamas */
.fecho-chamas::after, .promo .borda-chamas::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--brasa-500); }
.promo .borda-chamas::after { background: var(--chama-500); }
.fecho-corpo { display: grid; gap: var(--s-4); justify-items: center; text-align: center; padding-block: var(--s-7) var(--s-9); }
.fecho-titulo { color: var(--chama-500); text-shadow: var(--sh-texto); font-size: clamp(2.6rem, 1.4rem + 6vw, 5.5rem); }
.fecho .lead { margin-inline: auto; }
.fecho-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--carvao-900); color: var(--creme-200); padding-block: var(--s-8) var(--s-6); font-size: var(--t-sm); }
.rodape a { color: var(--creme-100); text-decoration-color: rgb(255 247 236 / 0.35); }
.rodape a:hover { color: var(--chama-500); text-decoration-color: currentColor; }
.rodape-topo { display: flex; align-items: center; gap: var(--s-5); padding-bottom: var(--s-6); border-bottom: var(--fio-w) solid rgb(255 255 255 / 0.12); }
.rodape-topo img { width: 64px; height: auto; flex: none; }
@media (min-width: 700px) { .rodape-topo img { width: 88px; } }
.rodape-hashtag { font-family: var(--fonte-display); text-transform: uppercase; line-height: 1; font-size: clamp(1.35rem, 0.9rem + 2.8vw, 3rem); color: var(--chama-500); }
.rodape-desc { margin-top: var(--s-1); font-weight: var(--peso-semi); color: var(--carvao-300); }

.rodape-colunas { display: grid; gap: var(--s-6); padding-block: var(--s-6); }
@media (min-width: 700px) { .rodape-colunas { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.rodape-col { display: grid; gap: var(--s-2); align-content: start; justify-items: start; }
.rodape-tit { font-family: var(--fonte-texto); font-weight: var(--peso-forte); font-size: var(--t-xs); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--chama-500); margin-bottom: var(--s-1); }
.rodape-col p { font-size: var(--t-base); line-height: 1.5; }
.rodape-tel { font-family: var(--fonte-display); font-size: var(--t-2xl); line-height: 1.1; text-decoration: none; white-space: nowrap; }
.rodape-tels { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
/* morada sempre numa linha: no telemóvel a letra encolhe o que for preciso (ocupa ~22,6× o tamanho) */
.rodape-col .rodape-morada { white-space: nowrap; font-size: min(var(--t-base), calc((100vw - 34px) / 22.8)); }
/* no computador, a morada numa linha: as duas primeiras colunas à medida, o horário fica com o resto */
@media (min-width: 700px) and (max-width: 1199px) { .rodape-colunas { grid-template-columns: 1fr 1fr; } .rodape-col:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
@media (min-width: 1200px) { .rodape-colunas { grid-template-columns: auto auto 1fr; } }

.rodape-base { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: var(--fio-w) solid rgb(255 255 255 / 0.12); }
@media (min-width: 900px) { .rodape-base { grid-template-columns: 1fr auto; align-items: center; } }
.rodape-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.rodape-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--peso-forte); font-size: var(--t-xs); letter-spacing: var(--tr-rotulo); text-transform: uppercase; text-decoration: none; }
.rodape-contactos { color: var(--carvao-300); }

/* ---------- Barra fixa (telemóvel) ---------- */
.barra-ligar {
  position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--barra-h); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--carvao-900); color: var(--creme-100);
  box-shadow: 0 -8px 24px rgb(36 16 12 / 0.25);
  transition: translate var(--d-lento) var(--e-sai);
}
.barra-ligar .btn { flex: none; }
.barra-estado { font-size: var(--t-sm); font-weight: var(--peso-semi); line-height: 1.25; min-width: 0; }
.js .barra-ligar.escondida { translate: 0 110%; }
@media (max-width: 359px) { .barra-estado { display: none; } .barra-ligar .btn { flex: 1; } }
@media (min-width: 900px) { .barra-ligar { display: none; } }