/* ==========================================================================
   Viviê Eventos & Design — folha de estilo do site
   v1.1 · 28/10/2026 · consome os tokens de ../marca/tokens.css (paleta v1.2)

   Nada aqui define cor absoluta: tudo vem dos tokens semânticos. As duas
   exceções são correções de contraste da v1.2, documentadas em cada bloco:
   · siena sobre areia dá 4,29:1 (abaixo de AA) → as faixas areia trocam o
     texto secundário para tijolo (6,36:1);
   · siena sobre osso dá 3,28:1 → os cartões osso usam tijolo (4,86:1).
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vv-fundo);
  color: var(--vv-texto);
  font-family: var(--vv-fonte-texto);
  font-size: var(--vv-texto-base);
  line-height: var(--vv-altura-linha-corpo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--vv-fonte-display);
  font-weight: var(--vv-peso-normal);
  line-height: var(--vv-altura-linha-titulo);
  color: var(--vv-tinta);
  margin: 0 0 var(--vv-4);
  text-wrap: balance;
}

h1 { font-size: var(--vv-texto-4xl); line-height: var(--vv-altura-linha-apertada); letter-spacing: var(--vv-espaco-letras-apertado); }
h2 { font-size: clamp(1.9rem, 4vw, var(--vv-texto-2xl)); letter-spacing: var(--vv-espaco-letras-apertado); }
h3 { font-size: var(--vv-texto-l); }

p { margin: 0 0 var(--vv-4); max-width: var(--vv-largura-texto); }

a { color: var(--vv-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vv-link-hover); }

:focus-visible {
  outline: var(--vv-foco-largura) solid var(--vv-foco-cor);
  outline-offset: 3px;
  box-shadow: 0 0 0 calc(var(--vv-foco-largura) * 2) var(--vv-foco-halo);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--vv-4); top: -100px; z-index: 100;
  background: var(--vv-acao-fundo); color: var(--vv-acao-texto);
  padding: var(--vv-3) var(--vv-5); border-radius: var(--vv-raio-m);
}
.saltar:focus { top: var(--vv-4); color: var(--vv-acao-texto); }

.envolvente {
  width: 100%;
  max-width: var(--vv-largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--vv-goteira);
}
@media (min-width: 48rem) { .envolvente { padding-inline: var(--vv-goteira-larga); } }

.etiqueta {
  font-size: var(--vv-texto-xs);
  text-transform: uppercase;
  letter-spacing: var(--vv-espaco-letras-largo);
  color: var(--vv-texto-suave);
  margin-bottom: var(--vv-3);
}

.nota { font-size: var(--vv-texto-s); color: var(--vv-texto-suave); }

/* Aviso de data (reservas a partir de 15/11/2026) -------------------------
   Mesma linguagem do aviso do formulário: âmbar como traço, nunca como texto.
   Usa --vv-tinta (nogueira) porque o fundo é papel tingido de âmbar. */
.aviso-data {
  font-size: var(--vv-texto-s);
  color: var(--vv-tinta);
  background: color-mix(in srgb, var(--vv-ambar) 18%, transparent);
  border: var(--vv-borda-fina) solid color-mix(in srgb, var(--vv-siena) 40%, transparent);
  border-left: 3px solid var(--vv-luz);
  border-radius: var(--vv-raio-s);
  padding: var(--vv-2) var(--vv-3);
  max-width: 34rem;
}
.aviso-data strong { font-weight: var(--vv-peso-forte); }

/* Botões e ligações de ação ------------------------------------------------ */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--vv-2);
  background: var(--vv-acao-fundo); color: var(--vv-acao-texto);
  padding: var(--vv-3) var(--vv-5);
  border: 0; border-radius: var(--vv-raio-cheio);
  font: inherit; font-weight: var(--vv-peso-medio);
  text-decoration: none; cursor: pointer;
  transition: background var(--vv-transicao), transform var(--vv-transicao-rapida);
}
.botao:hover { background: var(--vv-acao-fundo-hover); color: var(--vv-acao-texto-hover); }
.botao:active { transform: translateY(1px); }
.botao--pequeno { padding: var(--vv-2) var(--vv-4); font-size: var(--vv-texto-s); }

