/* ══════════════════════════════════════════════════════════════
   Teste de Visibilidade em IA (/teste-de-visibilidade-em-ia/)
   Formulário no hero, carregamento em etapas, nota e lista de verificações.
   ══════════════════════════════════════════════════════════════ */

.tia-hero { --tia-ok: #3DDC97; --tia-aviso: #FFB547; --tia-erro: #FF6B6B; }
.tia-resultado { --tia-ok: #3DDC97; --tia-aviso: #FFB547; --tia-erro: #FF6B6B; }
.tia-hero__label { margin-top: 20px; }
.tia-hero h1 { max-width: 20ch; }

/* Hero centralizado */
.tia-hero .container { text-align: center; }
.tia-hero .crumbs ol { justify-content: center; }
.tia-hero h1, .tia-hero .page-hero__lead { margin-inline: auto; }
.tia-hero .tia-form { margin-inline: auto; text-align: left; }
.tia-hero .tia-form__erro { text-align: center; }
.tia-hero .tia-form__notas { justify-content: center; }
.tia-hero::after { left: 90%; } /* feixe de luz na lateral, longe do texto centralizado */
@media (max-width: 600px) { .tia-hero::after { left: 96%; } }

/* ── Formulário ─────────────────────────────────────────────── */
.tia-form { margin-top: 36px; max-width: 760px; }
.tia-form__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 20px; border-radius: var(--rdc-pill);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s, box-shadow .25s;
}
.tia-form__row:focus-within { border-color: var(--rdc-blue-light); box-shadow: 0 0 0 4px rgba(0, 71, 255, .25); }
.tia-form__icon { color: rgba(255, 255, 255, .5); display: flex; }
.tia-form input {
  flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.0625rem; color: #fff;
}
.tia-form input::placeholder { color: rgba(255, 255, 255, .42); }
.tia-form .btn { flex: none; }
.tia-form .btn[disabled] { opacity: .65; cursor: progress; }
.tia-form__erro { margin-top: 12px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 107, 107, .12); color: #FFC9C9; font-size: .9375rem; }
.tia-form__notas { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: .875rem; color: rgba(255, 255, 255, .62); }
.tia-form__notas li { display: inline-flex; align-items: center; gap: 6px; }
.tia-form__notas .icon { color: var(--tia-ok); }

@media (max-width: 600px) {
  .tia-form__row { flex-wrap: wrap; padding: 8px; border-radius: 22px; }
  .tia-form__icon { display: none; }
  .tia-form input { padding: 0 12px; flex-basis: 100%; }
  .tia-form .btn { width: 100%; justify-content: center; }
}

/* ── Carregando ─────────────────────────────────────────────── */
.tia-resultado { background: var(--rdc-ink); border-bottom: 1px solid var(--rdc-border); padding-block: clamp(56px, 8vw, 96px); }
.tia-loading { max-width: 640px; }
.tia-loading__site { margin-top: 12px; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; word-break: break-all; }
.tia-loading__passos { margin-top: 28px; display: grid; gap: 14px; }
.tia-loading__passos li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .38); transition: color .3s; }
.tia-loading__passos li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18); transition: border-color .3s, background-color .3s;
}
.tia-loading__passos li.is-ativo { color: #fff; }
.tia-loading__passos li.is-ativo::before { border-color: var(--rdc-blue-light); border-right-color: transparent; animation: tia-gira .8s linear infinite; }
.tia-loading__passos li.is-feito { color: rgba(255, 255, 255, .72); }
.tia-loading__passos li.is-feito::before { border-color: var(--tia-ok); background: var(--tia-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B10' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
@keyframes tia-gira { to { transform: rotate(360deg); } }

/* ── Resumo (nota) ──────────────────────────────────────────── */
.tia-resumo {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 4vw, 44px); border-radius: var(--rdc-radius-lg);
  background: var(--rdc-surface); border: 1px solid var(--rdc-border);
}
.tia-nota { position: relative; width: 168px; height: 168px; }
.tia-nota svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tia-nota circle { fill: none; stroke-width: 12; }
.tia-nota__fundo { stroke: rgba(255, 255, 255, .08); }
.tia-nota__arco { stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--rdc-ease); }
.tia-nota__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tia-nota__num strong { font-size: 3.25rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.tia-nota__num span { font-size: .8125rem; color: rgba(255, 255, 255, .55); }
.tia-resumo[data-faixa="boa"] { --tia-cor: var(--tia-ok); }
.tia-resumo[data-faixa="media"] { --tia-cor: var(--tia-aviso); }
.tia-resumo[data-faixa="baixa"] { --tia-cor: var(--tia-erro); }
.tia-nota__arco { stroke: var(--tia-cor); }
.tia-resumo__site { font-size: .875rem; color: rgba(255, 255, 255, .55); word-break: break-all; }
.tia-resumo h2 { margin-top: 8px; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.035em; line-height: 1.1; }
.tia-resumo__contagem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tia-resumo__contagem span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .875rem; font-weight: 600; }
.tia-resumo__contagem i { width: 8px; height: 8px; border-radius: 50%; }
.tia-resumo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.tia-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9375rem; color: var(--rdc-blue-light); cursor: pointer; }
.tia-link:hover { color: #fff; }

/* ── CTA dentro do resultado (fundo azul escurecido para contraste do botão) ── */
.tia-cta {
  margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding: clamp(22px, 3vw, 32px); border-radius: var(--rdc-radius-lg);
  background: linear-gradient(135deg, var(--rdc-navy), #0B1250); border: 1px solid rgba(106, 155, 255, .3);
}
.tia-cta h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.03em; line-height: 1.15; }
.tia-cta p { margin-top: 6px; color: rgba(255, 255, 255, .72); max-width: 56ch; }

/* ── Lista de verificações ──────────────────────────────────── */
.tia-checks { margin-top: 32px; display: grid; gap: 12px; }
.tia-check {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 16px; align-items: start;
  padding: 20px 22px; border-radius: var(--rdc-radius); background: var(--rdc-surface); border: 1px solid var(--rdc-border);
}
.tia-check__ic { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.tia-check__ic .icon { width: 18px; height: 18px; }
.tia-check[data-status="ok"] .tia-check__ic { background: rgba(61, 220, 151, .14); color: var(--tia-ok); }
.tia-check[data-status="aviso"] .tia-check__ic { background: rgba(255, 181, 71, .14); color: var(--tia-aviso); }
.tia-check[data-status="erro"] .tia-check__ic { background: rgba(255, 107, 107, .14); color: var(--tia-erro); }
.tia-check h3 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; font-weight: 700; padding-top: 5px; }
.tia-check__pts { padding-top: 5px; font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.tia-check__corpo { grid-column: 2 / -1; }
.tia-check__corpo > p { color: rgba(255, 255, 255, .72); font-size: .9688rem; }
.tia-check__dica { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(0, 71, 255, .12); color: var(--rdc-blue-ice); font-size: .9063rem; }
.tia-check__dica strong { color: #fff; }
.tia-check__det { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tia-check__det li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: .8125rem; color: rgba(255, 255, 255, .78); max-width: 100%; }
.tia-check__det li b { font-weight: 700; color: #fff; }
.tia-check__det li i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tia-ok); }
.tia-check__det li.is-off i { background: var(--tia-erro); }
.tia-check__det li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tia-aviso-legal { margin-top: 22px; font-size: .8438rem; color: rgba(255, 255, 255, .5); max-width: 80ch; }

@media (max-width: 700px) {
  .tia-resumo { grid-template-columns: 1fr; justify-items: start; }
  .tia-nota { width: 136px; height: 136px; }
  .tia-nota__num strong { font-size: 2.6rem; }
  .tia-check { grid-template-columns: auto 1fr; }
  .tia-check__pts { grid-column: 2; padding-top: 0; }
  .tia-check__ic { grid-row: span 1; }
  .tia-check__corpo { grid-column: 1 / -1; }
  .tia-cta .btn { width: 100%; justify-content: center; }
}

/* ── Perguntas de exemplo (seção clara) ─────────────────────── */
.tia-queries { margin-top: clamp(40px, 5vw, 64px); }
.tia-queries .icon { color: var(--rdc-blue); }
@media (max-width: 900px) { .tia-queries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tia-queries { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .tia-loading__passos li.is-ativo::before { animation: none; }
  .tia-nota__arco { transition: none; }
}