/* Página de links do Point da Picanha Caieiras. Estrutura da fazenda-links, identidade do Point (paleta do CLAUDE.md da
   ponte-ifood-caieiras: vermelho, creme, dourado e carvão; tipografia condensada). Celular primeiro, sem position: fixed. */
@font-face { font-family: 'Big Shoulders'; src: url(/assets/fonts/big-shoulders-display-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(/assets/fonts/montserrat-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(/assets/fonts/montserrat-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(/assets/fonts/montserrat-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --vermelho: #a81c16; --vermelho-escuro: #6e120e; --carvao: #1e1b17;
  --dourado: #f3aa30; --creme: #f2dbbc;
  --display: 'Big Shoulders', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carvao); color: var(--creme); font: 500 15px/1.5 var(--texto); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.pagina { max-width: 520px; margin: 0 auto; background: var(--vermelho-escuro); min-height: 100vh; }

/* A foto é vertical no celular e horizontal no computador (troca no <picture>). */
.hero { position: relative; max-width: 520px; margin: 0 auto; aspect-ratio: 4 / 5; overflow: hidden; background: var(--carvao); }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(110, 18, 14, 0) 45%, rgba(110, 18, 14, .78) 82%, var(--vermelho-escuro) 100%); }
.marca { position: relative; z-index: 1; margin: -44px 0 0; padding: 0 20px; text-align: center; }
.marca .logo { width: min(280px, 78%); margin: 0 auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }
.marca .lema { margin: 8px 0 0; color: var(--dourado); font: 800 24px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }

.links { display: grid; gap: 10px; padding: 22px 16px 8px; }
.btn { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 16px; background: rgba(242, 219, 188, .08); border: 1px solid rgba(242, 219, 188, .2); text-decoration: none; color: var(--creme); }
.btn:hover { background: rgba(242, 219, 188, .14); }
.btn:focus-visible, .link-menor:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }
.btn .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(242, 219, 188, .12); }
.btn .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-txt { flex: 1; min-width: 0; }
.btn-t { display: block; font-weight: 700; font-size: 16px; }
.btn-s { display: block; color: rgba(242, 219, 188, .78); font-size: 13px; }
.btn .seta { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .7; }
.btn-destaque { background: var(--dourado); border-color: var(--dourado); color: var(--carvao); min-height: 72px; }
.btn-destaque:hover { background: #e39a22; }
.btn-destaque .ic { background: rgba(30, 27, 23, .14); }
.btn-destaque .btn-s { color: rgba(30, 27, 23, .82); }
.delivery { display: grid; gap: 2px; }
.link-menor { justify-self: center; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--creme); font-size: 14px; font-weight: 600; text-underline-offset: 3px; }

.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 16px 4px; }
.galeria figure { margin: 0; min-width: 0; }
.galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--carvao); }
.galeria .largo { grid-column: 1 / -1; }
.galeria .largo img { aspect-ratio: 3 / 2; }
.galeria figcaption { padding: 6px 2px 2px; font-size: 13px; font-weight: 600; color: rgba(242, 219, 188, .86); }

.rodape { padding: 22px 20px 34px; text-align: center; color: rgba(242, 219, 188, .78); font-size: 13px; }
.rodape strong { display: block; color: var(--creme); margin: 4px 0; }
.rodape small { display: block; margin-top: 8px; }

@media (min-width: 900px) {
  body { background: var(--vermelho-escuro); }
  .hero { max-width: none; aspect-ratio: auto; height: min(70vh, 680px); }
  .hero img { object-position: 50% 66%; }
}