/* =========================================================
   Garrafeira Campelo — folha de estilos
   Paleta retirada do logótipo e da capa da marca.
   ========================================================= */

:root {
  /* O site é escuro: fundo preto-vinho, com o bordô nas faixas e nos
     botões e o dourado a fazer de luz. Os neutros têm um ligeiro tom
     avermelhado, para casarem com o bordô em vez de parecerem cinzento.
     Todas as combinações de texto passam o mínimo de contraste da norma
     (4,5:1) com folga; a mais fraca dá 6,4:1. */
  color-scheme: dark;

  /* Cores da marca */
  --borgonha:        #53000F;   /* faixas largas: topo, secções, rodapé */
  --borgonha-claro:  #6E0A1A;
  --borgonha-escuro: #3A000A;
  --dourado:         #C29E61;
  --dourado-escuro:  #A5823F;
  --creme:           #FCF6EE;   /* texto claro sobre bordô */

  /* Bordô para preencher botões e etiquetas: mais vivo que o da marca,
     porque sobre fundo escuro o #53000F quase não se distingue. */
  --marca:           #7A1226;
  --marca-hover:     #93203A;

  /* Superfícies, da mais funda para a mais à frente */
  --campo:           #140D0F;   /* dentro dos campos de formulário */
  --fundo:           #1A1214;   /* fundo da página */
  --fundo-alt:       #211719;   /* secções alternadas */
  --superficie:      #2A1E20;   /* cartões, painel do carrinho */
  --superficie-2:    #352729;   /* realces sobre cartões */

  /* Texto */
  --texto:           #F4EADF;
  --texto-suave:     #BDAAA1;
  --acento:          #D6B27B;   /* o dourado que se lê em texto pequeno */

  /* Linhas */
  --linha:           #3E2D30;
  --linha-forte:     #5A4347;

  /* Pormenores a dourado: contornos dos cartões e dos botões, e as
     divisões dentro dos cartões */
  --ouro-contorno:   rgba(194, 158, 97, .55);
  --ouro-fio:        rgba(194, 158, 97, .3);

  --branco:          #FFFFFF;
  --verde-ok:        #86CDA8;
  --erro:            #F28B7D;

  /* Nomes antigos, mantidos para regras que ainda os usem */
  --tinta:           var(--texto);
  --tinta-suave:     var(--texto-suave);
  --creme-fundo:     var(--fundo-alt);
  --areia:           var(--superficie-2);
  --terracota:       var(--linha-forte);
  --terracota-forte: var(--linha-forte);

  /* Ibarra Real Nova recria os tipos de Joaquín Ibarra, impressor
     madrileno do séc. XVIII: tipografia da Península. Karla no texto,
     uma grotesca legível com algum carácter.

     As duas têm as minúsculas mais baixas que as anteriores (a Karla
     parecia 88% do tamanho da Inter, a Ibarra 85% da Playfair, medido).
     O font-size-adjust acerta a altura das minúsculas em vez de mexer
     em todos os tamanhos: se o browser não o suportar, o texto fica
     só ligeiramente mais pequeno. */
  --fonte-titulo: "Ibarra Real Nova", "Iowan Old Style", Palatino, Georgia, serif;
  --fonte-texto:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ajuste-titulo: .48;
  --ajuste-texto:  .52;

  --raio:    12px;
  --raio-sm: 8px;
  --sombra:    0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --sombra-lg: 0 24px 64px rgba(0, 0, 0, .55);
  --largura: 1180px;
  --topo:    72px;
}

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

/* Uma classe com display próprio vence o display:none que o atributo
   hidden traz do browser. Esta regra garante que esconder é esconder. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--fonte-texto); font-size-adjust: var(--ajuste-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

body.sem-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo);
  font-weight: 700;
  line-height: 1.14;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.3rem, 5.5vw, 4.1rem); }

/* Título principal das páginas interiores: é h1 por ser o assunto da
   página, mas com o peso visual de um título de secção. */
h1.titulo-pagina { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2.5px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { max-width: var(--largura); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }

/* Os elementos que entram de lado começam deslocados para fora do ecrã
   até aparecerem; sem isto, a página ganhava deslocamento horizontal e
   no telemóvel abanava para os lados. "clip" em vez de "hidden" para
   não estragar o cabeçalho colado. */
main { overflow-x: clip; }

.salta-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--marca);
  color: var(--branco);
  border-radius: 0 0 var(--raio-sm) 0;
}
.salta-para-conteudo:focus { left: 0; }

/* =========================================================
   CABEÇALHO
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(26, 18, 20, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linha);
}

.topbar-inner {
  max-width: var(--largura);
  margin-inline: auto;
  padding: .7rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: var(--topo);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--texto);
  text-decoration: none;
  margin-right: auto;
}
.logo:hover { text-decoration: none; }
.logo img { width: 42px; height: 42px; flex-shrink: 0; }

.logo-texto { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nome {
  font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo);
  font-size: 1.24rem;
  font-weight: 700;
  white-space: nowrap;
}
.logo-tag {
  font-size: .63rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--acento);
  font-weight: 600;
  white-space: nowrap;
}
/* O lema já aparece na página inicial e no rodapé. No cabeçalho, o
   espaço vai para os ícones das redes sociais. */
.topbar .logo-tag { display: none; }

.nav { display: flex; gap: 1.7rem; align-items: center; }

.nav a {
  color: var(--texto-suave);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  padding: .3rem 0;
  position: relative;
  transition: color .18s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transition: transform .22s ease;
}
.nav a:hover { color: var(--acento); text-decoration: none; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--acento); font-weight: 600; }

.acoes-topo { display: flex; align-items: center; gap: .5rem; }

.btn-carrinho {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--ouro-contorno);
  border-radius: 100px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.btn-carrinho:hover { border-color: var(--acento); }
.btn-carrinho svg { width: 19px; height: 19px; }

.contador {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--marca);
  color: var(--branco);
  font-size: .73rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.contador[hidden] { display: none; }
.contador.salta { transform: scale(1.35); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4.5px;
  padding: 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   BOTÕES
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.8rem;
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--marca); color: var(--creme); }
.btn-primary:hover { background: var(--marca-hover); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }

.btn-ghost { background: transparent; color: var(--acento); border-color: var(--ouro-contorno); }
.btn-ghost:hover { border-color: var(--acento); background: rgba(214, 178, 123, .07); }

.btn-dourado { background: var(--dourado); color: var(--borgonha-escuro); }
.btn-dourado:hover { background: var(--acento); color: var(--borgonha-escuro); }

/* Variante do botão fantasma para usar sobre fundo borgonha */
.btn-ghost-claro { background: transparent; color: var(--creme); border-color: rgba(252, 246, 238, .38); }
.btn-ghost-claro:hover { background: rgba(252, 246, 238, .1); border-color: var(--creme); color: var(--creme); }

.btn-bloco { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* =========================================================
   HERO E SECÇÕES
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--fundo) 0%, var(--areia) 62%, var(--terracota) 100%);
  padding: clamp(3.5rem, 9vw, 7rem) 0 0;
}

/* Círculo grande, como na capa da marca */
.hero::before {
  content: "";
  position: absolute;
  top: calc(-18% + var(--deslocamento, 0px)); right: -12%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(242, 221, 207, .62);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--acento);
  margin-bottom: 1.3rem;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1.5px;
  background: var(--dourado);
}

.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: italic; color: var(--acento); }

.lead { font-size: 1.12rem; color: var(--texto-suave); max-width: 52ch; margin-bottom: 2rem; }

.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(83, 0, 15, .14);
  font-size: .86rem;
  color: var(--texto-suave);
}
.hero-tags span { display: inline-flex; align-items: center; gap: .45rem; }
/* Só os filhos diretos levam ponto: o span dentro da ligação ficava
   com um ponto a mais */
