/* A calculadora de namoro (paginas/quantos-dias-de-namoro.html e as de marco; js/calculadora.js).
   Tem que ter a cara do livro, não de ferramenta: céu na capa, o número grande em Fraunces, adesivos
   que entram um a um e, no fim, uma página do livro de verdade (porte de amorama/app/livro.css e
   paginas.css, .pt-pg-nums), inclinada como um objeto em cima da mesa. */

/* ---------- capa ---------- */
.cc-capa{position:relative; overflow:hidden; padding:clamp(36px,7vw,80px) 0 clamp(40px,7vw,72px); border-radius:0 0 28px 28px}
.cc-sol{position:absolute; left:50%; bottom:-58%; width:min(620px,130vw); aspect-ratio:1; translate:-50% 0; border-radius:50%; background:radial-gradient(circle at 50% 40%,#FFD89A,#FFB070 45%,rgb(242 115 95/0) 70%); opacity:.55; pointer-events:none; animation:cc-nasce 2.4s var(--ease-saida) both}
@keyframes cc-nasce{from{translate:-50% 18%; opacity:0}}
.cc-capa-corpo{position:relative; z-index:1; display:grid; gap:16px; justify-items:center; text-align:center; max-width:760px}
.cc-capa h1{font-size:clamp(34px,6.6vw,62px); line-height:1.04; letter-spacing:-.02em}
.cc-resposta{font-family:var(--f-display); font-size:clamp(26px,4.4vw,38px); line-height:1.1; color:var(--mel)}
.cc-resposta b{font-weight:400}
.cc-chamada{font-size:15px; font-weight:700; color:rgb(253 253 250/.8)}

/* ---------- o formulário: papel em cima do céu ---------- */
.cc-form{display:grid; gap:12px; width:min(440px,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)}
.cc-rotulo{font-size:15px; font-weight:800}
.cc-data{width:100%; height:58px; padding:0 16px; border-radius:14px; border:1px solid var(--areia); background:var(--pergaminho); color:var(--tinta); font-family:var(--f-display); font-size:22px; font-variation-settings:"SOFT" 100}
.cc-data:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent}
.cc-nomes summary{cursor:pointer; font-size:14px; font-weight:700; color:var(--pedra); list-style:none}
.cc-nomes summary::before{content:"+ "; font-weight:800}
.cc-nomes[open] summary::before{content:"− "}
.cc-nomes-campos{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:10px}
.cc-nomes-campos input{min-width:0; height:46px; padding:0 12px; border-radius:12px; border:1px solid var(--areia); background:var(--pergaminho); font:inherit; font-size:16px}
.cc-nomes-campos span{font-family:var(--f-display); font-size:22px; color:var(--malva)}
.cc-contar{width:100%; height:54px; background:var(--tinta); color:#FDFDFA; font-size:17px; box-shadow:0 10px 22px -12px rgb(26 16 36/.8)}

/* ---------- a revelação ---------- */
.cc-saida{scroll-margin-top:64px}
.cc-revela{display:grid; justify-items:center; text-align:center; padding-top:clamp(40px,7vw,72px)}
.cc-nomes-r{font-size:16px; font-weight:800; color:var(--malva); letter-spacing:.01em}
.cc-total{margin-top:4px; font-size:clamp(88px,24vw,200px); line-height:.9; letter-spacing:-.04em; background:linear-gradient(180deg,#3B2150,#8E5C88 55%,#F2735F); -webkit-background-clip:text; background-clip:text; color:transparent; font-variation-settings:"SOFT" 100,"WONK" 0}
.cc-total-rot{margin-top:6px; font-size:clamp(28px,5vw,40px); line-height:1.1}
.cc-desde{margin-top:10px; font-size:16px; color:var(--grafite)}
.cc-adesivos{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin:26px 0 0; padding:0; list-style:none; max-width:560px}
.cc-adesivos li{rotate:var(--r); filter:var(--adesivo)}
.cc-adesivos .adesivo{font-size:15px}
.adesivo.branco{background:#fff}
.adesivo.tinta-ad{background:var(--tinta); color:#FDFDFA}
.play .cc-adesivos li{animation:cc-cola .6s var(--ease-mola) both; animation-delay:calc(1.2s + var(--i) * 140ms)}
@keyframes cc-cola{from{opacity:0; scale:.6; translate:0 14px}}
.play .cc-revela > p{animation:cc-sobe .7s var(--ease-saida) both}
.play .cc-revela > .cc-desde{animation-delay:.5s}
@keyframes cc-sobe{from{opacity:0; translate:0 12px}}

/* ---------- a página do livro ---------- */
.cc-livro{display:grid; gap:clamp(28px,5vw,56px); align-items:center; margin-top:clamp(48px,8vw,88px)}
@media (min-width:860px){.cc-livro{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}}
.cc-pagina{margin:0; display:grid; justify-items:center; gap:18px; perspective:1600px}
.cc-folha{--pg:clamp(12.5px,3.5vw,17px); --pf:#1A1024; --pf2:#3B2150; --pa:#FFD89A; position:relative; width:min(330px,84vw); aspect-ratio:3/4.1; border-radius:calc(var(--pg)*.33) calc(var(--pg)*1.17) calc(var(--pg)*1.17) calc(var(--pg)*.33); background:var(--pf); color:#FDFDFA; box-shadow:0 calc(var(--pg)*1.83) calc(var(--pg)*3) calc(var(--pg)*-1.83) rgb(26 16 36/.65),-6px 0 0 -1px #EDEAE4,-11px 2px 0 -2px #D8D6CE; transform:rotateY(-14deg) rotateX(5deg) rotate(-2deg); transition:transform .8s var(--ease-suave)}
.cc-pagina:hover .cc-folha{transform:rotateY(-4deg) rotateX(2deg) rotate(-1deg)}
.cc-folha-in{position:absolute; inset:0; border-radius:inherit; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:calc(var(--pg)*1.5) calc(var(--pg)*1.5) calc(var(--pg)*1.33) calc(var(--pg)*2); background:radial-gradient(130% 75% at 85% -10%,var(--pf2),var(--pf) 65%); text-align:left}
.cc-folha-in::before{content:""; position:absolute; z-index:6; left:0; top:0; bottom:0; width:calc(var(--pg)*1.33); background:linear-gradient(90deg,rgb(0 0 0/.24),transparent); pointer-events:none}
.cc-folha-in::after{content:""; position:absolute; z-index:6; inset:0; background-image:var(--grain); opacity:.16; mix-blend-mode:overlay; pointer-events:none}
.cc-leg{position:relative; z-index:2; font-size:calc(var(--pg)*.92); font-weight:800; color:var(--pa)}
.cc-tit{position:relative; z-index:2; font-family:var(--f-display); font-variation-settings:"SOFT" 100; font-size:calc(var(--pg)*2.1); line-height:1.08; letter-spacing:-.015em}
.cc-nums{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--pg)*.67); flex:1; min-height:0; margin-top:calc(var(--pg)*.33)}
.cc-num{display:grid; align-content:end; padding:calc(var(--pg)*.83); border-radius:var(--pg); background:var(--c); color:var(--tinta)}
.cc-num b{font-family:var(--f-display); font-variation-settings:"SOFT" 100; font-weight:400; font-size:calc(var(--pg)*2.2); line-height:1; letter-spacing:-.02em}
.cc-num span{font-size:calc(var(--pg)*.9); font-weight:700; line-height:1.3}
.cc-num i{font-style:normal}
.play .cc-num{animation:cc-cola .6s var(--ease-mola) both; animation-delay:calc(.8s + var(--i) * 120ms)}
.cc-aba{position:absolute; right:calc(var(--pg)*-1.17); top:62%; width:calc(var(--pg)*1.5); height:calc(var(--pg)*3.33); border-radius:0 calc(var(--pg)*.67) calc(var(--pg)*.67) 0; background:#FFD89A; box-shadow:2px 2px 4px -2px rgb(26 16 36/.35)}
.cc-pagina figcaption{rotate:3deg; filter:var(--adesivo)}
.cc-livro-texto{display:grid; gap:14px}
.cc-livro-texto h2{font-size:clamp(28px,4.4vw,42px); line-height:1.08; letter-spacing:-.015em}
.cc-livro-texto p{font-size:17px; line-height:1.6; color:var(--grafite)}
.cc-urgencia{padding:12px 14px; border-radius:12px; background:var(--coral); color:var(--tinta) !important; font-weight:800; font-size:16px !important}
.cc-cta{justify-self:start; height:56px; font-size:17px}
.cc-risco{font-size:15px !important}
.cc-risco b{color:var(--tinta)}

/* ---------- os próximos marcos ---------- */
.cc-marcos{margin-top:clamp(56px,8vw,96px); max-width:860px}
.cc-marcos h2{font-size:clamp(26px,4vw,36px)}
.cc-marcos ol{display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none}
.cc-marco{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:12px; padding:14px 16px; border-radius:14px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.cc-marco b{font-size:17px}
.cc-marco span{grid-row:2; font-size:14px; color:var(--pedra)}
.cc-marco em{grid-row:1 / span 2; align-self:center; font-style:normal; font-weight:800; font-size:14px; color:var(--ameixa); white-space:nowrap}
.cc-marco.forte{background:var(--ameixa); box-shadow:none}
.cc-marco.forte b,.cc-marco.forte em{color:#FDFDFA}
.cc-marco.forte span{color:var(--mel)}
.play .cc-marco{animation:cc-sobe .6s var(--ease-saida) both; animation-delay:calc(.2s + var(--i) * 90ms)}

/* ---------- o card ---------- */
.cc-card{display:grid; gap:24px; align-items:center; margin-top:clamp(56px,8vw,96px); max-width:860px; padding-bottom:16px}
@media (min-width:640px){.cc-card{grid-template-columns:1fr auto}}
.cc-card h2{font-size:clamp(26px,4vw,36px)}
.cc-card-texto{display:grid; gap:12px}
.cc-card-texto p{font-size:16px; color:var(--grafite)}
.cc-card-acoes{display:flex; flex-wrap:wrap; gap:10px}
.cc-card-img{justify-self:center; width:min(220px,60vw); height:auto; border-radius:18px; rotate:3deg; box-shadow:var(--sombra-foto)}

/* ---------- a tabela ---------- */
.cc-tabela{display:grid; margin-top:14px; border-radius:14px; overflow:hidden; background:var(--superficie); box-shadow:var(--sombra-borda)}
.cc-tabela div{display:flex; justify-content:space-between; gap:12px; padding:12px 16px; font-size:16px; border-bottom:1px solid var(--linho)}
.cc-tabela div:last-child{border-bottom:0}
.cc-tabela b{text-align:right}

@media (prefers-reduced-motion:reduce){
  .cc-sol,.play .cc-adesivos li,.play .cc-revela > p,.play .cc-num,.play .cc-marco{animation:none}
  .cc-folha{transition:none}
}