/* =========================================================================
   Viny Drinks · A serra no copo.
   Folha de estilo única. Cores e fontes do Manual de Identidade Visual v1.0.

   Unidades: tudo fluido (%, vw, svh, rem, em, clamp). px só em filetes de 1px.
   Formas: fotos e painéis com cantos retos; botões, chips e interruptores em pílula.
   Camadas (z-index): granulação 90 · cookies 80 · menu 55 · topo 60 · seguidor 50.
   ========================================================================= */

/* ---------- Fontes (auto-hospedadas) ---------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* reservas com métrica ajustada para a troca de fonte não mexer no layout */
@font-face {
  font-family: "Serif Reserva";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 84%;
  ascent-override: 98%;
  descent-override: 26%;
}
@font-face {
  font-family: "Grotesk Reserva";
  src: local("Arial"), local("Helvetica");
  size-adjust: 99%;
  ascent-override: 98%;
  descent-override: 25%;
}

/* ---------- Tokens ---------- */
:root {
  --noite: #0E1A16;
  --pinheiro: #1E3A30;
  --bruma: #F1ECE2;
  --linho: #E3D9C6;
  --ambar: #C8893A;
  --ambar-profundo: #8A5A1F;
  --hibisco: #B23A2E;

  --texto: var(--bruma);
  --texto-suave: color-mix(in oklab, var(--bruma) 72%, var(--noite));
  --filete: color-mix(in oklab, var(--bruma) 11%, transparent);
  --filete-escuro: color-mix(in oklab, var(--noite) 16%, transparent);
  --erro: color-mix(in oklab, var(--hibisco) 50%, var(--bruma));
  /* âmbar clareado só para textos pequenos sobre Pinheiro (contraste 5,7:1) */
  --ambar-claro: color-mix(in oklab, var(--ambar) 72%, var(--bruma));

  --f-titulo: "Instrument Serif", "Serif Reserva", Georgia, serif;
  --f-texto: "Hanken Grotesk", "Grotesk Reserva", Arial, sans-serif;
  --f-dados: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --col-gap: clamp(1rem, 2.2vw, 2.5rem);
  --secao: clamp(6rem, 13vw, 13rem);
  --topo-h: clamp(4.25rem, 5.5vw, 5.25rem);
  --largura-max: 112rem;

  --t-display: clamp(3.75rem, min(13vw, 16.5svh) + 0.5rem, 11.5rem);
  --t-h2: clamp(2.6rem, 5vw + 0.8rem, 6.4rem);
  --t-h3: clamp(1.5rem, 1.6vw + 1rem, 2.4rem);
  --t-grande: clamp(1.1rem, 0.5vw + 0.98rem, 1.4rem);
  --t-corpo: clamp(1rem, 0.25vw + 0.94rem, 1.15rem);
  --t-pequeno: clamp(0.86rem, 0.15vw + 0.82rem, 0.95rem);
  --t-rotulo: clamp(0.7rem, 0.12vw + 0.66rem, 0.78rem);

  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.65, 0, 0.35, 1);
  --mola: linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.6%, 0.415 4.2%, 0.857 7.6%, 1.006 9.2%, 1.093 10.8%, 1.136 12.4%, 1.145 14.1%, 1.122 16.4%, 1.012 22.5%, 0.986 25.4%, 0.976 28.7%, 0.991 36.7%, 1.002 46.4%, 1);
  --pilula: 999em;

  /* multiplicador dos atrasos da abertura (cai na 2ª visita da sessão) */
  --k: 1;
  interpolate-size: allow-keywords;
}
.intro-vista { --k: 0.3; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--noite);
  scroll-padding-top: var(--topo-h);
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* granulação de filme, fixa e sem custo de rolagem */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 10rem;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
::selection { background: var(--ambar); color: var(--noite); }
:focus-visible { outline: 0.125rem solid var(--ambar); outline-offset: 0.25rem; }
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pular {
  position: fixed;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ambar);
  color: var(--noite);
  font-weight: 600;
  border-radius: var(--pilula);
  transform: translateY(-150%);
  transition: transform 0.4s var(--ease-saida);
}
.pular:focus { transform: translateY(1rem); }

/* ---------- Estrutura ---------- */
.moldura {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* ---------- Tipografia comum ---------- */
.rotulo {
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: var(--t-rotulo);
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ambar);
}
.rotulo--escuro { color: var(--ambar-profundo); }

.titulo-secao {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.012em;
  padding-bottom: 0.08em;
  text-wrap: balance;
}
.titulo-secao em { color: var(--ambar); padding-right: 0.04em; }