.hero-tags > span::before,
.hero-tags > a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dourado);
}
/* A última "etiqueta" é uma ligação: quem compra para um café vê logo
   que também é para ele. */
.hero-tags a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--dourado);
  font-weight: 600;
}
.hero-tags a:hover { color: var(--creme); text-decoration: none; }
.hero-tags a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   HERO COM FOTOGRAFIA
   As fotos são de banco de imagens (Unsplash, licença livre
   para uso comercial) e mostram adegas genéricas — não são
   da loja. Substitui por fotos tuas quando as tiveres.
   ========================================================= */

/* Sem "overflow: hidden": a lista da pesquisa pode descer para lá do
   hero. A fotografia continua cortada pela própria moldura. */
.hero-foto { background: var(--borgonha-escuro); overflow: visible; }
.hero-foto .hero-inner { z-index: 4; }

.hero-fundo {
  position: absolute;
  display: block;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Zoom muito lento, para a imagem não ficar parada */
  animation: aproximar 26s ease-in-out infinite alternate;
}

@keyframes aproximar {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.2%); }
}

/* Véu que garante que o texto se lê sobre a fotografia */
.hero-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(58, 0, 10, .94) 0%, rgba(58, 0, 10, .82) 38%, rgba(58, 0, 10, .42) 72%, rgba(58, 0, 10, .58) 100%),
    linear-gradient(to top, rgba(58, 0, 10, .75) 0%, transparent 34%);
}

/* O conteúdo do hero passa a ser claro */
.hero-foto .hero-inner { color: var(--areia); }
.hero-foto h1 { color: var(--creme); }
.hero-foto h1 em { color: var(--dourado); font-style: italic; }
.hero-foto .lead { color: rgba(252, 246, 238, .87); }
.hero-foto .eyebrow { color: var(--dourado); }
.hero-foto .eyebrow::before { background: var(--dourado); }
.hero-foto .hero-tags {
  color: rgba(252, 246, 238, .78);
  border-top-color: rgba(252, 246, 238, .22);
}

/* O gradiente e as colinas do hero claro não se usam sobre fotografia */
.hero-foto::before, .hero-foto .hero-colinas { display: none; }

/* Colinas em camadas, no espírito da capa da marca */
.hero-colinas {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  pointer-events: none;
  z-index: 0;
}
.hero-colinas svg { width: 100%; height: 100%; display: block; }
.colina-1 { fill: rgba(219, 186, 167, .62); }
.colina-2 { fill: rgba(189, 145, 133, .5); }

/* Onda que separa o hero do resto, como na capa */
.onda path { fill: var(--fundo); }
.onda { position: relative; z-index: 2; display: block; width: 100%; height: auto; margin-bottom: -1px; }

/* --- Secções genéricas --- */

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-alt { background: var(--creme-fundo); border-block: 1px solid var(--linha); }
.section-escura { background: var(--borgonha); color: var(--texto-suave); }
.section-escura h2, .section-escura h3 { color: var(--creme); }
.section-escura a:not(.btn) { color: var(--dourado); }

.section-head { text-align: center; max-width: 60ch; margin: 0 auto 2.8rem; }
.section-head p { color: var(--texto-suave); margin: 0; }
.section-escura .section-head p { color: rgba(252, 246, 238, .78); }

.section-head-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.section-head-linha h2 { margin: 0; }
.section-head-linha p { margin: .3rem 0 0; color: var(--texto-suave); }

/* =========================================================
   FAIXA FOTOGRÁFICA
   ========================================================= */

.faixa {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 11vw, 8rem) 0;
  background: var(--borgonha-escuro);
  isolation: isolate;
}

.faixa .faixa-fundo { position: absolute; display: block; inset: -12% 0; z-index: 0; }
.faixa-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.faixa-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(58, 0, 10, .93) 0%, rgba(58, 0, 10, .8) 45%, rgba(58, 0, 10, .5) 100%);
}

.faixa-conteudo {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-inline: 0;
  padding-inline: clamp(1rem, 4vw, 3rem);
  color: var(--areia);
}
.faixa-conteudo h2 { color: var(--creme); margin-bottom: .7rem; }
.faixa-conteudo .lead { color: rgba(252, 246, 238, .85); margin-bottom: 1.8rem; }
.faixa-conteudo .eyebrow { color: var(--dourado); }
.faixa-conteudo .eyebrow::before { background: var(--dourado); }

/* Centrar a faixa dentro da largura máxima do site */
@media (min-width: 1240px) {
  .faixa-conteudo { margin-inline: auto; padding-left: calc((100vw - var(--largura)) / 2); max-width: none; }
  .faixa-conteudo > * { max-width: 620px; }
}

/* --- Fotografia emoldurada (página Sobre) --- */

.sobre-lateral { display: grid; gap: 1.2rem; }

.foto-emoldurada {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--ouro-contorno);
  background: var(--superficie);
}
.foto-emoldurada img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .68, .3, 1);
}
.foto-emoldurada:hover img { transform: scale(1.05); }
.foto-emoldurada figcaption {
  padding: .7rem .9rem;
  font-size: .76rem;
  color: var(--texto-suave);
  text-align: center;
  border-top: 1px solid var(--linha);
}

/* =========================================================
   CARTÕES DE PRODUTO
   ========================================================= */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.filtros:empty { display: none; }

.chip {
  padding: .5rem 1.2rem;
  border: 1.5px solid var(--linha);
  border-radius: 100px;
  background: var(--superficie);
  color: var(--texto-suave);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s;
}
.chip:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--creme);
}

/* --- Pesquisa e ordenação (vinhos, espumantes, cervejas) --- */

.pesquisa {
  position: relative;
  max-width: 560px;
  margin: 0 auto 1.2rem;
}
.pesquisa input {
  width: 100%;
  height: 52px;
  padding: 0 3rem 0 3.1rem;
  border: 1.5px solid var(--ouro-contorno);
  border-radius: 100px;
  background: var(--campo);
  font: inherit;
  font-size: 1rem;           /* 16px: abaixo disto o iPhone faz zoom ao tocar */
  color: var(--texto);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.pesquisa input::placeholder { color: #8C7B76; }
/* Com a caixa vazia não há "x" para apagar: esse espaço fica para a dica,
   e num telemóvel muito estreito a dica acaba em reticências */
.pesquisa input:placeholder-shown { padding-right: 1.2rem; text-overflow: ellipsis; }
.pesquisa input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(214, 178, 123, .22);
}
/* O "x" do próprio browser não combina com o resto: usa-se o nosso */
.pesquisa input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.pesquisa-icone {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--acento);
  pointer-events: none;
}
.pesquisa-limpar {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.pesquisa-limpar:hover { background: var(--superficie-2); color: var(--acento); }
.pesquisa-limpar svg { width: 18px; height: 18px; }

/* Na página inicial, sobre a fotografia */
.pesquisa-inicio {
  z-index: 5;
  max-width: 540px;
  margin: 0 0 1.6rem;
  scroll-margin-top: calc(var(--topo) + 1rem);
}
.pesquisa-inicio input { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.pesquisa-inicio input:focus { box-shadow: 0 0 0 3px rgba(214, 178, 123, .22), 0 10px 30px rgba(0, 0, 0, .28); }

.sugestoes {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
}
.sugestao {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .55rem 1rem;
  color: var(--texto);
  text-decoration: none;
}
.sugestao + .sugestao { border-top: 1px solid var(--linha); }
.sugestao:hover, .sugestao[aria-selected="true"] { background: var(--superficie-2); text-decoration: none; }
.sugestao-foto { display: block; width: 40px; height: 56px; }
.sugestao-foto img, .sugestao-foto svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.sugestao-texto { min-width: 0; }
.sugestao-nome { display: block; font-weight: 600; line-height: 1.25; }
.sugestao-meta {
  display: block;
  margin-top: .2rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.sugestao-preco { font-weight: 600; color: var(--acento); white-space: nowrap; text-align: right; }
.sugestao-preco small { display: block; font-size: .74rem; font-weight: 400; color: var(--texto-suave); }
.sugestoes-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.3rem;
  margin: 0;
  padding: .75rem 1rem;
  background: var(--fundo-alt);
  border-top: 1px solid var(--ouro-fio);
  font-size: .9rem;
  color: var(--texto-suave);
}
.sugestoes-lista:empty + .sugestoes-rodape { border-top: 0; }
.sugestoes-rodape a { color: var(--acento); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Texto só para leitores de ecrã */
.so-leitores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Por cima dos produtos: quantos são, e a ordem */
.catalogo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--ouro-fio);
}
/* Uma contagem comprida ("2 resultados para ...") quebra no seu canto,
   e a caixa da ordem fica sempre à direita */
.catalogo-contagem { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .92rem; color: var(--texto-suave); }
.catalogo-contagem strong { font-weight: 600; color: var(--texto); }

.ordenar {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--texto-suave);
}
.ordenar select {
  padding: .5rem 2.3rem .5rem 1rem;
  border: 1.5px solid var(--ouro-contorno);
  border-radius: 100px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6B27B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.ordenar select:hover { border-color: var(--acento); }
.ordenar select:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(214, 178, 123, .22);
}
.ordenar option { background: var(--superficie); color: var(--texto); }

