/* Hero "Cogumelo em gotas" — o mesmo nas paginas de compra (home, Juba,
   Cordyceps, Kit e a pagina do Instagram). Cada pagina so troca o texto e
   as fotos; o desenho mora aqui. */

/* ─── Hero: cogumelo em gotas (26/10/2026) ───────────────────────────
   Uma mensagem so, sem carrossel: no estudo de Notre Dame ~1% clica em
   carrossel e quase todos no 1o slide. A foto mostra o gesto (a gota
   caindo no cafe); o titulo diz o que e em 3 palavras.
   Fotos: cena gerada a partir do packshot do frasco NOVO do Juba, com o
   bloco de texto do rotulo trocado pelo do rotulo real (sem letra
   inventada). Cada versao tem nome proprio: imagem fica 1 ano em cache. */
.hx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #EAD9C8;        /* o tom da cortina no alto da foto */
}
.hx-foto { display: block; }
.hx-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hx-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #1F3509;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
}
.hx-h1 em {
  display: block;            /* "em gotas." sempre na segunda linha */
  font-style: italic;
  font-weight: 400;
  color: #86652A;            /* dourado escurecido: o #C8A96E nao le sobre o creme */
}
.hx-uso {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: #33342C;
  margin: 0;
}
.hx-bebida {
  display: inline-block;
  font-weight: 700;
  color: #2D4A10;
  transition: opacity 0.26s ease, transform 0.26s ease;
}
.hx-bebida.hx-sai { opacity: 0; transform: translateY(0.35em); }
.hx-sub {
  font-family: 'Inter', sans-serif;
  color: #55554C;
  margin: 0;
}
.hx-acoes { display: flex; flex-direction: column; }
.hx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #2D4A10;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(31,53,9,0.30);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hx-cta:hover { background: #1F3509; color: #fff; transform: translateY(-1px); }
.hx-cta svg { width: 1.05em; height: 1.05em; }
.hx-prova {
  font-family: 'Inter', sans-serif;
  color: #3F3F37;
  margin: 0;
}
.hx-prova b { color: #1F3509; }
.hx-estrelas { color: #B8860B; letter-spacing: 0.08em; margin-right: 0.3em; }
.hx-historia {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #2D4A10;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .hx-bebida, .hx-cta { transition: none; }
}

/* Celular: titulo no alto, a foto (o gesto) no meio, botao sobre a mesa.
   Nada cobre a gota nem a xicara. */
@media (max-width: 767px) {
  .hx {
    display: flex;
    flex-direction: column;
    min-height: clamp(560px, calc(100svh - 170px), 820px);
  }
  .hx-cabeca {
    position: relative;
    z-index: 1;
    padding: 18px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hx-h1 { font-size: clamp(2.35rem, min(11.6vw, 6.4svh), 3.4rem); }
  .hx-uso { font-size: 1.0625rem; }
  .hx-sub { font-size: 0.8125rem; }
  .hx-sub-b { display: none; }
  .hx-foto {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
  }
  /* --hx-foco: altura do foco da foto no celular (cada pagina compoe a cena num ponto) */
  .hx-foto img { position: absolute; inset: 0; object-position: 50% var(--hx-foco, 54%); }
  .hx-foto::before, .hx-foto::after {
    content: ''; position: absolute; left: 0; right: 0; pointer-events: none;
  }
  .hx-foto::before {           /* emenda com a faixa do titulo */
    top: 0; height: 70px;
    background: linear-gradient(#EAD9C8, rgba(234,217,200,0));
  }
  .hx-foto::after {            /* apoio para o botao sobre a mesa */
    bottom: 0; height: 150px;
    background: linear-gradient(rgba(234,217,200,0), rgba(234,217,200,0.88) 60%, #EAD9C8);
  }
  .hx-acoes {
    position: absolute;
    z-index: 1;
    left: 0; right: 0; bottom: 0;
    padding: 0 20px 16px;
    gap: 6px;
    align-items: stretch;
    text-align: center;
  }
  .hx-cta { min-height: 52px; font-size: 1rem; }
  .hx-prova { font-size: 0.78rem; }
  .hx-historia { align-self: center; font-size: 0.82rem; }
}

/* Computador: cena a direita, texto a esquerda sobre a parede clara */
@media (min-width: 768px) {
  .hx {
    height: clamp(560px, 80vh, 800px);
    display: grid;
    align-content: center;
    row-gap: 1.6rem;
    padding: 0 max(3rem, calc((100vw - 1200px) / 2 + 3rem));
  }
  .hx-foto { position: absolute; inset: 0; z-index: -2; }
  .hx-foto img { object-position: 72% 50%; }
  .hx::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
      #F2E8DB 0%, rgba(242,232,219,0.9) 30%, rgba(242,232,219,0) 60%);
  }
  .hx-cabeca, .hx-acoes { max-width: 34rem; }
  .hx-cabeca { display: flex; flex-direction: column; gap: 1.1rem; }
  .hx-h1 { font-size: clamp(3.5rem, 6.2vw, 5.75rem); }
  .hx-uso { font-size: 1.375rem; }
  .hx-sub { font-size: 1rem; line-height: 1.55; }
  .hx-acoes { align-items: flex-start; gap: 0.75rem; }
  .hx-cta { min-height: 56px; padding: 0 2rem; font-size: 1.0625rem; }
  .hx-prova { font-size: 0.875rem; }
  .hx-historia { font-size: 0.9rem; }
}

/* Pagina em coluna (a do Instagram tem 560 px mesmo no computador): o layout
   do celular vale em qualquer tela. Use com class="hx hx--coluna". */
@media (min-width: 768px) {
  .hx.hx--coluna {
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: clamp(560px, calc(100svh - 150px), 820px);
    padding: 0;
  }
  .hx--coluna::before { content: none; }
  .hx--coluna .hx-cabeca { max-width: none; padding: 18px 20px 4px; gap: 6px; }
  .hx--coluna .hx-h1 { font-size: 3rem; }
  .hx--coluna .hx-uso { font-size: 1.0625rem; }
  .hx--coluna .hx-sub { font-size: 0.8125rem; }
  .hx--coluna .hx-sub-b { display: none; }
  .hx--coluna .hx-foto { position: relative; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 300px; }
  .hx--coluna .hx-foto img { position: absolute; inset: 0; object-position: 50% var(--hx-foco, 54%); }
  .hx--coluna .hx-foto::before, .hx--coluna .hx-foto::after {
    content: ''; position: absolute; left: 0; right: 0; pointer-events: none;
  }
  .hx--coluna .hx-foto::before { top: 0; height: 70px; background: linear-gradient(#EAD9C8, rgba(234,217,200,0)); }
  .hx--coluna .hx-foto::after {
    bottom: 0; height: 150px;
    background: linear-gradient(rgba(234,217,200,0), rgba(234,217,200,0.88) 60%, #EAD9C8);
  }
  .hx--coluna .hx-acoes {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; max-width: none;
    padding: 0 20px 16px; gap: 6px; align-items: stretch; text-align: center;
  }
  .hx--coluna .hx-cta { min-height: 52px; padding: 0; font-size: 1rem; }
  .hx--coluna .hx-prova { font-size: 0.78rem; }
  .hx--coluna .hx-historia { align-self: center; font-size: 0.82rem; }
}