/* ============================================================
   layoutV2 — CSS do site (home e demais páginas)
   Portal Viva · novo layout
   Escopo: estilos prefixados com .v2-* e no body.layout-v2
   ============================================================ */

:root {
  --space-chapeu-home: 8px;
	--space-xs-v2: 15px;
	--space-sm-v2: 25px;
	--space-md-v2: 40px;
	--space-lg-v2: 50px;
	--space-xl-v2: 60px;

	/* ---- Cores ---- */
	--verde-vivo: #005f6b;
	--amarelo-vivo: #E6FF2A;
	--branco: #ffffff;
	--preto: #000000;

	/* ---- Tipografia ---- */
	--roboto: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--roboto-serif: "Roboto Serif", Georgia, "Times New Roman", serif;
}

body {
  font-family: var(--roboto);
}

a {
  color: var(--preto);
  text-decoration: none;
}

/* Atualização: Gutter padrão AMDB: 10px de cada lado (gutter-x = 20px).
   O BS5 deriva padding das colunas/container e margens da .row desta variável.
   Cobre tudo automaticamente — inclusive .col-xl-* e .col-xxl-*, que a lista antiga (herança do BS3, com .col-xs-*) nem inclui. Qualquer coluna nova pega o gutter sem você editar a lista.
*/
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row {
  --bs-gutter-x: 20px;
}

/*@media (min-width: 992px) and (max-width: 1399.98px) {
  .container { max-width: 100%; }
}*/

/* ---------- Classes padrão ---------- */
.chapeu {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 19px;
  letter-spacing: 0.02em;
  color: var(--verde-vivo);
}

.chapeu-mb-chamadas {
  margin-bottom: 8px;
}

.chapeu_editoria {
  color: var(--verde-vivo);
  font-size: 1.188rem;
  line-height: 23px;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
}

.titulo_editoria {
  font-size: 2.5rem;
  line-height: 47px;
  font-weight: 900;
  margin-bottom: 0;
}

.texto_editoria {
  font-family: var(--roboto-serif);
  font-weight: 300;
  font-style: italic;
}

.titulo-artigo-lg {
  font-size: 2.25rem;
  line-height: 42px;
  letter-spacing: 0.02em;
  font-weight: 900;
  margin-bottom: var(--space-sm-v2);
}

.artigo-subtitulo-lg {
  font-size: 1.188rem;
  line-height: 29px;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-sm-v2);
}

.artigo-subtitulo-md {
  font-size: 1.063rem;
  line-height: 29px;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-sm-v2);
}

.artigo_buletado li {
  position: relative;
  padding-left: 1.2em;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--verde-vivo);
  }
}

.artigo_buletado_texto h2 {
  font-size: 1rem;
  line-height: 22px;
  letter-spacing: 0.015em;
  font-weight: 700;
  margin-bottom: var(--space-sm-v2);
}

.titulo-artigo-md {
  font-size: 1.375rem;
  line-height: 30px;
  letter-spacing: 0.01em;
  font-weight: 900;
}

@media (max-width: 767px) {
  .titulo_editoria {
    font-size: 1.875rem;
    line-height: 37px;
  }
}

/* ---------- linha divisória padrão ---------- */
.linha-divisoria-padrao {
  height: 5px;
  width: 100%;
  background-color: #e5e5e5;
  border: 0;
  margin-bottom: var(--space-sm-v2);
  margin-top: 0;
  opacity: 1;
}

.texto-verde-vivo {
  color: var(--verde-vivo);
}

.fundo-verde-vivo {
  background-color: var(--verde-vivo);
}

.texto-amarelo-vivo {
  color: var(--amarelo-vivo);
}

.fundo-amarelo-vivo {
  background-color: var(--amarelo-vivo);
}

.linha-chapeu-editoria {
  display: inline-block;
  background-color: var(--verde-vivo);
  height: 3px;
  width: 37px;
  vertical-align: middle;
  margin-right: .75rem;
  margin-bottom: .2rem;
}

.icone-veja-mais {
  fill: #005F6B;
}

/*HELP CLASS*/
.img-borda-artigo {
  border-radius: 6px;
}

.mb-space-chapeu-home {
  margin-bottom: var(--space-chapeu-home);
}

.mb-space-xs {
  margin-bottom: var(--space-xs-v2);
}

.mb-space-sm {
  margin-bottom: var(--space-sm-v2);
}

.mb-space-md {
  margin-bottom: var(--space-md-v2);
}

.mb-space-lg {
  margin-bottom: var(--space-lg-v2);
}

.mb-space-xl {
  margin-bottom: var(--space-xl-v2);
}

.swiper-pagination-bullet-active {
  background: #666666;
}

/* ---------- Tarja de destaques (topo do site) — ticker "breaking news" ---------- */
.tarja_destaques_home {
  height: 35px;
  width: 100%;
  background-color: #898A8E;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 16px;
}

/* rótulo fixo à esquerda (não desliza) */
.tarja_destaques_home__confira {
  flex: none;
  height: 100%;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: 24px;
  background-color: #5D5D5D;
  color: var(--amarelo-vivo);
  font-weight: 700;
  letter-spacing: 0.07em;
  z-index: 1;
}

@media (max-width: 480px) {
  .tarja_destaques_home__confira {
    padding-inline: 10px;
    font-size: 14px;
  }
}

/* janela que recorta o conteúdo que desliza */
.tarja_destaques_home__viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* trilho deslizado via JS (transform); linha única */
.tarja_destaques_home__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  align-items: center;
  will-change: transform;
}

.tarja_destaques_home__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 24px;
  color: var(--branco);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* bolinha amarela antes do CONFIRA e de cada item */
.tarja_destaques_home__confira::before,
.tarja_destaques_home__item::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--amarelo-vivo);
  margin-right: 8px;
}

/* ---------- Header ---------- */
.v2-header { 
  padding-block: 21px;
  background-color: var(--branco);
}

/* ---------- Espaçamento custom de acordo com pdf design ---------- */
.v2-header .container-fluid {
  padding-inline: 16px;
}

.v2-header__logo img {
  max-height: 32px;
}

.v2-burger {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
  outline: 0;
	anchor-name: --burger;
}

@media (max-width: 991.98px) {
  .v2-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* backdrop do popover (seletor padrão → funciona em Chrome, Firefox e Safari/iOS) */
.v2-menu::backdrop {
  position: fixed;
  background-color: #000;
  opacity: .6;
}

@media (min-width: 992px) {
  .v2-header__logo {
    img {
      max-height: 62px;
    }
  }
  .v2-header .container-fluid {
    padding-inline: 28px;
  }
}

/* ---------- Busca do header (<details>, sem JS) ---------- */
/* O ícone (summary) abre/fecha o form. O painel é posicionado em relação ao
   ícone via position:absolute — funciona igual em todos os navegadores
   (Chrome, Firefox, Safari/iOS), sem depender de CSS anchor positioning. */
.v2-search {
  position: relative;
  display: inline-block;
}

/* summary = o ícone-gatilho; remove o triângulo padrão do <details> */
.v2-search summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
}
.v2-search summary::-webkit-details-marker {
  display: none;
}

/* Troca de ícone lupa <-> X conforme o form abre/fecha (via [open] do <details>) */
.v2-search:not([open]) .v2-search__icone-fechar {
  display: none;
}
.v2-search[open] .v2-search__icone-abrir {
  display: none;
}

/* Painel do form: por padrão (mobile/<1200px) abre ABAIXO do ícone,
   alinhado à direita dele. */
.v2-search__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  height: 52px;
  padding: 12px;
  background: var(--branco);
  border: 0.75px solid #cccccc;
  border-radius: 6px;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, .12);   /* leve, p/ baixo e direita */
}

/* Desktop (>=1200px): abre à ESQUERDA do ícone, alinhado verticalmente a ele. */
@media (min-width: 1200px) {
  .v2-search__panel {
    top: 50%;
    right: calc(100% + 12px);
    left: auto;
    transform: translateY(-50%);
  }
}

.v2-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 0 6px;   /* recuo lateral 0 (linha alinha com o texto); 6px embaixo p/ afastar o texto da linha */
  border: 0;
  border-bottom: 0.75px solid #999999;   /* só a linha abaixo do texto */
  border-radius: 0;
  background: none;
  font-family: var(--roboto);
  font-size: 18px;                        /* termo digitado */
  letter-spacing: 0.01em;
  color: #000000;
}

.v2-search__input::placeholder {
  font-size: 17px;
  letter-spacing: normal;
  color: #b2b2b2;
}

.v2-search__input:focus {
  outline: 0;
  border-bottom-color: var(--verde-vivo);
}

/* botão-lupa interno (mesmo ícone, menor) — dispara a busca */
.v2-search__submit {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.v2-search__submit img {
  width: 24px;
  height: 24px;
}

/* <768px a .v2-subnav some (d-none d-md-block); o header assume o mesmo
   margin-bottom que a subnav dava, p/ não colar no bloco de chamadas. */
/*@media (width < 767.98px) {
  .v2-header {
    margin-bottom: var(--space-xs-v2);
  }
}*/

/* ---------- Faixa de editorias (subnav) ---------- */
.v2-subnav { 
  background: #ededed;
  margin-bottom: var(--space-sm-v2);
}

.v2-subnav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px clamp(24px, 4vw, 56px);
	list-style: none;
	margin: 0;
	padding: 1px 0;
}

.v2-subnav__list a {
	font-family: var(--roboto);
	font-size: 1rem;
	font-weight: 500;
	color: var(--preto);
	border-bottom: 2px solid var(--branco);
	transition: color .15s ease;
}

.v2-subnav__list a:hover {
  color: var(--verde-vivo);
  border-color: var(--verde-vivo);
}

/* 1200–1399.98px (faixa xl do Bootstrap, .container fixo em 1140px): aproxima o
   espaçamento dos itens do menu à largura do artigo (col-lg-8 ≈ 760px), sem
   afetar <1200 (a base com clamp continua intacta e responsiva). Só o
   column-gap muda; o row-gap (8px) do shorthand permanece. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .v2-subnav__list {
    column-gap: 66px;
  }
}

.v2-menu {
	position: fixed;
	margin: 0;
	width: 300px;
	max-width: calc(100vw - 2rem);
	height: max-content;
	overflow-y: auto;
	border: 0;
  padding: 26px 12px;
	background: #ebebec;
	color: var(--preto);

	/* Posição: ancora de fato no hambúrguer (Chromium).
	   Navegadores sem anchor positioning (Safari/iOS, Firefox) usam o
	   fallback fixo no @supports abaixo. */
	position-anchor: --burger;
	top: calc(anchor(--burger bottom) + 26px);
	left: anchor(--burger left);
	/* Animação de abrir/fechar sem JS. */
	opacity: 0;
  /* translate: 0 -8px;
	transition: opacity .18s ease, translate .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete;*/
}

/* Fallback p/ navegadores SEM CSS anchor positioning (Safari/iOS, Firefox).
   Posição fixa por breakpoint p/ cair no mesmo lugar do anchor() acima.
   >>> CALIBRAR AQUI (top/left) olhando na tela. <<< */
@supports not (anchor-name: --burger) {
  .v2-menu {
    top: 120px;
    left: 1rem;
  }
  @media (min-width: 992px) {
    .v2-menu {
      top: 146px;
      left: 28px;
    }
  }
}
.v2-menu:popover-open {
  opacity: 1;
  translate: 0 0;
}

@starting-style { 
  .v2-menu:popover-open { 
    opacity: 0;
    translate: 0 -8px;
  }
}

.v2-menu__close { 
  position: absolute;
  right: 4%;
  top: 4%;
  border: 0;
}

.v2-menu__close:is(:focus, :focus-visible, :visited) {
  outline: 0;
  border: 0;
}

