/* Obrigado da compra do curso Intercorrências na HOF
   (lp.facialacademy.com.br/obrigado-compra-intercorrencias-na-hof).
   Mesmo desenho da página antiga: medidas, cores e espaçamentos copiados dela
   (computador: conteúdo de 980px; celular: troca de layout em 800px, conteúdo de 360px). */

:root {
  --vermelho: #e6575b;
  --grafite: #242424;
  --azul-escuro: #14253b;
  --verde: #4ede42;
  --verde-claro: #60ec55;
  --verde-texto: #154211;
  --roxo-escuro: #191022;
  --cinza-suave: #b0b0b0;
  --rodape: rgb(5, 5, 5);
  --rodape-texto: rgb(168, 168, 168);
  --rodape-linha: rgb(163, 186, 198);
  --creme: rgb(255, 252, 243);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--rodape);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
}

h1,
h2,
p {
  margin: 0;
}

b {
  font-weight: 700;
}

/* ---------- 1. Topo: marca do curso, OBRIGADO!, suporte e foto ---------- */

.topo {
  position: relative;
  overflow: hidden;
  height: 899.781px;
  background: #fff url("/assets/obrigado-compra-intercorrencias-na-hof/fundo-topo.png") 50% 50% / cover no-repeat fixed;
}

.topo__conteudo {
  position: relative;
  width: 980px;
  height: 100%;
  margin: 0 auto;
}

/* imagens de enfeite: posição e recorte iguais aos da página antiga */
.topo__linhas,
.topo__circulo,
.topo__foto {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  pointer-events: none;
}

.topo__linhas {
  left: 629px;
  top: 0;
  width: 681.219px;
  height: 429.797px;
  background-image: url("/assets/obrigado-compra-intercorrencias-na-hof/linhas-topo.png");
  background-size: 681px 681px;
  background-position: 0 -251px;
  opacity: .3;
}

.topo__logo {
  position: absolute;
  left: 375px;
  top: 40px;
  width: 229.225px;
  height: 98.484px;
}

.topo__circulo {
  width: 420.891px;
  height: 420.891px;
  background-image: url("/assets/obrigado-compra-intercorrencias-na-hof/circulo-degrade.png");
  background-size: 100% 100%;
}

.topo__circulo--1 { left: 555px; top: 236px; }
.topo__circulo--2 { left: 552px; top: 237px; }

.topo__foto {
  width: 1164.44px;
  height: 669.344px;
  background-image: url("/assets/obrigado-compra-intercorrencias-na-hof/foto-professores.png");
  background-size: 1165px 831px;
  background-position: 0 -77px;
}

.topo__foto--1 { left: 181px; top: 230px; }
.topo__foto--2 { left: 179px; top: 230px; }

.topo__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 490.7px;
  padding: 283px 0 0 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
}

.topo__obrigado {
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--vermelho);
}

.topo__mensagem {
  width: 480.7px;
  margin-top: 20.4px;
  font-size: 22px;
  line-height: 26.4px;
  color: var(--grafite);
}

.topo__apoio {
  margin-top: 97.4px;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 2px;
  color: var(--vermelho);
}

.topo__contato {
  width: 380px;
  margin-top: 9.8px;
  font-size: 26px;
  line-height: 31.2px;
  color: var(--azul-escuro);
}

.topo__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330.5px;
  height: 54px;
  margin-top: 89.6px;
  padding: 0 8px;
  border-radius: 100px;
  background: var(--verde);
  color: var(--verde-texto);
  font-size: 18px;
  line-height: 23.4px;
  text-decoration: none;
  transition: background-color .25s ease-out, color .25s ease-out;
}

.topo__botao:hover,
.topo__botao:active,
.topo__botao:focus-visible {
  background: var(--verde-claro);
}

.topo__botao:focus-visible {
  outline: 2px solid var(--azul-escuro);
  outline-offset: 3px;
}

/* ---------- 2. App Facial Academy ---------- */

.app {
  position: relative;
  overflow-x: clip;
  height: 577px;
  background: var(--roxo-escuro) url("/assets/obrigado-compra-intercorrencias-na-hof/fundo-app.png") 50% 50% / cover no-repeat fixed;
}

.app__conteudo {
  position: relative;
  width: 980px;
  height: 100%;
  margin: 0 auto;
}

/* tablet e celular, girados como na página antiga (o giro fica no filho para não brigar com a animação) */
.app__aparelhos {
  position: absolute;
  left: 38.331px;
  top: 22.081px;
  display: block;
  width: 437.603px;
  height: 525.994px;
  pointer-events: none;
}

.app__aparelhos span {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/assets/obrigado-compra-intercorrencias-na-hof/tablet-celular-app.png") -188px 0 / 789px 526px no-repeat;
  transform: rotate(345.366deg);
}

.app__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 486.5px;
  padding-top: 83.528px;
  color: #fff;
}

.app__titulo {
  width: 248px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
}

.app__descricao {
  width: 298px;
  margin-top: 40px;
  font-size: 16px;
  line-height: 22.4px;
}

.app__descricao-suave {
  color: var(--cinza-suave);
}

.app__loja {
  display: block;
  width: 222.547px;
  margin: 40.2px 0 0 .43px;
}

.app__loja--play {
  width: 223px;
  margin-top: 14.87px;
}

.app__loja img {
  width: 100%;
  height: 48.9375px;
}

.app__loja:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- 3. Rodapé ---------- */

