/* =============================================================
   Xis da Dona Laura — styles.css
   Sistema de design (tokens) + estilos de todas as seções.
   Mobile-first. Cores extraídas do selo real da marca (Instagram).
   ============================================================= */

:root {
  /* ---- COR ---- */
  --creme:            #FBF6EC;
  --creme-fundo:      #F3E9D6;
  --creme-cartao:     #FFFDF7;
  --creme-borda:      #E6D8BC;

  --carvao:           #2A211C;
  --carvao-medio:     #6A5B4F;
  --carvao-fraco:     #9C8B7C;

  --marca:            #733B2D;  /* marrom do selo real (Instagram @xisdadonalaura) */
  --marca-escura:     #4A2A1D;
  --marca-veu:        #F3E5DD;

  --dourado:          #D88230;  /* laranja do anel do selo */
  --dourado-escuro:   #784617;  /* mesmo tom escurecido pra contraste AA em texto pequeno */

  --foco:             #15489E;

  /* ---- TIPOGRAFIA ---- */
  --fonte-titulo: "Zilla Slab", Georgia, "Times New Roman", serif;
  --fonte-texto:  "Libre Franklin", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Arial, sans-serif;

  --t--1: 0.833rem;
  --t-0:  1rem;
  --t-1:  1.2rem;
  --t-2:  1.44rem;
  --t-3:  1.728rem;
  --t-4:  2.074rem;
  --t-5:  2.488rem;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-titulo: 600;

  --lh-titulo: 1.14;
  --lh-texto:  1.6;

  /* ---- ESPAÇAMENTO (base 4px) ---- */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;   --e-9: 6rem;

  --wrap-max: 68rem;
  --wrap-pad: 1.25rem;

  /* ---- RAIO ---- */
  --r-acao:  3px;
  --r-cartao: 8px;

  /* ---- SOMBRA ---- */
  --sombra-1: 0 1px 2px rgba(42, 33, 28, .10), 0 8px 24px -10px rgba(42, 33, 28, .22);

  /* ---- LAYOUT ---- */
  --h-header: 56px;
  --transicao: 140ms ease;
}

@media (min-width: 48rem) {
  :root {
    --t-3: 2rem;
    --t-4: 2.4rem;
    --t-5: 3.4rem;
    --wrap-pad: 2rem;
    --h-header: 64px;
  }
}

/* -------------------------------------------------------------
   RESET
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1rem);
}

body {
  background: var(--creme);
  color: var(--carvao);
  font-family: var(--fonte-texto);
  font-size: var(--t-0);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, iframe, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  color: var(--carvao);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--marca); }

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--marca);
  color: var(--creme);
  padding: var(--e-3) var(--e-4);
  z-index: 100;
}
.skip-link:focus { left: var(--e-3); top: var(--e-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* -------------------------------------------------------------
   BOTÕES
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-acao);
  font-weight: var(--peso-forte);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--t-0);
  font-family: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.btn--zap {
  background: #25D366;
  color: #fff;
}
.btn--zap:hover { background: #1EBE5A; }

.btn--delivery {
  background: var(--marca);
  color: #fff;
}
.btn--delivery:hover { background: var(--marca-escura); }

.btn--fantasma {
  background: transparent;
  border-color: var(--marca);
  color: var(--marca);
}
.btn--fantasma:hover { background: var(--marca-veu); }

.btn--fantasma-claro {
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.8);
  color: #fff;
  backdrop-filter: blur(2px);
}
.btn--fantasma-claro:hover { background: rgba(0,0,0,.4); }

.icone-zap { width: 20px; height: 20px; fill: currentColor; }

/* -------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--marca-escura);
  height: var(--h-header);
  display: flex;
  align-items: center;
}

.cabecalho__linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
}
@media (min-width: 26rem) {
  .cabecalho__linha { gap: var(--e-5); }
}

/* telas bem estreitas: bota só o ícone do WhatsApp, sem o texto, pra caber */
@media (max-width: 26rem) {
  .cabecalho .btn--zap span { display: none; }
  .cabecalho .btn--zap { padding-inline: var(--e-3); }
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--creme);
  flex-shrink: 0;
}
.marca__selo { border-radius: 50%; flex-shrink: 0; }
.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-1);
  font-weight: var(--peso-forte);
}
.marca__nome b { color: var(--dourado); font-weight: var(--peso-titulo); }

