/* ==========================================================================
   VINHOS DO VALLE — Fundação
   Tokens, reset, tipografia, grade e primitivas de movimento.
   Referência: Master Design System — Vinhos do Valle.
   ========================================================================== */

:root {
  /* ---- Cor ---------------------------------------------------------- */
  --fundo:            #090909;
  --fundo-2:          #111111;
  --superficie:       #181818;
  --superficie-alta:  #1F1F1F;

  --primaria:         #5A0E18;
  --primaria-hover:   #701220;
  --primaria-fundo:   rgba(90, 14, 24, 0.22);

  --dourado:          #C7A96B;
  --dourado-claro:    #DCC391;
  --dourado-escuro:   #9A7F46;
  --dourado-fundo:    rgba(199, 169, 107, 0.10);

  /* Dourado como folha, não como cor chapada: a variação de luz ao longo do
     traço é o que separa metal de amarelo. */
  --folha-ouro: linear-gradient(105deg,
                  #8E7340 0%, #C7A96B 22%, #F0DDB0 42%,
                  #C7A96B 62%, #A98A50 82%, #DCC391 100%);

  --texto:            #F8F8F8;
  --texto-2:          #9D9D9D;
  --texto-3:          #6A6A6A;

  --borda:            rgba(255, 255, 255, 0.08);
  --borda-forte:      rgba(255, 255, 255, 0.14);
  --borda-dourada:    rgba(199, 169, 107, 0.34);

  /* ---- Espaço — múltiplos de 8 -------------------------------------- */
  --e05: 4px;
  --e1:  8px;
  --e2:  16px;
  --e3:  24px;
  --e4:  32px;
  --e6:  48px;
  --e8:  64px;
  --e10: 80px;
  --e12: 96px;
  --e15: 120px;
  --e20: 160px;

  /* ---- Raio ---------------------------------------------------------- */
  --r-botao:   14px;
  --r-campo:   14px;
  --r-card:    20px;
  --r-premium: 24px;
  --r-modal:   28px;
  --r-pilula:  999px;

  /* ---- Sombra -------------------------------------------------------- */
  --sombra:       0 20px 60px rgba(0, 0, 0, 0.35);
  --sombra-hover: 0 35px 80px rgba(0, 0, 0, 0.45);

  /* Altura da barra de captação no topo. Tudo que precisa abrir espaço
     para o cabeçalho fixo soma esta variável, então dispensar a barra
     (que a zera) reacomoda a página inteira sem nenhum outro ajuste. */
  --barra-topo: 40px;

  /* ---- Tipografia ---------------------------------------------------- */
  --fonte-titulo: 'Playfair Display SC', Georgia, serif;
  --fonte-texto:  'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-hero:    clamp(2.75rem, 5.4vw, 4.5rem);    /*  72px */
  --t-h1:      clamp(2.25rem, 4.2vw, 3.5rem);    /*  56px */
  --t-h2:      clamp(1.875rem, 3.2vw, 2.625rem); /*  42px */
  --t-h3:      clamp(1.5rem, 2.4vw, 2rem);       /*  32px */
  --t-h4:      1.5rem;                           /*  24px */
  --t-card:    1.25rem;                          /*  20px */
  --t-corpo:   1rem;                             /*  16px */
  --t-pequeno: 0.875rem;                         /*  14px */
  --t-caption: 0.75rem;                          /*  12px */

  /* ---- Grade --------------------------------------------------------- */
  --largura-max:  1440px;
  --padding-lado: 120px;

  /* ---- Movimento -------------------------------------------------------
     Três curvas e quatro tempos. Tudo no site sai daqui: quando cada peça
     inventa a própria duração, o conjunto perde o compasso e passa a
     parecer template.
     --------------------------------------------------------------------- */
  --curva:       cubic-bezier(0.22, 0.61, 0.36, 1);   /* saída, uso geral */
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);        /* entra e sai */
  --curva-fina:  cubic-bezier(0.16, 1, 0.3, 1);       /* revelações longas */

  --t-toque:     180ms;   /* resposta imediata ao dedo/mouse */
  --t-rapido:    260ms;   /* hover de controles */
  --t-medio:     460ms;   /* mudança de estado */
  --t-entrada:   820ms;   /* entrada de conteúdo */
  --t-cena:     1200ms;   /* revelação de título, cortina */

  /* Degraus de atraso: a régua da narrativa de cada seção. */
  --atraso-1:     90ms;
  --atraso-2:    180ms;
  --atraso-3:    270ms;
  --atraso-4:    360ms;
  --atraso-passo: 80ms;   /* entre irmãos numa cascata */
}

@media (max-width: 1200px) { :root { --padding-lado: 64px; } }
@media (max-width: 768px)  { :root { --padding-lado: 24px; } }

