/* ==========================================================================
   Página de artigo (artigo.html) — a tela de leitura dos textos autorais
   ("Ideias e perguntas", na página Insights). Modelo das próximas; mostra o
   primeiro texto. TEXTO PROVISÓRIO (ver o HTML).

   Terceira versão (04/11/2026, a pedido). O texto continua numa coluna só,
   no centro da página (680px no frame de 1512), sem capa. Mudou:
   - os botões não ficam centralizados: o "Ideias e perguntas" sai da
     coluna e fica na margem esquerda da página; "Ver todos os artigos" e o
     título "Continue lendo" ficam alinhados à esquerda da coluna;
   - a autoria (retrato e nome) fica à esquerda e, para equilibrar o peso,
     o tempo de leitura (com um ícone de relógio) desce para a direita da
     mesma linha, entre duas regras finas; o tema e a data saíram de cima do
     título e ficam sob o nome da autora (04/11/2026, a pedido);
   - os temas e o compartilhar voltam para a coluna fixa à esquerda (como
     na primeira versão), ao lado do texto enquanto ele passa; no tablet e
     no celular, ficam numa linha acima do texto.
   Versões anteriores: versoes-anteriores/artigo-v1/ (capa azul) e
   versoes-anteriores/artigo-v2/ (tudo centralizado, temas e compartilhar
   no fim).

   Grade (.ar-grid): três colunas, com a margem do site. A do meio é a
   coluna do texto (a mesma largura da .ar-col); as laterais dividem o
   resto. A coluna fixa ocupa a da esquerda.

   A1  Abertura .... voltar para "Ideias e perguntas" (na margem; leva a
                     artigos.html), título, linha fina e a linha da autoria
                     (nome, tema e data) com o tempo de leitura
   A2  Texto ....... coluna fixa (temas e compartilhar) e o texto:
                     parágrafos, intertítulos, destaque, lista e imagem
   A3  Fim ......... autoria, "Continue lendo" e o botão "Ver todos os
                     artigos"
   A4  Leve uma dessas questões para sua organização ... o fechamento:
                     vinho, o "?" no traço do logo e os dois links
                     grandes (04/11/2026, a pedido)
   Barra de leitura: uma linha vermelha no alto da tela que se preenche
   conforme o texto avança (artigo.js).
   ========================================================================== */

.page-article {
  --ar-col: max(560px, calc(680 * var(--fp)));
  --ar-text: max(17px, calc(20 * var(--fp)));
  --ar-py: max(80px, calc(140 * var(--fp)));
  --muted: #6f6969;
  --ar-rule: rgba(7, 0, 0, 0.14);
  background: var(--c-white);
}

/* A grade da abertura e do texto: coluna do texto no meio, laterais iguais */
.ar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ar-col)) minmax(0, 1fr);
  padding-inline: var(--pad);
}
.ar-grid > * {
  grid-column: 2;
  min-width: 0;
}

/* A coluna: no centro da página, com a margem do site nas telas pequenas */
.ar-col {
  width: min(calc(100% - 2 * var(--pad)), var(--ar-col));
  margin-inline: auto;
}

/* Rótulo pequeno em caixa-alta (tema, data, tempo de leitura, temas) */
.ar-caps {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Seta fina (a mesma das listas do site) */
.ar-arrow {
  flex: none;
}
.ar-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.ar-arrow path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
}

/* ==========================================================================
   Barra de leitura
   ========================================================================== */
