/* Café BoaFonte · LP */
:root {
  --creme: #F2E9DC;
  --creme-2: #E8DAC5;
  --cafe: #1B1310;
  --cafe-2: #3A2A22;
  --cafe-suave: #6B5A4E;
  --musgo: #7E8A55;
  --cereja: #D7282F;
  --whats: #1F8F4E;

  /* cores das embalagens */
  --especial: #B5141C;
  --tradicional: #1A1614;
  --gourmet: #2F6A35;
  --extraforte: #C2601E;
  --drip: #4C7A4F;

  /* capítulos */
  --cap-0: #251712;
  --cap-1: #663B29;
  --cap-2: #AE6543;
  --cap-3: #E4AE7E;

  --display: "Inter Tight", "Helvetica Neue", sans-serif;
  --fundo: "Inter Tight", "Helvetica Neue", sans-serif;
  --acento: #B4652F;
  --caixa: none;
  --peso: 800;
  --escala: .78;
  --tracking: -.045em;
  --sans: "Montserrat", system-ui, sans-serif;

  --raio: 22px;
  --borda: max(16px, 4vw);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--cafe);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

.pular {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--cafe); color: var(--creme); padding: 8px 14px; border-radius: 99px;
}
.pular:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.sobretitulo {
  font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  opacity: .75;
}

/* BOTÕES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 99px;
  border: 1.5px solid transparent;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-escuro { background: var(--cafe); color: var(--creme); }
.btn-escuro:hover { background: var(--cafe-2); }
.btn-linha { border-color: currentColor; background: transparent; }
.btn-linha:hover { background: var(--cafe); color: var(--creme); border-color: var(--cafe); }
.btn-claro { background: var(--creme); color: var(--cafe); }
.btn-linha-claro { border-color: var(--creme); color: var(--creme); background: transparent; }
.btn-whats { background: var(--whats); color: #fff; width: 100%; }
.btn-whats:hover:not(:disabled) { background: #187a41; }

.contador {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 99px; background: var(--acento); color: #fff;
  font-size: 11px; letter-spacing: 0;
}

/* TOPO */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--borda);
  transition: background .4s, box-shadow .4s, padding .4s;
}
.topo.rolado {
  background: rgba(242, 233, 220, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(27, 19, 16, .08);
  padding-block: 10px;
}
.topo:not(.rolado) { color: var(--tinta-topo, var(--cafe)); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: 44px; height: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto small { font-weight: 300; font-size: 11px; letter-spacing: .14em; }
.marca-texto strong { font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.menu { display: flex; gap: 30px; }
.menu a {
  font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .04em;
  position: relative;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.btn-pedido-topo { min-height: 42px; padding: 0 18px; }

/* PALAVRA GIGANTE DE FUNDO */
.palavra-fundo {
  position: absolute; pointer-events: none; user-select: none;
  font-family: var(--fundo); font-weight: 800;
  line-height: .8; white-space: nowrap; letter-spacing: -.06em;
}

/* ABERTURA (rodízio dos pacotes) */
.abertura {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(260px, 30vw) minmax(240px, .72fr);
  grid-template-areas: "texto pacote info" "pontos pontos pontos";
  grid-template-rows: 1fr auto;
  align-items: center; gap: 2vw 4vw;
  padding: 120px var(--borda) 90px;
  background: #8E1016; color: var(--creme);
}
.abertura-palavra {
  left: 50%; top: 50%; transform: translate(-50%, -54%);
  font-size: clamp(130px, 22vw, 380px);
  color: var(--creme); opacity: .1; z-index: 0;
}
.abertura-texto { grid-area: texto; position: relative; z-index: 2; max-width: 560px; }
.abertura-titulo {
  margin: 18px 0 30px;
  font-family: var(--display); text-transform: var(--caixa); font-weight: var(--peso); letter-spacing: var(--tracking);
  font-size: calc(clamp(56px, 8vw, 128px) * var(--escala)); line-height: .92;
}
.vazado { color: transparent; -webkit-text-stroke: 1.5px var(--creme); }
.linha-mask { display: block; overflow: hidden; padding: .12em 0 .04em; margin-top: -.12em; }
.linha-mask > span { display: inline-block; }
.destaque { color: var(--acento); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.abertura .hero-acoes { margin-top: 0; }

.abertura-pacotes { grid-area: pacote; position: relative; z-index: 1; height: min(70vh, 660px); }
.abertura-pacotes::before {
  content: ""; position: absolute; inset: 8% -30%;
  background: radial-gradient(closest-side, rgba(255, 244, 228, .22), transparent);
}
.ab-flutua { position: absolute; inset: 0; animation: flutua 5s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-14px); } }
.ab-pacote {
  position: absolute; inset: 0; margin: auto;
  height: 100%; width: auto; max-width: 120%; object-fit: contain;
  filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .38));
  opacity: 0; will-change: transform;
}
.ab-pacote.ativo { opacity: 1; }

.abertura-info { grid-area: info; position: relative; z-index: 2; max-width: 340px; justify-self: end; }
.ab-num { font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.ab-num span { opacity: .5; }
.ab-nome {
  margin: 10px 0 12px;
  font-family: var(--display); text-transform: var(--caixa); font-weight: var(--peso); letter-spacing: var(--tracking);
  font-size: calc(clamp(44px, 4.4vw, 72px) * var(--escala)); line-height: .95;
}
.ab-frase { font-size: 16px; opacity: .85; }
.abertura-info .fichas { margin: 18px 0 24px; }
.abertura-info .fichas li { background: rgba(255, 244, 228, .14); color: var(--creme); }

.abertura-pontos { grid-area: pontos; position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.abertura-pontos button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 99px;
  border: 1px solid rgba(255, 244, 228, .25); background: transparent; color: var(--creme);
  font: 600 12px/1 var(--sans); letter-spacing: .04em; cursor: pointer;
  transition: background .3s, border-color .3s;
}
.abertura-pontos button::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--cor); box-shadow: 0 0 0 2px rgba(255, 244, 228, .7);
}
.abertura-pontos button[aria-pressed="true"] { background: rgba(255, 244, 228, .16); border-color: var(--creme); }
.abertura .rolar { bottom: 14px; right: var(--borda); left: auto; transform: none; }

