/* =========================================================
   Terra Roxa · torrefação de cafés brasileiros (marca FICTÍCIA)
   Projeto conceitual · André Gonçalves
   Layout: cartões arredondados com margem na viewport (hero terra roxa,
   assinatura e rodapé torra) sobre fundo nata; grid de 12 colunas.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* cores da marca */
  --nata: #FFF6EC;
  --areia: #EADCC8;
  --terra-roxa: #7A2E1D;
  --torra: #2A1610;
  --ipe: #F2B33D;
  --cafezal: #2F5D3A;
  --azulejo: #1F5FA8;
  /* derivadas (contraste AA conferido) */
  --torra-suave: #5E4A40;            /* texto secundário sobre nata (7.9:1) */
  --nata-suave: rgba(255, 246, 236, .78); /* texto secundário sobre terra/torra (≥5.9:1) */
  --fio-claro: rgba(42, 22, 16, .14);
  --fio-escuro: rgba(255, 246, 236, .18);
  --cereja: #D2462E;                 /* só na ilustração do ramo */
  --nata-cartao: #FFFAF4;

  /* tipografia */
  --f-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-selo: "Shrikhand", "Bricolage Grotesque", Georgia, serif;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --fs-lg: clamp(1.375rem, 1.2rem + .75vw, 1.875rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-2xl: clamp(2.25rem, 1.55rem + 3vw, 4.5rem);
  --fs-3xl: clamp(2.5rem, 1.5rem + 4.3vw, 5.75rem);
  --fs-hero: clamp(2.875rem, 1.55rem + 5.3vw, 6.5rem);

  /* espaço (base 8px) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;
  --secao: clamp(72px, 9vw, 152px);

  /* grid */
  --frame: 12px;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(16px, 2.2vw, 32px);
  --largura: 1360px;

  /* raios */
  --r-1: 8px; --r-2: 16px; --r-3: 24px; --r-pill: 999px;

  /* movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --foco: var(--azulejo);

  color-scheme: light;
}
@media (min-width: 1024px) { :root { --frame: 16px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--nata);
  color: var(--torra);
  font-family: var(--f-texto);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html.trava-scroll, html.trava-scroll body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .02em; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 200;
  background: var(--torra); color: var(--nata); padding: 10px 16px; border-radius: var(--r-pill);
  text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }
main:focus { outline: none; }

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid-12 > * { grid-column: 1 / -1; min-width: 0; }

/* tipografia de seção */
.titulo-xl, .titulo-lg, .hero__titulo {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.02;
}
.titulo-xl { font-size: var(--fs-3xl); }
.titulo-lg { font-size: var(--fs-2xl); line-height: 1.04; }
.texto { color: var(--torra-suave); max-width: 52ch; }
.texto-grande { font-size: var(--fs-md); line-height: 1.55; max-width: 46ch; }
.texto--claro { color: var(--nata-suave); }
.ficticio { font-family: var(--f-mono); font-size: var(--fs-xs); opacity: .8; }

/* marcador de canto └─ */
.canto {
  display: flex; align-items: flex-end; gap: 10px;
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .04em;
  color: var(--torra-suave); margin-bottom: var(--s-3);
}
.canto__marca {
  width: 16px; height: 12px; flex: none;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px);
}
.canto--claro { color: var(--nata-suave); }
.secao { padding-block: var(--secao); }
.secao__cabeca { display: grid; gap: var(--s-3); align-content: start; }
.secao__cabeca .canto { margin-bottom: 0; }

/* ---------- 3. Botões e pílulas ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: currentColor; --btn-borda: transparent;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px; padding: 0 16px 0 20px;
  border-radius: var(--r-pill); border: 1px solid var(--btn-borda);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-texto); font-weight: 500; font-size: .9375rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn__seta { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease); }
.btn:hover .btn__seta, .btn:focus-visible .btn__seta { transform: translate(2px, -2px); }
.btn--sm { min-height: 40px; padding: 0 14px 0 16px; font-size: .875rem; gap: 10px; }
.btn--ipe { --btn-bg: var(--ipe); --btn-fg: var(--torra); --btn-borda: var(--ipe); }
.btn--ipe:hover { --btn-bg: #F6C35F; }
.btn--claro { --btn-bg: rgba(255, 246, 236, .1); --btn-fg: var(--nata); --btn-borda: rgba(255, 246, 236, .32); }
.btn--claro:hover { --btn-bg: rgba(255, 246, 236, .18); --btn-borda: rgba(255, 246, 236, .6); }
.btn--escuro { --btn-bg: var(--torra); --btn-fg: var(--nata); --btn-borda: var(--torra); }
.btn--escuro:hover { --btn-bg: var(--terra-roxa); --btn-borda: var(--terra-roxa); }
.btn--contorno { --btn-fg: var(--torra); --btn-borda: rgba(42, 22, 16, .3); }
.btn--contorno:hover { --btn-borda: var(--torra); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.pilula {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid rgba(42, 22, 16, .22);
  background: transparent; color: var(--torra); font-size: .9375rem; font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pilula:hover { border-color: var(--torra); }
.pilula[aria-pressed="true"] { background: var(--torra); border-color: var(--torra); color: var(--nata); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--r-pill); background: var(--areia); color: var(--torra);
  font-size: .8125rem; font-weight: 500; line-height: 1.3;
}

.icone-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid currentColor; background: transparent;
}
.icone-btn svg { width: 20px; height: 20px; }

/* selos em Shrikhand (palavras curtas, com borda de carimbo) */
.selo {
  --selo-cor: var(--ipe); --selo-fundo: var(--terra-roxa);
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px 9px; border-radius: 14px;
  color: var(--selo-cor);
  border: 2px solid var(--selo-cor);
  box-shadow: inset 0 0 0 3px var(--selo-fundo), inset 0 0 0 4.5px var(--selo-cor);
  transform: rotate(-6deg);
  line-height: 1;
}
.selo__palavra { font-family: var(--f-selo); font-size: 1.375rem; font-weight: 400; letter-spacing: .01em; white-space: nowrap; }
.selo__data { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: lowercase; }