/* ---------- Fotos ---------- */
.foto {
  position: relative;
  display: block;
  background: var(--cor, var(--pinheiro));
  overflow: hidden;
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Botões e links ---------- */
.botao {
  --bg: transparent;
  --fg: var(--bruma);
  --borda: color-mix(in oklab, var(--bruma) 38%, transparent);
  --preenche: var(--bruma);
  --fg-hover: var(--noite);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 0 1.75em;
  border: 1px solid var(--borda);
  border-radius: var(--pilula);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-texto);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-saida), border-color 0.45s var(--ease-saida), scale 0.2s var(--ease-saida);
}
.botao::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--preenche);
  transform: translateY(102%);
  transition: transform 0.6s var(--ease-saida);
}
.botao__texto {
  display: inline-block;
  text-shadow: 0 3em 0 currentColor;
  transition: transform 0.6s var(--ease-saida);
}
@media (hover: hover) {
  .botao:hover { color: var(--fg-hover); border-color: var(--preenche); }
  .botao:hover::before { transform: translateY(0); }
  .botao:hover .botao__texto { transform: translateY(-3em); }
}
.botao:active { scale: 0.97; }
.botao--ambar {
  --bg: var(--ambar);
  --fg: var(--noite);
  --borda: var(--ambar);
  --preenche: var(--bruma);
}
.botao--pequeno { min-height: 2.85rem; padding: 0 1.35em; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-block: 0.6em;
  font-size: var(--t-pequeno);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--ease-saida), color 0.3s;
}
.link-seta svg { width: 1.1em; height: 1.1em; fill: currentColor; transition: transform 0.5s var(--ease-saida); }
.link-seta:hover { background-size: 100% 1px; }
.link-seta:hover svg { transform: translate(0.12em, 0.12em); }

.link-botao {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

/* =========================================================================
   TOPO
   ========================================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--topo-h);
  transition: transform 0.7s var(--ease-saida);
  view-transition-name: topo;
}
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--noite) 94%, transparent);
  border-bottom: 1px solid var(--filete);
  opacity: 0;
  transition: opacity 0.5s var(--ease-saida);
}
.topo.is-rolado::before, .menu-aberto .topo::before { opacity: 1; }
.topo.is-escondido { transform: translateY(-101%); }
.menu-aberto .topo { transform: none; }

.topo__barra {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.75rem);
}
.topo__logo { margin-right: auto; }
.topo__logo img { width: clamp(8.25rem, 10.5vw, 10.5rem); }

.topo__nav { display: none; }
.topo__nav ul { display: flex; gap: clamp(1.25rem, 2.3vw, 2.6rem); }
.topo__nav a {
  position: relative;
  display: block;
  padding-block: 0.5em;
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: color-mix(in oklab, var(--bruma) 86%, var(--noite));
  transition: color 0.3s;
}
.topo__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2em;
  height: 1px;
  background: var(--ambar);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-saida);
}
.topo__nav a:hover, .topo__nav a.is-atual { color: var(--bruma); }
.topo__nav a:hover::after, .topo__nav a.is-atual::after { transform: scaleX(1); transform-origin: left; }

.topo__cta { display: none; }

.topo__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.85rem;
  padding: 0 1.1rem;
  border: 1px solid color-mix(in oklab, var(--bruma) 30%, transparent);
  border-radius: var(--pilula);
  background: none;
  font-size: var(--t-pequeno);
  font-weight: 600;
}
.topo__menu-linhas { position: relative; width: 1.1rem; height: 0.55rem; }
.topo__menu-linhas span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease-saida), top 0.5s var(--ease-saida);
}
.topo__menu-linhas span:first-child { top: 0; }
.topo__menu-linhas span:last-child { top: 100%; }
.menu-aberto .topo__menu-linhas span { top: 50%; }
.menu-aberto .topo__menu-linhas span:first-child { transform: rotate(45deg); }
.menu-aberto .topo__menu-linhas span:last-child { transform: rotate(-45deg); }

@media (min-width: 40em) {
  .topo__cta { display: inline-flex; }
}
@media (min-width: 64em) {
  .topo__nav { display: block; }
  .topo__menu { display: none; }
}

/* menu do celular */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--topo-h) + 2.5rem) var(--gutter) max(2rem, env(safe-area-inset-bottom));
  background: var(--noite) url("/assets/brand/curvas-pinheiro.svg") center bottom / cover no-repeat;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-saida);
  overflow-y: auto;
}
.menu-movel.is-aberto { clip-path: inset(0 0 0 0); }
.menu-movel__nav li { overflow: hidden; }
.menu-movel__nav a {
  display: block;
  padding-block: 0.12em;
  font-family: var(--f-titulo);
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  line-height: 1.08;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease-saida), color 0.3s;
  transition-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
.menu-movel.is-aberto .menu-movel__nav a { transform: none; }
.menu-movel__nav a:hover { color: var(--ambar); }
.menu-movel__nav li:last-child a { font-style: italic; color: var(--ambar); }
.menu-movel__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-family: var(--f-dados);
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--topo-h) + clamp(1.5rem, 5svh, 4rem));
  padding-bottom: clamp(2.5rem, 7svh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__curvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 6%, #000 34%);
}
.curva {
  fill: none;
  stroke: var(--pinheiro);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.02;
  animation: desenhar 2.6s var(--ease-suave) forwards;
  animation-delay: calc(var(--k) * (0.15s + var(--i) * 0.07s));
}
.curva--ambar { stroke: var(--ambar); opacity: 0.32; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }

.hero__grade { width: 100%; align-items: end; }
.hero__conteudo { grid-column: 1 / -1; position: relative; z-index: 2; }

.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto .foto { position: absolute; inset: 0; }
.hero__foto img {
  object-position: 50% 32%;
  animation: aproximar 2.4s var(--ease-saida) both;
  animation-delay: calc(var(--k) * 0.3s);
}
.hero__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--noite);
  transform-origin: 50% 0;
  animation: cortina 1.4s var(--ease-saida) forwards;
  animation-delay: calc(var(--k) * 0.3s);
}
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--noite) 18%, color-mix(in oklab, var(--noite) 72%, transparent) 55%, color-mix(in oklab, var(--noite) 40%, transparent));
}
@keyframes cortina { to { transform: scaleY(0); } }
@keyframes aproximar { from { transform: scale(1.18); } }

