/* =====================================================================
   Empório Europa — styles.css
   Mobile-first (390px) → desktop. Sem dependências.
   Troque a paleta inteira no :root abaixo.
   ===================================================================== */

:root {
  /* ---- Paleta ---- */
  --cor-bordo:          #4A1020;   /* o detalhe: letreiro, toldo, placas, filetes */
  --cor-bordo-escuro:   #2E0912;   /* rodapé, sombras */
  --cor-bordo-claro:    #6B1C33;   /* hover */
  --cor-creme:          #F3E9D7;   /* fachada: parede pintada */
  --cor-creme-claro:    #FBF7F0;   /* interior: paredes brancas iluminadas */
  --cor-creme-escuro:   #E6D8C0;   /* etiquetas, molduras, passe-partout */
  --cor-creme-suave:    #D9C4B0;   /* texto secundário sobre bordô/madeira */
  --cor-madeira:        #5C3A21;   /* balcão, prateleira, piso */
  --cor-madeira-escura: #3E2616;
  --cor-dourado:        #C9A961;   /* só em filetes sobre madeira */
  --cor-dourado-claro:  #D8BC78;
  --cor-dourado-escuro: #A8883F;   /* contorno do letreiro, borda dos rótulos */
  --cor-tinta:          #2A1A14;   /* texto sobre creme */
  --cor-tinta-suave:    #6B5446;   /* texto secundário sobre creme */
  --cor-filete:         rgba(74, 16, 32, .32);      /* hairline bordô sobre creme */
  --cor-filete-claro:   rgba(243, 233, 215, .35);   /* hairline creme sobre bordô/madeira */
  --cor-whatsapp:       #25D366;
  --cor-whatsapp-escuro:#1DA851;

  /* ---- Tipografia ---- */
  --fonte-titulo: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --fonte-texto:  "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

  /* ---- Ritmo e medidas ---- */
  --margem:        clamp(1.25rem, 5vw, 2.5rem);   /* margem lateral */
  --secao:         clamp(4rem, 12vw, 7rem);       /* respiro vertical entre seções */
  --largura-max:   72rem;
  --largura-texto: 38rem;
  --moldura:       12px;                           /* recuo do filete-moldura */
  --raio:          2px;
  --sombra:        0 8px 16px -8px rgba(0, 0, 0, .5);
  --duracao:       600ms;
  --curva:         cubic-bezier(.2, .7, .2, 1);
}

/* =====================================================================
   Base
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--cor-bordo) var(--cor-creme-escuro);
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--cor-tinta);
  background: var(--cor-creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cor-bordo); color: var(--cor-creme); }

:focus-visible {
  outline: 2px solid var(--cor-bordo);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
p, ul, dl, figure, address { margin: 0; }
address { font-style: normal; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

.icone { width: 1.25rem; height: 1.25rem; flex: none; }

/* Título de seção: sem rótulo acima, um filete curto abaixo */
.titulo-secao {
  font-size: clamp(2.5rem, 9vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: .98;
}
.titulo-secao::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: 1.125rem;
  background: var(--cor-bordo);
}

.secao { padding: var(--secao) var(--margem); }
.miolo { max-width: var(--largura-max); margin-inline: auto; }

/* Superfícies */
.interior { background: var(--cor-creme-claro); color: var(--cor-tinta); }

/* =====================================================================
   Componentes
   ===================================================================== */

/* Placa de latão: o botão principal */
.placa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.5rem;
  padding: .875rem 1.625rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--cor-creme);
  background: var(--cor-bordo);
  border: 1px solid var(--cor-bordo-escuro);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: background-color .2s var(--curva), transform .2s var(--curva);
}
.placa:hover { background: var(--cor-bordo-claro); }
.placa:active { transform: translateY(1px); }
.placa .icone { width: 1.375rem; height: 1.375rem; }

.placa--vazada {
  color: var(--cor-bordo);
  background: transparent;
  border-color: var(--cor-bordo);
  box-shadow: none;
}
.placa--vazada:hover { background: rgba(74, 16, 32, .08); }

/* Link discreto sublinhado em dourado */
.link-discreto {
  font-size: .9375rem;
  color: var(--cor-tinta-suave);
  text-decoration: underline;
  text-decoration-color: var(--cor-bordo);
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  transition: color .2s var(--curva);
}
.link-discreto:hover { color: var(--cor-bordo); }

/* Link com seta (dentro das etiquetas) */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
  color: var(--cor-bordo);
  text-decoration: underline;
  text-decoration-color: var(--cor-filete);
  text-underline-offset: .28em;
  text-decoration-thickness: 1px;
}
.link-seta .icone { width: 1rem; height: 1rem; transition: transform .2s var(--curva); }
.link-seta:hover .icone { transform: translateX(3px); }

