/* QI Roxo: seção da landing que apresenta o conector com o Claude e o ChatGPT (prefixo cia-). Exclusivo da Faixa Preta e do acesso vitalício.
   Só o visitante vê esta seção; a tela de verdade do aluno é /app/conectar-ia (css/conectar-ia.css). Usa os tokens e as variáveis --s-* de site.css (carregue depois dele). */

.cia {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--s-raio-secao);
  margin: 0 max(var(--s-margem-cartao), var(--s-id)) 0 max(var(--s-margem-cartao), var(--s-ie));
  padding: clamp(56px, 8vw, 104px) var(--s-lado-cartao);
  background: linear-gradient(162deg, oklch(0.29 0.13 303) 0%, var(--roxo-profundo) 46%, oklch(0.16 0.07 300) 100%);
}
/* Os brilhos ficam DENTRO da caixa (gradiente com centro e raio calculados em --r). Antes eram pseudo-elementos que passavam da borda do `overflow: hidden`: criavam mais de 1.000 px de rolagem escondida
   e o link "Ver como conectar" (#cia-como) fazia o navegador rolar a seção por dentro, cortando o topo do painel (corrigido em 31/10/2026, junto com o mesmo defeito em #cintia). */
.cia::before, .cia::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.cia::before { --r: min(410px, 45vw); background: radial-gradient(circle var(--r) at calc(122% - var(--r)) calc(-34% + var(--r)), oklch(0.8 0.16 90 / .2), transparent); }
.cia::after { --r: min(490px, 55vw); background: radial-gradient(circle var(--r) at calc(-28% + var(--r)) calc(146% - var(--r)), oklch(0.5 0.25 304 / .55), transparent); }
.cia__miolo { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

/* aviso no alto da landing (leva para esta seção) */
.heroi__novidade {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px; margin: 0 0 16px; padding: 5px 16px 5px 5px; border-radius: var(--r-pilula);
  background: oklch(0.87 0.16 90 / .14); border: 1px solid oklch(0.87 0.16 90 / .42); color: var(--ouro); font-weight: 700; font-size: 14.5px; line-height: 1.3;
  transition: transform .2s ease, background .2s ease;
}
.heroi__novidade-tag { flex: none; padding: 4px 11px; border-radius: var(--r-pilula); background: var(--ouro); color: var(--ouro-texto); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.heroi__novidade:hover { background: oklch(0.87 0.16 90 / .24); transform: translateY(-2px); }

/* ---------------------------------------------------------------------------------------------------- abertura: texto + conversa de exemplo */
.cia__topo { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.cia__selo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 16px 5px 5px; border-radius: var(--r-pilula);
  background: oklch(0.87 0.16 90 / .14); border: 1px solid oklch(0.87 0.16 90 / .42); color: var(--ouro); font-weight: 800; font-size: 14px;
}
.cia__selo span { padding: 4px 11px; border-radius: var(--r-pilula); background: var(--ouro); color: var(--ouro-texto); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.cia__titulo { margin: 20px 0 20px; text-align: left; font-size: clamp(34px, 4.5vw, 60px); }
.cia__lead { margin: 0; max-width: 540px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--s-sobre-escuro-2); text-wrap: pretty; }
.cia__compat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.cia__compat-rotulo { margin-right: 4px; font-size: 14px; font-weight: 700; color: var(--s-etiqueta-escura); }
.cia__ia {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px 9px 13px; border-radius: var(--r-pilula);
  background: var(--s-vidro); border: 1px solid var(--s-vidro-borda); font-weight: 800; font-size: 15px;
}
.cia__ia .ico { color: var(--ouro); }
.cia__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 32px; }
.cia__link { color: #fff; font-weight: 700; font-size: 16px; text-decoration: underline; text-decoration-color: oklch(1 0 0 / .4); text-underline-offset: 5px; transition: text-decoration-color var(--anim-rapida); }
.cia__link:hover { text-decoration-color: var(--ouro); }
.cia__faixa { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; font-size: 14.5px; font-weight: 600; color: var(--s-etiqueta-escura); }
.cia__faixa-arte { flex: none; box-sizing: content-box; width: 78px; height: 34px; padding: 8px 14px; border-radius: 16px; background: var(--roxo-tinta); box-shadow: 0 14px 26px -12px oklch(0 0 0 / .6); }

/* conversa de exemplo */
.cia__chat { position: relative; margin: 0; }
.cia__janela {
  overflow: hidden; border-radius: 30px; border: 1px solid var(--s-vidro-borda);
  background: linear-gradient(180deg, oklch(0.31 0.1 302 / .94), oklch(0.22 0.08 301 / .97));
  box-shadow: 0 50px 90px -30px #000, 0 0 0 1px oklch(0 0 0 / .25), inset 0 1px 0 oklch(1 0 0 / .13);
}
.cia__barra { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid oklch(1 0 0 / .1); font-size: 13.5px; font-weight: 700; color: var(--s-etiqueta-escura); }
.cia__pontos { display: flex; gap: 6px; }
.cia__pontos i { width: 10px; height: 10px; border-radius: 50%; background: oklch(1 0 0 / .22); }
.cia__status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: var(--r-pilula);
  background: oklch(0.72 0.17 158 / .16); border: 1px solid oklch(0.72 0.17 158 / .38); color: oklch(0.9 0.1 158); font-size: 12.5px; white-space: nowrap;
}
.cia__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acerto); animation: cia-ping 2.4s ease-out infinite; }
.cia__conversa { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 24px; font-size: 15px; line-height: 1.5; }
.cia__conversa p { margin: 0; }
.cia__msg { max-width: 90%; padding: 12px 16px; text-wrap: pretty; }
.cia__msg--eu { align-self: flex-end; background: #fff; color: var(--texto); font-weight: 600; border-radius: 20px 20px 6px 20px; }
.cia__msg--ia { align-self: flex-start; display: grid; gap: 4px; background: oklch(1 0 0 / .09); border: 1px solid oklch(1 0 0 / .15); border-radius: 20px 20px 20px 6px; color: oklch(0.97 0.012 306); }
.cia__ferramenta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: var(--r-pilula);
  background: oklch(0.5 0.25 304 / .3); border: 1px solid oklch(0.7 0.2 304 / .45); color: var(--s-etiqueta-escura);
  font: 600 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cia__ferramenta .ico { color: var(--ouro); }
.cia__lista { margin: 8px 0 4px; padding: 0; list-style: none; display: grid; gap: 8px; }
.cia__lista li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: oklch(1 0 0 / .08); font-size: 14.5px; }
.cia__min { flex: none; min-width: 58px; padding: 3px 9px; border-radius: var(--r-pilula); background: var(--ouro); color: var(--ouro-texto); text-align: center; font-weight: 800; font-size: 12.5px; }
.cia__fecho { color: var(--s-sobre-escuro-2); }
.cia__questao-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--s-etiqueta-escura); }
.cia__questao-cab b { color: var(--ouro); }
.cia__alts { display: flex; gap: 8px; margin-top: 6px; }
.cia__alts span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid oklch(1 0 0 / .3); font-weight: 800; font-size: 13.5px; }
.cia__alts span:nth-child(2) { background: var(--ouro); border-color: var(--ouro); color: var(--ouro-texto); }
.cia__legenda { margin: 14px 4px 0; font-size: 13px; line-height: 1.45; color: var(--s-sobre-escuro-2); text-align: center; }
.cia__flutua {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 18px;
  background: #fff; color: var(--roxo); font-weight: 800; font-size: 14px; box-shadow: 0 22px 40px -14px oklch(0 0 0 / .7); animation: cia-flutuar 6s ease-in-out infinite;
}
.cia__flutua--a { top: -20px; right: -12px; }
.cia__flutua--b { top: 66px; left: -34px; animation-delay: -3s; }