/* símbolo que se desenha */
.taca {
  width: clamp(2.9rem, min(5vw, 8svh), 4.75rem);
  height: auto;
  margin-bottom: clamp(1.25rem, 3.5svh, 2.5rem);
  overflow: visible;
}
.taca__traco {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 4.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.02;
  animation: desenhar 0.85s var(--ease-suave) forwards;
}
.taca__bojo { animation-delay: calc(var(--k) * 0.15s); }
.taca__haste { animation-duration: 0.45s; animation-delay: calc(var(--k) * 0.75s); }
.taca__base { animation-duration: 0.4s; animation-delay: calc(var(--k) * 1s); }
.taca__picos {
  fill: var(--ambar);
  clip-path: inset(100% 0 0 0);
  animation: encher 1.1s var(--ease-saida) forwards;
  animation-delay: calc(var(--k) * 1.05s);
}
.taca__lua {
  fill: var(--ambar);
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  animation: surgir 0.7s var(--mola) forwards;
  animation-delay: calc(var(--k) * 1.65s);
}
@keyframes encher { to { clip-path: inset(0 0 0 0); } }
@keyframes surgir { to { scale: 1; } }

.hero__titulo { display: flex; flex-direction: column; gap: clamp(1rem, 2.6svh, 1.75rem); font-weight: 400; }
.hero__rotulo { display: block; text-wrap: balance; }
.nowrap { white-space: nowrap; }
.hero__display {
  display: block;
  font-family: var(--f-titulo);
  font-size: var(--t-display);
  line-height: 0.9;
  letter-spacing: -0.028em;
  color: var(--bruma);
}
.hero__display em { color: var(--ambar); }

/* linhas que sobem de dentro de uma máscara */
.sobe { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__display .sobe { padding: 0 0.12em 0.2em 0; margin-bottom: -0.2em; }
.sobe > * {
  display: inline-block;
  transform: translateY(112%);
  animation: subir 1.2s var(--ease-saida) forwards;
}
.hero__rotulo .sobe > * { animation-delay: calc(var(--k) * 0.4s); }
.hero__display .sobe:nth-child(1) > * { animation-delay: calc(var(--k) * 0.55s); }
.hero__display .sobe:nth-child(2) > * { animation-delay: calc(var(--k) * 0.7s); }
@keyframes subir { to { transform: translateY(0); } }

.hero__sub {
  max-width: 33ch;
  margin-top: clamp(1.25rem, 3.2svh, 2rem);
  font-size: var(--t-grande);
  line-height: 1.5;
  color: color-mix(in oklab, var(--bruma) 84%, var(--noite));
  animation: aparecer 1.1s var(--ease-saida) both;
  animation-delay: calc(var(--k) * 0.95s);
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 4.2svh, 2.75rem);
  animation: aparecer 1.1s var(--ease-saida) both;
  animation-delay: calc(var(--k) * 1.1s);
}
@keyframes aparecer { from { opacity: 0; transform: translateY(1.25rem); } }

@media (min-width: 64em) {
  .hero { align-items: center; padding-bottom: clamp(2rem, 6svh, 4rem); }
  .hero__sub { max-width: 36ch; }
  .hero__grade { position: relative; align-items: center; }
  .hero__conteudo { grid-column: 1 / span 7; }
  .hero__foto {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-column: 8 / -1;
    height: min(76svh, 58rem);
    margin-top: 2rem;
  }
  .hero__foto::after { display: none; }
}

/* =========================================================================
   FAIXA DE EVENTOS (único letreiro corrido da página)
   ========================================================================= */
.faixa {
  overflow: hidden;
  padding-block: clamp(1.4rem, 2.8vw, 2.4rem);
  border-block: 1px solid var(--filete);
}
.faixa__trilho {
  display: flex;
  width: max-content;
  animation: correr 46s linear infinite;
}
.faixa__grupo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1.5rem, 3.2vw, 3.25rem);
  padding-right: clamp(1.5rem, 3.2vw, 3.25rem);
}
.faixa__grupo span {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: clamp(2.2rem, 5.6vw, 6rem);
  line-height: 1.15;
  white-space: nowrap;
}
.faixa__taca {
  display: block;
  width: clamp(1.5rem, 2.8vw, 2.75rem);
  aspect-ratio: 225 / 232;
  background: url("/assets/brand/simbolo-ambar.svg") center / contain no-repeat;
}
@keyframes correr { to { transform: translateX(-50%); } }

/* =========================================================================
   MANIFESTO
   ========================================================================= */
