/*
  CSS oficial da página de artigo.

  Layout aprovado e ajustado para funcionar nos artigos com imagem e vídeo.
*/

:root{
  --fonte:Poppins,Arial,Helvetica,sans-serif;
  --fonte-titulo:"Noto Serif",Georgia,serif;
  --cor-texto:#101010;
  --cor-texto-suave:#555;
  --cor-titulo:#050505;
  --cor-borda:#e6e6e6;
  --cor-preto:#050505;
  --cor-amarelo:#ffde59;
  --cor-foco:#b38b2d;
  --cinza-card:#ebebeb;
  --raio:18px;
  --raio-imagem:14px;
  --sombra-card:0 14px 32px rgba(0,0,0,.08);
  --largura-site:1320px;
  --largura-artigo:900px;
  --site-gutter:clamp(2rem,4vw,4rem);
  --gap-layout-artigo:clamp(3rem,4vw,4.8rem);
  --padding-card-artigo:clamp(2.2rem,3vw,3.2rem);
  --h1-tamanho:clamp(3.5rem,2.6rem + 1.9vw,5.1rem);
  --espaco-1:.8rem;
  --espaco-2:1.6rem;
  --espaco-3:2.4rem;
  --espaco-4:3.2rem;
  --espaco-5:4.8rem;
  --espaco-6:6.4rem;
}

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

h1,h2,h3,p,ul,ol{margin:0}
h1,h2,h3{font-weight:600;line-height:1.22}
h1{font-size:var(--h1-tamanho)}
h2{font-size:clamp(1.82rem,1.45rem + .52vw,2.18rem)}
p{color:var(--cor-texto);font-size:clamp(1.62rem,1.5rem + .28vw,1.9rem)}
p+p{margin-top:2.4rem}
h1,h2,h3,p,a,button{max-width:100%;overflow-wrap:break-word}

.aula-post{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:3rem auto 0;
}

.aula-post__layout{
  display:grid;
  grid-template-columns:minmax(0,var(--largura-artigo)) minmax(25rem,32rem);
  gap:var(--gap-layout-artigo);
  align-items:start;
}

.aula-post__conteudo{
  width:100%;
  min-width:0;
}

.aula-post__hero{
  max-width:91rem;
  margin-bottom:var(--espaco-4);
}

