/* ==========================================================================
   Cerrô · Banho do Cerrado
   Estilo "spa": calmo, fluido, sem arestas. Nada aqui tem pressa.

   Princípios desta folha:
     · quase nenhuma linha reta ou canto vivo, tudo tem raio generoso
     · transições longas (700–1200ms) com desaceleração suave
     · contraste baixo, luz quente, muito espaço para respirar
     · o conteúdo aparece com calma conforme a pessoa rola a página
   ========================================================================== */

:root {
  /* --- Paleta: areia clara, barro, vapor -----------------------------------
     Os três tons de fundo formam degraus perceptíveis de propósito. Na versão
     anterior eles quase se equivaliam e a faixa alternada sumia: a página
     virava um campo bege contínuo, sem hierarquia, principalmente em tela
     comum ou sob luz forte.
     -------------------------------------------------------------------------- */
  --areia:        #F7F1E8;  /* fundo principal */
  --areia-morna:  #EADDC8;  /* faixas alternadas, agora com degrau visível */
  --papel:        #FFFCF7;  /* cartões e painéis, o tom mais claro dos três */
  --vapor:        #FFFCF7;  /* apelido de --papel, mantido por compatibilidade */
  --barro:        #AF6544;  /* destaque / botões */
  --barro-escuro: #925034;
  --terra:        #3A2A20;  /* texto principal */
  --terra-suave:  #6B5949;  /* texto secundário: contraste 5,9:1 sobre a areia */
  --carvao:       #2A1E18;  /* seções escuras */
  --dourado:      #C79355;
  --linha:        rgba(107, 89, 73, .26);

  /* --- Acentos por ritual ------------------------------------------------- */
  --despertar:    #A84257;
  --pureza:       #A08B6F;
  --sol:          #C08B45;

  /* --- Tipografia --------------------------------------------------------- */
  --serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --sans:  'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- Medidas e movimento ------------------------------------------------ */
  --largura: 1180px;
  --gap: clamp(1.25rem, 3.2vw, 2.5rem);

  --raio-suave:  18px;
  --raio-cartao: 26px;
  --raio-grande: 40px;
  --raio-organico: 58% 42% 46% 54% / 45% 48% 52% 55%;

  --calma: cubic-bezier(.19, 1, .22, 1);   /* desaceleração longa */
  --lenta: 900ms var(--calma);
  --media: 600ms var(--calma);

  --sombra-suave: 0 4px 24px rgba(63, 46, 36, .05);
  --sombra-media: 0 18px 50px rgba(63, 46, 36, .10);
  --sombra-alta:  0 30px 70px rgba(63, 46, 36, .14);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--terra);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.85;          /* respiro entre as linhas */
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  /* Fundo com dois halos de luz muito suaves, para dar sensação de vapor */
  background-color: var(--areia);
  background-image:
    radial-gradient(1100px 700px at 12% -5%,  rgba(199, 147, 85, .13), transparent 62%),
    radial-gradient(900px 650px at 92% 22%,   rgba(175, 101, 68, .09), transparent 60%),
    radial-gradient(1000px 800px at 40% 105%, rgba(160, 139, 111, .11), transparent 62%);
  background-attachment: fixed;
}

/* Fundo fixo é bonito e caro. Em tela de toque, o navegador precisa repintar
   o fundo da página inteira a cada quadro de rolagem, e no iPhone isso trava
   de um jeito visível. Como os halos são gradientes muito suaves e enormes,
   deixá-los rolar junto com a página não muda nada que se perceba. */
@media (hover: none), (max-width: 760px) {
  body { background-attachment: scroll; }
}

/* height: auto na base é uma proteção, não enfeite. Toda tag de imagem
   declara width e height para reservar espaço e evitar salto de layout, e
   esse height entra como altura real sempre que o CSS não disser o contrário.
   Sem esta linha, qualquer regra que defina só a largura faz a imagem esticar.
   Regras mais específicas (height: 100%, por exemplo) continuam vencendo. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 0 .55em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(2.7rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); }

/* Peso 400 só no texto de leitura. No peso 300 a fonte parecia mais fraca do
   que o contraste real, e o olho cansava antes de chegar ao fim do parágrafo. */
p, li, .intro { font-weight: 400; }

p { margin: 0 0 1.35em; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: rgba(175, 101, 68, .18); }

/* ==========================================================================
   Estrutura
   ========================================================================== */

.container { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
.container-estreito { width: min(100% - 2.5rem, 720px); margin-inline: auto; }

/* O respiro anterior chegava a 10rem em cima e embaixo. Quando duas seções se
   encontravam, davam mais de 300px de vazio, e telas inteiras ficavam em
   branco. Calma não é o mesmo que vazio. */
.secao { padding: clamp(3.25rem, 6.5vw, 6rem) 0; position: relative; }

/* Duas seções seguidas não somam respiro: a segunda começa mais cedo */
.secao + .secao { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* Faixas alternadas com bordas arredondadas, sem corte reto */
.secao--areia {
  background: var(--areia-morna);
  border-radius: var(--raio-grande);
  margin-inline: clamp(0px, 2vw, 28px);
}

.secao--escura {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(199,147,85,.18), transparent 60%),
    var(--carvao);
  color: rgba(247, 241, 232, .8);
  border-radius: var(--raio-grande);
  margin-inline: clamp(0px, 2vw, 28px);
}
.secao--escura h1, .secao--escura h2, .secao--escura h3 { color: var(--areia); }
.secao--escura .intro { color: rgba(247, 241, 232, .72); }

.olho {
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--barro);
  margin-bottom: 1.4rem;
  display: block;
}
.secao--escura .olho { color: var(--dourado); }