.manifesto {
  position: relative;
  padding-block: var(--secao) calc(var(--secao) * 1.15);
  overflow: hidden;
  isolation: isolate;
}
.manifesto__serra {
  position: absolute;
  inset: auto 0 0;
  height: 78%;
  z-index: -1;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 50%, #000 72%, transparent);
}
.manifesto__serra .foto { height: 100%; background: none; }
.manifesto__serra img {
  object-position: 50% 62%;
  filter: grayscale(1) contrast(1.25) brightness(0.62);
  mix-blend-mode: luminosity;
}
.manifesto__texto {
  max-width: 21ch;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.35rem, 4.6vw + 0.5rem, 5.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.palavra { transition: none; }

.pilares { margin-top: clamp(5rem, 12vw, 11rem); row-gap: 3.5rem; }
.pilar {
  grid-column: 1 / -1;
  max-width: 30rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--ambar) 50%, transparent);
}
.pilar__titulo {
  margin-bottom: 1rem;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.5rem, 3.8vw + 0.5rem, 4.6rem);
  line-height: 1;
}
.pilar p { color: var(--texto-suave); }
@media (min-width: 48em) {
  .pilar:nth-child(1) { grid-column: 1 / span 7; }
  .pilar:nth-child(2) { grid-column: 4 / span 7; }
  .pilar:nth-child(3) { grid-column: 7 / span 6; }
}
/* em telas largas os pilares desenham os Três Picos: o do meio é o mais alto */
@media (min-width: 64em) {
  .pilares { row-gap: 0; align-items: start; }
  .pilar:nth-child(1) { grid-column: 1 / span 4; margin-top: 5.6rem; }
  .pilar:nth-child(2) { grid-column: 5 / span 4; }
  .pilar:nth-child(3) { grid-column: 9 / span 4; margin-top: 4.5rem; }
}

/* =========================================================================
   SERVIÇOS
   ========================================================================= */
.servicos { padding-block: calc(var(--secao) * 0.6) var(--secao); }
.servicos__pista {
  display: grid;
  gap: clamp(3.5rem, 8vw, 5rem) var(--col-gap);
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.servicos__intro p {
  max-width: 38ch;
  margin-top: 1.5rem;
  font-size: var(--t-grande);
  color: var(--texto-suave);
}
.servicos__progresso { display: none; }
.servico__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.servico__foto .foto { height: 100%; }
.servico__texto { padding-top: 1.6rem; }
.servico__icone { width: 1.9rem; height: 1.9rem; margin-bottom: 1rem; }
.servico h3 {
  margin-bottom: 0.75rem;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.08;
  text-wrap: balance;
}
.servico p { max-width: 40ch; color: var(--texto-suave); }

@media (min-width: 40em) {
  .servicos__pista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicos__intro { grid-column: 1 / -1; }
  .servico:nth-of-type(even) { margin-top: 12%; }
}

/* versão com rolagem horizontal fixada (o JS liga em telas largas) */
@media (min-width: 64em) {
  .servicos.is-horizontal { height: 100svh; padding: 0; overflow: hidden; }
  .is-horizontal .servicos__pista {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 3.6vw, 4.5rem);
    width: max-content;
    max-width: none;
    height: 100%;
    margin: 0;
    padding-top: var(--topo-h);
    padding-right: 12vw;
  }
  .is-horizontal .servicos__intro { flex-shrink: 0; width: clamp(24rem, 36vw, 38rem); padding-right: 3vw; }
  .is-horizontal .servico { flex-shrink: 0; width: clamp(18rem, 24vw, 29rem); margin-top: 0; }
  .is-horizontal .servico:nth-of-type(even) { align-self: flex-end; margin-bottom: 9svh; }
  .is-horizontal .servico:nth-of-type(odd) { align-self: flex-start; margin-top: calc(var(--topo-h) + 4svh); }
  .is-horizontal .servico__foto { aspect-ratio: auto; height: min(46svh, 32vw); }
  .is-horizontal .servicos__progresso {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: 1px;
    margin-top: 3rem;
    background: var(--filete);
  }
  .is-horizontal .servicos__progresso span {
    display: block;
    height: 100%;
    background: var(--ambar);
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* =========================================================================
   CARTA DA CASA (seção clara, entra pelo cume da serra)
   ========================================================================= */
.carta {
  position: relative;
  margin-block: clamp(3rem, 7vw, 7rem) 0;
  padding-block: calc(var(--secao) * 0.75) calc(var(--secao) + 3rem);
  background: var(--bruma);
  color: var(--noite);
}
.cume {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(2.5rem, 6vw, 6.5rem);
  pointer-events: none;
}
.cume--topo { bottom: calc(100% - 1px); fill: var(--bruma); }
.cume--base { bottom: -1px; fill: var(--noite); }

.carta__grade { row-gap: 3.5rem; }
.carta__cabeca { grid-column: 1 / -1; }
.carta__cabeca .titulo-secao { margin-top: 1.25rem; }
.carta .titulo-secao em { color: var(--ambar-profundo); }
.carta__regra {
  max-width: 36ch;
  margin-top: 1.75rem;
  font-size: var(--t-grande);
  color: color-mix(in oklab, var(--noite) 80%, var(--bruma));
}
.carta__nota {
  max-width: 40ch;
  margin-top: 1.25rem;
  font-size: var(--t-pequeno);
  color: color-mix(in oklab, var(--noite) 70%, var(--bruma));
}
.drinks { grid-column: 1 / -1; }
.drink {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 24vw, 9rem);
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--filete-escuro);
}
.drink__texto { transition: opacity 0.5s var(--ease-saida); }
.drink__nome {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.3vw + 0.5rem, 4.1rem);
  line-height: 1.02;
  padding-bottom: 0.06em;
  transition: transform 0.7s var(--ease-saida);
}
.drink__nome em { color: var(--ambar-profundo); }
.drink__ingredientes { margin-top: 0.45rem; color: color-mix(in oklab, var(--noite) 80%, var(--bruma)); }
.drink__ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  margin-top: 0.4rem;
  font-family: var(--f-dados);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--noite) 70%, var(--bruma));
}
.selo-hibisco {
  font-family: var(--f-texto);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hibisco);
}
.drink__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.drink__foto .foto { height: 100%; }

