/* Guia em vídeo da Central de Ajuda, em dobras: uma dobra por etapa, com a tela do Hub em vídeo
   de um lado e os passos em sanfona do outro.
   Componente: src/components/SuporteGuiaVideo.astro. Como criar um guia: instrucoes/suporte-hub/guia-em-video.
   Vive em cima do lp.css (tokens --hc-*) e SÓ vale em páginas que têm um guia: tudo que mexe
   fora do componente está sob :has(.gv-shell), então os outros artigos não mudam. */

/* ---------- Design system Marvee (repo marketing: marca/design-system, origem public/site/site.css) ----------
   Nestas páginas os tokens --hc-* apontam para os do design system: Manrope, o tom claro
   (--light-*), o navy do Hub e os botões em pílula. Candidato a virar o padrão da Central inteira. */
:root:has(.gv-shell) {
  --hc-sans: "Manrope", sans-serif;
  /* tom claro: --light-bg, --light-chrome, --light-card, --light-tx, --light-tx2, --light-line(2) */
  --hc-paper: #FBFCFF;
  --hc-paper-2: #F1F4FB;
  --hc-card: #fff;
  --hc-ink: #141B33;
  --hc-strong: #141B33;
  --hc-soft: #454D6B;
  --hc-line: rgba(16, 24, 40, 0.12);
  --hc-line-soft: rgba(16, 24, 40, 0.08);
  /* tom escuro do Hub: --bg, --bg-2, --white */
  --hc-navy: #04081F;
  --hc-navy-2: #050923;
  --hc-cream: #F9F9F9;
  --hc-cream-soft: rgba(249, 249, 249, 0.66);
  --hc-teal: #5BC0BE;
  --hc-teal-soft: #E8F5F5;
  --hc-shadow-card: 0 0 0 1px rgba(16, 24, 40, 0.04), 0 12px 32px -20px rgba(16, 24, 40, 0.2);
}
body:has(.gv-shell) { font-family: "Manrope", sans-serif; background: var(--hc-paper); color: var(--hc-ink); }
.hc:has(.gv-shell) :is(h1, h2, h3, h4) { font-family: "Manrope", sans-serif; }
/* títulos em 600 e texto corrido em 400, como nas LPs */
.gv-shell .hc-doc h1 { font-weight: 600; letter-spacing: -0.03em; }
.gv-shell .hc-doc-lede { font-weight: 400; }
/* wordmark é logo: fica na Maven Pro 700; o resto do topo é Manrope */
.hc:has(.gv-shell) .hc-brand-name { font-family: "Maven Pro", sans-serif; font-weight: 700; }
/* botões: anatomia do .btn-sm (pílula, 13,5px em 500, min-height 38px) */
.hc:has(.gv-shell) .hc-cta { border-radius: 48px; font-weight: 500; font-size: 13.5px; padding: 9px 18px; min-height: 38px; display: inline-flex; align-items: center; letter-spacing: -0.005em; color: var(--hc-navy) !important; }
.gv-shell .hc-fb { border-radius: 48px; font-weight: 500; }
/* Sim e Não ficam juntos: o espaço grande é só entre a pergunta e os botões */
.gv-shell .hc-fb + .hc-fb { margin-left: -8px; }
/* rótulo de seção: .badge-pill (texto puro, uppercase, 12,5px em 600, .08em) */
.gv-shell .hc-kind { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; gap: 9px; }
.hc:has(.gv-shell) .hc-search-input { font-family: "Manrope", sans-serif; }

/* Sem os detalhes em degradê: o filete do topo e o traço antes do rótulo do artigo. */
.hc:has(.gv-shell) .hc-hairline { display: none; }
.gv-shell .hc-kind::before { display: none; }
.gv-shell .hc-ticket::before { display: none; }
/* o texto da faixa de chamado cabe em duas linhas equilibradas no desktop */
.gv-shell .hc-ticket-d { max-width: 74ch; text-wrap: balance; }

/* Menu lateral enxuto: só o contexto do artigo (o app e os guias dele). As seções da Central
   continuam nas abas do topo, então não se repetem aqui. */