.centro { text-align: center; }
.intro { max-width: 60ch; color: var(--terra-suave); font-size: 1.02rem; }
.centro .intro { margin-inline: auto; }

/* Filete com degradê, sem começo nem fim duros */
.filete {
  width: 90px; height: 1px; border: 0; margin: 2.4rem 0;
  background: linear-gradient(90deg, transparent, var(--barro), transparent);
}
.centro .filete { margin-inline: auto; }

/* ==========================================================================
   Aparição suave no rolar da página
   ========================================================================== */

.aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--calma), transform .95s var(--calma);
}
.aparece.visto { opacity: 1; transform: none; }

/* Escalonamento: quem entra é cada FILHO, não o bloco inteiro.
   Antes o pai inteiro esperava para aparecer; num bloco alto como a grade de
   cards, o topo já estava na tela e ainda invisível, e a pessoa via uma faixa
   vazia no meio da página. */
.aparece--fila { opacity: 1; transform: none; }
.aparece--fila > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .85s var(--calma), transform .85s var(--calma);
}
.aparece--fila.visto > * { opacity: 1; transform: none; }
.aparece--fila.visto > *:nth-child(2) { transition-delay: 110ms; }
.aparece--fila.visto > *:nth-child(3) { transition-delay: 220ms; }
.aparece--fila.visto > *:nth-child(4) { transition-delay: 330ms; }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.15rem 2.6rem;
  background: var(--barro);
  color: var(--areia);
  border: 1px solid transparent;
  border-radius: 999px;              /* totalmente arredondado */
  font-size: .74rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--media), color var(--media),
              border-color var(--media), transform var(--media),
              box-shadow var(--media);
}
.btn:hover {
  background: var(--barro-escuro);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(175, 101, 68, .26);
}
.btn:active { transform: translateY(0); }

.btn--vazado { background: transparent; color: var(--barro); border-color: rgba(175,101,68,.45); }
.btn--vazado:hover { background: var(--barro); color: var(--areia); box-shadow: 0 14px 30px rgba(175,101,68,.22); }

.btn--claro { background: transparent; color: var(--areia); border-color: rgba(247,241,232,.42); }
.btn--claro:hover { background: var(--areia); color: var(--carvao); border-color: var(--areia); box-shadow: 0 14px 34px rgba(0,0,0,.24); }

.btn--largo { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.link-sublinhado {
  position: relative;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.link-sublinhado::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; opacity: .45;
  transform-origin: left; transition: transform var(--media), opacity var(--media);
}
.link-sublinhado:hover::after { opacity: 1; transform: scaleX(1.06); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 241, 232, .82);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--linha);
  transition: background var(--media), box-shadow var(--media);
}
.topo.rolado { background: rgba(247, 241, 232, .94); box-shadow: var(--sombra-suave); }

.topo__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.2rem 0;
}

.marca { display: flex; flex-direction: column; line-height: 1; }
.marca__nome {
  font-family: var(--serif); font-size: 2rem; font-weight: 300;
  letter-spacing: .14em; color: var(--barro);
}
.marca__assinatura {
  font-size: .52rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--terra-suave); margin-top: .45rem;
}

.menu { display: flex; gap: 2.4rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  padding-bottom: 4px;
}
.menu a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0;
  height: 1px; background: var(--barro);
  transition: left var(--media), right var(--media);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { left: 0; right: 0; }

.topo__acoes { display: flex; align-items: center; gap: 1.5rem; }

.icone-btn {
  background: none; border: 0; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  transition: color var(--media);
}
.icone-btn:hover { color: var(--barro); }
/* O icone tem 20px, e dedo nao acerta 20px. O pseudo-elemento estende a
   area de toque para ~44px sem mexer em nada do layout: se eu usasse
   padding, os espacos do cabecalho mudariam de tamanho. */
.icone-btn::before { content: ''; position: absolute; inset: -12px; }
.icone-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.15; }

.contador {
  position: absolute; top: -8px; right: -12px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--barro); color: var(--areia);
  border-radius: 999px; font-size: .6rem; line-height: 18px;
  text-align: center; letter-spacing: 0;
}
.contador[hidden] { display: none; }

.menu-toggle { display: none; }

@media (max-width: 920px) {
  .menu-toggle { display: inline-flex; }
  .menu {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0;
    background: rgba(247,241,232,.98);
    backdrop-filter: blur(18px);
    border-radius: 0 0 var(--raio-grande) var(--raio-grande);
    box-shadow: var(--sombra-media);
    padding: 1rem 1.5rem 2rem;
  }
  .menu[hidden] { display: none; }
  .menu a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--linha); }
  .menu a::after { display: none; }
  .rotulo-acao { display: none; }
}

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

/* Abertura de fora a fora: a foto do conjunto ocupa a largura toda e o texto
   vive sobre ela. Funciona porque esta foto é horizontal e tem os produtos
   agrupados no centro, sobrando respiro em cima e embaixo para a tipografia.
   (A foto quadrada de um ritual só não serve aqui: seria esticada.) */

.hero { position: relative; }

/* A foto ocupa a largura toda e fica sozinha: nenhum texto, nenhum véu,
   nada por cima. O produto é o assunto da primeira tela. */
