/* ============================================================
   GOVINDA · PÁGINA DE ARTIGO DO BLOG                28.08.2026

   Carrega JUNTO de govinda-pagina.css, não no lugar dela. O
   índice de seções, o rótulo e a tipografia de texto longo já
   existem lá, servindo /quem-somos e as páginas de embarque —
   o blog usa os mesmos. Um segundo índice, com outro desenho,
   deixaria o site incoerente consigo mesmo.

   Aqui mora só o que não existe em lugar nenhum: a moldura da
   capa com a pena, a barra de progresso, a linha de meta, a
   data nos cartões irmãos e a folha de impressão.

   Todo valor sai de govinda-tokens.css por var(), como manda a
   §13 do Design System v2: o documento CITA o token.
   ============================================================ */

/* ─── 1. BARRA DE PROGRESSO ────────────────────────────────
   Uma linha de 3px no topo dizendo quanto falta. Num texto de
   25 seções ela responde, sem que ninguém pergunte, à dúvida
   que faz desistir: "isso ainda vai longe?"

   transform: scaleX de propósito — é o que a placa de vídeo
   resolve sozinha. Animar `width` obrigaria o navegador a
   refazer o layout a cada quadro de rolagem. */
.art__progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.art__progresso i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acento), var(--ouro));
  will-change: transform;
}

/* ─── 2. A LINHA DE META ────────────────────────────────────
   Categoria · data · tempo de leitura. O tempo de leitura
   ajusta a expectativa de quem chega: num texto longo, saber
   que são 12 minutos evita o abandono no primeiro parágrafo. */
.art__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-4);
  font-family: var(--f-disciplina);
  font-weight: 300;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--tinta-suave);
}
.art__meta > * { display: inline-flex; align-items: center; gap: 6px; }

/* O ponto separador vive no CSS, e não no HTML, porque é
   desenho e não conteúdo: leitor de tela não deve lê-lo. */
.art__meta > * + *::before {
  content: "";
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  opacity: .5;
  margin-right: 3px;
}
.art__categoria {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-forte);
}
.art__categoria::before { display: none !important; }

/* ─── 3. A CAPA ─────────────────────────────────────────────
   O --raio-foto é a segunda exceção declarada ao --raio: 2px
   da v2, aberta a pedido do cliente e só aqui. */
.art__capa {
  margin: 0 auto clamp(32px, 5vw, 64px);
  max-width: var(--w-conteudo);
}
.art__moldura {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-foto);
  box-shadow: var(--sombra-2);
  background: var(--fundo-baixo);   /* o que se vê antes de a foto chegar */
}
.art__foto {
  display: block;
  width: 100%;
  height: auto;
}

/* A pena, marca d'água.
   Camada de CSS sobre a foto, e NÃO gravada no arquivo: assim a
   mesma imagem continua limpa quando for para o Instagram ou
   para uma proposta, e trocar o desenho um dia é editar uma
   regra em vez de reprocessar 65 fotos.

   O degradê existe porque, sobre capa clara, o traço branco
   sumiria — a assinatura desapareceria justamente nas fotos
   mais luminosas. */
.art__moldura::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(120px, 20vw, 230px);
  height: clamp(90px, 15vw, 175px);
  background: radial-gradient(120% 120% at 100% 100%,
              rgba(51, 38, 26, .36), transparent 70%);
  pointer-events: none;
}
.art__pena {
  position: absolute;
  right: clamp(14px, 2.2vw, 32px);
  bottom: clamp(10px, 1.8vw, 26px);
  width: clamp(34px, 5vw, 58px);
  height: auto;
  fill: none;
  stroke: var(--superficie);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .55;
  pointer-events: none;
}

.art__legenda {
  margin: var(--e-3) auto 0;
  max-width: var(--w-leitura);
  font-family: var(--f-disciplina);
  font-weight: 300;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.art__credito {
  display: block;
  margin-top: 4px;
  font-size: .74rem;
  letter-spacing: .06em;
  opacity: .82;
}

/* ─── 4. ÂNCORAS ────────────────────────────────────────────
   Quem chega por #alguma-secao não pode ver o título colado no
   topo da janela. */
.gov-texto h2[id],
.pg__texto h2[id] { scroll-margin-top: var(--e-5); }

/* ─── 5. TEXTOS IRMÃOS ──────────────────────────────────────
   A data ao lado do título, como pedido. Sem ela o cartão não
   diz se o texto é de ontem ou de 2019. */
.art__irmao-meta {
  display: block;
  margin-top: 6px;
  font-family: var(--f-disciplina);
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--tinta-suave);
}
.art__irmao-cat {
  color: var(--acento-forte);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .64rem;
}