.v2-menu__nav ul { 
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.v2-menu__nav a {
  display: inline-block;
	font-weight: 500;
	font-size: 19px;
  margin-bottom: 16px;
}

.v2-menu__nav a:hover { 
  color: var(--verde-vivo);
}

.v2-menu :where(.linha-divisoria-padrao, p) {
  margin-bottom: 16px;
}

.v2-menu p {
  font-weight: 500;
  font-size: 19px;
}

.v2-menu p span {
  font-weight: 900;
}

.v2-menu .socialmedia_menu:not(:last-child) {
  margin-right: 12px;
}


/* ---------- Artigos Home ---------- */
.artigos-sm {
  display: flex;
  gap: 1rem;
}

.artigo-sm-img {
  width: 25%;
  min-width: 0;   /* flex-item: respeita os 25% mesmo com flex aninhado dentro */
}

/* A imagem fica num flex aninhado (número + imagem). Flex-items têm min-width:auto
   por padrão e não encolhem abaixo do tamanho natural — por isso a imagem invadia
   o texto. min-width:0 deixa a imagem reduzir p/ caber ao lado do número. */
.artigo-sm-img img {
  min-width: 0;
}

.artigo-sm-texto {
  width: 75%;
}

.artigo-titulo-sm {
  font-size: 1.25rem;
  line-height: 28px;
  letter-spacing: 0.01em;
  font-weight: 700;
  margin-bottom: 0;
}

.artigo-media-img {
  flex: 0 0 33%;
}

.artigo-media-img {
  img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

.artigo-media-texto {
  flex: 1 1 auto;
}

@media (max-width: 767px) {
  .artigo-sm-img {
    width: 40%;
  }

  .artigo-sm-img {
    img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }

  .artigo-sm-texto {
    width: 60%;
  }
  .artigo-media-img {
    img {
      aspect-ratio: 1 / 1;
    }
  }
}

/* ---------- Cinquentômetro (contador população 50+) ---------- */
.portalviva_contador__box {
  background-color: #E6FF2A;
  border-radius: 6px;
  padding: var(--space-xs-v2) var(--space-xs-v2) var(--space-md-v2);
}

.portalviva_contador__chapeu {
  margin-bottom: 4px;
}

.portalviva_contador__titulo {
  font-family: var(--roboto-serif);
  font-size: 2.5rem;
  line-height: 47px;
  font-weight: 300;
  font-style: italic;
  margin: 0 0 var(--space-md-v2);
}

@media (max-width: 767px) {
  .portalviva_contador__box {
    padding: var(--space-sm-v2);
  }
  .portalviva_contador__titulo {
    font-size: 1.875rem;
    line-height: 37px;
    margin: 0 0 var(--space-xs-v2);
  }
}

/* Fluido: as caixas dividem TODA a largura do bloco (flex: 1 1 0) — encolhem p/
   caber e crescem p/ preencher, sem sobrar espaço à direita. Fonte e proporção
   acompanham a largura do bloco via container query (cqw). */
.portalviva_contador__numeros {
  container-type: inline-size;
  display: flex;
  align-items: stretch;
  gap: 1.5%;
}

.portalviva_contador__digito {
  flex: 1 1 0;                /* preenche a largura disponível igualmente */
  min-width: 0;
  aspect-ratio: 58 / 90;      /* proporção da caixa do design, escalável */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--branco);
  border-radius: 6px;
  font-size: 11cqw;           /* número escala com a largura do bloco */
  font-weight: 700;
  color: #231f20;
  position: relative;
  z-index: 999;
}

.portalviva_contador__sep {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 1.6cqw;
  height: 1.6cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background-color: var(--verde-vivo);
}

.portalviva_contador__legenda {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.01em;
  margin: var(--space-xs-v2) 0 0;
}

.portalviva_contador__fonte {
  font-size: 1.0625rem;
  line-height: 25px;
  letter-spacing: 0.03em;
  margin: var(--space-xs-v2) 0 0;
}

/* ---------- Bloco home V2 Bombando ---------- */
.bloco_em_alta_videos {
  padding-block: 1.313rem;
}

@media (min-width: 768px) {
  .bloco_em_alta_videos {
    background-color: #E6EFF0;
  }
}

@media (max-width: 991.98px) {
  .bloco_em_alta_videos .col-lg-6:first-of-type {
    margin-bottom: var(--space-lg-v2);
  }
}

.bloco_em_alta_videos .artigos-sm {
  margin-bottom: 0.688rem;
}

.bloco_em_alta_videos iframa {
  width: 100%;
}

.bloco_em_alta_videos .artigo-sm-img .lista_numero {
  color: var(--verde-vivo);
  font-size: 2.438rem;
  line-height: 35px;
  font-weight: 700;
}

.bloco_em_alta_videos .linha-divisoria-padrao {
  height: 3px;
  margin-bottom: 0.688rem;
}

@media (max-width: 768px) {
  .bloco_em_alta_videos {
    .col-lg-6:first-child {
      background-color: #E6EFF0;
      padding-block: 1.313rem;
    }
    .artigo-sm-img {
      width: 10%;
    }
    .lista_numero {
      position: relative;
      top: 5px;
    }
    .artigo-sm-texto {
      width: 90%;
    }
  }
}

/*BLOCO HOME COLUNISTAS V2*/
.card_colunistas {
  /* largura controlada pelo Swiper (slidesPerView por breakpoint);
     sem min/max-width fixo p/ os cards preencherem N inteiros por tela */
  display: flex;
  flex-direction: column;
  height: auto;
}

.card_colunistas .bloco_foto {
  width: 130px;
  margin-inline: auto;
  display: block;
  align-content: end;
}

.card_colunistas .bloco_foto img {
  margin-inline: auto;
  display: block;
  width: 100%;
}

.bloco_preview_colunista {
  position: relative;
  padding: 1rem .5rem;
  background-color: #e1e2e3;
  border-radius: 6px;
  border: 1px solid #fff;
  height: 100%;
}

.bloco_preview_colunista :where(.nome_colunista, .chapeu_colunista) {
  margin-bottom: 0;
  color: #005f6b;
  min-height: 40px;
  max-height: 40px;
  display: block;
  align-content: center;
}

.bloco_preview_colunista .nome_colunista {
  font-weight: 900;
  font-size: .875rem;
  line-height: 17px;
  letter-spacing: 0.01em;
}

.bloco_preview_colunista .chapeu_colunista {
  font-size: .875rem;
  line-height: 20px;
  letter-spacing: 0.03em;
}

.bloco_preview_colunista .ultimo_artigo_colunista {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 22px;
  color: #231f20;
  text-align: center;
}

.bloco_preview_colunista hr {
  height: 2px;
  border: 0;
  opacity: 1;
  background-color: #fff;
  width: 100%;
  margin: 10px 0;
}

/* Setas de navegação (design): quadrado petróleo #005F6B @50% + chevron branco @81% */
.colunista_home .swiper-button-next,
.colunista_home .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: rgba(0, 95, 107, .5);
  --swiper-navigation-top-offset: 42%;   /* padrão é 50%; sobe ~15% */
}

.colunista_home .swiper-button-prev { left: 0; }
.colunista_home .swiper-button-next { right: 0; }

/* remove o ícone nativo do Swiper (fonte/svg) */
.colunista_home .swiper-button-next svg,
.colunista_home .swiper-button-prev svg { display: none; }

/* chevron branco (forma preenchida, path exato do Figma) via mask; o next é o prev espelhado */
.colunista_home .swiper-button-next::after,
.colunista_home .swiper-button-prev::after {
  content: "";
  width: 18.6px;
  height: 31.68px;
  background-color: rgba(255, 255, 255, .81);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.603 31.681'><path d='M15.84 31.681L18.603 28.916L5.527 15.84L18.603 2.764L15.84 0L0 15.84L15.84 31.681Z' fill='black'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.603 31.681'><path d='M15.84 31.681L18.603 28.916L5.527 15.84L18.603 2.764L15.84 0L0 15.84L15.84 31.681Z' fill='black'/></svg>") center / contain no-repeat;
}
.colunista_home .swiper-button-next::after {
  transform: scaleX(-1);
}

.colunista_home .swiper-button-disabled { 
  display: none;
}

.colunista_home .swiper-pagination {
  position: relative;
  z-index: 2;
}

.colunista_home .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

/*BLOCO HOME VIVA NAS REDES V2*/
.shorts {
  padding-block: var(--space-xs-v2) 0;
  background: linear-gradient(var(--amarelo-vivo) calc(100% - 64px), transparent calc(100% - 64px));
}

.shorts .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.shorts .swiper-button-next,
.shorts .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: rgba(0, 95, 107, .5);
  --swiper-navigation-top-offset: 41%;
}

.shorts .swiper-button-prev { 
  left: 0;
}

.shorts .swiper-button-next { 
  right: 0;
}

.shorts .swiper-button-next svg, .shorts .swiper-button-prev svg { 
  display: none;
}

.shorts .swiper-button-next::after, .shorts .swiper-button-prev::after {
  content: "";
  width: 18.6px;
  height: 31.68px;
  background-color: rgba(255, 255, 255, .81);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.603 31.681'><path d='M15.84 31.681L18.603 28.916L5.527 15.84L18.603 2.764L15.84 0L0 15.84L15.84 31.681Z' fill='black'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.603 31.681'><path d='M15.84 31.681L18.603 28.916L5.527 15.84L18.603 2.764L15.84 0L0 15.84L15.84 31.681Z' fill='black'/></svg>") center / contain no-repeat;
}
.shorts .swiper-button-next::after { 
  transform: scaleX(-1);
}

.shorts .swiper-button-disabled { 
  display: none;
}

.shorts .swiper-pagination {
  position: relative;
  margin-top: 64px;
  z-index: 2;
}

.shorts .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

/*BLOCO VIVA RECOMENDA & DINHEIRO */
.wrapper_azul_claro {
  background-color: #e5eff0;
  padding-block: var(--space-sm-v2);
}