/* ---------- 4. Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo__simbolo { width: 34px; height: 34px; flex: none; }
.logo__nome { font-family: var(--f-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; }

/* ---------- 5. Cabeçalho ---------- */
.header-slot {
  position: absolute; z-index: 40;
  top: var(--frame); left: var(--frame); right: var(--frame);
}
.site-header {
  --logo-fundo: var(--nata); --logo-quarto: var(--ipe); --logo-grao: var(--terra-roxa);
  --foco: var(--ipe);
  color: var(--nata);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  max-width: 1600px; margin-inline: auto;
}
.site-nav { display: none; }
.site-nav ul { display: flex; gap: clamp(16px, 2vw, 32px); }
.site-nav a {
  text-decoration: none; font-size: .9375rem; position: relative; padding-block: 6px;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-header__acoes { display: flex; align-items: center; gap: 10px; }
.site-header__cta { display: none; }

.sacola-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 246, 236, .32); background: rgba(255, 246, 236, .08); color: inherit;
  transition: border-color .25s var(--ease);
}
.sacola-btn svg { width: 22px; height: 22px; }
.sacola-btn__contador {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--ipe); color: var(--torra); font-family: var(--f-mono); font-size: .6875rem; font-weight: 500;
}
.sacola-btn__contador.is-bump { animation: bump .45s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

.menu-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 246, 236, .32); background: transparent; color: inherit;
}
.menu-btn__linhas, .menu-btn__linhas::before, .menu-btn__linhas::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; content: "";
}
.menu-btn__linhas { position: relative; }
.menu-btn__linhas::before { position: absolute; top: -6px; }
.menu-btn__linhas::after { position: absolute; top: 6px; }

/* estado "grudado" ao rolar */
.site-header.is-fixo {
  position: fixed; top: 0; left: 0; right: 0;
  --logo-fundo: var(--terra-roxa); --logo-quarto: var(--ipe); --logo-grao: var(--nata);
  --foco: var(--azulejo);
  background: var(--nata); color: var(--torra);
  border-bottom: 1px solid var(--areia);
  animation: desce .4s var(--ease);
}
.site-header.is-fixo .site-header__inner { padding-block: 10px; }
.site-header.is-fixo .sacola-btn,
.site-header.is-fixo .menu-btn { border-color: rgba(42, 22, 16, .2); background: transparent; }
@keyframes desce { from { transform: translateY(-100%); } to { transform: translateY(0); } }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .menu-btn { display: none; }
  .site-header__inner { padding-inline: 32px; }
}

