/* =========================================================================
   LOTS Therapy — folha de estilo única, escrita à mão.
   Substitui bootstrap.css + fonts.css + style.css (template RD).
   ========================================================================= */

:root {
  /* --- superfícies --- */
  --paper:       #fffdf8;
  --cream:       #f2ebdd;
  --sand:        #e8dfcb;
  --forest:      #0f3d18;
  --forest-deep: #082a12;

  /* --- tinta --- */
  --ink:         #16211a;
  --muted:       #55635a;   /* 6.22:1 sobre paper · 5.33 sobre cream · 4.78 sobre sand */
  --cream-dim:   #ded5c4;   /* 8.48:1 sobre forest */
  --cream-deep:  #d8cfbe;   /* 10.06:1 sobre forest-deep */

  /* --- ouro (do próprio logotipo) --- */
  --gold:        #d4ad3a;   /* preenchimento de botão e filetes */
  --gold-ink:    #7d5a12;   /* ouro como TEXTO em fundo claro — 4.74:1 no pior caso */
  --gold-light:  #e3c887;   /* ouro como TEXTO em fundo escuro — 7.57:1 */

  /* --- linhas --- */
  --line:        #d9d0bf;
  --line-dark:   rgba(227, 200, 135, .24);

  /* --- escala tipográfica: 5 degraus, piso em 12px --- */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-lg:   19px;
  --t-xl:   24px;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --pad-x: clamp(22px, 6vw, 112px);
  --pad-y: clamp(72px, 9vw, 118px);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* Foco visível — ausente no site de referência, e este é um site todo feito de links. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; z-index: 100; left: 16px; top: -60px;
  padding: 12px 20px; background: var(--forest-deep); color: var(--paper);
  font-size: var(--t-sm); font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

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

/* =========================================================================
   Tipografia
   ========================================================================= */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -.025em;
}

h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.03em; }
h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; }

/* O gesto de assinatura: segunda metade do título em itálico dourado. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--gold-ink); }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em { color: var(--gold-light); }

p { margin: 0; }

.eyebrow {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.on-dark .eyebrow { color: var(--gold-light); }

.lede  { font-size: var(--t-lg); line-height: 1.55; color: var(--ink); }
.body  { font-size: var(--t-base); line-height: 1.75; color: var(--muted); }
.small { font-size: var(--t-sm); line-height: 1.7;  color: var(--muted); }
.on-dark .lede  { color: var(--paper); }
.on-dark .body  { color: var(--cream-dim); }
.on-dark .small { color: var(--cream-dim); }

/* =========================================================================
   Layout
   ========================================================================= */

.section    { padding: var(--pad-y) var(--pad-x); }
.on-cream   { background: var(--cream); }
.on-paper   { background: var(--paper); }
.on-forest  { background: var(--forest);      color: var(--paper); }
.on-deep    { background: var(--forest-deep); color: var(--paper); }

.section-head {
  display: grid;
  grid-template-columns: 1.15fr .6fr;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  margin-bottom: clamp(40px, 5vw, 62px);
}
.section-head h2 { margin-top: 18px; max-width: 15ch; }

/* =========================================================================
   Botões e links
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px;
  background: var(--gold); color: var(--forest-deep);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); background: #e0bd55; box-shadow: 0 10px 24px rgba(8, 42, 18, .18); }
.btn svg { flex: none; }

.btn-sm   { min-height: 44px; padding: 0 20px; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.btn-dark { background: var(--forest); color: var(--paper); }
.btn-dark:hover { background: #1a5726; }
.btn-ghost {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .45);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transition: gap .2s ease;
}
.link-arrow:hover { gap: 22px; }
.on-dark .link-arrow { color: var(--gold-light); }

.link-under {
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  font-size: var(--t-sm);
}

/* =========================================================================
   Cabeçalho + navegação
   ========================================================================= */

.site-header {
  position: fixed; z-index: 40; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  height: 88px;
  padding: 0 var(--pad-x);
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  transition: background .3s ease, height .3s ease, border-color .3s ease;
}
.site-header.is-stuck {
  height: 72px;
  background: var(--forest-deep);
  border-bottom-color: var(--line-dark);
  box-shadow: 0 6px 26px rgba(8, 42, 18, .28);
}
/* Páginas sem hero escuro começam já sólidas. */
.site-header.is-solid { background: var(--forest-deep); border-bottom-color: var(--line-dark); }