/* A altura da faixa é generosa de propósito: quanto mais alta, menos a foto
   precisa ser cortada em cima e embaixo. O enquadramento em 45% favorece o
   topo, que é onde estão as tampas dos potes. O que se perde embaixo são as
   ervas espalhadas, que não são o produto. */
.hero__foto {
  display: block; width: 100%;
  height: clamp(300px, 54vw, 680px);
  object-fit: cover;
  object-position: center 45%;
}

/* Só o último trecho se dissolve no fundo da página, para a foto não
   terminar num corte duro. São poucos pixels: não veste os produtos. */
.hero::before {
  content: ''; position: absolute; left: 0; right: 0; z-index: 1;
  height: 70px;
  top: clamp(300px, 54vw, 680px); margin-top: -70px;
  background: linear-gradient(180deg, transparent, var(--areia));
  pointer-events: none;
}

@media (max-width: 700px) {
  /* No celular, mais altura relativa para os potes não ficarem minúsculos */
  .hero__foto { height: clamp(320px, 68vw, 480px); }
  .hero::before { top: clamp(320px, 68vw, 480px); }
}

/* Todo o texto vive abaixo da foto, sobre a areia, com leitura sem esforço */
.hero__conteudo {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 760px; margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.hero .olho { justify-content: center; }
.hero h1 { margin-bottom: .35em; }

.hero__slogan {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-style: italic; font-weight: 300; color: var(--barro);
  margin-bottom: 1.6rem; letter-spacing: .02em;
}
.hero__texto { color: var(--terra-suave); max-width: 54ch; margin-inline: auto; }
.hero__botoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; justify-content: center; }

/* ==========================================================================
   Faixa de textura, ambientação entre seções
   ========================================================================== */

.faixa-textura {
  height: clamp(150px, 20vw, 250px);
  background: center/cover no-repeat;
  /* as bordas se dissolvem no fundo da página */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  opacity: .82;
}

/* ==========================================================================
   Cartões de ritual
   ========================================================================== */

/* Três por linha. Com quatro, cada cartão ficava em 283px: o rodapé quebrava
   ("Kit R$ 120,00" e "Ver ritual" em duas linhas cada) e o texto saía com
   quatro palavras por linha. O Florescer Eterno saiu da grade e virou faixa. */
.grade-rituais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gap);
  margin-top: 3rem;
}

.cartao-ritual {
  display: flex; flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: transform var(--lenta), box-shadow var(--lenta), border-color var(--lenta);
}
.cartao-ritual:hover { border-color: rgba(175,101,68,.42); }
.cartao-ritual:hover { transform: translateY(-8px); box-shadow: var(--sombra-alta); }

/* Proporção 1:1: as fotos são quadradas, então nada é esticado nem cortado
   nas laterais, e o produto aparece inteiro. Sem véu por cima. */
.cartao-ritual__figura {
  aspect-ratio: 1 / 1; position: relative; overflow: hidden;
  background: var(--areia-morna);
}
.cartao-ritual__figura img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--calma);
}
.cartao-ritual:hover .cartao-ritual__figura img { transform: scale(1.04); }

.cartao-ritual__corpo { padding: 2rem 2rem 2.4rem; display: flex; flex-direction: column; flex: 1; }
.cartao-ritual__sub {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--barro); margin-bottom: .7rem;
}
.cartao-ritual__essencias {
  font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--terra-suave); margin-bottom: 1.2rem;
}
.cartao-ritual__desc { font-size: .93rem; color: var(--terra-suave); flex: 1; line-height: 1.75; }
.cartao-ritual__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.8rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}
.cartao-ritual__preco { font-family: var(--serif); font-size: 1.3rem; }

.cartao-ritual[data-ritual="despertar-da-terra"] .cartao-ritual__sub { color: var(--despertar); }
.cartao-ritual[data-ritual="sol-do-cerrado"]    .cartao-ritual__sub { color: var(--sol); }
.cartao-ritual[data-ritual="pureza-nativa"]     .cartao-ritual__sub { color: var(--pureza); }

.selo-breve {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2;
  background: rgba(42,30,24,.82); color: var(--areia);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
  padding: .55rem 1.1rem;
}

/* ==========================================================================
   Página do Florescer Eterno
   As quatro peças alternando de lado, e a caixa de compra.
   ========================================================================== */

.pecas-presente { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

.peca-detalhe {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
}

/* Alterna o lado da foto. Quatro blocos iguais empilhados viram lista de
   supermercado; alternando, o olho tem para onde ir. */
.peca-detalhe:nth-child(even) .peca-detalhe__figura { order: 2; }

.peca-detalhe__figura img {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--raio-cartao);
}

.peca-detalhe__texto h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: .2rem 0 .4rem;
}
.peca-detalhe__ativos {
  font-family: var(--serif); font-style: italic;
  color: var(--dourado); margin: 0 0 .9rem;
}
.peca-detalhe__texto p:last-child { margin: 0; max-width: 52ch; }

@media (max-width: 720px) {
  .peca-detalhe { grid-template-columns: 1fr; gap: 1.1rem; }
  .peca-detalhe:nth-child(even) .peca-detalhe__figura { order: 0; }
  .peca-detalhe__figura { max-width: 280px; margin-inline: auto; }
  .peca-detalhe__texto { text-align: center; }
  .peca-detalhe__texto p:last-child { margin-inline: auto; }
  .peca-detalhe__texto .etiqueta { justify-content: center; }
}