.ligacao {
  font-weight: var(--vv-peso-medio);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Cabeçalho ---------------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--vv-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--vv-borda-fina) solid var(--vv-linha);
}
.cabecalho__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vv-4);
  min-height: 4.5rem;
  padding-block: var(--vv-2);
}
/* Logótipo: selo oblongo (ronda 8), viewBox real 909 × 409 → 2,22:1.
   O mínimo de ecrã do selo oblongo é 120 px (marca/logo/README.md); usam-se
   174 px, que dão ~78 px de altura e mantêm o cabeçalho compacto. A proporção
   tem de ser a do viewBox: com 984 × 351 o SVG era desenhado centrado numa
   caixa mais larga do que ele, com margem morta de cada lado.
   Abaixo de ~360 px de ecrã o logótipo cede ao botão do menu (max-width). */
.marca img { width: 10.875rem; max-width: calc(100% - 4rem); height: auto; aspect-ratio: 909 / 409; }

/* Faixas areia: siena (--vv-texto-suave) só chega a 4,29:1 sobre areia e reprova
   em AA. Nestas três secções o texto secundário passa a tijolo (6,36:1). */
.frentes, .processo, .perguntas { --vv-texto-suave: var(--vv-tijolo); }

/* Superfícies osso (--vv-superficie): siena a 3,28:1 — o cartão e o formulário
   usam tijolo (4,86:1). O mesmo vale para os números do ateliê. */
.cartao, .numeros li, .formulario { --vv-texto-suave: var(--vv-tijolo); }

.menu__lista {
  display: flex; align-items: center; gap: var(--vv-5);
  list-style: none; margin: 0; padding: 0;
}
.menu__lista a { color: var(--vv-texto); text-decoration: none; font-size: var(--vv-texto-s); }
.menu__lista a:hover { text-decoration: underline; }
.menu__lista a.botao { color: var(--vv-acao-texto); }

.menu-botao { display: none; }

@media (max-width: 55rem) {
  .menu-botao {
    display: inline-flex; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: var(--vv-3); cursor: pointer;
  }
  .menu-botao__risco { display: block; width: 24px; height: 2px; background: var(--vv-tinta); }
  .menu {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--vv-fundo);
    border-bottom: var(--vv-borda-fina) solid var(--vv-linha);
    padding: var(--vv-4) var(--vv-goteira) var(--vv-5);
    display: none;
  }
  .menu[data-aberto="true"] { display: block; }
  .menu__lista { flex-direction: column; align-items: flex-start; gap: var(--vv-3); }
}

/* Hero -------------------------------------------------------------------- */
.hero { padding-block: clamp(var(--vv-6), 6vw, var(--vv-10)); }
.hero__interior {
  display: grid; gap: clamp(var(--vv-5), 4vw, var(--vv-8));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 58rem) {
  .hero__interior { grid-template-columns: 1.05fr 1fr; }
}
.hero__entrada { font-size: var(--vv-texto-m); color: var(--vv-texto-suave); max-width: 34rem; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vv-5); margin-top: var(--vv-6); }
.hero__figura { margin: 0; }
.hero__figura img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--vv-raio-l);
  box-shadow: var(--vv-sombra-3);
}
.hero__figura figcaption {
  margin-top: var(--vv-3);
  font-size: var(--vv-texto-xs);
  color: var(--vv-texto-suave);
}

/* Frentes ----------------------------------------------------------------- */
.frentes { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); background: var(--vv-fundo-alt); }
.cartoes { display: grid; gap: var(--vv-5); margin-top: var(--vv-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cartoes { grid-template-columns: 1fr 1fr; } }
.cartao {
  background: var(--vv-superficie);
  border: var(--vv-borda-fina) solid var(--vv-linha);
  border-radius: var(--vv-raio-l);
  padding: clamp(var(--vv-5), 3vw, var(--vv-7));
  box-shadow: var(--vv-sombra-1);
}
.cartao--destaque { border-color: var(--vv-linha-forte); box-shadow: var(--vv-sombra-2); }
.cartao h3 { margin-bottom: var(--vv-3); }
.cartao p { color: var(--vv-texto-suave); }

.lista-check { list-style: none; margin: var(--vv-4) 0 0; padding: 0; }
.lista-check li {
  position: relative; padding-left: 1.5rem; margin-bottom: var(--vv-2);
  font-size: var(--vv-texto-s); color: var(--vv-texto);
}
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--vv-luz);
}

