/* =============================================================
   Restaurante Varanda — styles.css
   Sistema de design (tokens) + estilos de todas as seções.
   Mobile-first. Vinho da marca (do próprio logo, #460000) só em
   ação/destaque, fundo creme quente, texto marrom-carvão.
   ============================================================= */

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

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

  --vinho:            #460000;  /* cor de fundo do logo real do Instagram */
  --vinho-escuro:     #2E0000;
  --vinho-veu:        #F3E1DD;

  --dourado:          #B08D3D;
  --dourado-escuro:   #8C6F2C;

  --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(--vinho); }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--vinho);
  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--fantasma {
  background: transparent;
  border-color: var(--vinho);
  color: var(--vinho);
}
.btn--fantasma:hover { background: var(--vinho-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(--vinho);
  height: var(--h-header);
  display: flex;
  align-items: center;
}

.cabecalho__linha {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  width: 100%;
}

.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; }
}

.zap-escolha { position: relative; }

.zap-menu {
  position: absolute;
  top: calc(100% + var(--e-2));
  right: 0;
  background: var(--creme-cartao);
  border: 1px solid var(--creme-borda);
  border-radius: var(--r-cartao);
  box-shadow: var(--sombra-1);
  padding: var(--e-2);
  min-width: 11rem;
  z-index: 50;
}
.zap-menu a {
  display: block;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-acao);
  color: var(--carvao);
  text-decoration: none;
  font-weight: var(--peso-medio);
}
.zap-menu a:hover { background: var(--vinho-veu); color: var(--vinho); }

/* -------------------------------------------------------------
   HERO / CARROSSEL
   ------------------------------------------------------------- */
.hero { position: relative; background: var(--vinho-escuro); }

.carrossel { position: relative; overflow: hidden; }

.carrossel__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  padding: 0;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: min(72vh, 640px);
  min-height: 320px;
  overflow: hidden;
}
.carrossel__slide picture,
.carrossel__slide img {
  height: 100%;
  width: 100%;
}
.carrossel__slide img { object-fit: cover; object-position: center 55%; }

.carrossel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}

.carrossel__legenda {
  position: absolute;
  left: var(--wrap-pad);
  bottom: var(--e-7);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
}
.carrossel__cidade {
  font-family: var(--fonte-titulo);
  font-size: var(--t-4);
  font-weight: var(--peso-titulo);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0,0,0,.35);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.carrossel__seta:hover { background: rgba(0,0,0,.55); }
.carrossel__seta svg { width: 22px; height: 22px; }
.carrossel__seta--ant { left: var(--e-4); }
.carrossel__seta--prox { right: var(--e-4); }
.carrossel__seta:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.carrossel__pontos {
  position: absolute;
  right: var(--wrap-pad);
  bottom: var(--e-7);
  z-index: 3;
  display: flex;
  gap: var(--e-2);
}
.carrossel__ponto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.carrossel__ponto[aria-selected="true"] { background: #fff; }
.carrossel__ponto:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

.hero__texto {
  padding-block: var(--e-6);
  text-align: center;
}
.hero__texto .sobretitulo {
  color: var(--dourado);
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: var(--t--1);
}
.hero__titulo { color: #fff; font-size: var(--t-3); margin-block: var(--e-3); }
.hero__lead { color: var(--creme-borda); max-width: 38rem; margin-inline: auto; }

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

/* -------------------------------------------------------------
   SEÇÕES GENÉRICAS
   ------------------------------------------------------------- */
.secao { padding-block: var(--e-8); }
.secao--fotos, .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(--vinho);
}

.falta {
  color: var(--carvao-fraco);
  font-style: italic;
}

/* -------------------------------------------------------------
   UNIDADES
   ------------------------------------------------------------- */
.unidades {
  display: grid;
  gap: var(--e-6);
}
@media (min-width: 44rem) {
  .unidades { grid-template-columns: 1fr 1fr; }
}

.unidade {
  background: var(--creme-cartao);
  border: 1px solid var(--creme-borda);
  border-radius: var(--r-cartao);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.unidade__foto { aspect-ratio: 4 / 3; }
.unidade__foto img { width: 100%; height: 100%; object-fit: cover; }
.unidade__corpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.unidade__nome { font-size: var(--t-2); }
.unidade__avaliacao { color: var(--carvao-medio); font-size: var(--t--1); }
.unidade__avaliacao a { color: inherit; text-decoration: underline; }
.unidade__endereco { font-style: normal; color: var(--carvao-medio); }
.unidade__horario { color: var(--carvao); }
.unidade__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }

.unidade__subtitulo {
  font-size: var(--t-1);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--creme-borda);
}

/* -------------------------------------------------------------
   AVALIAÇÕES / DEPOIMENTOS
   ------------------------------------------------------------- */
.depoimentos { display: grid; gap: var(--e-3); }

.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(--vinho);
  border-radius: var(--r-cartao);
}
.depoimento blockquote {
  margin: 0;
  font-size: var(--t--1);
  line-height: 1.55;
  color: var(--carvao);
}
.depoimento blockquote::before {
  content: "\201C";
  font-family: var(--fonte-titulo);
  color: var(--vinho);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 0.08em;
}
.depoimento figcaption {
  margin-top: var(--e-3);
  font-weight: var(--peso-forte);
  color: var(--carvao-medio);
  font-size: var(--t--1);
}
.depoimento__nota { color: var(--dourado-escuro); }

/* -------------------------------------------------------------
   GALERIA / LIGHTBOX
   ------------------------------------------------------------- */
.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 de dentro do card da unidade: sempre 2 colunas, o card é mais estreito
   que a página inteira, então o corte de 3 colunas do breakpoint acima fica pequeno demais */
.galeria--unidade { grid-template-columns: repeat(2, 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; }

.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);
}
.lightbox__img { max-width: 100%; max-height: 88vh; border-radius: var(--r-cartao); }
.lightbox__fechar {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  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; }

.trabalhe__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

/* -------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------- */
.rodape { background: var(--vinho-escuro); color: var(--creme-borda); padding-block: var(--e-7) var(--e-5); }
.rodape__grade {
  display: grid;
  gap: var(--e-6);
  margin-bottom: var(--e-6);
}
@media (min-width: 40rem) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
.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; }