/* ============================================================
 * Díptico de perguntas — o MESMO componente .hook para os dois públicos:
 *   .dip-pais    → pais (dourado/azul, fundo branco)
 *   .dip-jovens  → crianças e jovens (verde, fundo bege, assinatura manuscrita)
 * Mesma grelha, tipografia, hierarquia e peso. Distinguem-se só pela atmosfera
 * cromática e por pequenos apontamentos. Carrega depois de esfera.css (override).
 * ============================================================ */

/* — título: destaque imediato do público (mesma lógica nos dois) — */
.hook-eyebrow{margin-top:0;flex-wrap:wrap;align-items:baseline}
.hook-eyebrow b{font-weight:800;font-size:1.06em;letter-spacing:.2em}

/* — bloco lateral: harmonizar a mancha tipográfica (mesmo estatuto visual) — */
.hook-tese{position:static}
.hook-tese p,.hook-text{font-family:var(--serif);font-weight:300;font-size:clamp(1.08rem,1.32vw,1.24rem);line-height:1.52;letter-spacing:-.006em;color:var(--ink);margin:0 0 .8rem}
.hook-tese p:last-child,.hook-text:last-child{margin-bottom:0}
.hook-tese em,.hook-text em{font-style:italic;font-weight:400;color:var(--blue)}
.hook-tese strong,.hook-text strong{font-weight:600;color:var(--ink)}

/* — perguntas: itálico editorial nos dois; ícone ? com o mesmo peso — */
.hook-perguntas .hp-icon{width:36px;height:36px}
.hook-perguntas li{gap:.75rem}

/* ===================== VARIANTE · CRIANÇAS E JOVENS ===================== */
.dip-jovens{position:relative;background:#f7f4ec}
.dip-jovens .hook-eyebrow{color:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hook-eyebrow b{color:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hook-eyebrow::before{background:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hp-icon{color:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hook-fecho{border-top-color:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hook-fecho strong{color:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hook-tese{border-left-color:var(--k-fluor-deep,#7d9200)}
.dip-jovens .hook-tese em{color:var(--k-fluor-deep,#7d9200)}

/* assinatura manuscrita do público (a única presença de rosa) */
.dip-hand{font-family:var(--k-hand,'Caveat','Segoe Script',cursive);text-transform:none;letter-spacing:0;font-weight:700;font-size:1.55rem;line-height:.9;color:var(--k-mag,#ff3d8b);margin-left:.45rem}

/* fitas-cola: prendem o módulo bege à página, sobre a transição branco→bege */
.dip-tape{position:absolute;top:-9px;width:86px;height:22px;z-index:2;border-radius:1px;background:repeating-linear-gradient(90deg,rgba(212,240,0,.6) 0 8px,rgba(212,240,0,.36) 8px 16px);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.dip-tape-l{left:clamp(1.75rem,5vw,4.5rem);transform:rotate(-3.5deg)}
.dip-tape-r{right:clamp(1.75rem,5vw,4.5rem);transform:rotate(3deg)}

/* ===================== RESPONSIVO ===================== */
@media(max-width:980px){
  .dip-tape-r{display:none}
  .dip-hand{display:block;margin:.35rem 0 0}
}