/* Galeria ----------------------------------------------------------------- */
.galeria { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); }
.galeria__cabecalho p { color: var(--vv-texto-suave); }
.galeria__grelha {
  list-style: none; margin: var(--vv-6) 0 0; padding: 0;
  display: grid; gap: var(--vv-3);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}
@media (min-width: 48rem) { .galeria__grelha { grid-template-columns: repeat(4, 1fr); } }
.galeria__item {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--vv-raio-m);
  background: var(--vv-areia);
}
.galeria__item img {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform var(--vv-transicao-lenta);
}
.galeria__item:hover img { transform: scale(1.03); }
.galeria__item--alto img { aspect-ratio: 3 / 4; }
.galeria__item--largo { grid-column: span 2; }
.galeria__item--largo img { aspect-ratio: 16 / 9; }
.galeria__legenda {
  position: absolute; left: var(--vv-2); bottom: var(--vv-2);
  background: color-mix(in srgb, var(--vv-papel) 88%, transparent);
  color: var(--vv-tinta);
  font-size: var(--vv-texto-xs);
  padding: var(--vv-1) var(--vv-2);
  border-radius: var(--vv-raio-s);
}

/* Processo ---------------------------------------------------------------- */
.processo { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); background: var(--vv-fundo-alt); }
.passos {
  list-style: none; margin: var(--vv-6) 0 0; padding: 0;
  display: grid; gap: var(--vv-5);
  grid-template-columns: 1fr;
  counter-reset: passo;
}
@media (min-width: 48rem) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passos li { border-top: var(--vv-borda-media) solid var(--vv-linha-forte); padding-top: var(--vv-4); }
.passos__numero {
  font-family: var(--vv-fonte-mono);
  font-size: var(--vv-texto-s);
  color: var(--vv-acento);
  display: block; margin-bottom: var(--vv-2);
}
.passos h3 { font-size: var(--vv-texto-m); }
.passos p { font-size: var(--vv-texto-s); color: var(--vv-texto-suave); }

/* Ateliê ------------------------------------------------------------------ */
.atelier { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); }
.atelier__interior { display: grid; gap: var(--vv-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 58rem) { .atelier__interior { grid-template-columns: 1.4fr 1fr; } }
.numeros {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--vv-4);
  grid-template-columns: repeat(3, 1fr);
}
.numeros li {
  background: var(--vv-superficie);
  border: var(--vv-borda-fina) solid var(--vv-linha);
  border-radius: var(--vv-raio-m);
  padding: var(--vv-4);
  text-align: center;
}
.numeros strong {
  display: block;
  font-family: var(--vv-fonte-display);
  font-size: var(--vv-texto-xl);
  color: var(--vv-tinta);
}
.numeros span { font-size: var(--vv-texto-xs); color: var(--vv-texto-suave); }

/* Perguntas --------------------------------------------------------------- */
.perguntas { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); background: var(--vv-fundo-alt); }
.acordeao { margin-top: var(--vv-5); max-width: 46rem; }
details {
  border-bottom: var(--vv-borda-fina) solid var(--vv-linha);
  padding: var(--vv-4) 0;
}
summary {
  cursor: pointer; font-weight: var(--vv-peso-medio);
  font-size: var(--vv-texto-m);
  list-style: none; display: flex; justify-content: space-between; gap: var(--vv-4);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--vv-acento); font-size: var(--vv-texto-l); line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin-top: var(--vv-3); color: var(--vv-texto-suave); font-size: var(--vv-texto-s); }

/* Contacto ---------------------------------------------------------------- */
.contacto { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); }
.contacto__interior { display: grid; gap: var(--vv-7); grid-template-columns: 1fr; }
@media (min-width: 58rem) { .contacto__interior { grid-template-columns: 1fr 1fr; } }
.contactos { list-style: none; margin: var(--vv-5) 0 0; padding: 0; }
.contactos li { padding: var(--vv-2) 0; border-bottom: var(--vv-borda-fina) solid var(--vv-linha); }
.contactos__rotulo { display: inline-block; min-width: 7rem; font-size: var(--vv-texto-s); color: var(--vv-texto-suave); }
.contacto__acao { margin-top: var(--vv-5); }