/* iOS Safari dá zoom automático em qualquer campo com fonte abaixo de 16px
   ao focar. Sem isto, tocar num campo de busca ou filtro desloca a página
   inteira e o usuário precisa dar zoom out na mão pra continuar. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; }
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.trancado { overflow: hidden; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* O toque em Chrome/Safari mobile pinta um retângulo cinza por cima do
   elemento tocado — quebra o polimento em botões e cards com fundo escuro. */
a, button { -webkit-tap-highlight-color: transparent; }

ul, ol { list-style: none; }

::selection { background: var(--primaria); color: var(--texto); }

:focus-visible {
  outline: 1px solid var(--dourado);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fundo); }
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: var(--r-pilula);
  border: 3px solid var(--fundo);
}
::-webkit-scrollbar-thumb:hover { background: #333; }

/* ==========================================================================
   TIPOGRAFIA
   Playfair Display SC 700 nos títulos. Inter no restante.

   "SC" quer dizer small caps: as minúsculas são desenhadas como versaletes.
   Isso muda duas regras em relação a uma serifada comum.

   1. Versalete pede espaçamento POSITIVO. As letras têm todas a mesma
      altura, então sem respiro entre elas o título vira um bloco cinza e
      ilegível. O ajuste negativo que estava aqui era da Bodoni, onde as
      maiúsculas altas criavam o espaço sozinhas.
   2. Não existe eixo óptico. A Playfair SC é estática — 'opsz' e
      font-optical-sizing eram instruções para a Bodoni variável e não
      têm efeito nenhum agora. Saíram para não confundir quem editar
      este arquivo depois.
   ========================================================================== */

.hero-titulo,
.h1, .h2, .h3, .h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.14;
  color: var(--texto);
}

.hero-titulo {
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: 0.012em;
}

.h1 {
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: 0.014em;
}

.h2 {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: 0.016em;
}

.h3 {
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: 0.018em;
}

.h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: 0.02em; }

/* Itálico da Playfair: uma palavra de ênfase dentro do título. */
.enfase {
  font-style: italic;
  font-weight: 400;
  color: var(--dourado-claro);
}

.titulo-card {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-card);
  line-height: 1.28;
  letter-spacing: 0.01em;
}

/* Texto corrente. Medida curta: o briefing pede leitura rápida. */
.corpo {
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 56ch;
}

.corpo-pequeno {
  font-size: var(--t-pequeno);
  line-height: 1.55;
  color: var(--texto-2);
}

.caption {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--texto-3);
}

/* Sobrelinha em caixa alta — abre praticamente toda seção. */
.olho {
  display: inline-block;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dourado);
}

.olho--claro { color: var(--texto-2); }

/* O fio abre a seção: nasce do nada e se estende quando ela entra. */
.fio-dourado {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--folha-ouro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--curva) 120ms;
}

.visivel .fio-dourado,
.fio-dourado.visivel { transform: scaleX(1); }

.cabeca--centro .fio-dourado { transform-origin: center; }

/* ==========================================================================
   GRADE
   ========================================================================== */

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--padding-lado);
}

.envelope--estreito { max-width: 900px; }

.grade-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e4);
}

@media (max-width: 1024px) { .grade-12 { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 640px)  { .grade-12 { grid-template-columns: repeat(4, 1fr); gap: var(--e3); } }

/* Seções: muito respiro, conforme o documento. */
.secao { padding-block: var(--e20); position: relative; }
.secao--curta { padding-block: var(--e12); }

/* O fundo alternado não é um bloco cinza: é uma clareira de luz quente que
   nasce no alto e se dissolve. Sem a emenda dura, o scroll vira contínuo. */
.secao--fundo2 {
  background:
    radial-gradient(ellipse 120% 62% at 50% 0%,
      rgba(90, 14, 24, 0.14), transparent 62%),
    linear-gradient(180deg,
      var(--fundo) 0%, var(--fundo-2) 14%,
      var(--fundo-2) 86%, var(--fundo) 100%);
}

/* Filete de luz separando seções, no lugar de borda dura. */
.secao--fundo2::before,
.secao--fundo2::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(199, 169, 107, 0.16) 50%, transparent);
}

.secao--fundo2::before { top: 0; }
.secao--fundo2::after { bottom: 0; }

@media (max-width: 768px) {
  .secao { padding-block: var(--e10); }
  .secao--curta { padding-block: var(--e8); }
}

.centro { text-align: center; }
.centro .corpo { margin-inline: auto; }

.cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: var(--e10);
}

.cabeca--centro { align-items: center; text-align: center; }

.cabeca--linha {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e6);
  flex-wrap: wrap;
}

.cabeca__texto { display: flex; flex-direction: column; gap: var(--e2); }

@media (max-width: 768px) { .cabeca { margin-bottom: var(--e8); } }