/* =====================================================================
   Fachada (cabeçalho + hero)
   ===================================================================== */

.fachada {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 6.5rem);
  min-height: calc(100svh - 6.5rem);   /* a vitrine de garrafas entra inteira na dobra */
  padding: 0 var(--margem) 1.5rem;
  color: var(--cor-tinta);
  background: linear-gradient(180deg, var(--cor-creme-claro) 0%, var(--cor-creme) 55%);   /* luz do dia batendo de cima */
}

/* Filete-moldura: a esquadria da vitrine, sempre no mesmo lugar */
.fachada::before,
.visite::before {
  content: "";
  position: absolute;
  inset: var(--moldura);
  border: 1px solid var(--cor-filete);
  pointer-events: none;
}

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--moldura) + 1.125rem) .25rem 0;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cor-bordo);
  white-space: nowrap;
}
@media (max-width: 24.99rem) {          /* celulares estreitos: só o ícone do Instagram */
  .cabecalho__insta span { display: none; }
}
.cabecalho__insta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  transition: color .2s var(--curva);
}
.cabecalho__insta:hover { color: var(--cor-bordo-claro); text-decoration: underline; text-underline-offset: .3em; }
.cabecalho__insta .icone { width: 1.125rem; height: 1.125rem; }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 3rem 0 2rem;
  text-align: center;
}

/* Letreiro de vitrine: bordô pintado, com o fio dourado do pintor de letras */
.letreiro {
  font-size: clamp(3rem, 15vw, 6rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-bordo);
  -webkit-text-stroke: .07em var(--cor-dourado-escuro);
  paint-order: stroke fill;       /* o traço fica por baixo: só a borda externa aparece, como folha de ouro */
}
.letreiro span { display: block; }

/* Toldo: a faixa bordô contínua "Adega · Croissants · Café", de filete a filete, com barra ondulada */
.toldo {
  position: relative;
  align-self: stretch;
  margin-inline: calc(var(--moldura) + 1px - var(--margem));
  margin-bottom: .875rem;           /* espaço da barra ondulada */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  padding: .8rem 1rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cor-creme);
  background: var(--cor-bordo);
  box-shadow: 0 14px 22px -12px rgba(46, 9, 18, .45);   /* o toldo faz sombra na parede */
  white-space: nowrap;
}
.toldo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
  background: radial-gradient(circle at 50% 0, var(--cor-bordo) 0 12.5px, transparent 13px) 0 0 / 28px 14px repeat-x;
}
.toldo__ponto { color: var(--cor-creme-suave); }

.posicionamento {
  max-width: 30rem;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 5.5vw, 1.625rem);
  line-height: 1.3;
  color: var(--cor-tinta-suave);
  text-wrap: balance;
}

.acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  width: 100%;
  max-width: 22rem;
  margin-top: .5rem;
}
.acoes .placa { width: 100%; }

/* =====================================================================
   Sobre
   ===================================================================== */

.sobre { padding-top: 0; }

/* Vitrine: garrafas em silhueta sobre a prateleira, coladas ao topo da seção */
.vitrine {
  display: block;
  width: calc(100% + 2 * var(--margem));
  height: 6.25rem;
  margin: 0 calc(-1 * var(--margem)) var(--secao);
}
.vitrine__garrafas { fill: var(--cor-bordo); }
.vitrine__estante  { fill: var(--cor-madeira); }

.sobre__grade { display: grid; gap: 2.5rem; }
.sobre__texto > p {
  max-width: var(--largura-texto);
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
}
.sobre__texto > p + p {
  margin-top: 1rem;
  color: var(--cor-tinta-suave);
}

/* Foto com passe-partout */
.sobre__foto {
  padding: .5rem;
  background: var(--cor-creme-escuro);
  border: 1px solid var(--cor-filete);
}
.sobre__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;     /* no celular, faixa; no desktop volta a 4:5 */
  object-fit: cover;
}

/* =====================================================================
   Destaques (etiquetas na prateleira)
   ===================================================================== */

.destaques { padding-top: 0; }