.aula-post__categoria{
  margin-bottom:1.2rem;
  color:var(--cor-texto);
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.aula-post__hero h1,
.artigo-conteudo h1{
  margin-bottom:1.8rem;
  color:var(--cor-titulo);
  font-family:var(--fonte-titulo);
  font-size:var(--h1-tamanho);
  font-weight:600;
  line-height:1.16;
}

.aula-post__hero>p{
  max-width:78rem;
  color:var(--cor-texto);
  font-size:clamp(1.8rem,1.55rem + .5vw,2.15rem);
  line-height:1.6;
}

.artigo-conteudo h2{
  color:var(--cor-titulo);
  font-family:var(--fonte-titulo);
  font-size:clamp(2.6rem,2.1rem + .9vw,3.4rem);
  font-weight:600;
  line-height:1.25;
}

.artigo-conteudo h3{
  color:var(--cor-titulo);
  font-family:var(--fonte);
  font-size:clamp(2.05rem,1.8rem + .5vw,2.55rem);
  font-weight:600;
  line-height:1.3;
}

.artigo-conteudo h4{
  color:var(--cor-titulo);
  font-family:var(--fonte);
  font-size:clamp(1.8rem,1.65rem + .3vw,2.1rem);
  font-weight:600;
  line-height:1.4;
}

.artigo-conteudo p{
  color:var(--cor-texto);
  font-size:clamp(1.62rem,1.52rem + .25vw,1.78rem);
  line-height:1.78;
}

.artigo-conteudo p a:not(.artigo-cta),
.artigo-conteudo li a:not(.artigo-cta){
  color:var(--cor-texto);
  font-weight:700;
  text-decoration:none;
  transition:color .2s ease;
}

.artigo-conteudo p a:not(.artigo-cta):hover,
.artigo-conteudo li a:not(.artigo-cta):hover{
  color:var(--cor-texto);
  text-decoration:none;
}

.artigo-conteudo p a:not(.artigo-cta):focus-visible,
.artigo-conteudo li a:not(.artigo-cta):focus-visible{
  outline:3px solid rgba(16,16,16,.28);
  outline-offset:.18em;
  border-radius:.2em;
}

.artigo-conteudo blockquote{
  margin:var(--espaco-4) 0;
  padding:clamp(2rem,3vw,2.8rem);
  border:0;
  border-radius:12px;
  background:var(--cinza-card);
}

.artigo-conteudo blockquote p{
  color:var(--cor-texto);
  font-size:clamp(1.85rem,1.65rem + .35vw,2.15rem);
  font-style:italic;
  line-height:1.65;
}

.artigo-conteudo blockquote p+p{margin-top:var(--espaco-2)}

.artigo-conteudo>h2,
.artigo-conteudo>section{
  margin-top:var(--espaco-5);
}

.artigo-conteudo>h2:first-child,
.artigo-conteudo>section:first-child{
  margin-top:0;
}

.artigo-conteudo>h2,
.artigo-conteudo section>h2{
  margin-bottom:var(--espaco-3);
}

.artigo-conteudo>h3,
.artigo-conteudo section>h3{
  margin-top:var(--espaco-4);
  margin-bottom:var(--espaco-2);
}

.artigo-conteudo p+p{margin-top:var(--espaco-2)}

.artigo-conteudo>h2+p,
.artigo-conteudo>h3+p,
.artigo-conteudo>h4+p,
.artigo-conteudo section>h2+p,
.artigo-conteudo section>h3+p,
.artigo-conteudo section>h4+p{
  margin-top:0;
}

.site-page h1,
.site-page h2{
  color:#050505;
  font-family:var(--fonte-titulo);
  text-transform:none;
}

.site-page h1{font-weight:800}
.site-page h2{font-weight:600}

.page-hero h1{margin:0 0 2rem}
.page-hero p{
  max-width:78rem;
  font-family:var(--fonte);
  font-size:clamp(1.9rem,1.6rem + .5vw,2.2rem);
  line-height:1.6;
}

@media (max-width:478px){
  .page-hero h1{font-size:3.06rem}
  .page-hero p{font-size:1.62rem;line-height:1.52}
}

.aula-autor{
  display:flex;
  margin-top:var(--espaco-3);
  align-items:center;
  gap:1.3rem;
}

.aula-autor img{
  width:5.6rem;
  height:5.6rem;
  border-radius:50%;
  object-fit:cover;
}

.aula-autor p{
  display:grid;
  gap:.2rem;
  font-size:1.4rem;
  line-height:1.35;
}

.aula-autor span{font-weight:600}
.aula-autor time{color:var(--cor-texto-suave)}

.artigo-caixa,
.artigo-resumo{
  margin:var(--espaco-5) 0;
  padding:clamp(2.2rem,3vw,2.8rem);
  border-radius:12px;
  background:var(--cinza-card);
}

.artigo-indice,
.artigo-resumo{
  border:1px solid var(--cor-borda);
}

.artigo-caixa__titulo,
.artigo-resumo h2{
  margin-bottom:var(--espaco-2);
  color:var(--cor-titulo);
  font-family:var(--fonte-titulo);
  font-size:clamp(2.15rem,1.95rem + .55vw,2.35rem);
  font-weight:700;
  line-height:1.25;
}

.artigo-indice ol{
  display:grid;
  margin:0;
  padding-left:0;
  gap:1rem;
  list-style:none;
}

.artigo-indice .artigo-caixa__titulo{
  font-size:clamp(2.35rem,2.08rem + .68vw,2.72rem);
}

.artigo-indice li{
  font-size:clamp(1.52rem,1.45rem + .18vw,1.6rem);
  line-height:1.55;
}

.artigo-indice a{
  color:var(--cor-texto);
  text-decoration:none;
}

.artigo-indice a:hover,
.artigo-indice a:focus-visible{
  color:var(--cor-preto);
  text-decoration:none;
}

.artigo-telegram{
  border:0;
  background:#eef8ff;
}

.artigo-telegram .artigo-caixa__titulo{
  font-size:clamp(2.35rem,2.08rem + .68vw,2.72rem);
}

.artigo-telegram p:not(.artigo-caixa__titulo){
  max-width:68rem;
  font-size:clamp(1.56rem,1.48rem + .2vw,1.65rem);
  line-height:1.7;
}

.artigo-telegram__botao{
  display:inline-flex;
  min-height:4.8rem;
  margin-top:var(--espaco-3);
  padding:clamp(1.1rem,1rem + .25vw,1.2rem) clamp(1.6rem,1.25rem + .9vw,2.1rem);
  border-radius:999px;
  background:#0088cc;
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:clamp(1.45rem,1.36rem + .2vw,1.55rem);
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:background-color .2s ease;
}

.artigo-telegram__botao:hover{
  background:#0077b3;
  color:#fff;
  text-decoration:none;
}

.artigo-telegram__botao:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
}

