:root{
  --rosa-bg:#fde4ec; --rosa-claro:#fff3f7; --rosa:#d6407a; --vinho:#7a1a40;
  --rosa-medio:#c9507f; --texto:#4a3a44; --borda:#f4c3d3;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--texto); min-height:100vh; min-height:100dvh;
  background:radial-gradient(120% 60% at 100% 0%,#fff 0%,transparent 55%),linear-gradient(180deg,#ffeaf1 0%,var(--rosa-bg) 100%);
  display:flex; justify-content:center;
  padding:max(28px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom));
}
.page{width:100%;max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center}

.avatar{
  width:clamp(170px,52vw,230px);aspect-ratio:1;border-radius:50%;padding:5px;
  background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.55),0 14px 34px rgba(214,64,122,.28);
}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

.divider{display:flex;align-items:center;gap:12px;width:100%;margin:22px 0 14px;color:var(--rosa)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--borda))}
.divider::after{transform:scaleX(-1)}
.divider span{font-size:18px}
.divider.fim{margin:26px 0 0}

h1{font-weight:800;font-size:clamp(28px,8.4vw,38px);line-height:1.08;color:var(--vinho);letter-spacing:.01em}
h1 em{font-style:normal;color:var(--rosa-medio)}
.sub{margin-top:14px;font-size:clamp(16px,4.6vw,19px);line-height:1.4;font-weight:600;max-width:34ch}

.vagas{
  margin-top:22px;width:100%;display:flex;justify-content:center;align-items:center;gap:10px;
  padding:14px 12px;background:var(--rosa-claro);border:1.5px solid var(--borda);border-radius:16px;
  color:var(--vinho);font-size:clamp(14px,4.2vw,17px);
}
.contador{margin-top:12px;width:100%;font-weight:700;font-size:15px;color:var(--vinho)}
.contador b{color:var(--rosa);font-size:19px;display:inline-block}
.contador b.tick{animation:tick .5s}
.barra{margin-top:8px;height:9px;border-radius:9px;background:#fff;border:1px solid var(--borda);overflow:hidden}
.barra i{display:block;height:100%;width:80%;border-radius:9px;background:linear-gradient(90deg,#ff7aa8,var(--rosa));transition:width .6s ease}

/* BOTÃO */
.cta{
  position:relative;overflow:hidden;margin-top:20px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:20px 18px;border-radius:999px;text-decoration:none;color:#fff;
  font-weight:800;font-size:clamp(19px,5.4vw,23px);letter-spacing:.04em;
  background:linear-gradient(180deg,#e2558c 0%,#b82a62 100%);
  box-shadow:0 8px 0 #8e1d4b,0 16px 28px rgba(184,42,98,.45);
  animation:pulse 1.6s ease-in-out infinite, shake 5s ease-in-out 2s infinite;
  transition:transform .12s, box-shadow .12s;
  -webkit-user-select:none;user-select:none;
}
.cta-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.8);flex:none}
.shine{
  position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:shine 2.6s ease-in-out infinite;pointer-events:none;
}
.cta:hover{filter:brightness(1.06)}
.cta:active,.cta.press{
  transform:translateY(7px) scale(.98);box-shadow:0 1px 0 #8e1d4b,0 6px 12px rgba(184,42,98,.4);
  animation:none;
}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--rosa),0 8px 0 #8e1d4b}

.card{
  margin-top:30px;width:100%;background:var(--rosa-claro);border:1.5px solid var(--borda);
  border-radius:20px;overflow:hidden;box-shadow:0 10px 26px rgba(214,64,122,.12);
}
.card>p{padding:22px 20px;font-weight:700;font-size:clamp(15px,4.2vw,17px);line-height:1.45}
.prova{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#ffe9f0;text-align:left;font-weight:600;font-size:clamp(15px,4.4vw,18px);line-height:1.25;color:var(--texto)}
.prova strong{font-size:clamp(20px,6vw,25px);color:var(--vinho);font-weight:800}
.gem{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:50%;color:#fff;background:linear-gradient(180deg,#e2558c,#b82a62);box-shadow:0 6px 14px rgba(184,42,98,.35)}

/* corações ao clicar */
#hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.heart{position:absolute;bottom:0;will-change:transform,opacity;animation:up var(--d) ease-out forwards}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
@keyframes shake{0%,88%,100%{translate:0}90%{translate:-5px}92%{translate:5px}94%{translate:-4px}96%{translate:4px}98%{translate:-2px}}
@keyframes tick{0%{transform:scale(1)}40%{transform:scale(1.5);color:#e0245e}100%{transform:scale(1)}}
@keyframes up{0%{transform:translate(0,0) scale(.5) rotate(0);opacity:1}100%{transform:translate(var(--x),-95vh) scale(var(--s)) rotate(var(--r));opacity:0}}

@media (min-width:700px){.page{padding-top:20px}}
@media (prefers-reduced-motion:reduce){
  .cta,.shine,.contador b.tick{animation:none}
  .heart{display:none}
}