/* ---------------------------------------------------------------------------------------------------- como isso ajuda nos estudos */
.cia__ajuda { margin-top: clamp(64px, 8vw, 104px); }
.cia__subtitulo { margin: 0 auto clamp(28px, 4vw, 44px); max-width: 780px; text-align: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.cia__subtitulo span { color: var(--ouro); }
.cia__subtitulo--menor { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 28px; }
.cia__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cia__cartao {
  display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 28px; background: oklch(1 0 0 / .06); border: 1px solid oklch(1 0 0 / .13);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .08); transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.cia__cartao:hover { transform: translateY(-4px); background: oklch(1 0 0 / .09); border-color: oklch(0.87 0.16 90 / .5); }
.cia__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ouro); color: var(--ouro-texto); box-shadow: 0 10px 22px -10px oklch(0.87 0.16 90 / .8); }
.cia__cartao h4 { margin: 18px 0 8px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.cia__cartao p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--s-sobre-escuro-2); text-wrap: pretty; }
.cia__cartao .cia__pergunte {
  margin-top: auto; padding: 12px 14px; border-radius: 16px; background: oklch(0 0 0 / .22); color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.45;
}
.cia__cartao p.cia__pergunte { margin-top: 18px; }
.cia__pergunte b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro); }

/* ---------------------------------------------------------------------------------------------------- como conectar + segurança */
.cia__como { margin-top: clamp(56px, 7vw, 88px); padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 48px); border-radius: 32px; background: oklch(1 0 0 / .07); border: 1px solid oklch(1 0 0 / .13); scroll-margin-top: 90px; }
.cia__passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.cia__passos li { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.cia__passos li + li::before { content: ''; position: absolute; left: -22px; top: 22px; width: 20px; border-top: 2px dotted oklch(1 0 0 / .35); }
.cia__num { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ouro); color: var(--ouro-texto); font-family: var(--fonte-titulo); font-weight: 800; font-size: 20px; }
.cia__passos h4 { margin: 2px 0 6px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 19px; }
.cia__passos p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--s-sobre-escuro-2); text-wrap: pretty; }
.cia__confianca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 32px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid oklch(1 0 0 / .14); }
.cia__confianca li { display: flex; gap: 12px; align-items: flex-start; }
.cia__confianca .ico { margin-top: 2px; color: var(--ouro); }
.cia__confianca b { display: block; font-size: 15.5px; font-weight: 800; }
.cia__confianca span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--s-sobre-escuro-2); }
.cia__aviso { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 13px; line-height: 1.55; color: oklch(0.8 0.04 306); text-wrap: pretty; }