/* menu mobile em tela cheia */
.menu-mobile {
  position: fixed; inset: 0; z-index: 90;
  background: var(--torra); color: var(--nata);
  --logo-fundo: var(--terra-roxa); --logo-quarto: var(--ipe); --logo-grao: var(--nata);
  --foco: var(--ipe);
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: max(18px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  opacity: 0; transition: opacity .3s var(--ease);
}
.menu-mobile.is-aberto { opacity: 1; }
.menu-mobile__topo { display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__lista { border-top: 1px solid var(--fio-escuro); }
.menu-mobile__lista li { border-bottom: 1px solid var(--fio-escuro); }
.menu-mobile__lista a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
  font-family: var(--f-display); font-size: clamp(2rem, 9vw, 3rem); font-weight: 300; letter-spacing: -.02em;
  text-decoration: none; line-height: 1.1;
}
.menu-mobile__lista .mono { color: var(--nata-suave); }
.menu-mobile.is-aberto .menu-mobile__lista li { animation: sobe .5s var(--ease) both; }
.menu-mobile.is-aberto .menu-mobile__lista li:nth-child(2) { animation-delay: .04s; }
.menu-mobile.is-aberto .menu-mobile__lista li:nth-child(3) { animation-delay: .08s; }
.menu-mobile.is-aberto .menu-mobile__lista li:nth-child(4) { animation-delay: .12s; }
.menu-mobile.is-aberto .menu-mobile__lista li:nth-child(5) { animation-delay: .16s; }
.menu-mobile__ctas { display: grid; gap: 12px; margin-top: auto; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 6. Hero ---------- */
.hero {
  --foco: var(--ipe);
  position: relative; isolation: isolate; overflow: hidden;
  margin: var(--frame);
  margin-left: max(var(--frame), env(safe-area-inset-left, 0px));
  margin-right: max(var(--frame), env(safe-area-inset-right, 0px));
  border-radius: var(--r-3);
  background: var(--terra-roxa); color: var(--nata);
}
.hero__ruido {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__painel { display: none; }
.hero__grid {
  display: grid; gap: var(--s-6);
  padding: 104px 20px 24px;
}
.hero__texto { display: grid; gap: var(--s-3); align-content: start; }
.hero__titulo { font-size: var(--fs-hero); max-width: 11ch; }
.hero__apoio { font-size: var(--fs-md); line-height: 1.5; color: var(--nata-suave); max-width: 40ch; }

.lista-num { display: grid; max-width: 420px; margin-top: var(--s-1); }
.lista-num li {
  display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 8px;
  padding: 12px 0 10px; border-bottom: 1px solid rgba(255, 246, 236, .26);
  font-size: .9375rem;
}
.lista-num li:first-child { border-top: 1px solid rgba(255, 246, 236, .26); }
.lista-num__n { font-family: var(--f-mono); font-size: .6875rem; color: var(--nata-suave); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-1); }

.hero__arte { position: relative; display: grid; place-items: center; padding-block: 72px 64px; }
.ramo { width: min(100%, 520px); height: auto; overflow: visible; }
.selo--hero { position: absolute; right: 4px; top: 0; }
.hero__legenda { position: absolute; left: 0; bottom: 14px; color: var(--nata-suave); max-width: 26ch; line-height: 1.4; }
.seta-circulo {
  position: absolute; right: 0; bottom: 0;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 246, 236, .5); color: var(--nata);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.seta-circulo svg { width: 18px; height: 18px; }
.seta-circulo:hover { background: var(--nata); color: var(--terra-roxa); }

/* ilustração do ramo */
.ramo__grid circle { fill: rgba(255, 246, 236, .22); }
.ramo__caule { fill: none; stroke: var(--nata); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ramo__leaf path { fill: rgba(255, 246, 236, .07); stroke: var(--nata); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ramo__leaf .ramo__vein { fill: none; stroke-width: .9; opacity: .65; }
.ramo__cereja { fill: var(--cereja); stroke: var(--nata); stroke-width: 1.4; }
.ramo__brilho { fill: rgba(255, 246, 236, .7); }
.ramo__fio { fill: none; stroke: var(--nata); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .8; }
.ramo__orbita { fill: none; stroke: var(--nata); stroke-width: 1; stroke-dasharray: .012 .012; opacity: .55; }
.ramo__no { fill: var(--nata); }
.ramo__no--oco { fill: var(--terra-roxa); stroke: var(--nata); stroke-width: 1.4; }
.ramo__label { fill: var(--nata); font-family: var(--f-mono); font-size: 16px; letter-spacing: 0; }

@media (min-width: 768px) {
  .hero__grid { padding: 112px 40px 40px; }
  .hero__arte { padding-block: 72px 72px; }
}
@media (min-width: 1024px) {
  .hero { min-height: clamp(640px, calc(100svh - 2 * var(--frame)), 900px); display: grid; }
  .hero__painel {
    display: block; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 47%;
    background: rgba(42, 22, 16, .16); border-left: 1px solid rgba(255, 246, 236, .1);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 0;
    padding: 0; min-height: 100%;
  }
  .hero__texto { padding: 128px 48px 40px 32px; align-content: center; gap: var(--s-4); }
  .hero__arte { padding: 96px 40px 40px; }
  .ramo { width: min(100%, 560px); }
  .selo--hero { top: 104px; bottom: auto; right: 40px; }
  .hero__legenda { max-width: 40ch; }
  .hero__legenda { left: 40px; bottom: 40px; }
  .seta-circulo { right: 32px; bottom: 32px; }
}
@media (min-width: 1440px) {
  .hero__texto { padding-left: 48px; }
}

/* ---------- 7. Manifesto ---------- */
.manifesto__corpo { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.manifesto__nome { color: var(--torra-suave); max-width: 44ch; line-height: 1.5; padding-top: var(--s-2); border-top: 1px solid var(--areia); }
@media (min-width: 1024px) {
  .manifesto__cabeca { grid-column: 1 / span 10; }
  .manifesto__corpo { grid-column: 7 / span 6; margin-top: var(--s-8); }
}

/* faixa de azulejo usada como divisor */
.faixa-azulejo {
  height: 48px; margin-top: var(--secao);
  margin-left: max(var(--frame), env(safe-area-inset-left, 0px));
  margin-right: max(var(--frame), env(safe-area-inset-right, 0px));
  border-radius: var(--r-1); overflow: hidden;
}
.faixa-azulejo svg { width: 100%; height: 100%; }
@media (min-width: 768px) { .faixa-azulejo { height: 64px; } }

/* ---------- 8. De onde vem ---------- */
.origem { padding-top: 0; }
.origem__cabeca { margin-bottom: var(--s-6); }
.regioes { margin-top: var(--s-2); border-top: 1px solid var(--fio-claro); }
.regioes li {
  display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; align-items: baseline;
  padding: 12px 8px; border-bottom: 1px solid var(--fio-claro);
  border-radius: 4px; transition: background-color .2s var(--ease);
}
.regioes li.is-ativo { background: rgba(122, 46, 29, .07); }
.regioes__n { color: var(--terra-roxa); }
.regioes__nome { font-weight: 500; }
.regioes__nome em { font-style: normal; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--torra-suave); margin-left: 4px; }
.regioes__coord { grid-column: 2; color: var(--torra-suave); }
@media (min-width: 640px) {
  .regioes li { grid-template-columns: 28px 1fr auto; }
  .regioes__coord { grid-column: auto; }
}

.mapa { position: relative; }
.mapa__area { position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 650 / 700; }
.mapa__area svg { width: 100%; height: 100%; }
.mapa__legenda { margin-top: var(--s-2); color: var(--torra-suave); text-align: center; }
.mapa__ponto-grade { fill: rgba(42, 22, 16, .22); }
.mapa__ponto-grade--forte { fill: rgba(42, 22, 16, .5); }
.mapa__eixo { fill: var(--torra-suave); font-family: var(--f-mono); font-size: 13px; }
.mapa__rota { fill: none; stroke: var(--terra-roxa); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .6; }
.mapa__ciclo { fill: none; stroke: var(--terra-roxa); stroke-width: 1; opacity: .35; }
.mapa__rotulo { fill: var(--torra); font-family: var(--f-mono); font-size: 13px; }

.ponto {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  width: 40px; height: 40px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; border-radius: 50%;
}
.ponto__miolo {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--terra-roxa); box-shadow: 0 0 0 3px var(--nata), 0 0 0 4.5px var(--terra-roxa);
  transition: transform .25s var(--ease);
}
.ponto::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 1px solid var(--terra-roxa); opacity: 0;
  animation: pulso 2.6s var(--ease) infinite; animation-delay: var(--atraso, 0s);
}
@keyframes pulso { 0% { opacity: .6; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.8); } }
.ponto--torrefacao .ponto__miolo { border-radius: 2px; background: var(--ipe); box-shadow: 0 0 0 3px var(--nata), 0 0 0 4.5px var(--torra); }
.ponto--torrefacao::before { display: none; }
.ponto:hover .ponto__miolo, .ponto:focus-visible .ponto__miolo, .ponto.is-ativo .ponto__miolo { transform: scale(1.35); }
.ponto__dica {
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  min-width: 190px; padding: 10px 12px; border-radius: var(--r-1);
  background: var(--torra); color: var(--nata); text-align: left;
  font-family: var(--f-mono); font-size: .75rem; line-height: 1.5; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.ponto__dica strong { display: block; font-family: var(--f-texto); font-size: .875rem; font-weight: 600; margin-bottom: 2px; }
.ponto:hover .ponto__dica, .ponto:focus-visible .ponto__dica, .ponto.is-ativo .ponto__dica { opacity: 1; transform: translate(-50%, 0); }
.ponto--esq .ponto__dica { left: auto; right: 50%; transform: translate(24px, 6px); }
.ponto--esq:hover .ponto__dica, .ponto--esq:focus-visible .ponto__dica, .ponto--esq.is-ativo .ponto__dica { transform: translate(24px, 0); }
.ponto--dir .ponto__dica { left: 50%; transform: translate(-24px, 6px); }
.ponto--dir:hover .ponto__dica, .ponto--dir:focus-visible .ponto__dica, .ponto--dir.is-ativo .ponto__dica { transform: translate(-24px, 0); }

@media (min-width: 1024px) {
  .origem__cabeca { grid-column: 1 / span 5; margin-bottom: 0; align-self: center; }
  .mapa { grid-column: 7 / span 6; }
}

/* ---------- 9. Loja ---------- */
.loja__topo { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
@media (min-width: 1024px) {
  .loja__topo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .filtros { justify-content: flex-end; }
}

.lotes { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lote {
  position: relative; display: flex; flex-direction: column;
  background: var(--nata-cartao); border: 1px solid var(--areia); border-radius: var(--r-2);
  overflow: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.lote:hover, .lote:focus-within { border-color: #D9C4A6; }
.lote.is-saindo { opacity: 0; transform: scale(.97); }
.lote.is-entrando { animation: entra .45s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.lote__arte { position: relative; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--areia); }
.lote__arte .azulejo { position: absolute; inset: 0; width: 100%; height: 100%; }
.lote__chip {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
  border-radius: var(--r-pill); background: var(--nata); color: var(--cafezal);
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 500;
}
.lote__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cafezal); }
.lote__lote {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  padding: 5px 10px; border-radius: var(--r-pill); background: var(--torra); color: var(--nata);
  font-family: var(--f-mono); font-size: .6875rem;
}
.lote__carimbo {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  --selo-cor: var(--torra); --selo-fundo: var(--nata);
  background: var(--nata);
  opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.6);
}
.lote__carimbo.is-carimbando { animation: carimba 1.5s var(--ease) both; }
@keyframes carimba {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1.7); }
  14% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.94); }
  22% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

