/* Facial Class | Aula de Toxina Botulínica (aula + venda) — estilo da página
   Computador: a partir de 801px, coluna de conteúdo com 960px.
   Celular: até 800px, coluna com 360px (ou a largura da tela menos 30px). */

:root {
  --roxo-noite: #191022;
  --roxo-escuro: #2f1448;
  --roxo: #7a1ad6;
  --roxo-vivo: #9521ff;
  --roxo-selo: #ab57ff;
  --roxo-borda: #551e8c;
  --lilas: #c286ff;
  --lilas-claro: #d9b3ff;
  --lilas-avista: #d6aeff;
  --rosa: #e37bc9;
  --gelo: #f0f3f5;
  --cinza-fundo: #f1f1f1;
  --tinta: #101010;
  --cinza: #7a7a7a;
  --cinza-azulado: #91999d;
  --cinza-claro: #a8a8a8;
  --ouro: #d6c08a;
  --ouro-hover: #c2a251;
  --ouro-escuro: #b29959;
  --verde: #25d266;
  --verde-hover: #5fe391;
  --verde-popup-hover: #1baa51;
  --sombra-botao: drop-shadow(0 13px 22px rgba(172, 60, 255, .5));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cinza-fundo);
  color: var(--tinta);
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 500; }
ul { list-style: none; }
b { font-weight: 700; }
img { display: block; max-width: none; }
button { font-family: inherit; }
hr { margin: 0; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-revelar]:not(.revelado) { display: none; }

.container { width: 960px; max-width: calc(100% - 40px); margin: 0 auto; position: relative; }
section, footer { position: relative; overflow-x: clip; }

.titulo { font-size: 32px; line-height: 1.2; }
.lilas { color: var(--lilas); }
.roxo { color: var(--roxo); }
.escuro { color: var(--tinta); }
.cinza-azulado { color: var(--cinza-azulado); }

/* etiqueta arredondada (fundo e borda com 17% de opacidade, texto inteiro) */
.selo {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  height: 40px;
  font-size: 14px; line-height: 1.4; letter-spacing: 2px; text-align: center;
}
.selo::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 100px;
  background: var(--roxo-selo); border: 1px solid var(--roxo-borda); opacity: .17;
}
.selo-claro { color: var(--gelo); }
.selo-escuro { color: var(--tinta); }