.caixa-compra {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--papel);
}
.caixa-compra__rotulo {
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--terra-suave); margin: 0;
}
.caixa-compra__preco {
  font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300; color: var(--terra); margin: .3rem 0 1.4rem;
}
.caixa-compra__preco--consulta { font-style: italic; color: var(--barro); }

.caixa-compra__lista { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.caixa-compra__lista li {
  font-family: var(--serif); font-size: 1.05rem;
  padding: .7rem 0; border-top: 1px solid var(--linha);
}
.caixa-compra__lista li span {
  display: block; font-family: var(--sans);
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-suave); margin-top: .2rem;
}
.caixa-compra__nota {
  font-size: .8rem; color: var(--terra-suave);
  text-align: center; margin: .9rem 0 0;
}

/* ==========================================================================
   Blocos de conteúdo
   ========================================================================== */

.duas-colunas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
.duas-colunas--invertido > *:first-child { order: 2; }
@media (max-width: 880px) {
  .duas-colunas { grid-template-columns: 1fr; }
  .duas-colunas--invertido > *:first-child { order: 0; }
}

.figura-emoldurada {
  aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-media);
  background: var(--areia-morna);
}
.figura-emoldurada img { width: 100%; height: 100%; object-fit: cover; }

/* Forma orgânica, para os blocos de respiro */
.figura-organica {
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--raio-organico);
  box-shadow: var(--sombra-media);
  background: var(--areia-morna);
  animation: ondular 18s ease-in-out infinite alternate;
}
.figura-organica img { width: 100%; height: 100%; object-fit: cover; }

@keyframes ondular {
  from { border-radius: 58% 42% 46% 54% / 45% 48% 52% 55%; }
  to   { border-radius: 44% 56% 58% 42% / 54% 44% 56% 46%; }
}

.passos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem); margin-top: 4rem; counter-reset: passo;
}
.passo { padding-top: 2.2rem; position: relative; }
.passo::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--barro), transparent);
  opacity: .35;
}
.secao--escura .passo::after { background: linear-gradient(90deg, var(--dourado), transparent); opacity: .45; }
.passo::before {
  counter-increment: passo; content: '0' counter(passo);
  font-family: var(--serif); font-size: 2.6rem; font-weight: 300; color: var(--barro);
  display: block; margin-bottom: .5rem; line-height: 1; opacity: .7;
}
.secao--escura .passo::before { color: var(--dourado); }
.passo h3 { font-size: 1.3rem; }
.passo p { font-size: .92rem; color: var(--terra-suave); margin: 0; }
.secao--escura .passo p { color: rgba(247,241,232,.7); }

.pilares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap); margin-top: 3.5rem;
}
.pilar {
  text-align: center; padding: 2.6rem 1.5rem;
  border-radius: var(--raio-cartao);
  transition: background var(--lenta), transform var(--lenta);
}
.pilar:hover { background: rgba(251,247,241,.7); transform: translateY(-4px); }
.secao--escura .pilar:hover { background: rgba(247,241,232,.05); }
.pilar__icone { font-size: 1.6rem; margin-bottom: 1rem; color: var(--barro); opacity: .8; }
.secao--escura .pilar__icone { color: var(--dourado); }
.pilar h3 { font-size: 1.2rem; }
.pilar p { font-size: .88rem; color: var(--terra-suave); margin: 0; }
.secao--escura .pilar p { color: rgba(247,241,232,.7); }

.botanica {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 3rem;
}
.botanica span {
  border: 1px solid var(--linha); border-radius: 999px;
  padding: .7rem 1.5rem;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-suave);
  transition: border-color var(--media), color var(--media), background var(--media);
}
.botanica span:hover { border-color: var(--barro); color: var(--barro); background: rgba(175,101,68,.05); }
.secao--escura .botanica span { border-color: rgba(247,241,232,.2); color: rgba(247,241,232,.78); }
.secao--escura .botanica span:hover { border-color: var(--dourado); color: var(--dourado); background: rgba(199,147,85,.08); }

.citacao {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.42;
  text-align: center; max-width: 22ch; margin-inline: auto;
}

/* ==========================================================================
   Página de ritual
   ========================================================================== */

.hero-ritual {
  position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0;
  border-radius: 0 0 var(--raio-grande) var(--raio-grande);
  overflow: hidden;
}
.hero-ritual::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(170deg, rgba(240,230,216,.9), rgba(247,241,232,.4));
}
.hero-ritual__grade { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (max-width: 920px) { .hero-ritual__grade { grid-template-columns: 1fr; } }

.hero-ritual__figura {
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--raio-organico);
  box-shadow: var(--sombra-alta);
  background: var(--vapor);
  animation: ondular 20s ease-in-out infinite alternate;
}
.hero-ritual__figura img {
  width: 100%; height: 100%; object-fit: cover;
  animation: respirar 30s ease-in-out infinite alternate;
}

.migalhas { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--terra-suave); margin-bottom: 1.8rem; }
.migalhas a { transition: color var(--media); }
.migalhas a:hover { color: var(--barro); }

.subtitulo-ritual { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.5vw, 1.7rem); color: var(--barro); margin-bottom: 1.2rem; }
.essencias-ritual { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--terra-suave); margin-bottom: 2.2rem; }

.para-quem {
  position: relative; padding: .2rem 0 .2rem 1.6rem;
  font-size: .95rem; color: var(--terra-suave); margin: 2.2rem 0;
}
.para-quem::before {
  content: ''; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--barro), transparent);
}

/* --- Seletor de compra -------------------------------------------------- */