.rolar {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .6;
}
.rolar i { width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: rolar 2s var(--ease) infinite; }
@keyframes rolar { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* HISTÓRIA (capítulos fixos no scroll) */
.historia { position: relative; background: var(--cap-0); color: var(--creme); }
.palco {
  position: relative; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.15fr; align-items: center;
  gap: 4vw; padding: 90px var(--borda) 60px;
}
.historia-palavra {
  inset: auto 0 6vh 0; height: clamp(150px, 26vw, 440px);
  font-size: clamp(150px, 26vw, 440px); color: var(--creme); opacity: .1;
}
.historia-palavra span { position: absolute; left: 50%; transform: translateX(-50%); }
.cap-textos { position: relative; z-index: 3; height: 360px; }
.cap-texto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: 420px; }
.cap-titulo { font-family: var(--display); font-weight: var(--peso); text-transform: var(--caixa); letter-spacing: var(--tracking); font-size: calc(clamp(72px, 10vw, 160px) * var(--escala)); line-height: .85; }
.cap-texto p:not(.sobretitulo) { font-size: 17px; opacity: .88; }
.cap-texto .btn { align-self: flex-start; margin-top: 8px; }
.cap-texto[data-cap="2"] .btn { background: var(--cafe); color: var(--creme); }

.cap-midia { position: relative; z-index: 2; height: min(74svh, 720px); }
.cap-foto {
  position: absolute; inset: 0; margin: 0 auto; width: min(100%, 520px);
  border-radius: 999px 999px var(--raio) var(--raio); overflow: hidden;
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .55);
}
.cap-foto img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; }