/* ---------------------------------------------------------------------------------------------------- movimento */
@keyframes cia-ping { 0% { box-shadow: 0 0 0 0 oklch(0.72 0.17 158 / .6); } 70%, 100% { box-shadow: 0 0 0 9px oklch(0.72 0.17 158 / 0); } }
@keyframes cia-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cia-entra { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
/* as mensagens e os cartões entram conforme a rolagem (só onde o navegador sabe; nos outros tudo já aparece parado) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cia__conversa > *, .cia__cartao, .cia__passos li { animation: cia-entra linear both; animation-timeline: view(); animation-range: entry 4% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) { .cia__flutua, .cia__status::before { animation: none; } }

/* ---------------------------------------------------------------------------------------------------- telas menores */
@media (max-width: 1080px) {
  .cia__topo { grid-template-columns: 1fr; }
  .cia__chat { max-width: 620px; margin: 0 auto; width: 100%; }
  .cia__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cia__passos, .cia__confianca { grid-template-columns: 1fr; }
  .cia__passos li + li::before { display: none; }
}
@media (max-width: 620px) {
  .cia__grade { grid-template-columns: 1fr; }
  .cia__flutua { display: none; }
  .cia__acoes .botao { width: 100%; justify-content: center; }
  .cia__msg { max-width: 96%; }
  .cia__lista li { font-size: 14px; }
  .cia__barra > span:nth-child(2) { display: none; }
}