/* ══════════════════════════════════════════════════════════════
   HOOK DE 7 BENEFICIOS — página /club/. Rediseñado a ancho completo
   con layout horizontal, coherente con la cabecera y los planes.
   Corregido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.cp-hook{
  width:100%;margin:0 0 44px;background:#fff;border-radius:32px;
  padding:48px 56px;box-shadow:0 24px 60px rgba(26,46,90,.1);
  border:1px solid rgba(26,46,90,.06);position:relative;overflow:hidden;
}
.cp-hook::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#1A2E5A,#0095FF,#39C700);}

.cp-hook-track{position:relative;min-height:220px;}
.cp-hook-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(14px);
  transition:opacity .5s,transform .5s,visibility .5s;
  display:flex;align-items:center;gap:48px;text-align:left;
}
.cp-hook-slide.active{opacity:1;visibility:visible;transform:translateX(0);}

.cp-hook-ilustratie{flex:0 0 260px;margin-bottom:0;display:flex;justify-content:center;}
.cp-hook-ilustratie svg{width:260px;height:208px;}

.cp-hook-contenido{flex:1;min-width:0;}
.cp-hook-titel{font-family:'Righteous',sans-serif;font-size:28px;color:#1A2E5A;margin-bottom:14px;line-height:1.2;}
.cp-hook-tekst{font-size:15px;color:#6B7A85;line-height:1.7;max-width:520px;margin:0;}

.cp-hook-dots{display:flex;justify-content:center;gap:8px;margin-top:32px;}
.cp-hook-dot{width:8px;height:8px;border-radius:50%;border:none;background:#E5E9F0;cursor:pointer;padding:0;transition:.2s;}
.cp-hook-dot.active{background:#0095FF;width:28px;border-radius:99px;}
.cp-hook-dot:hover{background:#1A2E5A;}

@media (max-width:900px){
  .cp-hook{padding:36px 32px;}
  .cp-hook-ilustratie{flex:0 0 200px;}
  .cp-hook-ilustratie svg{width:200px;height:160px;}
  .cp-hook-titel{font-size:23px;}
}

@media (max-width:640px){
  .cp-hook{padding:32px 24px;border-radius:24px;}
  .cp-hook-track{min-height:340px;}
  .cp-hook-slide{flex-direction:column;text-align:center;gap:20px;}
  .cp-hook-ilustratie{flex:0 0 auto;}
  .cp-hook-ilustratie svg{width:170px;height:136px;}
  .cp-hook-titel{font-size:19px;}
  .cp-hook-tekst{font-size:13.5px;max-width:none;}
}