/* O quiz do presente e o guia de ideias (paginas/ideias-de-presente-de-aniversario-de-namoro.html, js/quiz.js).
   Por cima de 14-calculadora (a capa de céu e o .cc-cta são os mesmos). O quiz é um cartão de papel no céu,
   como o formulário da calculadora; as respostas são adesivos grandes que dá para tocar com o polegar. */

/* ---------- o cartão do quiz ---------- */
.qz-cartao{display:grid; gap:14px; width:min(480px,100%); margin-top:8px; padding:20px; border-radius:22px; background:var(--superficie); color:var(--tinta); text-align:left; box-shadow:0 24px 50px -24px rgb(26 16 36/.75)}
.qz-pontos{display:flex; gap:6px}
.qz-pontos i{flex:1; height:5px; border-radius:99px; background:var(--linho); transition:background-color .3s var(--ease-padrao)}
.qz-pontos i.feito{background:var(--malva)}
.qz-pontos i.on{background:var(--coral)}
.qz-caixa{display:grid; gap:12px}
.qz-pergunta{font-family:var(--f-display); font-size:clamp(22px,4.6vw,26px); line-height:1.15; font-variation-settings:"SOFT" 100}
.qz-opcoes{display:grid; gap:8px}
.qz-opcao{display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 16px; border:0; border-radius:14px; background:var(--pergaminho); box-shadow:inset 0 0 0 1px var(--areia); color:var(--tinta); font-family:var(--f-ui); font-size:16px; font-weight:700; text-align:left; cursor:pointer; transition:transform .15s var(--ease-suave),box-shadow .2s var(--ease-padrao),background-color .2s var(--ease-padrao)}
.qz-opcao::after{content:"→" / ""; color:var(--pedra); transition:transform .2s var(--ease-suave)}
.qz-opcao:hover{background:var(--damasco-nevoa); box-shadow:inset 0 0 0 1.5px var(--coral)}
.qz-opcao:hover::after{transform:translateX(3px); color:var(--coral)}
.qz-opcao:active{transform:scale(.98)}
.entra .qz-pergunta{animation:cc-sobe .45s var(--ease-saida) both}
.entra .qz-opcao{animation:cc-sobe .45s var(--ease-saida) both; animation-delay:calc(80ms + var(--i) * 50ms)}
.qz-volta{justify-self:start; border:0; background:none; padding:4px 0; color:var(--pedra); font-weight:700; font-size:14px; cursor:pointer}
.qz-fim{display:grid; gap:12px}

/* ---------- o resultado ---------- */
.qz-saida{max-width:860px; padding-top:clamp(40px,7vw,72px); scroll-margin-top:64px}
.qz-saida > h2{font-size:clamp(28px,5vw,44px); line-height:1.08; letter-spacing:-.015em; text-align:center}
.qz-saida [data-quiz-para]{color:var(--malva)}
.qz-ideias{display:grid; gap:14px; margin:24px 0 0; padding:0; list-style:none}
.qz-ideia{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px; border-radius:18px; background:var(--superficie); box-shadow:var(--sombra-borda-forte)}
.qz-n{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--ceu); color:#FDFDFA; font-size:24px}
.qz-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.qz-tags .adesivo,.gi-tags .adesivo{font-size:12px; padding:4px 10px}
.qz-ideia h3{font-size:clamp(20px,3.4vw,24px); line-height:1.15}
.qz-ideia p{margin-top:8px; font-size:16px; line-height:1.55; color:var(--grafite)}
.play .qz-ideia{animation:cc-cola .6s var(--ease-mola) both; animation-delay:calc(.15s + var(--i) * 140ms)}

.qz-entrega{display:grid; gap:24px; align-items:center; margin-top:32px; padding:clamp(22px,4vw,34px); border-radius:22px; background:var(--superficie); box-shadow:var(--sombra-borda-forte); background-image:radial-gradient(circle at 0 0,var(--lavanda-nevoa),transparent 55%)}
@media (min-width:700px){.qz-entrega{grid-template-columns:auto 1fr}}
.qz-entrega-arte{display:grid; place-items:center}
.qz-etiqueta{width:160px; height:auto; rotate:-5deg; filter:drop-shadow(0 1px 0 rgb(29 29 28/.08)) drop-shadow(0 16px 24px rgb(26 16 36/.28))}
.play .qz-etiqueta{animation:qz-balanca 1.4s var(--ease-mola) .7s both}
@keyframes qz-balanca{0%{opacity:0; rotate:-30deg; translate:0 -20px} 60%{opacity:1; rotate:4deg} 100%{rotate:-5deg}}
.qz-entrega-texto{display:grid; gap:12px; justify-items:start}
.qz-entrega-texto .adesivo{rotate:-2deg}
.qz-entrega-texto h3{font-size:clamp(24px,3.8vw,32px); line-height:1.1}
.qz-entrega-texto p{font-size:16px; line-height:1.6; color:var(--grafite)}
.qz-compartilha{margin-top:18px; text-align:center}
.qz-link{border:0; background:none; font:inherit; font-size:15px; cursor:pointer; text-decoration:underline}

/* ---------- o guia ---------- */
.gi-grupo{margin-top:28px; font-size:22px}
.gi-lista{display:grid; gap:12px; margin-top:14px}
@media (min-width:700px){.gi-lista{grid-template-columns:1fr 1fr}}
.gi-ideia{display:grid; align-content:start; gap:8px; padding:18px; border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda); scroll-margin-top:84px}
.gi-ideia h3,.gi-ideia h4{font-size:20px; line-height:1.2}
.gi-ideia p{font-size:15px; line-height:1.55; color:var(--grafite)}
.gi-amorama{box-shadow:0 0 0 2px var(--mel),var(--sombra-borda)}

@media (prefers-reduced-motion:reduce){
  .entra .qz-pergunta,.entra .qz-opcao,.play .qz-ideia,.play .qz-etiqueta{animation:none}
}