/* ============================================================
   O diagnostico e a leitura que sai dele.
   Entra a seguir ao estilo.css, e usa as mesmas variaveis.
   ============================================================ */

.ia-sair{font-size:14px;font-weight:500;color:var(--tinta-2)}
.ia-sair:hover{color:var(--ink)}

/* a barra de progresso, colada por baixo da navegacao */
.ia-barra{position:sticky;top:61px;z-index:40;height:5px;background:rgba(5,5,5,.1)}
.ia-barra span{display:block;height:100%;width:0;background:var(--pink);transition:width .45s cubic-bezier(.2,.8,.3,1)}

.ia-diag{position:relative;overflow:clip;min-height:70vh;padding:clamp(40px,6vw,66px) 0 clamp(48px,7vw,80px)}
.ia-diag .ia-orbe--pink{bottom:-220px;left:-160px;width:clamp(260px,34vw,460px);height:clamp(260px,34vw,460px);filter:blur(5px);opacity:.28}
.ia-diag .ia-env{position:relative;z-index:1}

.ia-aviso-js{padding:40px 0}
.ia-aviso-js h1{font-size:clamp(2rem,4vw,2.75rem);margin-bottom:14px}
.ia-aviso-js a{border-bottom:1px solid var(--risco-forte)}

/* ---------- a pergunta ---------- */
.ia-diag-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.ia-diag-titulo{display:flex;flex-direction:column;gap:16px;max-width:24em}
.ia-diag-titulo h1{font-size:clamp(2.1rem,4.6vw,3.4rem);outline:none}
.ia-diag-numero{
  font-family:var(--display);font-size:clamp(4rem,12vw,9.4rem);font-weight:700;
  letter-spacing:-.06em;line-height:.8;color:rgba(5,5,5,.07);flex-shrink:0;
}

/* duas a duas, como no desenho: com auto-fit ficavam tres numa fila e uma
   sozinha por baixo, e as quatro hipoteses deixavam de se ler como um par */
.ia-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px;max-width:60em}
.ia-opcao{
  display:flex;align-items:center;gap:18px;
  background:#fff;border:1.5px solid rgba(5,5,5,.1);border-radius:var(--raio);
  padding:22px 26px;text-align:left;font-family:var(--corpo);cursor:pointer;
  box-shadow:0 1px 2px rgba(5,5,5,.04),0 14px 34px -28px rgba(5,5,5,.3);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .22s;
  min-height:44px;
}
.ia-opcao:hover{transform:translateY(-3px);border-color:var(--pink);box-shadow:0 1px 2px rgba(5,5,5,.04),0 22px 46px -30px rgba(255,0,105,.6)}
.ia-opcao-letra{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--cream);
  font-family:var(--display);font-size:14px;font-weight:700;color:var(--tinta-2);
  flex-shrink:0;transition:background .22s,color .22s;
}
.ia-opcao:hover .ia-opcao-letra{background:var(--pink-bt);color:#fff}
.ia-opcao-texto{flex-grow:1;font-size:17px;font-weight:500;line-height:1.35;color:var(--ink)}

.ia-diag-fundo{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;flex-wrap:wrap}
.ia-texto-bt{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--corpo);font-size:14px;font-weight:500;color:var(--tinta-2);
  text-decoration:underline;text-underline-offset:4px;
}
.ia-texto-bt:hover{color:var(--ink)}
.ia-nota{font-size:14px;color:var(--tinta-3)}