.cap-canvas {
  position: absolute; inset: 0; margin: 0 auto; width: min(100%, 520px); height: 100%;
  border-radius: 999px 999px var(--raio) var(--raio);
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .6s;
}
.com-video .cap-canvas { opacity: 1; }
.com-video .cap-foto { visibility: hidden; }
@media (max-width: 960px) { .cap-canvas { width: min(80%, 380px); } }
/* com vídeo (modelo POUR/PLAY): sem moldura, o objeto fica solto na página.
   O canvas ocupa a altura toda do palco e as bordas somem no fundo, que o JS pinta com a cor do próprio vídeo. */
.com-video .cap-canvas {
  --alt: 100svh;
  top: calc(50% - var(--alt) / 2); left: 50%; height: var(--alt); width: calc(var(--alt) * 9 / 16);
  margin: 0 0 0 calc(var(--alt) * -9 / 32);
  border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
@media (max-width: 960px) { .com-video .cap-canvas { --alt: 122cqh; } }
.cards-flutuantes { position: absolute; inset: 0; margin: 0 auto; width: min(100%, 520px); pointer-events: none; }
.card-flut {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 126px; padding: 14px 12px 12px; border-radius: 18px;
  background: rgba(255, 250, 242, .78); color: var(--cafe);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 40px -18px rgba(40, 20, 10, .45);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0;
}
.card-flut img { height: 110px; width: auto; }
.c1 { left: -16%; top: 14%; }
.c2 { right: -14%; top: 8%; }
.c3 { right: -10%; bottom: 10%; }

.cap-progresso {
  position: absolute; left: var(--borda); bottom: 28px; z-index: 4;
  display: flex; gap: 22px; margin: 0; padding: 0; list-style: none;
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.cap-progresso li { opacity: .4; transition: opacity .4s; position: relative; padding-top: 10px; }
.cap-progresso li::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.cap-progresso li.ativo { opacity: 1; }
.cap-progresso li.ativo::before { transform: scaleX(1); }

/* SEÇÕES */
.secao-cabeca { max-width: 760px; margin-bottom: 56px; }
.secao-titulo {
  margin-top: 14px;
  font-family: var(--display); text-transform: var(--caixa); font-weight: var(--peso); letter-spacing: var(--tracking);
  font-size: calc(clamp(44px, 6.4vw, 96px) * var(--escala)); line-height: .94;
}
.secao-sub { margin-top: 18px; max-width: 480px; color: var(--cafe-suave); font-size: 17px; }

/* LINHA */
.linha { padding: 140px var(--borda) 120px; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
@media (min-width: 1240px) { .produtos { grid-template-columns: repeat(5, 1fr); } .produto-nome { font-size: 30px; } }
.produto {
  --cor: var(--cafe);
  display: flex; flex-direction: column;
  background: #FBF6EE; border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 1px 0 rgba(27, 19, 16, .06);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.produto:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(40, 20, 10, .4); }
.produto-vitrine {
  position: relative; aspect-ratio: 4 / 4.2; display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--cor) 55%, #fff 45%) 0%, var(--cor) 75%);
  overflow: hidden;
}
.produto-vitrine::after {
  content: attr(data-nome); position: absolute; left: 50%; bottom: -.12em; transform: translateX(-50%);
  font-family: var(--fundo); font-weight: 800; letter-spacing: -.06em; font-size: 120px; line-height: 1;
  color: #fff; opacity: .12; white-space: nowrap;
}
.produto-vitrine img {
  position: relative; z-index: 1; width: 46%; height: auto;
  filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .35));
  transition: transform .7s var(--ease);
}
.produto:hover .produto-vitrine img { transform: translateY(-8px) rotate(-3deg) scale(1.03); }
.selo {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: var(--cafe);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.produto-info { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; flex: 1; }
.produto-nome { font-family: var(--display); font-weight: var(--peso); letter-spacing: var(--tracking); font-size: calc(34px * var(--escala)); line-height: 1; text-transform: var(--caixa); }
.produto-frase { color: var(--cafe-suave); font-size: 15px; }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fichas li { padding: 5px 10px; border-radius: 99px; background: var(--creme); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.tamanhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; border: 0; padding: 0; }
.tamanhos legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tamanho { position: relative; white-space: nowrap; }
.tamanho input { position: absolute; opacity: 0; inset: 0; }
.tamanho span {
  display: inline-grid; place-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px;
  border: 1.5px solid rgba(27, 19, 16, .2); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.tamanho input:checked + span { background: var(--cafe); border-color: var(--cafe); color: var(--creme); }
.tamanho input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn-add { width: 100%; background: var(--cor); color: #fff; }
.btn-add:hover { filter: brightness(1.1); }

/* COMO PEDIR */
.como { padding: 120px var(--borda); background: var(--creme-2); }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: p; }
.passo { padding: 34px 30px 36px; border-radius: var(--raio); background: var(--creme); }
.passo-num { font-family: var(--fundo); font-weight: 800; letter-spacing: -.05em; font-size: 64px; line-height: 1; color: var(--acento); }
.passo h3 { margin: 18px 0 8px; font-family: var(--display); font-weight: var(--peso); letter-spacing: var(--tracking); font-size: calc(34px * var(--escala)); text-transform: var(--caixa); }
.passo p { color: var(--cafe-suave); }

/* NOSSA HISTÓRIA */
.nossa { padding: 140px var(--borda) 120px; background: var(--cafe); color: var(--creme); overflow: hidden; }
.nossa-palco {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 110px); align-items: center;
  min-height: calc(100svh - 200px);
}
.nossa .sobretitulo { color: var(--acento); margin-bottom: 26px; }
.nossa-frase {
  margin: 0; font-family: var(--display); font-weight: var(--peso); text-transform: var(--caixa);
  letter-spacing: var(--tracking); line-height: 1.04; font-size: calc(clamp(34px, 4.6vw, 72px) * var(--escala));
}
.nossa-frase .palavra { opacity: .16; }
.nossa-foto { position: relative; margin: 0; isolation: isolate; }
.nossa-ano {
  display: flex; align-items: baseline; gap: 16px; margin: 40px 0 0;
  font-family: var(--fundo); font-weight: 800; letter-spacing: -.06em; line-height: .8;
  font-size: clamp(90px, 12vw, 190px); color: var(--acento);
}
.nossa-ano span { font-size: .16em; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); opacity: .55; }
.nossa-foto img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: 999px 999px var(--raio) var(--raio);
}
.nossa-marcos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin: 110px 0 56px; padding: 0; list-style: none;
}
.nossa-marcos li { position: relative; padding-top: 26px; }
.nossa-marcos li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(242, 233, 220, .25);
  transform-origin: left; transform: scaleX(var(--linha, 1));
}
.marco-num { font-family: var(--fundo); font-weight: 800; letter-spacing: -.04em; font-size: 15px; color: var(--acento); }
.nossa-marcos h3 {
  margin: 12px 0 10px; font-family: var(--display); font-weight: var(--peso); text-transform: var(--caixa);
  letter-spacing: var(--tracking); font-size: calc(32px * var(--escala));
}
.nossa-marcos p { margin: 0; color: rgba(242, 233, 220, .7); font-size: 15px; line-height: 1.55; }
.nossa-fecho {
  margin: 34px 0 0; font-family: var(--display); font-weight: var(--peso); text-transform: var(--caixa);
  letter-spacing: var(--tracking); font-size: calc(clamp(20px, 2vw, 28px) * var(--escala)); opacity: .6;
}