.ar-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: 3px;
  background: var(--c-red);
  transform: scaleX(var(--read, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ==========================================================================
   A1 · Abertura: tema, data, título e linha fina centralizados; o link de
   volta na margem da página; a autoria e o tempo de leitura numa linha
   ========================================================================== */
.ar-head {
  padding-top: calc(var(--nav-h) + max(32px, calc(48 * var(--fp))));
  color: var(--c-ink);
  text-align: center;
}
/* Voltar: sai da coluna e fica na margem esquerda da página (a mesma da
   coluna fixa, mais abaixo) */
.ar-back {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: max(40px, calc(64 * var(--fp)));
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ar-back .ar-arrow {
  width: 14px;
  height: 14px;
  transform: rotate(-135deg);
  transition: transform 0.5s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .ar-back:hover {
    color: var(--c-ink);
  }
  .ar-back:hover .ar-arrow {
    transform: rotate(-135deg) translate(3px, -3px);
  }
}
/* Tema e data: sob o nome da autora, na linha da autoria (04/11/2026, a
   pedido; antes, centralizados acima do título) */
.ar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 5px;
  color: var(--muted);
}
.ar-meta__theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-ink);
}
.ar-meta__theme::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--c-red);
}
.ar-meta time::before {
  content: "·";
  margin-right: 10px;
}
.ar-title {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(34px, calc(56 * var(--fp)));
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ar-title .rv-line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.ar-lead {
  margin: max(24px, calc(32 * var(--fp))) 0 0;
  color: var(--c-graphite);
  font-family: var(--font-display);
  font-size: max(18px, calc(22 * var(--fp)));
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ar-byline {
  display: flex;
  align-items: center;
  text-align: left;
}
.ar-byline__photo {
  flex: none;
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: var(--c-cream);
}
.ar-byline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.ar-byline__name {
  display: block;
  margin: 0;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* Autoria à esquerda e, à direita, o tempo de leitura com o relógio, entre
   duas regras finas (a de baixo separa a abertura do texto) */
.ar-byline {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: max(36px, calc(56 * var(--fp)));
  padding-block: max(16px, calc(20 * var(--fp)));
  border-block: 1px solid var(--ar-rule);
}
.ar-byline__author {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.ar-byline__time {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}
.ar-byline__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--c-ink);
}
.ar-byline__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.ar-byline__icon :is(circle, path) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   A2 · Texto, com a coluna fixa à esquerda (temas e compartilhar)
   ========================================================================== */
.ar-body {
  column-gap: max(32px, calc(48 * var(--fp)));
  padding-top: max(48px, calc(72 * var(--fp)));
}
.ar-content {
  color: var(--c-ink);
}

/* Coluna fixa: na margem esquerda da página, parada no alto da tela
   enquanto o texto passa (até o fim do texto) */
.ar-aside {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  position: sticky;
  top: max(32px, calc(48 * var(--fp)));
  display: flex;
  flex-direction: column;
  gap: max(28px, calc(40 * var(--fp)));
  color: var(--c-ink);
}
.ar-aside__label {
  margin: 0 0 12px;
  color: var(--muted);
}
.ar-content > p,
.ar-content li {
  margin: 0 0 1.15em;
  font-family: var(--font-text);
  font-size: var(--ar-text);
  line-height: 1.65;
}
.ar-content h2 {
  margin: max(44px, calc(64 * var(--fp))) 0 max(16px, calc(20 * var(--fp)));
  font-family: var(--font-display);
  font-size: max(24px, calc(32 * var(--fp)));
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.ar-content h2 .rv-line-mask,
.ar-content h3 .rv-line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
/* Intertítulo de segundo nível (12/11/2026, com os artigos oficiais): os
   subtópicos dentro de uma seção ("O conhecimento que permanece invisível...",
   "1. Mapear o processo completo") */
.ar-content h3 {
  margin: max(32px, calc(44 * var(--fp))) 0 max(10px, calc(12 * var(--fp)));
  font-family: var(--font-display);
  font-size: max(20px, calc(24 * var(--fp)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ar-content h2 + h3 {
  margin-top: max(20px, calc(28 * var(--fp)));
}
/* Destaques do texto (palavras-chave e perguntas em negrito no documento) */
.ar-content strong {
  font-weight: 600;
}
/* Links no meio do texto: os outros artigos (mesma aba, com a transição de
   página) e as fontes citadas (nova aba). Sublinhado vermelho fino; no hover,
   o texto fica vermelho */
.ar-content a.ar-inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.4s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .ar-content a.ar-inline:hover {
    color: var(--c-red);
  }
}
/* Chamada final ("Conheça as palestras...", "Conheça os serviços..."): o link
   vermelho com seta, no corpo do texto; a seta acompanha a última palavra */
.ar-content > .ar-cta {
  margin: 0 0 1.6em;
}
.ar-content .ar-cta__link {
  display: inline;
  line-height: 1.6;
}
.ar-cta__end {
  white-space: nowrap;
}
.ar-content .ar-cta__link .ar-arrow {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -0.05em;
}
/* Destaque: a frase em corpo de título, centralizada (sem o quadrado
   vermelho no alto desde 04/11/2026, a pedido) */
.ar-quote {
  margin: max(44px, calc(64 * var(--fp))) 0;
  padding: 0;
  text-align: center;
}
.ar-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: max(24px, calc(34 * var(--fp)));
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.ar-list {
  margin: 0 0 1.15em;
  padding: 0;
  list-style: none;
}
.ar-list li {
  position: relative;
  margin-bottom: 0.7em;
  padding-left: 28px;
}
.ar-list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}
.ar-figure {
  margin: max(40px, calc(56 * var(--fp))) 0;
}
.ar-figure__img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-graphite);
}
.ar-figure__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-figure figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
}

/* Temas: um embaixo do outro, cada um com o quadrado vermelho */
.ar-tags {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-tags li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ar-tags li + li {
  margin-top: 10px;
}
.ar-tags li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--c-red);
}
/* Cada tema leva à página com todos os textos, filtrada por ele */
.ar-tags__link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .ar-tags__link:hover {
    background-size: 100% 1px;
  }
}
/* Compartilhar: os links um embaixo do outro (como na primeira versão) */
.ar-share {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-share li + li {
  margin-top: 6px;
}
.ar-share__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.ar-share__link .ar-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.5s var(--ease-osmo);
}
.ar-share__link span:first-child {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .ar-share__link:hover span:first-child {
    background-size: 100% 1px;
  }
  .ar-share__link:hover .ar-arrow {
    transform: translate(2px, -2px);
  }
}