.brand { display: flex; align-items: center; }
.brand img { width: auto; height: 50px; transition: height .3s ease; }
.site-header.is-stuck .brand img { height: 42px; }

.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); }
.site-nav a {
  position: relative;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .88);
  transition: color .2s;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { color: #fff; }
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -7px;
  height: 1px; background: var(--gold-light);
  transition: right .25s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current='page']::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.nav-mobile-only { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  display: block; width: 22px; height: 1.5px;
  background: var(--paper);
  transition: background .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 1.5px; background: var(--paper);
  transition: transform .25s ease, top .25s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { top: 0; transform: rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: 640px; height: 100svh; max-height: 900px;
  overflow: hidden;
  color: var(--paper);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(6, 32, 14, .96) 0%,
    rgba(8, 42, 18, .88) 38%,
    rgba(7, 34, 15, .45) 68%,
    rgba(5, 24, 11, .2) 100%);
}
.hero-copy {
  position: relative;
  width: min(720px, 58vw);
  margin-left: var(--pad-x);
  padding-top: 88px;
}
.hero-copy h1 { margin: 22px 0 22px; max-width: 14ch; }
.hero-copy .body { max-width: 52ch; color: rgba(255, 255, 255, .9); }

.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 36px; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .85);
}
.trust-row, .trust-row li { margin: 0; padding-left: 0; list-style: none; }
.trust-row { padding-top: 24px; }
.trust-row li { display: flex; align-items: center; gap: 8px; }
.trust-row svg { flex: none; color: var(--gold-light); }

/* =========================================================================
   Manifesto
   ========================================================================= */

.manifesto {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}
.manifesto h2 { margin-top: 18px; max-width: 16ch; }
.manifesto .body { margin-top: 26px; }

.benefit-list { margin: 30px 0 34px; padding: 0; list-style: none; }
.benefit-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink);
}
.benefit-list li:last-child { border-bottom: 1px solid var(--line); }
.benefit-list svg { margin-top: 3px; color: var(--gold-ink); }

.manifesto-figure {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(30px, 5vw, 60px);
  background: var(--paper);
  border: 1px solid var(--line);
}
.manifesto-figure img { width: min(340px, 80%); mix-blend-mode: multiply; }
/* Legenda no fluxo, não absoluta: assim ela nunca cruza a borda em tela
   estreita, por mais longo que fique o texto. */
.manifesto-figure figcaption {
  margin-top: clamp(20px, 4vw, 32px);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink);
  text-align: center;
}

/* =========================================================================
   Faixa de queixas
   ========================================================================= */

.strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 26px;
  padding: 20px var(--pad-x);
  background: var(--sand);
  color: var(--muted);
  font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase;
}
.strip span { display: flex; align-items: center; gap: 26px; }
.strip svg { color: var(--gold-ink); }
/* Cada item carrega o próprio separador; quando a linha quebra, ele fica
   pendurado na ponta. No mobile some e o espaçamento faz o trabalho. */
@media (max-width: 860px) {
  .strip { gap: 10px 22px; padding: 16px var(--pad-x); }
  .strip span { gap: 0; }
  .strip svg { display: none; }
}