/* FAQ: <details> nativo (abre sem JS, teclado e leitor de tela funcionam sozinhos) */
.faq {
  padding: 120px var(--borda); background: var(--creme-2);
  display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 6vw; align-items: start;
}
.faq .secao-cabeca { position: sticky; top: 120px; margin-bottom: 0; }
@media (max-width: 960px) {
  .faq { display: block; padding-block: 100px; }
  .faq .secao-cabeca { position: static; margin-bottom: 40px; }
}
.faq-lista { max-width: 860px; border-top: 1px solid rgba(27, 19, 16, .14); }
.faq-item { border-bottom: 1px solid rgba(27, 19, 16, .14); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--creme); color: var(--acento); font-size: 22px; font-weight: 500; transition: transform .4s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: -6px 0 28px; max-width: 680px; color: var(--cafe-suave); font-size: 16px; line-height: 1.6; }
.faq-item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Nossa História: "Na roça" (foto + lembrança) e o vídeo da história */
.nossa-roca {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 110px); align-items: center;
  margin-top: 120px;
}
.roca-foto { margin: 0; }
.roca-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border-radius: var(--raio) var(--raio) 999px 999px; }
.roca-titulo {
  margin: 0 0 22px; font-family: var(--display); font-weight: var(--peso); text-transform: var(--caixa);
  letter-spacing: var(--tracking); line-height: 1; font-size: calc(clamp(34px, 4vw, 60px) * var(--escala));
}
.roca-texto p:not(.sobretitulo) { max-width: 520px; margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: rgba(242, 233, 220, .78); }
.roca-texto .roca-hoje { color: var(--creme); font-weight: 600; margin-top: 22px; }
.roca-foto { position: relative; }
.roca-play {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(27, 19, 16, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--creme); font: inherit; font-weight: 600; font-size: 14px; text-align: left; white-space: nowrap;
  transition: background .3s, transform .4s var(--ease);
}
.roca-play:hover { background: rgba(27, 19, 16, .9); transform: translateX(-50%) scale(1.04); }
.roca-play small { display: block; font-weight: 400; font-size: 12px; opacity: .7; }
.roca-play-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding-left: 3px; background: var(--creme); color: var(--cafe); font-size: 15px; }
.roca-ver { margin-top: 20px; }
/* vídeo em tela cheia (dialog nativo: Esc fecha, foco fica preso dentro) */
.filme {
  width: min(92vw, calc(86svh * 9 / 16)); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--creme);
}
.filme::backdrop { background: rgba(14, 10, 8, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.filme-video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; object-fit: cover; }
.filme-fechar {
  position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--creme); color: var(--cafe); font-size: 24px; line-height: 1;
}
.filme-insta { display: block; margin-top: 12px; text-align: center; color: var(--creme); opacity: .7; font-size: 13px; }
@media (max-width: 960px) {
  .nossa-roca { grid-template-columns: 1fr; gap: 40px; margin-top: 90px; }
  .roca-foto { width: min(78%, 400px); margin-inline: auto; }
  .roca-texto p:not(.sobretitulo) { font-size: 16px; }
}