.gn-app { display: flex; align-items: center; gap: 11px; padding: 4px 2px 14px; text-decoration: none !important; }
.gn-app img { width: 34px; height: 34px; padding: 6px; box-sizing: border-box; border-radius: 10px; background: var(--hc-card); border: 1px solid var(--hc-line-soft); }
.gn-app b { display: block; font-family: var(--hc-sans); font-size: 15px; font-weight: 600; color: var(--hc-strong); line-height: 1.2; }
.gn-app small { display: block; font-family: var(--hc-sans); font-size: 12px; color: var(--hc-soft); }
.gn-app:hover b { color: var(--hc-teal-ink); }
.gn-list { list-style: none; margin: 0; padding: 0; }
.gn-list a {
  display: block; padding: 8px 10px 8px 14px; border-left: 2px solid var(--hc-line-soft);
  font-family: var(--hc-sans); font-size: 14px; line-height: 1.4; color: var(--hc-soft); text-decoration: none !important;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.gn-list a:hover { color: var(--hc-strong); border-left-color: var(--hc-soft); }
.gn-list a.is-active { color: var(--hc-teal-ink); border-left-color: var(--hc-teal-ink); font-weight: 600; }
/* glossário: cartão no pé do menu, com ícone, título, apoio e seta */
.gv-shell .hc-nav-extra { margin-top: 22px; padding-top: 0; border-top: 0; }
.gn-gloss {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px;
  background: var(--hc-card); border: 1px solid var(--hc-line-soft); box-shadow: var(--hc-shadow-card);
  text-decoration: none !important; transition: border-color 0.15s ease, transform 0.15s ease;
}
.gn-gloss:hover { border-color: var(--hc-line); transform: translateY(-1px); }
.gn-gloss:focus-visible { outline: 2px solid var(--hc-teal-ink); outline-offset: 2px; }
.gn-gloss-i { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--hc-teal-soft); color: var(--gd-acento); }
.gn-gloss-i svg { width: 19px; height: 19px; }
.gn-gloss-t { flex: 1; min-width: 0; }
.gn-gloss-t b { display: block; font-family: var(--hc-sans); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--hc-strong); }
.gn-gloss-t small { display: block; margin-top: 2px; font-family: var(--hc-sans); font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--hc-soft); text-wrap: pretty; }
.gn-gloss-s { flex: none; width: 15px; height: 15px; color: var(--hc-soft); }
/* no celular vira uma barra só, que abre os guias do app */
.gv-shell .hc-nav-mobile { margin: 14px 0 0; }
.gv-shell .hc-nav-mobile summary { display: flex; align-items: center; gap: 10px; }
.gv-shell .hc-nav-mobile summary img { width: 22px; height: 22px; }
.gv-shell .hc-nav-mobile summary span { flex: 1; }
.gv-shell .hc-nav-mobile summary small { font-size: 12px; font-weight: 600; color: var(--hc-soft); background: rgba(11, 19, 43, 0.06); border-radius: 99px; padding: 2px 9px; }
.gv-shell .hc-nav-mobile summary::after { content: ""; width: 8px; height: 8px; margin: 0 4px 3px 2px; border-right: 1.8px solid var(--hc-soft); border-bottom: 1.8px solid var(--hc-soft); transform: rotate(45deg); transition: transform 0.15s ease; }
.gv-shell .hc-nav-mobile[open] summary::after { transform: rotate(225deg); margin-bottom: -3px; }
.gv-shell .hc-nav-mobile :is(.gn-app, .hc-nav-back, .hc-nav-extra) { display: none; }

/* ---------- cor de destaque por área ----------
   O shell recebe data-acento="azul" nos artigos do Marvin e dos apps de Receita (a mesma regra
   da página de app). Ali o destaque de apoio (rótulos, números, item ativo do menu, links) vira
   um azul suave, as ações (passo aberto, seta, botão) usam o azul cheio e o botão do topo ganha
   o tratamento das páginas do Hub: cor sólida em pílula, com relevo. Nas outras áreas vale o teal. */