.catalogo-outros { margin: -.6rem 0 1.6rem; font-size: .92rem; color: var(--texto-suave); }
.catalogo-outros a,
.catalogo-vazio a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

/* Quando a pesquisa não encontra nada */
.catalogo-vazio {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 560px;
  margin: 1rem auto;
  padding: 2.2rem 1.6rem;
  text-align: center;
  border: 1px dashed var(--ouro-contorno);
  border-radius: var(--raio);
  color: var(--texto-suave);
}
.catalogo-vazio p { margin: 0 0 .5rem; }
.catalogo-vazio-titulo { font-family: var(--fonte-titulo); font-size: 1.35rem; color: var(--texto); }
.catalogo-vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.2rem; }

@media (max-width: 480px) {
  /* Não há espaço para "Ordenar por": fica só a caixa, e o leitor de
     ecrã continua a dizer o que ela é */
  .ordenar-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--dourado); }
.card.esgotado { opacity: .62; }

.card-top {
  position: relative;
  height: 245px;
  display: grid;
  place-items: center;
  /* Vitrine: um foco de luz quente por trás da garrafa, como numa
     montra de cave. Sem ele, os tintos, que são bordô escuro,
     desapareciam no cartão. */
  background:
    radial-gradient(ellipse 58% 70% at 50% 46%, #5E4346 0%, #3F2D30 46%, var(--superficie) 100%);
  border-bottom: 1px solid var(--ouro-fio);
  overflow: hidden;
}
.card-top img {
  height: calc(205px * var(--escala, 1));   /* --escala: garrafas pequenas mais baixas */
  width: auto;
  max-width: 76%;
  object-fit: contain;
  border-radius: 6px;
  /* drop-shadow segue a forma da imagem: numa garrafa recortada, a
     sombra é da garrafa; numa foto de fundo branco, é do retângulo */
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5));
  transition: transform .3s ease;
}
.card:hover .card-top img { transform: scale(1.06); }

/* Ilustrações SVG das garrafas e latas (ver js/ilustracoes.js) */
.ilustracao {
  width: auto;
  max-width: 62%;
  overflow: visible;
  transition: transform .42s cubic-bezier(.22, .68, .3, 1), filter .42s ease;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.46));
}
.card-top .ilustracao { height: 208px; }
.card:hover .ilustracao {
  transform: translateY(-9px) rotate(-2.5deg) scale(1.05);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
}
.card.esgotado .ilustracao { filter: grayscale(.72) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); }

/* Miniatura na linha do carrinho */
.linha-arte .ilustracao { height: 52px; max-width: 80%; filter: none; }
.linha-arte .ilustracao:hover { transform: none; }

.badge {
  position: absolute;
  top: .75rem; left: .75rem;
  padding: .24rem .7rem;
  border-radius: 100px;
  background: var(--dourado);
  color: #2A0A10;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  z-index: 2;
}
.badge-esgotado { background: var(--linha-forte); color: var(--creme); }

.card-body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }

.card-meta {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acento);
  font-weight: 700;
  margin-bottom: .4rem;
}

.card-nome { font-size: 1.08rem; margin-bottom: .15rem; }
.card-produtor { font-size: .82rem; color: var(--texto-suave); margin-bottom: .6rem; }
/* No máximo três linhas, a acabar em "…": o texto todo está na página
   do produto. Sem "flex: 1", senão as linhas escondidas voltavam a
   aparecer no espaço que sobra; quem desce o preço é a margem do rodapé. */
.card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: .89rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

/* O cartão inteiro é clicável: o link do nome estica-se por cima de
   tudo, e só o botão Adicionar fica acima dele. O "Ver detalhes" diz
   que há mais para ver, também no telemóvel, onde não há o efeito de
   passar o rato. */
.card-nome a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card .badge { pointer-events: none; }
.card .btn-add { position: relative; z-index: 2; }
.card-nome a:focus-visible { outline: none; }
.card:has(.card-nome a:focus-visible) { outline: 2.5px solid var(--acento); outline-offset: 3px; }

.card-mais {
  align-self: flex-start;
  margin: -.45rem 0 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--acento);
}
.card-seta { display: inline-block; transition: transform .22s; }
.card:hover .card-mais { text-decoration: underline; text-underline-offset: 3px; }
.card:hover .card-seta { transform: translateX(5px); }

.card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding-top: .9rem;
  border-top: 1px solid var(--ouro-fio);
}