/* MOMENTOS */
.momentos { padding: 140px 0 120px; overflow: hidden; }
.momentos .secao-cabeca { padding-inline: var(--borda); }
.galeria { display: flex; gap: 18px; padding-inline: var(--borda); width: max-content; will-change: transform; }
.g-item { margin: 0; border-radius: var(--raio); overflow: hidden; height: min(62vh, 560px); flex: none; }
.g-item.alto { aspect-ratio: 3 / 4.3; }
.g-item.largo { aspect-ratio: 3 / 2; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.g-item:hover img { transform: scale(1.05); }

/* CTA FINAL */
.cta-final {
  position: relative; overflow: hidden; text-align: center;
  padding: 150px var(--borda); background: var(--cafe); color: var(--creme);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cta-ramo { position: absolute; width: 520px; opacity: .08; right: -120px; top: -80px; rotate: 18deg; }
.cta-titulo { font-family: var(--display); text-transform: var(--caixa); font-weight: var(--peso); letter-spacing: var(--tracking); font-size: clamp(64px, 11vw, 180px); line-height: .9; }
.cta-titulo span { color: var(--acento); }
.cta-final p { opacity: .8; font-size: 17px; }
.cta-final .hero-acoes { justify-content: center; margin-top: 10px; }

/* RODAPÉ */
.rodape {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding: 80px var(--borda) 32px; background: #120D0B; color: var(--creme);
}
.rodape-marca { display: flex; flex-direction: column; gap: 12px; }
.rodape-marca > p:not(.marca-texto) { opacity: .7; }
.rodape h3 { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .6; margin-bottom: 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape a { text-decoration: none; opacity: .9; }
.rodape a:hover { opacity: 1; text-decoration: underline; }
.rodape-fim { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid rgba(242, 233, 220, .12); font-size: 13px; opacity: .55; }

/* BOTÃO FLUTUANTE */
.flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 60px; height: 60px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: var(--cafe); color: var(--creme);
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .5);
  transition: transform .4s var(--ease);
}
.flutuante:hover { transform: scale(1.06); }
.flutuante svg { width: 26px; height: 26px; }
.flutuante .contador { position: absolute; top: -2px; right: -2px; }
.flutuante.pulo { animation: pulo .6s var(--ease); }
@keyframes pulo { 30% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* BANDEJA */
.bandeja-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(18, 13, 11, .45); opacity: 0; transition: opacity .4s; }
.bandeja-fundo.aberto { opacity: 1; }
.bandeja {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--creme); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .4);
  transform: translateX(105%); transition: transform .55s var(--ease);
}
.bandeja.aberto { transform: none; }
.bandeja-topo { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(27, 19, 16, .1); }
.bandeja-topo h2 { font-family: var(--display); font-weight: var(--peso); letter-spacing: var(--tracking); font-size: calc(30px * var(--escala)); text-transform: var(--caixa); }
.fechar { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(27, 19, 16, .2); background: none; font-size: 24px; line-height: 1; }
.bandeja-corpo { flex: 1; overflow-y: auto; padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: #FBF6EE; }
.item img { width: 56px; height: 64px; object-fit: contain; }
.item-nome { font-weight: 700; font-size: 14px; line-height: 1.3; }
.item-tam { font-size: 12px; color: var(--cafe-suave); }
.qtd { display: flex; align-items: center; gap: 6px; }
.qtd button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(27, 19, 16, .2); background: none; font-weight: 700; }
.qtd output { min-width: 18px; text-align: center; font-weight: 700; }
.vazio { color: var(--cafe-suave); font-size: 15px; }
.bandeja-form { display: grid; gap: 14px; margin-top: auto; }
.minimo { margin: 0; font-size: 13px; color: var(--cafe-suave); text-align: center; }
.bandeja-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bandeja-form legend { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; width: 100%; }
.opcao { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; border: 1.5px solid rgba(27, 19, 16, .2); font-weight: 600; font-size: 14px; cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--cafe); background: var(--cafe); color: var(--creme); }
.opcao input { accent-color: var(--acento); }
.campo { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.campo input, .campo textarea {
  font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500;
  padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(27, 19, 16, .18); background: #FBF6EE; color: var(--cafe);
}

.aviso {
  position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translate(-50%, 200%); opacity: 0;
  padding: 12px 20px; border-radius: 99px; background: var(--cafe); color: var(--creme);
  font-size: 14px; font-weight: 600; transition: transform .5s var(--ease); pointer-events: none;
}
.aviso.visivel { transform: translate(-50%, 0); opacity: 1; }
.aviso { transition: transform .5s var(--ease), opacity .3s; }

/* RESPONSIVO */
@media (max-width: 960px) {
  .menu { display: none; }
  .abertura {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto auto;
    grid-template-areas: "texto" "pacote" "info" "pontos";
    padding-top: 104px; gap: 22px; align-items: start;
  }
  .abertura-pacotes { height: 44svh; max-height: 440px; }
  /* emenda com a história: faixa abaixo do seletor de cafés que desce da cor do café até o marrom do vídeo
     (fica só no espaço extra embaixo, não cobre nada do topo) */
  .abertura { padding-bottom: 130px; }
  .abertura::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 120px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--cap-0));
  }
  .abertura-info { justify-self: start; max-width: none; }
  .abertura .rolar { display: none; }
  .palco { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 80px var(--borda) 70px; gap: 18px; }
  /* o vídeo fica com o espaço que sobra depois do texto, então em celular baixo ele encolhe em vez de empurrar o texto pros marcadores */
  .cap-midia { order: -1; height: auto; min-height: 0; align-self: stretch; container-type: size; }
  .cap-foto { width: min(80%, 380px); }
  .cap-textos { height: 236px; }
  .cap-titulo { font-size: calc(64px * var(--escala)); }
  .cap-texto { gap: 10px; }
  .cap-texto p:not(.sobretitulo) { font-size: 15px; }
  .card-flut { width: 92px; padding: 10px 8px; font-size: 9px; }
  .card-flut img { height: 74px; }
  .cards-flutuantes { width: min(80%, 380px); }
  .c1 { left: -12%; } .c2 { right: -12%; } .c3 { right: -8%; }
  .cap-progresso { left: var(--borda); right: auto; bottom: 22px; }
  .passos { grid-template-columns: 1fr; }
  .nossa { padding-block: 100px 90px; }
  .nossa-palco { grid-template-columns: 1fr; min-height: 0; gap: 56px; }
  .nossa-foto { width: min(78%, 400px); margin-inline: auto; }
  .nossa-marcos { grid-template-columns: 1fr 1fr; gap: 34px 20px; margin-top: 80px; }
  .rodape { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .btn-pedido-topo { display: none; }
  .abertura { padding-top: 92px; padding-bottom: 130px; gap: 16px; }
  .abertura-titulo { font-size: calc(58px * var(--escala)); margin: 12px 0 18px; }
  .abertura-pacotes { height: 38svh; }
  .ab-nome { font-size: calc(46px * var(--escala)); margin: 6px 0 8px; }
  .ab-frase { font-size: 15px; }
  .abertura-info .fichas { margin: 12px 0 16px; }
  .abertura-pontos { justify-content: flex-start; }
  .abertura-pontos span { display: none; }
  .abertura .hero-acoes { flex-wrap: nowrap; gap: 8px; }
  .abertura .hero-acoes .btn { padding-inline: 16px; font-size: 11px; }
  .abertura-pontos button { padding: 8px; }
  .linha, .momentos { padding-top: 100px; padding-bottom: 90px; }
  .como { padding-block: 90px; }
  .g-item { height: 52vh; }
}