.artigo-resumo ul{
  display:grid;
  padding-left:0;
  gap:1.35rem;
  list-style:disc inside;
}

.artigo-resumo li{
  font-size:clamp(1.52rem,1.45rem + .18vw,1.6rem);
  line-height:1.6;
}

.artigo-resumo li::marker{
  color:var(--cor-preto);
  font-size:.72em;
}

.artigo-faq-secao{margin-top:var(--espaco-6)!important}
.artigo-faq{
  display:grid;
  gap:1.2rem;
}

.artigo-faq__item{width:100%}
.artigo-faq__botao{
  display:flex;
  width:100%;
  min-height:6.8rem;
  padding:clamp(1.4rem,1.15rem + .5vw,1.6rem) clamp(1.5rem,1.1rem + .9vw,2.1rem);
  border:0;
  border-radius:12px;
  background:var(--cinza-card);
  color:var(--cor-texto);
  align-items:center;
  justify-content:space-between;
  gap:1.8rem;
  font-size:clamp(1.55rem,1.43rem + .32vw,1.7rem);
  font-weight:600;
  line-height:1.4;
  text-align:left;
  cursor:pointer;
}

.artigo-faq__botao:hover{background:#e5e5e5}
.artigo-faq__botao:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
}

.artigo-faq__icone{
  font-size:3rem;
  line-height:1;
  transition:transform .2s ease;
}

.artigo-faq__item.ativo .artigo-faq__icone{transform:rotate(90deg)}
.artigo-faq__conteudo{padding:var(--espaco-2) 2.2rem var(--espaco-1)}
.artigo-faq__conteudo[hidden]{display:none}
.artigo-faq__conteudo p{
  font-size:clamp(1.56rem,1.48rem + .2vw,1.65rem);
  line-height:1.7;
}

.artigo-conteudo li{
  color:var(--cor-texto);
  font-size:clamp(1.58rem,1.5rem + .18vw,1.65rem);
  line-height:1.65;
}

.artigo-lista,
.artigo-conteudo>ul,
.artigo-conteudo>ol,
.artigo-conteudo section>ul,
.artigo-conteudo section>ol{
  display:grid;
  margin:var(--espaco-3) 0;
  padding:0;
  gap:1.15rem;
  list-style:none;
}

.artigo-lista--numerada,
.artigo-conteudo>ol,
.artigo-conteudo section>ol{
  counter-reset:artigo-lista;
}

.artigo-lista li,
.artigo-conteudo>ul>li,
.artigo-conteudo>ol>li,
.artigo-conteudo section>ul>li,
.artigo-conteudo section>ol>li{
  position:relative;
  margin:0;
  padding-left:clamp(2rem,1.7rem + .55vw,2.5rem);
}

.artigo-lista li+li,
.artigo-conteudo>ul>li+li,
.artigo-conteudo>ol>li+li,
.artigo-conteudo section>ul>li+li,
.artigo-conteudo section>ol>li+li{
  margin-top:0;
}

.artigo-lista+p,
.artigo-conteudo>ul+p,
.artigo-conteudo>ol+p,
.artigo-conteudo section>ul+p,
.artigo-conteudo section>ol+p{
  margin-top:var(--espaco-3);
}

.artigo-lista>li::before,
.artigo-conteudo>ul>li::before,
.artigo-conteudo section>ul>li::before{
  content:"";
  position:absolute;
  top:.72em;
  left:.25rem;
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background:#2f2f2f;
}