.botao {
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 100px; cursor: pointer; text-decoration: none; text-align: center;
  font: 500 18px/1.3 'Poppins', Arial, sans-serif;
  padding: 0 8px;
}
.botao-verde { background: var(--verde); color: #1f1f1f; filter: var(--sombra-botao); }
.botao-verde:hover { background: var(--verde-hover); }

.video { position: relative; }

/* ---------- 1. Aula ---------- */
.aula { padding: 85px 0 93px; background: linear-gradient(180deg, var(--roxo-escuro) 0%, var(--roxo) 100%); }
.aula-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.aula-titulo { width: 656px; font-size: 32px; line-height: 1.2; color: #fff; }
.aula-bonus { width: 257px; flex: none; font-size: 18px; line-height: 1.4; color: var(--lilas-claro); }
.video-aula { margin-top: 55px; width: 960px; max-width: 100%; height: 540px; }

/* ---------- 2. Desconto ---------- */
.desconto { background: linear-gradient(160deg, rgba(149, 33, 255, .95) 0%, #ffca9b 100%); }
.desconto-conteudo { min-height: 112px; display: flex; align-items: center; justify-content: center; }
.desconto-icone { width: 32px; height: 32px; flex: none; }
.desconto-titulo { width: 709px; font-size: 23.4px; line-height: 1.2; text-align: center; color: #fff; }

/* ---------- 3. Toda a HOF ---------- */
.plataforma { background: linear-gradient(180deg, var(--roxo) 0%, var(--rosa) 100%); }
.plataforma .container { padding: 80px 0 107px; }
.plataforma-arte { position: absolute; inset: 0; pointer-events: none; }
.plataforma-arte > * { position: absolute; }
.arte-plataforma { z-index: 1; left: 632px; top: 77px; width: 752px; height: 481px; border-radius: 12px; }
.arte-grade { z-index: 2; left: 448px; top: 320px; width: 767px; height: 391px; border-radius: 12px; }
.arte-tablet { position: absolute; z-index: 4; left: 411px; top: 380px; width: 709px; height: 390px; pointer-events: none; }
.arte-rosto { z-index: 2; left: -164px; top: 929px; width: 610px; height: 827px; border-radius: 12px; opacity: .28; filter: grayscale(.4); }
.plataforma .selo { width: 296px; padding-right: 5px; }
.plataforma-titulo { position: relative; z-index: 3; margin-top: 20px; width: 468px; color: var(--gelo); }

.temas { position: relative; z-index: 5; margin-top: 51.6px; width: 760px; display: flex; flex-wrap: wrap; gap: 9.67px 10px; }
.temas li {
  position: relative; display: flex; align-items: center; gap: var(--vao, 10px);
  width: var(--largura); height: 40px; padding-left: var(--recuo, 10px); margin-left: var(--ajuste, 0);
  font-size: var(--fonte, 14px); line-height: 1.4; letter-spacing: 2px; color: var(--gelo); white-space: nowrap;
}
.temas li::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 100px;
  background: var(--roxo); border: 1px solid var(--verde); opacity: .85;
}
.temas svg { width: var(--icone, 28px); height: var(--icone, 28px); flex: none; fill: none; stroke: var(--verde); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* pequenas diferenças de cada etiqueta na página antiga */
.temas .t-preenchedores { height: 41px; --icone: 29px; --fonte: 14.364px; }
.temas .t-bioestimuladores { --ajuste: -5px; }
.temas .t-anestesia { height: 39px; --ajuste: 1px; --recuo: 9px; --vao: 7px; --icone: 27px; --fonte: 13.51px; }

.plataforma-texto { position: relative; z-index: 3; margin-top: 52px; width: 345px; font-size: 18px; line-height: 1.4; color: var(--lilas-claro); }
.plataforma-botao { margin-top: 42.2px; width: 320px; height: 60px; }

.depoimentos { margin-top: 170px; display: flex; align-items: flex-start; }
.depoimentos-titulo { position: relative; z-index: 3; width: 230px; flex: none; color: var(--gelo); }
.depoimentos-coluna { display: flex; flex-direction: column; gap: 20px; }
.depoimentos-coluna:first-of-type { margin-left: 49px; }
.depoimentos-coluna + .depoimentos-coluna { margin-left: 21px; }
.depoimento { position: relative; z-index: 3; width: 325px; height: auto; border-radius: 16px; }
.depoimento.d1 { margin-bottom: -2px; }
.depoimento.d4 { width: 364px; }
.depoimento.d5, .depoimento.d6, .depoimento.d7 { width: 365px; }

/* ---------- 3. Estude na sua rotina ---------- */
.rotina { background: linear-gradient(180deg, var(--rosa) 0%, var(--cinza-fundo) 100%); }
.rotina .container { padding: 120px 0 119px; }
.rotina-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.rotina-titulo { width: 468px; color: var(--roxo-noite); }
.rotina-paragrafo { width: 417px; font-size: 18px; line-height: 1.4; color: var(--roxo-noite); opacity: .7; }
.video-rotina { margin-top: 55px; width: 960px; max-width: 100%; height: 540px; }

/* ---------- 4. Planos ---------- */
.planos { background: var(--cinza-fundo); }
.planos .container { padding: 80px 0 122px; }
.planos .selo { margin: 0 auto; width: 319px; }
.planos-titulo { margin: 20px auto 0; width: 564px; text-align: center; color: var(--tinta); }
.planos-intro { margin: 60.2px auto 0; width: 564px; font-size: 16px; line-height: 1.4; text-align: center; color: var(--cinza); }
.planos-cartoes { margin-top: 76.4px; padding-left: 59px; display: grid; grid-template-columns: 400px 400px; column-gap: 50px; align-items: start; }

.plano { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.plano-ouro { min-height: 831px; padding: 54px 0 39px; background: #fff; border-radius: 15px; }
.plano-black { min-height: 1249px; padding: 54px 0 40px; background: linear-gradient(180deg, var(--roxo-escuro) 0%, var(--roxo) 100%); border-radius: 16px; color: #fff; }
.plano-nome {
  position: relative; isolation: isolate;
  width: 326px; height: 54px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1.2;
}
.plano-nome::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 100px; }
.plano-ouro .plano-nome { color: var(--ouro-escuro); }
.plano-ouro .plano-nome::before { background: var(--ouro); opacity: .3; }
.plano-black .plano-nome { margin-left: 2px; color: #fff; }
.plano-black .plano-nome::before { background: linear-gradient(125deg, var(--roxo-vivo) 0%, var(--lilas) 100%); opacity: .5; }
.plano-pagamento { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.plano-ouro .plano-pagamento { width: 258px; color: var(--tinta); opacity: .6; }
.plano-black .plano-pagamento { width: 207px; color: #fff; opacity: .8; }
/* preço antigo riscado e o título do desconto desta página */
.plano-de { margin-top: 40px; font-size: 22px; line-height: 1.4; }
.plano-de s { font-weight: 700; }
.plano-ouro .plano-de { width: 208px; color: var(--tinta); opacity: .5; }
.plano-black .plano-de { width: 214px; color: #fff; opacity: .7; }
.plano-desconto { width: 251px; font-size: 21px; line-height: 1.2; }
.plano-desconto b { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.plano-ouro .plano-desconto { margin-top: 7px; }
.plano-ouro .plano-desconto b { background-image: linear-gradient(45deg, #f3d267 0%, #b99b3a 100%); }
.plano-black .plano-desconto { margin-top: 10px; }
.plano-black .plano-desconto b { background-image: linear-gradient(45deg, #fff3c1 0%, #ffe6dc 100%); }
/* preço: o valor e o "/mês" são duas caixas lado a lado, como antes */
.plano-preco { display: flex; align-items: flex-start; justify-content: center; }
.plano-preco b { width: 208px; font-size: 42px; line-height: 1.4; }
.plano-preco span { width: 68px; font-size: 22px; line-height: 1.4; }
.plano-ouro .plano-preco { margin-top: 16.6px; }
.plano-ouro .plano-preco b { color: var(--tinta); }
.plano-ouro .plano-preco span { margin: 21px 0 0 -4px; color: var(--roxo-noite); }
.plano-black .plano-preco { margin-top: 17.6px; }
.plano-black .plano-preco span { margin: 15px 0 0 2px; }
.plano-avista { font-size: 16px; line-height: 1.4; }
.plano-ouro .plano-avista { margin-top: 10.2px; width: 281px; color: var(--cinza); }
.plano-black .plano-avista { margin-top: 4.2px; width: 339px; color: var(--lilas-avista); }
.plano-linha { width: 202px; border-bottom: 1px solid var(--ouro); opacity: .4; }
.plano-ouro .plano-linha { margin-top: 25.2px; }
.plano-ouro .plano-linha-2 { margin-top: 27.6px; }
.plano-black .plano-linha { margin-top: 22.2px; border-bottom-color: var(--lilas-claro); }
.plano-black .plano-linha-2 { margin-top: 24.6px; }

.plano-beneficios { margin: 36px 0 0 52px; width: 330px; align-self: flex-start; text-align: left; }
.plano-beneficios li { display: flex; align-items: center; gap: 7px; min-height: 30px; font-size: 16px; line-height: 1.4; color: var(--cinza); }
.plano-beneficios li + li { margin-top: 12px; }
.plano-beneficios li:nth-child(2) { margin-top: 10px; }
.plano-beneficios li > span { width: 264px; }
.plano-beneficios svg, .plano-itens svg { flex: none; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plano-beneficios svg { width: 30px; height: 30px; stroke: var(--ouro); }

.plano-itens { margin: 44px 0 0 46px; width: 330px; align-self: flex-start; text-align: left; }
.plano-itens > li { display: flex; align-items: center; gap: 12px; min-height: 30px; font-size: 16px; line-height: 1.2; color: #fff; }
.plano-itens svg { width: 30px; height: 30px; stroke: var(--lilas); }
.plano-itens .i-cursos { margin-top: 10px; }
.plano-itens .i-lista { display: block; min-height: 0; margin-top: 4px; padding-left: 42px; line-height: 1.4; opacity: .7; }
.plano-itens .i-lista ul { list-style: disc; padding-left: 24px; }
.plano-itens .i-lista-cursos ul { width: 267px; }
.plano-itens .i-lista-eventos ul { width: 202px; }
.plano-itens .i-ia { margin-top: 15.2px; }
.plano-itens .i-eventos { margin-top: 9px; }
.plano-itens .i-materiais { margin-top: 16px; }
.plano-itens .i-grupo { margin-top: 14px; }
.plano-itens .i-grupo span { width: 258px; }

.plano-botao { width: 341px; height: 65px; }
.plano-ouro .plano-botao { margin-top: 40px; background: var(--ouro); color: #000; }
.plano-ouro .plano-botao:hover { background: var(--ouro-hover); }
.plano-black .plano-botao { margin-top: 54.6px; height: 67px; background: var(--verde); color: #1f1f1f; }
.plano-black .plano-botao:hover { background: var(--verde-hover); }
.plano-renovacao { margin-top: 10px; width: 303px; font-size: 12px; line-height: 1.5; }
.plano-ouro .plano-renovacao { color: var(--cinza-azulado); }
.plano-black .plano-renovacao { color: var(--lilas-avista); }
.plano-etiqueta {
  position: absolute; top: -21px; left: 0; right: 0; margin: 0 auto;
  width: 282px; height: 40px; border-radius: 100px; background: var(--roxo-vivo);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1.4; letter-spacing: 2px; color: var(--cinza-fundo);
}

.planos-prazo { margin: 40px auto 0; width: 691px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--cinza-azulado); }
.garantia { position: relative; isolation: isolate; margin: 87px auto 0; width: 851px; min-height: 218px; display: flex; align-items: center; padding: 0 0 0 70px; }
.garantia::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 15px; background: linear-gradient(160deg, rgba(149, 33, 255, .95) 0%, #ffca9b 100%); opacity: .48; }
.garantia-selo { width: 130px; height: 125px; border-radius: 16px; flex: none; }
.garantia-texto { margin-left: 47px; width: 543px; font-size: 16px; line-height: 1.4; color: var(--tinta); }

.seguranca { margin: 52px auto 0; width: 551px; display: grid; grid-template-columns: repeat(3, 142px); column-gap: 62.5px; }
.seguranca li { display: flex; flex-direction: column; align-items: center; }
.seguranca svg { width: 50px; height: 50px; fill: none; stroke: var(--roxo-vivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seguranca span {
  margin-top: 10px; min-height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1.5; text-align: center; color: var(--roxo-noite); opacity: .7;
}

/* ---------- 5. Com medo ou com método ---------- */
.metodo { background: linear-gradient(160deg, #321953 0%, var(--roxo) 48%, #fb87ff 100%); }
.metodo .container { min-height: 846px; padding-top: 205px; }
.metodo-fotos { position: absolute; inset: 0; pointer-events: none; }
.metodo-fotos > * { position: absolute; }
.metodo-foto { z-index: 2; left: 379px; top: 265px; width: 330px; height: 494px; border-radius: 16px; }
.metodo-mosaico { z-index: 1; left: 395px; top: 78px; width: 804px; height: 571px; }
.metodo-celulares { z-index: 3; left: 428px; top: 124px; width: 852px; height: 643px; }
.metodo-texto { position: relative; z-index: 4; width: 333px; }
.metodo-titulo { color: var(--gelo); }
.metodo-paragrafo { margin-top: 80px; width: 308px; font-size: 18px; line-height: 1.4; color: var(--lilas-claro); }
.metodo-botao { margin-top: 40px; width: 320px; height: 60px; }

/* ---------- 6. Perguntas frequentes ---------- */
.faq { background: var(--cinza-fundo); }
.faq .container { display: flex; justify-content: space-between; align-items: flex-start; padding: 143px 0 142px; }
.faq-cabecalho { width: 235px; }
.faq-icone { display: block; width: 40px; height: 40px; fill: none; stroke: var(--roxo-vivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-titulo { margin-top: 20px; color: var(--roxo-noite); }
.faq-lista { margin-top: 60px; width: 708px; }
.faq-item { border-radius: 8px; overflow: hidden; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-pergunta {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0;
  padding: 12px; border: 0; cursor: pointer; text-align: left;
  background: #e2e2e2; color: var(--cinza);
  font: 400 17px/20.4px 'Poppins', Arial, sans-serif;
  transition: color .1s, background-color .1s;
}
.faq-pergunta span { width: calc(100% - 22.44px); }
.faq-pergunta svg { width: 22.44px; height: 22.44px; flex: none; fill: currentColor; }
.faq-menos { display: none; }
.faq-pergunta:hover, .faq-item.aberto .faq-pergunta { background: #fff; }
.faq-pergunta:hover span, .faq-item.aberto .faq-pergunta span {
  background-image: linear-gradient(90deg, #461a72 0%, #ead8d8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.faq-item.aberto .faq-mais { display: none; }
.faq-item.aberto .faq-menos { display: inline; }
.faq-resposta { display: grid; grid-template-rows: 0fr; background: #fff; color: #111; transition: grid-template-rows .25s ease; }
.faq-item.aberto .faq-resposta { grid-template-rows: 1fr; }
.faq-resposta > div { overflow: hidden; }
.faq-resposta [itemprop="text"] { padding: 0 12px 12px; }
.faq-resposta p { font-size: 14.62px; line-height: 1.5; }

/* ---------- 7. Rodapé ---------- */
.rodape { background: var(--cinza-fundo); padding: 73px 0 73px; }
.rodape-cartao {
  position: relative; margin-left: 1px; width: 960px; max-width: 100%; min-height: 430px;
  padding: 69px 0 40px; border-radius: 20px;
  background: #000 url("/assets/facial-class-aula-toxina-botulinica/fundo-cartao.webp") no-repeat 2.9268% 5.4634% / cover;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.texto-escuro {
  background-image: linear-gradient(180deg, #0a070e 0%, var(--roxo-escuro) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rodape-criado { margin-right: 10px; font-size: 12px; line-height: 1.4; letter-spacing: 5px; }
.rodape-logo { margin-top: 9.2px; width: 302px; height: 51px; object-fit: cover; }
.rodape-dados { margin-top: 59px; width: 733px; max-width: 100%; font-size: 14px; line-height: 1.4; }
.rodape-legal { margin: 90px 0 0 29px; width: 882px; max-width: 100%; text-align: center; color: var(--cinza-claro); }
.rodape-aviso-titulo { font-size: 16px; line-height: 1.4; font-weight: 400; }
.rodape-aviso { margin-top: 10.6px; font-size: 14px; line-height: 1.4; }
.rodape-equipe { margin-top: 39px; font-size: 14px; line-height: 1.4; }
.rodape-legal hr { margin-top: 20px; border-bottom: 1px solid var(--cinza); opacity: .3; }
.rodape-termos { margin: 19px auto 0; width: 619px; max-width: 100%; font-size: 12px; line-height: 1.4; }
.rodape-termos a { color: inherit; text-decoration: none; }

/* ---------- Pop-up de pré-checkout ---------- */
body.com-popup { overflow: hidden; }
body.com-popup #site { filter: blur(2px); }
.precheckout {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: auto;
}
.precheckout:not([open]) { display: none; }
.precheckout[open] { display: flex; align-items: center; justify-content: center; }
/* como antes: sem escurecer, só o desfoque da página por trás */
.precheckout::backdrop { background: transparent; }
.precheckout.sem-modal { z-index: 99999; }
.precheckout-fechar-tela, .precheckout-fechar {
  position: absolute; border: 0; background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.precheckout-fechar-tela svg, .precheckout-fechar svg { width: 24px; height: 24px; fill: #858585; }
.precheckout-fechar-tela { top: 18px; right: 18px; width: 38px; height: 28px; }
.precheckout-fechar-tela:hover svg { fill: #dbdbdb; }
.precheckout-fechar { top: 8px; right: 8px; width: 42px; height: 42px; z-index: 1; }
.precheckout-caixa {
  position: relative; flex: none; width: 420px; height: 500px; padding-top: 35px;
  border-radius: 15px; text-align: center;
  background: #ffe2cc url("/assets/facial-class-aula-toxina-botulinica/fundo-cartao.webp") no-repeat 5.8537% 8.5854% / cover;
  display: flex; flex-direction: column; align-items: center;
}
.precheckout.precheckout-black .precheckout-caixa {
  width: 400px; padding-top: 42px;
  background: #090110 url("/assets/facial-class-aula-toxina-botulinica/fundo-popup-black.webp") no-repeat center / cover;
}
.precheckout-titulo { width: 242px; font-size: 17px; line-height: 1.7; color: var(--roxo-noite); }
.precheckout.precheckout-black .precheckout-titulo { width: 274px; color: #fff; }
.precheckout-form { margin-top: 1px; width: 310px; display: flex; flex-direction: column; gap: 18px; }
.precheckout.precheckout-black .precheckout-form { margin-top: 29px; }
.campo { position: relative; }
.campo[hidden] { display: none; }
.campo .iti { display: block; width: 100%; }
.campo input {
  display: block; width: 100%; height: 44px; border: 0; border-radius: 100px;
  background: #fff; padding: 0 12px; outline: none;
  font: 400 16px/16px 'Poppins', Arial, sans-serif; color: #000; -webkit-text-fill-color: rgba(0, 0, 0, .5);
}
.campo input::placeholder { color: #757575; -webkit-text-fill-color: #757575; opacity: 1; }
.campo.erro input { box-shadow: inset 0 0 0 1px red; padding-right: 44px; }
.campo-erro {
  display: none; position: absolute; top: 0; bottom: 0; right: 16px; margin: auto; width: 28px; height: 28px; z-index: 2;
  cursor: pointer;
  background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e53923' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}
.campo.erro .campo-erro { display: block; }
/* balão da mensagem (à esquerda do ícone, com a setinha apontando para ele) */
.campo-erro::after {
  content: attr(data-mensagem); display: none; position: absolute; right: calc(100% - 2px); top: 50%; transform: translateY(-50%);
  width: max-content; max-width: 184px; padding: 4px 7px; border-radius: 4px; background: #323232;
  font: 400 12px/12px 'Roboto', Arial, Helvetica, sans-serif; color: #fff; text-align: left;
}
.campo-erro::before {
  content: ''; display: none; position: absolute; left: 2px; top: 50%; margin-top: -5px;
  border: 5px solid transparent; border-left-color: #323232;
}
.campo-erro:hover::after, .campo input:focus ~ .campo-erro::after,
.campo-erro:hover::before, .campo input:focus ~ .campo-erro::before { display: block; }
.precheckout-botao {
  margin-top: 18px; height: 54px; border: 0; border-radius: 100px; background: var(--verde); cursor: pointer;
  padding: 0 8px; font: 500 16px/20.8px 'Poppins', Arial, sans-serif; color: #fff;
}
.precheckout.precheckout-black .precheckout-botao { margin-top: 12px; }
.precheckout-botao:hover { background: var(--verde-popup-hover); }
.precheckout-selo { margin-top: 20px; width: 168px; height: 54px; }
.precheckout-selo-black { display: none; margin-top: 20px; width: 157px; height: 50px; }
.precheckout.precheckout-black .precheckout-selo-ouro { display: none; }
.precheckout.precheckout-black .precheckout-selo-black { display: block; }
.precheckout-segura { margin-top: 15px; font-size: 14px; line-height: 1.4; color: var(--roxo-noite); }
.precheckout.precheckout-black .precheckout-segura { margin-top: 20px; color: var(--gelo); }
/* "Aguarde..." depois do envio: dentro do <dialog>, cobre a tela inteira e o pop-up */
.aguarde {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .84);
  display: flex; align-items: center; justify-content: center;
  font: 700 50px/2 Arial, Helvetica, sans-serif; color: #fff;
}
.aguarde[hidden] { display: none; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.botao-whatsapp {
  position: fixed; right: 40px; bottom: 40px; z-index: 900000;
  width: 60px; height: 60px; border-radius: 50%; background: #00c800; cursor: pointer;
  opacity: 0; transform: scale(.7) translateY(8px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, background-color .3s;
  animation: pulso-whatsapp 3s infinite;
}
.botao-whatsapp.visivel { opacity: 1; transform: none; pointer-events: auto; }
/* como antes: some enquanto o pop-up (e o "Aguarde...") está aberto */
body.com-popup .botao-whatsapp { opacity: 0; pointer-events: none; }
.botao-whatsapp:hover { background: #009600; }
.botao-whatsapp svg { 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-whatsapp { animation: none; transition: none; }
}

/* ---------- Telas médias (801px a 1199px) ----------
   Como a página antiga, o layout de computador (feito para 1200px) é reduzido inteiro para caber
   na largura: escala = largura da tela / 1200. Aqui em faixas de 50px, usando o começo de cada faixa. */
@media (min-width: 801px) and (max-width: 849px) { #site { zoom: .6675; } }
@media (min-width: 850px) and (max-width: 899px) { #site { zoom: .7083; } }
@media (min-width: 900px) and (max-width: 949px) { #site { zoom: .75; } }
@media (min-width: 950px) and (max-width: 999px) { #site { zoom: .7917; } }
@media (min-width: 1000px) and (max-width: 1049px) { #site { zoom: .8333; } }
@media (min-width: 1050px) and (max-width: 1099px) { #site { zoom: .875; } }
@media (min-width: 1100px) and (max-width: 1149px) { #site { zoom: .9167; } }
@media (min-width: 1150px) and (max-width: 1199px) { #site { zoom: .9583; } }
@media (min-width: 801px) and (max-width: 1199px) { .container { max-width: none; } }

/* ---------- Celular ---------- */
@media (max-width: 800px) {
  .container { width: 360px; max-width: calc(100% - 30px); }
  .titulo { font-size: 24px; }
  .selo { line-height: 1.2; }
  .botao-verde { font-size: 18px; }

  /* 1 */
  .aula { padding: 40px 0 53px; }
  /* título de 2 linhas e "Aproveite..." 13px acima do vídeo, como antes */
  .aula-topo { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 17.6px; min-height: 156.4px; }
  .aula-titulo { width: 341px; max-width: 100%; font-size: 24px; }
  .aula-bonus { width: 228px; font-size: 16px; }
  .video-aula { margin: 12.6px 0 0 1px; width: 360px; height: 640px; }

  /* 2 */
  .desconto-conteudo { min-height: 105px; justify-content: flex-start; gap: 15px; width: 360px; max-width: calc(100% - 30px); margin: 0 auto; }
  .desconto-titulo { width: 287px; font-size: 18px; text-align: left; }

  /* 3 */
  .plataforma .container { padding: 61px 0 74px; }
  .plataforma .selo { margin: 0 auto; padding-right: 0; }
  .plataforma-titulo { margin: 20px 0 0 20px; width: 321px; max-width: calc(100% - 20px); }
  .arte-plataforma { left: -17px; top: 190px; width: 394px; height: 252px; }
  .arte-grade { left: -30px; top: 302px; width: 420px; height: 213px; }
  /* no celular o tablet fica logo abaixo das etiquetas (cobrindo 13px da última), como antes */
  .arte-tablet { position: relative; left: 0; top: 0; margin-top: -13px; width: 371px; max-width: calc(100% + 11px); height: auto; }
  .arte-rosto { display: none; }
  .temas { margin: 191px 0 0 1px; width: calc(100% + 2px); gap: 10.5px 10px; }
  .temas li, .temas .t-preenchedores, .temas .t-anestesia {
    width: var(--largura-celular); height: 40px; --ajuste: 0; --recuo: 10px; --vao: 9px; --icone: 29px; --fonte: 14.196px; line-height: 1.2;
  }
  .temas .t-bioestimuladores, .temas .t-manejo, .temas .t-anestesia { --ajuste: 1px; }
  .temas .t-labios { --ajuste: -1px; }
  .temas .t-vendas { --ajuste: 0; }
  .temas .t-anestesia { --vao: 8px; }
  /* nesta página as três últimas linhas ficam 2px mais para baixo, como antes */
  .temas .t-marketing { margin-top: 2px; }
  /* ordem das etiquetas no celular, como antes */
  .temas .t-toxina { order: 1; }
  .temas .t-fios { order: 2; }
  .temas .t-fullface { order: 3; }
  .temas .t-preenchedores { order: 4; }
  .temas .t-labios { order: 5; }
  .temas .t-bioestimuladores { order: 6; }
  .temas .t-tecnologias { order: 7; }
  .temas .t-vendas { order: 8; }
  .temas .t-manejo { order: 9; }
  .temas .t-marketing { order: 10; }
  .temas .t-anatomia { order: 11; }
  .temas .t-anestesia { order: 12; }
  .plataforma-texto { margin: 38px auto 0; width: 311px; max-width: 100%; font-size: 16px; text-align: center; }
  .plataforma-botao { margin: 40px auto 0; width: 282px; max-width: 100%; }
  .depoimentos { margin-top: 138px; flex-direction: column; align-items: stretch; }
  .depoimentos-titulo { width: 341px; max-width: calc(100% - 10px); margin: 0 0 49.2px 10px; }
  .depoimentos-coluna { display: contents; }
  .depoimento, .depoimento.d4, .depoimento.d5, .depoimento.d6, .depoimento.d7 { margin: 0 0 20px; width: 100%; }
  .depoimento.d7 { margin-left: 1px; }
  .depoimento.d4 { margin-bottom: 0; }
  /* no celular a página antiga mostrava só 5 dos 7 depoimentos, nesta ordem */
  .depoimento.d1, .depoimento.d3 { display: none; }
  .d5 { order: 1; } .d2 { order: 2; } .d6 { order: 3; } .d7 { order: 4; } .d4 { order: 5; }

  /* 3 */
  .rotina .container { padding: 40px 0 74px; }
  .rotina-topo { display: block; }
  .rotina-titulo { width: 360px; max-width: 100%; }
  .rotina-paragrafo { margin-top: 30.2px; width: 360px; max-width: 100%; font-size: 16px; }
  .video-rotina { margin-top: 50px; width: 360px; height: 205px; }

  /* 4 */
  .planos .container { padding: 40px 0 74px; }
  .planos-titulo { width: 360px; max-width: 100%; }
  .planos-intro { margin-top: 60.4px; width: 326px; max-width: 100%; font-size: 14px; }
  .planos-cartoes { margin-top: 43px; padding: 0; grid-template-columns: minmax(0, 360px); row-gap: 59px; }
  .plano-ouro { min-height: 768px; padding: 40px 0 33px; }
  .plano-black { min-height: 1126px; padding: 31px 0 41px; margin-left: 1px; }
  .plano-nome { width: 293px; max-width: calc(100% - 40px); height: 49px; font-size: 20px; }
  .plano-black .plano-nome { margin-left: 0; }
  .plano-pagamento { font-size: 12px; line-height: 1.4; }
  .plano-ouro .plano-pagamento { margin-top: 9px; width: 232px; }
  .plano-black .plano-pagamento { margin-top: 8px; width: 186px; }
  .plano-de { font-size: 19px; }
  .plano-ouro .plano-de { margin-top: 29.2px; width: 187px; }
  .plano-black .plano-de { margin-top: 39.2px; width: 163px; }
  .plano-desconto { width: 246px; font-size: 19px; line-height: 1.3; }
  .plano-ouro .plano-desconto { margin-top: 21px; }
  .plano-black .plano-desconto { margin-top: 19px; }
  .plano-preco b { width: 187px; font-size: 37px; }
  .plano-ouro .plano-preco b { width: 170px; }
  .plano-preco span { width: 61px; font-size: 19px; }
  .plano-ouro .plano-preco { margin-top: 10.3px; }
  .plano-ouro .plano-preco span { margin: 19px 0 0 -8px; }
  .plano-black .plano-preco { margin-top: 12.3px; }
  .plano-black .plano-preco span { margin: 18px 0 0 -8px; }
  .plano-avista { font-size: 14px; }
  .plano-ouro .plano-avista { margin-top: 8.2px; width: 253px; }
  .plano-black .plano-avista { margin-top: 11.2px; width: 305px; max-width: 100%; }
  .plano-linha { width: 182px; }
  .plano-ouro .plano-linha { margin-top: 21.4px; }
  .plano-ouro .plano-linha-2 { margin-top: 20.4px; }
  .plano-black .plano-linha { margin-top: 20.4px; }
  .plano-black .plano-linha-2 { margin-top: 23.4px; }
  .plano-beneficios { margin: 42px 0 0 47px; width: auto; max-width: calc(100% - 50px); }
  .plano-beneficios li { min-height: 27px; gap: 7px; font-size: 14px; }
  .plano-beneficios li + li { margin-top: 11px; }
  .plano-beneficios li:nth-child(2) { margin-top: 16px; }
  .plano-beneficios li > span { width: 238px; max-width: 100%; }
  .plano-beneficios svg { width: 27px; height: 27px; }
  .plano-itens { margin: 46px 0 0 45px; width: auto; max-width: calc(100% - 50px); }
  .plano-itens > li { gap: 11px; min-height: 27px; font-size: 14px; }
  .plano-itens svg { width: 27px; height: 27px; }
  .plano-itens .i-cursos { margin-top: 9px; }
  .plano-itens .i-lista { margin-top: 3px; padding-left: 38px; }
  .plano-itens .i-lista ul { padding-left: 21px; }
  .plano-itens .i-lista-cursos ul { width: 229px; max-width: 100%; }
  .plano-itens .i-lista-eventos ul { width: 182px; }
  .plano-itens .i-ia { margin-top: 21px; }
  .plano-itens .i-eventos { margin-top: 8px; }
  .plano-itens .i-materiais { margin-top: 15px; }
  .plano-itens .i-grupo { margin-top: 13px; }
  .plano-itens .i-grupo span { width: 188px; }
  .plano-botao { width: 307px; max-width: calc(100% - 40px); height: 59px; font-size: 16px; }
  .plano-ouro .plano-botao { margin-top: 40px; }
  .plano-black .plano-botao { margin-top: 39px; height: 60px; }
  .plano-renovacao { margin-top: 9px; width: 273px; font-size: 12px; line-height: 1.4; }
  .plano-etiqueta { top: -19px; width: 254px; height: 36px; }
  .planos-prazo { margin-top: 40px; width: 344px; max-width: 100%; font-size: 12px; line-height: 1.4; }
  .garantia { margin-top: 40px; width: 100%; min-height: 206px; padding: 0 0 0 13px; }
  .garantia-selo { width: 90px; height: 87px; }
  .garantia-texto { margin-left: 21px; width: 221px; font-size: 14px; }
  .seguranca { margin-top: 20px; width: 142px; display: flex; flex-direction: column; }
  .seguranca li:nth-child(2) { margin-top: 15px; }
  .seguranca li:nth-child(3) { margin-top: 24px; }
  .seguranca span { min-height: 34px; font-size: 12px; line-height: 1.4; }

  /* 5 */
  .metodo .container { min-height: 0; padding: 537px 0 73px; }
  .metodo-foto { left: 79px; top: 175px; width: 203px; height: 304px; }
  .metodo-mosaico { left: -30px; top: 80px; width: 420px; height: 298px; }
  .metodo-celulares { display: none; }
  .metodo-texto { width: auto; margin-left: 39px; }
  .metodo-titulo { width: 259px; }
  .metodo-paragrafo { margin-top: 19.6px; width: 282px; max-width: calc(100% - 39px); font-size: 16px; }
  .metodo-botao { margin-top: 44.4px; width: 282px; max-width: calc(100% - 39px); }

  /* 6 */
  .faq .container { display: block; padding: 80px 0 80px; }
  .faq-cabecalho { width: auto; display: flex; align-items: center; gap: 23px; }
  .faq-icone { flex: none; }
  .faq-titulo { margin-top: 0; width: 235px; }
  .faq-lista { margin-top: 40px; width: 100%; }

  /* 7 */
  .rodape { padding: 90px 0 92px; }
  .rodape-cartao { margin-left: 0; width: 100%; min-height: 570px; padding: 86px 0 40px; }
  .rodape-criado { margin-right: 0; }
  .rodape-logo { margin-top: 10.2px; width: 221px; max-width: 100%; height: 30px; }
  .rodape-dados { margin-top: 70px; width: 289px; }
  .rodape-legal { margin: 64px 0 0; width: 100%; }
  .rodape-aviso-titulo { font-size: 14px; }
  .rodape-aviso { margin-top: 40.4px; }
  .rodape-equipe { margin-top: 40px; }
  .rodape-legal hr { margin-top: 45px; opacity: .4; }
  .rodape-termos { margin-top: 34px; width: 100%; }

  /* pop-up: a página antiga deixava o formulário fora da caixa no celular; aqui fica dentro dela */
  .precheckout-caixa, .precheckout.precheckout-black .precheckout-caixa { width: 340px; max-width: calc(100% - 20px); padding-top: 42px; }
  .precheckout-form, .precheckout.precheckout-black .precheckout-form { margin-top: 29px; }
  .precheckout-titulo, .precheckout.precheckout-black .precheckout-titulo { font-size: 15px; }
  .precheckout-form { max-width: calc(100% - 30px); }
  .aguarde { font-size: 35px; }
}