.preco-bloco { display: flex; flex-direction: column; }
.preco { font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.volume { font-size: .76rem; color: var(--texto-suave); }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--dourado);
  border-radius: 100px;
  background: transparent;
  color: var(--acento);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.btn-add:hover { background: var(--dourado); border-color: var(--dourado); color: #2A0A10; transform: scale(1.04); }
.btn-add.feito { background: #2E6B4F; border-color: #2E6B4F; color: var(--creme); }
.btn-add:disabled { background: var(--linha-forte); border-color: var(--linha-forte); color: var(--creme); cursor: not-allowed; transform: none; }

/* Página inicial: os cartões do "Em destaque" são dourados por inteiro,
   com o texto, a etiqueta e o botão em bordô, as duas cores do
   logótipo. As garrafas claras continuam a ver-se porque têm as
   margens sombreadas. */
.destaques .card {
  --texto:       #2A0A10;
  --texto-suave: #43231B;
  --acento:      #5C0816;
  --linha:       rgba(58, 0, 10, .18);
  --ouro-fio:    rgba(58, 0, 10, .18);
  background: linear-gradient(165deg, #D1B37C 0%, #BF9D61 55%, #B59154 100%);
  border-color: #CDAE74;
  color: var(--texto);
}
.destaques .card-top {
  background: radial-gradient(ellipse 58% 70% at 50% 46%, #EEDDB8 0%, #D8BC88 50%, #C4A267 100%);
}
.destaques .badge { background: var(--marca); color: var(--creme); }
.destaques .btn-add { background: var(--marca); border-color: var(--marca); color: var(--creme); }
.destaques .btn-add:hover { background: var(--marca-hover); border-color: var(--marca-hover); color: var(--creme); }
.destaques .btn-add.feito { background: #2E6B4F; border-color: #2E6B4F; }
.destaques .btn-add:disabled { background: var(--linha-forte); border-color: var(--linha-forte); }

.vazio { text-align: center; color: var(--texto-suave); padding: 3rem 0; grid-column: 1 / -1; }

/* =========================================================
   CARRINHO (painel lateral)
   ========================================================= */

.veu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.veu.aberto { opacity: 1; visibility: visible; }

.carrinho {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 90;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  /* O painel inteiro rola. Antes só a lista rolava, e com o seletor de
     receção o fundo chegava a 76% da altura no telemóvel: a lista
     ficava sem espaço para mostrar um único produto inteiro. */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fundo);
  box-shadow: var(--sombra-lg);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}
.carrinho.aberto { transform: translateX(0); }

.carrinho-topo {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
}
.carrinho-topo h2 { margin: 0; font-size: 1.3rem; }

.btn-fechar {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--creme-fundo);
  color: var(--texto);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.btn-fechar:hover { background: var(--areia); transform: rotate(90deg); }

.carrinho-lista { flex: none; padding: 1rem 1.4rem; }

.carrinho-vazio { text-align: center; padding: 3.5rem 1rem; color: var(--texto-suave); }
.carrinho-vazio svg { width: 54px; height: 54px; margin: 0 auto 1rem; opacity: .32; }

.linha-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: .9rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--linha);
  animation: entrar .3s ease both;
}
.linha-item:last-child { border-bottom: 0; }

.linha-arte {
  width: 46px; height: 58px;
  border-radius: var(--raio-sm);
  background: linear-gradient(158deg, var(--creme-fundo), var(--areia));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.linha-arte img { height: 88%; width: auto; object-fit: contain; }

.linha-info { min-width: 0; }
.linha-nome { font-size: .93rem; font-weight: 600; margin: 0 0 .1rem; }
.linha-meta { font-size: .78rem; color: var(--texto-suave); margin: 0 0 .5rem; }

.qtd { display: inline-flex; align-items: center; gap: .1rem; border: 1.5px solid var(--linha); border-radius: 100px; background: var(--campo); }
.qtd button {
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border: 0;
  background: none;
  color: var(--texto);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.qtd button:hover { background: var(--marca); color: var(--creme); }
.qtd span { min-width: 25px; text-align: center; font-size: .87rem; font-weight: 600; }

/* A quantidade também se escreve: quem leva 24 garrafas não carrega
   24 vezes no "+". Sem as setas do browser, que aqui não cabem. */
.qtd-num {
  width: 2.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qtd-num::-webkit-outer-spin-button,
.qtd-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd-num:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-radius: 4px; }
.qtd .qtd-cx { min-width: 0; margin-left: -.2rem; font-size: .76rem; color: var(--texto-suave); }

.linha-direita { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .4rem; }
.linha-preco { font-weight: 700; font-size: .96rem; white-space: nowrap; }

.btn-remover {
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: .78rem;
  cursor: pointer;
  padding: .15rem .1rem;
  text-decoration: underline;
  transition: color .15s;
}
.btn-remover:hover { color: var(--erro); }

.carrinho-fundo { padding: 1.2rem 1.4rem 0; border-top: 1px solid var(--linha); background: var(--superficie); flex: 1; }

#btn-esvaziar { display: block; margin: .6rem auto 1rem; }

/* O botão de encomendar cola em baixo e está sempre ao alcance,
   por muito comprida que seja a lista. */
.carrinho-acao {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 -1.4rem;
  padding: .9rem 1.4rem 1.1rem;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.25);
}

.total-linha { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; font-size: .9rem; color: var(--texto-suave); }
.total-linha.grande { margin-bottom: 1rem; font-size: 1.05rem; color: var(--texto); font-weight: 600; }
.total-linha.grande strong { font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo); font-size: 1.6rem; font-weight: 700; }

/* --- Escolha de como receber a encomenda --- */

.modos {
  border: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.modos legend {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  margin-bottom: .55rem;
  padding: 0;
}

.modo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  padding: .75rem .9rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--fundo);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.modo:hover { border-color: var(--terracota-forte); }
.modo.escolhido { border-color: var(--acento); background: var(--superficie-2); }

.modo input {
  margin: .2rem 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--dourado);
  cursor: pointer;
}

.modo-texto { display: flex; flex-direction: column; gap: .1rem; }
.modo-texto strong { font-size: .92rem; color: var(--texto); }
.modo-texto span { font-size: .8rem; color: var(--texto-suave); line-height: 1.4; }

/* Abaixo do mínimo, a entrega continua escolhível — para o cliente ver
   quanto falta — mas o que falta aparece a vermelho. */
.modo.bloqueado .modo-texto span { color: var(--erro); }

.aviso-minimo { font-size: .84rem; color: var(--erro); margin: 0 0 .8rem; }

/* Particular ou empresa, no passo dos dados: dentro do formulário o
   espaçamento é do próprio formulário */
.modos-tipo { margin-bottom: 0; }

/* --- Passo 2 do carrinho: dados do cliente --- */

.checkout { display: flex; flex-direction: column; gap: 1.1rem; }

.btn-voltar {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .1rem;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
  transition: color .18s;
}
.btn-voltar:hover { color: var(--acento); }
.btn-voltar svg { width: 16px; height: 16px; }

.resumo-encomenda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  margin: 0;
  padding: .75rem .9rem;
  border-radius: var(--raio-sm);
  background: var(--creme-fundo);
  font-size: .85rem;
  color: var(--texto-suave);
}
.resumo-encomenda strong {
  margin-left: auto;
  font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo);
  font-size: 1.1rem;
  color: var(--texto);
}

#form-dados { display: flex; flex-direction: column; gap: 1.1rem; }

.bloco-dados {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.bloco-dados legend {
  padding: 0;
  margin-bottom: .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}

.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label { font-size: .86rem; font-weight: 600; color: var(--texto); }
.campo .opcional { font-weight: 400; font-size: .78rem; color: var(--texto-suave); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--campo);
  font: inherit;
  font-size: 1rem;           /* 16px: abaixo disto o iPhone faz zoom ao tocar */
  color: var(--tinta);
  transition: border-color .18s, box-shadow .18s;
}
.campo textarea { resize: vertical; min-height: 60px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(214, 178, 123, .22);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8C7B76; }

.campo [aria-invalid="true"] { border-color: var(--erro); background: #3A1519; }
.campo-erro { margin: 0; font-size: .8rem; color: var(--erro); min-height: 0; }
.campo-erro:empty { display: none; }

.ajuda { margin: -.4rem 0 0; font-size: .78rem; color: var(--texto-suave); }

.campos-lado { display: grid; grid-template-columns: 8.5rem 1fr; gap: .7rem; }

.opcao-caixa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .9rem;
  color: var(--texto);
  cursor: pointer;
}
.opcao-caixa input {
  width: 18px;
  height: 18px;
  margin: .1rem 0 0;
  accent-color: var(--dourado);
  cursor: pointer;
}
.opcao-caixa.lembrar { font-size: .84rem; color: var(--texto-suave); }

#bloco-nif { display: flex; flex-direction: column; gap: .75rem; margin-top: .2rem; }
#bloco-morada-fatura { display: flex; flex-direction: column; gap: .75rem; }

.aviso-dados {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--texto-suave);
}
.aviso-dados a { color: var(--acento); }

/* O botão Continuar desativado, abaixo do mínimo da entrega */
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

@media (max-width: 380px) {
  .campos-lado { grid-template-columns: 1fr; }
}

/* Um link com aria-disabled continuava a parecer clicável */
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.nota-carrinho { font-size: .78rem; color: var(--texto-suave); margin: .2rem 0 0; text-align: center; line-height: 1.5; }

