/* ==========================================================================
   ÁREA DE ARTIGOS — a página do texto

   A regra de ouro da leitura: a linha não pode ser larga demais. Aqui o
   corpo do texto tem 680px de largura, que dá umas 70 letras por linha —
   é onde o olho volta para a linha de baixo sem se perder.

   O título é Anton, como todo título do site. O texto é Ubuntu, em 18px,
   com bastante entrelinha. Subtítulo e destaque saem do próprio painel:
   basta começar a linha com ## ou com >.
   ========================================================================== */

.artigo{
  display:block; width:100%;
  max-width:1180px; margin:0 auto; padding:0 20px 80px;
  box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  color:#111;
}

/* ---------- assinatura: autor, data, tempo ----------
   Estas regras se repetem na folha da listagem de propósito: cada pasta é
   independente, então você pode mexer numa página sem mexer na outra. */
.assinatura{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin:0; padding:0;
  font-size:12.5px; line-height:1.5; color:#76766d;
}
.assinatura span + span{ margin-left:9px; padding-left:9px; border-left:1px solid #d8d8d2; }
.assinatura__autor{ font-weight:700; color:#3a3a34; }

/* ---------- caminho de volta ---------- */
.migalhas{
  padding:26px 0 0; font-size:12.5px; line-height:1.4; color:#8a8a80;
  max-width:800px; margin:0 auto;
}
.migalhas a{ color:#5a5a52; text-decoration:none; font-weight:700; }
.migalhas a:hover{ color:#000; text-decoration:underline; }
.migalhas span{ margin:0 7px; color:#c4c4bc; }

/* ---------- cabeçalho do texto ---------- */
.artigoCab{
  max-width:800px; margin:0 auto; padding:24px 0 28px;
  border-bottom:1px solid #eeeee8;
}
/* mesmo chapéu leve da listagem: a palavra e um ponto amarelo */
.artigoCab .chapeu{
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:1.6px; text-transform:uppercase;
  color:#111; background:transparent; padding:0; margin:0 0 15px;
}
.artigoCab .chapeu::before{
  content:''; display:inline-block; width:7px; height:7px; margin-right:8px;
  background:#feec34; border-radius:50%; -ms-flex-negative:0; flex-shrink:0;
}
.artigoTitulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:44px; line-height:1.05; letter-spacing:.3px;
  text-transform:uppercase; color:#000;
  margin:0 0 16px;
}
.artigoLinhaFina{
  margin:0 0 20px; font-size:18px; line-height:1.55; color:#44443e;
  font-weight:300;
}
.assinatura--artigo{ margin:0; }

/* ---------- capa ---------- */
.artigoCapa{
  max-width:1000px; margin:30px auto 34px; padding:0;
}
.artigoCapa img{
  display:block; width:100%; height:auto; margin:0;
  background:#f2f2ee; border-radius:12px;
}
.artigoCapa figcaption{
  margin:9px 0 0; font-size:12.5px; line-height:1.5; color:#8a8a80;
}

/* ---------- corpo ---------- */
.artigoTexto{
  max-width:680px; margin:0 auto; padding:0;
}
.artigoTexto p{
  margin:0 0 22px; font-size:18px; line-height:1.78; color:#25251f;
}
.artigoTexto p:last-child{ margin-bottom:0; }
.artigoTexto a{ color:#000; text-decoration:underline; text-underline-offset:3px; }
.artigoTexto a:hover{ background:#feec34; }

.artigoSub{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:26px; line-height:1.14; letter-spacing:.3px;
  text-transform:uppercase; color:#000;
  margin:38px 0 16px;
}

.artigoDestaque{
  margin:34px 0; padding:4px 0 4px 22px;
  border-left:5px solid #feec34;
}
.artigoDestaque p{
  margin:0; font-size:22px; line-height:1.45; font-weight:700; color:#000;
}

/* ---------- fecho com convite ---------- */
.artigoFecho{
  max-width:680px; margin:50px auto 0; padding:34px 26px;
  background:#000; text-align:center; border-radius:14px;
}
.artigoFecho__frase{
  margin:0 0 18px; font-size:19px; font-weight:700; line-height:1.3; color:#fff;
}
.artigoFecho__botao{
  display:inline-block; text-decoration:none;
  background:#feec34; color:#000; border:3px solid #feec34;
  font-size:14px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:15px 30px; border-radius:40px; min-height:48px; box-sizing:border-box;
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.artigoFecho__botao:hover{ background:transparent; color:#feec34; }

/* ---------- leia também ---------- */
.leiaTambem{ max-width:1000px; margin:58px auto 0; }
.leiaTambem .listaBlog__cab{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:20px; line-height:1; letter-spacing:.7px; text-transform:uppercase;
  color:#000; margin:0 0 26px; padding:0 0 14px; border-bottom:1px solid #e6e6e0;
}
.leiaTambem .listaBlog__cab span{ position:relative; padding-bottom:14px; }
.leiaTambem .listaBlog__cab span::after{
  content:''; position:absolute; left:0; bottom:-15px; width:100%; height:3px;
  background:#feec34;
}
.leiaTambem__grade{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  margin:0 -10px;
}
.cartaoBlog{
  -webkit-box-flex:1; -ms-flex:1 1 33.333%; flex:1 1 33.333%;
  max-width:33.333%; min-width:0; padding:0 10px 22px; box-sizing:border-box;
}
.cartaoBlog__link{ display:block; text-decoration:none; color:inherit; }
.cartaoBlog__foto{
  position:relative; width:100%; overflow:hidden;
  background:#f2f2ee; margin-bottom:13px; border-radius:10px;
}
.cartaoBlog__foto::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .cartaoBlog__foto::before{ display:none; }
  .cartaoBlog__foto{ aspect-ratio:16 / 9; }
}
.cartaoBlog__foto img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover; display:block;
  -webkit-transition:.4s ease-in; transition:.4s ease-in;
}
.cartaoBlog__link:hover .cartaoBlog__foto img{
  -webkit-transform:scale(1.04); transform:scale(1.04);
}
.cartaoBlog .chapeu{
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:1.3px; text-transform:uppercase;
  color:#111; background:transparent; padding:0; margin:0 0 9px;
}
.cartaoBlog .chapeu::before{
  content:''; display:inline-block; width:6px; height:6px; margin-right:7px;
  background:#feec34; border-radius:50%; -ms-flex-negative:0; flex-shrink:0;
}
.cartaoBlog__titulo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:16px; font-weight:700; line-height:1.28; color:#000; margin:0 0 8px;
}
.cartaoBlog__link:hover .cartaoBlog__titulo{ color:#3a3a34; }

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */
@media (max-width:900px){
  .cartaoBlog{ -ms-flex:1 1 50%; flex:1 1 50%; max-width:50%; }
  .artigoTitulo{ font-size:36px; }
}
@media (max-width:640px){
  .artigo{ padding:0 16px 60px; }
  .migalhas{ padding-top:20px; font-size:12px; }
  .artigoCab{ padding:18px 0 22px; }
  .artigoTitulo{ font-size:28px; line-height:1.1; }
  .artigoLinhaFina{ font-size:16px; }
  .artigoCapa{ margin:24px auto 28px; }
  .artigoTexto p{ font-size:16.5px; line-height:1.72; margin-bottom:20px; }
  .artigoSub{ font-size:21px; margin:30px 0 14px; }
  .artigoDestaque{ margin:28px 0; padding-left:16px; border-left-width:4px; }
  .artigoDestaque p{ font-size:18px; }
  .artigoFecho{ padding:26px 18px; margin-top:38px; }
  .artigoFecho__frase{ font-size:17px; }
  .artigoFecho__botao{ width:100%; }
  .leiaTambem{ margin-top:44px; }
  .cartaoBlog{ -ms-flex:1 1 100%; flex:1 1 100%; max-width:100%; }
}