/*BLOCO HOME SERVIÇOS V2*/
.servicos {
  padding-block: var(--space-xs-v2) 0;
  /* fundo azul full-bleed que para 40px antes do rodapé → a faixa transparente
     revela o branco da página, onde caem os bullets (mesmo método do shorts).
     O 40px anda junto com o margin-top da .swiper-pagination. */
  background: linear-gradient(#0b9dbc calc(100% - 64px), transparent calc(100% - 64px));
}

/* Cores do header e dos textos sobre o fundo azul (chapéus amarelo-vivo, títulos brancos) */
.servicos .chapeu_editoria,
.servicos .chapeu {
  color: var(--amarelo-vivo);
}

.servicos .titulo_editoria,
.servicos .artigo-titulo-sm {
  color: var(--branco);
}

/* limita o título do slide a 3 linhas neste bloco */
.servicos .artigo-titulo-sm {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Slide: imagem 5:4 (recorte da sqlg) + texto, ~1rem de espaço (gap-3) */
.servicos__img {
  flex: 0 0 34%;
}

.servicos__img img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.servicos__texto {
  flex: 1 1 auto;
  min-width: 0;   /* deixa o texto encolher junto ao slide */
}

.servicos .v2-swiper {
  padding-top: 12px;
}

.servicos .swiper-button-next,
.servicos .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: rgba(0, 95, 107, .5);
  --swiper-navigation-top-offset: 12%;
}

.servicos .swiper-button-prev {
  left: 0;
}

.servicos .swiper-button-next {
  right: 0;
}

.servicos .swiper-button-next svg, .servicos .swiper-button-prev svg {
  display: none;
}

.servicos .swiper-button-next::after, .servicos .swiper-button-prev::after {
  content: "";
  width: 18.6px;
  height: 31.68px;
  background-color: rgba(255, 255, 255, .81);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.603 31.681'><path d='M15.84 31.681L18.603 28.916L5.527 15.84L18.603 2.764L15.84 0L0 15.84L15.84 31.681Z' fill='black'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.603 31.681'><path d='M15.84 31.681L18.603 28.916L5.527 15.84L18.603 2.764L15.84 0L0 15.84L15.84 31.681Z' fill='black'/></svg>") center / contain no-repeat;
}
.servicos .swiper-button-next::after {
  transform: scaleX(-1);
}

.servicos .swiper-button-disabled {
  display: none;
}

.servicos .swiper-pagination {
  position: relative;
  margin-top: 64px;   /* distância dos bullets (igual ao shorts; par com o corte de 64px do gradiente) */
  z-index: 2;
}

.servicos .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

@media (min-width: 992px) {
  .linha-divisoria-bloco-carreira {
    max-width: 66.66%;
  }
}

.wrapper_esportes {
  background-color: var(--verde-vivo);
  padding-block: var(--space-sm-v2);
  .chapeu_editoria, .chapeu {
    color: #00cc4c;
    .linha-chapeu-editoria {
      background-color: #00cc4c;
    }
  }
  .titulo_editoria, .texto_editoria, .titulo-artigo-md, .artigo_buletado_texto h2 {
    color: var(--branco);
  }
  .artigo_buletado li {
    &::before {
      background: #00cc4c;
    }
  }
  .linha-divisoria-padrao {
    background-color: #99BFC4;
  }
}

.wrapper_viagem {
  background-color: #f2e9d8;
  padding-block: var(--space-sm-v2);
  .linha-divisoria-padrao {
    background-color: #fff;
  }
}

.wrapper_tecnologia {
  background-color: #4c4cd3;
  padding-block: var(--space-sm-v2);
  .chapeu_editoria, .chapeu {
    color: #15d5ff;
    .linha-chapeu-editoria {
      background-color: #15d5ff;
    }
  }
  .titulo_editoria, .texto_editoria, .titulo-artigo-md, .artigo_buletado_texto h2, .artigo-subtitulo-md {
    color: var(--branco);
  }
  .artigo_buletado li {
    &::before {
      background: #15d5ff;
    }
  }
  .linha-divisoria-padrao {
    background-color: #BFBFEF;
  }
}

/*FOOTER*/
.v2-footer {
  background-color: #898a8e;
  padding-block: var(--space-sm-v2);
}

/* Layout base (>=1200px): 3 colunas — logo | listas | canais */
.v2-footer__grid {
  display: grid;
  /* meio = auto (tamanho do conteúdo): nunca encolhe → não deixa o texto vazar
     na coluna vizinha. space-between distribui as 3 colunas de forma parelha. */
  grid-template-columns: auto auto minmax(0, 360px);
  justify-content: space-between;
  column-gap: var(--space-md-v2);
  row-gap: var(--space-lg-v2);
  align-items: start;
}

.v2-footer__logo {
  max-width: 245px;
}

/* Coluna do meio: Editorias + Institucional lado a lado */
.v2-footer__listas {
  display: flex;
  gap: var(--space-md-v2);
}

/* Redes sociais em linha */
.v2-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-xs-v2);
}

.logo_footer {
  margin-bottom: 1.125rem;
}

.texto-logo-footer {
  font-size: 1rem;
  line-height: 21px;
  letter-spacing: 0.03em;
  color: var(--branco);
}

.texto-logo-footer span {
  font-weight: 900;
}

.titulo_coluna_footer {
  display: block;
  font-size: 1rem;
  line-height: 19px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--amarelo-vivo);
  margin-bottom: var(--space-xs-v2);
}

.menu_footer {
  margin-bottom: 0;
  li {
    position: relative;
    padding-left: 1rem;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1.1rem;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--amarelo-vivo);
    }
  }
}

/* Editorias em 2 colunas de 5 (um único <ul> com 10 itens) */
.menu_footer--2col {
  columns: 2;
  column-gap: var(--space-md-v2);
}

.menu_footer--2col li {
  break-inside: avoid;
}

.menu_footer a {
  font-size: 1.063rem;
  line-height: 43px;
  letter-spacing: 0.03em;
  color: var(--branco);
  text-decoration: none;
}

@media (min-width: 1400px) {
  .v2-footer__grid {
    grid-template-columns: auto auto minmax(0, 450px);
    justify-content: space-between;
    column-gap: var(--space-sm-v2);
    row-gap: var(--space-sm-v2);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .v2-footer__listas {
    justify-content: center;
  }
}

/* <1200px: a coluna de canais desce e fica centralizada */
@media (max-width: 1199.98px) {
  .v2-footer__grid {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
  }
  .v2-footer__canais {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 480px;
  }
  .v2-footer__social {
    justify-content: flex-start;
  }
}

/* <992px: as 3 colunas empilhadas verticalmente */
@media (max-width: 991.98px) {
  .v2-footer__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg-v2);
  }
  .v2-footer__canais {
    grid-column: auto;
    justify-self: start;
    max-width: none;
    text-align: left;
  }
}

/* <768px: Editorias vira 1 coluna e as duas listas empilham */
@media (max-width: 767.98px) {
  .v2-footer__listas {
    flex-direction: column;
    gap: var(--space-sm-v2);
  }
  .v2-footer__grid {
    row-gap: var(--space-sm-v2);
  }
}

/* ---------- Cinquentômetro: animação de flip dos dígitos ---------- */
/* O JS (cinquentometro.js) dispara o giro (Web Animations API) só nos dígitos que
   mudam, com a perspectiva 3D DENTRO do transform de cada dígito (perspective(...))
   — assim cada quadro gira em torno do PRÓPRIO centro, sem "escorregar" pro lado. */
.portalviva_contador__digito {
  transform-origin: center;      /* flip vertical em torno do centro */
  backface-visibility: hidden;
}

/* ════════════════════════════════════════════════════════════════════════
   INTERNA V2 (página de artigo) — INÍCIO DO CSS DAS INTERNAS
   A partir daqui só regras das páginas internas de artigo (v2_interna.html).
   O design das internas NÃO segue o padrão da home → estilos próprios aqui.
   ════════════════════════════════════════════════════════════════════════ */

.v2-interna {
  margin-top: 40px;   /* abaixo do menu até o breadcrumb */
}

/* ---- Breadcrumb (HOME › categoria) — Roboto medium 19/22, #005F6B ---- */
.interna_breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;                 /* mesmo espaço palavra↔seta (medido no Figma) */
  margin-bottom: 40px;
  font-family: var(--roboto);
  font-weight: 500;
  font-size: 19px;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.interna_breadcrumb a {
  color: var(--verde-vivo);
  text-decoration: none;
}

/* seta ">" (SVG), levemente maior que o texto */
.interna_breadcrumb__sep {
  flex: 0 0 auto;
  height: 16px;
  width: auto;
}

/* breadcrumb repetido ao final do artigo — mais respiro que o do topo */
.interna_breadcrumb--fim {
  margin-bottom: 48px;
}

/* ---- Título — Roboto black 45/53, #000 ---- */
.interna_titulo {
  margin-bottom: 40px;
  text-align: center;
  font-family: var(--roboto);
  font-weight: 900;
  font-size: 45px;
  line-height: 60px;
  letter-spacing: 0.02em;
  color: #000000;
}

/* ---- Subtítulo — Roboto regular 21/25, #000 ---- */
.interna_subtitulo {
  margin-bottom: 40px;
  text-align: center;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 21px;
  line-height: 34px;
  letter-spacing: 0.01em;
  color: #000000;
}

/* ---- Linha autor (esquerda) + redes (direita) ---- */
.interna_topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--space-sm-v2);
}

/* Colunista: sem o autor pequeno aqui, o .interna_social (único filho) centraliza */
.interna_topo--colunista {
  justify-content: center;
}

/* ---- Autor ---- */
.interna_autor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.interna_autor__fotos {
  display: flex;
  flex: 0 0 auto;
}

.interna_autor__fotos img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #E6FF2A;   /* fundo p/ fotos de autor em PNG (transparência) */
  border: 2px solid #FFFFFF;
}

.interna_autor__fotos a:not(:first-child) img {
  margin-left: -15px;   /* avatares sobrepostos quando há vários autores */
}

/* nome — Roboto regular 19/22, #000 (o nome do autor em bold) */
.interna_autor__nome {
  margin: 0;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 19px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: #000000;
}

.interna_autor__nome a {
  font-weight: 700;
  color: #000000;
  text-decoration: none;
}

/* data — Roboto light 16/19, #005F6B */
.interna_autor__data {
  display: block;
  margin-top: 2px;
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--verde-vivo);
}

/* ---- Redes sociais — ícone 25×25 sobre botão cinza #EDEDED 74×30, radius 6px ---- */
.interna_social {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
  align-self: flex-end;   /* cola no bottom da linha (alinhado ao rodapé do autor) */
}

/* versão centralizada — compartilhamento ao final do artigo */
.interna_social--centro {
  justify-content: center;
  margin-bottom: 48px;   /* respiro padrão entre os blocos de fim de artigo */
}

/* ---- Tags ("Tudo sobre") — fios 2px #E7E7E7; pílulas #F4F3F3 ----
   Mesma largura do artigo (col-lg-8). Linha de tags centralizada entre os fios:
   ~12px do fio superior às tags e ~12px das tags ao fio inferior (medido no Figma
   node 233-2). Vão entre pílulas ~28px. */
.interna_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 48px;              /* mesmo respiro do bloco de redes sociais */
  padding-block: 12px;
  border-top: 2px solid #E7E7E7;
  border-bottom: 2px solid #E7E7E7;
}

/* "Tudo sobre" — Roboto regular 16/19, #5D5D5D */
.interna_tags__titulo {
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #5D5D5D;
}

/* pílula — fundo #F4F3F3, radius 6, altura 25; texto Roboto regular 15/17 #5D5D5D */
.interna_tags__item {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 8px;                   /* espaço interno horizontal (~8px, Figma) */
  border-radius: 6px;
  background-color: #F4F3F3;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 15px;
  line-height: 17px;
  color: #5D5D5D;
  text-decoration: none;
  white-space: nowrap;
}

.interna_social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 30px;
  border-radius: 6px;
  background-color: #EDEDED;
}

.interna_social__link img {
  width: 25px;
  height: 25px;
}

.compartilhar-secundario {
  position: relative;
  display: inline-flex;
}

.compartilhar-secundario .icone-compartilhar-artigo-2 {
  border: 0;
  padding: 0;
  cursor: pointer;
}

.especial_social .icone-compartilhar-artigo-2 {
  background: none;
}

.compartilhar-secundario .balao-compartilhar-artigo {
  position: absolute;
  z-index: 3;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 133px;
  min-height: 60px;
  background: #fff;
  border: 5px solid #dcdcdd;
  border-radius: 10px;
  display: none;
}

.compartilhar-secundario .balao-compartilhar-artigo.balao-compartilhar-artigo-aberto {
  display: block;
}

.compartilhar-secundario .balao-compartilhar-artigo::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #dcdcdd;
}

.compartilhar-secundario .balao-compartilhar-artigo::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #fff;
}

.compartilhar-secundario .balao-compartilhar-artigo img {
  width: 25px;
  height: 25px;
}

.compartilhar-secundario .balao-compartilhar-artigo .icone-inside {
  margin-block: 10px;
  margin-right: 10px;
}

.compartilhar-secundario .balao-compartilhar-artigo .icone-inside-1 {
  margin-left: 10px;
}

.compartilhar-secundario .balao-compartilhar-artigo .icone-inside-2 {
  margin-right: 10px;
  margin-block: 10px;
}

.compartilhar-secundario .balao-compartilhar-artigo .botao-copiar-artigo {
  position: relative;
  display: inline-block;
}

.compartilhar-secundario .balao-compartilhar-artigo .balao-copiado-artigo {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 165px;
  height: 60px;
  border-radius: 6px;
  background: #898a8e;
  color: #fff;
  font-size: 17px;
  line-height: 21px;
  text-align: center;
  display: none;
  z-index: 2;
  white-space: nowrap;
  align-content: center;
}