/* =========================================================================
   Grade de benefícios
   ========================================================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.card {
  display: flex; flex-direction: column;
  min-height: 330px;
  padding: clamp(24px, 2.4vw, 34px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, .5);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  position: relative; z-index: 1;
  transform: translateY(-4px);
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(22, 33, 26, .1);
}
.card-num {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: var(--t-lg); font-style: italic;
  color: var(--gold-ink);
}
.card-num svg { color: var(--muted); }
.card-tag {
  margin: clamp(34px, 4vw, 58px) 0 12px;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.card h3 { margin-bottom: 14px; }
.card .small { margin-top: auto; }
.card > .small:first-of-type { margin-top: 0; }

/* =========================================================================
   Produtos
   ========================================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.product-card {
  display: flex; flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
  position: relative; z-index: 1;
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(22, 33, 26, .12);
}
.product-card figure {
  display: grid; place-items: center;
  margin: 0 0 20px;
  aspect-ratio: 1;
  background: var(--cream);
  overflow: hidden;
}
.product-card img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.product-card:hover img { transform: scale(1.05); }
.product-card h3 {
  font-size: var(--t-xl);
  line-height: 1.15;
  margin-bottom: 6px;
}
.product-card .card-tag { margin: 0 0 10px; }
.product-card .link-arrow {
  margin-top: auto; padding-top: 18px;
  align-self: flex-start;
  border-bottom-color: var(--line);
  color: var(--muted);
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.product-card:hover .link-arrow { color: var(--ink); border-bottom-color: var(--ink); }

.product-grid-status {
  grid-column: 1 / -1;
  padding: 60px 24px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: var(--t-sm);
}

/* esqueleto de carregamento */
.skeleton { background: var(--paper); padding: 26px 24px 22px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.skeleton .bar { background: var(--cream); animation: pulse 1.4s ease-in-out infinite; }
.skeleton .bar.sq  { aspect-ratio: 1; margin-bottom: 20px; }
.skeleton .bar.txt { height: 14px; margin-bottom: 10px; }
.skeleton .bar.txt.short { width: 55%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* -------------------------------------------------------------------------
   Carrossel de produtos
   Trilho com scroll-snap nativo: arrasto no touch e trackpad funcionam de
   graça; os botões só empurram o scroll. Sem biblioteca.
   ------------------------------------------------------------------------- */

.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: 1px solid var(--line);
  border-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: -2px; }

.carousel-track > .product-card,
.carousel-track > .skeleton {
  scroll-snap-align: start;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

/* Estado vazio / erro ocupa a faixa inteira, sem virar uma coluna estreita. */
.carousel.is-empty .carousel-track {
  display: block;
  border-right: 1px solid var(--line);
}
.carousel.is-empty .product-grid-status { border: 0; }

.carousel-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
}

.carousel-rail {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}
.carousel-rail span {
  position: absolute; inset: 0 auto 0 0;
  height: 1px;
  background: var(--gold-ink);
  transform-origin: left center;
  transition: transform .25s ease;
}

.carousel-controls { display: flex; align-items: center; gap: 10px; }
.carousel-count {
  margin-right: 6px;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-base); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.carousel-btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.carousel-btn:disabled { opacity: .32; cursor: default; }

@media (max-width: 1200px) { .carousel-track { grid-auto-columns: calc(100% / 3); } }
@media (max-width: 860px)  { .carousel-track { grid-auto-columns: calc(100% / 2); } }
@media (max-width: 560px)  {
  .carousel-track { grid-auto-columns: 78%; }  /* espia o próximo card */
  .carousel-count { display: none; }
}

/* =========================================================================
   Sobre
   ========================================================================= */

.about { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; }
.about-visual {
  position: relative;
  display: grid; place-items: center;
  padding: 60px 24px;
  background: var(--forest);
  overflow: hidden;
}
.about-visual::before,
.about-visual::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid var(--line-dark);
  pointer-events: none;
}
.about-visual::before { width: min(560px, 88vw); aspect-ratio: 1; }
.about-visual::after  { width: min(420px, 68vw); aspect-ratio: 1; border-color: rgba(227, 200, 135, .14); }

.about-visual .portrait {
  position: relative; z-index: 1;
  width: min(340px, 62vw); aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .08), 0 26px 60px rgba(0, 0, 0, .3);
}
/* object-fit em vez de background-position em pixels fixos: o enquadramento
   não quebra em larguras intermediárias. */
.about-visual .portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 32%;
}
.about-note {
  position: absolute; z-index: 2; right: 7%; bottom: 11%;
  width: 196px; padding: 22px;
  background: var(--gold);
  color: var(--forest-deep);
}
.about-note strong {
  display: block;
  font-family: var(--font-display); font-size: var(--t-base); font-weight: 600;
  line-height: 1.3; letter-spacing: .03em;
}
.about-note span { display: block; margin-top: 8px; font-size: var(--t-xs); }

.about-copy { align-self: center; padding: clamp(64px, 7vw, 100px) var(--pad-x); }
.about-copy h2 { margin: 18px 0 0; max-width: 15ch; }
.about-copy .lede { margin: 30px 0 16px; font-family: var(--font-display); }
.about-copy .body + .body { margin-top: 16px; }

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 34px; padding: 0; list-style: none; }
.tags li {
  padding: 9px 13px;
  border: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   Ritual (etapas)
   ========================================================================= */

.ritual-head {
  display: grid; grid-template-columns: .32fr 1fr;
  align-items: start; gap: clamp(20px, 4vw, 44px);
}
.ritual-head h2 { max-width: 18ch; }

.steps {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--line-dark);
}
.steps article {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px;
  padding: 34px 32px 34px 0;
  border-bottom: 1px solid var(--line-dark);
}
.steps article:nth-child(odd)  { border-right: 1px solid var(--line-dark); }
.steps article:nth-child(even) { padding-left: 38px; }
.steps .step-num {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-base); color: var(--gold-light);
}
.steps h3 { margin-bottom: 10px; }

