:root{
  --azul:#0b3d69;
  --azul-claro:#1668a8;
  --verde:#1d7a4c;
  --texto:#1f2427;
  --texto-suave:#5a656d;
  --linha:#e1e6ea;
  --fundo:#ffffff;
  --fundo-suave:#f4f7f9;
  --largura:760px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

.container{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 20px;
}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* barra de leitura */
.barra-progresso{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  background:var(--verde);
  z-index:30;
}

/* trilha */
.trilha{
  font-size:13px;
  color:var(--texto-suave);
  padding:28px 0 6px;
}
.trilha a{color:var(--azul-claro);text-decoration:none;}
.trilha a:hover{text-decoration:underline;}
.trilha span{margin:0 4px;}

/* noticia */
.noticia{padding-bottom:40px;}

.chapeu{
  margin:0 0 10px;
  color:var(--verde);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

h1{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.2;
  color:var(--azul);
  font-weight:700;
}

.linha-fina{
  margin:0 0 20px;
  font-size:19px;
  line-height:1.5;
  color:var(--texto-suave);
}

.meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  font-size:13px;
  color:var(--texto-suave);
}

.figura{margin:26px 0;}
.figura img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  background:var(--fundo-suave);
}
.figura figcaption{
  margin-top:8px;
  font-size:13px;
  color:var(--texto-suave);
  border-left:3px solid var(--verde);
  padding-left:10px;
}

.corpo p{margin:0 0 20px;text-align:justify;}
.corpo p:first-child::first-letter{
  font-size:56px;
  line-height:.9;
  float:left;
  margin:4px 8px 0 0;
  color:var(--azul);
  font-weight:700;
}

blockquote{
  margin:26px 0;
  padding:16px 20px;
  background:var(--fundo-suave);
  border-left:4px solid var(--azul-claro);
  font-size:19px;
  line-height:1.5;
  color:var(--azul);
  font-style:italic;
}
blockquote cite{
  display:block;
  margin-top:10px;
  font-size:14px;
  font-style:normal;
  color:var(--texto-suave);
}

.tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:20px 0 0;
  margin:20px 0 0;
  border-top:1px solid var(--linha);
}
.tags li{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  background:var(--fundo-suave);
  border-radius:4px;
  padding:5px 10px;
  color:var(--texto-suave);
}

/* aviso de copia */
.aviso{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,20px);
  background:var(--texto);
  color:#fff;
  font-size:14px;
  padding:10px 18px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:40;
}
.aviso.visivel{opacity:1;transform:translate(-50%,0);}

/* mobile */
@media (max-width:760px){
  body{font-size:16px;}
  h1{font-size:26px;}
  .linha-fina{font-size:17px;}
  .corpo p{text-align:left;}
  .corpo p:first-child::first-letter{font-size:44px;}
  blockquote{font-size:17px;padding:14px 16px;}
  .meta{flex-direction:column;align-items:flex-start;}
  .figura{margin:20px -20px;}
  .figura img{border-radius:0;}
  .figura figcaption{padding-left:20px;border-left:none;border-top:2px solid var(--verde);padding-top:8px;margin:8px 20px 0;}
}

@media (max-width:380px){
  h1{font-size:23px;}
  }

/* foto principal em retrato e figura dentro do corpo */
.figura img{
  max-height:620px;
  object-fit:cover;
  object-position:center 20%;
}
.figura-interna{margin:26px 0;}
.figura-interna img{max-height:none;object-fit:contain;}

@media (max-width:760px){
  .figura img{max-height:440px;}
  .figura-interna{margin:20px -20px;}
}