.nav-principal {
  display: none;
  gap: var(--e-6);
  margin-inline-start: var(--e-6);
}
.nav-principal a {
  color: var(--creme);
  text-decoration: none;
  font-weight: var(--peso-medio);
  font-size: var(--t--1);
}
.nav-principal a:hover { color: var(--dourado); }

@media (min-width: 56rem) {
  .nav-principal { display: flex; }
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-inline-start: auto;
}

.icone-social {
  color: var(--creme);
  display: none;
}
.icone-social svg { width: 20px; height: 20px; fill: currentColor; }
.icone-social:hover { color: var(--dourado); }

@media (min-width: 40rem) {
  .icone-social { display: block; }
}

/* -------------------------------------------------------------
   HERO
   ------------------------------------------------------------- */
.hero { position: relative; background: var(--marca-escura); overflow: hidden; }
.hero__foto { height: min(78vh, 720px); min-height: 380px; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}

.hero__texto {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-block: var(--e-6) var(--e-7);
}
.hero__texto .sobretitulo {
  color: var(--dourado);
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: var(--t--1);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero__titulo { color: #fff; font-size: var(--t-3); margin-block: var(--e-3); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero__lead { color: var(--creme-borda); max-width: 34rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

@media (min-width: 48rem) {
  .hero__titulo { font-size: var(--t-4); }
}

/* -------------------------------------------------------------
   SEÇÕES GENÉRICAS
   ------------------------------------------------------------- */
.secao { padding-block: var(--e-8); }
.secao--sobre { background: var(--creme-fundo); }

.secao__titulo { font-size: var(--t-3); margin-bottom: var(--e-4); }
.secao__intro { max-width: 42rem; color: var(--carvao-medio); margin-bottom: var(--e-6); }

.lista-simples { list-style: none; padding: 0; display: grid; gap: var(--e-3); max-width: 42rem; }
.lista-simples li { padding-left: var(--e-5); position: relative; }
.lista-simples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--marca);
}

/* -------------------------------------------------------------
   PRÊMIO SABORES DO SUL
   ------------------------------------------------------------- */
.premio__conteudo {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 48rem) {
  .premio__conteudo { grid-template-columns: 1.2fr 1fr; }
}
.premio__selo-linha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}
.premio__icone { width: 28px; height: 28px; fill: var(--dourado-escuro); flex-shrink: 0; }
.premio__selo-linha .sobretitulo {
  color: var(--dourado-escuro);
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: var(--t--1);
}
.premio__foto picture, .premio__foto img { width: 100%; border-radius: var(--r-cartao); }
.premio__foto img { aspect-ratio: 4 / 3; object-fit: cover; }

/* -------------------------------------------------------------
   LIGHTBOX (compartilhado)
   ------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 12, 10, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-5);
  overflow-y: auto;
}
.lightbox__corpo {
  max-width: 26rem;
  width: 100%;
  background: var(--creme-cartao);
  border-radius: var(--r-cartao);
  overflow: hidden;
  max-height: 88vh;
  overflow-y: auto;
}
.lightbox__img { width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r-cartao); background: #000; }
.lightbox__fechar {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  z-index: 91;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__fechar:hover { background: rgba(255,255,255,.3); }
.lightbox__fechar:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* -------------------------------------------------------------
   CARDÁPIO
   ------------------------------------------------------------- */
.secao--cardapio { background: var(--creme-fundo); }
.cardapio__categorias { display: grid; gap: var(--e-5); }
@media (min-width: 40rem) {
  .cardapio__categorias { grid-template-columns: repeat(2, 1fr); }
}