.lote__corpo { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; flex: 1; }
.lote__cabeca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lote__nome { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.lote__notas { color: var(--torra-suave); font-size: .9375rem; line-height: 1.45; }
.lote__dados {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--areia);
}
.lote__dados div { padding: 8px 0; border-bottom: 1px solid var(--areia); min-width: 0; }
.lote__dados div:nth-child(odd) { padding-right: 10px; }
.lote__dados div:nth-child(even) { padding-left: 10px; border-left: 1px solid var(--areia); }
.lote__dados dt { font-family: var(--f-mono); font-size: .6875rem; color: var(--torra-suave); }
.lote__dados dd { font-family: var(--f-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.lote__opcoes { display: grid; gap: 10px; }
.segmentado { border: 0; padding: 0; margin: 0; min-width: 0; }
.segmentado legend { font-family: var(--f-mono); font-size: .6875rem; color: var(--torra-suave); margin-bottom: 6px; padding: 0; }
.segmentado__grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(234, 220, 200, .55); }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentado span {
  display: grid; place-items: center; min-height: 34px; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.segmentado input:checked + span { background: var(--torra); color: var(--nata); }
.segmentado input:focus-visible + span { outline: 3px solid var(--azulejo); outline-offset: 2px; }

.campo { display: grid; gap: 6px; }
.campo__rotulo { font-family: var(--f-mono); font-size: .6875rem; color: var(--torra-suave); }
.campo__select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 42px;
  padding: 0 40px 0 16px; border-radius: var(--r-pill);
  border: 1px solid rgba(42, 22, 16, .22); background-color: transparent; color: var(--torra);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232A1610' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  font-size: .9375rem;
}
.campo__select:hover { border-color: var(--torra); }

.lote__compra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.lote__preco { display: grid; line-height: 1.1; }
.lote__valor { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lote__peso { font-family: var(--f-mono); font-size: .6875rem; color: var(--torra-suave); }
.lote:hover .btn__seta, .lote:focus-within .btn__seta { transform: translate(2px, -2px); }

/* módulos do azulejo (gerados por JS) */
.azulejo { display: block; }
.azulejo .m { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.lote:hover .azulejo .m.gira, .lote:focus-within .azulejo .m.gira,
.assinatura__arte:hover .azulejo .m.gira { transform: rotate(90deg); }
.azulejo--azulejo .t-bg { fill: var(--nata); }
.azulejo--azulejo .t-fg { fill: var(--azulejo); }
.azulejo--azulejo .t-slit { stroke: var(--nata); }
.azulejo--azulejo .inv .t-bg { fill: var(--azulejo); }
.azulejo--azulejo .inv .t-fg { fill: var(--nata); }
.azulejo--azulejo .inv .t-slit { stroke: var(--azulejo); }
.azulejo--azulejo .rejunte { stroke: var(--nata); }
.azulejo--terra .t-bg { fill: var(--terra-roxa); }
.azulejo--terra .t-fg { fill: var(--ipe); }
.azulejo--terra .t-slit { stroke: var(--terra-roxa); }
.azulejo--terra .inv .t-bg { fill: var(--ipe); }
.azulejo--terra .inv .t-fg { fill: var(--terra-roxa); }
.azulejo--terra .inv .t-slit { stroke: var(--ipe); }
.azulejo--terra .rejunte { stroke: var(--torra); stroke-opacity: .35; }
.rejunte { fill: none; stroke-width: 3; }

/* card-convite (assinatura) dentro da loja */
.lote--convite {
  --foco: var(--ipe);
  background: var(--terra-roxa); color: var(--nata); border-color: var(--terra-roxa);
  justify-content: space-between; padding: 28px 24px 24px; gap: var(--s-4); min-height: 320px;
}
.lote--convite:hover, .lote--convite:focus-within { border-color: var(--terra-roxa); }
.lote--convite .selo { align-self: flex-start; }
.lote--convite h3 { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 300; letter-spacing: -.02em; line-height: 1.08; }
.lote--convite p { color: var(--nata-suave); }
.lote--convite .btn { align-self: flex-start; }

/* ---------- 10. Assinatura ---------- */
.assinatura {
  margin-left: max(var(--frame), env(safe-area-inset-left, 0px));
  margin-right: max(var(--frame), env(safe-area-inset-right, 0px));
}
.assinatura__card {
  --foco: var(--ipe);
  display: grid; gap: var(--s-5);
  background: var(--torra); color: var(--nata);
  border-radius: var(--r-3);
  padding: clamp(20px, 4vw, 56px);
  max-width: 1600px; margin-inline: auto;
}
.assinatura__arte { position: relative; align-self: start; }
.assinatura__azulejo { aspect-ratio: 2 / 1; border-radius: var(--r-2); overflow: hidden; }
.assinatura__azulejo svg { width: 100%; height: 100%; }
.selo--assinatura { position: absolute; right: 16px; bottom: -14px; --selo-cor: var(--ipe); --selo-fundo: var(--torra); background: var(--torra); }
.assinatura__conteudo { display: grid; gap: var(--s-3); min-width: 0; }
.assinatura__conteudo .titulo-lg { max-width: 14ch; }
@media (min-width: 1024px) {
  .assinatura__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); }
  .assinatura__arte { position: sticky; top: 96px; }
  .assinatura__azulejo { aspect-ratio: 1 / 1; }
  .selo--assinatura { right: -12px; bottom: 28px; }
}

.montador { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.montador__progresso { display: grid; gap: 12px; }
.montador__passos { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.montador__passo {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 0; border: 0; background: none;
  color: var(--nata-suave); font-size: .9375rem;
}
.montador__passo .mono { color: inherit; }
.montador__passo[aria-current="step"] { color: var(--nata); font-weight: 500; }
.montador__passo.is-feito { color: var(--nata); }
.montador__barra { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 246, 236, .16); overflow: hidden; }
.montador__barra-fill {
  position: absolute; inset: 0; background: var(--ipe); transform-origin: left;
  transform: scaleX(.3334); transition: transform .5s var(--ease);
}
.montador__painel { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-2); }
.montador__painel.is-entrando { animation: painel-entra .45s var(--ease) both; }
.montador__painel.is-entrando.volta { animation-name: painel-volta; }
@keyframes painel-entra { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes painel-volta { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.montador__pergunta { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 300; letter-spacing: -.01em; padding: 0; margin-bottom: 4px; }

.opcoes { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .opcoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opcoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opcoes--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opcoes--4 .opcao--larga { grid-column: 1 / -1; }
}
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao__corpo {
  display: grid; gap: 4px; height: 100%; padding: 14px 16px;
  border: 1px solid rgba(255, 246, 236, .26); border-radius: var(--r-2);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.opcao:hover .opcao__corpo { border-color: rgba(255, 246, 236, .6); }
.opcao__titulo { font-weight: 600; font-size: 1rem; }
.opcao__sub { font-size: .8125rem; color: var(--nata-suave); line-height: 1.4; }
.opcao input:checked + .opcao__corpo { background: var(--ipe); border-color: var(--ipe); color: var(--torra); }
.opcao input:checked + .opcao__corpo .opcao__sub { color: rgba(42, 22, 16, .8); }
.opcao input:focus-visible + .opcao__corpo { outline: 3px solid var(--nata); outline-offset: 3px; }

.assinatura .campo__select {
  border-color: rgba(255, 246, 236, .3); color: var(--nata); max-width: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23FFF6EC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.assinatura .campo__select option { color: var(--torra); background: var(--nata); }
.assinatura .campo__rotulo { color: var(--nata-suave); }

.montador__nav { display: flex; gap: 10px; }

.resumo {
  display: grid; gap: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--fio-escuro);
}
.resumo__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.resumo__lista dt { color: var(--nata-suave); font-size: .6875rem; }
.resumo__lista dd { font-size: .8125rem; color: var(--nata); }
.resumo__preco p:first-child { display: flex; align-items: baseline; gap: 4px; }
.resumo__valor { font-family: var(--f-display); font-size: var(--fs-2xl); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--ipe); font-variant-numeric: tabular-nums; }
.resumo__por { font-size: var(--fs-md); color: var(--nata-suave); }
.resumo__nota { color: var(--nata-suave); margin-top: 6px; }
.resumo__cta { justify-self: stretch; }
@media (min-width: 768px) {
  .resumo { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .resumo__lista { grid-template-columns: repeat(4, auto); grid-column: 1 / -1; justify-content: start; }
  .resumo__cta { justify-self: end; }
}

/* ---------- 11. Do pé à xícara ---------- */
.processo__cabeca .titulo-lg { max-width: 18ch; }
.curva-fig { margin-block: var(--s-6) var(--s-8); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.curva-fig svg { min-width: 680px; width: 100%; height: auto; overflow: visible; }
.curva-fig figcaption { margin-top: var(--s-2); color: var(--torra-suave); }
.curva text { font-family: var(--f-mono); font-size: 13px; fill: var(--torra-suave); }
.curva__eixo line { stroke: var(--fio-claro); }
.curva__eixo--y .c-grid { stroke: rgba(42, 22, 16, .1); stroke-dasharray: 2 4; }
.curva__base { stroke: var(--torra); stroke-width: 1; }
.curva__fase--0 { fill: rgba(242, 179, 61, .14); }
.curva__fase--1 { fill: rgba(122, 46, 29, .07); }
.curva__fase--2 { fill: rgba(122, 46, 29, .15); }
.curva text.curva__fase-label { fill: var(--torra); font-size: 12px; }
.curva__linha { fill: none; stroke: var(--terra-roxa); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.curva__crack-fio { stroke: var(--torra); stroke-dasharray: 2 4; }
.curva__crack-halo { fill: rgba(242, 179, 61, .35); }
.curva__crack-ponto { fill: var(--ipe); stroke: var(--torra); stroke-width: 2; }
.curva text.curva__crack-label { fill: var(--torra); font-size: 14px; font-weight: 500; }
.curva__no { fill: var(--nata); stroke: var(--terra-roxa); stroke-width: 2; }
.curva text.curva__nota { fill: var(--torra); }
.curva__crack { transition: opacity .4s var(--ease), transform .4s var(--ease); transform-box: fill-box; transform-origin: center bottom; }
.js .curva.is-desenhando .curva__crack { opacity: 0; transform: translateY(6px); }
.js .curva.is-desenhando .curva__crack.is-visivel { opacity: 1; transform: none; }

.etapas { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); counter-reset: etapa; }
.etapa { display: grid; gap: 10px; align-content: start; padding: 20px 0 28px; border-top: 1px solid rgba(42, 22, 16, .2); }
.etapa__n { color: var(--terra-roxa); }
.etapa__titulo { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.etapa p { color: var(--torra-suave); font-size: .9375rem; line-height: 1.55; }
.etapa .etapa__dado {
  display: inline-flex; align-items: center; gap: 8px; color: var(--torra); font-size: .75rem; margin-top: 4px;
}
.etapa__dado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cafezal); flex: none; }
@media (min-width: 640px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } }
@media (min-width: 1100px) { .etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- 12. Jeitos de passar ---------- */
.jeitos { padding-top: 0; }
.jeitos .secao__cabeca { margin-bottom: var(--s-6); }
.jeitos .titulo-lg { max-width: 18ch; }
.fichas { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ficha {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 20px;
  border: 1px solid var(--areia); border-radius: var(--r-2); background: var(--nata-cartao);
}
.ficha__arte {
  aspect-ratio: 5 / 4; border-radius: var(--r-1); display: grid; place-items: center; margin-bottom: 6px;
  background:
    radial-gradient(circle, rgba(31, 95, 168, .22) 1px, transparent 1.5px) 0 0 / 16px 16px,
    rgba(234, 220, 200, .35);
}
.ficha__arte svg { width: 78%; height: auto; overflow: visible; }
.ficha__arte path, .ficha__arte ellipse { fill: none; stroke: var(--azulejo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ficha__arte .fino { stroke-width: 1; opacity: .7; }
.ficha__arte .no { fill: var(--azulejo); stroke: none; }
.ficha__arte .pingo { stroke-dasharray: 3 5; animation: pinga 1.6s linear infinite; }
@keyframes pinga { to { stroke-dashoffset: -16; } }
.ficha__titulo { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; padding-inline: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ficha__sub { color: var(--torra-suave); }
.ficha__texto { color: var(--torra-suave); font-size: .9375rem; line-height: 1.5; padding-inline: 6px; }
.ficha__dados { display: grid; margin-top: auto; padding-inline: 6px; border-top: 1px solid var(--areia); }
.ficha__dados div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--areia); }
.ficha__dados dt { color: var(--torra-suave); font-size: .6875rem; }
.ficha__dados dd { font-size: .75rem; }

.dica {
  display: grid; gap: var(--s-2); align-items: center; margin-top: var(--s-5);
  padding: 28px 24px; border-radius: var(--r-2);
  background: rgba(234, 220, 200, .55);
}
.selo--dica { --selo-cor: var(--terra-roxa); --selo-fundo: #F4E9DB; justify-self: start; }
.dica__texto { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; max-width: 24ch; }
.dica__sub { color: var(--torra-suave); max-width: 52ch; }
@media (min-width: 900px) {
  .dica { grid-template-columns: auto minmax(0, 1fr) minmax(0, .8fr); gap: var(--s-5); padding: 36px 40px; }
}

/* ---------- 13. Depoimentos ---------- */
.depoimentos { padding-top: 0; }
.depoimentos .secao__cabeca { margin-bottom: var(--s-6); }
.depos { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .depos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.depo {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4);
  padding: 28px 24px 24px; border: 1px solid var(--areia); border-radius: var(--r-2); background: var(--nata);
}
.depo blockquote { margin: 0; }
.depo blockquote p { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; }
.depo blockquote p::before { content: "“"; display: block; font-size: 3rem; line-height: .7; color: var(--terra-roxa); margin-bottom: 10px; }
.depo__quem { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--areia); }
.depo__quem span:first-child { font-weight: 600; }
.depo__quem .mono { color: var(--torra-suave); }

/* ---------- 14. Dúvidas ---------- */
.duvidas { padding-top: 0; }
.duvidas__cabeca { margin-bottom: var(--s-5); }
@media (min-width: 1024px) {
  .duvidas__cabeca { grid-column: 1 / span 5; margin-bottom: 0; }
  .acordeao { grid-column: 7 / span 6; }
}
.acordeao { border-top: 1px solid rgba(42, 22, 16, .2); }
.acordeao__item { border-bottom: 1px solid rgba(42, 22, 16, .2); }
.acordeao__item h3 { font-size: inherit; }
.acordeao__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 20px 0; border: 0; background: none; text-align: left;
  font-size: var(--fs-md); font-weight: 500; line-height: 1.35; color: var(--torra);
}
.acordeao__icone { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid rgba(42, 22, 16, .25); transition: background-color .25s var(--ease); }
.acordeao__icone::before, .acordeao__icone::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .3s var(--ease);
}
.acordeao__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeao__btn[aria-expanded="true"] .acordeao__icone { background: var(--torra); color: var(--nata); border-color: var(--torra); }
.acordeao__btn[aria-expanded="true"] .acordeao__icone::after { transform: translate(-50%, -50%) rotate(0deg); }
.acordeao__painel { padding: 0 44px 22px 0; color: var(--torra-suave); }
.acordeao__painel.is-abrindo { animation: sobe .35s var(--ease) both; }
.acordeao__painel a { color: var(--terra-roxa); }

/* ---------- 15. Rodapé ---------- */
.rodape {
  margin: 0 max(var(--frame), env(safe-area-inset-right, 0px)) max(var(--frame), env(safe-area-inset-bottom, 0px)) max(var(--frame), env(safe-area-inset-left, 0px));
}
.rodape__card {
  --foco: var(--ipe);
  --logo-fundo: var(--terra-roxa); --logo-quarto: var(--ipe); --logo-grao: var(--nata);
  background: var(--torra); color: var(--nata); border-radius: var(--r-3);
  padding: clamp(24px, 4vw, 48px); overflow: hidden;
  max-width: 1600px; margin-inline: auto;
  display: grid; gap: var(--s-6);
}
.rodape__topo { display: grid; gap: var(--s-5); }
.aviso { display: grid; gap: 12px; max-width: 440px; }
.aviso__titulo { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 300; letter-spacing: -.01em; line-height: 1.15; }
.aviso__linha {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 18px;
  border: 1px solid rgba(255, 246, 236, .3); border-radius: var(--r-pill);
  transition: border-color .2s var(--ease);
}
.aviso__linha:focus-within { border-color: var(--nata); }
.aviso__linha input {
  flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--nata); font-size: .9375rem;
}
.aviso__linha input::placeholder { color: rgba(255, 246, 236, .6); }
.aviso__linha input:focus { outline: none; }
.aviso__linha input[aria-invalid="true"] { color: #FFD9C7; }
.aviso__enviar {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0;
  background: var(--ipe); color: var(--torra); transition: transform .25s var(--ease);
}
.aviso__enviar svg { width: 16px; height: 16px; }
.aviso__enviar:hover { transform: rotate(45deg); }
.aviso__msg { min-height: 1.5em; color: var(--nata-suave); }
.aviso__msg.is-ok { color: var(--ipe); }
.rodape__nav ul { display: grid; gap: 8px; }
.rodape__nav a { text-decoration: none; font-size: .9375rem; }
.rodape__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__contato { display: grid; gap: 8px; font-style: normal; color: var(--nata-suave); }
.rodape__whats { display: inline-flex; align-items: center; gap: 8px; color: var(--nata); text-decoration: none; font-weight: 500; }
.rodape__whats svg { width: 20px; height: 20px; }
.rodape__whats .mono { color: var(--nata-suave); font-weight: 400; }
.rodape__whats:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .rodape__topo { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); align-items: start; }
  .rodape__contato { justify-items: end; text-align: right; }
}
.faixa-azulejo--escura { margin: 0; height: 48px; }
.rodape__marca { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 24px); }
.rodape__simbolo { width: clamp(44px, 11vw, 168px); height: clamp(44px, 11vw, 168px); flex: none; }
.rodape__wordmark {
  font-family: var(--f-display); font-size: clamp(3.25rem, 13.5vw, 13.5rem); font-weight: 300;
  letter-spacing: -.045em; line-height: .85; white-space: nowrap;
}
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: var(--s-3); border-top: 1px solid var(--fio-escuro);
  font-size: .875rem; color: var(--nata-suave);
}
.rodape__base a { color: var(--nata); text-underline-offset: 3px; }