.rodape {
  position: relative;
  padding: 77.38px 16px 77.23px;
  background: var(--rodape);
  color: var(--rodape-texto);
  text-align: center;
  font-size: 14px;
  line-height: 19.6px;
}

.rodape__criado {
  max-width: 619px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 5px;
}

.rodape__logo {
  width: 244.5px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 244.5 / 33;
  margin: 5.04px auto 0;
}

.rodape__dados,
.rodape__legal,
.rodape__equipe {
  max-width: 882px;
  margin-left: auto;
  margin-right: auto;
}

.rodape__dados {
  margin-top: 25.03px;
}

.branco {
  color: #fff;
}

.creme {
  color: var(--creme);
}

.rodape__aviso {
  max-width: 400px;
  margin: 29.92px auto 0;
  font-size: 16px;
  line-height: 1.4;
}

.rodape__legal {
  margin-top: 9.94px;
}

.rodape__equipe {
  margin-top: 38.95px;
}

.rodape__linha {
  max-width: 882px;
  height: 0;
  margin: 19.94px auto 0;
  border: 0;
  border-top: 1px solid var(--rodape-linha);
  opacity: .3;
  --animacao-opacidade: .3;
}

.rodape__termos {
  max-width: 619px;
  margin: 19.17px auto 0;
  font-size: 12px;
  line-height: 16.8px;
}

.rodape__termos a {
  color: inherit;
  text-decoration: none;
}

.rodape__termos a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Botão flutuante do WhatsApp ---------- */

.botao-flutuante {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 900000;
  display: none;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  background: #00c800;
  cursor: pointer;
  transition: background-color 1s;
  animation: pulso-whatsapp 3s infinite;
}

.botao-flutuante.visivel {
  display: block;
}

.botao-flutuante:hover {
  background: #009600;
}

.botao-flutuante svg {
  display: block;
  width: 48px;
  height: 48px;
  fill: #fff;
  transform: scale(.6) translate(20%, 20%);
}

@keyframes pulso-whatsapp {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 0, 1); }
  70% { box-shadow: 0 0 0 20px rgba(0, 200, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .botao-flutuante {
    animation: none;
    transition: none;
  }
}

/* ---------- Celular (a página antiga trocava de layout em 800px) ---------- */

@media (max-width: 800px) {
  .topo {
    height: 1026.21px;
    background-position: 51.7093% 97.6996%;
  }

  .topo__conteudo {
    width: 360px;
  }

  .topo__linhas {
    left: 30px;
    width: 360px;
    height: 368.397px;
    background-size: 583.7px 583.7px;
    background-position: 0 -215.1px;
  }

  .topo__logo {
    left: 65.178px;
    top: 40.391px;
  }

  .topo__circulo {
    width: 229.891px;
    height: 230.344px;
  }

  .topo__circulo--1 { left: 64.982px; top: 654.149px; }
  .topo__circulo--2 { left: 64.882px; top: 653.749px; }

  .topo__foto {
    width: 360px;
    height: 349.375px;
    background-size: 631px 451px;
    background-position: -132px -42px;
  }

  .topo__foto--1 { left: -.172px; top: 676.838px; }
  .topo__foto--2 { left: -.272px; top: 676.438px; }

  .topo__texto {
    align-items: center;
    width: auto;
    padding: 178.859px 20px 0;
    text-align: center;
  }

  .topo__mensagem {
    width: 320.2px;
    margin-top: 19.97px;
    font-size: 20px;
    line-height: 24px;
  }

  .topo__apoio {
    margin-top: 34.97px;
    font-size: 12px;
    line-height: 14.4px;
  }

  .topo__contato {
    width: 320px;
    margin-top: 10.99px;
    font-size: 22px;
    line-height: 26.4px;
  }

  .topo__botao {
    width: 237px;
    margin-top: 104.75px;
  }

  .app {
    height: 792.047px;
  }

  .app__conteudo {
    width: 360px;
  }

  .app__aparelhos {
    left: 16.724px;
    top: 375.853px;
    width: 326.661px;
    height: 392.645px;
  }

  .app__aparelhos span {
    background-position: -141px 0;
    background-size: 589px 393px;
  }

  .app__texto {
    margin-left: 20px;
    padding-top: 50.009px;
  }

  .app__titulo {
    width: 166px;
    font-size: 20px;
    line-height: 24px;
  }

  .app__descricao {
    width: 320px;
    margin-top: 30px;
  }

  .app__loja {
    margin: 29.97px 0 0 .23px;
  }

  .app__loja--play {
    margin: 30px 0 0;
  }

  .rodape {
    padding: 65.39px 35px 66.07px;
  }

  .rodape__criado {
    max-width: 150px;
  }

  .rodape__logo {
    margin-top: 9.99px;
  }

  .rodape__dados,
  .rodape__legal,
  .rodape__equipe,
  .rodape__linha,
  .rodape__termos {
    max-width: 320px;
  }

  .rodape__dados {
    margin-top: 30px;
  }

  .rodape__aviso {
    max-width: 165px;
    margin-top: 11.06px;
  }

  .rodape__legal {
    margin-top: 22.09px;
  }

  .rodape__equipe {
    margin-top: 39.65px;
  }

  .rodape__linha {
    margin-top: 34.5px;
  }

  .rodape__termos {
    margin-top: 35.7px;
  }
}

/* telas abaixo de 360px: o conteúdo acompanha a largura */
@media (max-width: 359px) {
  .topo__conteudo,
  .app__conteudo {
    width: 100%;
  }

  .topo__mensagem,
  .topo__contato,
  .app__descricao {
    width: 100%;
  }
}