.carta__seguidor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: clamp(12rem, 15vw, 17rem);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.4s var(--ease-saida), scale 0.7s var(--ease-saida);
  display: none;
}
.carta__seguidor.is-visivel { opacity: 1; scale: 1; }
.carta__seguidor .foto {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s var(--ease-saida);
}
.carta__seguidor .foto img { scale: 1.15; transition: scale 1.2s var(--ease-saida); }
.carta__seguidor .foto.is-ativa { z-index: 2; clip-path: inset(0 0 0 0); }
.carta__seguidor .foto.is-ativa img { scale: 1; }

@media (min-width: 64em) {
  .carta__cabeca { grid-column: 1 / span 5; position: sticky; top: calc(var(--topo-h) + 3rem); align-self: start; }
  .drinks { grid-column: 7 / -1; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 64em) {
  .carta__seguidor { display: block; }
  .drink { grid-template-columns: minmax(0, 1fr); cursor: default; }
  .drink__foto { display: none; }
  .drinks:hover .drink:not(:hover) .drink__texto { opacity: 0.38; }
  .drink:hover .drink__nome { transform: translateX(1.5rem); }
}

/* =========================================================================
   COMO FUNCIONA
   ========================================================================= */
.processo { padding-block: var(--secao); }
.processo__cabeca { grid-column: 1 / -1; margin-bottom: 4rem; }
.processo__cabeca p { max-width: 32ch; margin-top: 1.5rem; font-size: var(--t-grande); color: var(--texto-suave); }
.passos {
  --recuo: clamp(3.25rem, 7vw, 5.5rem);
  position: relative;
  grid-column: 1 / -1;
  padding-left: var(--recuo);
}
.passos__linha {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: calc(var(--recuo) / 2);
  width: 1px;
  background: var(--filete);
}
.passos__linha span {
  position: absolute;
  inset: 0;
  background: var(--ambar);
  transform: scaleY(0);
  transform-origin: top;
}
.passo { position: relative; padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.passo:last-child { padding-bottom: 0; }
.passo__num {
  position: absolute;
  top: 0.4rem;
  left: calc(var(--recuo) * -1);
  width: var(--recuo);
  padding-block: 0.35rem;
  background: var(--noite);
  font-family: var(--f-dados);
  font-size: 0.82rem;
  text-align: center;
  color: var(--texto-suave);
  transition: color 0.5s;
}
.passo.is-ativo .passo__num { color: var(--ambar); }
.passo h3 {
  margin-bottom: 1rem;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.1rem, 3vw + 0.6rem, 3.8rem);
  line-height: 1;
}
.passo p { max-width: 44ch; color: var(--texto-suave); }
@media (min-width: 64em) {
  .processo__cabeca { grid-column: 1 / span 5; position: sticky; top: calc(var(--topo-h) + 3rem); align-self: start; margin: 0; }
  .passos { grid-column: 7 / -1; }
}

/* =========================================================================
   SOBRE
   ========================================================================= */
.sobre { padding-block: calc(var(--secao) * 0.5) var(--secao); }
.sobre__grade { row-gap: 3.5rem; align-items: center; }
.sobre__fotos { position: relative; grid-column: 1 / -1; padding-bottom: 14%; }
.sobre__foto-grande { width: 88%; aspect-ratio: 3 / 2; overflow: hidden; }
.sobre__foto-grande .foto { height: 100%; }
.sobre__foto-pequena {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  outline: clamp(0.4rem, 0.9vw, 0.85rem) solid var(--noite);
}
.sobre__foto-pequena .foto { height: 100%; }
.sobre__texto { grid-column: 1 / -1; }
.sobre__papel {
  margin-block: 0.6rem 1.6rem;
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--ambar);
}
.sobre__texto > p:not(.sobre__papel) { max-width: 46ch; color: var(--texto-suave); }
.resumo { margin-top: 2.5rem; border-top: 1px solid var(--filete); }
.resumo div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 28%) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--filete);
}
.resumo dt {
  padding-top: 0.2rem;
  font-family: var(--f-dados);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ambar);
}
.resumo dd { font-size: var(--t-pequeno); }
.resumo a { text-decoration: underline; text-underline-offset: 0.25em; }
@media (min-width: 64em) {
  .sobre__fotos { grid-column: 1 / span 7; }
  .sobre__texto { grid-column: 9 / -1; }
}

/* =========================================================================
   BASTIDORES
   ========================================================================= */