/* Página de texto (privacidade.html) --------------------------------------- */
.pagina { padding-block: clamp(var(--vv-7), 6vw, var(--vv-10)); }
.pagina__interior { max-width: 46rem; }
.pagina h1 { margin-bottom: var(--vv-3); }
.pagina h2 { font-size: var(--vv-texto-l); margin-top: var(--vv-7); margin-bottom: var(--vv-3); }
.pagina h3 { font-size: var(--vv-texto-m); margin-top: var(--vv-5); margin-bottom: var(--vv-2); }
.pagina ul { padding-left: var(--vv-5); margin: 0 0 var(--vv-4); }
.pagina li { margin-bottom: var(--vv-2); max-width: var(--vv-largura-texto); }
.pagina li::marker { color: var(--vv-acento); }
.pagina__versao { font-size: var(--vv-texto-s); color: var(--vv-texto-suave); margin-bottom: var(--vv-6); }
/* Lacunas para a Viviane preencher: têm de saltar à vista, é de propósito. */
.lacuna {
  background: color-mix(in srgb, var(--vv-ambar) 35%, transparent);
  color: var(--vv-tinta);
  font-weight: var(--vv-peso-forte);
  padding: 0 var(--vv-1);
  border-radius: 2px;
  border-bottom: var(--vv-borda-media) solid var(--vv-acento);
}
.voltar { display: inline-block; font-size: var(--vv-texto-s); font-weight: var(--vv-peso-medio); }

.formulario {
  display: grid; gap: var(--vv-2);
  background: var(--vv-superficie);
  border: var(--vv-borda-fina) solid var(--vv-linha);
  border-radius: var(--vv-raio-l);
  padding: clamp(var(--vv-5), 3vw, var(--vv-6));
  box-shadow: var(--vv-sombra-1);
}
.formulario label { font-size: var(--vv-texto-s); font-weight: var(--vv-peso-medio); margin-top: var(--vv-2); }
.formulario input, .formulario textarea {
  font: inherit; color: var(--vv-tinta);
  background: var(--vv-fundo);
  /* O contorno dos campos tem de contrastar 3:1 com o cartão osso; areia
     (#E3D5C1 sobre #C4BCA8) ficava a 1,2:1. Siena dá 3,28:1 e já é da paleta. */
  border: var(--vv-borda-media) solid var(--vv-siena);
  border-radius: var(--vv-raio-s);
  padding: var(--vv-2) var(--vv-3);
  width: 100%;
}
.formulario input:focus-visible, .formulario textarea:focus-visible { border-color: var(--vv-tinta); }
.formulario .botao { margin-top: var(--vv-4); justify-self: start; }
.formulario__aviso {
  font-size: var(--vv-texto-xs);
  background: color-mix(in srgb, var(--vv-ambar) 18%, transparent);
  border-left: 3px solid var(--vv-luz);
  padding: var(--vv-2) var(--vv-3);
  border-radius: var(--vv-raio-s);
  color: var(--vv-tinta);
}

/* Rodapé ------------------------------------------------------------------ */
.rodape { background: var(--vv-nogueira); color: var(--vv-papel); padding-block: var(--vv-7); }
.rodape a { color: var(--vv-papel); }
/* O contorno de foco padrão é bordô sobre nogueira (1:1) — invisível aqui.
   No rodapé escuro o foco passa a papel, com o mesmo halo âmbar. */
.rodape :focus-visible {
  outline-color: var(--vv-papel);
  box-shadow: 0 0 0 calc(var(--vv-foco-largura) * 2) var(--vv-ambar);
}
.rodape__interior { display: grid; gap: var(--vv-5); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .rodape__interior { grid-template-columns: 1.4fr 1fr; } }
.rodape img { width: 10.875rem; max-width: 100%; height: auto; aspect-ratio: 909 / 409; margin-bottom: var(--vv-3); }
.rodape p { font-size: var(--vv-texto-s); color: color-mix(in srgb, var(--vv-papel) 82%, transparent); margin-bottom: var(--vv-2); }
.rodape__legal { font-size: var(--vv-texto-xs); max-width: 32rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .galeria__item img { transition: none; }
}