.gv-shell { --gd-acento: var(--hc-teal-ink); --gd-acento-suave: color-mix(in srgb, var(--hc-teal-ink) 55%, #fff); }
.gv-shell[data-acento="azul"] {
  --gd-acento: #3972FD; --gd-acento-suave: color-mix(in srgb, #3972FD 55%, #fff);
  --hc-teal-ink: color-mix(in srgb, #3972FD 82%, #fff); --hc-teal-soft: color-mix(in srgb, #3972FD 11%, #fff);
}
.hc:has(.gv-shell[data-acento="azul"]) .hc-cta {
  --app: #3972FD;
  background: var(--app); color: #fff !important; border: 1.7px solid color-mix(in srgb, var(--app) 72%, #fff);
  box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--app) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(4, 8, 31, 0.22);
}
.hc:has(.gv-shell[data-acento="azul"]) .hc-cta:hover { filter: brightness(1.08); }

/* Mesmo esqueleto da Central (menu lateral + artigo); o índice da direita sai porque as
   etapas fazem esse papel. A página para em 1440px, centralizada. */
.gv-shell { --hc-maxw: 1440px; }
@media (min-width: 1121px) { .gv-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 48px; } }
.gv-shell .hc-doc { max-width: none; padding-top: 26px; padding-bottom: 64px; }
.gv-shell .hc-nav { padding-top: 26px; }

/* ---------- cabeçalho do artigo ----------
   Rótulo e título formam um bloco só ao lado do ícone, que ocupa a altura dos dois. */
.gv-shell .hc-crumb { margin-bottom: 36px; }
.gv-shell .hc-kind { display: flex; margin: 0 0 8px 68px; line-height: 16px; }
.gv-shell .hc-doc-title-row { align-items: flex-start; margin-bottom: 18px; }
.gv-shell .hc-doc-app-icon { margin-top: -24px; }
.gv-shell .hc-doc h1 { font-size: clamp(24px, 2.6vw, 28px); line-height: 32px; text-wrap: balance; }
.gv-shell .hc-doc-lede { margin-bottom: 32px; max-width: 72ch; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.gv-shell .hc-doc-meta { padding: 0; border: 0; margin-bottom: 0; font-size: 12.5px; }
/* no desktop os metadados sobem para a linha da trilha, à direita */
@media (min-width: 1121px) {
  .gv-shell .hc-doc { position: relative; }
  .gv-shell .hc-doc-meta { position: absolute; right: 0; top: 26px; }
}

/* ---------- guia em dobras ---------- */
.gd { margin-top: 0; border-top: 1px solid var(--hc-line-soft); font-family: var(--hc-sans); }
/* índice das etapas: uma pílula por etapa, com o número num círculo */
.gd-indice { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0 6px; font-size: 14px; }
.gd-indice a {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 7px; border-radius: 99px;
  background: var(--hc-card); border: 1px solid var(--hc-line-soft); color: var(--hc-soft); text-decoration: none !important; line-height: 1.3;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gd-indice a b {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hc-teal-soft); color: var(--hc-teal-ink); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums;
}
.gd-indice a:hover { color: var(--hc-strong); border-color: var(--hc-line); transform: translateY(-2px); }
.gd-indice a:active { transform: scale(0.97); }
.gd-indice a:focus-visible { outline: 2px solid var(--hc-teal-ink); outline-offset: 2px; }

.gd-dobra {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: start;
  padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--hc-line-soft); scroll-margin-top: 130px;
}
.gd-dobra:first-of-type { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }
.gd-dobra.inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
/* vídeo e título da etapa começam na mesma linha; com muitos passos, o vídeo acompanha a rolagem logo abaixo do topo fixo (72px) */
@media (min-width: 901px) { .gd-dobra .gd-box { position: sticky; top: 96px; } }
.gd-dobra.inv .gd-box { order: 2; }

/* caixa do vídeo. O vídeo é só o conteúdo da janela do Hub: a moldura tem tamanho fixo dentro
   da caixa azul e o zoom acontece dentro dela. */
.gd-box {
  position: relative; overflow: hidden; border-radius: 18px; isolation: isolate; padding: 6% 6% 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(90% 70% at 88% 0%, #2A7BF4 0%, rgba(30, 99, 224, 0.75) 28%, rgba(22, 74, 168, 0) 68%),
    radial-gradient(70% 60% at 0% 62%, rgba(74, 122, 214, 0.5) 0%, rgba(74, 122, 214, 0) 70%),
    linear-gradient(165deg, #0C2152 0%, #0B1B45 48%, #0A1533 100%);
  box-shadow: 0 2px 4px rgba(11, 19, 43, 0.08), 0 30px 70px -34px rgba(13, 43, 110, 0.65);
}
.gd-win {
  width: 100%; aspect-ratio: 1280 / 780; overflow: hidden; border-radius: 3.2% / 5.2%; background: #f3f5f9;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 26px 60px -22px rgba(3, 10, 32, 0.75), 0 8px 22px -10px rgba(3, 10, 32, 0.45);
}
.gd-win video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-barra { display: flex; align-items: center; gap: 14px; padding: 16px 0 18px; }
.gd-segs { display: flex; gap: 5px; flex: 1; height: 16px; align-items: center; }
.gd-seg { all: unset; cursor: pointer; position: relative; flex: 1; height: 14px; }
.gd-seg::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.gd-seg i { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 4px; background: #fff; transform-origin: left center; z-index: 1; }
.gd-seg:hover::after { background: rgba(255, 255, 255, 0.4); }
.gd-seg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.gd-ctl { display: flex; gap: 6px; }
.gd-ctl button {
  all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, 0.14); transition: background 0.2s ease, transform 0.15s ease;
}
.gd-ctl button:hover { background: rgba(255, 255, 255, 0.24); }
.gd-ctl button:active { transform: scale(0.9); }
.gd-ctl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gd-ctl svg { width: 13px; height: 13px; }
.gd-ctl svg[hidden] { display: none; }

/* texto da dobra: na escala do cabeçalho do artigo */
.gd-texto { min-width: 0; }
.gd-olho { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-teal-ink); }
.gd-texto h2 { margin: 0 0 12px; font-size: clamp(22px, 1.7vw, 25px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; color: var(--hc-strong); text-wrap: balance; }
.gd-resumo { margin: 0 0 30px; font-size: 15.5px; line-height: 1.55; color: var(--hc-soft); text-wrap: pretty; }
.gd-passos { list-style: none; margin: 0; padding: 0; }
.gd-passo { position: relative; padding-left: 24px; border-left: 2px solid var(--hc-line); transition: border-color 0.25s ease; }
.gd-passo > button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 0;
  font-size: 16.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--hc-soft); transition: color 0.2s ease;
}
.gd-passo > button::after {
  content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.8px solid; border-bottom: 1.8px solid; border-color: var(--gd-acento-suave); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease, border-color 0.2s ease;
}
.gd-passo + .gd-passo > button { border-top: 1px solid var(--hc-line-soft); }
.gd-passo > button:hover { color: var(--hc-strong); }
.gd-passo > button:hover::after { border-color: var(--gd-acento); }
.gd-passo > button:focus-visible { outline: 2px solid var(--hc-teal-ink); outline-offset: 2px; border-radius: 6px; }
.gd-passo-c p { margin: 0; padding: 0 36px 22px 0; font-size: 15px; line-height: 1.65; color: var(--hc-soft); text-wrap: pretty; }
/* Com JavaScript a sanfona fecha os passos que não estão tocando; o texto abre e fecha pela
   altura (linha de grade de 0fr a 1fr). Sem JavaScript todos ficam abertos. */
.gd.js .gd-passo-c { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gd.js .gd-passo-c > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 0.34s; }
.gd.js .gd-passo.is-on { border-left-color: var(--gd-acento); }
.gd.js .gd-passo.is-on > button { color: var(--hc-strong); font-weight: 600; padding-bottom: 10px; }
.gd.js .gd-passo.is-on > button::after { transform: translateY(2px) rotate(225deg); border-color: var(--gd-acento); }
.gd.js .gd-passo.is-on .gd-passo-c { grid-template-rows: 1fr; }
.gd.js .gd-passo.is-on .gd-passo-c > div { visibility: visible; transition-delay: 0s; }

/* Entrada de cada dobra ao rolar: a caixa do vídeo sobe e assenta, e o texto entra em sequência.
   Só deslocamento e escala, nunca opacidade: se a animação não rodar, o conteúdo já está visível. */
.gd.js .gd-box { transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gd.js .gd-texto > * { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gd.js .gd-texto > :nth-child(1) { transition-delay: 0.08s; }
.gd.js .gd-texto > :nth-child(2) { transition-delay: 0.15s; }
.gd.js .gd-texto > :nth-child(3) { transition-delay: 0.22s; }
.gd.js .gd-texto > :nth-child(4) { transition-delay: 0.29s; }
.gd.js .gd-dobra:not(.is-vista) .gd-box { transform: translateY(36px) scale(0.975); }
.gd.js .gd-dobra:not(.is-vista) .gd-texto > * { transform: translateY(18px); }

.gd-ajuda-i { flex: none; width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 9px; background: rgba(11, 19, 43, 0.06); color: var(--hc-strong); }
.gd-ajuda { display: flex; align-items: center; gap: 10px; margin: 0; padding: 26px 2px 8px; border-top: 1px solid var(--hc-line-soft); font-size: 13px; line-height: 1.55; color: var(--hc-soft); }
.gd-ajuda a { color: var(--hc-teal-ink); font-weight: 600; }

/* ---------- "Continue por aqui": cartões sempre do mesmo tamanho ---------- */
.gv-shell .hc-related-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-rows: 1fr; }
.gv-shell .hc-rel-card { height: 100%; box-sizing: border-box; }
@media (max-width: 1340px) { .gv-shell .hc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gv-shell .hc-related-grid { grid-template-columns: 1fr; } }

/* ---------- rodapé baixo: a página termina nos cartões e o rodapé não precisa de tanta altura ---------- */
.hc:has(.gv-shell) .hc-foot { margin-top: 0; padding-top: 10px; padding-bottom: 10px; }
.hc:has(.gv-shell) .hc-foot-in { padding-top: 16px; padding-bottom: 16px; font-size: 13px; }

/* ---------- celular ----------
   1. o vídeo fica preso no alto enquanto a pessoa rola os passos daquela etapa, então o passo
      aberto e a tela que ele descreve aparecem juntos;
   2. a janela do Hub ganha largura (a caixa azul encosta mais nas bordas e a margem interna diminui);
   3. o cabeçalho encolhe para o primeiro vídeo aparecer mais cedo;
   4. os controles ganham área de toque. */
@media (max-width: 900px) {
  .gd-dobra, .gd-dobra.inv { grid-template-columns: 1fr; gap: 22px; padding: 32px 0 36px; }
  .gd-dobra.inv .gd-box { order: 0; }
  /* o índice vira uma faixa que rola de lado, em vez de cinco linhas */
  .gd-indice { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 18px 16px 6px; }
  .gd-indice::-webkit-scrollbar { display: none; }
  .gd-indice a { flex: none; white-space: nowrap; }
  .gd-ctl button { width: 40px; height: 40px; }
  .gd-ctl svg { width: 15px; height: 15px; }
  .gd-barra { gap: 10px; padding: 10px 0 12px; }
  /* a barra de progresso continua fina, mas o toque pega uma faixa de 32px */
  .gd-segs, .gd-seg { height: 32px; }
  .gd-seg::after, .gd-seg i { top: 14px; }
}
@media (max-width: 900px) and (min-height: 600px) {
  .gd-box { position: sticky; top: 100px; z-index: 5; }
}
@media (max-width: 620px) {
  .gd-box { margin: 0 -14px; padding: 4% 4% 0; border-radius: 14px; }
  .gv-shell .hc-crumb { margin-bottom: 16px; font-size: 12.5px; }
  .gv-shell .hc-crumb .here, .gv-shell .hc-crumb .sep:last-of-type { display: none; }
  .gv-shell .hc-doc-lede { font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
  .gv-shell .hc-doc-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; margin-bottom: 14px; }
  .gd-texto h2 { font-size: 21px; }
  .gd-resumo { margin-bottom: 18px; }
  .gd-passo { padding-left: 18px; }
  .gd-passo > button { padding: 15px 0; font-size: 16px; }
  .gd-passo-c p { padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gd.js .gd-box, .gd.js .gd-texto > *, .gd.js .gd-passo-c, .gd-indice a, .gd-ctl button, .gn-list a, .gn-gloss { transition: none; }
  .gd.js .gd-dobra:not(.is-vista) .gd-box, .gd.js .gd-dobra:not(.is-vista) .gd-texto > * { transform: none; }
}

/* ---------- versão em texto: o artigo completo continua na página (busca, Marvin e quem prefere ler) ---------- */
.gv-texto { margin-top: 24px; border-top: 1px solid var(--hc-line-soft); }
.gv-texto > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 2px;
  font-family: var(--hc-sans); font-size: 15px; font-weight: 600; color: var(--hc-strong);
}
.gv-texto > summary::-webkit-details-marker { display: none; }
.gv-texto > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; margin-right: 6px; border-right: 1.8px solid var(--hc-soft); border-bottom: 1.8px solid var(--hc-soft); transform: rotate(45deg); transition: transform 0.15s ease; }
.gv-texto[open] > summary::after { transform: rotate(225deg); }
.gv-texto > summary:focus-visible { outline: 2px solid var(--hc-teal-ink); outline-offset: 2px; border-radius: 4px; }
.gv-texto .hc-prose { max-width: var(--hc-read); padding-bottom: 8px; }
/* fechado, o resumo fica entre duas linhas com o mesmo respiro em cima e embaixo; aberto, o texto ganha folga antes da avaliação */
.gv-texto ~ .hc-after { margin-top: 0; }
.gv-texto[open] ~ .hc-after { margin-top: 40px; }