.bastidores { padding-block: calc(var(--secao) * 0.6) calc(var(--secao) * 0.5); overflow: clip; }
.bastidores__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.mosaico { columns: 2; column-gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.mosaico__coluna { display: contents; }
.mosaico .foto {
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem);
  aspect-ratio: var(--proporcao);
}
.mosaico .foto img { transition: scale 1.2s var(--ease-saida); }
.mosaico .foto:hover img { scale: 1.05; }
@media (min-width: 48em) {
  .mosaico {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
    align-items: start;
  }
  .mosaico__coluna { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
  .mosaico .foto { margin: 0; }
  .mosaico__coluna[data-coluna="1"] { margin-top: 14%; }
  .mosaico__coluna[data-coluna="2"] { margin-top: 5%; }
}

/* =========================================================================
   DÚVIDAS
   ========================================================================= */
.duvidas { padding-block: calc(var(--secao) * 0.6) var(--secao); }
.duvidas__cabeca { grid-column: 1 / -1; margin-bottom: 2.5rem; }
.duvidas__cabeca p { margin-top: 1.25rem; color: var(--texto-suave); }
.duvidas__cabeca a { color: var(--ambar); text-decoration: underline; text-underline-offset: 0.25em; }
.duvidas__lista { grid-column: 1 / -1; border-top: 1px solid var(--filete); }
.pergunta { border-bottom: 1px solid var(--filete); }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.3rem, 2.4vw, 1.9rem);
  font-family: var(--f-titulo);
  font-size: clamp(1.45rem, 1.4vw + 1rem, 2.25rem);
  line-height: 1.15;
  list-style: none;
  cursor: pointer;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary span { transition: color 0.3s; }
.pergunta summary:hover span { color: var(--ambar); }
.pergunta__icone {
  position: relative;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid color-mix(in oklab, var(--bruma) 26%, transparent);
  border-radius: 50%;
  transition: background-color 0.4s, border-color 0.4s;
}
.pergunta__icone::before, .pergunta__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  height: 1px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate 0.6s var(--ease-saida), background-color 0.4s;
}
.pergunta__icone::after { rotate: 90deg; }
.pergunta[open] .pergunta__icone { background: var(--ambar); border-color: var(--ambar); }
.pergunta[open] .pergunta__icone::before, .pergunta[open] .pergunta__icone::after { background: var(--noite); rotate: 180deg; }
.pergunta__resposta { padding-bottom: 1.9rem; }
.pergunta__resposta p { max-width: 58ch; color: var(--texto-suave); }
.pergunta::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.6s var(--ease-saida), content-visibility 0.6s allow-discrete;
}
.pergunta[open]::details-content { block-size: auto; }
@media (min-width: 64em) {
  .duvidas__cabeca { grid-column: 1 / span 4; position: sticky; top: calc(var(--topo-h) + 3rem); align-self: start; margin: 0; }
  .duvidas__lista { grid-column: 6 / -1; }
}

/* =========================================================================
   ORÇAMENTO
   ========================================================================= */
.orcamento {
  position: relative;
  padding-block: var(--secao);
  background: var(--pinheiro);
  isolation: isolate;
  overflow: hidden;
}
.orcamento::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/brand/curvas-ambar.svg") center bottom / cover no-repeat;
  opacity: 0.13;
}
.orcamento__cabeca { grid-column: 1 / -1; margin-bottom: 3.5rem; }
.orcamento .rotulo { color: var(--ambar-claro); }
.orcamento__cabeca .titulo-secao { margin-top: 1.25rem; }
.orcamento__cabeca > p:not(.rotulo) {
  max-width: 34ch;
  margin-top: 1.5rem;
  font-size: var(--t-grande);
  color: color-mix(in oklab, var(--bruma) 80%, var(--pinheiro));
}
.orcamento__contatos { display: grid; gap: 0.9rem; margin-top: 2.5rem; }
.orcamento__contatos a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--f-dados);
  font-size: 0.95rem;
  transition: color 0.3s;
}
.orcamento__contatos a:hover { color: var(--ambar); }
.orcamento__contatos svg { width: 1.45rem; height: 1.45rem; fill: var(--ambar); }

.formulario {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem var(--col-gap);
}
.campo {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0;
  border: 0;
}
.campo--meio { grid-column: span 2; }
.campo label, .campo legend {
  padding: 0;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--bruma);
}
.campo legend { margin-bottom: 0.9rem; }
.campo__opcional { font-weight: 400; color: color-mix(in oklab, var(--bruma) 70%, var(--pinheiro)); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--bruma) 40%, transparent);
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
  color: var(--bruma);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--ambar);
  box-shadow: 0 1px 0 0 var(--ambar);
}
.campo input[type="date"] { color-scheme: dark; min-height: 3.1rem; }
.campo select {
  appearance: none;
  padding-right: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23C8893A'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") right center / 1.1rem no-repeat;
}
.campo select option { background: var(--pinheiro); color: var(--bruma); }
.campo textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.campo__erro { font-size: var(--t-pequeno); color: var(--erro); }
.campo.tem-erro input { border-bottom-color: var(--erro); }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid color-mix(in oklab, var(--bruma) 30%, transparent);
  border-radius: var(--pilula);
  font-size: var(--t-pequeno);
  font-weight: 500;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
}
.chip:hover span { border-color: var(--ambar); }
.chip input:checked + span { background: var(--ambar); border-color: var(--ambar); color: var(--noite); }
.chip input:focus-visible + span { outline: 0.125rem solid var(--ambar); outline-offset: 0.2rem; }

.formulario__envio {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 0.5rem;
}
.formulario__aviso { max-width: 34ch; font-size: var(--t-pequeno); color: color-mix(in oklab, var(--bruma) 74%, var(--pinheiro)); }

