/* HubClub: página dos contratos (hubclubgo.com.br/contrato).
   O topo, os botões, o rodapé, as cores e as letras vêm do pagina.css; aqui fica só o que é dos documentos: a chave que
   escolhe o contrato, a abertura, o índice e o texto. O texto de cada contrato é o do PDF dele, palavra por palavra
   (servidor/conferir-contrato.py confere antes de publicar). */

/* ───────────── fundo do alto da página ───────────── */
/* Uma faixa solta, atrás da chave e da abertura do contrato escolhido. Não é pai de nada: corta o próprio excesso sem
   atrapalhar o índice, que acompanha a rolagem. */
.pagina-contrato main { position: relative; }
.ct-fundo { position: absolute; inset: 0 0 auto; height: 780px; overflow: hidden; pointer-events: none; }
.ct-fundo .luz-1 { width: 640px; height: 640px; right: -180px; top: -330px; opacity: .85; animation: none; }

/* ───────────── a chave: qual contrato ───────────── */
.ct-escolha { position: relative; padding-top: calc(var(--topo) + 34px); }
.ct-chave { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(640px, 100%); padding: 5px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--linha); }
.ct-chave a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 16px; border-radius: 15px;
  color: var(--texto-3); text-decoration: none; transition: color .25s; }
.ct-chave a .ic { width: 22px; height: 22px; }
.ct-chave a span { display: grid; gap: 3px; font: 600 .95rem/1.2 var(--tit); }
.ct-chave a small { font: 500 .74rem/1.2 var(--txt); color: var(--texto-3); transition: color .25s; }
.ct-chave a:hover { color: var(--texto); }
.ct-chave-fundo { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc(50% - 5px); border-radius: 15px;
  background: linear-gradient(135deg, #3a8fb5, #1d5f80 60%, #0c4a69); box-shadow: 0 10px 26px -12px rgba(58, 160, 216, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .4s cubic-bezier(.3, 1.2, .4, 1); }
html[data-ct="parceria"] .ct-chave-fundo { transform: translateX(100%); }
html[data-ct="assinatura"] .ct-chave a[data-ct-troca="assinatura"],
html[data-ct="parceria"] .ct-chave a[data-ct-troca="parceria"] { color: #fff; }
html[data-ct="assinatura"] .ct-chave a[data-ct-troca="assinatura"] small,
html[data-ct="parceria"] .ct-chave a[data-ct-troca="parceria"] small { color: #d3ecfa; }
/* Com JavaScript, um contrato de cada vez (quem escolhe é o data-ct do <html>, posto pelo contrato.js antes de a página
   aparecer). Sem JavaScript, os dois ficam um depois do outro e a chave vira dois atalhos. */
html.js[data-ct="assinatura"] [data-contrato-doc]:not([data-contrato-doc="assinatura"]),
html.js[data-ct="parceria"] [data-contrato-doc]:not([data-contrato-doc="parceria"]) { display: none; }
/* …/contrato#parceria aponta para o bloco do contrato: com um só bloco à vista, a página fica no alto, com a chave. */
html.js .ct-contrato { scroll-margin-top: 100vh; }
html:not(.js) .ct-chave-fundo { display: none; }
html:not(.js) .ct-chave a { color: var(--texto); }
html:not(.js) .ct-contrato + .ct-contrato { margin-top: 8px; border-top: 1px solid var(--linha); }

/* ───────────── abertura de cada contrato ───────────── */
.ct-abre { position: relative; padding: 36px 0 44px; }
.ct-cabeca { position: relative; max-width: 880px; }
.ct-cabeca h1 { margin: 18px 0 18px; font-size: clamp(1.85rem, 2.5vw + 1rem, 3.15rem); line-height: 1.14; letter-spacing: -.025em; }
.ct-cabeca .bloco { white-space: nowrap; }        /* o trecho destacado não parte em duas linhas no celular */
.ct-marca { display: inline-block; font-size: .44em; font-weight: 600; letter-spacing: .14em; color: var(--texto-3); white-space: nowrap; vertical-align: middle; }
.ct-tipo { margin-bottom: 14px; font: 600 .98rem/1.45 var(--tit); color: var(--azul-claro); }
.ct-cabeca .sub { max-width: 70ch; }
.ct-cabeca .garantias { margin-top: 20px; }
/* O quadro do alto do contrato de parceria (natureza, objeto, vigência, situação). */
.ct-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin-top: 4px; }
.ct-resumo div { padding: 12px 16px 13px; border-radius: 14px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.ct-resumo dt { font: 600 .7rem/1.2 var(--tit); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); }
.ct-resumo dd { margin-top: 5px; font-size: .95rem; line-height: 1.45; color: var(--texto); }
/* A seta dos outros botões anda para o lado; a de baixar, para baixo. */
.bt:hover .ic-baixar { transform: translateY(2px); }

/* ───────────── índice + texto ───────────── */
.ct-corpo { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 52px; align-items: start; padding: 8px 0 104px; }

.ct-indice { position: sticky; top: calc(var(--topo) + 28px); max-height: calc(100vh - var(--topo) - 56px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(118, 183, 213, .35) transparent; }
.ct-indice-rotulo { margin-bottom: 14px; font: 600 .72rem var(--tit); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.ct-indice-botao { display: none; }
.ct-indice ol { display: grid; border-left: 1px solid var(--linha); }
.ct-indice a { display: block; margin-left: -1px; padding: 7px 8px 7px 16px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.4; color: var(--texto-3); text-decoration: none; transition: color .15s, border-color .15s; }
.ct-indice a:hover { color: #fff; }
.ct-indice a.aqui { color: #fff; border-left-color: var(--azul-vivo); }
.ct-indice a:focus-visible { outline-offset: -2px; }

.ct-doc { max-width: 820px; padding: 46px 52px 46px; }
.ct-doc section + section, .ct-doc .ct-partes + section { margin-top: 38px; padding-top: 36px; border-top: 1px solid var(--linha); }
.ct-doc h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; font-size: clamp(1.2rem, .5vw + 1.08rem, 1.42rem); line-height: 1.3; }
/* O número da cláusula no bloco inclinado do logo (contrato de assinatura). */
.ct-n { position: relative; flex: none; min-width: 2.3em; padding: .16em .5em .12em; text-align: center; font-size: .78em; font-variant-numeric: tabular-nums; color: #fff; isolation: isolate; }
.ct-n::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; transform: skewX(-12deg);
  background: linear-gradient(100deg, #0b3a52 0%, #1c5c7c 55%, #2e7da3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
/* "Cláusula N" em cima do título (contrato de parceria). */
.ct-doc h2.ct-clausula { display: grid; gap: 8px; }
.ct-clausula-n { display: inline-flex; align-items: center; gap: 10px; font: 600 .72rem/1.2 var(--tit); letter-spacing: .15em; text-transform: uppercase; color: var(--azul-claro); }
.ct-clausula-n::before { content: ""; width: 16px; height: 8px; border-radius: 2px; transform: skewX(-18deg); background: linear-gradient(90deg, #0b3a52, var(--azul-vivo)); }
.ct-doc p { font-size: 1.02rem; line-height: 1.78; color: #cddae3; }
.ct-doc p + p { margin-top: 14px; }
.ct-doc strong { font-weight: 650; color: #fff; }
.ct-doc a { color: var(--azul-claro); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ct-doc a:hover { color: #fff; }
/* Os campos que se preenchem antes de assinar: [●], [RAZÃO SOCIAL DA CONSULTORIA]... */
.ct-campo, .ct-doc strong.ct-campo { color: var(--azul-claro); }
/* O fecho e as assinaturas do contrato de parceria. */
.ct-fecho { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--linha); text-align: center; }
.ct-assina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; margin-top: 34px; }
.ct-assina p { font-size: .95rem; line-height: 1.6; }
.ct-assina p + p { margin-top: 2px; }
.ct-assina .ct-linha { overflow: hidden; white-space: nowrap; color: var(--texto-2); }
.ct-assina .ct-testemunha { margin-top: 22px; }
.ct-fim { display: flex; flex-wrap: wrap; gap: 12px; max-width: 820px; margin-top: 26px; }

/* ───────────── telas menores ───────────── */
@media (max-width: 1060px) {
  /* Uma coluna só, na largura de leitura: a chave, a abertura, o índice e o texto alinhados. */
  .ct-escolha, .ct-abre .cx, .ct-corpo { max-width: 820px; }
  .ct-corpo { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 80px; }
  /* O índice vira uma caixa que abre e fecha (sem JavaScript, fica aberta). */
  .ct-indice { position: static; max-height: none; overflow: visible; border: 1px solid var(--linha); border-radius: 16px; background: rgba(255, 255, 255, .035); }
  .ct-indice-rotulo { display: none; }
  .ct-indice-botao { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 18px; font: 600 .97rem var(--tit); color: var(--texto); text-align: left; }
  .ct-indice-botao .ic { width: 20px; height: 20px; color: var(--azul-claro); transition: transform .25s; }
  .ct-indice.aberto .ct-indice-botao .ic { transform: rotate(180deg); }
  .ct-indice ol { margin: 2px 18px 16px; }
  .ct-indice a { padding: 10px 8px 10px 16px; font-size: .95rem; }
  html.js .ct-indice:not(.aberto) ol { display: none; }
  html:not(.js) .ct-indice-botao { display: none; }
  html:not(.js) .ct-indice-rotulo { display: block; margin: 0; padding: 18px 18px 12px; }
}
@media (max-width: 760px) {
  .ct-escolha { padding-top: calc(var(--topo) + 22px); }
  .ct-fundo .luz-1 { width: 460px; height: 460px; right: -220px; top: -250px; }
  .ct-abre { padding: 26px 0 30px; }
  .ct-marca { display: block; margin-top: 12px; }
  .ct-doc { padding: 28px 22px 28px; border-radius: 18px; }
  .ct-doc section + section, .ct-doc .ct-partes + section { margin-top: 30px; padding-top: 28px; }
  .ct-doc h2 { gap: 12px; margin-bottom: 14px; }
  .ct-doc p { font-size: 1rem; line-height: 1.72; }
  .ct-fecho { margin-top: 30px; padding-top: 28px; }
  .ct-fim .bt { flex: 1 1 100%; }
  /* Aqui não há a barra fixa da página inicial: o rodapé não precisa guardar lugar para ela. */
  .pagina-contrato .rodape { padding-bottom: 40px; }
}
@media (max-width: 560px) {
  .ct-chave a { gap: 9px; min-height: 58px; padding: 8px 10px; }
  .ct-chave a .ic { width: 19px; height: 19px; }
  .ct-chave a span { font-size: .82rem; }
  .ct-chave a small { font-size: .68rem; }
  .ct-resumo { grid-template-columns: minmax(0, 1fr); }
  .ct-assina { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────── no papel (Ctrl+P): só o documento, preto no branco ───────────── */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .topo, .rodape, .pular, .ct-fundo, .ct-escolha, .ct-indice, .ct-fim, .ct-cabeca .acoes { display: none !important; }
  .cx, .ct-abre .cx, .ct-corpo, .ct-cabeca, .ct-doc, .ct-cabeca .sub, .ct-resumo { width: auto; max-width: none; }
  .ct-abre { padding: 0 0 14pt; }
  .ct-corpo { display: block; padding: 0; }
  .ct-cabeca h1 { margin: 6pt 0 8pt; font-size: 20pt; }
  .ct-resumo div { padding: 4pt 0; border: 0; background: none; }
  .ct-doc { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .ct-doc section + section, .ct-doc .ct-partes + section, .ct-fecho { margin-top: 14pt; padding-top: 12pt; border-top-color: #bbb; }
  .ct-doc h2 { font-size: 13pt; break-after: avoid; }
  .ct-doc p { font-size: 11pt; line-height: 1.5; orphans: 3; widows: 3; }
  .ct-assina { break-inside: avoid; }
  .ct-cabeca h1, .ct-doc h2, .ct-doc p, .ct-doc strong, .ct-doc a, .ct-tipo, .ct-marca, .ct-cabeca .sub, .ct-cabeca .olho, .ct-cabeca .garantias,
  .ct-resumo dt, .ct-resumo dd, .ct-clausula-n, .ct-campo, .ct-doc strong.ct-campo, .ct-assina .ct-linha { color: #000; }
  .ct-cabeca .olho::before, .ct-n::before, .ct-clausula-n::before, .bloco::before { display: none; }
  .bloco { padding: 0; background: none; color: #000; }
  .ct-n { min-width: 0; padding: 0; color: #000; }
  .ct-cabeca .garantias .ic { color: #000; }
}