/* =========================================================
   volkhe · styles.css
   Tokens e enquadramento. Medidos no Figma (frame 2406)
   e normalizados para 1440. Base 8.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Cores */
  --vinho-claro: #39011F;   /* topo do gradiente do hero (era #72003F; ajustado a pedido) */
  --vinho:       #240014;
  --breu:        #090005;
  --papel:       #F5F0E8;
  --lilas:       #C3B8BE;
  --rose:        #B98A88;
  --malva:       #756A70;
  --branco:      #FFFFFF;

  --grad-hero: linear-gradient(180deg, var(--vinho-claro) 0%, var(--vinho) 100%);

  /* Famílias */
  --ff-sans:  "Fustat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Tipo: tamanho / entrelinha. Peso vai na classe. */
  --t-display: clamp(44px, 2.2rem + 2.6vw, 72px);   /* 72 → 44 */
  --t-tese:    clamp(32px, 1.6rem + 2.2vw, 56px);   /* 56 → 32 */
  --t-hero:    clamp(26px, 1.3rem + 1.3vw, 40px);   /* 40 → 26 */
  --t-card:    clamp(20px, 1.1rem + 1vw,   32px);    /* 32 → 20, só título de card */
  --t-explica: calc(var(--t-ui) * 1.125);            /* 27 → 18, explicação nas listas de quatro */
  --t-ui:      clamp(16px, 0.9rem + 0.7vw, 24px);   /* 24 → 16 */
  --t-meta:    14px;

  --lh-display: 1.05;
  --lh-tese:    1.15;
  --lh-hero:    1.25;
  --lh-ui:      1.3;
  --lh-meta:    1.5;

  /* Espaço, base 8 */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
  --s-16: 128px;
  --s-20: 160px;
  --s-30: 240px;

  /* Enquadramento */
  --container: 1280px;
  --margin: 80px;
  --gutter: 24px;
  --cols: 12;
  --section-pad: var(--s-20);   /* 160 desktop */

  /* Botão */
  --btn-radius: 24px;
  --btn-pad-y: 24px;
  --btn-pad-x: 40px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;
}

@media (max-width: 1024px) {
  :root {
    --margin: 48px;
    --cols: 8;
    --section-pad: var(--s-12);  /* 96 tablet */
  }
}

@media (max-width: 768px) {
  :root {
    --margin: 24px;
    --cols: 1;
    --section-pad: var(--s-8);   /* 64 mobile */
    --btn-pad-y: 16px;
    --btn-pad-x: 28px;
  }
}

/* ---------- 2. Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  color: var(--papel);
  background: var(--vinho);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p { margin: 0; font-weight: inherit; }
/* Sem palavra sozinha na última linha. Só em h3 e parágrafos: h1/h2 das seções 1 e 2
   são composição aprovada e não podem refluir. */
h3 { text-wrap: balance; }
p  { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 4px;
}

/* ---------- 3. Grade e posições ---------- */
/* Página fluida até 1920; acima disso o container trava e o fundo continua. */
.container {
  width: min(100% - 2 * var(--margin), var(--container));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Três posições, e só três. */
.pos-borda  { grid-column: 1 / -1; }            /* coluna 1 */
.pos-recuo  { grid-column: 2 / -1; }            /* coluna 2 */
.pos-direita{ grid-column: 7 / -1; }            /* coluna 7 */

@media (max-width: 1024px) {
  .pos-direita { grid-column: 3 / -1; }         /* grade de 8: coluna 3 */
}
@media (max-width: 768px) {
  .pos-recuo, .pos-direita { grid-column: 1 / -1; }
}

/* Larguras máximas de texto, medidas em colunas do container de 1280.
   Título: 9 colunas. Apoio: 8. Corpo de leitura: 6 (≈ 60 caracteres). */
.w-9 { max-width: min(100%, calc(9 / 12 * var(--container) - var(--gutter))); }
.w-8 { max-width: min(100%, calc(8 / 12 * var(--container) - var(--gutter))); }
.w-6 { max-width: min(100%, 60ch, calc(6 / 12 * var(--container) - var(--gutter))); }

/* ---------- 4. Seção e rótulo ---------- */
.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section--vinho { background: var(--vinho); color: var(--papel); }
.section--papel { background: var(--papel); color: var(--breu); }

/* Sem rótulo de seção: cada bloco se explica sozinho (decisão de 2026-09-10). */

/* Abertura corrida: título e apoio no mesmo parágrafo, na largura toda do container.
   O apoio começa na mesma linha em que o título termina; a cor é que separa
   (principal no título, cinza no apoio). Sem quebra forçada no título. */
.abertura { text-wrap: pretty; }
.abertura > h2,
.abertura > p { display: inline; }

/* Ritmo entre elementos da seção */
.section__lead   { margin-top: var(--s-3); }   /* título → apoio: 24 */
.section__cta    { margin-top: var(--s-6); }   /* apoio → CTA: 48 */
.section__close  { margin-top: var(--s-6); }   /* frase que fecha */

/* ---------- 5. Tipografia por classe ---------- */
.t-display { font-family: var(--ff-sans);  font-weight: 500; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -0.01em; }
.t-tese    { font-family: var(--ff-sans);  font-weight: 500; font-size: var(--t-tese);    line-height: var(--lh-tese);    letter-spacing: -0.01em; }
.t-cita    { font-family: var(--ff-serif); font-weight: 500; font-size: var(--t-tese);    line-height: var(--lh-tese); }
.t-hero    { font-family: var(--ff-sans);  font-weight: 500; font-size: var(--t-hero);    line-height: var(--lh-hero); }
.t-hero--h1{ font-weight: 600; }
.t-ui      { font-family: var(--ff-sans);  font-weight: 400; font-size: var(--t-ui);      line-height: var(--lh-ui); }
.t-meta    { font-family: var(--ff-sans);  font-weight: 500; font-size: var(--t-meta);    line-height: var(--lh-meta); letter-spacing: 0.08em; text-transform: uppercase; }

/* Hierarquia por cor, não por tamanho */
.c-papel { color: var(--papel); }
.c-lilas { color: var(--lilas); }
.c-rose  { color: var(--rose); }
.c-malva { color: var(--malva); }
.c-breu  { color: var(--breu); }
.c-branco{ color: var(--branco); }
.c-vinho { color: var(--vinho); }

/* ---------- 6. Botão ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  background: var(--vinho);
  color: var(--papel);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: 400;
  text-decoration: none;
  border: 1px solid transparent;
}
/* Afunda levemente ao clicar (emil-design-eng): o site responde ao toque. Usa a propriedade
   scale, e não transform, porque o GSAP deixa transform inline no CTA do hero depois da entrada. */
.btn { transition: scale 0.16s var(--ease-out); }
.btn:active { scale: 0.97; }
.btn__arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(6px); }