.compartilhar-secundario .balao-compartilhar-artigo .balao-copiado-artigo.balao-copiado-artigo-aberto {
  display: block;
}

/* ---- Hero — crédito (acima) / imagem widelg radius 6 / legenda (abaixo) ---- */
.interna_hero {
  margin: 0;
}

.interna_hero__credito {
  margin: 0 0 4px;
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: #5D5D5D;
}

.interna_hero img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 12px;
}

.interna_hero__legenda {
  margin: 0 0 30px;
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #5D5D5D;
}

/* ---- Responsivo ---- */
@media (max-width: 767.98px) {
  .interna_titulo {
    font-size: 32px;
    line-height: 38px;
  }
  .interna_topo {
    flex-wrap: wrap;
  }
  .artigo_texto {
    font-size: 1.0625rem;
  }
}

/* ---- Toolbar de recursos do artigo (ouvir / resumo / fonte / tema) ---- */
/* Cabe numa linha só dentro do col-lg-8. Os blocos usam flex-basis:0 + flex-grow,
   então preenchem o espaço com os "vazios" internos quando há folga (telas largas)
   e comprimem esses vazios quando aperta (telas menores não-mobile). Só quebra no
   mobile (<768px). */
.recursos_toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 10px;          /* gap entre blocos enxuto → mais respiro interno; aumenta um pouco no xl */
  margin-bottom: 30px;
}

@media (min-width: 1200px) {
  .recursos_toolbar {
    column-gap: 16px;      /* xl: gap um pouco maior que no lg, mas enxuto */
  }
}

@media (max-width: 767.98px) {
  .recursos_toolbar {
    flex-wrap: wrap;       /* mobile: pode empilhar */
  }
}

/* bloco base — fundo cinza #EDEDED, altura 40, cantos 6px, texto Roboto medium 17/20 verde-vivo */
.recursos_item {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background-color: #EDEDED;
  font-family: var(--roboto);
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color: var(--verde-vivo);
}

@media (min-width: 1200px) {
  .recursos_item {
    gap: 10px;
  }
}

.recursos_ouvir__label,
.recursos_resumo__label {
  white-space: nowrap;
}

/* Ouvir texto: [rótulo][play] ..... [tempo][1x] */
.recursos_ouvir {
  flex: 3 1 0;
  /*  DEIXAR INVISÍVEL - TEMPORÁRIO PRODUÇÃO*/
  opacity: 0;
}

@media (max-width: 767.98px) {
  .recursos_ouvir {
    flex: 1 0 100%;
  }
}

.recursos_ouvir__play {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.recursos_ouvir__play img {
  display: block;
  width: 25px;
  height: 25px;
}

.recursos_ouvir__tempo {
  margin-left: auto;   /* empurra tempo + velocidade para a direita */
  font-size: 13px;
  font-weight: 400;
}

.recursos_ouvir__velocidade {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 19px;
  border-radius: 20px;
  background-color: var(--branco);
  font-size: 13px;
  font-weight: 700;
}

/* Resumo (botão) */
.recursos_resumo {
  flex: 2 1 0;
  cursor: pointer;
  /*  DEIXAR INVISÍVEL - TEMPORÁRIO PRODUÇÃO*/
  /*  opacity: 0;*/
}

/* Sem resumo por IA disponível: botão invisível, mas mantém o espaço no layout */
.recursos_resumo--oculto {
  opacity: 0;
  pointer-events: none;
}

.recursos_resumo__icone {
  flex: 0 0 auto;
  width: 23px;
  height: 18px;
}

/* Controle de fonte: a  ‹slider›  a */
.recursos_fonte {
  flex: 2 1 0;
  gap: 6px;
}

.recursos_fonte__a {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1;
  color: var(--verde-vivo);
}

.recursos_fonte__a--sm { 
  font-size: 22px;
  position: relative;
  top: 2px;
}

.recursos_fonte__a--lg { 
  font-size: 38px;
  position: relative;
  top: -2px;
}

.recursos_fonte__range {
  flex: 1 1 auto;
  min-width: 60px;   /* mantém o slider utilizável mesmo quando aperta */
  height: 24px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* trilho branco */
.recursos_fonte__range::-webkit-slider-runnable-track {
  height: 24px;
  border-radius: 20px;
  background: var(--branco);
}
.recursos_fonte__range::-moz-range-track {
  height: 24px;
  border-radius: 20px;
  background: var(--branco);
}

/* thumb petróleo */
.recursos_fonte__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--verde-vivo);
}
.recursos_fonte__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--verde-vivo);
}

/* Tema claro/escuro (botão quadrado 40×40) */
.recursos_tema {
  flex: 0 0 40px;
  width: 40px;
  padding: 0;
  justify-content: center;
  cursor: pointer;
}

.recursos_tema img {
  width: 25px;
  height: 25px;
}

.artigo_texto :where(p,a,li) {
  font-size: 19px;
  line-height: 31px;
  color: var(--preto);
}

/* Headings do corpo — Roboto extrabold #000. h2/h3 são specs do design; h4–h6
   criados com gap decrescente (boas práticas; não descem abaixo do corpo = 19px). */
.artigo_texto :where(h2,h3,h4,h5,h6) {
  font-family: var(--roboto);
  font-weight: 800;
  color: #000000;
}
.artigo_texto h2 { font-size: 32px; line-height: 36px; }
.artigo_texto h3 { font-size: 25px; line-height: 36px; }
.artigo_texto h4 { font-size: 22px; line-height: 28px; }
.artigo_texto h5 { font-size: 20px; line-height: 26px; }
.artigo_texto h6 { font-size: 19px; line-height: 24px; }

.artigo_texto .titulo-decorativo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 32px;
  line-height: normal;
  color: var(--verde-vivo);
  text-align: center;
}

.artigo_texto .titulo-decorativo::before,
.artigo_texto .titulo-decorativo::after {
  content: "";
  flex: 1 1 0;
  height: 2px;
  background-color: var(--verde-vivo);
}

/* Espaço vertical entre os elementos do corpo — 33px (medido no Figma, node
   200-81). Usa margin-bottom (não margin-top) p/ evitar CLS. Escopo nas tags
   básicas do tiny; blocos especiais (citação, "Leia também") têm margem própria. */
.artigo_texto > p,
.artigo_texto > div,
.artigo_texto > picture,
.artigo_texto > h2,
.artigo_texto > h3,
.artigo_texto > h4,
.artigo_texto > h5,
.artigo_texto > h6 {
  margin-bottom: 48px;
}

/* <picture> é inline por padrão → vira bloco p/ o espaçamento vertical valer */
.artigo_texto > picture {
  display: block;
}

/* ---- Citação (blockquote.citacao) — híbrido: linhas em CSS, ícone em SVG ----
   HTML do tiny: <blockquote class="citacao">TEXTO<br><em>autor</em></blockquote>
   As linhas seguem a LARGURA DO BLOCO (= limite do texto, via width:fit-content),
   não a do container. Linha superior = 2 segmentos com vão central p/ o ícone;
   linha inferior = border-bottom. Ícone = SVG centralizado no vão (::before). */
.artigo_texto .citacao {
  position: relative;
  display: flow-root;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 48px;
  padding: 48px 4px 22px;
  text-align: center;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 25px;
  line-height: 29px;
  color: var(--verde-vivo);
  border-bottom: 2px solid var(--verde-vivo);
  border-left: 0;                 /* remove a barra vertical cinza do editor (tinymce_common blockquote.citacao) */
  background-image:
    linear-gradient(var(--verde-vivo), var(--verde-vivo)),
    linear-gradient(var(--verde-vivo), var(--verde-vivo));
  background-repeat: no-repeat;
  background-size: calc(50% - 37px) 2px, calc(50% - 37px) 2px;   /* vão central ~74px */
  background-position: 0 18px, 100% 18px;                        /* altura da linha superior */
}

/* ícone de aspas (SVG, já na cor certa) centralizado no vão da linha superior */
.artigo_texto .citacao::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 25px;
  background: url("img/icone_citacao_v2.svg") center / contain no-repeat;
}

/* autor — Roboto light itálico 19/22 (o <em> já vem itálico) */
.artigo_texto .citacao em {
  display: inline-block;
  margin-top: 10px;
  font-weight: 300;
  font-size: 19px;
  line-height: 22px;
}

/* ════════════════════════════════════════════════════════════════════════
   "Leia também" — bloco injetado no meio do corpo (após o 3º parágrafo, via JS).
   Porta o bloco da interna de produção (artigos/leia_tambem.html + .leia-tambem-*
   do amdb_overrides) com os ajustes de tipografia do V2:
   título Roboto bold 26/31 #000; itens (com bullet) Roboto bold 20/23 #005F6B.
   3 colunas iguais (empilham no mobile) separadas por fio vertical fino.
   ════════════════════════════════════════════════════════════════════════ */
.leia_tambem {
  margin: 0 0 48px;
}

/* título — Roboto bold 26/31, #000 */
.leia_tambem__titulo {
  margin-bottom: 0;
  font-family: var(--roboto);
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  color: #000000;
}

@media (min-width: 768px) {
  .leia_tambem__titulo {
    margin-bottom: 16px;
  }
}

/* gutter controlado pelo padding das colunas (zera o do Bootstrap) */
.leia_tambem__lista {
  --bs-gutter-x: 0;
}

.leia_tambem__col {
  padding: 0 20px;                 /* fio central fica no meio do vão (~40px) */
}

/* fio vertical entre colunas (desktop); bordas externas alinhadas ao texto */
@media (min-width: 768px) {
  .leia_tambem__col:first-child { padding-left: 0; }
  .leia_tambem__col:last-child { padding-right: 0; }
  .leia_tambem__col:not(:last-child) {
    border-right: 3px solid #E5E5E5;
  }
}

/* item (link com bullet) — Roboto bold 20/23, #005F6B.
   Bullet inline: as linhas quebradas alinham SOB o bullet (como no Figma),
   sem recuo pendente. */
.leia_tambem__link {
  display: block;
  font-family: var(--roboto);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;   /* entrelinha real medida no Figma (o painel reportava 23) */
  color: var(--verde-vivo);
  text-decoration: none;
}

.leia_tambem__link::before {
  content: "\25CF\00A0";           /* ● + espaço (cor herda do link = verde-vivo) */
}

.leia_tambem__link:hover {
  text-decoration: underline;
}

