/* ============================================================
   BLOCKS · blocos de seção com identidade própria do site.
   Grade de dores, método, temas, etapas, posts, e-book, prova.
   Depende de tokens.css. Nenhum valor cru de cor aqui dentro.
   ============================================================ */

/* --- Grade de dores da home: entra pela que dói --- */
.hooks{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--s5);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.hook{
  display:flex;flex-direction:column;text-align:left;background:transparent;text-decoration:none;
  border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s4) var(--s3) var(--s4);cursor:pointer;font-family:var(--body);
  position:relative;overflow:hidden;
  transition:background var(--fast),transform var(--fast);
}
.hook::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--slow);
}
.hook:hover{background:var(--surface)}
.hook:hover::after{transform:scaleX(1)}
.hook:active{transform:translateY(1px)}
.hook-n{font-family:var(--mono);font-size:11px;color:var(--orange);letter-spacing:.1em}
.hook-q{font-family:var(--display);font-size:24px;line-height:1.14;letter-spacing:-.015em;margin:10px 0;display:block;color:var(--navy)}
.hook-d{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}
/* margin-top:auto encosta "A solução" no rodapé do card, então os
   quatro alinham entre si mesmo com textos de tamanhos diferentes */
.hook-p{margin-top:auto;padding-top:12px;border-top:1px dashed var(--rule);font-size:13px;display:block}
.hook-d{margin-bottom:var(--s3)}
.hook-p i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--orange);letter-spacing:.09em;text-transform:uppercase}
.hook-p b{display:block;font-weight:700;font-size:14.5px;color:var(--navy);margin-top:3px}

/* --- Método: antes, durante, depois, resultado --- */
.metodo{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s4);border-left:1px solid var(--rule)}
.metodo>div{padding:var(--s3);border-right:1px solid var(--rule)}
.metodo .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--orange);text-transform:uppercase}
.metodo .v{font-family:var(--display);font-size:23px;letter-spacing:-.015em;margin:var(--s1) 0 6px;color:var(--navy)}
.metodo .p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}

/* --- Números de prova --- */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.nums>div{border-top:2px solid var(--orange);padding-top:var(--s3)}
.nums .n{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;letter-spacing:-.03em;color:var(--navy)}
.nums .l{font-size:15px;color:var(--muted);margin-top:var(--s1)}
.dark .nums .n{color:var(--on-dark)}
.dark .nums .l{color:var(--on-dark-muted)}

/* --- Retrato do Varnei (o selo "35+ anos" já vem gravado no arquivo) --- */
.retrato{max-width:430px}
.retrato img{border-radius:var(--radius)}

/* --- Muro de clientes --- */
.logos{margin-top:var(--s4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--lift-1)}
.logos img{width:100%;mix-blend-mode:multiply}

/* --- Foto larga de turma --- */
.banda{position:relative;border-radius:var(--radius);overflow:hidden;margin-top:var(--s4);box-shadow:var(--lift-2)}
.banda img{width:100%}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,48,71,.62),rgba(2,48,71,0) 58%)}
.banda figcaption{position:absolute;left:var(--s4);bottom:var(--s3);right:var(--s4);z-index:2;color:var(--on-dark);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

/* --- Temas de workshop --- */
.temas{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s3)}
.tema{background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:10px 16px;font-size:15px;color:var(--navy);transition:transform var(--fast),border-color var(--fast)}
.tema:hover{transform:translateY(-2px);border-color:var(--orange)}

/* --- Etapas numeradas --- */
.mes{counter-reset:s;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--rule)}
.mes li{list-style:none;counter-increment:s;display:grid;grid-template-columns:96px 1fr;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.mes li::before{content:"Etapa " counter(s);font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);padding-top:5px}
.mes b{display:block;font-size:16.5px;color:var(--navy)}
.mes p{margin:3px 0 0;font-size:15px;color:var(--muted)}

/* --- Posts do blog --- */
.post{display:grid;grid-template-columns:110px 1fr;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);align-items:start;text-decoration:none;transition:transform var(--fast)}
/* hover só quando o post for de fato clicável. Hoje são <article>,
   porque ainda não existe página de post e um href="#" morto parece
   defeito na frente do cliente. Vira <a> quando o blog for ligado. */
a.post:hover{transform:translateX(4px)}
a.post:hover h3{color:var(--orange)}
.post .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);padding-top:6px}
.post h3{margin:0 0 5px;font-family:var(--display);font-weight:400;font-size:25px;letter-spacing:-.015em;transition:color var(--fast)}
.post p{margin:0;font-size:15.5px;color:var(--muted)}

/* --- Depoimento em destaque --- */
.depo{margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:1fr 300px;gap:var(--s5);align-items:start}
.depo blockquote{margin:0;position:relative;padding-top:var(--s3);border-top:2px solid var(--orange)}
.depo blockquote p{font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.65rem);line-height:1.34;letter-spacing:-.015em;color:var(--navy);margin-bottom:var(--s3)}
.depo blockquote p:last-child{font-family:var(--body);font-size:16.5px;line-height:1.65;letter-spacing:0;color:var(--muted);margin-bottom:0}
.depo figcaption{padding-top:var(--s3);border-top:1px solid var(--rule)}
.depo figcaption b{display:block;font-size:17px;color:var(--navy)}
.depo figcaption span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-top:6px}
@media (max-width:900px){.depo{grid-template-columns:1fr;gap:var(--s3)}}

/* --- Capa do e-book --- */
.ebook{
  background:
    radial-gradient(100% 80% at 80% 0%, #06405E 0%, transparent 60%),
    var(--navy);
  border-radius:var(--radius);padding:var(--s5) var(--s4);
  font-family:var(--display);color:var(--on-dark);box-shadow:var(--lift-3);
}
.ebook-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.ebook-t{font-size:clamp(2rem,4vw,2.6rem);line-height:1.02;letter-spacing:-.025em;margin:var(--s2) 0 0}
.ebook-a{font-family:var(--body);font-size:13.5px;color:var(--on-dark-muted);margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--on-dark-rule)}

@media (max-width:980px){.hooks{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .metodo{grid-template-columns:1fr 1fr}
  .post{grid-template-columns:1fr;gap:6px}
  .nums{grid-template-columns:1fr;gap:var(--s2)}
  .retrato{max-width:100%}
}
@media (max-width:560px){
  .hooks{grid-template-columns:1fr}
  .metodo{grid-template-columns:1fr}
  .mes li{grid-template-columns:1fr;gap:6px}
}