/* Notificação de produto adicionado */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 95;
  transform: translate(-50%, 130%);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.4rem;
  border-radius: 100px;
  background: var(--texto);
  color: var(--fundo);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--sombra-lg);
  transition: transform .4s cubic-bezier(.32, 1.4, .5, 1);
  max-width: calc(100vw - 2rem);
}
.toast.visivel { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--marca); flex-shrink: 0; }

/* =========================================================
   VERIFICAÇÃO DE IDADE
   ========================================================= */

.modal-idade {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(58, 0, 10, .94);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-idade.aberto { opacity: 1; visibility: visible; }

.modal-caixa {
  max-width: 430px;
  width: 100%;
  padding: 2.4rem 2rem;
  border-radius: var(--raio);
  background: var(--superficie);
  border: 1px solid var(--linha);
  text-align: center;
  transform: translateY(18px) scale(.97);
  transition: transform .35s cubic-bezier(.32, 1.3, .5, 1);
}
.modal-idade.aberto .modal-caixa { transform: translateY(0) scale(1); }

.modal-caixa img { width: 72px; height: 72px; margin: 0 auto 1.2rem; }
.modal-caixa h2 { font-size: 1.55rem; margin-bottom: .6rem; }
.modal-caixa p { color: var(--texto-suave); font-size: .93rem; }
.modal-acoes { display: flex; gap: .7rem; margin-top: 1.6rem; }
.modal-acoes .btn { flex: 1; }
.modal-legal { font-size: .76rem; color: var(--texto-suave); margin-top: 1.3rem; }
.modal-legal a { color: var(--acento); }

/* =========================================================
   CONTEÚDO DIVERSO
   ========================================================= */

.cartoes-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }

.info {
  padding: 1.7rem;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  transition: transform .22s, box-shadow .22s;
}
.info:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.info-icone {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(194, 158, 97, .14);
  box-shadow: inset 0 0 0 1px var(--ouro-contorno);
  color: var(--dourado);
  margin-bottom: 1rem;
}
.info-icone svg { width: 22px; height: 22px; }
.info h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.info p { font-size: .9rem; color: var(--texto-suave); margin: 0; }

/* =========================================================
   PARA CASA E PARA O NEGÓCIO
   Os dois públicos da loja: quem leva uma garrafa para casa e
   quem compra para o restaurante ou para o café.
   ========================================================= */

.publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }

.publico {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.publico:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--dourado); }
.publico h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.publico p { color: var(--texto-suave); margin-bottom: 1.4rem; }
.publico .btn { margin-top: auto; }

/* Passos numerados (página dos profissionais) */
.passos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}
.passos li {
  padding: 1.7rem;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
}
.passo-numero {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--marca);
  color: var(--creme);
  font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo);
  font-size: 1.15rem;
  font-weight: 700;
}
.passos h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.passos p { font-size: .9rem; color: var(--texto-suave); margin: 0; }
.passos-nota { margin: 1.6rem 0 0; text-align: center; color: var(--texto-suave); font-size: .92rem; }

.categorias-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; }

.categoria-card {
  position: relative;
  display: block;
  padding: 1.8rem 1.5rem;
  border-radius: var(--raio);
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-left: 3px solid var(--dourado);
  color: var(--texto);
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s, box-shadow .22s, border-left-color .22s;
}
.categoria-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); text-decoration: none; border-left-color: var(--acento); }
.categoria-card h3 { margin-bottom: .35rem; }
.categoria-card p { font-size: .87rem; color: var(--texto-suave); margin: 0 0 1rem; }
.categoria-card .seta { font-size: .85rem; font-weight: 600; color: var(--acento); transition: transform .22s; display: inline-block; }
.categoria-card:hover .seta { transform: translateX(5px); }
.categoria-conta { font-size: .78rem; color: var(--texto-suave); }

.about { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-text p { color: var(--texto-suave); }

.stats { display: grid; gap: 1rem; margin: 0; }
.stats > div { padding: 1.2rem 1.4rem; background: var(--superficie); border: 1px solid var(--ouro-contorno); border-radius: var(--raio); }
.stats dt { font-size: .73rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); margin-bottom: .15rem; }
.stats dd { margin: 0; font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo); font-size: 2rem; font-weight: 700; color: var(--acento); }

/* =========================================================
   REDES SOCIAIS
   Ícones no cabeçalho; botões com o nome no menu do telemóvel,
   na página inicial, no contacto e no rodapé.
   ========================================================= */

.redes-topo { display: flex; align-items: center; gap: .1rem; }
.redes-topo a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--texto);
  transition: color .18s, background .18s;
}
.redes-topo a:hover { color: var(--acento); background: var(--superficie); }
.redes-topo svg { width: 20px; height: 20px; }

.nav-redes { display: none; }

.redes { display: flex; flex-wrap: wrap; gap: .6rem; }
.redes .btn-rede, .nav-redes .btn-rede {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .6rem 1.15rem .6rem .95rem;
  border: 1.5px solid var(--ouro-contorno);
  border-radius: 100px;
  color: var(--texto);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn-rede svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--acento); }
.redes .btn-rede:hover, .nav-redes .btn-rede:hover {
  background: var(--dourado);
  border-color: var(--dourado);
  color: var(--borgonha-escuro);
  transform: translateY(-2px);
  text-decoration: none;
}
.redes .btn-rede:hover svg, .nav-redes .btn-rede:hover svg { color: currentColor; }

/* Página inicial: faixa por baixo dos três cartões */
.redes-faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  margin-top: 1.4rem;
  padding: 1.5rem 1.7rem;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio);
}
.redes-faixa h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.redes-faixa p { margin: 0; font-size: .92rem; color: var(--texto-suave); }

.contacto-bloco .redes { margin-top: .8rem; }

/* "Chamada para a rede fixa nacional": a lei obriga a dizer o tipo de
   chamada ao lado do número. Fica pequeno, por baixo de cada um. */
.custo-chamada {
  display: block;
  font-size: .72rem;
  color: var(--texto-suave);
  line-height: 1.4;
}
.footer .custo-chamada { margin-top: -.5rem; }

/* =========================================================
   PÁGINA DE PRODUTO (produto.html)
   ========================================================= */

/* Nos cartões, o nome é o link para a página do produto */
.card-nome a { color: inherit; text-decoration: none; }
.card-nome a:hover { color: var(--acento); text-decoration: none; }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 2rem;
  font-size: .85rem;
  color: var(--texto-suave);
}
.migalhas a { color: var(--texto-suave); }
.migalhas a:hover { color: var(--acento); }
.migalhas [aria-current] { color: var(--texto); }