/* ---------- o momento em que esta a pensar ---------- */
.ia-meio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:clamp(40px,8vw,90px) 0}
.ia-meio h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:14em;outline:none}
.ia-meio .ia-lead{margin-inline:auto}
.ia-bola-grande{
  width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#FFC2D8 30%,#FF0069 76%,#FF5900 108%);
  box-shadow:0 24px 54px -22px rgba(255,0,105,.8);
}
.a-pulsar{animation:ia-pulsar 1.9s ease-in-out infinite}
@keyframes ia-pulsar{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---------- a leitura ---------- */
.ia-res-topo{display:flex;flex-direction:column;gap:22px;max-width:44em}
.ia-res-topo h1{font-size:clamp(2.4rem,5.6vw,4.2rem);outline:none}
.ia-res-retrato{font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.62;color:rgba(5,5,5,.82)}

.ia-res-horas{display:flex;gap:22px;margin-top:44px;flex-wrap:wrap}
.ia-res-horas-ink{
  flex:0 1 392px;background:var(--ink);color:var(--cream);border-radius:var(--raio);
  padding:clamp(28px,4vw,38px) clamp(26px,3.4vw,40px);
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
.ia-res-horas-ink b{font-family:var(--display);font-size:clamp(3.4rem,8vw,5.75rem);font-weight:700;letter-spacing:-.05em;line-height:.92}
.ia-res-horas-ink p{font-size:16px;line-height:1.55;color:rgba(246,243,238,.82)}
.ia-res-horas-lime{
  flex:1 1 320px;background:var(--lime);border-radius:var(--raio);
  padding:clamp(28px,4vw,38px) clamp(26px,3.4vw,40px);
  display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0;
}
.ia-res-horas-lime .ia-etiq{color:rgba(5,5,5,.66)}
.ia-res-horas-lime .ia-etiq::before{background:rgba(5,5,5,.5)}
.ia-res-conta{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2.125rem);font-weight:700;letter-spacing:-.035em;line-height:1.12}

.ia-res-sec{margin-top:clamp(40px,5.5vw,56px);display:flex;flex-direction:column;gap:26px}

.ia-movs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.ia-mov{
  background:#fff;border-radius:var(--raio);padding:30px 32px 34px;
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px;
}
.ia-mov-n{font-family:var(--display);font-size:2.6rem;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--pink)}
.ia-mov h3{font-size:1.5rem;line-height:1.12;letter-spacing:-.03em}
.ia-mov p{font-size:15px;line-height:1.58;color:var(--tinta-2)}
.ia-mov-nota{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);margin-top:2px}

.ia-travao{
  margin-top:clamp(28px,4vw,44px);
  border:1.5px solid rgba(5,5,5,.16);border-radius:var(--raio);
  padding:32px 38px;display:flex;align-items:flex-start;gap:24px;
}
.ia-travao h3{font-size:1.5rem;line-height:1.1;letter-spacing:-.03em;margin-bottom:9px}
.ia-travao p{max-width:54em;font-size:16px;line-height:1.6;color:var(--tinta-2)}
.ia-travao-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;flex-shrink:0;
}
.ia-travao--suave{border-style:dashed;border-color:var(--risco-forte)}

.ia-percurso{
  background:#fff;border-radius:var(--raio);padding:10px 38px 16px;
  box-shadow:var(--sombra);
}
.ia-percurso li{display:flex;align-items:center;gap:20px;padding:19px 0;border-bottom:1px solid var(--risco)}
.ia-percurso li:last-child{border-bottom:none}
.ia-aula-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(5,5,5,.18);
  font-family:var(--display);font-size:13px;font-weight:700;color:var(--tinta-2);flex-shrink:0;
}
.ia-percurso li:first-child .ia-aula-n{background:var(--pink-bt);color:#fff;border-color:var(--pink-bt)}
.ia-aula-t{flex-grow:1;font-size:17px;font-weight:500;line-height:1.35}
.ia-aula-t a{border-bottom:1px solid var(--risco-forte)}
.ia-aula-t a:hover{border-bottom-color:var(--pink)}
.ia-aula-d{font-size:14px;color:var(--tinta-3);flex-shrink:0}

.ia-res-fim{
  margin-top:clamp(40px,5.5vw,56px);
  background:var(--pink);color:#fff;border-radius:var(--raio);
  padding:clamp(34px,4.5vw,48px);
  display:flex;align-items:center;gap:36px;flex-wrap:wrap;
  box-shadow:0 24px 58px -28px rgba(255,0,105,.95);
}
.ia-res-fim div{flex:1 1 320px;min-width:0}
.ia-res-fim h2{font-size:clamp(1.75rem,3.4vw,2.625rem);line-height:1.04;margin-bottom:11px}
.ia-res-fim p{max-width:34em;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9)}

.ia-rodape-aviso{margin:clamp(30px,4vw,44px) auto;font-size:13px;color:var(--tinta-3)}

/* ============================================================
   As pecas que o diagnostico de quinze perguntas trouxe:
   a linha do bloco, as perguntas de varias opcoes, as de
   escrever, e o padrao na leitura.
   ============================================================ */