.seletor {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-media);
  padding: clamp(2rem, 3.8vw, 3rem);
}
.seletor__titulo { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--terra-suave); margin-bottom: 1.8rem; }

.opcoes { display: grid; gap: .75rem; margin-bottom: 2rem; }

.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }

.opcao__caixa {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--linha); border-radius: var(--raio-suave);
  padding: 1.1rem 1.35rem;
  transition: border-color var(--media), background var(--media), transform var(--media);
}
.opcao:hover .opcao__caixa { border-color: rgba(175,101,68,.5); transform: translateX(3px); }
.opcao input:checked + .opcao__caixa { border-color: var(--barro); background: rgba(175,101,68,.055); }
.opcao input:focus-visible + .opcao__caixa { outline: 2px solid var(--barro); outline-offset: 3px; }

.opcao__marca {
  flex: none; width: 16px; height: 16px; border: 1px solid rgba(122,102,86,.45);
  border-radius: 50%; position: relative; transition: border-color var(--media);
}
.opcao input:checked + .opcao__caixa .opcao__marca { border-color: var(--barro); }
.opcao__marca::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--barro); transform: scale(0); transition: transform var(--media);
}
.opcao input:checked + .opcao__caixa .opcao__marca::after { transform: scale(1); }

.opcao__info { flex: 1; min-width: 0; }
.opcao__nome { display: block; font-size: .96rem; }
.opcao__detalhe { display: block; font-size: .74rem; color: var(--terra-suave); letter-spacing: .04em; }
.opcao__preco { font-family: var(--serif); font-size: 1.25rem; white-space: nowrap; }

.opcao--kit .opcao__caixa { border-color: rgba(175,101,68,.4); background: rgba(175,101,68,.04); }
.selo-economia {
  display: inline-block; margin-left: .6rem; vertical-align: middle;
  background: var(--barro); color: var(--areia); border-radius: 999px;
  font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .7rem;
}

.linha-quantidade { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.6rem; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; }
.qtd button {
  width: 42px; height: 44px; background: none; border: 0; cursor: pointer;
  font-size: 1.05rem; color: var(--terra-suave); border-radius: 999px;
  transition: color var(--media), background var(--media);
}
.qtd button:hover { color: var(--barro); background: rgba(175,101,68,.07); }
.qtd span { min-width: 34px; text-align: center; font-size: .95rem; }

/* --- Seletor de varios itens --------------------------------------------
   Antes cada linha era um radio: so dava para levar uma opcao por vez.
   Agora cada uma tem o seu contador, e quantidade zero e o "nao quero".
   A linha acende quando passa de zero, para a escolha ficar visivel sem
   depender de o olho achar um numerinho pequeno.
   ---------------------------------------------------------------------- */
.opcao--multi { cursor: default; }
.opcao--multi:hover .opcao__caixa { transform: none; border-color: rgba(175,101,68,.3); }
.opcao--multi.opcao--ativa .opcao__caixa {
  border-color: var(--barro); background: rgba(175,101,68,.055);
}

.qtd--linha { flex: none; }
.qtd--linha button { width: 34px; height: 34px; font-size: .95rem; }
.qtd--linha span { min-width: 24px; font-size: .86rem; }

@media (max-width: 460px) {
  /* Em tela estreita o preco e o contador nao cabem lado a lado com o nome. */
  .opcao--multi .opcao__caixa { flex-wrap: wrap; gap: .7rem 1rem; }
  .opcao--multi .opcao__info { flex: 1 1 100%; }
  .opcao--multi .opcao__preco { flex: 1; }
}

.total-seletor { font-family: var(--serif); font-size: 2rem; }
.total-seletor small { font-family: var(--sans); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--terra-suave); display: block; }

.aviso-parcelas { font-size: .76rem; color: var(--terra-suave); text-align: center; margin: 1.2rem 0 0; }

/* --- Produtos em detalhe ------------------------------------------------ */

.produto-detalhe {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  position: relative;
}
.produto-detalhe::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha), transparent);
}
.produto-detalhe:last-child::after { display: none; }
.produto-detalhe:nth-child(even) > *:first-child { order: 2; }
@media (max-width: 880px) {
  .produto-detalhe { grid-template-columns: 1fr; }
  .produto-detalhe:nth-child(even) > *:first-child { order: 0; }
}

.produto-detalhe__tipo { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--barro); margin-bottom: .8rem; }
.produto-detalhe__meta {
  display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.8rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--linha); font-size: .82rem; color: var(--terra-suave);
}
.produto-detalhe__meta b {
  font-weight: 300; color: var(--terra); display: block;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: .25rem;
}

/* ==========================================================================
   Encontre o seu ritual, guia de três perguntas
   ========================================================================== */

.guia {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-media);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 780px; margin-inline: auto;
  min-height: 430px;
  display: flex; align-items: center;
}
.guia > * { width: 100%; }

/* Cada passo entra deslizando de leve, sem sobressalto */
.guia__passo, .guia__resultado { animation: entrar-guia 620ms var(--calma); }
@keyframes entrar-guia {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.guia__marcadores { display: flex; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.guia__marcador {
  width: 34px; height: 2px; border-radius: 2px;
  background: var(--linha);
  transition: background var(--media);
}
.guia__marcador--feito { background: rgba(168,92,60,.45); }
.guia__marcador--atual { background: var(--barro); }

.guia__contagem {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--barro); text-align: center; margin-bottom: 1rem;
}

.guia__titulo {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  text-align: center; margin-bottom: .5rem;
}
.guia__ajuda {
  text-align: center; font-size: .88rem; color: var(--terra-suave);
  margin-bottom: 2.2rem;
}

.guia__opcoes { display: grid; gap: .8rem; }

.guia__opcao {
  display: flex; flex-direction: column; gap: .2rem;
  text-align: left; cursor: pointer;
  padding: 1.15rem 1.5rem;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio-suave);
  transition: border-color var(--media), background var(--media), transform var(--media);
}
.guia__opcao:hover {
  border-color: var(--barro);
  background: rgba(168,92,60,.045);
  transform: translateX(4px);
}
.guia__opcao-texto { font-size: 1rem; color: var(--terra); }
.guia__opcao-detalhe { font-size: .8rem; color: var(--terra-suave); }