.ficha {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ficha-foto {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  background: radial-gradient(ellipse 58% 70% at 50% 46%, #5E4346 0%, #3F2D30 46%, var(--superficie) 100%);
}
.ficha-foto img {
  height: calc(420px * var(--escala, 1));
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
.ficha-foto .ilustracao { height: 400px; width: auto; }
.ficha-foto .badge { top: 1rem; left: 1rem; }

.ficha-nome { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .3rem 0 1rem; }
.ficha-desc { max-width: 52ch; margin-bottom: 1.6rem; font-size: 1.02rem; color: var(--texto-suave); }

.ficha-compra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.8rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  background: var(--superficie);
}
.ficha-preco { display: flex; flex-direction: column; gap: .1rem; }
.ficha-preco .preco { font-size: 2rem; }
.ficha-caixa { margin-top: .3rem; font-size: .9rem; color: var(--texto-suave); }
.ficha-caixa strong { color: var(--texto); }
.btn-comprar.feito { background: #2E6B4F; border-color: #2E6B4F; color: var(--creme); }

.ficha-dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin: 0 0 1.6rem;
  border-top: 1px solid var(--ouro-fio);
}
.ficha-dados > div { padding: .8rem 0; border-bottom: 1px solid var(--ouro-fio); }
.ficha-dados dt {
  margin-bottom: .15rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-suave);
}
.ficha-dados dd { margin: 0; font-weight: 500; color: var(--texto); }
.ficha-partilhar a { font-weight: 600; }
.ficha-vazia { text-align: center; padding: 3rem 0; }
.ficha-vazia p { margin-bottom: 1.6rem; color: var(--texto-suave); }

@media (max-width: 760px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha-foto { min-height: 340px; padding: 1.8rem; }
  .ficha-foto img { height: calc(300px * var(--escala, 1)); }
  .ficha-foto .ilustracao { height: 290px; }
  .ficha-compra .btn-comprar { flex: 1 1 100%; }
}

/* =========================================================
   PÁGINA DO CARRINHO (carrinho.html)
   O mesmo carrinho que era um painel lateral, agora em página:
   a lista à esquerda, o resumo à direita; no passo dos dados, o
   formulário ao centro.
   ========================================================= */

a.btn-carrinho, a.btn-carrinho:hover { text-decoration: none; }

.carrinho.carrinho-pagina {
  position: static;
  z-index: auto;
  width: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.6rem 2rem;
  align-items: start;
  overflow: visible;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
}
.carrinho-pagina .carrinho-topo {
  position: static;
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.carrinho-pagina .carrinho-topo .titulo-pagina { margin: 0; }
.carrinho-pagina .carrinho-lista {
  padding: .4rem 1.4rem;
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  background: var(--superficie);
}
.carrinho-pagina .carrinho-fundo {
  position: sticky;
  top: calc(var(--topo) + 1rem);
  padding: 1.4rem 1.4rem 0;
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  overflow: hidden;
}
.carrinho-pagina .carrinho-acao { position: static; box-shadow: none; }

/* Carrinho vazio: a mensagem ocupa a largura toda */
.carrinho-pagina[data-passo="vazio"] .carrinho-lista { grid-column: 1 / -1; }
.carrinho-vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; }

/* Passo dos dados: o formulário ao centro, sem a lista, e o título
   alinhado com ele */
.carrinho-pagina[data-passo="2"] .carrinho-topo {
  justify-self: center;
  width: 100%;
  max-width: 760px;
}
.carrinho-pagina[data-passo="2"] .carrinho-fundo {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 760px;
  position: static;
}

/* Sugestões para juntar à encomenda: por baixo da lista, na coluna da
   esquerda, em cartões compactos, sem descrição nem produtor. O resumo
   ocupa a coluna da direita toda: como desce com a página, se as
   sugestões fossem até lá passava-lhes por cima. */
.carrinho-pagina .carrinho-fundo { grid-column: 2; grid-row: 2 / span 2; }
.carrinho-sugestoes { grid-column: 1; grid-row: 3; min-width: 0; margin-top: 1rem; }
.carrinho-pagina[data-passo="vazio"] .carrinho-sugestoes { grid-column: 1 / -1; }
.carrinho-sugestoes-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--ouro-fio);
}
.carrinho-sugestoes-topo h2 { margin: 0; font-size: 1.5rem; }
.nota-sugestoes { margin: 0; font-size: .95rem; font-weight: 600; color: var(--acento); }
.grid-sugestoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.grid-sugestoes .card-desc,
.grid-sugestoes .card-produtor { display: none; }
.grid-sugestoes .card-top { height: 200px; }
.grid-sugestoes .card-top img { height: calc(168px * var(--escala, 1)); }
.grid-sugestoes .card-top .ilustracao { height: 170px; }
.grid-sugestoes .card-nome { margin-bottom: .9rem; }
/* Cartão estreito: o preço por cima, o botão a toda a largura */
.grid-sugestoes .card-foot { flex-direction: column; align-items: stretch; gap: .7rem; }
.grid-sugestoes .btn-add { justify-content: center; }

@media (max-width: 900px) {
  /* minmax(0, ...): sem isto, a fila das sugestões alargava a coluna
     para lá do ecrã, e o resumo ficava cortado */
  .carrinho.carrinho-pagina { grid-template-columns: minmax(0, 1fr); }
  .carrinho-pagina .carrinho-fundo { position: static; }
  /* Uma coluna: a lista, as sugestões e depois o resumo */
  .carrinho-pagina .carrinho-fundo,
  .carrinho-sugestoes { grid-column: auto; grid-row: auto; }
  .carrinho-sugestoes { margin-top: 0; }
  /* No telemóvel, as sugestões passam numa fila que se arrasta para o lado */
  .grid-sugestoes {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .4rem 0 .8rem;
  }
  .grid-sugestoes .card { flex: 0 0 min(250px, 72%); scroll-snap-align: start; }
}

/* Guardar o dia da recolha no calendário */
.calendario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  margin-top: 1rem;
  font-size: .86rem;
  color: var(--texto-suave);
}
.calendario > span { flex-basis: 100%; }
.btn-calendario {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border: 1.5px solid var(--ouro-contorno);
  border-radius: 100px;
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.btn-calendario:hover { border-color: var(--acento); background: var(--superficie-2); text-decoration: none; }

/* Aviso de "adicionado", com atalho para o carrinho */
.toast-link {
  margin-left: .3rem;
  padding-left: .7rem;
  border-left: 1px solid rgba(26, 18, 20, .2);
  color: var(--marca);
  font-weight: 700;
  white-space: nowrap;
}
.toast-link:hover { color: var(--marca-hover); }

/* Contacto */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.contacto-bloco { margin-bottom: 1.8rem; }
.contacto-bloco h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.contacto-bloco p, .contacto-bloco a:not(.btn) { font-size: .95rem; color: var(--texto-suave); margin: 0 0 .2rem; }
.contacto-bloco a:not(.btn):hover { color: var(--acento); }

.horario { width: 100%; border-collapse: collapse; font-size: .93rem; }
.horario th, .horario td { text-align: left; padding: .5rem 0; border-bottom: 1px solid var(--linha); font-weight: 400; }
.horario td { text-align: right; color: var(--texto-suave); }
.horario tr:last-child th, .horario tr:last-child td { border-bottom: 0; }
.fechado { color: var(--erro); }

/* =========================================================
   ONDE ESTAMOS
   A morada à vista: um ícone no cabeçalho, uma linha no topo da
   página inicial, e uma secção com o horário, o caminho e o mapa.
   ========================================================= */

.local-topo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--texto-suave);
  transition: color .18s, background .18s;
}
.local-topo:hover { color: var(--acento); background: var(--superficie); }
.local-topo svg { width: 20px; height: 20px; }
.nav .nav-local { display: none; }

.hero-local {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin-top: 1.4rem;
  font-size: .95rem;
  color: rgba(252, 246, 238, .87);
  text-decoration: none;
}
.hero-local svg { flex: none; width: 19px; height: 19px; color: var(--dourado); }
.hero-local strong { color: var(--dourado); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero-local:hover { color: var(--creme); text-decoration: none; }

.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 2.8rem;
  align-items: center;
}
.local h2 { margin-bottom: 1.1rem; }
.local-morada { margin-bottom: .9rem; font-size: 1.1rem; line-height: 1.6; color: var(--texto); }
.local .horario { max-width: 380px; margin-bottom: 1.8rem; }
.local-acoes { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Aberto ou fechado, com uma bolinha verde ou vermelha */
.local-estado {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--texto);
}
.local-estado::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--erro);
}
.local-estado.aberto::before { background: var(--verde-ok); box-shadow: 0 0 0 4px rgba(134, 205, 168, .18); }
.local-estado:empty { display: none; }