/* mobile: colunas empilham; o divisor vira fio inferior */
@media (max-width: 767.98px) {
  .leia_tambem__col {
    padding: 10px 0;
  }
  .leia_tambem__col {
    border-bottom: 3px solid #E5E5E5;
  }
  .leia_tambem__col {
    padding-block: 19px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   "Leia também" injetado pelo BACK-END (artigos/leia_tambem.html) via
   substituir_leia_mais — usa as classes .leia-tambem-* (com hífen), diferentes
   das .leia_tambem__* do mockup acima. Portado do amdb_overrides (V1) para o
   bloco ter o MESMO estilo da interna V1 no layout V2.
   ──────────────────────────────────────────────────────────────────────── */
.artigo_texto .leia-tambem-titulo,
.leia-tambem-titulo {
  color: var(--black, #000);
  font-size: 19px;
  line-height: normal;
  font-weight: 900;
}

.leia-tambem-item {
  margin-bottom: 0;
}

.leia-tambem-item ul li {
  display: flex;
  align-items: baseline;
  list-style: none;
}

.leia-tambem-item ul li::before {
  content: "●";
  color: #005f6b;
  font-weight: bold;
  margin-right: 0.6em;
}

a.leia-tambem-link {
  color: #005f6b;
  text-decoration: none;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}

a.leia-tambem-link:hover {
  text-decoration: underline;
  color: var(--primaria, #068447);
}

a.leia-tambem-link:visited {
  color: var(--primaria, #068447);
}

@media (max-width: 768px) {
  .leia-tambem-item {
    border-bottom: 3px solid #dedede;
    margin-bottom: .5rem;
  }
  .leia-tambem-item ul li {
    margin-bottom: .5rem;
  }
}

@media (min-width: 768px) {
  .leia-tambem-item:not(:last-child) {
    border-right: 3px solid #dedede;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Galeria de imagens no corpo (Swiper) — substitui o antigo amp-carousel.
   Montada por JS a partir de div.amdb-gallery (v2_interna.js). Layout do Figma
   (node 200-671): crédito (Roboto light 12/#5D5D5D, topo, alinhado à esquerda
   da imagem) · imagem 16:9 radius6 com setas 40×40 (#005F6B @60%, chevron
   branco) FORA da imagem · legenda (Roboto light 16/#5D5D5D) · miniaturas
   84×47 centradas na ativa (destacada). ≥1200px o bloco todo (setas incluídas)
   tem max-width 752px; abaixo disso ocupa o col-lg-8, setas sempre dentro.
   ════════════════════════════════════════════════════════════════════════ */
.v2-galeria {
  --seta-w: 40px;
  --seta-gap: 32px;
  width: 100%;
  margin: 0 auto 48px;
}

@media (min-width: 1200px) {
  .v2-galeria { max-width: 752px; }        /* bloco todo, setas incluídas */
}

@media (max-width: 767.98px) {
  .v2-galeria { --seta-gap: 12px; }        /* aperta o vão p/ dar largura à imagem */
}

/* crédito — acima da imagem, alinhado à esquerda dela, Roboto light 12/16 #5D5D5D */
.v2-galeria__credito {
  margin: 0 0 8px;
  padding-left: calc(var(--seta-w) + var(--seta-gap));
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  color: #5D5D5D;
}

/* palco: [seta] imagem [seta] */
.v2-galeria__palco {
  display: flex;
  align-items: center;
  gap: var(--seta-gap);
}

.v2-galeria__main {
  flex: 1 1 auto;
  min-width: 0;                            /* deixa o swiper encolher no flex */
}

.v2-galeria__main .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

/* setas — quadrado 40×40, #005F6B @60%, chevron branco (paths do Figma) */
.v2-galeria__seta {
  flex: 0 0 var(--seta-w);
  width: var(--seta-w);
  height: var(--seta-w);
  padding: 0;
  border: 0;
  line-height: 0;
  background: rgba(0, 95, 107, 0.6);
  cursor: pointer;
  transition: background-color 0.15s;
}

.v2-galeria__seta:hover {
  background: rgba(0, 95, 107, 0.85);
}

.v2-galeria__seta svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
}

.v2-galeria__seta.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* legenda — alinhada à esquerda da imagem, Roboto light 16/20 #5D5D5D */
.v2-galeria__legenda {
  margin: 8px 0 0;
  padding-left: calc(var(--seta-w) + var(--seta-gap));
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #5D5D5D;
}

/* miniaturas — faixa sempre centralizada no bloco da galeria */
.v2-galeria__thumbs {
  margin: 25px auto 0;
}

/* poucas (cabem): centraliza o GRUPO na faixa (largura total da galeria) */
.v2-galeria__thumbs:not(.v2-galeria__thumbs--rolavel) .swiper-wrapper {
  justify-content: center;
}

/* muitas (>5): caixa fixa centralizada (~5 visíveis) que rola na ativa */
.v2-galeria__thumbs--rolavel {
  max-width: 484px;                        /* ~5 thumbs (84) + vãos (16) */
}

.v2-galeria__thumbs .swiper-slide {
  width: 84px;
}

/* todas do mesmo tamanho, cantos retos; inativas esmaecidas, ativa em cor cheia */
.v2-galeria__thumbs .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.v2-galeria__thumbs .swiper-slide-thumb-active img {
  opacity: 1;
}

.newsletter_wrapper {
  background-color: #F3F3F4;   /* faixa full-width; o conteúdo vai no container */
  padding-block: 30px;         /* só vertical — o gutter lateral vem do container */
  margin-bottom: 60px;
}

.newsletter_inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.newsletter__texto { flex: 1 1 0; }
.newsletter__imagem { flex: 0 1 auto; }
.newsletter__form-col { flex: 1.3 1 0; }

/* formulário alinhado ao rodapé do bloco (design) — só no layout em linha */
@media (min-width: 1200px) {
  .newsletter__form-col {
    align-self: flex-end;
    position: relative;
    bottom: 6px;
  }
}

.newsletter__imagem img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* abaixo de 1200px empilha e centraliza */
@media (max-width: 1199.98px) {
  .newsletter_inner {
    flex-direction: column;
    align-items: center;   /* empilhado: mantém os blocos centralizados */
    text-align: center;
    gap: 30px;
  }
  .newsletter__texto,
  .newsletter__form-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
  }
}

.newsletter__chapeu {
  font-size: 12px;
  line-height: 14px;
  font-weight: 200;
  color: #898A8E;
}

.newsletter__titulo {
  display: inline-flex;           /* a borda abraça o título (fit-content) */
  align-items: center;            /* "por dentro" centralizado verticalmente */
  max-width: 100%;
  padding-right: 14px;            /* respiro só à direita; esquerda/topo/base = 0 p/ o "VIVA" colar */
  border: 2px solid #E6FF2A;
  border-radius: 6px;            /* cantos levemente arredondados (print) */
  overflow: hidden;              /* recorta o fundo amarelo do "VIVA" nos cantos */
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
}

.newsletter__titulo span {
  align-self: stretch;            /* fundo amarelo ocupa toda a altura da caixa */
  display: flex;
  align-items: center;            /* centraliza o "VIVA" dentro do fundo */
  margin-right: 10px;             /* vão entre o "VIVA" e o "por dentro" */
  padding: 4px 12px;              /* respiro interno do fundo amarelo */
  background-color: #E6FF2A;
  font-weight: 800;
}

.newsletter__descricao {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
}

.newsletter__descricao span {
  background-color: #E6FF2A;
}

/* ---- Formulário da newsletter (bloco da direita) ---- */
.newsletter_form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* linha: campo de e-mail + botão (ambos 38px de altura) */
.newsletter_form__linha {
  display: flex;
  gap: 10px;
}

/* campo de e-mail — borda 1px verde-vivo, radius 6, fundo branco */
.newsletter_form__email {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--verde-vivo);
  border-radius: 6px;
  background: var(--branco);
  font-family: var(--roboto);
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #000000;
}

/* placeholder — Roboto medium 16/18 #B0B0B0 */
.newsletter_form__email::placeholder {
  color: #B0B0B0;
  font-weight: 500;
  opacity: 1;   /* Firefox não esmaece */
}

/* botão "Enviar" — fundo verde-vivo, texto Roboto bold 15/18 branco + seta */
.newsletter_form__btn {
  flex: 0 0 auto;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  background: var(--verde-vivo);
  color: var(--branco);
  font-family: var(--roboto);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
  cursor: pointer;
}

.newsletter_form__arrow {
  flex: 0 0 auto;
}

/* consentimento — checkbox + texto informativo */
.newsletter_form__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

/* checkbox custom — quadrado 17px, fundo verde-vivo, cantos levemente
   arredondados; check "V" amarelo quando selecionado */
.newsletter_form__check {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--verde-vivo);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.newsletter_form__check:checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--amarelo-vivo);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* texto ao lado do checkbox — Roboto light 12/14 #000 */
.newsletter_form__consent-text {
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  color: #000000;
}

@media (max-width: 767.98px) {
  .newsletter__texto,
  .newsletter_form__consent-text {
    text-align: left;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Últimas notícias — bloco reutilizável (grid de matérias recentes + botão).
   Os CARDS reaproveitam o visual "artigos-md" da home (imagem, .chapeu,
   .titulo-artigo-md, fio .linha-divisoria-padrao) → nenhum CSS novo de card.
   Aqui só o cabeçalho (chapéu + título) e o botão.
   ════════════════════════════════════════════════════════════════════════ */
.ultimas_noticias {
  margin: 0 0 60px;
}

.v2-interna-especial .ultimas_noticias {
  margin-bottom: 0;
  padding-bottom: 60px;
}

/* chapéu do bloco — Roboto medium 19/22, #005F6B */
.ultimas_noticias__chapeu {
  display: block;
  margin-bottom: 12px;
  font-family: var(--roboto);
  font-weight: 500;
  font-size: 19px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--verde-vivo);
}

/* título — Roboto black (800) 40/47, #000; "notícias" em itálico (via <em>) */
.ultimas_noticias__titulo {
  margin-bottom: 48px;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 40px;
  line-height: 47px;
  color: #000000;
}

.ultimas_noticias__titulo em {
  font-family: var(--roboto-serif);
  font-weight: 300;
  font-style: italic;
}

/* botão — centralizado, verde, 48px, radius 6; seta afastada à direita */
.ultimas_noticias__acao {
  margin-top: var(--space-xs-v2);
  text-align: center;
}

.ultimas_noticias__botao {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 30px;        /* borda esquerda → texto */
  /*  padding-right: 22px;       /* seta → borda direita */
  gap: 14px;                 /* vão texto → seta */
  border-radius: 6px;
  background: var(--verde-vivo);
  color: var(--branco);
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 19px;
  line-height: 22px;
  text-decoration: none;
}

.ultimas_noticias__seta {
  flex: 0 0 auto;
}

/* ════════════════════════════════════════════════════════════════════════
   INTERNA ESPECIAL V2 ("Matérias Especiais")
   ════════════════════════════════════════════════════════════════════════ */

/* Fundo de toda a interna especial (hero + legenda + toolbar + corpo/elementos),
   full-width (a <article> é bloco e ocupa a largura toda). */
.v2-interna-especial {
  background-color: #F1F8FA;
  overflow-x: clip;
}

/* HERO — imagem full dentro do container; proporção do design (1280×615 ≈ 2.08),
   escala proporcional. Texto sobreposto no rodapé-centro (desktop branco).
   Fontes = Roboto Serif. */
.hero_especial {
  position: relative;
  aspect-ratio: 1280 / 615;   /* ~615px de altura na faixa 1200–1400; proporcional nas demais */
  overflow: hidden;
  margin-bottom: 10px;         /* imagem hero → legenda */
}

/* Legenda da imagem hero — FORA da imagem, centralizada. Roboto light 16/19 #5D5D5D.
   margin-bottom 48px = legenda → toolbar de recursos. */
.especial_legenda {
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 16px;
  line-height: 19px;
  color: #5D5D5D;
  text-align: center;
  margin-bottom: 48px;
}

/* Bloco lateral esquerdo (autor) — reaproveita o include .interna_autor, mas
   EMPILHADO na vertical e alinhado à esquerda: foto (70×70, fundo amarelo p/ PNG
   sem fundo) → "Por Nome" → data/hora. Tipografia e foto idênticas à interna
   normal (mesmas classes .interna_autor__*). Espaçamentos sempre em margin-bottom. */
.especial_autor .interna_autor {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                    /* espaçamento via margin-bottom, não via gap */
}

.especial_autor .interna_autor__fotos {
  margin-bottom: 7px;        /* foto → "Por" + nome do autor */
}

.especial_autor .interna_autor__nome {
  margin-bottom: 12px;       /* nome do autor → data/hora */
}

.especial_autor .interna_autor__data {
  margin-top: 0;             /* zera o margin-top herdado da interna normal */
  margin-bottom: 24px;       /* data/hora → fio divisor superior */
}

.especial_lateral {
  z-index: 9;
}

.especial_bar {
  background-color: #F1F8FA;
}

/* --- Fios divisores do bloco lateral (1px, #8DC5D9) --- */
.especial_lateral__fio {
  border: 0;
  height: 1px;
  background-color: #8DC5D9;
  margin: 0 0 5px;           /* fio superior → 1ª palavra */
  opacity: 1;
}

.especial_lateral__fio--fim {
  margin-bottom: 18px;       /* fio inferior → redes sociais */
}

/* --- Temas relacionados (palavras-âncora) ---
   Cada palavra é uma caixa de 33px (line-height 22 + padding-block 5.5 → texto
   centralizado no fundo de 33px). padding-inline 6px. A selecionada (.ativo)
   ganha o fundo amarelo full-width (sem raio). margin-bottom 12px entre as caixas
   = 45px baseline-a-baseline (os 23px "texto-a-texto" do design). Todas têm a
   mesma caixa → a seleção pode alternar (scroll-spy) sem deslocar o layout. */
.especial_temas__item {
  display: block;
  padding: 5.5px 6px;
  font-family: var(--roboto-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 22px;
  color: var(--verde-vivo);
  text-decoration: none;
  margin-bottom: 12px;
}

.especial_temas__item:last-child {
  margin-bottom: 5px;        /* última palavra → fio inferior (assumido = topo 5px; confirmar) */
}

.especial_temas__item.ativo {
  background-color: var(--amarelo-vivo);
}

/* Trecho MARCADO no corpo (o redator seleciona o texto e aplica href="#"): é só
   o ponto-âncora do menu lateral, então não deve parecer um link — herda a cor e
   remove o sublinhado, ficando visualmente igual ao texto ao redor.
   (Para destacar o trecho no corpo, trocar por uma cor/realce aqui.) */
.v2-interna-especial .artigo_texto a[href^="#"] {
  font-family: var(--roboto-serif);
  color: #005F6B;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  cursor: text;
  background-color: #E6FF2A;
  padding: 0 10px;
}

.v2-interna-especial .artigo_texto a[href^="#"]:only-child {
  display: inline-block;
  margin-left: -100vw;
  padding-left: 100vw;
}

.v2-interna-especial .artigo_texto > p:first-of-type::first-letter {
  float: left;
  font-family: var(--roboto-serif);
  font-weight: 300;
  font-size: 100px;
  line-height: 0.75;
  color: #ffffff;
  background-color: #1B8CB4;
  padding: 10px 10px 4px;
  margin: 0 18px 6px 0;
}

/* --- Redes sociais do bloco lateral --- */
.especial_social {
  display: flex;
  align-items: center;       /* alturas diferentes (30/25) alinhadas ao centro */
  gap: 20px;
}

.especial_social__item {
  display: inline-flex;
  flex: 0 0 auto;
}

/* Corpo do artigo no especial — Roboto Serif 19/34 (line-height 34px medido nos
   baselines do SVG; o normal usa 31). Tamanho (19) e cor (#000) vêm da regra
   global .artigo_texto :where(p,a,li); o espaçamento entre elementos (48px) e os
   headings também são herdados da regra global (= igual à interna normal). */
.v2-interna-especial .artigo_texto :where(p, a, li) {
  font-family: var(--roboto-serif);
  line-height: 34px;
}

/* Headings do corpo no especial também em Roboto Serif (peso/tamanhos herdados). */
.v2-interna-especial .artigo_texto :where(h2, h3, h4, h5, h6) {
  font-family: var(--roboto-serif);
}

/* Imagens "normais" do corpo (figure.image do tiny) — regra p/ TODAS as internas
   (normal, especial e futuras). Fluidas (não estouram a col nem distorcem), raio
   6px, e CENTRALIZADAS quando menores que a col (inclui verticais, via margin-inline
   auto). img→legenda 14px; legenda Roboto light 16/19 #5D5D5D. Espaçamento p/ o
   próximo elemento = 48px (o <figure> fica fora da regra global de 48px, então é
   definido aqui). OBS.: imagem que ocupa TODO o container (col-12) virá de um NOVO
   elemento do tiny — depende do back-end; aqui é o método padrão. */
.artigo_texto :is(figure.image, figure.image-full-width) {
  margin: 0 16px 48px;        /* zera a margem default do <figure>; 48px → próximo elemento */
}

.artigo_texto :is(figure.image, figure.image-full-width) img {
  display: block;
  max-width: 100%;         /* não estoura a largura disponível */
  width: 100%;
  height: auto;            /* mantém a proporção — sem distorção */
  margin-bottom: .5rem;
}

.artigo_texto figure.image img {
  border-radius: 6px;      /* só nas imagens NORMAIS; full-width sem borda (design não definiu) */
}

/* full-width PREENCHE a largura disponível (não só "cabe"): imagem grande baixa
   de escala; se vier menor que o container, sobe (height auto mantém a proporção).
   Nas NORMAIS mantemos max-width (não estica imagem pequena → fica centralizada). */
.artigo_texto figure.image-full-width img {
  width: 100%;
}

.artigo_texto :is(figure.image, figure.image-full-width) figcaption {
  font-family: var(--roboto);
  font-weight: 300;
  font-size: 16px;
  color: #5D5D5D;
}

/* IMAGEM FULL-CONTAINER (figure.image-full-width) — ultrapassa o col-lg-7 e vai
   até as bordas do CONTAINER (não além). Só ≥992px (abaixo, o col já é full-width,
   então a imagem full = normal). Escopado à grid do ESPECIAL (autor col-2 +
   leitura col-7): width = 12/7 do col; margin-left = -2/7 (sobre o autor). O
   var(--bs-gutter-x) compensa os paddings das colunas → encaixe EXATO na borda.
   Sobreposição sobre o bloco do autor é permitida (decisão do usuário). */
@media (min-width: 992px) {
  .especial_leitura .artigo_texto figure.image-full-width {
    width: calc(100% * 12 / 7 + var(--bs-gutter-x) * 5 / 7);
    max-width: none;
    margin-left: calc(100% * -2 / 7 - var(--bs-gutter-x) * 2 / 7);
  }
}

/* Mobile (<992px): o bloco lateral serve só p/ o AUTOR; temas e redes migram
   para o bloco mobile (âncoras horizontais). A legenda do hero some (decisão de
   design). */
@media (max-width: 991.98px) {
  .especial_lateral__fio,
  .especial_temas,
  .especial_social,
  .especial_legenda {
    display: none;
  }
}

/* --- Barra de âncoras MOBILE (<992px) ---
   Entre a imagem hero e o título; ícone share (fixo à esquerda) + palavras
   horizontais scrolláveis (gap 20px). Fios mesma config (1px #8DC5D9). Ao rolar,
   gruda no topo via JS (.--fixa). Fundo = da interna, p/ ficar opaca quando fixa.
   OBS.: padding-block e alinhamento no estado fixo são ESTIMADOS (mobile é fase
   posterior); scroll-spy (alternar destaque) virá com as âncoras do back-end. */
.especial_temas_mobile {
  align-items: center;
  gap: 20px;                              /* ícone share → lista de palavras */
  padding-block: 8px;                     /* respiro vertical (ESTIMADO) */
  border-top: 1px solid #8DC5D9;
  border-bottom: 1px solid #8DC5D9;
  background-color: #F1F8FA;
}

.especial_temas_mobile__share {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;                         /* share não rola: fica fixo à esquerda */
}

.especial_temas_mobile__lista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;                              /* entre palavras */
  overflow-x: auto;                       /* só as palavras rolam para os lados */
  -webkit-overflow-scrolling: touch;
  min-width: 0;                           /* permite encolher/rolar dentro do flex */
  scrollbar-width: none;                  /* Firefox: esconde a barra de rolagem */
}

.especial_temas_mobile__lista::-webkit-scrollbar {
  display: none;                          /* WebKit: esconde a barra de rolagem */
}

/* no mobile as palavras ficam EM LINHA (sem margin-bottom, sem quebra) */
.especial_temas_mobile__lista .especial_temas__item {
  margin-bottom: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* estado FIXO (JS) — gruda LOGO ABAIXO do header (sticky no mobile), ocupando a
   largura da viewport. O `top` é definido pelo JS = altura do header (não é 0,
   senão ficaria atrás do header). z-index < 1000 do header, p/ ficar sob ele. */
.especial_temas_mobile--fixa {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;                           /* header é 1000; barra encosta por baixo */
  padding-inline: 15px;                   /* alinhamento aprox. ao container qdo fixa (ESTIMADO) */
}

/* wrapper da imagem — contexto de posicionamento p/ o gradiente e p/ o chapéu
   MOBILE (ancorado ao rodapé-esquerdo da IMAGEM). Desktop: preenche o hero.
   Mobile (<992): position relative → acompanha a imagem (que ganha altura natural). */
.hero_especial__media {
  position: absolute;
  inset: 0;
}

.hero_especial__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* gradiente de legibilidade: #1B8CB4 (confirmado no SVG) no rodapé → transparente
   subindo. No .media p/ acompanhar a IMAGEM no desktop e no mobile (no mobile o
   chapéu fica sobre ele). */
.hero_especial__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #1B8CB4 0%, rgba(27, 140, 180, 0) 60%);
  pointer-events: none;
}

/* bloco de texto — rodapé-centro; laterais ~125px @1280 (proporcional); branco */
.hero_especial__texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 1;
  padding-inline: 11%;        /* ~125px no container puro (1200–1400); proporcional nas demais */
  text-align: left;           /* o BLOCO é centralizado (padding simétrico); o texto fica à esquerda */
  color: #FFFFFF;
}

/* chapéu — Roboto Serif bold 17; ícone 25×25 à esquerda */
.hero_especial__chapeu {
  display: inline-flex;
  align-items: center;
  gap: 8px;                   /* espaço ícone↔chapéu (ESTIMADO — medir no SVG) */
  font-family: var(--roboto-serif);
  font-weight: 700;
  font-size: 17px;
}

.hero_especial__chapeu-icone {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
}

/* Chapéu duplicado: desktop (dentro do .texto, sobre a imagem) x mobile (ancorado
   ao rodapé-esquerdo da imagem, pois no mobile título/subtítulo saem da imagem).
   Alterna por display no breakpoint 992 (ver media query mobile do hero). */
.hero_especial__chapeu--mobile {
  display: none;   /* desktop usa o chapéu do .texto */
}

/* título — Roboto Serif extrabold 51/57, letter-spacing 0.02em */
.hero_especial__titulo {
  margin: 8px 0 0;            /* gap chapéu→título (ESTIMADO) */
  font-family: var(--roboto-serif);
  font-weight: 800;
  font-size: 51px;
  line-height: 57px;
  letter-spacing: 0.02em;
}

/* subtítulo — Roboto Serif medium 21/34, letter-spacing 0.02em */
.hero_especial__subtitulo {
  margin: 12px 0 0;          /* gap título→subtítulo (ESTIMADO) */
  font-family: var(--roboto-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 34px;
  letter-spacing: 0.02em;
}

/* MOBILE (<992px, alinhado ao restante do especial: barra de âncoras e bloco
   lateral) — título/subtítulo saem da imagem e vão abaixo, em preto (tipografia
   provisória). O CHAPÉU permanece na imagem (canto inferior esquerdo). */
@media (max-width: 991.98px) {
  .hero_especial {
    aspect-ratio: auto;
    overflow: visible;
  }
  .hero_especial__media {
    position: relative;   /* acompanha a imagem (altura natural) */
    inset: auto;
  }
  /* gradiente mais curto no mobile: pega só ~1/3 inferior (o do chapéu) */
  .hero_especial__media::after {
    background: linear-gradient(to top, #1B8CB4 0%, rgba(27, 140, 180, 0) 33%);
  }
  .hero_especial__img {
    position: static;
    height: auto;
  }
  .hero_especial__texto {
    position: static;
    padding-inline: 0;
    margin-top: 16px;
    text-align: left;
    color: #000000;
    margin-inline: 1rem;
    margin-bottom: var(--space-sm-v2);
  }
  .hero_especial__titulo {
    font-size: 30px;
    line-height: 36px;
  }
  .hero_especial__subtitulo {
    font-size: 18px;
    line-height: 26px;
  }

  /* chapéu: mobile aparece (ancorado à imagem); desktop some */
  .hero_especial__chapeu--desktop {
    display: none;
  }
  .hero_especial__chapeu--mobile {
    display: inline-flex;
    position: absolute;
    left: 16px;           /* inset esquerdo (ESTIMADO — mobile em fase posterior) */
    bottom: 16px;         /* inset inferior (ESTIMADO) */
    z-index: 1;           /* acima do gradiente */
    color: #FFFFFF;       /* branco sobre a imagem */
  }
}

/* ════════════════════════════════════════════════════════════════════════
   COLUNISTA — minibio do autor (interna de colunista)
   Reaproveitado de produção (amdb_overrides.css) — MESMO design. Elemento:
   includes/autor_minibio.html; toggle "Sobre a coluna" = box_artigo_colunista.js.
   Aparece só quando artigo.autores_objs.first.tipo == 1. As regras foram TRAZIDAS
   p/ cá porque o base V2 é isolado (só carrega amdb_v2.css). --primaria de
   produção (#005f6b) = --verde-vivo do V2.
   ════════════════════════════════════════════════════════════════════════ */

.color-primary { color: var(--verde-vivo); }

.mb-custom { margin-bottom: 1.125rem; }

.autor-content { margin-bottom: 1.875rem; }   /* minibio → próximo elemento */

.autor-content .wrapper-colunista-base {
  display: flex;
  justify-content: space-between;
  z-index: 1030;
  background-color: #fff;
}

.autor-content .wrapper-colunista-base .colunista-base {
  display: flex;
  align-items: center;
}

.autor-content .wrapper-colunista-base .colunista-base p {
  margin-bottom: 0;
  line-height: 1.2;
  color: #005f6b;
}

.autor-content .wrapper-colunista-base .colunista-base .autor-name {
  font-size: 25px;
  color: #000;
}

.autor-content .wrapper-colunista-base .wrapper-colunista-action {
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.autor-content .wrapper-colunista-base .wrapper-colunista-action button img {
  transition: transform 0.35s ease;
  transform-origin: center;
}

.autor-content .wrapper-colunista-base .wrapper-colunista-action button.ativo img {
  transform: rotate(90deg);
}

.autor-content .wrapper-colunista-base .colunista-texto-base {
  display: block;
  align-content: center;
  width: 70%;
}

.autor-content .wrapper-colunista-base .colunista-texto-base p {
  color: var(--verde-vivo);
}

.autor-content .texto-sobre-colunista {
  color: #898a8e;
  margin-bottom: 0;
}

.autor-content hr {
  height: 5px;
  background-color: #e1e2e3;
  width: 100%;
  opacity: 1;
  border: 0;
  margin: 0;
}

.autor-content .wrapper-colunista-info {
  padding: 20px;
  border-width: 0 3px 3px 3px;
  border-style: solid;
  border-color: #dcdcdd;
  border-radius: 0 0 10px 10px;
  position: absolute;
  z-index: 1020;
  top: 16px;
  background: #fff;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: top 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
}

.autor-content .wrapper-colunista-info.colunista-info-ativo {
  top: 130px;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: top 0.35s ease, opacity 0.35s ease, visibility 0s linear 0s;
}

.autor-content .wrapper-colunista-info.colunista-info-fechando {
  display: block;
  top: 16px;
  opacity: 0;
  visibility: hidden;
  transition: top 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
}

.autor-content .wrapper-colunista-info p:first-child {
  margin-bottom: 0;
}

.autor-content .wrapper-colunista-info p {
  line-height: 24px;
}

.autor-content .wrapper-colunista-info hr {
  width: 3px;
  background-color: #dcdcdd;
  height: auto;
  opacity: 1;
  border: 0;
  margin: 0 20px;
}

.autor-content .wrapper-colunista-info .colunista-info-social-icon span {
  color: #898a8e;
  margin-bottom: .5rem;
  display: block;
}

@media (max-width: 767px) {
  .autor-content .wrapper-colunista-base .colunista-base img {
    width: 155px;
  }
  .autor-content .wrapper-colunista-base .colunista-base .autor-name {
    font-size: 19px;
  }
  .autor-content .wrapper-colunista-base .wrapper-colunista-action button img {
    width: 35px;
    height: 35px;
  }
  .autor-content .wrapper-colunista-info p,
  .autor-content .wrapper-colunista-info p:first-child {
    margin-bottom: 20px;
  }
  .autor-content .wrapper-colunista-info.colunista-info-ativo {
    top: 113px;
  }
  .autor-content .wrapper-colunista-info.colunista-info-fechando {
    transition: top 0.2s ease, opacity 0.1s ease, visibility 0s linear 0.2s;
  }
}

/* Ícones sociais do minibio (SVGs em socialmedia/social_colunista/) */
.m-custom-social-icon { margin-right: 1.125rem; }

.colunista_linkedin {
  background: url(socialmedia/social_colunista/linkedin_novo_v2.svg) no-repeat;
  width: 40px;
  height: 40px;
}
.colunista_facebook {
  background: url(socialmedia/social_colunista/facebook_novo_v2.svg) no-repeat;
  width: 40px;
  height: 40px;
}
.colunista_instagram {
  background: url(socialmedia/social_colunista/instagram_novo_v2.svg) no-repeat;
  width: 40px;
  height: 40px;
}
.colunista_x {
  background: url(socialmedia/social_colunista/colunista_x.svg) no-repeat;
  width: 40px;
  height: 40px;
}
.colunista_social_default {
  display: none;
  margin: 0;
}

@media (min-width: 768px) {
  .colunista_linkedin,
  .colunista_facebook,
  .colunista_instagram,
  .colunista_x {
    width: 45px;
    height: 45px;
  }
}

.v2-listagem .titulo_editoria em {
  font-family: var(--roboto-serif);
  font-weight: 300;
  font-style: italic;
}

.v2-listagem .interna_breadcrumb {
  margin-bottom: 42px;
}

.v2-listagem .chapeu_editoria {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 22px;
  margin-bottom: 14px;
}

.v2-listagem .chapeu_editoria::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 3px;
  background-color: var(--verde-vivo);
}

.v2-listagem .header_editoria {
  margin-bottom: 38px;
}

.listagem_principal {
  display: block;
  text-decoration: none;
  color: inherit;
}

.listagem_principal__img {
  margin-bottom: 16px;
}

.listagem_principal .chapeu {
  margin-bottom: 16px;
}

.listagem_principal__titulo {
  margin: 0 0 24px;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 2.8125rem;
  line-height: 53px;
  letter-spacing: 0.01em;
  color: var(--preto);
}

.listagem_principal__subtitulo {
  margin: 0 0 16px;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--preto);
}

.listagem_meta {
  margin: 0 0 26px;
  font-family: var(--roboto);
  font-size: 1rem;
  line-height: 19px;
  color: var(--preto);
}

.listagem_meta__por { font-weight: 300; }
.listagem_meta__autor { font-weight: 700; }
.listagem_meta__data { font-weight: 300; color: var(--verde-vivo); }
.listagem_meta__chapeu { font-weight: 300; color: var(--verde-vivo); }

.header_editoria--busca {
  position: relative;
  padding-left: 23px;
}

.header_editoria--busca::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  bottom: -9px;
  width: 15px;
  border: 2px solid #898a8e;
  border-right: 0;
}

.v2-listagem .header_editoria--busca .chapeu_editoria::before {
  display: none;
}

.v2-listagem .header_editoria--busca .chapeu_editoria {
  margin-bottom: 10px;
}

.v2-busca .listagem_meta,
.v2-busca .listagem_meta__por,
.v2-busca .listagem_meta__autor,
.v2-busca .listagem_meta__data,
.v2-busca .listagem_meta__chapeu {
  font-weight: 700;
  color: var(--verde-vivo);
}

.header_busca__termo {
  margin-bottom: 0;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 2rem;
  color: var(--preto);
}

.listagem_busca_item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.listagem_busca__titulo {
  margin: 0 0 18px;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 2rem;
  line-height: 38px;
  color: var(--preto);
}

/* Estado vazio / sem termo na busca V2 */
.busca_vazio {
  margin: 8px 0 40px;
  font-family: var(--roboto);
  font-size: 19px;
  line-height: 1.5;
  color: #5d5d5d;
}

.listagem_item {
  gap: 24px;
}

.listagem_item .artigo-sm-img {
  flex: 0 0 35%;
  width: auto;
}

.listagem_item .artigo-sm-texto {
  flex: 1 1 auto;
  width: auto;
}

.listagem_item .chapeu {
  margin-bottom: 10px;
}

.listagem_item .artigo-titulo-sm {
  margin: 0 0 20px;
  font-size: 1.375rem;
  line-height: 26px;
  font-weight: 800;
}

.listagem_item__subtitulo {
  margin: 0 0 16px;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--preto);
}

@media (max-width: 767.98px) {
  .listagem_item {
    flex-direction: column;
    gap: 14px;
  }

  .listagem_item .artigo-sm-img {
    flex: 0 0 auto;
    width: 100%;
  }

  .listagem_item .artigo-sm-img img {
    aspect-ratio: auto;
  }

  .listagem_item .artigo-sm-texto {
    width: 100%;
  }
}

.v2-listagem .listagem_conteudo .linha-divisoria-padrao {
  margin-bottom: 26px;
}

.v2-autor .listagem_item {
  margin-bottom: 24px;
}

.v2-autor .listagem_conteudo .linha-divisoria-padrao {
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .v2-autor .listagem_item {
    gap: 38px;
    align-items: flex-start;
  }

  .v2-autor .listagem_item .artigo-sm-img {
    flex: 0 0 22%;
  }
}

.listagem_sidebar .chapeu_editoria::before {
  display: none;
}

.listagem_sidebar .artigos-sm {
  margin-bottom: 16px;
}

.listagem_sidebar .linha-divisoria-padrao {
  margin-bottom: 16px;
}

.listagem_maislidas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listagem_sidebar__pub {
  max-width: 300px;
  height: 600px;
  margin: var(--space-md-v2) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ededed;
  color: #b0b0b0;
  font-family: var(--roboto);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.listagem_mostrar_mais {
  text-align: center;
  margin-bottom: 36px;
}

.v2-listagem .interna_breadcrumb--fim {
  margin-bottom: 40px;
}

@media (max-width: 991.98px) {
  .listagem_lateral { margin-top: var(--space-lg-v2); }
}

/* ────────────────────────────────────────────────────────────────────────
   Paginação numerada (produção) estilizada no V2. Reaproveita o include
   includes/pagination.html (componente .pagination do Bootstrap) e só troca
   o visual: pílulas Roboto, ativa/hover em verde-vivo.
   ──────────────────────────────────────────────────────────────────────── */
.listagem_paginacao {
  margin: 8px 0 36px;
}

.listagem_paginacao .pagination {
  gap: 6px;
  margin-bottom: 0;
}

.listagem_paginacao .page-link {
  min-width: 40px;
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  font-family: var(--roboto);
  font-weight: 500;
  color: var(--verde-vivo, #005f6b);
  text-align: center;
  background: #fff;
}

.listagem_paginacao .page-link:hover {
  background: #f2f2f2;
  border-color: var(--verde-vivo, #005f6b);
  color: var(--verde-vivo, #005f6b);
}

.listagem_paginacao .page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(0, 95, 107, .2);
}

.listagem_paginacao .page-item.disabled .page-link {
  color: #b3b3b3;
  background: #fff;
  border-color: #E5E5E5;
}

/* item ativo = <li class="page-item disabled"><a>N</a> (marcado como disabled no include) */
.listagem_paginacao .page-item.disabled .page-link:not([aria-label]) {
  background: var(--verde-vivo, #005f6b);
  border-color: var(--verde-vivo, #005f6b);
  color: #fff;
}

.hero-wrap {
  position: relative;
  margin-bottom: 40px;
}

.hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero-unmute {
  background: transparent;
  border: 0;
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.quem_somos_titulo {
  margin: 0 0 24px;
  font-family: var(--roboto);
  font-weight: 900;
  font-size: 4.25rem;
  line-height: 76px;
  color: var(--preto);
}

.quem_somos_intro {
  margin: 0 0 24px;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 31px;
  color: var(--preto);
}

.quem_somos_imagem {
  margin-bottom: 48px;
}

.quem_somos_bloco_titulo {
  margin-bottom: 0;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 1.5625rem;
  line-height: 30px;
  color: var(--preto);
}

.quem_somos_texto {
  margin-bottom: 40px;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 31px;
  color: var(--preto);
}

.quem_somos_conteudo a {
  color: #1526FF;
}

.quem_somos_secao {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 24px;
}

.quem_somos_secao::before,
.quem_somos_secao::after {
  content: "";
  flex: 1 1 0;
  height: 1.5px;
  margin-bottom: 9px;
  background-color: var(--verde-vivo);
}

.quem_somos_secao span {
  flex: 0 0 auto;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 35px;
  color: var(--verde-vivo);
}

.quem_somos_editorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.quem_somos_editoria {
  flex: 0 0 180px;
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.quem_somos_editoria__icone {
  max-width: 180px;
}

@media (max-width: 767.98px) {
  .quem_somos_editorias {
    max-width: 390px;
  }
  .quem_somos_editoria {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}

.quem_somos_equipe {
  margin-bottom: 50px;
  row-gap: 24px;
}

.quem_somos_autor__topo {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}

.quem_somos_autor__foto {
  flex: 0 0 114px;
  width: 114px;
  height: 90px;
}

.quem_somos_autor__info {
  display: flex;
  flex-direction: column;
}

.quem_somos_autor__nome {
  margin-bottom: 2px;
  font-family: var(--roboto);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--preto);
}

.quem_somos_autor__cargo {
  font-family: var(--roboto);
  font-weight: 700;
  font-size: 1rem;
  line-height: 22px;
  color: var(--verde-vivo);
}

.quem_somos_autor {
  position: relative;
}

.quem_somos_autor__divisor {
  position: relative;
  height: 5px;
  background-color: #e5e5e5;
}

.quem_somos_autor__botao {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background-color: #e5e5e5;
  border: 1.5px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.quem_somos_autor__botao[aria-expanded="true"] img {
  transform: rotate(180deg);
}

.quem_somos_autor__dialogo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 18px);
  z-index: 20;
  padding: 16px;
  background-color: #e5e5e5;
  border-radius: 0 0 6px 6px;
}

.quem_somos_autor__dialogo-texto {
  margin-bottom: 16px;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 22px;
  color: var(--preto);
}

.quem_somos_autor__dialogo-redes {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.quem_somos_autor__dialogo-icone {
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.quem_somos_autor__dialogo-icone img {
  width: 40px;
  height: 40px;
}

.quem_somos_dispositivos {
  display: block;
  max-width: 819px;
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.quem_somos_telas {
  margin-bottom: 48px;
  row-gap: 32px;
}

.quem_somos_tela__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.quem_somos_tela__texto {
  font-size: 19px;
  display: block;
  color: #1526FF;
}

.quem_somos_tela__img {
  width: 100%;
  max-width: 142px;
  height: auto;
}

.fw-900 { font-weight: 900; }
.aspect-16x9 { aspect-ratio: 16 / 9; }
.chapeu-defaut { display: block; margin-bottom: .2rem; }

.colunista_list_content { margin-bottom: 3rem; }
.colunista_list_content .colunista-base { display: flex; align-items: center; gap: 1.875rem; }
.colunista_list_content .colunista-base .autor-name { font-size: 20px; margin-bottom: .2rem; }
.colunista_list_content .colunista-base .autor-name-first { font-size: 22px; }
.colunista_list_content .colunista-base span { color: var(--verde-vivo); }
.colunista_list_content hr { height: 5px; background-color: #EFEFEF; width: 100%; opacity: 1; border: 0; margin: 0; }
.colunista_list_content .ultimo-artigo-subtitulo { margin-bottom: 24px; font-family: var(--roboto); font-weight: 400; font-size: 19px; line-height: 24px; color: #000000; }
.colunista_list_content .card-list-colunista { border-left: 5px solid var(--verde-vivo); padding-left: 25px; }
.colunista_list_content .line_strong { height: 5px; }
.colunista_list_content .ultimo-artigo-colunista h2 { font-size: 45px; line-height: 56px; font-weight: 800; }
.colunista_list_content .chapeu-list-colunista { font-weight: 500; }
.colunista_list_content .ultimo-artigo-titulo-menor { font-size: 27px; font-weight: 700; }

.colunista-wrapper-text p { color: var(--verde-vivo); }
.colunista-wrapper-text .texto-viva { font-weight: 900; }
.ultimo-artigo-colunista .chapeu-defaut { font-weight: 500; color: var(--verde-vivo); }

.colunista-oculto { display: none; }
.mostrar-mais-colunas-wrapper { margin: 2rem 0; }
.mostrar-mais-colunas-wrapper .ultimas_noticias__botao { border: 0; cursor: pointer; }

.colunistas_sidebar .chapeu_sidebar_colunistas { font-size: 14px; color: var(--verde-vivo); font-weight: 500; }
.colunistas_sidebar .sidebar_colunistas_titulo_principal { font-size: 22px; line-height: 33px; font-weight: 900; }
.colunistas_sidebar .title-side-list-colunistas { line-height: 1.3; }
.colunistas_sidebar .custom-line-bottom { height: 5px; background-color: #E5E5E5; border: 0; border-radius: 10px; opacity: 1; }
.colunistas_sidebar .sidebar_line_colunistas { height: 5px; }
.colunistas_artigo_sidebar img { max-width: 132px; max-height: 100px; min-width: 132px; min-height: 100px; }

.header_autor { margin-bottom: 20px; }

.header_autor__chapeu {
  margin-bottom: 20px;
  font-family: var(--roboto);
  font-weight: 500;
  font-size: 19px;
  line-height: 22px;
  color: var(--verde-vivo);
  text-transform: uppercase;
}

.header_autor__corpo {
  display: grid;
  grid-template-columns: 113px 1fr;
  column-gap: 16px;
  row-gap: 15px;
}

.header_autor__foto {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  width: 113px;
  height: 89px;
  object-fit: cover;
}

.header_autor__nomecargo {
  grid-column: 2;
  grid-row: 1;
}

.header_autor__resumo {
  grid-column: 2;
  grid-row: 2;
}

.header_autor__nome {
  margin-bottom: 11px;
  font-family: var(--roboto);
  font-weight: 800;
  font-size: 32px;
  line-height: 25px;
  color: #000000;
}

.header_autor__cargo {
  margin-bottom: 0;
  font-family: var(--roboto);
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--verde-vivo);
}

.header_autor__bio {
  margin-bottom: 20px;
  font-family: var(--roboto);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #000000;
}

.header_autor__bio p:last-child { margin-bottom: 0; }

.header_autor__redes {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .header_autor__corpo { row-gap: 11px; }
}

@media (max-width: 767.98px) {
  .header_autor__foto { grid-row: 1; }
  .header_autor__resumo { grid-column: 1 / -1; }
}

.autor-social-icon { display: inline-block; }
.autor_twitter, .autor_x { background: url(socialmedia/twitter_x.svg) no-repeat; width: 24px; height: 24px; }
.autor_facebook { background: url(socialmedia/facebook.svg) no-repeat; width: 24px; height: 24px; }
.autor_instagram { background: url(socialmedia/instagram.svg) no-repeat; width: 24px; height: 24px; }
.autor_tiktok { background: url(socialmedia/tiktok.svg) no-repeat; width: 24px; height: 24px; }
.autor_linkedin { background: url(socialmedia/linkedin.svg) no-repeat; width: 24px; height: 24px; }
.autor_whatsapp { background: url(socialmedia/whatsapp.svg) no-repeat; width: 24px; height: 24px; }
.autor_youtube { background: url(socialmedia/youtube.svg) no-repeat; width: 24px; height: 24px; }
.autor_email { background: url(socialmedia/autor_email.svg) no-repeat; width: 24px; height: 24px; background-size: contain; }
.autor_social_default { background: url(img/social_default.svg) no-repeat; width: 24px; height: 24px; }

.header_autor .autor-social-icon { width: 40px; height: 40px; background-size: contain; background-position: center; }
.header_autor .autor_linkedin { background-image: url(socialmedia/v2_editoria_autor_linkedin.svg); }
.header_autor .autor_email { background-image: url(socialmedia/v2_editoria_autor_email.svg); }

/* Ícones sociais no diálogo da redação (Quem Somos) — 40×40, mesmos SVGs v2 */
.quem_somos_autor__dialogo-redes .autor-social-icon { width: 40px; height: 40px; background-size: contain; background-position: center; }
.quem_somos_autor__dialogo-redes .autor_linkedin { background-image: url(socialmedia/v2_editoria_autor_linkedin.svg); }
.quem_somos_autor__dialogo-redes .autor_email { background-image: url(socialmedia/v2_editoria_autor_email.svg); }

html.tema-escuro body {
  background-color: #1e1e1e;
}

html.tema-escuro :is(.v2-header, .v2-subnav, .v2-menu, .v2-interna, .v2-interna-especial) {
  --verde-vivo: #4db6c4;
  --preto: #e6e6e6;
}

html.tema-escuro :is(.v2-interna, .v2-interna-especial) {
  background-color: #1e1e1e;
  color: #e6e6e6;
}

html.tema-escuro .especial_bar {
  background-color: #1e1e1e;
}

html.tema-escuro :is(.interna_titulo, .interna_subtitulo, .interna_autor__nome, .interna_autor__nome a, .leia_tambem__titulo, .newsletter__titulo, .newsletter__descricao, .newsletter_form__consent-text, .ultimas_noticias__titulo) {
  color: #e6e6e6;
}

html.tema-escuro .artigo_texto :where(h2, h3, h4, h5, h6) {
  color: #e6e6e6;
}

html.tema-escuro .artigo_texto a {
  color: var(--verde-vivo);
}

html.tema-escuro :is(.interna_tags__titulo, .interna_tags__item, .interna_hero__credito, .interna_hero__legenda, .v2-galeria__legenda) {
  color: #b8b8b8;
}

html.tema-escuro .artigo_texto :is(figure.image, figure.image-full-width) figcaption {
  color: #b8b8b8;
}

html.tema-escuro :is(.recursos_item, .interna_tags__item) {
  background-color: #2a2a2a;
}

html.tema-escuro .interna_social__link {
  background-color: #ededed;
}

html.tema-escuro :is(.interna_tags, .leia_tambem__col) {
  border-color: #3a3a3a;
}

html.tema-escuro :is(.linha-divisoria-padrao, .custom-line-bottom) {
  background-color: #3a3a3a;
}

html.tema-escuro .v2-header {
  background-color: #1e1e1e;
}

html.tema-escuro .v2-subnav {
  background-color: #2a2a2a;
}

html.tema-escuro .v2-subnav__list a {
  border-bottom-color: #2a2a2a;
}

html.tema-escuro .v2-menu {
  background-color: #2a2a2a;
}

html.tema-escuro .v2-search__panel {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
}

html.tema-escuro .v2-search__input {
  color: #e6e6e6;
}

html.tema-escuro :is(.v2-burger img, .v2-header__logo img, .v2-search img, .v2-menu__close img) {
  filter: brightness(1.8);
}

html.tema-escuro .v2-menu__close {
  background: transparent;
}

:is(.v2-interna, .v2-interna-especial) .artigo_resumo .card-header {
  display: none;
}

:is(.v2-interna, .v2-interna-especial) .artigo_resumo .card {
  border: 0;
  margin: 0;
  background: transparent;
}

:is(.v2-interna, .v2-interna-especial) .artigo_resumo #collapseResumo {
  border: 1px solid #005f6b;
  border-radius: 0.375rem;
  margin: 1rem 0;
}