.ritual-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px; margin-top: 44px;
}

/* =========================================================================
   Prova social
   ========================================================================= */

.proof {
  display: grid; grid-template-columns: .7fr 1.3fr;
  align-items: center;
  gap: clamp(44px, 8vw, 130px);
}
.proof-badge {
  position: relative;
  display: grid; place-items: center;
  gap: 22px;
  padding: clamp(38px, 5vw, 66px);
  border: 1px solid var(--line);
  text-align: center;
}
.proof-badge::before {
  content: ''; position: absolute; inset: 13px;
  border: 1px solid var(--line);
  pointer-events: none;
}
/* O lockup inteiro, sem recorte: largura livre e altura automática. */
.proof-badge img { position: relative; width: min(320px, 82%); height: auto; }
.proof-badge span {
  position: relative;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.proof-copy h2 { margin: 18px 0 0; max-width: 16ch; }
.proof-copy .body { max-width: 54ch; margin: 24px 0 30px; }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 120px); }
.faq h2 { margin-top: 18px; max-width: 14ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-lg); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--gold-ink); transition: transform .25s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details .small { max-width: 62ch; margin: -4px 48px 24px 0; }

/* =========================================================================
   Contato
   ========================================================================= */

.contact { display: grid; grid-template-columns: 1.1fr .9fr; }
.contact-copy { padding: clamp(70px, 8vw, 105px) var(--pad-x); }
.contact-copy h2 { margin: 18px 0 0; max-width: 15ch; }
.contact-copy .body { max-width: 52ch; margin: 24px 0 32px; }
.contact-copy .small { margin-top: 18px; max-width: 46ch; }

.contact-card {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 6vw, 76px) clamp(24px, 5vw, 68px);
  background: var(--sand);
  color: var(--ink);
}
.contact-card .eyebrow { color: var(--gold-ink); }
.contact-card h3 { margin: 12px 0 20px; font-size: clamp(28px, 3vw, 38px); }
.contact-rows { margin: 26px 0 0; padding: 0; list-style: none; }
.contact-rows li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.contact-rows dt, .contact-rows .label { color: var(--muted); }
.contact-rows strong { font-weight: 600; }
.contact-card > .link-arrow { align-self: flex-start; }

/* =========================================================================
   Rodapé
   ========================================================================= */