.artigo-lista--numerada>li,
.artigo-conteudo>ol>li,
.artigo-conteudo section>ol>li{
  counter-increment:artigo-lista;
  padding-left:clamp(2.7rem,2.25rem + .85vw,3.35rem);
}

.artigo-lista--numerada>li::before,
.artigo-conteudo>ol>li::before,
.artigo-conteudo section>ol>li::before{
  content:counter(artigo-lista) ".";
  position:absolute;
  top:0;
  left:0;
  min-width:2.2rem;
  color:#2f2f2f;
  font-size:.95em;
  font-weight:600;
  line-height:inherit;
  text-align:left;
}

.artigo-compartilhar{
  display:flex;
  margin:calc(var(--espaco-5) * -1 + var(--espaco-3)) 0 var(--espaco-5);
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
}

.artigo-compartilhar__botao{
  display:inline-flex;
  min-height:4.8rem;
  padding:0 clamp(1.6rem,1.15rem + 1vw,2.2rem);
  border:0;
  border-radius:999px;
  background:var(--cor-amarelo);
  color:var(--cor-preto);
  align-items:center;
  justify-content:center;
  gap:.9rem;
  font-size:clamp(1.34rem,1.26rem + .18vw,1.42rem);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.25;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s ease;
}

.artigo-compartilhar__botao:hover{background:#f4cf3c}
.artigo-compartilhar__botao:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
}

.artigo-compartilhar__icone{
  width:2rem;
  height:2rem;
  fill:currentColor;
  flex:0 0 auto;
}

.artigo-cta-secao{
  display:block;
  width:100%;
  margin-top:var(--espaco-6)!important;
  padding:var(--padding-card-artigo);
  border:1px solid var(--cor-borda);
  border-radius:12px;
  background:var(--cinza-card);
}

.artigo-cta-secao h2{margin-bottom:var(--espaco-2)!important}
.artigo-cta-secao p+p{margin-top:var(--espaco-2)}
.artigo-cta-secao p:last-child{margin-top:var(--espaco-3)}
.artigo-cta-secao p+.artigo-cta{margin-top:var(--espaco-3)}
.artigo-cta{
  display:inline-flex;
  width:auto;
  max-width:100%;
  min-height:4.8rem;
  box-sizing:border-box;
  padding:0 clamp(1.6rem,1.15rem + 1vw,2.2rem);
  border:0;
  border-radius:999px;
  background:var(--cor-amarelo);
  box-shadow:none;
  color:var(--cor-preto);
  align-items:center;
  justify-content:center;
  font-size:clamp(1.34rem,1.26rem + .18vw,1.42rem);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.25;
  text-align:center;
  text-decoration:none!important;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s ease;
}

.artigo-cta:hover{
  background:#f4cf3c;
  color:var(--cor-preto);
  text-decoration:none!important;
}

.artigo-cta:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
}

.artigo-bio{
  margin-top:var(--espaco-6)!important;
  padding:var(--padding-card-artigo);
  border:1px solid var(--cor-borda);
  border-radius:16px;
}

.artigo-bio__layout{
  display:grid;
  grid-template-columns:22rem minmax(0,1fr);
  gap:3rem;
  align-items:center;
}

.artigo-bio__imagem{
  width:22rem;
  border-radius:50%;
  aspect-ratio:1;
  object-fit:cover;
}

.artigo-bio__texto p+p{margin-top:var(--espaco-2)}

.artigo-relacionados{
  position:sticky;
  top:2.4rem;
  margin-top:var(--espaco-5);
  align-self:start;
}

.artigo-relacionados__titulo{
  margin-bottom:1.6rem;
  color:var(--cor-titulo);
  font-family:var(--fonte-titulo);
  font-size:clamp(2.15rem,1.95rem + .55vw,2.35rem);
  font-weight:600;
  line-height:1.25;
}

.artigo-relacionados__lista{
  display:grid;
  gap:1.4rem;
}

.artigo-figura{margin:var(--espaco-5) 0}
.artigo-figura picture{display:block}
.artigo-figura img{
  width:100%;
  border-radius:10px;
  aspect-ratio:1200/630;
  object-fit:cover;
  background:#f7f7f7;
}

.artigo-figura figcaption{
  margin-top:1rem;
  color:var(--cor-texto-suave);
  font-size:clamp(1.3rem,1.22rem + .18vw,1.38rem);
  line-height:1.5;
}