/* Movimento reduzido: capítulos empilhados, sem fixar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.sem-motion .palco { height: auto; display: block; padding-block: 100px; }
.sem-motion .historia-palavra, .sem-motion .cap-progresso, .sem-motion .cards-flutuantes { display: none; }
.sem-motion .cap-textos, .sem-motion .cap-midia { height: auto; }
.sem-motion .cap-texto { position: static; margin: 40px 0 20px; }
.sem-motion .cap-foto { position: relative; height: 70vh; margin-bottom: 40px; }
.sem-motion .galeria { width: auto; overflow-x: auto; }

/* TEMAS (prévia: ?tema=grotesk ou ?tema=classico; sem parâmetro = Moderno) */
:root[data-tema="grotesk"] {
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --fundo: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --peso: 700; --escala: .82; --tracking: -.035em;
  --acento: #5F6B3A;
}
:root[data-tema="classico"] {
  --display: "Anton", "Impact", sans-serif;
  --fundo: "Anton", "Impact", sans-serif;
  --peso: 400; --caixa: uppercase; --escala: 1; --tracking: .005em;
  --acento: #D7282F;
}

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.historia .rolar { color: inherit; z-index: 4; }
.historia-palavra { opacity: .08; }
:root[data-tema="classico"] .nossa-ano, :root[data-tema="classico"] .marco-num { font-weight: 400; letter-spacing: .01em; }
:root[data-tema="classico"] .nossa-frase { line-height: 1.08; }
/* celular baixo: a área do vídeo fica curta, então os cards encolhem e se afastam pra não encostar */
@container (max-height: 300px) {
  .card-flut { width: 70px; padding: 8px 6px; gap: 5px; font-size: 7.5px; border-radius: 14px; }
  .card-flut img { height: 52px; }
  .c1 { top: 10%; } .c2 { top: -4%; } .c3 { bottom: -2%; }
}