/* COMEÇO (co) — "E depois que eu respondo?" · versão 3
   A porta fica no centro. À esquerda dela, o que acontece antes de entrar (a conversa e o botão);
   à direita, o que acontece lá dentro. Os passos saem do anel como os rótulos da figura do hero:
   ponto, fio (que faz as vezes do travessão) e a voz do visitante. */
.co-topo{text-align:center}
.co-topo .s-pergunta{justify-content:center}
.co-topo .s-titulo{margin-top:.16em}
/* a pergunta de abertura repete o que o visitante respondeu no hero */
.co-q{text-wrap:balance}
body:not(.respondeu) .co-q-sim,body.respondeu .co-q-nao{display:none}
.co-q-eco.nova span{animation:co-escreve .6s var(--curva)}
@keyframes co-escreve{from{opacity:0}}

.co-palco{--larg:clamp(272px,27vw,380px);--alt:calc((var(--larg) - 12px)*92/62 + 12px);--vao:clamp(40px,4.4vw,64px);--lin:14px;--y1:.27;--y2:.71;
  display:grid;grid-template-columns:minmax(0,1fr) var(--larg) minmax(0,1fr);column-gap:var(--vao);align-items:start;margin-top:clamp(58px,6.4vw,92px)}
.co-palco>*{min-width:0}

/* a porta: a cápsula do hero, agora com ela dentro */
.co-porta{grid-column:2;grid-row:1;position:relative;margin:0}
.co-porta::before,.co-porta::after{content:"";position:absolute;z-index:-1;inset:-9% -78% -13%;border-radius:50%;pointer-events:none;filter:blur(34px)}
.co-porta::before{background:radial-gradient(closest-side,var(--menta),transparent)}
.co-porta::after{background:radial-gradient(closest-side,var(--morno),transparent);opacity:0;transition:opacity 1.4s ease}
body.respondeu .co-porta::after{opacity:.62}
.co-porta-anel{border-radius:999px;padding:6px;background:var(--anel);box-shadow:var(--sombra)}
.co-porta-anel img{width:100%;height:auto;aspect-ratio:62/92;object-fit:cover;object-position:62% 50%;border-radius:999px;border:4px solid var(--papel)}
.co-porta-etq{position:absolute;left:50%;top:-13px;transform:translateX(-50%);z-index:2;white-space:nowrap;background:var(--tinta);color:var(--luz);border-radius:999px;padding:6px 16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.co-porta-leg{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);z-index:2;white-space:nowrap;background:var(--papel);border:1px solid var(--fio);border-radius:999px;padding:5px 15px;font-size:12.5px;color:var(--tinta-2)}

/* a voz dela, embaixo do rosto dela */
.co-cita{grid-column:2;grid-row:2;margin:46px 0 0;text-align:center}
.co-cita p{font-family:var(--titulo);font-style:italic;font-size:clamp(21px,1.75vw,25px);line-height:1.18;color:var(--tinta);text-wrap:balance}
.co-cita footer{margin-top:12px;font-size:13.5px;line-height:1.4;color:var(--tinta-2);text-wrap:balance}

/* os passos, cada um preso a um ponto do anel */
.co-antes{grid-column:1;grid-row:1 / span 2;padding-top:calc(var(--alt)*var(--y1) - var(--lin))}
.co-dentro{grid-column:3;grid-row:1 / span 2;display:grid;grid-template-rows:calc(var(--alt)*var(--y1) - var(--lin)) minmax(calc(var(--alt)*(var(--y2) - var(--y1))),auto) auto}
.co-p2{grid-row:2;padding-bottom:26px}
.co-p3{grid-row:3}
.co-e{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--titulo);font-style:italic;font-size:clamp(22px,1.75vw,25px);line-height:1.15;color:var(--rede)}
.co-e span{flex:none}
.co-antes .co-e::before{content:"—";font-style:normal;color:var(--tinta);opacity:.35}
.co-passo h3{font-family:var(--titulo);font-weight:400;font-size:clamp(27px,2.5vw,36px);line-height:1.04;letter-spacing:-.015em;margin-top:.3em;text-wrap:balance}
.co-p{margin-top:12px;color:var(--tinta-2)}
.co-eco{margin-top:18px;font-size:17px;line-height:1.25;font-weight:500;color:var(--tinta)}
.co-eco em{font-style:normal;font-weight:600}
body.respondeu .co-eco em{font-family:var(--titulo);font-style:italic;font-weight:400;font-size:1.36em;color:var(--rede)}
.co-passo .botao{margin-top:18px}
.co-nota{margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--tinta-2)}
.co-num{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--fio);font-size:14px;line-height:1.35;color:var(--tinta-2)}
.co-num b{font-family:var(--titulo);font-weight:400;font-size:30px;line-height:1;color:var(--tinta);white-space:nowrap}