/* ==========================================================================
   GRÃO
   Uma camada de ruído quase invisível sobre tudo. É o que separa a tela
   "digital chapada" da imagem cinematográfica: quebra as bandas dos
   gradientes escuros e dá matéria às superfícies.
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tremerGrao 700ms steps(3) infinite;
  will-change: transform;
}

/* Deslocamento mínimo: parado, o ruído vira textura de papel; em movimento,
   vira grão de filme. */
@keyframes tremerGrao {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-1.5%, 1%); }
  66%  { transform: translate(1%, -1.5%); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   MOVIMENTO
   Entrada de seção: opacity 0→1, Y 40→0, 0.8s ease-out.
   Cards: cascata de 80ms com scale 0.96→1.
   ========================================================================== */

.revela {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--t-entrada) var(--curva) var(--atraso, 0ms),
    transform var(--t-entrada) var(--curva) var(--atraso, 0ms);
  will-change: opacity, transform;
}

.revela.visivel { opacity: 1; transform: none; }

/* Degraus de atraso. Estavam em uso no HTML desde o começo, mas nunca
   haviam sido definidos aqui — as entradas em sequência do hero e da
   página de produto vinham aparecendo todas de uma vez. */
.revela--d1 { --atraso: var(--atraso-1); }
.revela--d2 { --atraso: var(--atraso-2); }
.revela--d3 { --atraso: var(--atraso-3); }
.revela--d4 { --atraso: var(--atraso-4); }

.revela--escala { transform: translateY(40px) scale(0.96); }
.revela--escala.visivel { transform: none; }

/* O cabeçalho de seção precisa da classe .revela para o observador enxergá-lo,
   mas quem anima são os filhos — senão o bloco inteiro desliza por cima da
   revelação de cada peça. */
.cabeca.revela { opacity: 1; transform: none; }

/* Títulos não deslizam: são descobertos por baixo de uma máscara, como
   cortina subindo. Muda a leitura de "elemento animado" para "revelação". */
.cabeca .h1,
.cabeca .h2,
.cabeca .h3 {
  clip-path: inset(0 0 108% 0);
  transform: translateY(0.14em);
  transition:
    clip-path 1200ms var(--curva) 80ms,
    transform 1200ms var(--curva) 80ms;
}

.cabeca.visivel .h1,
.cabeca.visivel .h2,
.cabeca.visivel .h3 {
  clip-path: inset(0 0 -22% 0);
  transform: none;
}

/* O olho entra antes do título, puxando a leitura de cima para baixo. */
.cabeca .olho {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--curva), transform 700ms var(--curva);
}

.cabeca.visivel .olho { opacity: 1; transform: none; }

.cabeca .corpo {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 900ms var(--curva) 380ms,
    transform 900ms var(--curva) 380ms;
}

.cabeca.visivel .corpo { opacity: 1; transform: none; }

/* Cascata. O índice --i vem do JS; --atraso-base entra quando a cascata
   segue um cabeçalho de seção, para os cards só começarem depois que o
   título terminou de se apresentar. */
.cascata > * {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity var(--t-entrada) var(--curva),
    transform var(--t-entrada) var(--curva);
  transition-delay: calc(var(--atraso-base, 0ms) + var(--i, 0) * var(--atraso-passo));
}

.cascata.visivel > * { opacity: 1; transform: none; }

/* Ken Burns da hero: zoom lento, nunca acima de 3%. */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

/* Flutuação da garrafa: amplitude mínima, 6s, quase imperceptível. */
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Respiro de luz ao fundo.
   Só opacidade: estas camadas carregam filter: blur() de 50 a 70px, e
   animar transform sobre desfoque obriga o navegador a rasterizar o borrão
   a cada quadro. Em opacidade o compositor resolve sem redesenhar, e o
   ganho visual do scale era imperceptível sob esse nível de blur. */
@keyframes respirar {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.82; }
}

@keyframes correrFio {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revela, .cascata > * { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   AUXILIARES
   ========================================================================== */

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

.linha { height: 1px; background: var(--borda); border: 0; }

/* Halo quente, reaproveitado no fundo de várias seções. */
.halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}

.halo--vinho   { background: rgba(90, 14, 24, 0.30); }
.halo--dourado { background: rgba(199, 169, 107, 0.10); }

/* ==========================================================================
   LUZ DE FUNDO
   As seções sem fotografia ficavam completamente paradas. Uma clareira
   quente que muda de intensidade muito devagar resolve — perceptível só
   quando o olho descansa, nunca enquanto lê.
   ========================================================================== */

.secao::before {
  content: '';
  position: absolute;
  top: 8%; left: 50%;
  width: min(1100px, 88%);
  height: 62%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(90, 14, 24, 0.15), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  /* Promove a camada uma vez e avisa que só a opacidade muda. */
  will-change: opacity;
  animation: clarear 22s ease-in-out infinite;
}

/* Seções que já têm fotografia ou fundo próprio não recebem a clareira. */
.secao--fundo2::before { display: none; }

.secao > * { position: relative; z-index: 1; }

@keyframes clarear {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}