/* O mapa só carrega quando se pede: até lá, um quadro a lembrar um mapa */
.local-mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
  background: var(--superficie);
}
.local-mapa-contacto { margin-top: 1rem; aspect-ratio: 16 / 10; }
.local-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-carregar {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.5rem;
  border: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(194, 158, 97, .2), transparent 55%),
    linear-gradient(32deg, transparent 46%, rgba(194, 158, 97, .16) 46.4%, rgba(194, 158, 97, .16) 48.2%, transparent 48.6%),
    linear-gradient(-58deg, transparent 61%, rgba(194, 158, 97, .1) 61.4%, rgba(194, 158, 97, .1) 62.6%, transparent 63%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 36px),
    var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.mapa-carregar svg { width: 46px; height: 46px; color: var(--dourado); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.mapa-carregar-titulo { font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 700; }
.mapa-carregar-nota { max-width: 30ch; font-size: .8rem; color: var(--texto-suave); }
.mapa-carregar:hover .mapa-carregar-titulo { color: var(--acento); }
.mapa-carregar:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }

@media (max-width: 900px) {
  .local { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-full { grid-column: 1 / -1; }
.form label { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.form input, .form textarea, .form select {
  padding: .75rem .95rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--campo);
  font: inherit;
  font-size: .95rem;
  color: var(--texto);
  resize: vertical;
  transition: border-color .18s, box-shadow .18s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(214, 178, 123, .22);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--erro); }
.form .opcional { font-weight: 400; font-size: .78rem; color: var(--texto-suave); }

/* Painel do pedido de condições: o formulário dentro de uma moldura,
   para se perceber que é ali que se escreve. */
.painel-pedido {
  padding: 1.8rem;
  background: var(--superficie);
  border: 1px solid var(--ouro-contorno);
  border-radius: var(--raio);
}
.painel-pedido h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.painel-pedido .painel-ajuda { font-size: .9rem; color: var(--texto-suave); margin-bottom: 1.4rem; }
.painel-pedido .btn { width: 100%; }
.painel-pedido .btn svg { width: 19px; height: 19px; }
.painel-nota { margin: .7rem 0 0; font-size: .78rem; color: var(--texto-suave); line-height: 1.5; }
/* Ligar ou mandar mensagem, ao lado do formulário dos profissionais */
.acoes-pro { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 .6rem; }
.acoes-pro .btn { padding: .7rem 1.2rem; font-size: .9rem; }

.form-nota { margin: .8rem 0 0; font-size: .9rem; min-height: 1.4em; }
.form-nota.ok { color: var(--verde-ok); }
.form-nota.erro { color: var(--erro); }

/* =========================================================
   PÁGINAS DE TEXTO LEGAL
   ========================================================= */

.estreito { max-width: 760px; }

.texto-legal { font-size: .97rem; color: var(--tinta-media); }
.texto-legal h3 {
  font-size: 1.25rem;
  color: var(--texto);
  margin: 2.4rem 0 .7rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--linha);
}
.texto-legal h3:first-of-type { margin-top: 0; }
.texto-legal h4 {
  font-family: var(--fonte-texto); font-size-adjust: var(--ajuste-texto);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--acento);
  margin: 1.6rem 0 .5rem;
}
.texto-legal p { margin-bottom: .9rem; }
.texto-legal strong { color: var(--texto); }
.texto-legal ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.texto-legal li { margin-bottom: .4rem; }
.texto-legal li::marker { color: var(--dourado); }

.aviso-revisao {
  padding: 1rem 1.2rem;
  margin-bottom: 2.2rem;
  background: var(--areia);
  border-left: 3px solid var(--dourado-escuro);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  font-size: .89rem;
  color: var(--texto);
}
.aviso-revisao strong { color: var(--acento); }

/* =========================================================
   RODAPÉ
   ========================================================= */

.footer { background: var(--borgonha-escuro); color: rgba(252, 246, 238, .74); font-size: .92rem; padding: 3.2rem 0 1.8rem; }
.footer a { color: rgba(252, 246, 238, .88); }
.footer a:hover { color: var(--dourado); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(252, 246, 238, .15);
}
.footer h4 { color: var(--creme); font-family: var(--fonte-texto); font-size-adjust: var(--ajuste-texto); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .9rem; }
.footer p { margin: 0 0 .35rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .4rem; }

.footer-marca { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.footer-marca img { width: 46px; height: 46px; }
.footer-marca strong { font-family: var(--fonte-titulo); font-size-adjust: var(--ajuste-titulo); font-size: 1.2rem; color: var(--creme); display: block; line-height: 1.2; }
.footer-marca span { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dourado); }

.footer .redes-titulo {
  margin: 1.4rem 0 .7rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--creme);
}
.footer .redes .btn-rede { color: var(--creme); border-color: rgba(252, 246, 238, .32); }
.footer .redes .btn-rede svg { color: var(--dourado); }

/* --- Bloco legal do rodapé --- */

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  margin-top: 1.2rem;
  border-top: 1px solid rgba(252, 246, 238, .15);
}

.identificacao {
  margin: 0;
  font-size: .78rem;
  color: rgba(252, 246, 238, .6);
  max-width: 62ch;
}
.identificacao-em-falta {
  color: #F0B4A6;
  padding: .5rem .8rem;
  border: 1px dashed rgba(240, 180, 166, .5);
  border-radius: var(--raio-sm);
}
.identificacao-em-falta strong { color: #F7CFC6; }

.links-legais { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.links-legais a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: rgba(252, 246, 238, .82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .18s, border-color .18s;
}
.links-legais a:hover { color: var(--dourado); border-bottom-color: var(--dourado); text-decoration: none; }
.links-legais svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 760px) {
  .footer-legal { flex-direction: column; align-items: flex-start; }
}

.footer-fim { padding-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgba(252, 246, 238, .55); }
.aviso-legal { width: 100%; padding: .9rem 1.1rem; margin-top: 1.2rem; border: 1px solid rgba(252, 246, 238, .2); border-radius: var(--raio-sm); text-align: center; font-size: .8rem; color: rgba(252, 246, 238, .7); }

/* =========================================================
   MOVIMENTO E MICRO-INTERAÇÕES
   ========================================================= */

/* --- Barra de progresso de leitura, no topo --- */
.progresso {
  position: fixed;
  top: 0; left: 0;
  z-index: 70;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--marca), var(--dourado));
  will-change: transform;
}

/* --- Cabeçalho encolhe ao descer --- */
.topbar { transition: box-shadow .3s ease, background .3s ease; }
.topbar.encolhido { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.32); }
.topbar.encolhido .topbar-inner { min-height: 58px; padding-block: .45rem; }
.topbar-inner { transition: min-height .3s ease, padding .3s ease; }
.topbar.encolhido .logo img { width: 34px; height: 34px; }
.logo img { transition: width .3s ease, height .3s ease; }
.topbar.encolhido .logo-tag { opacity: 0; max-height: 0; }
.logo-tag { transition: opacity .25s ease, max-height .3s ease; max-height: 20px; }

/* --- Brilho que atravessa os botões principais --- */
.btn-primary, .btn-dourado { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-dourado::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.3, .7, .3, 1);
}
.btn-primary:hover::after, .btn-dourado:hover::after { transform: translateX(120%); }

/* --- Cartões: brilho que segue o rato --- */
.card { position: relative; }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--rato-x, 50%) var(--rato-y, 50%),
              rgba(194, 158, 97, .13), transparent 62%);
}
.card:hover::before { opacity: 1; }

/* --- Fundo do cartão reage ao hover --- */
.card-top { transition: background .4s ease; }

/* Ao passar o rato, a luz acende um pouco mais */
.card-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 44%, rgba(214, 178, 123, .16), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
}
.card:hover .card-top::after { opacity: 1; }