/* ==========================================================================
   A3 · Fim: autoria, "Continue lendo" e o botão (alinhados à esquerda)
   ========================================================================== */
.ar-end {
  padding: max(40px, calc(56 * var(--fp))) 0 var(--ar-py);
  color: var(--c-ink);
}

/* Autoria: o retrato e a bio da copy, entre regras finas */
.ar-author {
  display: grid;
  grid-template-columns: max(72px, calc(88 * var(--fp))) minmax(0, 1fr);
  column-gap: max(20px, calc(28 * var(--fp)));
  align-items: start;
  padding: max(28px, calc(40 * var(--fp))) 0;
  border-block: 1px solid var(--ar-rule);
}
.ar-author__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-cream);
}
.ar-author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-author__name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: max(20px, calc(24 * var(--fp)));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ar-author__bio {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: max(15px, calc(16 * var(--fp)));
  line-height: 1.6;
}
/* Link contextual (o .b-link da página Sobre) */
.ar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-red);
  font-family: var(--font-text);
  font-size: max(15px, calc(16 * var(--fp)));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.ar-link .ar-arrow {
  width: 13px;
  height: 13px;
  transition: transform 0.5s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .ar-link:hover .ar-arrow {
    transform: translate(2px, -2px);
  }
}

/* Continue lendo: lista de linhas (tema e data, a pergunta, a seta) */
.ar-more {
  margin-top: max(64px, calc(96 * var(--fp)));
}
.ar-more__title {
  margin: 0 0 max(20px, calc(28 * var(--fp)));
  font-family: var(--font-display);
  font-size: max(26px, calc(32 * var(--fp)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ar-more__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ar-rule);
}
.ar-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  column-gap: 24px;
  align-items: end;
  padding: max(18px, calc(24 * var(--fp))) 0;
  border-top: 1px solid var(--ar-rule);
  color: var(--c-ink);
  text-decoration: none;
}
.ar-row__body {
  transition: translate 0.6s var(--ease-osmo);
}
.ar-row__meta {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
}
.ar-row__title {
  display: block;
  font-family: var(--font-display);
  font-size: max(19px, calc(22 * var(--fp)));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}
