/* =====================================================================
   Home — abertura animada e seções próprias da home
   ===================================================================== */

/* ---------- abertura ---------- */
.abertura {
  --logo: min(86vw, 46svh, 520px);
  --cup: min(64vw, 36svh, 380px);
  position: relative;
  height: 100vh;
  height: 100svh;               /* altura visível com a barra do navegador aberta */
  background: var(--verde);
  overflow: hidden;
}

/* logo: centralizado no início; ao rolar encolhe em direção ao brigadeiro e some */
.abertura .logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: var(--logo);
  margin: 0 0 0 calc(var(--logo) / -2);
  top: calc(var(--header) + (100svh - var(--header) - var(--logo) * .978) / 2 - 4svh);
  aspect-ratio: 898 / 878;
}
/* camadas do logo, posicionadas sobre a arte original (898 × 878) */
.logo-voo { position: absolute; inset: 0; }
.abertura .logo img { position: absolute; height: auto; }
.logo-asa-esq  { left: 6.904%;  top: 4.556%;  width: 31.403%; transform-origin: 112.8% 50%; }
.logo-asa-dir  { left: 63.363%; top: 4.442%;  width: 31.737%; transform-origin: -11.6% 50%; }
.logo-corpo    { left: 33.185%; top: 24.943%; width: 35.857%; }
.logo-aureola  { left: 33.519%; top: 4.328%;  width: 35.078%; }
.logo-letreiro { left: 4.232%;  top: 64.237%; width: 91.759%; }
/* as asas batem encolhendo em direção ao centro, por trás da forminha desenhada, sem abrir emenda */

.dica {
  position: absolute; left: 0; right: 0; bottom: max(5svh, 20px);
  z-index: 2;
  margin: 0;
  font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--choco-80);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dica::after {
  content: ""; width: 1px; height: 30px; background: currentColor;
  animation: dica 1.8s ease-in-out infinite; transform-origin: top;
}
@keyframes dica { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(0); transform-origin: bottom } }

/* composição final: texto do sabor + forminha. Sem z-index próprio,
   para o brigadeiro poder ficar entre as duas camadas da forminha. */
.pouso {
  position: absolute;
  inset: var(--header) 16px 0;
  padding-bottom: max(5svh, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cup) * .24 + 12px);       /* espaço do brigadeiro acima da borda */
}
.revelacao { position: relative; z-index: 6; text-align: center; max-width: 32ch; }
.revelacao h2 { font-size: clamp(32px, 9vw, 52px); margin: 6px 0 8px; }
.revelacao p:not(.rotulo) { font-size: 15px; font-weight: 300; color: var(--choco-80); }
.revelacao .btn { margin-top: 16px; }
.anim .revelacao { visibility: hidden; }

.cup {
  position: relative;           /* sem z-index: as camadas entram no empilhamento da abertura */
  width: var(--cup);
  aspect-ratio: 400 / 240;
  flex: none;
}
.cup svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cup-back  { z-index: 2; }
.cup-front { z-index: 4; pointer-events: none; }
.ball {
  position: absolute; left: 0; top: 0;
  z-index: 3;
  width: 200px;                 /* recalculado no JS */
  aspect-ratio: 350 / 344;
  opacity: 0;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.ball-foto { position: relative; display: block; width: 100%; height: auto; }

/* computador: duas colunas no pouso, forminha à esquerda e texto à direita */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .abertura { --logo: min(58svh, 560px); --cup: min(50svh, 480px); }
  /* conjunto centralizado na área abaixo do cabeçalho */
  .pouso { flex-direction: row-reverse; gap: clamp(48px, 6vw, 96px); padding-bottom: 0; }
  .pouso .cup { margin-top: calc(var(--cup) * .2); }   /* centraliza brigadeiro + forminha */
  .revelacao { text-align: left; width: 340px; max-width: none; }
}

/* ---------- carta ---------- */
.carta-nota { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.carta-nota p { font-size: 14px; color: var(--choco-80); }

/* ---------- presentes ---------- */
.presentes { background: var(--creme-2); }
.presentes-cards { display: grid; gap: 48px; margin-top: 56px; }
@media (min-width: 800px) { .presentes-cards { grid-template-columns: 1fr 1fr; gap: 40px; } }
.presente { display: grid; gap: 18px; text-decoration: none; }
.presente .foto { aspect-ratio: 5 / 4; max-width: 520px; width: 100%; }
.presente h3 { font-size: clamp(26px, 6vw, 34px); }
.presente p { color: var(--choco-80); font-weight: 300; max-width: 40ch; }
.presente .preco { font-family: var(--serif); font-size: 18px; color: var(--choco); }

/* ---------- eventos: dois formatos ---------- */
.eventos-home { background: var(--verde); padding-bottom: 96px; }
.eventos-home .toldo { margin-bottom: 72px; }
.eventos-home .lead { margin-top: 18px; color: var(--choco); }
.formatos { display: grid; gap: 56px; margin-top: 48px; }
@media (min-width: 800px) { .formatos { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 900px) { .eventos-home { padding-bottom: 140px; } }
.formato-card { display: grid; gap: 6px; align-content: start; }
.formato-card .foto { aspect-ratio: 4 / 5; width: 100%; max-width: 480px; margin-bottom: 20px; }
.formato-card .formato-sub { font-size: 16px; font-weight: 300; }
.formato-card .formato-preco { margin-top: 10px; font-size: 14px; }
.formato-card .formato-preco strong { font-family: var(--serif); font-weight: 400; font-size: 22px; margin-left: 6px; }
.formato-card .link { justify-self: start; margin-top: 4px; }
.formatos-acao { margin-top: 56px; }

/* ---------- a casa: quadros + texto ---------- */
.casa-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .casa-grid { grid-template-columns: 5fr 6fr; gap: 80px; } }
.casa-texto p { font-weight: 300; font-size: 17px; margin-top: 18px; max-width: 40ch; color: var(--choco-80); }

/* certificados como quadros pequenos na parede, lado a lado e alinhados pela base */
.quadros { margin: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 4vw, 32px); }
.quadro {
  height: clamp(150px, 22vw, 230px);
  width: auto;
  padding: 7px;
  background: var(--creme);
  border: 1px solid rgba(62, 36, 22, .1);
  box-shadow: 0 14px 28px -16px rgba(62, 36, 22, .45), 0 2px 4px rgba(62, 36, 22, .06);
}
.assinatura { font-family: var(--serif); font-style: italic; font-size: 26px; margin-top: 28px; color: var(--choco); }
.presente .foto-desenho { width: 44%; margin-top: 6%; }