.guia__voltar {
  display: block; margin: 1.8rem auto 0;
  background: none; border: 0; cursor: pointer;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra-suave);
  transition: color var(--media);
}
.guia__voltar:hover { color: var(--barro); }

/* --- Resultado --------------------------------------------------------- */

.guia__resultado-grade {
  display: grid; grid-template-columns: 190px 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.5rem); align-items: center;
  margin-top: .5rem;
}
@media (max-width: 620px) {
  .guia__resultado-grade { grid-template-columns: 1fr; text-align: center; }
  .guia__resultado-figura { max-width: 200px; margin-inline: auto; }
  .guia__resultado-acoes { justify-content: center; }
}

.guia__resultado-figura {
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--raio-organico);
  box-shadow: var(--sombra-media);
  animation: ondular 18s ease-in-out infinite alternate;
}
.guia__resultado-figura img { width: 100%; height: 100%; object-fit: cover; }

.guia__resultado-nome { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: .2rem; }
.guia__resultado-sub {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--barro); margin-bottom: .5rem;
}
.guia__resultado-essencias {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terra-suave); margin-bottom: 1.1rem;
}
.guia__resultado-texto { font-size: .93rem; color: var(--terra-suave); margin-bottom: 1.6rem; }

.guia__resultado[data-ritual="despertar-da-terra"] .guia__resultado-sub { color: var(--despertar); }
.guia__resultado[data-ritual="pureza-nativa"]      .guia__resultado-sub { color: var(--pureza); }
.guia__resultado[data-ritual="sol-do-cerrado"]     .guia__resultado-sub { color: var(--sol); }

.guia__resultado-acoes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.guia__refazer {
  background: none; border: 0; cursor: pointer;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra-suave); transition: color var(--media);
}
.guia__refazer:hover { color: var(--barro); }

.guia__ressalva {
  margin: 2rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  font-size: .85rem; color: var(--terra-suave); text-align: center;
}
.guia__ressalva a { border-bottom: 1px solid var(--barro); color: var(--barro); }

/* ==========================================================================
   Perguntas frequentes, em sanfona
   ========================================================================== */

.perguntas { max-width: 760px; margin: 3.5rem auto 0; }

.pergunta { border-bottom: 1px solid var(--linha); }

.pergunta__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; text-align: left; cursor: pointer;
  padding: 1.6rem 0; background: none; border: 0;
  font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--terra);
  transition: color var(--media);
}
.pergunta__botao:hover { color: var(--barro); }

/* Sinal de + que vira − ao abrir, sem ícone externo */
.pergunta__sinal { position: relative; flex: none; width: 16px; height: 16px; }
.pergunta__sinal::before,
.pergunta__sinal::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: var(--barro);
  transition: transform var(--media), opacity var(--media);
}
.pergunta__sinal::after { transform: rotate(90deg); }
.pergunta__botao[aria-expanded="true"] .pergunta__sinal::after { transform: rotate(0deg); opacity: 0; }

.pergunta__resposta {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--calma);
}
.pergunta__resposta[data-aberta="true"] { grid-template-rows: 1fr; }
.pergunta__resposta > div { overflow: hidden; }
.pergunta__resposta p {
  margin: 0 0 1.6rem; padding-right: 2.5rem;
  font-size: .93rem; color: var(--terra-suave);
}

/* ==========================================================================
   Barra de compra fixa no celular (páginas de ritual)
   ========================================================================== */