.ar-row .ar-arrow {
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
  color: var(--c-red);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .ar-row:hover .ar-row__body {
    translate: 16px 0;
  }
  .ar-row:hover .ar-row__title {
    color: var(--c-red);
  }
  .ar-row:hover .ar-arrow {
    opacity: 1;
    transform: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .ar-row .ar-arrow {
    opacity: 1;
    transform: none;
  }
}
.ar-row:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}

.ar-all {
  display: flex;
  justify-content: flex-start;
  margin-top: max(40px, calc(56 * var(--fp)));
}
.btn.ar-all__btn {
  display: inline-flex;
  gap: 12px;
  width: auto;
  height: max(56px, calc(72 * var(--fp)));
  padding: 0 max(28px, calc(40 * var(--fp)));
  font-size: max(16px, calc(18 * var(--fp)));
}
.ar-all__btn .ar-arrow {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   A4 · Leve uma dessas questões para sua organização
   Prefixo .ar-. As cores do bloco
   final da página de palestras (T10), vinho, texto creme (o parágrafo a
   72%) e azul como destaque. À esquerda (colunas 1 a 5 da grade de 12),
   o "?"; à direita, título, texto e os dois links grandes.
   ========================================================================== */
.ar-close {
  --ar-m: calc(126 * var(--fp)); /* módulo: 1/12 da largura do frame */
  --ar-gap12: calc(24 * var(--fp));
  --ar-col12: calc((100vw - 2 * var(--pad) - 11 * var(--ar-gap12)) / 12);
  --ar-rule-light: rgba(251, 245, 238, 0.24);
  background: var(--c-wine);
  color: var(--c-cream);
}
.ar-close__grid {
  --py: max(56px, calc(104 * var(--fp)));
  display: grid;
  grid-template-columns: calc(var(--pad) + 5 * (var(--ar-col12) + var(--ar-gap12))) minmax(0, 1fr);
  min-height: calc(5 * var(--ar-m));
}
.ar-close__mark {
  position: relative;
}
/* O "?" no traço do logo: espessura 22 e os mesmos raios do "iona" (39 no
   gancho, 13.2 no ponto). O viewBox termina na base do ponto, alinhada com a
   regra de baixo do último link; translate compensa a folga de 2.2 à
   esquerda, para a borda do traço ficar na margem. */
.ar-qmark {
  position: absolute;
  left: var(--pad);
  bottom: var(--py);
  width: auto;
  height: min(calc(3.6 * var(--ar-m)), calc(100% - 2 * var(--py)));
  aspect-ratio: 104.4 / 152.2;
  translate: -2.107% 0;
  color: var(--c-blue);
  overflow: visible;
  transform-origin: 50% 100%;
  transition: rotate 1s var(--ease-osmo);
}
.ar-qmark.is-tilt {
  rotate: -7deg;
}
.ar-qmark__hook {
  fill: none;
  stroke: currentColor;
  stroke-width: 22;
  stroke-dasharray: 1 1;
}
.ar-qmark__dot {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.ar-close__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--py) var(--pad) var(--py) calc(64 * var(--fp) + var(--ar-gap12));
}
.ar-close__title {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(30px, calc(56 * var(--fp)));
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.ar-close__title .rv-line-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.ar-close__text {
  max-width: 38ch;
  margin: max(20px, calc(32 * var(--fp))) 0 max(48px, calc(80 * var(--fp)));
  color: rgba(251, 245, 238, 0.72);
  font-family: var(--font-text);
  font-size: max(17px, calc(22 * var(--fp)));
  line-height: 1.45;
}
.ar-close__links {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ar-rule-light);
}
.ar-biglink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: max(20px, calc(28 * var(--fp))) 0;
  border-top: 1px solid var(--ar-rule-light);
  color: var(--c-cream);
  font-family: var(--font-display);
  font-size: max(22px, calc(32 * var(--fp)));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: color 0.35s ease;
}
.ar-biglink__label {
  transition: translate 0.6s var(--ease-osmo);
}
.ar-biglink__icon {
  flex: none;
  width: max(18px, calc(24 * var(--fp)));
  height: max(18px, calc(24 * var(--fp)));
  color: var(--c-blue);
  transition: transform 0.5s var(--ease-osmo);
}
.ar-biglink__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.ar-biglink__icon path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25px;
}
@media (hover: hover) and (pointer: fine) {
  .ar-biglink:hover {
    color: var(--c-blue);
  }
  .ar-biglink:hover .ar-biglink__label {
    translate: calc(16 * var(--fp)) 0;
  }
  .ar-biglink:hover .ar-biglink__icon {
    transform: translate(3px, -3px);
  }
}
.ar-biglink:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 4px;
}