@media (min-width: 30em) {
  .campo--meio { grid-column: span 1; }
}
@media (min-width: 64em) {
  .orcamento__cabeca { grid-column: 1 / span 5; margin: 0; }
  .formulario { grid-column: 7 / -1; }
}

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape { position: relative; padding-top: clamp(5.5rem, 10vw, 9rem); overflow: hidden; }
.rodape__serra {
  position: absolute;
  top: clamp(1rem, 2vw, 2rem);
  left: 50%;
  width: max(100%, 56rem);
  height: auto;
  translate: -50% 0;
  overflow: visible;
}
.rodape__serra polyline {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.rodape__grade { position: relative; row-gap: 2.75rem; padding-block: 2rem clamp(4rem, 8vw, 7rem); }
.rodape__marca { grid-column: 1 / -1; }
.rodape__marca img { width: clamp(8.5rem, 12vw, 11.5rem); }
.rodape__slogan { margin-top: 1.5rem; font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.1; }
.rodape__slogan em { color: var(--ambar); }
.rodape__col { grid-column: span 6; }
.rodape__titulo {
  margin-bottom: 1.1rem;
  font-family: var(--f-dados);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ambar);
}
.rodape__col li { margin-bottom: 0.65rem; font-size: var(--t-pequeno); color: var(--texto-suave); }
.rodape__col a, .rodape__col .link-botao { transition: color 0.3s; }
.rodape__col a:hover, .rodape__col .link-botao:hover { color: var(--bruma); }
.rodape__col .link-botao { text-decoration: none; color: inherit; font-size: inherit; }
.rodape__selo {
  position: absolute;
  top: 1.5rem;
  right: var(--gutter);
  width: clamp(5.5rem, 10vw, 9.5rem);
  height: auto;
}
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  padding-block: 1.75rem max(2.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--filete);
  font-size: 0.82rem;
  color: var(--texto-suave);
}
.credito { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--bruma); }
.credito img { width: auto; height: 1.85rem; transition: rotate 0.8s var(--mola), scale 0.8s var(--mola); }
.credito__nome { font-weight: 600; transition: color 0.3s; }
.credito:hover img { rotate: -10deg; scale: 1.12; }
.credito:hover .credito__nome { color: var(--ambar); }
@media (min-width: 48em) {
  .rodape__col { grid-column: span 4; }
}
@media (min-width: 64em) {
  .rodape__marca { grid-column: 1 / span 4; }
  .rodape__col { grid-column: span 2; }
  .rodape__col:first-of-type { grid-column: 5 / span 2; }
  .rodape__selo { position: static; grid-column: 11 / -1; justify-self: end; align-self: start; }
}

/* =========================================================================
   COOKIES
   ========================================================================= */
.cookies {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  max-width: 30rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--pinheiro);
  color: var(--bruma);
  border: 1px solid color-mix(in oklab, var(--ambar) 32%, transparent);
  box-shadow: 0 1.75rem 4.5rem -1rem color-mix(in oklab, var(--noite) 85%, transparent);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 1s var(--mola), opacity 0.45s var(--ease-saida);
}
.cookies.is-visivel { transform: none; opacity: 1; }
.cookies.is-saindo { transform: translateY(calc(100% + 2rem)) rotate(-2deg); opacity: 0; transition-duration: 0.7s, 0.5s; transition-timing-function: var(--ease-suave), var(--ease-saida); }
@media (max-width: 39.99em) {
  .cookies { left: 0.75rem; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); padding: 1rem 1.1rem 1.1rem; }
  .cookies__topo { gap: 0.85rem; }
  .cookies__emblema { width: 2.3rem; }
  .cookies__titulo { font-size: 1.3rem; }
  .cookies__texto { font-size: 0.8rem; line-height: 1.5; }
  .cookies__acoes { margin-top: 0.9rem; }
  .cookies__acoes .botao { min-height: 2.6rem; }
  .cookies__personalizar { margin-top: 0.1rem; font-size: 0.8rem; }
}
@media (min-width: 40em) {
  .cookies { left: auto; right: var(--gutter); width: min(30rem, calc(100% - 2 * var(--gutter))); }
}
.cookies__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.cookies__emblema { width: 3.1rem; }
.cookies__taca { width: 100%; height: auto; overflow: visible; }
.cookies__taca path {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cookies__liquido {
  --vazio: 100%;
  fill: var(--ambar);
  clip-path: inset(var(--vazio) 0 0 0);
  transition: clip-path 1.2s var(--ease-saida);
}
.cookies__lua { fill: var(--ambar); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 0.7s var(--mola); }
.cookies.is-visivel .cookies__liquido { --vazio: 64%; transition-delay: 0.5s; }
.cookies.is-aceito .cookies__liquido { --vazio: 0%; transition-delay: 0s; }
.cookies.is-aceito .cookies__lua { scale: 1; transition-delay: 0.45s; }
.cookies.is-recusado .cookies__liquido { --vazio: 100%; transition-delay: 0s; }
.cookies__titulo { font-family: var(--f-titulo); font-size: clamp(1.45rem, 1.1vw + 1rem, 1.8rem); line-height: 1.1; }
.cookies__texto { margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.55; color: color-mix(in oklab, var(--bruma) 80%, var(--pinheiro)); }
.cookies__texto a { color: var(--ambar-claro); text-decoration: underline; text-underline-offset: 0.2em; }
.cookies__painel { margin-top: 1.25rem; border-top: 1px solid var(--filete); }
.cookies__opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--filete);
}
.cookies__opcao-nome { font-size: 0.9rem; font-weight: 600; }
.cookies__opcao-desc { margin-top: 0.15rem; font-size: 0.8rem; line-height: 1.45; color: color-mix(in oklab, var(--bruma) 76%, var(--pinheiro)); }
.cookies__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.25rem; }
.cookies__acoes .botao { flex: 1 1 7rem; }
.cookies__personalizar { flex-basis: 100%; margin-top: 0.3rem; text-align: center; font-size: 0.86rem; color: color-mix(in oklab, var(--bruma) 82%, var(--pinheiro)); }
.cookies__personalizar:hover { color: var(--bruma); }

