/* HERO — hipótese E aprovada (rodada 3). Classes sem prefixo: reservadas, não reutilizar nas seções. */
.abre{position:relative;overflow:clip;background:var(--papel)}
.fundo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--papel)}
.fundo i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.fundo i:nth-child(1){width:64vmax;height:64vmax;right:-18vmax;top:-22vmax;background:radial-gradient(circle in oklch, oklch(0.92 0.05 172) 0%, transparent 66%);animation:deriva 32s ease-in-out infinite alternate}
.fundo i:nth-child(2){width:56vmax;height:56vmax;left:-20vmax;bottom:-26vmax;background:radial-gradient(circle in oklch, oklch(0.93 0.035 140) 0%, transparent 66%);animation:deriva 40s ease-in-out infinite alternate-reverse}
.fundo i:nth-child(3){width:40vmax;height:40vmax;left:24vmax;top:10vmax;background:radial-gradient(circle in oklch, oklch(0.95 0.05 80) 0%, transparent 64%);opacity:.8;animation:deriva 26s ease-in-out infinite alternate}
@keyframes deriva{to{transform:translate(5vmax,4vmax) scale(1.1)}}

.topo{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--margem) 0}
.marca{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.marca b{font-family:var(--titulo);font-weight:400;font-size:25px}
.marca span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-2);white-space:nowrap}
.topo nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.topo nav a{text-decoration:none;opacity:.8}
.topo nav a:hover{opacity:1}

.hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(20px,4vw,76px);align-items:center;min-height:calc(100svh - 66px);padding:clamp(14px,2.6vh,30px) var(--margem) clamp(20px,3.6vh,40px)}
.hero>*{min-width:0}

/* a luz morna da página acorda quando alguém marca um ponto */
.fundo i:nth-child(3){transition:opacity 1.2s ease, scale 1.6s cubic-bezier(.2,.8,.2,1);opacity:.55}
body.respondeu .fundo i:nth-child(3){opacity:1;scale:1.5}

/* ---------- ela pergunta ---------- */
.rotulo{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--agua);display:flex;align-items:center;gap:10px}
.rotulo::before{content:"";width:30px;height:1.5px;background:currentColor}
.fala{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.8vw,28px);align-items:start;margin-top:clamp(14px,2.6vh,28px)}
.anel{position:relative;width:clamp(84px,10.4vw,158px);aspect-ratio:1;border-radius:50%;padding:5px;background:conic-gradient(from 210deg in oklch, var(--agua), var(--agua-2), oklch(0.8 0.08 150), var(--agua));box-shadow:0 24px 44px -26px rgb(16 48 42 / .6);margin-top:.5vw}
.anel img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 28%;border:4px solid var(--papel)}
.quem{font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.35;color:var(--tinta-2)}
.quem b{font-weight:700;color:var(--tinta)}
h1{font-family:var(--titulo);font-style:italic;font-weight:400;font-size:clamp(46px,7.1vw,116px);line-height:.9;letter-spacing:-.024em;margin-top:.08em}
h1 span{display:block;white-space:nowrap}
h1 i{font-style:normal;color:var(--rede)}

/* ---------- você responde (escrito pelos toques na figura) ---------- */
.resposta{grid-column:2;display:flex;align-items:baseline;gap:.5em;margin-top:clamp(12px,2.2vh,24px);font-family:var(--titulo);font-style:italic;font-size:clamp(24px,2.9vw,46px);line-height:1.08;color:var(--rede);min-height:1.3em}
.resposta::before{content:"—";font-style:normal;color:var(--tinta);opacity:.35}
.resposta span{text-wrap:balance}
.resposta.vazia span{color:rgb(16 48 42 / .34)}
.resposta.vazia span::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:.12em;background:var(--rede);vertical-align:-.08em;animation:pisca 1.1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.resposta.nova span{animation:escreve .5s cubic-bezier(.2,.8,.2,1)}
@keyframes escreve{from{opacity:0;transform:translateY(.25em)}}

.apoio{max-width:33em;margin-top:clamp(10px,1.8vh,18px);font-size:clamp(16px,1.18vw,18px);color:var(--tinta-2)}
.apoio strong{color:var(--tinta);font-weight:600}
.acoes{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:clamp(14px,2.4vh,24px)}
.provas{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin-top:clamp(16px,3vh,32px);padding-top:16px;border-top:1.5px solid rgb(16 48 42 / .12);font-size:13.5px;line-height:1.35;color:var(--tinta-2);gap:10px 0;max-width:46em}
.provas li{padding-right:22px;margin-right:22px;border-right:1px solid rgb(16 48 42 / .14)}
.provas li:last-child{border:0;margin:0;padding:0}
.provas b{display:block;font-family:var(--titulo);font-weight:400;font-size:21px;color:var(--tinta)}
.provas .est{color:var(--rede);letter-spacing:.08em;font-size:13px;margin-left:6px;vertical-align:2px}