.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));
  background: rgba(253,250,246,.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -8px 28px rgba(58,42,33,.10);
  transform: translateY(110%);
  transition: transform 480ms var(--calma);
}
.barra-compra.visivel { transform: none; }
.barra-compra__info { min-width: 0; }
.barra-compra__nome {
  display: block; font-family: var(--serif); font-size: 1.05rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-compra__preco { display: block; font-size: .78rem; color: var(--terra-suave); }
.barra-compra .btn { padding: .95rem 1.6rem; white-space: nowrap; }

@media (max-width: 780px) {
  .barra-compra { display: flex; }
  /* espaço para a barra não cobrir o rodapé */
  body[data-pagina="rituais"] .rodape__base,
  body[data-pagina="trio"] .rodape__base { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Trio de Sabonetes, três círculos sobrepostos
   Enquanto não houver foto do conjunto, cada sabonete aparece num close
   recortado da foto do próprio ritual.
   ========================================================================== */

.trio-circulos {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(300px, 40vw, 460px);
}

.trio-circulo {
  width: clamp(140px, 20vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: 230%;
  background-position: 54% 80%;   /* centraliza o sabonete dentro da foto */
  box-shadow: var(--sombra-media), 0 0 0 8px var(--areia);
  transition: transform var(--lenta), box-shadow var(--lenta);
}
.trio-circulo:nth-child(1) { transform: translateX(18%) rotate(-2deg); z-index: 1; }
.trio-circulo:nth-child(2) { transform: translateY(-9%) scale(1.1); z-index: 3; }
.trio-circulo:nth-child(3) { transform: translateX(-18%) rotate(2deg); z-index: 2; }

.trio-circulos:hover .trio-circulo:nth-child(1) { transform: translateX(4%) rotate(-4deg); }
.trio-circulos:hover .trio-circulo:nth-child(2) { transform: translateY(-14%) scale(1.12); }
.trio-circulos:hover .trio-circulo:nth-child(3) { transform: translateX(-4%) rotate(4deg); }

@media (max-width: 520px) {
  /* A sobreposicao era feita so com transform, e transform NAO mexe no
     layout: a fileira continuava reservando 3 x 33vw = 99vw, mais larga
     que o container com as margens. Era isso, e so isso, que fazia a
     pagina inteira rolar para o lado no celular.

     Agora quem sobrepoe e a margem negativa, que o layout enxerga. Ao
     transform sobra a inclinacao, que e enfeite e pode ficar fora da
     conta. Largura de layout: 3 x 30vw - 2 x 7vw = 76vw, sobra folga. */
  .trio-circulos { min-height: 52vw; }
  .trio-circulo { width: 30vw; }
  .trio-circulo:nth-child(2),
  .trio-circulo:nth-child(3) { margin-left: -7vw; }
  .trio-circulo:nth-child(1) { transform: rotate(-2deg); }
  .trio-circulo:nth-child(2) { transform: translateY(-5%) scale(1.06); }
  .trio-circulo:nth-child(3) { transform: rotate(2deg); }
}

/* ==========================================================================
   Carrinho
   ========================================================================== */

.carrinho-grade { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 920px) { .carrinho-grade { grid-template-columns: 1fr; } }

.item-carrinho {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 1.6rem; align-items: center;
  padding: 1.7rem 0; position: relative;
}
.item-carrinho::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--linha), transparent);
}
.item-carrinho__figura {
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--raio-suave); background: var(--areia-morna);
  box-shadow: var(--sombra-suave);
}
.item-carrinho__figura img { width: 100%; height: 100%; object-fit: cover; }
.item-carrinho__nome { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .2rem; }
.item-carrinho__ritual { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--terra-suave); }
.item-carrinho__preco { font-family: var(--serif); font-size: 1.2rem; text-align: right; white-space: nowrap; }
.remover {
  background: none; border: 0; cursor: pointer;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra-suave); padding: 0; margin-top: .6rem;
  transition: color var(--media);
}
.remover:hover { color: var(--barro); }
@media (max-width: 560px) {
  .item-carrinho { grid-template-columns: 76px 1fr; }
  .item-carrinho__preco { grid-column: 2; text-align: left; }
}

.resumo {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-media);
  padding: 2.4rem; position: sticky; top: 120px;
}
.resumo__linha { display: flex; justify-content: space-between; padding: .65rem 0; font-size: .92rem; color: var(--terra-suave); }
.resumo__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--linha); }
.resumo__total strong { font-family: var(--serif); font-size: 1.85rem; font-weight: 300; }

.vazio { text-align: center; padding: 6rem 1rem; }

/* ==========================================================================
   Formulários e conta
   ========================================================================== */

.painel {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-media);
  padding: clamp(2rem, 5vw, 3.4rem);
}

.campo { margin-bottom: 1.4rem; }
.campo label { display: block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-suave); margin-bottom: .55rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 1rem 1.15rem;
  background: rgba(247,241,232,.7);
  border: 1px solid var(--linha); border-radius: var(--raio-suave);
  transition: border-color var(--media), background var(--media), box-shadow var(--media);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-color: var(--barro); background: var(--vapor);
  box-shadow: 0 0 0 4px rgba(175,101,68,.09);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo--erro input { border-color: #B3402F; }
.campo__erro { display: block; font-size: .76rem; color: #B3402F; margin-top: .45rem; }
.campo__ajuda { display: block; font-size: .76rem; color: var(--terra-suave); margin-top: .45rem; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 560px) { .dupla { grid-template-columns: 1fr; } }

.consentimento { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.2rem; font-size: .85rem; color: var(--terra-suave); line-height: 1.6; }
.consentimento input { flex: none; margin-top: .3rem; width: 16px; height: 16px; accent-color: var(--barro); }
.consentimento a { border-bottom: 1px solid currentColor; }

.abas { display: flex; gap: 2.2rem; border-bottom: 1px solid var(--linha); margin-bottom: 2.6rem; }
.aba {
  background: none; border: 0; padding: 0 0 1.1rem; cursor: pointer;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terra-suave); border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color var(--media), border-color var(--media);
}
.aba[aria-selected="true"] { color: var(--terra); border-color: var(--barro); }

.recado {
  padding: 1.1rem 1.35rem; border-radius: var(--raio-suave);
  background: rgba(175,101,68,.07); font-size: .88rem; margin-bottom: 1.6rem;
  border-left: 2px solid var(--barro);
}
.recado--erro { border-color: #B3402F; background: rgba(179,64,47,.07); }
.recado--ok { border-color: #4B7B4B; background: rgba(75,123,75,.08); }

.dados-conta { display: grid; gap: 1.5rem; }
.dado { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linha); }
.dado b { display: block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-suave); font-weight: 300; margin-bottom: .35rem; }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter-form { display: flex; gap: .8rem; margin-top: 2.4rem; max-width: 540px; margin-inline: auto; }
.newsletter-form input {
  flex: 1; padding: 1.1rem 1.4rem; background: rgba(247,241,232,.06);
  border: 1px solid rgba(247,241,232,.28); color: var(--areia); border-radius: 999px;
  transition: border-color var(--media), background var(--media);
}
.newsletter-form input::placeholder { color: rgba(247,241,232,.45); }
.newsletter-form input:focus { outline: 0; border-color: var(--dourado); background: rgba(247,241,232,.1); }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }

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