/* --- Etiqueta entra a saltar --- */
.badge { animation: badge-entra .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .25s; }
@keyframes badge-entra {
  from { opacity: 0; transform: translateY(-7px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* --- Números que contam para cima --- */
.stats dd { font-variant-numeric: tabular-nums; }

/* --- Sublinhado dos links de texto --- */
.ligacao-animada {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--marca), var(--marca));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}
.ligacao-animada:hover { text-decoration: none; background-size: 100% 1.5px; }

/* --- Cartões de categoria: brilho a varrer --- */
.categoria-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -65%;   /* bem fora do cartão: inclinado, a ponta de cima espreitava */
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(194, 158, 97, .16), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.3, .7, .3, 1);
  pointer-events: none;
}
.categoria-card:hover::after { left: 115%; }

/* --- Painel do carrinho: linhas entram escalonadas --- */
.linha-item:nth-child(1) { animation-delay: .02s; }
.linha-item:nth-child(2) { animation-delay: .06s; }
.linha-item:nth-child(3) { animation-delay: .1s; }
.linha-item:nth-child(4) { animation-delay: .14s; }
.linha-item:nth-child(n+5) { animation-delay: .18s; }

/* --- Ícones dos blocos de informação --- */
.info-icone { transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), background .3s ease; }
.info:hover .info-icone { transform: rotate(-8deg) scale(1.1); background: var(--dourado); color: var(--fundo); }

/* --- Pulsar do botão do carrinho quando há artigos --- */
@keyframes pulsar-anel {
  0%   { box-shadow: 0 0 0 0 rgba(83, 0, 15, .35); }
  70%  { box-shadow: 0 0 0 9px rgba(83, 0, 15, 0); }
  100% { box-shadow: 0 0 0 0 rgba(83, 0, 15, 0); }
}
.contador.salta { animation: pulsar-anel .7s ease-out; }

/* --- Cortina que revela as fotografias --- */
.cortina { overflow: hidden; }
/* Só damos posicionamento a quem ainda não tem um próprio: o fundo da
   faixa já é absoluto, e impor-lhe "relative" partia o layout. */
.cortina:not(.faixa-fundo) { position: relative; }
.cortina::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--creme-fundo);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}
.cortina.visivel::after { transform: scaleX(0); }
.cortina img { transform: scale(1.12); transition: transform 1.1s cubic-bezier(.22, .68, .3, 1); }
.cortina.visivel img { transform: scale(1); }

/* --- Inclinação suave dos cartões ao passar o rato --- */
.card {
  transform: perspective(900px) rotateX(var(--inclina-x, 0deg)) rotateY(var(--inclina-y, 0deg)) translateY(var(--sobe, 0));
  transform-style: preserve-3d;
}
.card:hover { --sobe: -4px; }

/* --- Indicador de scroll no hero --- */
.indicador-scroll {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  color: rgba(252, 246, 238, .72);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  animation: acenar 2.4s ease-in-out infinite;
}
.indicador-scroll:hover { color: var(--dourado); text-decoration: none; }
.indicador-scroll svg { width: 17px; height: 17px; }

@keyframes acenar {
  0%, 100% { transform: translate(-50%, 0); opacity: .72; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* --- Transição entre páginas --- */
body { animation: pagina-entra .42s ease both; }
@keyframes pagina-entra { from { opacity: 0; } to { opacity: 1; } }

body.a-sair { opacity: 0; transition: opacity .26s ease; }

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   ========================================================= */

@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.revelar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .68, .3, 1);
  transition-delay: var(--atraso, 0s);
}
.revelar.visivel { opacity: 1; transform: none; }

/* Variantes de direção */
.revelar-esq { transform: translateX(-34px); }
.revelar-dir { transform: translateX(34px); }
.revelar-zoom { transform: scale(.94); }
.revelar-esq.visivel, .revelar-dir.visivel, .revelar-zoom.visivel { transform: none; }

/* O hero entra sozinho ao carregar, sem esperar pelo scroll */
.entrada > * { animation: subir .85s cubic-bezier(.22, .68, .3, 1) both; }
.entrada > *:nth-child(1) { animation-delay: .05s; }
.entrada > *:nth-child(2) { animation-delay: .15s; }
.entrada > *:nth-child(3) { animation-delay: .25s; }
.entrada > *:nth-child(4) { animation-delay: .35s; }
.entrada > *:nth-child(5) { animation-delay: .45s; }
.entrada > *:nth-child(6) { animation-delay: .55s; }
.entrada > *:nth-child(7) { animation-delay: .65s; }

@keyframes subir {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* Portáteis pequenos: o menu ainda cabe inteiro se o carrinho ficar
   só com o ícone e os links mais juntos. */
@media (min-width: 1021px) and (max-width: 1180px) {
  .nav { gap: 1.2rem; }
  .btn-carrinho { padding: .55rem .8rem; }
  .btn-carrinho .etiqueta-carrinho { display: none; }
}

/* A navegação passa a hambúrguer mais cedo do que o resto do
   layout: com "Profissionais" são sete itens, e a partir daqui já não
   cabem ao lado do logótipo e do carrinho. */
@media (max-width: 1140px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem 0 .8rem;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra);
  }
  .nav.aberto { display: flex; animation: entrar .22s ease both; }
  .nav a { padding: .85rem clamp(1rem, 4vw, 3rem); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: var(--areia); }

  .nav-toggle { display: flex; order: 3; }

  /* No telemóvel, as redes e o "Como chegar" passam do cabeçalho
     para dentro do menu */
  .redes-topo, .local-topo { display: none; }
  .nav .nav-local { display: flex; align-items: center; gap: .55rem; }
  .nav-local svg { width: 18px; height: 18px; color: var(--dourado); }
  .nav-redes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .4rem;
    padding: 1rem clamp(1rem, 4vw, 3rem) .3rem;
    border-top: 1px solid var(--linha);
  }
}

@media (max-width: 1000px) {
  .hero { padding-top: clamp(2rem, 6vw, 4rem); }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .hero-inner .eyebrow, .hero-inner .lead { margin-inline: auto; }
  .hero-actions, .hero-tags { justify-content: center; }
  .pesquisa-inicio { margin-inline: auto; }
  /* Centrado, o ícone fica colado ao início da morada, e o
     "Como chegar" desce para a linha de baixo */
  .hero-local { display: block; text-align: center; line-height: 1.5; }
  .hero-local svg { display: inline-block; vertical-align: -4px; margin-right: .3rem; }
  .hero-local strong { display: block; margin-top: .35rem; }
  .indicador-scroll { display: none; }
  .hero-inner { gap: 1rem; padding-top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contacto-grid, .about { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --topo: 62px; }

  .logo img { width: 36px; height: 36px; }
  .logo-nome { font-size: 1.08rem; }
  .logo-tag { display: none; }

  .btn-carrinho { padding: .5rem .8rem; }
  .btn-carrinho .etiqueta-carrinho { display: none; }

  .stats { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .form, .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
  .modal-acoes { flex-direction: column-reverse; }
  .carrinho { width: 100%; }
  .modo { padding: .6rem .8rem; }
  .modo-texto span { font-size: .77rem; }
}

@media (max-width: 420px) {
  .stats { grid-auto-flow: row; }
  .grid { grid-template-columns: 1fr; }
  .card-top { height: 270px; }
  .card-top .ilustracao { height: 230px; }
  .card-top img { height: calc(225px * var(--escala, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-fundo img { animation: none; }
  .faixa-fundo img { transform: none !important; }
  .cortina::after { display: none; }
  .cortina img { transform: none; }
  .card { transform: none !important; }
  .indicador-scroll { animation: none; }
  body, body.a-sair { animation: none; opacity: 1; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .revelar { opacity: 1; transform: none; }
  .entrada > * { opacity: 1; }
  .progresso { display: none; }
}

@media print {
  .topbar, .carrinho, .veu, .toast, .modal-idade, .footer { display: none !important; }
}