/* o fio e o ponto no anel */
.co-fio{display:block;height:1px;background:linear-gradient(rgb(16 48 42 / .55),rgb(16 48 42 / .55)) no-repeat;background-size:100% 100%;transition:background-size .9s var(--curva) calc(var(--atraso,0s) + .35s)}
.co-fio::after,.co-fio::before{content:"";position:absolute;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;box-sizing:border-box}
.co-fio::after{background:radial-gradient(circle,var(--agua) 0 2.4px,var(--papel) 3.2px);border:1.5px solid var(--tinta);transition:transform .5s var(--curva) calc(var(--atraso,0s) + .2s),background-color .4s,border-color .4s}
.co-fio::before{border:1.5px solid var(--rede);opacity:0}
.co-antes .co-fio{position:relative;flex:1;--recuo:calc(var(--larg)*.011);margin-right:calc((var(--vao) + 3px + var(--recuo))*-1);background-position:100% 0}
.co-antes .co-fio::after,.co-antes .co-fio::before{right:-7.5px}
.co-dentro .co-fio{position:absolute;top:50%;right:calc(100% + 12px);width:calc(var(--vao) - 9px + var(--recuo,0px));background-position:0 0}
.co-p2 .co-fio{--recuo:calc(var(--larg)*.011)}
.co-p3 .co-fio{--recuo:calc(var(--larg)*.005)}
.co-dentro .co-fio::after,.co-dentro .co-fio::before{left:-7.5px}
.js .co-passo:not(.visto) .co-fio{background-size:0% 100%}
.js .co-passo:not(.visto) .co-fio::after{transform:scale(0)}
/* a resposta do hero esquenta o primeiro ponto */
body.respondeu .co-p1 .co-fio::after{background:var(--rede);border-color:var(--parede)}
body.respondeu .co-p1.visto .co-fio::before{animation:co-halo 2s ease-out infinite 1.4s}
@keyframes co-halo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* notebook e tablet deitado: colunas estreitas, os pontos de cima sobem para o treino caber antes da aula */
@media (min-width:1000px) and (max-width:1179px){
  .co-palco{--y1:.2;--y2:.74}
  .co-antes .co-fio,.co-p2 .co-fio{--recuo:calc(var(--larg)*.045)}
  .co-p3 .co-fio{--recuo:calc(var(--larg)*.012)}
  .co-p{font-size:16px}
}
@media (max-width:999px){
  .co-topo{text-align:left;max-width:560px;margin-inline:auto}
  .co-topo .s-pergunta{justify-content:flex-start}
  .co-p2{padding-bottom:0}
  .co-palco{display:block;max-width:560px;margin-inline:auto;margin-top:48px}
  .co-porta{width:min(100%,290px);margin-inline:auto}
  .co-porta::before,.co-porta::after{inset:-6% -9% -8%;filter:blur(24px)}
  .co-cita{margin-top:40px}
  .co-lado{display:block;padding-top:0}
  .co-passo{margin-top:44px;--atraso:.05s!important}
  .co-antes .co-e::before{content:none}
  .co-fio,.co-antes .co-fio,.co-dentro .co-fio{position:relative;top:auto;right:auto;order:-1;flex:none;width:38px;margin:0;background-position:0 0}
  .co-fio::after,.co-fio::before,.co-antes .co-fio::after,.co-antes .co-fio::before,.co-dentro .co-fio::after,.co-dentro .co-fio::before{left:0;right:auto}
  .co-passo .botao{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .co-fio,.co-fio::after,.co-porta::after{transition:none}
  .co-q-eco.nova span,body.respondeu .co-p1.visto .co-fio::before{animation:none}
}