/* ─── 5b. COMPARTILHAR ──────────────────────────────────────
   O mesmo componente nas duas formas. O que muda entre elas é
   só a direção da lista e onde ela se apoia. */
.cp__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--e-3);
}
.cp__rotulo {
  font-family: var(--f-disciplina);
  font-weight: 300;
  font-size: var(--t-rotulo);
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e-3);
}

/* O botão. 44px é o mínimo que o dedo acerta sem errar o
   vizinho — não é arredondamento, é a medida da norma. */
.cp__bt {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--acento-forte);
  cursor: pointer;
  padding: 0;
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-rapida) var(--ease),
              box-shadow var(--dur-rapida) var(--ease),
              background var(--dur-toque) var(--ease),
              color var(--dur-toque) var(--ease),
              border-color var(--dur-toque) var(--ease);
}
.cp__bt svg { width: 19px; height: 19px; fill: currentColor; display: block; }

.cp__bt:hover,
.cp__bt:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  background: var(--acento-forte);
  color: var(--superficie);
  border-color: var(--acento-forte);
}
/* O afundar do clique usa --dur-toque: a 280ms o olho lê
   atraso, e a pessoa clica de novo achando que falhou. */
.cp__bt:active { transform: translateY(-1px) scale(.96); transition-duration: var(--dur-toque); }

.cp__bt--estrela { border-color: var(--ouro); color: var(--ouro); }
.cp__bt--estrela:hover,
.cp__bt--estrela:focus-visible { background: var(--ouro); border-color: var(--ouro); color: var(--superficie); }

/* Guardado. A cor sozinha não bastaria para quem não a
   distingue — por isso o SVG passa a ser preenchido, e o
   aria-pressed diz o estado em palavras. */
.cp__bt--estrela.esta-ativo {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--superficie);
}

/* A fileira: centralizada, no fim do texto. */
.cp--fileira { margin: var(--e-6) auto 0; max-width: var(--w-leitura); text-align: center; }
.cp--fileira .cp__lista { flex-wrap: wrap; justify-content: center; }

/* O trilho: coluna grudada à direita durante a leitura.
   Só existe onde há margem sobrando — abaixo de 1200px a
   fileira do fim já cumpre o papel, e um trilho flutuante
   sobre o texto atrapalharia em vez de ajudar. */
.cp--trilho { display: none; }

@media (min-width: 1200px) {
  .cp--trilho {
    display: block;
    position: fixed;
    right: clamp(12px, 2.5vw, 34px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
  .cp--trilho .cp__rotulo {
    /* Visível só para leitor de tela: no trilho o rótulo
       ocuparia espaço sem informar quem enxerga os ícones. */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cp--trilho .cp__lista {
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-2);
    border-radius: 999px;
    background: var(--vidro);
    -webkit-backdrop-filter: var(--vidro-blur);
    backdrop-filter: var(--vidro-blur);
    border: 1px solid var(--vidro-borda);
    box-shadow: var(--sombra-3);
  }
}

/* O botão destacado do WhatsApp. */
.cp__zap {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--acento-forte);
  color: var(--superficie);
  font-family: var(--f-disciplina);
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-rapida) var(--ease),
              box-shadow var(--dur-rapida) var(--ease);
}
.cp__zap svg { width: 21px; height: 21px; fill: currentColor; }
.cp__zap:hover, .cp__zap:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.cp__zap:active { transform: translateY(0); transition-duration: var(--dur-toque); }

/* ─── 5e. A NOTA ────────────────────────────────────────────
   Cinco carinhas. Um medidor só: pedir duas vezes no mesmo
   rodapé derruba a resposta dos dois. */