/* a linha que diz para que serve o bloco que esta a comecar */
.ia-diag-bloco{
  font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.01em;line-height:1.5;color:var(--tinta-2);
  max-width:30em;margin-bottom:-4px;
}

/* ---------- a opcao ja marcada ---------- */
.ia-opcao.marcada{
  border-color:var(--pink);background:#fff;
  box-shadow:0 1px 2px rgba(5,5,5,.04),0 18px 40px -28px rgba(255,0,105,.75);
}
.ia-opcao.marcada .ia-opcao-letra{background:var(--pink-bt);color:#fff}

/* ---------- varias opcoes, por ordem de escolha ---------- */
/* O numero no circulo e a posicao em que ela marcou, nao a letra: e assim que
   se ve a olho que a primeira e a que mais pesa. */
.ia-opcao--varias .ia-opcao-letra{font-size:15px}
.ia-opcao--varias.cheia{opacity:.42;cursor:not-allowed}
.ia-opcao--varias.cheia:hover{transform:none;border-color:rgba(5,5,5,.1);box-shadow:0 1px 2px rgba(5,5,5,.04),0 14px 34px -28px rgba(5,5,5,.3)}

.ia-diag-segue{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}
.ia-diag-segue .ia-bt[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.ia-conta-marcadas{font-size:14px;color:var(--tinta-3)}

/* ---------- escrever com as palavras dela ---------- */
.ia-escrita{margin-top:30px;max-width:46em}
.ia-escrita textarea{
  display:block;width:100%;resize:vertical;
  background:#fff;border:1.5px solid rgba(5,5,5,.1);border-radius:var(--raio);
  padding:22px 24px;
  font-family:var(--corpo);font-size:17px;line-height:1.6;color:var(--ink);
  box-shadow:0 1px 2px rgba(5,5,5,.04),0 14px 34px -28px rgba(5,5,5,.3);
  transition:border-color .22s,box-shadow .22s;
}
.ia-escrita textarea::placeholder{color:var(--tinta-3)}
.ia-escrita textarea:focus{
  outline:none;border-color:var(--pink);
  box-shadow:0 1px 2px rgba(5,5,5,.04),0 20px 44px -30px rgba(255,0,105,.6);
}
.ia-escrita-fundo{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;flex-wrap:wrap}
.ia-escrita-bts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ia-conta-letras{font-size:14px;color:var(--tinta-3)}

/* ---------- o padrao, na leitura ---------- */
/* Fica em caixa escura de proposito: e a parte da leitura que mais lhe diz
   respeito, e tem de pesar mais do que o resto na pagina. */
.ia-padrao{
  margin-top:clamp(32px,4.5vw,46px);
  background:var(--ink);color:var(--cream);border-radius:var(--raio);
  padding:clamp(30px,4vw,44px) clamp(28px,3.6vw,48px);
  display:flex;flex-direction:column;gap:14px;max-width:50em;
}
.ia-padrao .ia-etiq{color:rgba(246,243,238,.6)}
.ia-padrao .ia-etiq::before{background:var(--pink)}
.ia-padrao h2{font-size:clamp(1.6rem,3.2vw,2.375rem);line-height:1.06;letter-spacing:-.035em}
.ia-padrao p{font-size:16px;line-height:1.62;color:rgba(246,243,238,.84)}

/* a linha a dizer porque e que aquela aula e para ela */
.ia-aula-t{display:flex;flex-direction:column;gap:4px}
.ia-aula-porque{font-size:14px;line-height:1.5;font-weight:400;color:var(--tinta-3)}

@media(max-width:700px){
  .ia-opcoes{grid-template-columns:1fr}
  .ia-diag-segue{flex-direction:column;align-items:stretch;gap:12px}
  .ia-diag-segue .ia-conta-marcadas{text-align:center}
  .ia-escrita-fundo{flex-direction:column-reverse;align-items:stretch;gap:14px}
  .ia-escrita-bts{justify-content:space-between}
}

@media(max-width:760px){
  .ia-barra{top:97px}
  .ia-diag-numero{display:none}
  .ia-travao{padding:26px 24px;gap:16px}
  .ia-percurso{padding:6px 24px 12px}
}