/* ==========================================================================
   CHURRAS NO PARQUE — Cardápio Digital
   CSS organizado por componente (sem framework, sem Bootstrap).
   Sumário:
   1. @font-face (fontes variáveis auto-hospedadas)
   2. Variáveis de marca (cores, espaçamento, tipografia)
   3. Reset & base
   4. Utilitários (wrap, botões, pills, tags)
   5. Header / navegação
   6. Hero
   7. Sobre (Sobre a experiência)
   8. Cardápio (nav de categorias + cards)
   9. Chef
   10. Adicionais / observações
   11. CTA final + rodapé
   12. Botão flutuante WhatsApp
   13. Animações de entrada (scroll reveal)
   14. Acessibilidade & mídia
   ========================================================================== */

/* -------------------- 1. Fontes -------------------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-variable.woff2') format('woff2');
}

/* -------------------- 2. Variáveis -------------------- */
:root{
  /* Paleta oficial Churras no Parque */
  --c-cream: #F7EEE4;
  --c-cream-deep: #EAD9C2;
  --c-forest: #1F2E25;
  --c-forest-2: #172019;
  --c-forest-soft: #2B3C30;
  --c-gold: #AE8B51;
  --c-gold-deep: #77592F;
  --c-gold-light: #D9BE8C;
  --c-red: #9B1B21;
  --c-red-deep: #7C1318;
  --c-ink: #16211A;
  --c-paper: #FFFDF9;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 12px rgba(22, 33, 26, .08);
  --shadow-md: 0 16px 40px rgba(22, 33, 26, .16);
  --shadow-lg: 0 30px 70px rgba(22, 33, 26, .24);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 560ms;

  --header-h: 64px;
  --container-max: 1180px;
}

@media (min-width: 768px){
  :root{ --header-h: 84px; }
}

/* -------------------- 3. Reset & base -------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; height: auto; }
picture{ display: block; line-height: 0; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p{ margin: 0; }
button{ font: inherit; cursor: pointer; }

h1, h2, h3, .font-display{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-forest);
  letter-spacing: .01em;
}

svg{ fill: currentColor; }

/* Foco visível consistente para navegação por teclado */
:focus-visible{
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--c-forest);
  color: var(--c-cream);
  padding: .75em 1.25em;
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus{
  left: var(--space-sm);
  top: var(--space-sm);
}

/* -------------------- 4. Utilitários -------------------- */
.wrap{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}
@media (min-width: 768px){
  .wrap{ padding-inline: var(--space-lg); }
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--c-gold-deep);
  margin: 0 0 var(--space-xs);
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .95em 1.6em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn__icon{ width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn--primary{
  background: var(--c-red);
  color: var(--c-paper);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover{ background: var(--c-red-deep); box-shadow: var(--shadow-md); }

.btn--ghost{
  background: transparent;
  color: var(--c-forest);
  border-color: currentColor;
}
.btn--ghost:hover{ background: var(--c-forest); color: var(--c-cream); }

.btn--whatsapp{
  background: var(--c-forest);
  color: var(--c-cream);
}
.btn--whatsapp:hover{ background: var(--c-forest-soft); box-shadow: var(--shadow-md); }

.btn--on-dark.btn--primary{ background: var(--c-gold); color: var(--c-forest); }
.btn--on-dark.btn--primary:hover{ background: var(--c-gold-light); }

.btn--small{ padding: .6em 1.1em; font-size: .82rem; display: none; }
@media (min-width: 640px){
  .btn--small{ display: inline-flex; }
}

.tag-list, .feature-list{
  display: grid;
  gap: var(--space-xs);
}
.tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: .55em;
  margin-top: var(--space-sm);
}
.tag-list li{
  border: 1.5px solid var(--c-gold);
  color: var(--c-cream);
  padding: .5em 1.1em;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 500;
}

.feature-list{
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}
@media (min-width: 560px){
  .feature-list{ grid-template-columns: 1fr 1fr; }
}
.feature-list li{
  background: var(--c-paper);
  border: 1px solid rgba(174, 139, 81, .35);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: .3em;
}
.feature-list strong{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--c-forest);
}
.feature-list span{
  font-size: .86rem;
  color: var(--c-forest-soft);
}

