/* Café Exemplo · cafeteria inventada para demonstração (identidade própria, não a da TAB) */

:root {
  --cafe: #3d2219;
  --cafe-2: #6b3f2a;
  --caramelo: #b8794a;
  --creme: #fbf6ef;
  --leite: #f3e7d8;
  --wa: #C82E69;
  --serifa: "Fraunces", Georgia, serif;
  --texto: "Inter", system-ui, sans-serif;
  --margem: 20px;
}
@media (min-width: 960px) { :root { --margem: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--cafe); font: 400 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--serifa); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
.wrap { max-width: calc(1100px + var(--margem) * 2); margin: 0 auto; padding: 0 var(--margem); }

/* Faixa da TAB: deixa claro que é exemplo */
.aviso { background: #281426; color: #FBF7F4; font-size: 14px; }
.aviso .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.aviso b { font: 500 11px/1.4 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #ED6AA2; margin-right: 8px; }
.aviso__cta, .aviso__voltar { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.aviso__cta { background: #C82E69; color: #fff; }
.aviso__voltar { border: 1px solid rgba(251, 247, 244, .45); color: #FBF7F4; }
.aviso__voltar:hover { border-color: #FBF7F4; }
.aviso__cta:active, .aviso__voltar:active { transform: scale(.98); }
/* Celular: os dois botões na primeira linha, o aviso embaixo */
.aviso p { order: 3; flex-basis: 100%; }
@media (min-width: 900px) { .aviso p { order: 0; flex: 1 1 0; min-width: 0; } }

/* Cabeçalho do café */
.cafe-topo { position: sticky; top: 0; z-index: 10; background: rgba(251, 246, 239, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(61, 34, 25, .08); }
.cafe-topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.cafe-marca { font: 600 22px/1 var(--serifa); text-decoration: none; }
.cafe-nav { display: flex; gap: 14px; font-size: 14px; }
@media (min-width: 560px) { .cafe-nav { gap: 24px; font-size: 15px; } }
.cafe-nav a { text-decoration: none; }
.cafe-nav a:hover { color: var(--caramelo); }
@media (max-width: 559px) { .cafe-nav .so-largo { display: none; } }

.btn-cafe {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 999px;
  font: 600 16px/1.2 var(--texto); text-decoration: none;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.btn-cafe:active { transform: scale(.98); }
@media (hover: hover) { .btn-cafe:hover { transform: scale(1.02); box-shadow: 0 10px 24px -12px rgba(61, 34, 25, .5); } }
.btn-cafe--wa { background: var(--wa); color: #fff; }
.btn-cafe--claro { background: var(--leite); color: var(--cafe); }
.btn-cafe svg { width: 20px; height: 20px; }

/* Capa */
.capa { padding: 40px 0 64px; }
.capa__grade { display: grid; gap: 32px; }
.capa__selo { font-size: 14px; color: var(--caramelo); font-weight: 600; }
.capa h1 { margin-top: 10px; font-size: 42px; }
.capa p { margin-top: 18px; font-size: 18px; color: var(--cafe-2); max-width: 30em; }
.capa__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.capa__fotos { min-height: 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: 300px; }
.capa__fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; background: var(--leite); }
.capa__fotos img:first-child { grid-row: span 2; }
@media (min-width: 900px) {
  .capa { padding: 72px 0 96px; }
  .capa__grade { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .capa h1 { font-size: 60px; }
  .capa__fotos { height: 440px; }
}

/* Fotos: tons de café em degradê (no projeto real entram as fotos do Instagram do cliente) */
.f1 { background: linear-gradient(135deg, #c99a6b, #6b3f2a); }
.f2 { background: linear-gradient(160deg, #f0dcc2, #b88a5e); }
.f3 { background: linear-gradient(120deg, #4a2a1f, #a0673f); }
.f4 { background: linear-gradient(200deg, #e9c9a3, #8b5a3c); }
.f5 { background: linear-gradient(90deg, #7a4b33, #d2a679); }
.f6 { background: linear-gradient(45deg, #f5e6d3, #c4936a); }

/* Cardápio */
.secao-cafe { padding: 72px 0; }
@media (min-width: 900px) { .secao-cafe { padding: 112px 0; } }
.secao-cafe h2 { font-size: 36px; }
@media (min-width: 900px) { .secao-cafe h2 { font-size: 48px; } }
.secao-cafe .intro { margin-top: 12px; color: var(--cafe-2); }
.cardapio-cafe { background: #fff; }
.grupos { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 760px) { .grupos { grid-template-columns: 1fr 1fr; gap: 32px 48px; } }
.grupo h3 { font-size: 24px; padding-bottom: 10px; border-bottom: 2px solid var(--leite); }
.grupo ul { list-style: none; margin: 8px 0 0; padding: 0; }
.grupo li { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; }
.grupo li span { flex: 1; }
.grupo li small { display: block; font-size: 14px; color: #8b6a58; }
.grupo li::after { content: none; }
.grupo li b { font-weight: 600; color: var(--caramelo); white-space: nowrap; }

/* Galeria */
.galeria-cafe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 32px; }
.galeria-cafe img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--leite); }
@media (min-width: 760px) { .galeria-cafe { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

/* Onde estamos */
.local { background: var(--leite); }
.local__grade { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 860px) { .local__grade { grid-template-columns: 3fr 2fr; align-items: stretch; } }
.mapa-cafe {
  min-height: 260px; border-radius: 20px; position: relative;
  background:
    linear-gradient(90deg, transparent 46%, #fff 46% 50%, transparent 50%),
    linear-gradient(0deg, transparent 40%, #fff 40% 44%, transparent 44%),
    linear-gradient(28deg, transparent 72%, #fff 72% 74%, transparent 74%),
    linear-gradient(0deg, transparent 78%, rgba(255,255,255,.7) 78% 80%, transparent 80%),
    #dde8d3;
}
.mapa-cafe::after { content: ""; position: absolute; left: 47%; top: 30%; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--wa); box-shadow: 0 6px 12px rgba(0,0,0,.2); }
.local__info { display: grid; gap: 20px; align-content: start; }
.local__info h3 { font-size: 22px; margin-bottom: 6px; }
.horarios { list-style: none; margin: 0; padding: 0; }
.horarios li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed rgba(61, 34, 25, .2); }

/* Rodapé do café */
.cafe-rodape { padding: 40px 0 112px; background: var(--cafe); color: var(--leite); font-size: 14px; }
.cafe-rodape .wrap { display: grid; gap: 10px; }
.cafe-rodape strong { font: 600 22px/1 var(--serifa); color: var(--creme); }
.cafe-rodape a { color: #ED6AA2; }
@media (min-width: 960px) { .cafe-rodape { padding-bottom: 40px; } }

/* Botão fixo de pedido (celular) */
.cafe-fixo { position: fixed; right: 16px; bottom: 16px; z-index: 20; box-shadow: 0 0 0 2px var(--creme), 0 12px 30px -10px rgba(61,34,25,.6); }
@media (min-width: 960px) { .cafe-fixo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}
@media (max-width: 559px) { .aviso__longo { display: none; } }
@media (max-width: 559px) { .aviso__cta, .aviso__voltar { padding: 8px 12px; font-size: 13px; } .aviso .wrap { column-gap: 8px; } }