/* ---------- 16. Sacola (gaveta) ---------- */
.sacola-fundo {
  position: fixed; inset: 0; z-index: 80; background: rgba(42, 22, 16, .5);
  opacity: 0; transition: opacity .3s var(--ease);
}
.sacola-fundo.is-aberta { opacity: 1; }
.sacola {
  position: fixed; z-index: 81; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--nata); color: var(--torra);
  border-left: 1px solid var(--areia);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  transform: translateX(100%); transition: transform .4s var(--ease);
}
.sacola.is-aberta { transform: none; }
.sacola__topo { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--areia); }
.sacola__titulo { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 400; letter-spacing: -.01em; }
.sacola__corpo { flex: 1; overflow-y: auto; padding: 8px 24px; }
.sacola__itens li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--areia);
}
.sacola__mini { width: 64px; height: 64px; border-radius: var(--r-1); overflow: hidden; }
.sacola__mini svg { width: 100%; height: 100%; }
.sacola__nome { font-weight: 600; line-height: 1.3; }
.sacola__det { color: var(--torra-suave); margin-top: 2px; }
.sacola__qtd { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; border: 1px solid var(--areia); border-radius: var(--r-pill); padding: 2px; }
.sacola__qtd button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; }
.sacola__qtd button:hover { background: var(--areia); }
.sacola__qtd svg { width: 14px; height: 14px; }
.sacola__qtd output { min-width: 22px; text-align: center; font-family: var(--f-mono); font-size: .8125rem; }
.sacola__dir { display: grid; justify-items: end; gap: 8px; }
.sacola__sub { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sacola__remover { border: 0; background: none; padding: 4px 0; font-size: .8125rem; color: var(--torra-suave); text-decoration: underline; text-underline-offset: 3px; }
.sacola__vazia { display: grid; gap: 16px; justify-items: start; padding: 32px 0; color: var(--torra-suave); }
.sacola__rodape { display: grid; gap: 10px; padding: 20px 24px 24px; border-top: 1px solid var(--areia); background: var(--nata-cartao); }
.sacola__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.0625rem; }
.sacola__total strong { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 400; font-variant-numeric: tabular-nums; }
.sacola__nota { color: var(--torra-suave); }
.sacola__cta { width: 100%; margin-top: 6px; }