.cardapio-categoria__capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  padding: 0;
  border-radius: var(--r-cartao);
  overflow: hidden;
  cursor: pointer;
}
.cardapio-categoria__capa picture,
.cardapio-categoria__capa img { width: 100%; height: 100%; }
.cardapio-categoria__capa img { object-fit: cover; }
.cardapio-categoria__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.05) 55%);
}
.cardapio-categoria__nome {
  position: absolute;
  left: var(--e-5);
  bottom: var(--e-4);
  z-index: 1;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: var(--t-2);
  font-weight: var(--peso-titulo);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.cardapio-categoria__capa:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.cardapio-itens {
  list-style: none;
  padding: 0;
  margin-top: var(--e-4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
}
@media (min-width: 40rem) {
  .cardapio-itens { grid-template-columns: repeat(4, 1fr); }
}

.cardapio-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--creme-borda);
  background: var(--creme-cartao);
  border-radius: var(--r-cartao);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.cardapio-item picture, .cardapio-item img { width: 100%; aspect-ratio: 1 / 1; }
.cardapio-item img { object-fit: cover; }
.cardapio-item__nome { padding: var(--e-3) var(--e-3) 0; font-size: var(--t--1); font-weight: var(--peso-forte); color: var(--carvao); display: block; }
.cardapio-item__preco { padding: 0 var(--e-3) var(--e-3); font-size: var(--t--1); color: var(--marca); display: block; }
.cardapio-item:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.cardapio-detalhe__corpo { padding: var(--e-5); }
.cardapio-detalhe__descricao { color: var(--carvao-medio); margin-top: var(--e-3); }
.cardapio-detalhe__preco { font-size: var(--t-2); font-weight: var(--peso-forte); color: var(--marca); margin-top: var(--e-4); }

/* -------------------------------------------------------------
   GALERIA
   ------------------------------------------------------------- */
.galeria {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
}
@media (min-width: 40rem) {
  .galeria { grid-template-columns: repeat(3, 1fr); }
}
.galeria__abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-cartao);
}
.galeria__abrir img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.galeria__abrir:hover img { transform: scale(1.04); }
.galeria__abrir:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* -------------------------------------------------------------
   AVALIAÇÕES
   ------------------------------------------------------------- */
.notas { display: flex; flex-wrap: wrap; gap: var(--e-6); margin-bottom: var(--e-6); }
.nota b { font-size: var(--t-3); color: var(--marca); }
.nota p { color: var(--carvao-medio); font-size: var(--t--1); }
.nota p a { color: inherit; text-decoration: underline; }

.depoimentos { display: grid; gap: var(--e-3); }
@media (min-width: 44rem) {
  .depoimentos { grid-template-columns: repeat(3, 1fr); }
}
.depoimento {
  margin: 0;
  padding: var(--e-4) var(--e-5);
  background: var(--creme-cartao);
  border: 1px solid var(--creme-borda);
  border-left: 3px solid var(--marca);
  border-radius: var(--r-cartao);
}
.depoimento blockquote { margin: 0; font-size: var(--t--1); line-height: 1.55; color: var(--carvao); }

/* -------------------------------------------------------------
   LOCALIZAÇÃO
   ------------------------------------------------------------- */
.secao--localizacao { background: var(--creme-fundo); }
.localizacao__endereco { font-style: normal; color: var(--carvao-medio); margin-bottom: var(--e-4); }
.localizacao__horario { margin-bottom: var(--e-5); }
.localizacao__horario b { color: var(--carvao); }

/* -------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------- */
.rodape { background: var(--marca-escura); color: var(--creme-borda); padding-block: var(--e-7) var(--e-5); }
.rodape__grade { margin-bottom: var(--e-6); }
.rodape__titulo { color: #fff; font-family: var(--fonte-titulo); font-size: var(--t-1); margin-bottom: var(--e-2); }
.rodape a { color: var(--dourado); }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: var(--e-4);
  font-size: var(--t--1);
}
.rodape__credito a { color: inherit; text-decoration: underline; }