/* ---------- a figura dentro do anel, como no logo dela ---------- */
.quadro{position:relative;justify-self:end;width:min(100%,400px);height:min(82svh,700px);border-radius:999px;padding:6px;background:conic-gradient(from 150deg in oklch, var(--agua), var(--agua-2) 30%, oklch(0.82 0.07 150) 55%, var(--agua) 80%, var(--agua));box-shadow:0 50px 90px -50px rgb(16 48 42 / .55)}
.quadro .miolo{position:absolute;inset:6px;border-radius:999px;overflow:hidden;background:
  radial-gradient(60% 40% at 50% 38% in oklch, rgb(255 255 255 / .95), transparent 70%),
  linear-gradient(rgb(27 143 126 / .07) 1px, transparent 1px) 0 0/100% 30px,
  linear-gradient(180deg in oklch, #f8f6ef, #e4f1ea 55%, #f3efe4);transition:background-color .8s}
.quadro .miolo::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 45% in oklch, oklch(0.93 0.07 70 / .9), transparent 75%);opacity:0;transition:opacity 1s}
body.respondeu .quadro .miolo::after{opacity:1}
.quadro .titulo{position:absolute;left:50%;top:-13px;transform:translateX(-50%);white-space:nowrap;background:var(--tinta);color:#f6f3ea;border-radius:999px;padding:6px 16px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;z-index:2}
.quadro .dica{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);white-space:nowrap;background:var(--papel);border:1px solid rgb(16 48 42 / .14);border-radius:999px;padding:4px 14px;font-size:12px;color:var(--tinta-2);z-index:2}
.quadro svg{position:absolute;left:50%;top:50%;height:80%;transform:translate(-50%,-50%);overflow:visible;z-index:1}
.contorno{fill:none;stroke:var(--tinta);stroke-width:1.500;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:desenha 2.2s cubic-bezier(.4,0,.2,1) forwards .3s}
@keyframes desenha{to{stroke-dashoffset:0}}
.pele{opacity:0;animation:surge 1.2s ease forwards 1.5s}
@keyframes surge{to{opacity:1}}
.vertebra{fill:var(--agua);opacity:0;animation:empilha .5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(1.7s + var(--i)*60ms);transform-box:fill-box;transform-origin:50% 50%}
@keyframes empilha{from{opacity:0;transform:translateY(8px) scale(.4)}to{opacity:.9;transform:none}}
.calor{opacity:0;transition:opacity .7s}
.calor.on{opacity:1}
.ponto{cursor:pointer;outline:none;opacity:0;animation:surge .5s ease forwards;animation-delay:calc(2.2s + var(--i)*45ms)}
.ponto .alvo{fill:transparent}
.ponto .anelp{fill:var(--papel);stroke:var(--tinta);stroke-width:1.500;transition:fill .3s,stroke .3s}
.ponto .halo{fill:none;stroke:var(--rede);stroke-width:1.500;opacity:0}
.ponto:hover .anelp,.ponto:focus-visible .anelp{stroke:var(--rede);stroke-width:2.500}
.ponto.on .anelp{fill:var(--rede);stroke:#fff}
.ponto.on .halo{animation:halo 2s ease-out infinite}
@keyframes halo{0%{opacity:.7;r:8px}100%{opacity:0;r:26px}}
.ponto .fio{stroke:var(--tinta);stroke-width:1;opacity:0;transition:opacity .3s}
.ponto text{font-family:var(--texto);font-size:13px;font-weight:600;fill:var(--tinta);opacity:0;transition:opacity .3s;paint-order:stroke;stroke:rgb(255 255 255 / .9);stroke-width:4px;stroke-linejoin:round}
.ponto.on text,.ponto:hover text,.ponto:focus-visible text,.ponto.on .fio,.ponto:hover .fio,.ponto:focus-visible .fio{opacity:1}
.ponto.convida .halo{animation:halo 2s ease-out 3}


@media (max-width:900px){
  .topo nav{display:none}
  .marca{flex-direction:column;gap:2px}
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0;padding-top:14px}
  .lado{display:contents}
  .rotulo{order:1;font-size:11px;letter-spacing:.16em}
  .fala{order:2;margin-top:14px;column-gap:14px}
  .anel{width:74px;margin-top:2px;padding:4px}
  .anel img{border-width:3px}
  h1{font-size:clamp(38px,12vw,58px);line-height:.94}
  .resposta{display:none}
  .quadro{order:3;width:min(100%,318px);height:500px;align-self:center;margin-top:30px}
  .quadro svg{height:84%}
  .ponto text{font-size:17px}
  .resposta.cel{order:4;display:flex;grid-column:auto;font-size:27px;margin-top:26px;min-height:2.3em}
  .acoes{order:5;margin-top:12px}
  .apoio{order:6;margin-top:18px}
  .provas{order:7}
  .provas{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .provas li{border:0;padding:0;margin:0}
  .botao{width:100%;justify-content:center}
}
@media (min-width:901px){.resposta.cel{display:none}}
@media (prefers-reduced-motion:reduce){
  .entra,.fundo i,.resposta.vazia span::after,.resposta.nova span{animation:none}
  .contorno{animation:none;stroke-dashoffset:0}
  .pele,.vertebra,.ponto{animation:none;opacity:1}
  .ponto.on .halo,.ponto.convida .halo{animation:none}
}