/* ---------- 17. Preloader ---------- */
.preloader {
  --logo-fundo: var(--terra-roxa); --logo-quarto: var(--ipe); --logo-grao: var(--nata);
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--nata); color: var(--torra-suave);
  animation: some .35s ease 1.3s forwards; /* garantia sem JS */
}
.preloader.is-saindo { animation: some .35s ease forwards; }
@keyframes some { to { opacity: 0; visibility: hidden; } }
.preloader__inner { display: grid; justify-items: center; gap: 18px; }
.preloader__simbolo { width: 76px; height: 76px; overflow: visible; }
.preloader__peca {
  transform-box: view-box; transform-origin: 50% 50%;
  animation: monta .62s var(--ease) var(--d) both;
}
.preloader__peca:nth-child(2) { transform-origin: 25% 25%; }
.preloader__peca:nth-child(3) { transform-origin: 75% 25%; }
.preloader__peca:nth-child(4) { transform-origin: 25% 75%; }
.preloader__peca:nth-child(5) { transform-origin: 75% 75%; }
@keyframes monta { from { opacity: 0; transform: rotate(var(--r)) scale(.5); } to { opacity: 1; transform: none; } }
.preloader__texto { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; }

/* ---------- 18. Animações de entrada ---------- */
/* hero: caule e fios se desenham, cerejas amadurecem (verde → ipê → vermelho) */
.js .ramo__caule, .js .ramo__fio { stroke-dashoffset: 1; }
.js .ramo__cereja { fill: var(--cafezal); }
.js .ramo__label, .js .ramo__no--oco { opacity: 0; }
.js .hero__texto > *, .js .lista-num li { opacity: 0; }