.etiquetas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.etiqueta {
  display: grid;
  gap: .625rem;
  align-content: start;
  padding: 1.5rem 1.375rem 1.625rem;
  background: var(--cor-creme-escuro);
  border: 1px solid var(--cor-filete);
  border-bottom: .3rem solid var(--cor-madeira);   /* no celular, cada etiqueta na sua prateleira */
}
.etiqueta__corpo { display: grid; gap: .625rem; }
.etiqueta h3 { font-size: 1.75rem; line-height: 1; }
.etiqueta p { font-size: 1rem; line-height: 1.5; color: var(--cor-tinta-suave); }
.etiqueta .link-seta { margin-top: .25rem; font-size: .9375rem; }

/* A prateleira em que as etiquetas se apoiam */
.estante {
  display: none;                    /* no desktop vira a prateleira única sob as três */
  height: .375rem;
  background: var(--cor-madeira);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .35);
}

/* =====================================================================
   Seleção da casa (balcão de madeira)
   ===================================================================== */

.balcao {
  color: var(--cor-creme);
  background-color: var(--cor-madeira);
  background-image:
    /* luz caindo de cima, sombra embaixo */
    linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, .36) 100%),
    /* emendas das tábuas */
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 158px, rgba(0, 0, 0, .28) 158px 160px, rgba(255, 255, 255, .06) 160px 162px),
    /* veio de nogueira (img/madeira-veio.svg, tile emendável) */
    url("img/madeira-veio.svg");
  background-size: auto, auto, 640px 320px;
  background-repeat: no-repeat, repeat, repeat;
}
.balcao .titulo-secao::after { background: var(--cor-dourado); }
.balcao .placa {                    /* sobre a madeira, a placa é creme */
  color: var(--cor-bordo);
  background: var(--cor-creme);
  border-color: var(--cor-creme-escuro);
}
.balcao .placa:hover { background: var(--cor-creme-claro); }

.selecao__intro,
.ambiente__intro { line-height: 1.35; }

.selecao__intro {
  margin-top: 1.25rem;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--cor-creme-suave);
}

/* Rótulos: etiquetas creme com filete duplo, como rótulo de garrafa */
.rotulos {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 2.25rem;
}
.rotulo {
  padding: 1.25rem 1rem 1.375rem;
  color: var(--cor-tinta);
  background: var(--cor-creme);
  border: 1px solid var(--cor-dourado-escuro);
  outline: 1px solid var(--cor-dourado-escuro);
  outline-offset: -5px;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5);
}
.rotulo h3 {
  font-size: 1.375rem;
  line-height: 1.05;
}
.rotulo p {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--cor-tinta-suave);
}

.selecao__acao {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.selecao__acao .placa { width: 100%; max-width: 22rem; }

/* =====================================================================
   Ambiente (galeria)
   ===================================================================== */

.ambiente__intro {
  margin-top: 1.25rem;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--cor-tinta-suave);
}

.galeria {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 2.25rem;
}
.galeria li:nth-child(1),
.galeria li:nth-child(4) { grid-column: span 2; }

.galeria figure { display: grid; gap: .5rem; }
.galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--cor-filete);
}
.galeria li:nth-child(1) img,
.galeria li:nth-child(4) img { aspect-ratio: 16 / 10; }

.galeria figcaption {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cor-tinta-suave);
}

/* =====================================================================
   Visite
   ===================================================================== */

.visite {
  position: relative;
  color: var(--cor-tinta);
  background: var(--cor-creme);
}

.visite__grade { display: grid; gap: 2.5rem; }

.visite__bloco {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .875rem;
  align-items: start;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.visite__bloco .icone { color: var(--cor-bordo); margin-top: .2rem; }
.visite__bloco a { text-decoration-color: var(--cor-filete); text-underline-offset: .25em; }
.visite .titulo-secao + .visite__bloco { margin-top: 2rem; }

.horarios {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1rem;
}
.horarios dt { color: var(--cor-tinta-suave); }
.horarios dd { margin: 0; }

.visite__acoes {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-top: 2.25rem;
}
.visite__acoes .placa { white-space: nowrap; }

/* A janela: mapa emoldurado, com tom quente */
.janela {
  padding: .5rem;
  background: var(--cor-creme-escuro);
  border: 1px solid var(--cor-filete);
}
.janela iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  filter: sepia(.35) saturate(.85);
}
.janela__link {
  display: block;
  padding: .625rem .25rem .125rem;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cor-bordo);
  text-decoration-color: var(--cor-filete);
  text-underline-offset: .3em;
}

/* =====================================================================
   Rodapé
   ===================================================================== */