/* -------------------- 5. Header -------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 238, 228, .88);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(31, 46, 37, .08);
  transition: box-shadow var(--dur-base) var(--ease), padding var(--dur-base) var(--ease);
}
.site-header__inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: height var(--dur-base) var(--ease);
}
.site-header.is-compact{ box-shadow: var(--shadow-sm); }
.site-header.is-compact .site-header__inner{ height: calc(var(--header-h) - 12px); }

.site-header__brand{
  display: flex;
  align-items: center;
  gap: .65em;
  min-width: 0;
}
.site-header__seal{ width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.site-header__wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-forest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header__wordmark em{ font-style: italic; color: var(--c-gold-deep); }

.site-header__nav{
  display: none;
  gap: var(--space-md);
  font-weight: 600;
  font-size: .88rem;
}
.site-header__nav a{
  position: relative;
  padding-block: .3em;
}
.site-header__nav a::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.site-header__nav a:hover::after{ transform: scaleX(1); transform-origin: left; }
@media (min-width: 860px){
  .site-header__nav{ display: flex; }
}

/* -------------------- 6. Hero -------------------- */
.hero{ padding-block: var(--space-2xl) var(--space-xl); overflow: clip; }
.hero__grid{
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px){
  .hero__grid{ grid-template-columns: 1fr .9fr; gap: var(--space-2xl); }
}

.hero__logo{ width: min(360px, 78vw); height: auto; margin-block: var(--space-sm) var(--space-3xs); }
.hero__logo-secondary{ width: 132px; height: auto; opacity: .92; margin-bottom: var(--space-md); }

.hero__lede{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw + .7rem, 1.4rem);
  color: var(--c-gold-deep);
  margin-bottom: var(--space-sm);
}
.hero__text{
  max-width: 46ch;
  color: var(--c-forest-soft);
  font-size: 1.02rem;
  margin-bottom: var(--space-lg);
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.hero__media{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 900 / 963;
}
.hero__media picture, .hero__media img{ height: 100%; width: 100%; object-fit: cover; }
.hero__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,32,25,0) 55%, rgba(23,32,25,.55) 100%);
  pointer-events: none;
}

/* -------------------- 7. Sobre -------------------- */
.about{ padding-block: var(--space-xl); background: var(--c-cream); }
.about__grid{
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px){
  .about__grid{ grid-template-columns: .85fr 1fr; }
}
.about__illustration img{
  border-radius: var(--radius-lg);
  filter: sepia(.18) saturate(1.05);
}
.about h2{ font-size: clamp(1.6rem, 1.2vw + 1.3rem, 2.3rem); margin-bottom: var(--space-md); }
.about p{ color: var(--c-forest-soft); max-width: 56ch; }

/* -------------------- 8. Cardápio -------------------- */
.menu{ padding-block: var(--space-xl); background: var(--c-forest); position: relative; }
.menu__intro{ text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-lg); }
.menu__intro h2{ color: var(--c-cream); font-size: clamp(1.8rem, 1.6vw + 1.3rem, 2.6rem); margin-bottom: var(--space-sm); }
.menu__intro .eyebrow{ color: var(--c-gold-light); }
.menu__intro p{ color: rgba(247, 238, 228, .78); }

.menu__nav{
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--c-forest);
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgba(174, 139, 81, .25);
  margin-bottom: var(--space-lg);
}
.menu__nav-inner{
  display: flex;
  gap: .6em;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu__nav-inner::-webkit-scrollbar{ display: none; }

.pill{
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid rgba(174, 139, 81, .5);
  color: var(--c-cream);
  padding: .55em 1.2em;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pill:hover{ border-color: var(--c-gold); }
.pill.is-active{
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-forest-2);
}

.menu__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px){
  .menu__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .menu__grid{ grid-template-columns: repeat(3, 1fr); }
}