.nt {
  margin: var(--e-7) auto 0;
  max-width: var(--w-leitura);
  text-align: center;
  padding: var(--e-5) var(--e-4);
  border-top: 1px solid var(--ouro);
  border-bottom: 1px solid var(--superficie-2);
}
.nt__titulo {
  font-family: var(--f-pagina);
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
  color: var(--tinta);
  margin: 0 0 var(--e-5);
}
.nt__carinhas {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3vw, 26px);
  flex-wrap: wrap;
}
.nt__bt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  background: none;
  border: 0;
  padding: var(--e-1);
  cursor: pointer;
  min-width: 56px;
}
.nt__disco {
  width: clamp(46px, 9vw, 56px);
  height: clamp(46px, 9vw, 56px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--superficie-2);
  border: 1.5px solid var(--linha);
  transition: transform var(--dur-rapida) var(--ease),
              background var(--dur-toque) var(--ease),
              border-color var(--dur-toque) var(--ease),
              box-shadow var(--dur-rapida) var(--ease);
}
.nt__disco svg {
  width: 62%; height: 62%;
  stroke: var(--tinta-suave);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-toque) var(--ease);
}
.nt__bt:hover .nt__disco,
.nt__bt:focus-visible .nt__disco {
  transform: translateY(-2px) scale(1.1);
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: var(--sombra-2);
}
.nt__bt:hover .nt__disco svg,
.nt__bt:focus-visible .nt__disco svg { stroke: var(--superficie); }
.nt__bt:active .nt__disco { transform: scale(1.02); transition-duration: var(--dur-toque); }

/* Escolhida. A cor sozinha não bastaria para quem não a
   distingue: o aria-pressed diz o estado em palavras, e a
   legenda abaixo fica em negrito. */
.nt__bt.esta-ativo .nt__disco {
  background: var(--acento);
  border-color: var(--acento);
  transform: scale(1.1);
  box-shadow: var(--sombra-2);
}
.nt__bt.esta-ativo .nt__disco svg { stroke: var(--superficie); }
.nt__bt.esta-ativo .nt__legenda { color: var(--acento-forte); font-weight: 600; }

/* A legenda de cada carinha aparece só na ponta em telas
   estreitas — cinco textos lado a lado embaralham. */
.nt__legenda {
  font-family: var(--f-disciplina);
  font-weight: 300;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  max-width: 8ch;
  line-height: 1.25;
}
@media (max-width: 560px) {
  .nt__bt:not(:first-child):not(:last-child) .nt__legenda {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Enquanto grava, o grupo inteiro para de aceitar clique — sem
   isto, cinco cliques rápidos viram cinco requisições e a
   última a chegar vence, que não é a que a pessoa escolheu. */
.nt__carinhas.esta-ocupado { pointer-events: none; opacity: .6; }

.nt__recado {
  font-family: var(--f-disciplina);
  font-size: .88rem;
  color: var(--tinta-media);
  margin: var(--e-4) 0 0;
  min-height: 1.3em;   /* reserva a linha: sem ela a página pula ao responder */
}
.nt__media {
  font-family: var(--f-disciplina);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: var(--e-2) 0 0;
}
.nt__media[hidden] { display: none; }

/* ─── 5c. O AVISO FLUTUANTE ─────────────────────────────────
   "Link copiado". Sobe, fica dois segundos e sai. Vidro, por
   flutuar sobre o conteúdo — é o caso que a exceção prevê. */
.cp__aviso {
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 5vh, 48px);
  transform: translate(-50%, 14px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 14px 22px;
  border-radius: var(--raio-vidro);
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-blur);
  backdrop-filter: var(--vidro-blur);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra-3);
  font-family: var(--f-disciplina);
  font-size: .95rem;
  color: var(--tinta);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-rapida) var(--ease-saida),
              transform var(--dur-rapida) var(--ease-saida);
}
.cp__aviso.esta-visivel {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-timing-function: var(--ease);
}
.cp__aviso svg { width: 19px; height: 19px; fill: none; stroke: var(--acento); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── 5d. OS TEXTOS GUARDADOS ───────────────────────────────── */
.cp__guardados { margin: var(--e-6) auto 0; max-width: var(--w-leitura); }
.cp__guardados ul { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.cp__guardados a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 12px 15px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--superficie-2);
  color: var(--tinta);
  text-decoration: none;
  transition: transform var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease);
}
.cp__guardados a:hover,
.cp__guardados a:focus-visible { transform: translateX(4px); border-color: var(--linha-forte); }
.cp__guardados svg { width: 15px; height: 15px; fill: var(--ouro); flex: none; }
.cp__vazio { font-size: .95rem; color: var(--tinta-suave); margin: var(--e-3) 0 0; }

/* ─── 5f. A BARRA FIXA DO CELULAR ───────────────────────────
   Três botões dourados, colados ao rodapé da tela. Só existe
   abaixo de 900px: no desktop o trilho à direita já acompanha
   a leitura, e uma barra fixa ali roubaria altura sem resolver
   nada.

   O TEXTO É NAVY SOBRE O DOURADO, E ISSO FOI MEDIDO

     --tinta (#33261a) sobre --ouro (#b98a3d) mede 4,10:1, que
     REPROVA. O navy (#12293f) sobre o mesmo ouro mede 4,76:1, e
     passa. Sendo botão pequeno, e a única coisa fixa na tela, o
     texto tem de ser legível no primeiro olhar.

   A ÁREA DE TOQUE É 56px

     Acima dos 44px da norma, de propósito: a barra vive na
     margem inferior, onde o polegar chega torto, e três alvos
     lado a lado numa tela de 375px não perdoam mira ruim. */