.artigo-figura--hero{margin:0 0 var(--espaco-5)}
.artigo-video{
  width:100%;
  aspect-ratio:1200/630;
  border-radius:10px;
  background:#050505;
  overflow:hidden;
}

.artigo-video iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion:reduce){.artigo-faq__icone{transition:none}
  .artigo-conteudo p a:not(.artigo-cta),
  .artigo-conteudo li a:not(.artigo-cta),
  .artigo-compartilhar__botao,
  .artigo-cta{transition:none}
}

@media (max-width:991px){
  .aula-post__layout{
    grid-template-columns:1fr;
    gap:0;
  }

  .aula-post__conteudo{
    width:min(var(--largura-artigo),100%);
  }

  .artigo-relacionados{
    position:static;
    width:min(var(--largura-artigo),100%);
    margin-top:var(--espaco-6);
  }

  .artigo-relacionados__lista{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:700px){
  :root{
    --espaco-4:2.8rem;
    --espaco-5:4rem;
  }

  .aula-post{
    width:calc(100% - (var(--site-gutter) * 2));
    margin-top:2rem;
  }

  .aula-post__hero{margin-bottom:var(--espaco-3)}

  .aula-post__hero h1,
  .artigo-conteudo h1{
    font-size:clamp(3.05rem,2.85rem + .62vw,3.35rem);
  }

  .aula-post__hero>p{
    font-size:clamp(1.62rem,1.5rem + .35vw,1.78rem);
    line-height:1.55;
  }

  .artigo-conteudo p{
    line-height:1.72;
  }

  .artigo-figura{margin:var(--espaco-4) 0}
  .artigo-figura--hero{margin:0 0 var(--espaco-4)}
  .artigo-figura img{
    aspect-ratio:1200/630;
    border-radius:8px;
  }

  .artigo-video{
    aspect-ratio:1200/630;
    border-radius:8px;
  }

  .artigo-lista,
  .artigo-conteudo>ul,
  .artigo-conteudo>ol,
  .artigo-conteudo section>ul,
  .artigo-conteudo section>ol{
    margin:2.2rem 0;
    gap:.9rem;
  }

  .artigo-lista li,
  .artigo-conteudo>ul>li,
  .artigo-conteudo>ol>li,
  .artigo-conteudo section>ul>li,
  .artigo-conteudo section>ol>li{
    padding-left:2rem;
  }

  .artigo-lista--numerada>li,
  .artigo-conteudo>ol>li,
  .artigo-conteudo section>ol>li{
    padding-left:2.75rem;
  }

  .artigo-lista+p,
  .artigo-conteudo>ul+p,
  .artigo-conteudo>ol+p,
  .artigo-conteudo section>ul+p,
  .artigo-conteudo section>ol+p{
    margin-top:2.2rem;
  }

  .artigo-compartilhar{
    align-items:stretch;
    flex-direction:column;
  }

  .artigo-compartilhar__botao{
    width:100%;
    padding:clamp(1.1rem,1rem + .35vw,1.2rem) clamp(1.4rem,1.1rem + 1vw,1.5rem);
  }

  .artigo-resumo{padding:clamp(2rem,5vw,2.2rem)}
  .artigo-faq__botao{
    min-height:6rem;
    padding:clamp(1.25rem,1rem + .8vw,1.4rem) clamp(1.3rem,1rem + 1vw,1.5rem);
    border-radius:14px;
  }

  .artigo-faq__conteudo{padding:clamp(1.25rem,1rem + .8vw,1.4rem) .8rem .5rem}
  .artigo-cta-secao{
    padding:clamp(2rem,5vw,2.2rem);
    border-radius:16px;
  }

  .artigo-cta{
    width:100%;
    padding:clamp(1.1rem,1rem + .35vw,1.2rem) clamp(1.4rem,1.1rem + 1vw,1.5rem);
  }

  .artigo-bio{padding:clamp(2rem,5vw,2.2rem)}
  .artigo-bio__layout{grid-template-columns:1fr}
  .artigo-bio__imagem{
    width:18rem;
    margin:0 auto;
  }

  .artigo-relacionados__lista{grid-template-columns:1fr}}