.is-pronto .hero__texto > * { animation: sobe .7s var(--ease) both; }
.is-pronto .hero__texto > :nth-child(2) { animation-delay: .08s; }
.is-pronto .hero__texto > :nth-child(3) { animation-delay: .14s; opacity: 1; }
.is-pronto .hero__texto > :nth-child(4) { animation-delay: .4s; }
.is-pronto .lista-num li { animation: sobe .6s var(--ease) both; animation-delay: calc(.2s + var(--i) * .09s); }
.is-pronto .ramo__caule { animation: desenha 1.4s var(--ease) .1s forwards; }
.is-pronto .ramo__fio { animation: desenha .8s var(--ease) 1.8s forwards; }
.is-pronto .ramo__label, .is-pronto .ramo__no--oco { animation: aparece .5s var(--ease) 2.3s forwards; }
.is-pronto .ramo__cereja { animation: amadurece 1.3s ease-in-out forwards; animation-delay: calc(.6s + var(--i) * 55ms); }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }
@keyframes amadurece {
  0% { fill: var(--cafezal); }
  45% { fill: var(--ipe); }
  100% { fill: var(--cereja); }
}

/* seções: fade + translate leve via IntersectionObserver */
.js [data-reveal].reveal-espera { opacity: 0; transform: translateY(28px); }
.js [data-reveal].reveal-espera.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal-stagger].reveal-espera > * { opacity: 0; transform: translateY(24px); }
.js [data-reveal-stagger].reveal-espera.is-in > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- 19. Movimento reduzido: desliga tudo e mostra o estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .preloader { display: none; }
  .js .ramo__caule, .js .ramo__fio { stroke-dashoffset: 0; }
  .js .ramo__cereja { fill: var(--cereja); }
  .js .ramo__label, .js .ramo__no--oco, .js .hero__texto > *, .js .lista-num li { opacity: 1; }
  .js [data-reveal].reveal-espera, .js [data-reveal-stagger].reveal-espera > * { opacity: 1; transform: none; }
  .ponto::before { display: none; }
  .ficha__arte .pingo { animation: none; }
}