/* Versão limpa: menos elementos, uma ideia por tela, foto grande de gente, dois tamanhos de texto */

/* topo: só título, uma linha e as 3 opções; a garrafa fica livre à direita */
.hero .wrap{display:block;padding-top:72px;padding-bottom:110px}
.hero h1{font-size:clamp(48px,5.8vw,84px);max-width:12ch;margin:0 0 22px}
.hero .lead{font-size:19px;margin:0 0 28px;max-width:40ch}
.opcoes{max-width:600px}
.opcao{padding:16px 20px 16px 22px}
.opcao b{font-size:24px}

/* promessa: foto de ponta a ponta, uma frase, um botão */
.promessa{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--tinta);color:var(--creme);overflow:hidden}
/* no computador a foto é um pouco maior e deslocada, pra deixar o rosto à direita e o texto à esquerda, sem um cobrir o outro */
.promessa>img{position:absolute;top:0;bottom:0;left:-2%;width:130%;height:100%;object-fit:cover;object-position:50% 35%}
.promessa::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,16,48,.82) 0%,rgba(27,16,48,.45) 40%,rgba(27,16,48,0) 68%),linear-gradient(180deg,rgba(27,16,48,0) 40%,rgba(27,16,48,.35) 70%,rgba(27,16,48,.9) 100%)}
.promessa .wrap{position:relative;z-index:1;width:100%;padding-top:40vh;padding-bottom:84px}
.promessa h2{color:var(--creme);font-size:clamp(40px,5vw,72px);line-height:1;max-width:12ch;margin:0 0 20px}
.promessa p{color:var(--claro-2);font-size:19px;margin:0 0 28px;max-width:40ch}

/* onde fica: só endereço e foto */
.onde{padding-bottom:96px}
.onde .end{font-size:clamp(26px,3vw,40px)}
.onde .pilula{display:none}

/* botão fixo de WhatsApp */
.zap{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .15s}
.zap svg{width:34px;height:34px;fill:#fff}
.zap:hover{transform:scale(1.06)}

@media(max-width:760px){
  .hero .wrap{padding-top:40px;padding-bottom:64px}
  .hero h1{font-size:clamp(42px,12vw,56px);margin-bottom:16px}
  .hero .lead{font-size:16px;margin-bottom:18px}
  .opcao{padding:12px 14px 12px 16px}
  .opcao b{font-size:20px}
  .promessa{min-height:0}
  .promessa>img{left:0;width:100%;object-position:62% 30%}
  .promessa::after{background:linear-gradient(180deg,rgba(27,16,48,0) 30%,rgba(27,16,48,.5) 62%,rgba(27,16,48,.94) 100%)}
  .promessa .wrap{padding-top:62vh;padding-bottom:44px}
  .promessa h2{font-size:clamp(38px,11vw,48px);margin-bottom:14px}
  .promessa p{font-size:16px;margin-bottom:20px}
  .promessa .btn{width:100%}
  .onde{padding-bottom:56px}
  .onde .duas>.foto{display:block;aspect-ratio:3/2;margin-top:8px}
  .zap{width:56px;height:56px;right:14px;bottom:14px}
  .zap svg{width:31px;height:31px}
}