.menu-card{
  background: var(--c-gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.menu-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.menu-card.is-hidden{ display: none; }

.menu-card__media{ aspect-ratio: 4 / 3.4; overflow: hidden; }
.menu-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.menu-card:hover .menu-card__media img{ transform: scale(1.06); }

.menu-card__body{ padding: var(--space-md); display: flex; flex-direction: column; gap: .55em; flex-grow: 1; }
.menu-card__signature{
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-forest-2);
}
.menu-card__title{ font-size: 1.28rem; color: var(--c-forest-2); }
.menu-card__description{
  font-size: .88rem;
  color: var(--c-forest-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-card__price{
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px dashed rgba(23, 32, 25, .28);
}
.menu-card__price-headline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-forest-2);
}
.menu-card__meta{ font-size: .74rem; font-weight: 600; color: var(--c-forest-2); margin-top: .35em; }
.menu-card .btn{ margin-top: var(--space-sm); justify-content: center; width: 100%; }

/* -------------------- 9. Chef -------------------- */
.chef{ position: relative; padding-block: var(--space-xl); background: var(--c-cream); overflow: clip; }
.chef__grid{
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px){
  .chef__grid{ grid-template-columns: .85fr 1fr; }
}
.chef__media img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.script-tag{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--c-gold-deep);
  margin-bottom: -.2em;
}
.chef__copy h2{ font-size: clamp(1.8rem, 1.6vw + 1.3rem, 2.5rem); margin-bottom: var(--space-sm); }
.chef__copy p{ color: var(--c-forest-soft); max-width: 52ch; }
.chef__ideal-label{
  margin-top: var(--space-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  color: var(--c-gold-deep);
}
.chef .tag-list li{ border-color: var(--c-gold-deep); color: var(--c-forest); }

.chef__texture{
  width: 100%;
  height: 90px;
  object-fit: cover;
  margin-top: var(--space-xl);
  opacity: .9;
}
@media (min-width: 768px){ .chef__texture{ height: 130px; } }

/* -------------------- 10. Adicionais -------------------- */
.addons{ padding-block: var(--space-xl); background: var(--c-cream-deep); }
.addons h2{ font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem); margin-bottom: var(--space-lg); }
.addons__grid{
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .addons__grid{ grid-template-columns: 1fr 2fr; }
}
.addons__card{
  background: var(--c-paper);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.addons__card h3{ font-size: 1.2rem; margin-bottom: var(--space-2xs); }
.addons__card p{ color: var(--c-forest-soft); font-size: .92rem; }
.addons__card--wide ul{ display: grid; gap: .6em; margin-top: var(--space-2xs); }
.addons__card--wide li{
  font-size: .88rem;
  color: var(--c-forest-soft);
  padding-left: 1.3em;
  position: relative;
}
.addons__card--wide li::before{
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
}

/* -------------------- 11. CTA final + rodapé -------------------- */
.cta-final{ background: var(--c-red); padding-block: var(--space-xl); color: var(--c-paper); }
.cta-final__grid{
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 768px){
  .cta-final__grid{ grid-template-columns: 1fr auto; }
}
.cta-final h2{ color: var(--c-paper); font-size: clamp(1.7rem, 1.4vw + 1.3rem, 2.3rem); margin-bottom: var(--space-2xs); }
.cta-final p{ color: rgba(255, 253, 249, .85); }
.cta-final__contacts{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
@media (min-width: 768px){ .cta-final__contacts{ align-items: flex-end; } }
.cta-final__email{ font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

.site-footer{ background: var(--c-forest-2); color: rgba(247, 238, 228, .75); padding-block: var(--space-lg); }
.site-footer__inner{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.site-footer__meta p{ font-size: .85rem; margin: 0; }
.site-footer__meta p:first-child{ font-family: var(--font-display); font-weight: 700; color: var(--c-cream); }
.site-footer__copy{ width: 100%; font-size: .76rem; margin-top: var(--space-sm); border-top: 1px solid rgba(247,238,228,.12); padding-top: var(--space-sm); }

/* -------------------- 12. Botão flutuante -------------------- */
.fab-whatsapp{
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--c-forest);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.fab-whatsapp svg{ width: 28px; height: 28px; }
.fab-whatsapp:hover{ transform: scale(1.08); background: var(--c-forest-soft); }
.fab-whatsapp::before{
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--c-gold);
  opacity: .55;
  animation: pulse-ring 2.6s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%{ transform: scale(.92); opacity: .55; }
  70%{ transform: scale(1.18); opacity: 0; }
  100%{ transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .fab-whatsapp::before{ animation: none; }
}

/* -------------------- 13. Scroll reveal -------------------- */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}
.reveal[data-reveal="fade-left"]{ transform: translateX(-28px); }
.reveal[data-reveal="fade-right"]{ transform: translateX(28px); }
.reveal.is-visible{ opacity: 1; transform: none; }

/* Antes do JS carregar, garante conteúdo visível (progressive enhancement) */
html:not(.js-ready) .reveal{ opacity: 1; transform: none; }

/* -------------------- 14. Diversos -------------------- */
::selection{ background: var(--c-gold); color: var(--c-forest-2); }

@media print{
  .site-header, .fab-whatsapp, .menu__nav{ display: none !important; }
}