/* ==========================================================================
   WhatsApp flutuante: vinho sobre os fundos claros; creme sobre o vinho do
   fechamento (.is-on-dark, artigo.js)
   ========================================================================== */
.page-article .whatsapp__dot {
  color: var(--c-wine);
  transition: transform 0.5s var(--ease-osmo), background-color 0.3s ease, color 0.3s ease;
}
.page-article .whatsapp.is-on-dark .whatsapp__dot {
  color: var(--c-cream);
}
@media (hover: hover) and (pointer: fine) {
  .page-article .whatsapp:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(93, 15, 13, 0.08);
  }
  .page-article .whatsapp.is-on-dark:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(255, 255, 255, 0.14);
  }
}
.page-article .whatsapp:focus-visible .whatsapp__dot {
  outline-color: var(--c-wine);
}
.page-article .whatsapp.is-on-dark:focus-visible .whatsapp__dot {
  outline-color: var(--c-cream);
}

/* ==========================================================================
   Tablet e celular (até 1199px): sem espaço ao lado do texto, os temas e o
   compartilhar vão para uma linha acima dele (sem ficar fixos)
   ========================================================================== */
@media (max-width: 1199px) {
  .ar-body {
    column-gap: 0;
  }
  .ar-aside {
    grid-column: 2;
    justify-self: stretch;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 56px;
    margin-bottom: max(40px, calc(56 * var(--fp)));
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ar-rule);
  }
  .ar-aside > div {
    min-width: 0;
  }
  .ar-tags,
  .ar-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .ar-tags {
    gap: 8px 16px;
  }
  .ar-share {
    gap: 4px 24px;
  }
  .ar-tags li + li,
  .ar-share li + li {
    margin-top: 0;
  }
  .ar-content {
    grid-row: 2;
  }

  /* A4: medidas fixas em px e o "?" em cima do texto */
  .ar-close {
    --fp: 1px;
  }
  .ar-close__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ar-close__mark {
    height: clamp(200px, 32vw, 320px);
    margin-top: var(--py);
  }
  .ar-qmark {
    bottom: 0;
    height: 100%;
  }
  .ar-close__body {
    padding: 48px var(--pad) var(--py);
  }
}

/* ==========================================================================
   Celular (até 767px): a coluna ocupa a largura toda, com a margem
   ========================================================================== */
@media (max-width: 767px) {
  /* a autoria e o tempo de leitura continuam lado a lado: o tempo quebra
     em duas linhas ("2 min" / "de leitura"), como o nome e o "Texto autoral" */
  .ar-byline {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .ar-byline__min,
  .ar-byline__unit {
    display: block;
  }
  /* o tema e a data, um embaixo do outro, sob o nome */
  .ar-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .ar-meta time::before {
    content: none;
  }
  .ar-meta time {
    padding-left: 14px; /* alinha a data ao tema, depois do quadrado */
  }
  .ar-aside {
    flex-direction: column;
    gap: 24px;
  }
  .btn.ar-all__btn {
    justify-content: space-between;
    width: 100%;
  }
  .ar-close__title {
    font-size: clamp(34px, 9.6vw, 44px);
  }
  .ar-biglink {
    font-size: 24px;
  }
  .ar-close__mark {
    height: 168px;
  }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ar-back .ar-arrow,
  .ar-tags__link,
  .ar-share__link .ar-arrow,
  .ar-share__link span:first-child,
  .ar-link .ar-arrow,
  .ar-row__body,
  .ar-row__title,
  .ar-row .ar-arrow,
  .ar-qmark,
  .ar-biglink__label {
    transition: none;
  }
}