.rodape {
  padding: 3.5rem var(--margem) 6.5rem;   /* espaço para o botão flutuante */
  text-align: center;
  font-size: .9375rem;
  color: var(--cor-creme-suave);
  background: var(--cor-bordo-escuro);
}
.rodape__marca {
  line-height: 1.2;
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-creme);
}
.rodape__local {
  margin-top: .25rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rodape nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .875rem 2rem;
  margin-top: 1.75rem;
}
.rodape nav a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--cor-creme);
  text-decoration: none;
  transition: color .2s var(--curva);
}
.rodape nav a:hover { color: var(--cor-creme-suave); text-decoration: underline; text-underline-offset: .3em; }
.rodape small {
  display: block;
  margin-top: 2rem;
  font-size: .8125rem;
}

/* =====================================================================
   Botão flutuante de WhatsApp
   ===================================================================== */

.whats-flutuante {
  position: fixed;
  z-index: 10;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: #fff;
  background: var(--cor-whatsapp);
  box-shadow: 0 0 0 3px var(--cor-creme-claro), 0 8px 16px -6px rgba(0, 0, 0, .45);
  transition: background-color .2s var(--curva), transform .2s var(--curva);
}
.whats-flutuante svg { width: 1.75rem; height: 1.75rem; }
.whats-flutuante:hover { background: var(--cor-whatsapp-escuro); }
.whats-flutuante:active { transform: scale(.96); }

/* =====================================================================
   Revelar ao rolar (só com JS; conteúdo visível por padrão sem ele)
   ===================================================================== */

html.js .revelar {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duracao) var(--curva),
    transform var(--duracao) var(--curva);
  transition-delay: calc(var(--atraso, 0) * 80ms);
}
html.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .placa, .whats-flutuante, .link-seta .icone { transition: none; }
}

/* =====================================================================
   Telas médias (≥ 40rem / 640px)
   ===================================================================== */

@media (min-width: 40rem) {
  .rotulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .rotulo { padding: 1.5rem 1.25rem 1.625rem; }
  .toldo { font-size: .875rem; letter-spacing: .28em; }
  .cabecalho { font-size: .75rem; letter-spacing: .16em; }
  .acoes { flex-direction: row; justify-content: center; max-width: none; }
  .acoes .placa { width: auto; min-width: 16rem; }
  .visite__acoes { flex-direction: row; flex-wrap: wrap; }
}

/* =====================================================================
   Desktop (≥ 56rem / 896px)
   ===================================================================== */

@media (min-width: 56rem) {
  :root { --moldura: 20px; }

  .cabecalho { padding-top: calc(var(--moldura) + 1.5rem); font-size: .8125rem; }
  .hero { gap: 2.25rem; padding: 4rem 0 3rem; }
  .letreiro { letter-spacing: .1em; }
  .letreiro span { display: inline; }   /* uma linha só, como no letreiro */
  .toldo { padding: .875rem 1rem; }
  .posicionamento { max-width: 36rem; }

  .vitrine { height: 7.5rem; }

  .sobre__grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 4rem;
    align-items: center;
  }
  .sobre.sem-foto .sobre__grade { grid-template-columns: 1fr; }   /* sem foto: uma coluna de texto */
  .sobre__foto { max-width: 26rem; justify-self: end; }
  .sobre__foto img { aspect-ratio: 4 / 5; }
  .sobre__texto > p { font-size: 1.1875rem; }

  .etiquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: end; }
  .etiqueta { gap: .875rem; padding: 2rem 1.75rem 2.25rem; border-bottom: 0; }
  .estante { display: block; }
  .etiqueta:nth-child(2) { padding-bottom: 3rem; }   /* a do meio, um pouco mais alta na prateleira */
  .etiqueta h3 { font-size: 1.875rem; }

  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .galeria li:nth-child(1) { grid-column: 1 / span 2; }
  .galeria li:nth-child(2) { grid-column: 3; }
  .galeria li:nth-child(3) { grid-column: 1; }
  .galeria li:nth-child(4) { grid-column: 2 / span 2; }
  .galeria img,
  .galeria li:nth-child(1) img,
  .galeria li:nth-child(4) img { aspect-ratio: auto; height: 22rem; }

  .visite__grade {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
  }
  .janela iframe { aspect-ratio: 4 / 3; }

  .rodape { display: grid; grid-template-columns: 1fr auto; text-align: left; align-items: center; column-gap: 2rem; }
  .rodape__marca { grid-column: 1; }
  .rodape__local { grid-column: 1; }
  .rodape nav { grid-column: 2; grid-row: 1 / span 2; }
  .rodape nav ul { margin-top: 0; justify-content: end; }
  .rodape small { grid-column: 1 / -1; margin-top: 2.5rem; }
}

/* Telas largas: limita o letreiro e as margens */
@media (min-width: 80rem) {
  .hero { gap: 2.5rem; }
}