/* Composição proporcional à referência. A foto original permanece intacta. */
.hero { padding-top: 0; }
.hero > .container { width: 100%; max-width: none; }
.hero .hero__cartao {
  container-type: inline-size;
  display: block;
  min-height: 0;
  aspect-ratio: auto;
  padding: 4%;
  background: #0b0c08;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero .hero__texto { width: 55.5%; max-width: none; }
.hero .hero__foto {
  inset: 0 -12% 0 auto;
  width: 76%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 20%);
  mask-image: linear-gradient(90deg,transparent,#000 20%);
}
.hero .hero__cartao::after {
  background: linear-gradient(90deg,#0b0c0855,transparent 55%),linear-gradient(0deg,#080a0566,transparent 26%);
}
.hero .hero__olho { font-size: clamp(7px,1.65cqw,14px); line-height: 1.6; font-weight: 500; letter-spacing: .22em; color: #e5c58e; }
.hero .hero__olho::after { width: 12%; height: 2px; margin-top: 2.1cqw; }
.hero .hero__title { font-family: var(--titulo, "Playfair Display", Georgia, serif); font-size: clamp(16px,6.2cqw,56px); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 3cqw 0 0; }
.hero .hero__linha { display: block; white-space: nowrap; }
.hero .hero__ouro { color: #e0bc80; }
.hero .hero__text { width: 100%; max-width: none; font-size: clamp(10px,2.75cqw,24px); font-weight: 400; line-height: 1.4; margin: 3cqw 0 0; color: #c4c5bf; }
.hero .hero__acoes { width: 96%; max-width: none; padding: 0; margin: 3.5cqw 0 0; gap: 2.2cqw; }
.hero .hero__cartao .hero__acoes .btn {
  min-height: clamp(38px,10.4cqw,90px); width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px; gap: clamp(4px,1.8cqw,16px);
  font: 600 clamp(10px,3.1cqw,27px)/1.2 Inter,Arial,sans-serif;
  letter-spacing: -.035em; white-space: nowrap; border-radius: 70px;
}
.hero .hero__acoes .btn--navy { background: linear-gradient(135deg,#e7c38a,#cba15f); color: #100f08; border: 1px solid #eacb96; }
body .hero .hero__acoes a[href*="wa.me/"] { background: #0b432de6 !important; color: #f5f4ee !important; border: 1px solid #49815e; box-shadow: none; }
.hero .hero__cartao .hero__acoes .ico { width: clamp(15px,4.4cqw,40px); height: clamp(15px,4.4cqw,40px); flex-shrink: 0; }
/* a faixa do grupo não sangra junto com o cartão: fica na largura do
   conteúdo. O fundo e a borda são os da folha principal. */
body .hero a.comunidade { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.steps .steps__topo { position: relative; display: block; }
.steps .steps__lema { position: absolute; top: 0; right: 0; font-size: clamp(6px,1.2vw,12px); }
.steps .steps__title { font: 600 clamp(17px,4.7vw,46px)/1.18 var(--titulo, "Playfair Display", Georgia, serif); letter-spacing: -.01em; margin-top: 22px; }
.steps .steps__grid { gap: clamp(8px,1.7vw,18px); margin-top: 28px; }
.steps .steps__grid::before { display: none; }
.steps .steps__card { padding: clamp(34px,5.7vw,54px) clamp(10px,3vw,28px) clamp(16px,3vw,28px); text-align: left; }
.steps .steps__num { top: 6px; left: 8%; transform: none; width: clamp(25px,5.5vw,54px); height: clamp(25px,5.5vw,54px); font-size: clamp(14px,2.8vw,28px); }
.steps .steps__icon { width: clamp(27px,5.5vw,54px); height: clamp(27px,5.5vw,54px); display: block; margin: 0 auto 14px; color: #f3f3eb; }
.steps .steps__card h3 { font: 600 clamp(11px,2.55vw,25px)/1.25 Inter,Arial,sans-serif; letter-spacing: -.035em; margin-bottom: 10px; }
.steps .steps__card p { font: 400 clamp(10px,2.15vw,21px)/1.45 Inter,Arial,sans-serif; }
@media (max-width:359.98px) {
  .hero .hero__texto { width: 59%; }
  .hero .hero__text { font-size: 9px; }
  .hero .hero__acoes { width: 100%; }
}

/* A barra do topo é transparente. Para ela sumir de verdade, a foto sobe
   por trás dela: sem isso ficava uma faixa mais clara — o fundo da
   página — entre a barra e a foto. O cartão ganha em cima o espaço da
   barra, para o texto não entrar embaixo dela, e um véu escuro no alto
   segura a leitura da marca sobre a foto. A altura da barra é o --cab,
   medido pelo main.js; o valor de reserva vale até ele chegar. */
.hero { margin-top: calc(-1 * var(--cab, 70px)); }
.hero .hero__cartao { padding-top: calc(4% + var(--cab, 70px)); }
.hero .hero__cartao::after {
  background:
    linear-gradient(180deg, #0b0c08ed, #0b0c08b3 calc(var(--cab, 70px) * .6), transparent calc(var(--cab, 70px) + 5%)),
    linear-gradient(90deg,#0b0c0855,transparent 55%),
    linear-gradient(0deg,#080a0566,transparent 26%);
}

/* Uma altura mínima para o topo não ficar espremido no celular, onde ele
   ocupava menos da metade da tela e a foto aparecia cortada logo abaixo
   dos botões. O sobrando vai para baixo dos botões, que é onde a foto
   tem o que mostrar. No computador o cartão já passa disso, então a
   regra não muda nada lá. */
.hero .hero__cartao { min-height: min(64vh, 620px); min-height: min(64svh, 620px); }

/* ============================================================
   O TOPO NO COMPUTADOR
   O desenho veio de uma tela de celular, e as medidas em cqw cresciam
   junto com a largura: numa tela de 1920px o cartão ficava com 1033px de
   altura e os botões com 941 de largura por 90 de altura. Aqui o cartão
   continua de ponta a ponta — é a foto sangrando que faz o topo —, mas a
   altura tem teto e a escrita se recolhe numa coluna no meio da página.
   ============================================================ */
@media (min-width: 900px) {
  .hero .hero__cartao {
    min-height: 0;
    height: min(78vh, 620px);
    display: flex;
    align-items: center;
    padding: calc(var(--cab, 70px) + 1rem) max(2.5rem, calc((100% - 1180px) / 2)) 2rem;
  }
  .hero .hero__texto { width: 100%; max-width: 31rem; }
  .hero .hero__olho { font-size: .72rem; letter-spacing: .2em; }
  .hero .hero__olho::after { width: 46px; height: 3px; margin-top: .8rem; }
  .hero .hero__title { font-size: clamp(2.1rem, 2.6vw, 2.9rem); margin: 1.1rem 0 0; }
  .hero .hero__text { font-size: 1rem; margin-top: 1rem; max-width: 26rem; }
  .hero .hero__acoes { width: auto; max-width: 19rem; gap: .7rem; margin-top: 1.7rem; }
  .hero .hero__cartao .hero__acoes .btn {
    min-height: 52px;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    gap: .55rem;
    letter-spacing: -.01em;
  }
  .hero .hero__cartao .hero__acoes .ico { width: 20px; height: 20px; }
  .hero .hero__foto { width: 64%; inset: 0 -1% 0 auto; }
}