.interruptor {
  position: relative;
  flex-shrink: 0;
  width: 2.9rem;
  height: 1.65rem;
  padding: 0;
  border: 0;
  border-radius: var(--pilula);
  background: color-mix(in oklab, var(--bruma) 20%, transparent);
  transition: background-color 0.35s;
}
.interruptor span {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  width: 1.21rem;
  height: 1.21rem;
  border-radius: 50%;
  background: var(--bruma);
  transition: translate 0.6s var(--mola);
}
.interruptor[aria-checked="true"], .interruptor--fixo { background: var(--ambar); }
.interruptor[aria-checked="true"] span, .interruptor--fixo span { translate: 1.25rem 0; }
.interruptor--fixo { display: inline-block; opacity: 0.55; }

/* =========================================================================
   PÁGINAS DE TEXTO (política) e 404
   ========================================================================= */
.legal { padding-block: calc(var(--topo-h) + clamp(3rem, 8vw, 7rem)) var(--secao); }
.legal__cabeca { grid-column: 1 / -1; margin-bottom: clamp(3rem, 6vw, 5rem); }
.legal__cabeca h1 {
  margin-top: 1.25rem;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(3rem, 7vw + 0.5rem, 7.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.legal__cabeca h1 em { color: var(--ambar); }
.legal__data { margin-top: 1.5rem; font-family: var(--f-dados); font-size: 0.82rem; color: var(--texto-suave); }
.legal__indice { grid-column: 1 / -1; margin-bottom: 3rem; }
.legal__indice p { margin-bottom: 1rem; font-family: var(--f-dados); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar); }
.legal__indice li { margin-bottom: 0.5rem; }
.legal__indice a { font-size: var(--t-pequeno); color: var(--texto-suave); transition: color 0.3s; }
.legal__indice a:hover { color: var(--bruma); }
.legal__corpo { grid-column: 1 / -1; max-width: 70ch; }
.legal__corpo h2 {
  margin: 3.5rem 0 1.25rem;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.2vw + 1rem, 2.9rem);
  line-height: 1.1;
  scroll-margin-top: calc(var(--topo-h) + 1.5rem);
}
.legal__corpo h2:first-child { margin-top: 0; }
.legal__corpo h3 { margin: 2rem 0 0.75rem; font-size: var(--t-corpo); font-weight: 700; }
.legal__corpo p, .legal__corpo li { margin-bottom: 1rem; color: color-mix(in oklab, var(--bruma) 84%, var(--noite)); }
.legal__corpo ul li { position: relative; padding-left: 1.4rem; }
.legal__corpo ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 1px; background: var(--ambar); }
.legal__corpo a { color: var(--ambar); text-decoration: underline; text-underline-offset: 0.22em; }
.legal__corpo strong { color: var(--bruma); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; margin-block: 1.25rem 2rem; }
.tabela { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-pequeno); }
.tabela th, .tabela td { padding: 0.85rem 1rem 0.85rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filete); }
.tabela th { font-family: var(--f-dados); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ambar); }
.tabela td { color: color-mix(in oklab, var(--bruma) 84%, var(--noite)); }
.tabela code { font-family: var(--f-dados); font-size: 0.85em; color: var(--bruma); }
@media (min-width: 64em) {
  .legal__indice { grid-column: 1 / span 3; position: sticky; top: calc(var(--topo-h) + 2rem); align-self: start; margin: 0; }
  .legal__corpo { grid-column: 5 / -1; }
}

.erro404 {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--topo-h) + 3rem) 4rem;
  isolation: isolate;
}
.erro404::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/brand/curvas-pinheiro.svg") center bottom / cover no-repeat;
}
.erro404 h1 {
  max-width: 14ch;
  margin-top: 1.5rem;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(3rem, 7.5vw + 0.5rem, 8rem);
  line-height: 0.98;
}
.erro404 h1 em { color: var(--ambar); }
.erro404 p:not(.rotulo) { max-width: 38ch; margin-block: 1.75rem 2.5rem; font-size: var(--t-grande); color: var(--texto-suave); }

/* =========================================================================
   TRANSIÇÃO ENTRE PÁGINAS
   ========================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.45s var(--ease-suave) both vt-sai; }
::view-transition-new(root) { animation: 0.7s var(--ease-saida) both vt-entra; }
@keyframes vt-sai { to { opacity: 0; transform: translateY(-1.5rem); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(2rem); } }

/* =========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .faixa__trilho { animation: none; flex-wrap: wrap; width: auto; }
  .faixa__grupo + .faixa__grupo { display: none; }
  .faixa__grupo { flex-wrap: wrap; padding-inline: var(--gutter); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}