/* Sobre fundo escuro (hero e seções vinho), o mesmo vidro do header:
   coerência acima de tudo, o botão é o mesmo em qualquer altura da página. */
.section--vinho .btn,
.hero .btn {
  padding: 16px 28px;
  border-color: transparent;
  background: var(--vidro-escuro);
  -webkit-backdrop-filter: var(--vidro-blur);
  backdrop-filter: var(--vidro-blur);
}

/* ---------- 7. Motion (estado inicial; GSAP anima) ---------- */

/* Blur reveal (porte do @spell/blur-reveal): h1 e h2 quebrados em palavras e letras pelo JS */
.br-word { display: inline-block; white-space: nowrap; }
.br-char { display: inline-block; }    /* will-change só durante a animação (main.js) */
.br-space { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   BLOCOS
   ========================================================= */

/* ---------- Bloco 1 · Header + Hero ---------- */
:root {
  --header-h: 80px;
}
@media (max-width: 768px) { :root { --header-h: 64px; } }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: var(--header-h);          /* a nav saiu do fluxo; o enquadramento fica igual */
  display: flex;
  flex-direction: column;
  background: var(--grad-hero);
  color: var(--papel);
  overflow: hidden;
}

/* Vidro: desfoque gaussiano com uma camada escura por cima. Header e CTA do hero. */
:root {
  --vidro-blur: blur(20px) saturate(1.1);
  --vidro-escuro: rgba(0, 0, 0, 0.15);
  /* Sobre papel, 15% de preto daria cinza claro. Este tom a 97% resulta na mesma cor
     que a faixa tem no topo do hero (≈ #33001C); mais transparente, o papel vaza e acinzenta. */
  --vidro-papel: rgb(45 0 22 / 0.97);
}

/* Header: fixo, sempre visível, sem borda, com a mesma cara do hero na página toda:
   faixa escura em vidro, texto papel. Quando uma seção de papel passa por baixo,
   main.js põe .header--sobre-papel e o vidro adensa para a faixa continuar escura. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--vidro-escuro);
  -webkit-backdrop-filter: var(--vidro-blur);
  backdrop-filter: var(--vidro-blur);
  /* sem transição de fundo: a troca é instantânea para o papel nunca aparecer claro sob a nav */
}
.header--sobre-papel { background: var(--vidro-papel); }

/* Âncoras não param debaixo da nav */
.section, .hero { scroll-margin-top: var(--header-h); }
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--papel);
}
.header__wordmark {
  width: clamp(90px, 6.6vw, 96px);     /* mínimo 90 px do manual */
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: 400;
  color: var(--papel);
  opacity: 0.88;
  transition: opacity 0.3s var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { opacity: 1; }

/* Anéis: encostam na base, sangram à direita, ficam atrás do texto */
/* Feixe de luz (porte do canvas da Conty): atrás do h1, à esquerda, espelhado */
.hero__beam {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 64%;
  opacity: 0.52;                        /* feixe sutil: 35% abaixo do ajuste anterior */
  pointer-events: none;
}
.hero__beam-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 768px) {
  .hero__beam { width: 100%; opacity: 0.8; }
}

.hero__rings {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -4%;
  width: 43vw;
  aspect-ratio: 382 / 452;
  color: var(--rose);
  pointer-events: none;
  will-change: transform;
}
.hero__rings svg { width: 100%; height: 100%; overflow: visible; }
.hero__rings path {
  stroke-width: 0.6;                    /* unidades do viewBox: ≈ 1,3 px quando o SVG mede 800 px */
}