.bm { display: none; }

@media (max-width: 900px) {
  .bm {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    background: var(--linha-forte);   /* vira o fio de 1px entre os botões */
    border-top: 1px solid rgba(51, 38, 26, .18);
    box-shadow: var(--sombra-3);

    /* O recorte do iPhone. Sem isto, o último botão fica embaixo
       da barra de gestos e não recebe o toque. */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* ALTURA EXPLÍCITA, e não deixada ao conteúdo.
       A reserva no <body> logo abaixo precisa bater com a altura
       real da barra. Medida pelo conteúdo, ela dava 73px — os 72
       dos botões mais 1 da borda —, e o último link do rodapé
       ficava um fio escondido. Com height + border-box os dois
       números não podem mais divergir. */
    box-sizing: border-box;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .bm__bt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 4px;
    background: linear-gradient(180deg, var(--ouro) 0%, #a97c34 100%);
    color: var(--navy);
    text-decoration: none;
    font-family: var(--f-disciplina);
    font-size: .68rem;
    letter-spacing: .06em;
    text-align: center;
    line-height: 1.1;
    transition: background var(--dur-toque) var(--ease),
                transform var(--dur-toque) var(--ease);
  }
  .bm__bt:active {
    background: linear-gradient(180deg, #a97c34 0%, #8a6428 100%);
    transform: translateY(1px);
  }

  .bm__ico { display: block; line-height: 0; }
  .bm__ico svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* O do WhatsApp é desenho cheio, não traçado — é o mesmo path
     usado no resto do site. */
  .bm__bt--zap .bm__ico svg { fill: currentColor; stroke: none; }

  .bm__bt:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }

  /* O espaço que a barra ocupa. Sem isto ela cobre o fim do
     rodapé — e é justamente ali que ficam os links que alguém
     rolou a página inteira para alcançar.

     72px, e não 56: o botão tem 56 de altura MÍNIMA mais 8+8 de
     respiro, e mede 72 na tela. Reservar os 56 do min-height
     deixava 16px do rodapé escondidos — o tipo de erro que só
     aparece quando alguém tenta clicar no último link. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* O aviso de "link copiado" sobe acima da barra; senão nasce
     escondido atrás dela. */
  .cp__aviso { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

@media print { .bm { display: none !important; } }

/* ─── 6. FOCO VISÍVEL ───────────────────────────────────────
   Mesmo desenho já repetido à mão em calendario-saidas.css.
   Nunca `outline: none`: quem navega por teclado precisa
   enxergar onde está. */
.art__meta a:focus-visible,
.art__capa a:focus-visible,
.art__irmao:focus-visible,
.nt__bt:focus-visible,
.cp__bt:focus-visible,
.cp__zap:focus-visible,
.cp__guardados a:focus-visible,
.pg__indice-lista a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 3px;
}
.cp__bt:focus-visible { border-radius: 50%; }

/* ─── 7. MOVIMENTO REDUZIDO ─────────────────────────────────
   govinda-tokens.css já zera transição e animação no site
   inteiro. Falta o que ele não alcança: a barra de progresso é
   transform aplicado por JavaScript, não transição. */
@media (prefers-reduced-motion: reduce) {
  .art__progresso { display: none; }
}

/* ─── 8. IMPRESSÃO ──────────────────────────────────────────
   O ícone de imprimir só vale se a página impressa prestar. Um
   artigo sobre visto é levado para a viagem em papel. */
@media print {
  .art__progresso,
  .art__pena,
  .pg__indice,
  .cp, .cp__zap, .cp__aviso, .cp__guardados,
  header, footer, nav,
  .gov-menu, .gov-rodape { display: none !important; }

  .art__moldura {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #999;
  }
  .art__moldura::after { display: none; }

  /* A URL de cada link, revelada. Em papel, link sem destino
     escrito é texto morto. */
  .gov-texto a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .78em;
    word-break: break-all;
    color: #555;
  }

  .gov-texto h2 { break-after: avoid; page-break-after: avoid; }
  .gov-texto h2, .gov-texto h3, .gov-texto p,
  .art__capa, figure { break-inside: avoid; }

  body { background: #fff !important; color: #000 !important; }
}