.rodape {
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(199,147,85,.14), transparent 60%),
    var(--carvao);
  color: rgba(247,241,232,.7);
  border-radius: var(--raio-grande) var(--raio-grande) 0 0;
  margin-inline: clamp(0px, 2vw, 28px);
  padding: clamp(4rem, 8vw, 6.5rem) 0 2.2rem;
  font-size: .88rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap); }
@media (max-width: 880px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape__grade { grid-template-columns: 1fr; } }

.rodape h4, .rodape .rodape__titulo { font-family: var(--sans); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--areia); margin-bottom: 1.4rem; font-weight: 300; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
/* Mesma razao dos icones: 20px de altura e pouco para o dedo. Aqui cabe
   padding de verdade, porque o rodape tem espaco de sobra. */
.rodape a { transition: color var(--media); display: inline-block; padding: .3rem 0; }
.rodape a:hover { color: var(--dourado); }
.rodape .marca__nome { color: var(--areia); }
.rodape__base {
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid rgba(247,241,232,.1);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .74rem; color: rgba(247,241,232,.45);
}

/* ==========================================================================
   Aviso flutuante
   ========================================================================== */

.aviso-flutuante {
  position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 160%);
  background: rgba(42,30,24,.96); color: var(--areia);
  backdrop-filter: blur(12px);
  padding: 1.1rem 2rem; border-radius: 999px; z-index: 200;
  font-size: .8rem; letter-spacing: .08em;
  transition: transform 700ms var(--calma);
  box-shadow: var(--sombra-alta);
  max-width: calc(100% - 2rem);
}
.aviso-flutuante.visivel { transform: translate(-50%, 0); }

/* ==========================================================================
   Espaço reservado quando não há foto
   ========================================================================== */

.sem-foto {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(63,46,36,.3);
  background: linear-gradient(135deg, rgba(175,101,68,.10), rgba(199,147,85,.14)), var(--areia-morna);
}
.sem-foto[data-ritual="despertar-da-terra"] { background: linear-gradient(135deg, rgba(168,66,87,.15), rgba(240,230,216,.6)), var(--areia-morna); }
.sem-foto[data-ritual="pureza-nativa"]      { background: linear-gradient(135deg, rgba(160,139,111,.15), rgba(240,230,216,.7)), var(--areia-morna); }
.sem-foto[data-ritual="sol-do-cerrado"]     { background: linear-gradient(135deg, rgba(192,139,69,.18), rgba(240,230,216,.6)), var(--areia-morna); }

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

.pular-para {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--carvao); color: var(--areia); padding: 1rem 1.5rem;
  border-radius: 0 0 var(--raio-suave) 0;
}
.pular-para:focus { left: 0; }

:focus-visible { outline: 2px solid var(--barro); outline-offset: 3px; border-radius: 4px; }

/* Quem pediu menos movimento no sistema recebe a página parada */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .aparece { opacity: 1; transform: none; }
  .aparece--fila > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   Cupom e atendente na finalização
   ========================================================================== */

.checkout-extra {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linha);
  display: grid; gap: 1.1rem;
}
.campo__linha { display: flex; gap: .5rem; }
.campo__linha input { flex: 1; min-width: 0; }
.btn--curto { padding-inline: 1.1rem; white-space: nowrap; }
.campo__ajuda--erro { color: #A8402A; }

/* O desconto é a única linha do resumo que soma a favor da cliente, então é
   a única que muda de cor. Se tudo fosse colorido, nada seria. */
.resumo__linha--desconto { color: #3F7A34; }

/* Opções de envio na sacola */
.opcoes-frete { display: grid; gap: .5rem; }
.opcao-frete {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .3rem .7rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linha); border-radius: var(--raio-suave);
  cursor: pointer; transition: border-color var(--media), background var(--media);
}
.opcao-frete:hover { border-color: rgba(175,101,68,.42); }
.opcao-frete--escolhida { border-color: var(--barro); background: rgba(175,101,68,.06); }
.opcao-frete input { grid-row: span 2; margin: 0; accent-color: var(--barro); }
.opcao-frete__nome  { font-family: var(--serif); font-size: 1.05rem; }
.opcao-frete__preco { font-family: var(--serif); font-size: 1.05rem; text-align: right; }
.opcao-frete__prazo {
  grid-column: 2 / -1;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-suave);
}

/* Formulário de entrega na sacola */
.entrega { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.entrega legend { padding: 0; margin-bottom: .2rem; }
.entrega__dupla { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.campo--junto { margin: 0; }
.campo--curto input { width: 8ch; }
@media (max-width: 520px) {
  .entrega__dupla { grid-template-columns: 1fr; }
  .campo--curto input { width: 100%; }
}

/* Escolha dos três sabonetes */
.trio-escolha { display: grid; gap: .9rem; margin: 2rem 0 0; }
.trio-escolha__campo {
  margin: 0; padding-left: 1.1rem;
  border-left: 2px solid var(--cor, var(--barro));
}
.trio-escolha__campo select { width: 100%; }