/* Texto e CTA no canto inferior esquerdo, com a mesma margem lateral */
.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: var(--s-8) var(--margin);
}
.hero__text {
  max-width: 640px;
}
.hero__text > * + * { margin-top: 0; }  /* h1 e corpo emendam, como no Figma */
.hero__cta {
  margin-top: var(--s-4);
  align-self: flex-start;
}

/* Tablet e mobile: anéis no topo direito, texto no canto inferior esquerdo */
@media (max-width: 1024px) {
  .hero__rings { top: calc(var(--header-h) + var(--s-2)); bottom: auto; width: 62vw; right: -10%; }
}
@media (max-width: 768px) {
  .header__inner { gap: var(--s-2); }
  .nav { gap: 12px; }
  .nav__link { padding-inline: 2px; }
  .hero__rings { width: 92vw; right: -34%; opacity: 0.8; }
  .hero__body { padding-block: var(--s-6) var(--s-6); }
  .hero__text { max-width: 100%; }
  .hero__cta { padding: 14px 24px; }
}

/* ---------- Bloco 2 · Quem somos ---------- */
.quem__bloco { max-width: 640px; }      /* alinhado à esquerda, na mesma linha do hero */
.quem__assinatura {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.3em;
  margin-top: var(--s-16);              /* 128 */
  font-size: var(--t-display);
  line-height: var(--lh-display);
}
.quem__wordmark {
  display: inline-flex;
  align-items: flex-end;
  vertical-align: baseline;
}
.quem__wordmark-svg {
  height: 0.72em;                       /* altura da ascendente: casa com o "prazer," */
  width: auto;
  transform: translateY(0.012em);       /* compensa o overshoot dos olhos das letras */
}
/* Fundo em gradiente (07/10/2026): o bordô atual em cima (o mesmo tom em que o hero termina, sem
   emenda) escurecendo até um bordô profundo embaixo. */