.site-footer {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  align-items: center; gap: 26px;
  padding: 44px var(--pad-x);
  background: var(--forest-deep);
  color: var(--cream-deep);
  font-size: var(--t-xs);
}
.site-footer .brand img { height: 46px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer nav a { letter-spacing: .09em; text-transform: uppercase; }
.site-footer nav a:hover { color: var(--gold-light); }
.footer-legal { text-align: right; }
.footer-legal p { margin: 0; }
.footer-credit { margin-top: 6px !important; color: #b9b1a1; }
.footer-credit a {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(227, 200, 135, .38);
  color: var(--gold-light);
  transition: border-color .2s ease, color .2s ease;
}
.footer-credit a:hover { border-bottom-color: var(--gold-light); color: #f0dcaa; }

/* =========================================================================
   Botão flutuante do WhatsApp
   Dentro da paleta — nada de verde-Meta cru sobre o verde da marca.
   ========================================================================= */

.fab {
  position: fixed; z-index: 30; right: 20px; bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--forest-deep);
  color: var(--gold-light);
  font-size: var(--t-sm); font-weight: 600;
  box-shadow: 0 12px 30px rgba(8, 42, 18, .35);
  /* --fab-lift é escrito pelo JS: quanto o botão precisa subir para
     estacionar acima do rodapé em vez de passar por cima dele. */
  transform: translateY(calc(var(--fab-lift, 0px) * -1));
  transition: background .2s ease;
}
.fab:hover {
  transform: translateY(calc((var(--fab-lift, 0px) + 2px) * -1));
  background: var(--forest);
}
.fab svg { flex: none; }

/* =========================================================================
   Revelação ao rolar
   ========================================================================= */

.reveal { opacity: 0; transform: translateY(26px); }
.reveal-ready { transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .27s; }

/* =========================================================================
   Página de produto
   ========================================================================= */

.product-page { padding-top: 88px; }

.product-detail {
  display: grid; grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: clamp(36px, 6vw, 90px);
}
.product-figure {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--line);
}
.product-figure::before {
  content: ''; position: absolute; inset: 16px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.product-figure img {
  position: relative;
  width: 78%; height: 78%;
  object-fit: contain;
}
.product-info h1 { margin: 18px 0 0; font-size: clamp(36px, 4.4vw, 60px); }
.product-rule { width: 64px; height: 2px; margin: 26px 0 30px; background: var(--gold); }

.product-body { font-size: var(--t-base); line-height: 1.8; color: var(--muted); }
.product-body p { margin: 0 0 16px; }
.product-body p:empty { display: none; }
.product-body p:last-child { margin-bottom: 0; }
/* O CMS injeta cor e realce inline. Texto colado do Word chega com
   `background-color: #fff`, que vira um retângulo branco sobre o creme. */
.product-body [style*='color'] { color: inherit !important; }
.product-body [style*='background'] { background: transparent !important; }
/* <strong> sozinho no parágrafo = subtítulo de ativo; <strong> no meio da
   frase (ex.: "ESSÊNCIA: ...") continua sendo só negrito, sem perder o espaço. */
.product-body strong { color: var(--forest); font-weight: 600; }
.product-body p > strong:only-child {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase;
}
.product-body ul { margin: 0 0 16px; padding-left: 20px; }
.product-body li { margin-bottom: 8px; }

.product-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  padding: 26px var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.pager a { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); font-weight: 500; }
.pager a:hover { color: var(--gold-ink); }
.pager .pager-label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.pager a[hidden] { visibility: hidden; }

/* =========================================================================
   Responsivo
   ========================================================================= */

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: .9fr 1.1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-legal { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 860px) {
  :root { --pad-y: clamp(60px, 12vw, 80px); }

  /* Menu real no mobile — não some, vira painel. */
  .nav-toggle { display: flex; }
  .header-actions > .btn { display: none; }
  .nav-mobile-only { display: block; }
  .site-nav {
    position: fixed; inset: 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 8px;
    padding: 0 var(--pad-x);
    background: var(--forest-deep);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .site-nav a { font-family: var(--font-display); font-size: clamp(28px, 7.5vw, 40px); padding: 11px 0; }
  .site-nav .nav-mobile-only { color: var(--gold-light); }
  .site-nav a::after { bottom: 4px; }
  .nav-toggle, .brand { position: relative; z-index: 2; }

  /* height:100svh + align-items:end empurrava o conteúdo alto para debaixo
     do cabeçalho fixo. Com min-height o hero cresce quando precisa, e o
     padding-top reserva a faixa do cabeçalho. */
  .hero { align-items: end; height: auto; min-height: 100svh; max-height: none; }
  .hero-scrim {
    background: linear-gradient(0deg,
      rgba(6, 32, 14, .97) 0%,
      rgba(8, 42, 18, .9) 52%,
      rgba(5, 24, 11, .34) 100%);
  }
  .hero-copy { width: auto; margin: 0; padding: 112px var(--pad-x) 124px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
  .hero-actions .link-under { align-self: center; }
  .trust-row { margin-top: 30px; padding-top: 18px; }

  .section-head,
  .manifesto,
  .about,
  .ritual-head,
  .proof,
  .faq,
  .contact,
  .product-detail { grid-template-columns: 1fr; }

  .section-head { gap: 20px; }
  .manifesto { gap: 40px; }
  .card-grid, .steps { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .steps article,
  .steps article:nth-child(even) { padding: 26px 0; border-right: 0; }

  .about-visual { min-height: 500px; }
  .about-note { right: 5%; bottom: 6%; }

  .proof { gap: 44px; }
  .faq summary { font-size: var(--t-base); }

  .product-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .product-card { padding: 18px 16px; }
  .product-card h3 { font-size: var(--t-lg); }

  .site-footer { grid-template-columns: 1fr; gap: 20px; }
  .footer-legal { text-align: left; }

  .fab { right: 14px; bottom: 22px; padding: 13px 18px; }
  .product-page { padding-top: 72px; }
}

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

@media print {
  .site-header, .fab, .pager, .strip { display: none; }
  body { background: #fff; color: #000; }
}