/* ==========================================================================
   Checklist da Virada (checklist-da-virada.html e es/checklist-da-virada.html)
   Comportamento em js/checklist-gate.js. As imagens são páginas reais do PDF.
   ========================================================================== */

/* ---------- hero: texto à esquerda, capa e página 3 do PDF à direita ---------- */
.checklist-hero{padding:calc(var(--header-h) + 72px) 0 96px; overflow:hidden;}
.checklist-hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center;}
.checklist-hero .eyebrow{color:#ffb7cf;}
.checklist-hero .eyebrow::before{background:#ffb7cf;}
.checklist-hero h1{max-width:640px; font-size:clamp(2.6rem,5.2vw,4.4rem); line-height:1.02; text-wrap:balance;}
.checklist-hero .lede{max-width:560px;}
.checklist-hero .note{color:rgba(255,255,255,.62);}

.checklist-stack{position:relative; justify-self:center; width:min(100%,380px); aspect-ratio:760 / 1075; margin-right:48px;}
.checklist-stack img{position:absolute; inset:0; width:100%; height:100%; border-radius:6px; box-shadow:0 32px 64px -24px rgba(0,0,0,.75);}
.checklist-stack-back{transform:translate(20%,-3%) rotate(6deg) scale(.94); filter:brightness(.92);}
.checklist-stack-front{transform:rotate(-3deg);}

/* ---------- por onde começar ---------- */
.checklist-paths .card p strong{color:var(--rosa);}

/* ---------- por dentro do PDF: o topo de três páginas ---------- */
.checklist-pages .card{gap:0; padding:0; overflow:hidden;}
.checklist-page-peek{aspect-ratio:4 / 3; overflow:hidden; padding:24px 24px 0; border-bottom:1px solid var(--line-dark); background:var(--surface);}
.checklist-page-peek img{width:100%; height:auto; border-radius:6px 6px 0 0; box-shadow:0 12px 32px -14px rgba(0,0,0,.4);}
.checklist-page-body{display:flex; flex-direction:column; gap:10px; padding:22px 24px 26px;}

/* ---------- chamada final ---------- */
.checklist-final h2{max-width:660px;}
.checklist-final .lede{margin-top:18px; max-width:600px;}

/* ---------- barra fixa no celular (mesmo padrão do Nuvem do Zero) ---------- */
.checklist-bar strong{font-size:1.25rem;}
.checklist-bar .btn{padding:12px 22px;}

/* ---------- formulário de nome e e-mail ---------- */
.checklist-modal[hidden]{display:none;}
.checklist-modal{position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:20px; background:rgba(10,10,10,.72); backdrop-filter:blur(8px);}
.checklist-dialog{position:relative; width:min(100%,480px); max-height:calc(100vh - 40px); overflow:auto; padding:32px 30px; border-radius:var(--radius-lg); color:var(--black); background:var(--white); box-shadow:0 24px 80px rgba(0,0,0,.3);}
.checklist-dialog-close{position:absolute; top:12px; right:12px; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#222; font-size:1.6rem; line-height:1;}
.checklist-dialog-close:hover{background:#f2f2f2;}
.checklist-dialog-head{display:flex; align-items:center; gap:18px; padding-right:36px;}
.checklist-dialog-cover{flex-shrink:0; width:58px; height:auto; border-radius:3px; box-shadow:0 10px 20px -8px rgba(0,0,0,.45); transform:rotate(-4deg);}
.checklist-dialog h2{margin-top:6px; font-size:clamp(1.6rem,4.6vw,2.1rem); line-height:1.05;}
.checklist-dialog p{font-size:1rem; color:#555;}
#checklistDialogDescription{margin-top:16px;}
.checklist-form label{display:block; margin:16px 0 6px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#555;}
.checklist-form input{width:100%; min-height:50px; padding:12px 18px; border:1.5px solid var(--line-dark); border-radius:var(--radius-pill); color:var(--black); background:var(--white); font:inherit; font-size:16px;}
.checklist-form input:focus{outline:none; border-color:var(--rosa);}
.checklist-form .btn{width:100%; margin-top:20px; white-space:normal; text-align:center;}
.checklist-form .btn[disabled]{opacity:.75; cursor:progress; transform:none;}
.checklist-form-message{margin-top:12px; color:#c20e49; font-size:.92rem; font-weight:600;}
.checklist-privacy{margin-top:12px; font-size:.82rem; line-height:1.5; color:#777;}
.checklist-success[hidden]{display:none;}
.checklist-success{display:flex; flex-direction:column; gap:12px;}
.checklist-success h2{margin-top:0;}
.checklist-download{width:100%; margin-top:6px;}
.checklist-next{margin-top:8px; padding-top:16px; border-top:1px solid var(--line-dark); font-size:.92rem;}
.checklist-next a{color:var(--rosa); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
body.checklist-modal-open{overflow:hidden;}

/* ---------- link para o checklist na home e em cursos ---------- */
.checklist-resource-link{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:26px; padding:24px 28px; border:1px solid var(--line-dark); border-radius:var(--radius-md); background:var(--white);}
.checklist-resource-link strong{display:block; font-family:var(--ff-heading); font-size:1.25rem;}
.checklist-resource-link span{display:block; margin-top:3px; color:#666; font-size:.94rem;}

@media (max-width:880px){
  .checklist-hero .wrap{grid-template-columns:1fr; gap:48px;}
  .checklist-stack{width:min(70%,300px); margin:0 auto 8px; transform:translateX(-6%);}
  .checklist-resource-link{align-items:flex-start; flex-direction:column;}
}
@media (max-width:560px){
  .checklist-hero{padding:calc(var(--header-h) + 40px) 0 64px;}
  .checklist-hero h1{font-size:clamp(2.3rem,10.5vw,3rem);}
  .checklist-page .actions .btn{width:100%; padding:14px 18px; white-space:normal; text-align:center;}
  .checklist-dialog{padding:26px 20px;}
}