.quem { background: linear-gradient(180deg, var(--vinho) 0%, #14000b 100%); }

@media (max-width: 768px) {
  .quem__assinatura { margin-top: var(--s-12); }
}

/* ---------- Bloco 3 · Espelho (fundo papel) ---------- */
.espelho__chamada {                      /* chamada em vinho acima dos cards */
  margin-top: var(--s-12);
  font-weight: 500;                     /* voz 2, o que afirma */
}
.espelho__chamada + .espelho__pares { margin-top: var(--s-4); }
@media (max-width: 768px) {
  .espelho__chamada { margin-top: var(--s-8); }
}

/* Ícones: contorno vinho, preenchimento rosé claro, 28 px */
.icone {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: var(--s-4);
  color: var(--vinho);
}
.ic-stroke { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ic-fill   { fill: color-mix(in srgb, var(--rose) 38%, var(--papel)); }

/* Três cards claros, como os da Walks: ícone e textos em linha; a arte entra depois */
.espelho__pares {
  /* Os cards avançam 30% sobre a margem lateral da tela */
  --gap-lateral: calc((100vw - min(100vw - 2 * var(--margin), var(--container))) / 2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--s-12);
  margin-inline: calc(-0.3 * var(--gap-lateral));
}
.espelho__par {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 548px;                    /* espaço reservado para o mockup */
  padding: var(--s-4);
  border-radius: 24px;
  background: color-mix(in srgb, var(--branco) 55%, var(--papel));
}
.espelho__antes { font-weight: 400; }
.espelho__antes s { text-decoration-thickness: 2px; }
.espelho__cabeca {                      /* ícone à esquerda do título correto */
  display: flex;
  align-items: flex-start;
  gap: 14px;                            /* 16 − 15% */
  margin-top: var(--s-3);
}
/* ícone centrado na primeira linha do título, seja qual for o tamanho dele */
.espelho__cabeca .icone { flex: 0 0 auto; margin: calc((var(--t-card) * 1.25 - 28px) / 2) 0 0; }
.espelho__depois {
  margin-top: 0;
  font-size: var(--t-card);
  font-weight: 600;
  line-height: 1.25;
  color: var(--malva);                  /* o cinza mais escuro vai no título */
}
:root { --cinza-claro: color-mix(in srgb, var(--lilas) 45%, var(--malva)); }

/* Gráfico do card 2: valor percebido, no rodapé do card */
.grafico {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: var(--s-6);
}
.grafico__bloco { margin: 0; }
.grafico__bloco--valor { margin-top: auto; padding-top: var(--s-4); }
.grafico__bloco figcaption { margin-bottom: var(--s-1); }
.grafico__bloco svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico__bloco--valor svg { height: 200px; }
.grafico__grade line { stroke: color-mix(in srgb, var(--malva) 14%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico__eixos line { stroke: color-mix(in srgb, var(--malva) 45%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico__linha { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.grafico__linha--valor { stroke: var(--vinho); stroke-width: 2; }
.grafico__area { fill: url(#grad-valor); }
.grafico__bloco--valor { position: relative; }
.grafico__pontos {                      /* pontos mensais sobre o gráfico esticado */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  pointer-events: none;
}
.grafico__pontos i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vinho);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--branco) 55%, var(--papel));
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s var(--ease-out);
}
.is-in .grafico__pontos i { transform: translate(-50%, -50%) scale(1); }
.is-in .grafico__pontos i:nth-child(1)  { transition-delay: 0.35s; }
.is-in .grafico__pontos i:nth-child(2)  { transition-delay: 0.5s; }
.is-in .grafico__pontos i:nth-child(3)  { transition-delay: 0.65s; }
.is-in .grafico__pontos i:nth-child(4)  { transition-delay: 0.8s; }
.is-in .grafico__pontos i:nth-child(5)  { transition-delay: 0.95s; }
.is-in .grafico__pontos i:nth-child(6)  { transition-delay: 1.1s; }
.is-in .grafico__pontos i:nth-child(7)  { transition-delay: 1.25s; }
.is-in .grafico__pontos i:nth-child(8)  { transition-delay: 1.4s; }
.is-in .grafico__pontos i:nth-child(9)  { transition-delay: 1.55s; }
.is-in .grafico__pontos i:nth-child(10) { transition-delay: 1.7s; }
.grafico__delta {
  position: absolute;
  top: var(--s-4);                      /* na linha do rótulo */
  right: 0;
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2F8A5B;                       /* verde do indicador, fora da paleta a pedido */
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* "↑%" (08/10/2026, era "+73%"): a seta é SVG porque a Fustat não tem o caractere ↑.
   Seletor duplo para vencer .grafico__bloco svg, que dimensiona o SVG do gráfico. */
.grafico__delta .grafico__delta-seta {
  display: block;
  overflow: visible;
  width: 0.62em;
  height: 0.85em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card 1: foto encostada na base e na lateral esquerda do card (o card tem overflow hidden e corta
   o canto arredondado). O topo some num degradê até o fundo branco do card, por máscara; o fundo da
   foto já é quase o mesmo branco, então a lateral direita se funde sozinha. (08/10/2026: substituiu o
   cartão interativo com tilt.) */
.espelho__foto {
  position: absolute;
  left: 0;
  bottom: -40px;                                  /* corta levemente a parte de baixo */
  width: 83%;                                     /* zoom de ~15% (era 72%) */
  pointer-events: none;
}
.espelho__foto img {
  display: block;
  width: 100%;
  height: auto;
  /* degradê curto: some só no topo (era até 38% da altura) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
}
/* os títulos do card ficam sempre acima da foto */
.espelho__par:has(.espelho__foto) .espelho__antes,
.espelho__par:has(.espelho__foto) .espelho__cabeca { position: relative; z-index: 1; }

/* Card 3: selo de cera grande, cortado à direita e na base; frase à esquerda */
.espelho__par { position: relative; overflow: hidden; }
.selo {
  flex: 1;
  display: flex;
  align-items: flex-end;
  margin-top: var(--s-4);
}
.selo__frase {
  position: relative;
  z-index: 1;
  max-width: 5.5ch;                     /* "Venha / fazer / parte.": estreita, deixa o selo crescer */
  padding-bottom: var(--s-2);
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  font-weight: 600;
  color: var(--cinza-claro);            /* o cinza mais claro vem para a frase */
}
.selo__img {                            /* ancorado ao card, não à linha do texto */
  position: absolute;
  right: -38%;                          /* 06/10/2026: maior e mais à esquerda, ainda cortado */
  bottom: -25%;                         /* embaixo e à direita (era -48% / -28% / 112%) */
  width: 125%;
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;             /* o papel da foto some sobre o fundo do card */
  /* máscara radial: mantém o selo (≈ 55% do quadro) e apaga o papel da foto */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 62%, transparent 70%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 62%, transparent 70%);
}
@media (max-width: 768px) {
  .espelho__par:has(.selo) { min-height: 380px; }
  .espelho__par:has(.espelho__foto) { min-height: 440px; }   /* espaço para a foto abaixo do título */
  .espelho__foto { width: 71%; bottom: -28px; }   /* mesmo zoom de ~15% (era 62%) */
  .selo__img { right: -34%; bottom: -26%; width: 94%; }   /* cortado embaixo e à direita, como no desktop */
}

/* Fecho: frase que fecha a porta e o convite para o contato */
.espelho__fecho { margin-top: var(--s-16); }   /* conteúdo → fecho: 128 */
/* o destaque em vinho fica na própria linha, como a afirmação dos fechos das seções 4 e 5:
   corrido, ele se partia em "Apenas como / é percebido." */
.espelho__fecho-destaque { display: block; }
@media (max-width: 768px) {
  .espelho__pares { grid-template-columns: 1fr; gap: var(--s-2); margin-top: var(--s-8); }
  .espelho__par { min-height: 312px; padding: var(--s-3); border-radius: 20px; }
  .espelho__fecho { margin-top: var(--s-12); }
}

/* ---------- Bloco 4 · Pilares (fundo vinho) ---------- */

/* Lista sai do container: texto sempre à esquerda (Borda), foto sempre à direita, grande e
   encostada na borda da tela, como se saísse do display (04/10/2026: era alternado). */
.pilares { overflow: hidden; }

/* O fundo escurece suavemente rumo ao fim da seção. É uma camada POR CIMA das fotos e por
   baixo dos textos: escurece fundo e foto juntos, porque as fotos têm o vinho gravado no
   arquivo e uma foto sobre fundo mais escuro mostraria a mancha do vinho antigo. */
.pilares::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 25%, rgb(0 0 0 / 0.12) 60%, rgb(0 0 0 / 0.35) 100%);
}
.pilares .abertura,
.pilares__fecho { position: relative; z-index: 1; }

.pilares__percurso {
  --gap-lateral: calc((100vw - min(100vw - 2 * var(--margin), var(--container))) / 2);
  /* largura de uma coluna da grade, para o texto começar na coluna 2 (Recuo) */
  --coluna: calc((min(100vw - 2 * var(--margin), var(--container)) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  --recuo: calc(var(--coluna) + var(--gutter));
  position: relative;
  margin-top: var(--s-12);              /* abertura → conteúdo: 96 */
}
.pilares__lista { margin-inline: calc(-1 * var(--gap-lateral)); }

/* Barra de leitura: na borda esquerda do conteúdo, na mesma linha vertical do título da
   seção, do topo do primeiro pilar ao fim do último (main.js mede e põe top/bottom). Uma barra
   só, sem pontos: o trecho rosé cresce até a altura do meio da tela conforme o scroll.
   Não usa sticky: .pilares tem overflow hidden (as fotos sangram), e isso desliga o sticky. */
.pilares__trilho {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--lilas) 28%, transparent);
  pointer-events: none;
}
.pilares__trilho-cheio {
  position: absolute;
  inset: 0;
  background: var(--rose);
  transform-origin: top;
  transform: scaleY(var(--progresso, 0));
}
.pilar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 400px;
}
.pilar__corpo {
  position: relative;
  z-index: 1;                           /* texto sempre acima da foto do pilar vizinho */
  /* ocupa as duas metades da linha (a foto fica por baixo, na metade direita) e vai da
     coluna 2 à 7 da grade: seis colunas, chegando perto da foto sem encostar */
  grid-column: 1 / -1;
  grid-row: 1;
  max-width: calc(6 * var(--coluna) + 5 * var(--gutter));
  padding-inline: calc(var(--gap-lateral) + var(--recuo)) var(--s-6);   /* coluna 2: a barra fica na 1 */
  padding-block: var(--s-4);
  box-sizing: content-box;
}
.pilar__foto {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-height: 400px;
}
.pilar__foto img {
  position: absolute;
  top: 50%;
  right: calc(-17.6% * var(--escala));  /* sai pela borda da tela (22% da largura da foto) */
  width: calc(80% * var(--escala));     /* 20% menor que a coluna (03/10/2026) */
  max-width: none;
  height: auto;
  transform: translateY(-50%) scaleX(var(--vira));
  /* Fusão ao vinho (lighten + máscara elíptica) gravada no próprio WebP por
     tools/funde_pilares.py: mesmo resultado, sem recompor a cada frame de scroll. */
}
/* Calibragem de peso: envelope e etiqueta são claros e dominam; lupa e caneta, escuras,
   somem. Cada foto ganha a sua escala para as quatro pesarem igual. */
.pilar { --escala: 1; }
/* presos ao objeto, não à posição: a ordem dos pilares pode mudar sem desalinhar as fotos */
.pilar--envelope { --escala: 0.85; }
.pilar--etiqueta { --escala: 0.9; }
.pilar--lupa     { --escala: 1.1; }
.pilar--caneta   { --escala: 1.15; }
/* Com a foto sempre à direita, a pena saía pela borda da tela. Espelhada, ela aponta para o
   texto. --vira é aplicado em todo transform do img, inclusive no celular. */
.pilar { --vira: 1; }
.pilar--caneta { --vira: -1; }

/* Título digitado (08/10/2026, no lugar do contorno que se preenchia com o scroll): o main.js
   (bloco 1d) quebra o título em letras que já ocupam o lugar final, escondidas, e as revela uma a
   uma com um cursor rosé quando o pilar entra na tela. O texto não pula de linha enquanto digita. */
.pilar__titulo {
  position: relative;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.01em;
  color: var(--papel);
}
.digita__letra { visibility: hidden; }
.digita__letra.is-visivel { visibility: visible; }
.digita__cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin: 0 -3px 0 1px;                           /* largura líquida zero: não empurra o texto */
  vertical-align: -0.08em;
  background: var(--rose);
  animation: piscar 1s steps(1) infinite;
}
.digita__cursor.is-fim { opacity: 0; transition: opacity 0.4s var(--ease-out); }
/* No desktop o título pode ir até a coluna 8 (uma além da descrição): o mais longo,
   "Leitura de quem compra, e por quê.", passava 5 px da coluna 7 e quebrava em duas linhas. */
@media (min-width: 1025px) {
  .pilar__titulo { width: calc(7 * var(--coluna) + 6 * var(--gutter)); }
}
.pilar__desc { margin-top: var(--s-2); max-width: 60ch; font-size: var(--t-explica); }

.pilares__fecho { margin-top: var(--s-16); }   /* conteúdo → fecho: 128 */
.pilares__cta { margin-top: var(--s-6); }   /* fecho → CTA: 48 (pedido de 04/10/2026; o hero segue 32) */

@media (max-width: 1024px) {
  .pilar { min-height: 340px; }
  .pilar__corpo { max-width: calc(4 * var(--coluna) + 3 * var(--gutter)); }   /* colunas 2 a 5 de 8 */
  .pilar__foto { min-height: 340px; }
  .pilar__foto img { width: calc(80% * var(--escala)); right: calc(-19.2% * var(--escala)); }
}
@media (max-width: 768px) {
  .pilares__percurso { margin-top: var(--s-6); }
  .pilares__percurso { --recuo: var(--s-3); }  /* uma coluna só: o texto entra 24 px depois da barra */
  .pilar { grid-template-columns: 1fr; min-height: 0; }
  .pilar__corpo {
    grid-column: 1; grid-row: 1; max-width: none;
    padding-inline: calc(var(--gap-lateral) + var(--recuo)) var(--gap-lateral);
    padding-block: var(--s-6) var(--s-3);
  }
  .pilar__foto { grid-column: 1; grid-row: 2; min-height: 300px; height: 300px; }
  /* no celular a sangria comia o objeto: a foto centraliza e aparece inteira */
  .pilar__foto img {
    width: calc(70.4% * var(--escala)); left: 50%; right: auto; transform: translate(-50%, -50%) scaleX(var(--vira));
  }
  .pilares__fecho { margin-top: var(--s-12); }
}

/* ---------- Bloco 5 · Como se mede ----------
   Quatro cards (06/10/2026, a partir do protótipo do Guilherme): retângulo arredondado num tom
   mais escuro que o papel. À esquerda, o nome do indicador em voz 1 e, embaixo, uma ilustração
   animada pelo scroll; à direita, na coluna 7 do card, pergunta e glosa emendadas.
   Os ícones pequenos ao lado do nome saíram. */
.medida {
  --cartao-medida: rgb(236 231 224);              /* tom do protótipo, um degrau abaixo do papel */
  --chumbo: #3b383a;                              /* cor inicial do número, antes de virar verde */
  --verde-alta: #51ae32;                          /* verde exato do protótipo (topo do número) */
  --verde-alta-base: #2f7d1e;                     /* verde mais escuro, base do gradiente do número */
  --t-numero: calc(var(--t-display) * 1.3);       /* +N%: 30% acima do display (≈ 94 px) */
}

.medida__lista { margin-top: var(--s-12); }       /* abertura → conteúdo: 96 */
.medida__linha {
  --pad-y: var(--s-6);                            /* 48 */
  --pad-x: var(--s-8);                            /* 64 */
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--btn-radius);               /* 24, o raio dos cards */
  background: var(--cartao-medida);
  overflow: hidden;                               /* a seta nasce escondida abaixo da borda */
}
.medida__linha + .medida__linha { margin-top: var(--s-3); }   /* 24 entre cards */
.medida__nome  { grid-column: 1 / 6; display: flex; flex-direction: column; }
.medida__texto {
  grid-column: 7 / -1;
  /* a pergunta centra na primeira linha do nome do indicador */
  padding-top: calc((var(--t-hero) * var(--lh-hero) - var(--t-explica) * var(--lh-ui)) / 2);
}
.medida__pergunta,
.medida__glosa    { font-size: var(--t-explica); }
.medida__pergunta { font-weight: 500; color: var(--breu); }
/* itens 1 e 4 (08/10/2026): pergunta e explicação no mesmo parágrafo, sem quebra */
.medida__texto--corrido > p { display: inline; }
.medida__glosa    { font-weight: 400; color: var(--malva); max-width: 46ch; }

.medida__visual { margin-top: var(--s-4); }

/* 1. Busca: barra de pesquisa em pílula, o texto é "digitado" quando entra na tela */
.busca {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 460px;
  height: 64px;
  padding-inline: var(--s-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 80%, var(--malva));   /* cinza quente, no lugar do #D9D9D9 */
  font-size: var(--t-ui);
  line-height: 1;
  color: color-mix(in srgb, var(--breu) 55%, var(--malva));
}
.busca__lupa {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--breu);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.busca__texto { white-space: nowrap; }
.busca__cursor {
  width: 2px;
  height: 1.1em;
  margin-left: calc(2px - var(--s-2));          /* encosta no texto, desfazendo o gap da barra */
  background: currentColor;
  animation: piscar 1s steps(1) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }

/* 2. Convite: seta que emerge de baixo e número que conta subindo, do chumbo ao verde */
.convite {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.convite__seta {
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--t-numero) * 1.4);
  overflow: visible;                              /* a haste desce além da caixa até a borda do card */
  fill: none;
  stroke: var(--breu);
  stroke-width: 6.5;                              /* traço cheio, no peso do número em 700 */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.convite__numero {
  font-size: var(--t-numero);
  line-height: 1;
  font-weight: 700;                             /* peso e espaçamento do wordmark (o wordmark é SVG, */
  letter-spacing: -0.03em;                      /* não fonte; a Fustat 700 é a que mais se parece)   */
  font-variant-numeric: tabular-nums;           /* os dígitos não dançam enquanto contam */
  /* gradiente no texto: verde mais escuro na base, verde do protótipo no topo. As duas cores
     começam em chumbo e o main.js anima as variáveis até os verdes. */
  --g-base: var(--chumbo);
  --g-topo: var(--chumbo);
  background: linear-gradient(to top, var(--g-base), var(--g-topo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3. Margem: duas colunas finas de gráfico, coladas, que sobem da borda de baixo do card.
   Rótulos do lado de fora, na altura do topo de cada coluna: "margem concorrente" à esquerda da
   cinza, "sua margem" à direita da vinho. Cada coluna (barra + rótulo) sobe junto.
   A barra se estende 2000 px abaixo do que aparece (margem negativa cancela no layout) e o card,
   com overflow hidden, corta na borda: a base fica presa ao fundo do retângulo.
   (07/10/2026: um gráfico alto com grade, eixo e rótulos verticais foi testado e revertido.) */
.margem {
  --margem-altura: calc(var(--t-numero) * 1.8);
  --barra: 56px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: var(--margem-altura);
}
.margem__coluna {
  display: flex;
  align-items: flex-start;                        /* rótulo na altura do topo da barra */
  gap: 12px;
}
.margem__rotulo { max-width: 14ch; padding-top: 2px; }   /* com a entreletra da caixa alta, 11ch encostava na barra */
.margem__barra {
  flex: 0 0 auto;
  width: var(--barra);
  height: calc(var(--altura) + 2000px);
  margin-bottom: -2000px;
  border-radius: 8px 8px 0 0;
}
.margem__coluna--concorrente { --altura: calc(var(--margem-altura) * 0.45); }
.margem__coluna--concorrente .margem__rotulo { color: var(--malva); text-align: right; }
.margem__coluna--concorrente .margem__barra { background: color-mix(in srgb, var(--malva) 45%, var(--cartao-medida)); }
.margem__coluna--sua { --altura: var(--margem-altura); }
.margem__coluna--sua .margem__rotulo { color: var(--vinho); white-space: nowrap; }
.margem__coluna--sua .margem__barra { background: var(--vinho); }

/* 4. Recorrência: círculo de três setas cinza-claro, girando. Fica no fim da coluna, no canto
   inferior esquerdo do card, e sai pela borda de baixo e pela esquerda: o card corta, como o
   selo da Seção 3. A área reserva só a parte visível do círculo. */
.ciclo {
  position: relative;
  height: 145px;                                  /* reserva a parte visível do círculo, abaixo do título */
  margin-top: auto;                               /* vai para o fundo do card */
}
.ciclo__setas {
  position: absolute;
  /* 08/10/2026 (reduzido de novo): raio ≈ 100 px, centro a 85 px da borda esquerda e 75 px da
     de baixo; o canto inferior esquerdo passa das bordas (~15 px à esquerda, ~25 embaixo) */
  width: 256px;
  height: 256px;
  left: calc(-1 * var(--pad-x) - 43px);
  bottom: calc(-1 * var(--pad-y) - 53px);
  fill: none;
  stroke: color-mix(in srgb, var(--malva) 35%, var(--cartao-medida));
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Duas pessoas centralizadas DENTRO do círculo (08/10/2026), como um avatar de perfil: recortadas
   pela borda interna do círculo (clip-path), então os ombros terminam curvos. O centro do ícone é o
   centro do círculo (85 px da borda esquerda e 75 px da de baixo); o recorte (82 px) fica por
   dentro das setas (100 px) e das pontas delas. Fica parado; só o círculo gira. */
.ciclo__pessoas {
  position: absolute;
  width: 170px;
  height: auto;
  left: calc(-1 * var(--pad-x));                  /* 85 − 85: centro do ícone no centro do círculo */
  bottom: calc(-1 * var(--pad-y) + 1px);          /* 75 − 74,4 */
  clip-path: circle(82px at 50% 50%);              /* as pontas das setas avançam até ~85 px: não encostam */
  fill: color-mix(in srgb, var(--malva) 35%, var(--cartao-medida));
}
.ciclo__frente {
  fill: #33051e;                                  /* a pessoa da frente em bordô (tom escolhido pelo Guilherme) */
  stroke: var(--cartao-medida);                   /* separa a pessoa da frente da de trás */
  stroke-width: 6;
  paint-order: stroke;
}

.medida__fecho { margin-top: var(--s-16); }      /* conteúdo → fecho: 128 */

@media (max-width: 1024px) {
  /* grade de 8: a Direita (coluna 3) estreitaria demais os nomes; aqui é meio a meio */
  .medida__nome  { grid-column: 1 / 5; }
  .medida__texto { grid-column: 5 / -1; }
  .medida__linha { --pad-x: var(--s-6); }
}
@media (max-width: 768px) {
  .medida__lista { margin-top: var(--s-8); }
  .medida__linha { --pad-y: var(--s-4); --pad-x: var(--s-3); border-radius: 20px; }
  .medida__nome, .medida__texto { grid-column: 1 / -1; }
  .medida__texto { padding-top: 0; margin-top: var(--s-3); }
  /* no celular a ilustração vai para o fim do card (título, texto, ilustração): a haste da
     seta desce até a borda de baixo sem atravessar o texto */
  .medida__nome { display: contents; }
  .medida__rotulo { order: 1; }
  .medida__texto  { order: 2; }
  .medida__visual { order: 3; grid-column: 1 / -1; margin-top: var(--s-4); }
  .busca { height: 52px; }
  .margem, .margem__coluna { gap: 8px; }
  .margem { --barra: 44px; }
  .margem__coluna--sua .margem__rotulo { white-space: normal; max-width: 7ch; }   /* "sua / margem": cabe no card */
  .medida__fecho { margin-top: var(--s-12); }
}
@media (prefers-reduced-motion: reduce) {
  .busca__cursor { animation: none; }
}

/* ---------- Bloco 6 · Contato ----------
   O hero espelhado: gradiente invertido (vinho embaixo do pilares, vinho-claro no fim) e o
   mesmo feixe de luz, para a página terminar onde começou. Abertura corrida à esquerda,
   formulário à direita na coluna 7. Uma ação só. */
.contato {
  isolation: isolate;
  overflow: hidden;
  padding-bottom: var(--s-12);                    /* citação → rodapé: 96 */
  background: linear-gradient(180deg, var(--vinho) 0%, var(--vinho-claro) 100%);
}
.contato__feixe {                                 /* mesmas medidas do feixe do hero */
  position: absolute;
  z-index: 0;
  left: 0; top: 0; bottom: 0;
  width: 64%;
  opacity: 0.52;
  pointer-events: none;
}
.contato__corpo { position: relative; z-index: 1; }

.contato__chamada { grid-column: 1 / 6; }
.contato__form    { grid-column: 7 / -1; }

.contato__canal {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-6);
}
.contato__canal a { min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.contato__canal a:hover { color: var(--rose); }
/* LGPD (08/10/2026): o que fazemos com os dados, à esquerda, abaixo do Instagram. Em caixa normal,
   não em versalete: é frase para ler, não rótulo. */
.contato__privacidade {
  max-width: 34ch;
  margin-top: var(--s-4);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--lilas);
}

/* Campos: sem caixa, só o fio embaixo. O rótulo mora dentro do campo em voz 2 e,
   ao focar ou preencher, sobe e encolhe para 14 px em rosé (porte do Label Input da Spell,
   em CSS puro: placeholder=" " + :placeholder-shown). */
.campo { position: relative; padding-top: var(--s-3); }
.campo + .campo { margin-top: var(--s-3); }
.campo input,
.campo textarea {
  display: block;
  width: 100%;
  padding: var(--s-1) 0 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lilas) 35%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--papel);
  font: 500 var(--t-ui) / var(--lh-ui) var(--ff-sans);
  caret-color: var(--rose);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.campo textarea { resize: none; field-sizing: content; min-height: calc(var(--t-ui) * var(--lh-ui) + 20px); }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--rose);
  box-shadow: 0 1px 0 var(--rose);                /* foco visível: o fio engrossa em rosé */
}
.campo label {
  position: absolute;
  left: 0;
  top: calc(var(--s-3) + var(--s-1));
  color: var(--lilas);
  font: 400 var(--t-ui) / var(--lh-ui) var(--ff-sans);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label,
.campo textarea:not(:placeholder-shown) + label {
  color: var(--rose);
  transform: translateY(calc(-1 * (var(--s-3) + var(--s-1)))) scale(calc(14 / 24));
}
/* autopreenchimento do navegador sem fundo amarelo */
.campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--papel);
  transition: background-color 9999s 0s;
}
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* botão e nota empilhados, com o mesmo respiro em cima e embaixo do botão: 32,
   a regra do sistema entre o que vem antes e o CTA */
.contato__envio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.contato__envio .btn[disabled] { opacity: 0.6; cursor: progress; }
.contato__status:empty { display: none; }
.contato__status { margin-top: var(--s-3); color: var(--lilas); }
.contato__status.is-erro { color: var(--rose); }
/* enviado: o formulário dá lugar à frase de confirmação, em voz 1 */
.contato__form.is-enviado > :not(.contato__status) { display: none; }
.contato__form.is-enviado .contato__status {
  margin-top: 0;
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  font-weight: 500;
  color: var(--papel);
}

/* Fecho: segundo e último momento em Cormorant, no desenho da citação de Quem somos */
.contato__cita { max-width: 640px; margin-top: var(--s-16); }   /* conteúdo → fecho: 128 */

/* Rodapé mínimo: símbolo e ano, no tom em que o gradiente termina */
.rodape { background: var(--vinho-claro); padding-block: var(--s-4); }
.rodape__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rodape__simbolo { display: inline-flex; min-height: 44px; align-items: center; color: var(--rose); }
.rodape__aneis { width: 40px; height: auto; }

@media (max-width: 1024px) {
  .contato__chamada { grid-column: 1 / 5; }
  .contato__form    { grid-column: 5 / -1; }
}
@media (max-width: 768px) {
  .contato__feixe { width: 100%; opacity: 0.8; }
  .contato__chamada, .contato__form { grid-column: 1 / -1; }
  .contato__form { margin-top: var(--s-8); }
  .contato__canal { margin-top: var(--s-4); }
  .contato__cita { margin-top: var(--s-12); }
}

/* Reveal genérico de apoio, itens e fecho (estado inicial; GSAP anima) */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js .espelho__par:nth-child(2).is-in { transition-delay: 0.12s; }
.js .espelho__par:nth-child(3).is-in { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 8. Utilidades ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}