/* CSS canônico das páginas de venda de cursos. Modelo: curso-de-terapeuta-vibracional.html. */

@font-face{font-family:Poppins;src:url("Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fonte:Poppins,Arial,Helvetica,sans-serif;
  --cor-fundo:#0c273b;
  --cor-painel:#0f2555;
  --cor-amarelo:#ffde59;
  --cor-linha:#f7cd60;
  --cor-texto:#fff;
  --raio:20px;
  --largura:1280px;
  --largura-texto:900px;
  --espaco-secao:10rem;
  --espaco:3rem;
  --texto-tamanho:clamp(1.62rem,1.48rem + 0.28vw,1.82rem);
  --h1-tamanho:clamp(2.8rem,1.95rem + 2.6vw,4.4rem);
  --h2-tamanho:clamp(2.4rem,2rem + 1.25vw,3.2rem);
  --h3-tamanho:clamp(1.82rem,1.7rem + 0.32vw,2.05rem);
  --caixa-icone-titulo-tamanho:clamp(1.72rem,1.62rem + 0.22vw,1.9rem);
  --caixa-icone-texto-tamanho:clamp(1.45rem,1.35rem + 0.22vw,1.62rem);
}

*,*:before,*:after{box-sizing:border-box}
html{font-size:62.5%;overflow-y:scroll;background:#fff}
body{margin:0;overflow-x:hidden;background:var(--cor-fundo);color:var(--cor-texto);font-family:var(--fonte);font-size:var(--texto-tamanho);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;line-height:1.25;text-transform:uppercase}
h1{font-size:var(--h1-tamanho);color:var(--cor-amarelo);text-align:center}
h2,.titulo-secao{font-size:var(--h2-tamanho)}
h3{font-size:var(--h3-tamanho)}
p+p{margin-top:1.35em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
main{width:100%;overflow-x:hidden}
h1,h2,h3,p,a,button{max-width:100%;overflow-wrap:break-word}
.secao>*{min-width:0}

/* BASE DO TEMPLATE */
.secao{display:flex;width:min(var(--largura),calc(100% - 4rem));max-width:100%;margin:var(--espaco-secao) auto 0;gap:var(--espaco);align-items:center}
.texto{font-size:var(--texto-tamanho);line-height:1.65;color:var(--cor-texto)}
.texto--central{text-align:center}
.texto--largo{width:min(800px,100%);max-width:100%}
.titulo-secao--amarelo{color:var(--cor-amarelo)}
.coluna-texto{display:flex;flex:1 1 48rem;max-width:100%;flex-direction:column;gap:2.4rem}
.coluna-imagem{display:flex;flex:1 1 36rem;max-width:100%;justify-content:center;align-items:center}
.coluna-imagem picture{display:block;max-width:100%}
.imagem-quadrada{width:min(90%,60rem);border-radius:var(--raio);aspect-ratio:1;object-fit:cover}
.imagem-curso-responsiva{width:min(100%,80rem);border-radius:var(--raio);aspect-ratio:1;object-fit:cover}
/* HEADER */
.header{width:min(var(--largura-texto),calc(100% - 4rem));margin-top:5rem;flex-direction:column;gap:3.6rem;text-align:center}
.header__logo{width:12rem;max-width:40vw;margin-bottom:2rem}
.header h1+.header__texto{margin-top:.4rem}
.header__texto+.prova-social-header{margin-top:.6rem}
.prova-social-header{display:flex;max-width:100%;align-items:center;justify-content:center;gap:.8rem;overflow-x:auto;scrollbar-width:none}
.prova-social-header::-webkit-scrollbar{display:none}
.prova-social-header__badge{display:inline-flex;flex:0 0 auto;min-height:4.6rem;padding:.65rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);align-items:center;gap:.65rem;color:var(--cor-texto);font-size:clamp(1.22rem,1.08rem + .24vw,1.42rem);line-height:1.15;white-space:nowrap}
.prova-social-header__badge strong{color:inherit;font-weight:600}
.prova-social-header__estrelas{display:inline-flex;color:var(--cor-amarelo);font-size:1.15em;letter-spacing:0;text-shadow:0 0 .65rem rgba(255,222,89,.55)}
.prova-social-header__estrela-meia{background:linear-gradient(90deg,var(--cor-amarelo) 50%,rgba(255,222,89,.32) 50%);color:transparent;background-clip:text;-webkit-background-clip:text}
.prova-social-header__avatares{display:flex;align-items:center}
.prova-social-header__avatares img{width:3.2rem;height:3.2rem;border:2px solid var(--cor-fundo);border-radius:50%;object-fit:cover;object-position:center center;background:var(--cor-painel)}
.prova-social-header__avatares img+img{margin-left:-1rem}
.titulo-destaque-branco{color:var(--cor-texto)}

/* CAIXAS DE ICONES */
.caixas-icones{flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:stretch}
.caixa-icone{display:flex;flex:1 1 26rem;max-width:30rem;padding:2.4rem 2.2rem;border:1px solid var(--cor-amarelo);border-radius:var(--raio);flex-direction:column;align-items:center;justify-content:flex-start;gap:1.5rem;text-align:center}
.caixa-icone__imagem{width:92px;aspect-ratio:1;object-fit:contain}
.caixa-icone__titulo{font-size:var(--caixa-icone-titulo-tamanho);line-height:1.35;color:var(--cor-amarelo)}
.caixa-icone__texto{font-size:var(--caixa-icone-texto-tamanho);line-height:1.68;color:var(--cor-texto)}

/* O QUE VOCE VAI APRENDER */
.aprendizado{flex-direction:row;flex-wrap:wrap;justify-content:space-between}

/* ACORDEAO */
.grade-curricular{width:min(var(--largura-texto),calc(100% - 4rem));flex-direction:column}
.acordeao{width:100%;padding-top:1rem}
.acordeao__item{width:100%}
.acordeao__botao{display:flex;width:100%;min-height:7rem;margin-top:2rem;padding:1.7rem 2.2rem;border:1px solid var(--cor-amarelo);border-radius:25px;background:transparent;color:var(--cor-texto);align-items:center;justify-content:space-between;gap:1.8rem;font:600 var(--h3-tamanho)/1.38 var(--fonte);text-align:left;cursor:pointer}
.acordeao__conteudo{display:none;padding:3rem 3.2rem;line-height:1.68;color:var(--cor-texto)}
.acordeao__item.ativo .acordeao__conteudo{display:block}
.acordeao__icone{font-size:3rem;line-height:1;transition:transform .2s ease}
.acordeao__item.ativo .acordeao__icone{transform:rotate(90deg)}

/* CARDS DE AULAS */
.grade-curricular--leis{width:min(var(--largura),calc(100% - 4rem))}
.cards-aulas{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:3rem;margin-top:1rem}
.cards-aulas .grade-leis__item{position:relative;display:flex;width:100%;min-height:45rem;padding:1.6rem 1.6rem 2.2rem;border:1px solid rgba(255,222,89,.28);border-radius:var(--raio);background:transparent;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.25rem;text-align:center}
.cards-aulas .grade-leis__badge{display:none}
.cards-aulas .grade-leis__imagem{width:100%;aspect-ratio:1;margin:0 auto .4rem;border-radius:18px;object-fit:cover}
.cards-aulas .grade-leis__item h3{color:var(--cor-amarelo);font-size:clamp(1.45rem,1.25rem + .3vw,1.72rem);line-height:1.3}
.cards-aulas .grade-leis__item p{color:var(--cor-texto);font-size:clamp(1.25rem,1.12rem + .2vw,1.42rem);line-height:1.5}

/* AREA DE MEMBROS */
.area-membros{align-items:center;justify-content:space-between;gap:clamp(4rem,5vw,7rem)}
.area-membros__conteudo{max-width:56rem}
.area-membros__recursos{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:2.4rem}
.area-membros__recurso{display:flex;min-height:10.5rem;padding:1.6rem;border:1px solid var(--cor-linha);border-radius:var(--raio);background:rgba(255,255,255,.035);flex-direction:column;justify-content:center;gap:.7rem}
.area-membros__recurso strong{color:var(--cor-amarelo);font-size:1.6rem;line-height:1.25}
.area-membros__recurso span{color:var(--cor-texto);font-size:1.35rem;line-height:1.45}
.area-membros__mockup{display:flex;min-height:52rem;flex:1 1 52rem;align-items:center;justify-content:center}
.area-membros__imagem{display:block;width:min(100%,64rem);height:auto}

/* QUEM SOU */
.quem-sou{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
.imagem-professor{width:min(450px,100%);border-radius:var(--raio)}

/* CERTIFICADO */
.certificado-curso{align-items:center;justify-content:space-between;gap:clamp(4rem,5vw,7rem)}
.certificado-curso__conteudo{max-width:58rem}
.certificado-curso__logos{display:block;width:min(100%,25.5rem);margin-top:2.8rem}
.certificado-curso__logos img{display:block;width:100%;height:auto}
.certificado-curso__mockup{display:flex;align-items:center;justify-content:center}
.certificado-curso__imagem{display:block;width:min(100%,56rem);height:auto}
/* PAGAMENTO */
.pagamento{margin-bottom:10rem;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch}
.pagamento-info{display:flex;flex:1 1 32rem;max-width:39rem;padding:2.8rem 3rem;border:1px solid var(--cor-linha);border-radius:var(--raio);flex-direction:column;align-items:flex-start;gap:2rem;text-align:left;font-size:clamp(1.4rem,1.3rem + .22vw,1.6rem);line-height:1.58}
.pagamento-info--direita{align-items:flex-end;text-align:right}
.pagamento-info__titulo{color:var(--cor-amarelo);font-size:clamp(1.85rem,1.72rem + .35vw,2.08rem);line-height:1.28;text-transform:none}
.pagamento-info__titulo+p{margin-top:-.8rem}
.pagamento-info__icone{width:92px}.pagamento-info__icone--menor{width:82px}
.linha{display:block;width:100%;border-top:1px solid var(--cor-linha)}
.pagamento-card{display:flex;flex:1 1 34rem;max-width:40rem;scroll-margin-top:3rem;align-self:stretch;padding:4rem 3rem;background:var(--cor-painel);border-radius:var(--raio);flex-direction:column;align-items:center;justify-content:center;gap:2.35rem;text-align:center}
.pagamento-card p{margin:0}
.pagamento-card__badge{display:inline-flex;padding:.75rem 1.4rem;border-radius:999px;background:var(--cor-texto);color:var(--cor-fundo);font-size:1.15rem;font-weight:600;line-height:1;letter-spacing:0;text-transform:uppercase}
.pagamento-card__texto-oferta{max-width:31rem;color:var(--cor-texto);font-size:clamp(1.35rem,1.22rem + .32vw,1.58rem);line-height:1.6}
.pagamento-card__label{color:rgba(255,255,255,.86);font-size:1.45rem;line-height:1.25;text-transform:uppercase;font-weight:600}
.pagamento-card__valor{font-size:6rem;font-weight:600;line-height:1.05;text-transform:uppercase}
.pagamento-card__valor--parcelado{font-size:clamp(3.8rem,4.8vw,5.2rem);white-space:nowrap}
.pagamento-card__vezes{font-size:.66em}
.pagamento-card .botao{margin-top:.6rem}

.botao{display:inline-flex;min-height:clamp(5rem,4rem + 2vw,6.4rem);width:auto;max-width:100%;padding:clamp(1rem,.7rem + 1vw,1.5rem) clamp(1.5rem,1rem + 2vw,3rem);border-radius:999px;background:var(--cor-amarelo);color:var(--cor-fundo);align-items:center;justify-content:center;font-size:clamp(1.4rem,1rem + 1.5vw,2.2rem);font-weight:600;line-height:1.15;text-align:center;text-transform:uppercase;white-space:nowrap;transition:filter .2s ease,transform .2s ease}
.botao:hover{filter:brightness(1.04);transform:translateY(-1px)}
:where(a,button):focus-visible{outline:3px solid var(--cor-amarelo);outline-offset:4px}
.pagamento-card__pagamentos{width:min(300px,100%);margin:.8rem 0 0}

@media (max-width:1300px){
  .secao{width:calc(100% - 4rem)}
}

@media (max-width:991px){
  .secao{padding:0 3rem}
  .caixa-icone{width:auto;max-width:none}
  .aprendizado,.quem-sou,.certificado-curso{flex-direction:column;justify-content:center;align-items:center}
  .coluna-texto,.coluna-imagem{flex-basis:65%;align-items:center;text-align:center}
  .area-membros{flex-direction:column}
  .area-membros__conteudo{max-width:72rem}
  .area-membros__mockup{width:100%;min-height:auto;flex-basis:auto}
  .area-membros__imagem{width:min(100%,72rem)}
  .pagamento{flex-direction:column;align-items:center;padding-bottom:7rem}
  .pagamento-info,.pagamento-card{width:min(650px,100%);max-width:650px;align-items:center;text-align:center}
  .pagamento-info--direita{order:1}
  .pagamento-info:not(.pagamento-info--direita){order:2}
  .pagamento-card{order:3}
  .cards-aulas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-aulas .grade-leis__item{min-height:auto}
}

@media (max-width:767px){
  .caixa-icone{flex-basis:100%;max-width:100%}
  .caixa-icone__imagem{width:90px}
  .cards-aulas{grid-template-columns:1fr;gap:3rem}
  .cards-aulas .grade-leis__item{width:min(100%,32rem);min-height:auto;padding:1.6rem 1.6rem 2.2rem;justify-self:center}
  .cards-aulas .grade-leis__imagem{width:100%;max-width:none}
  .coluna-texto,.coluna-imagem{flex-basis:100%}
  .coluna-imagem{width:100%}
  .coluna-imagem picture{width:100%}
  .imagem-quadrada{width:100%}
  .imagem-curso-responsiva{width:100%;aspect-ratio:4/5}
  .quem-sou{flex-direction:column}
  .quem-sou__imagem{order:2}
  .quem-sou .coluna-texto{order:1}
  .certificado-curso__mockup{order:2}
  .certificado-curso .coluna-texto{order:1}
  .aprendizado .coluna-texto,.quem-sou .coluna-texto,.certificado-curso .coluna-texto{align-items:flex-start;text-align:left}
  .area-membros .coluna-texto{align-items:flex-start;text-align:left}
  .pagamento-info,.pagamento-card{width:100%;max-width:100%}
}

@media (max-width:478px){
  :root{--espaco-secao:6rem}
  .secao{width:100%;padding:0 2rem}
  .header,.grade-curricular{width:100%}
  .prova-social-header{width:100%;flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:1.2rem;margin-bottom:2.4rem;overflow:visible}
  .prova-social-header__badge{width:min(100%,28rem);max-width:100%;min-height:4.2rem;padding:.6rem .85rem;justify-content:center;font-size:clamp(1.12rem,3.55vw,1.28rem)}
  .prova-social-header__avatares img{width:2.8rem;height:2.8rem}
  .prova-social-header__avatares img+img{margin-left:-.85rem}
  .area-membros__recursos{grid-template-columns:1fr}
  .area-membros__imagem{width:min(100%,58rem)}
  .certificado-curso__imagem{width:min(100%,54rem)}
  .header__logo{width:8rem}
  .acordeao__botao{min-height:6rem;padding:1.5rem;font-size:clamp(1.55rem,4.6vw,1.72rem)}
  .acordeao__conteudo{padding:1.5rem}
  .pagamento-card__valor{font-size:clamp(4rem,14vw,5rem)}
  .pagamento-card__valor--parcelado{font-size:clamp(3.8rem,13vw,4.9rem)}
}

@media (max-width:360px){
  .pagamento-card{padding-right:2rem;padding-left:2rem}
  .botao{width:100%;padding-right:1.5rem;padding-left:1.5rem;font-size:1.6rem}
}
