/* ⚠️ Las animaciones van con prefijo `cco`, no `cc`: los @keyframes son
   GLOBALES y `ccLate`/`ccBrillo` ya existen en club-carga.js (el latido del
   logo). Al llamarse igual, el logo de la pantalla de carga heredaba el pulso
   ROJO de la píldora de «sesiones en vivo» y aparecía un cuadro rojo
   alrededor del logo. Cualquier animación nueva de aquí: prefijo `cco`.

/* ══════════════════════════════════════════════════════════════════════════
   LA CAJA DE LA COMUNIDAD — la misma en la web del Club y en las públicas

   No es un botón: es el único sitio donde se enseña lo que pasa dentro. Por
   eso lleva fondo vivo (tarjetas pasando, desenfocadas), la señal de EN VIVO
   y lo que de verdad se lleva la persona. Quien llega hasta aquí es porque
   ya quiso entrar a algo y no pudo.

   Prefijo `cc-` propio, que las clases cortas del Club ya están cogidas.
   ══════════════════════════════════════════════════════════════════════════ */

/* compacta a propósito: es un remate, no otra sección. Antes ocupaba una
   pantalla entera y se comía el aire de las tarjetas de arriba. */
/* ⚠️ RED DE SEGURIDAD: mientras la pantalla de carga del Club esté puesta,
   esta caja no se dibuja. Su píldora roja de «sesiones en vivo» acababa
   saliendo encima del logo y parecía un cuadro rojo en mitad de la carga.
   Se cierra aquí además de en el JS, para que dé igual quién la monte. */
body:has(#club-carga) .cc{visibility:hidden!important}
.cc .cc-vivo{animation-delay:.1s}

.cc{position:relative;overflow:hidden;border-radius:18px;isolation:isolate;
  margin-top:clamp(26px,4vw,40px);
  padding:clamp(20px,3vw,26px) clamp(18px,3vw,30px);
  background:linear-gradient(155deg,#0d1b3e,#070d20 62%);
  border:1px solid rgba(201,160,64,.32);
  box-shadow:0 30px 70px rgba(0,0,0,.45)}

/* ── el fondo: tarjetas pasando, desenfocadas ─────────────────────────────
   Son las clases y las sesiones. Van borrosas a propósito: se intuye que hay
   mucho, no se lee ninguna. */
.cc-fondo{position:absolute;inset:-10%;z-index:-2;filter:blur(9px) saturate(1.15);opacity:.9}
.cc-fila{position:absolute;left:0;display:flex;gap:16px;width:max-content;
  animation:ccoPasa 34s linear infinite}
.cc-fila.f1{top:4%}
.cc-fila.f2{top:38%;animation-duration:46s;animation-direction:reverse}
.cc-fila.f3{top:72%;animation-duration:40s}
@keyframes ccoPasa{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cc-fila img{display:block;width:170px;height:96px;border-radius:12px;flex:none;
  object-fit:cover;border:1px solid rgba(140,180,255,.18)}
/* el velo: sin él, el texto no se lee encima del fondo */
/* el velo justo para que se lea el texto, no para tapar el fondo: con .93
   las tarjetas de atrás desaparecían y la caja quedaba muerta */
.cc::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(135% 100% at 50% 0%,rgba(7,13,32,.42),rgba(7,13,32,.84) 68%)}
/* el brillo dorado que recorre el borde: lo que la hace mirar */
.cc::after{content:"";position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,217,125,0) 42%,rgba(255,217,125,.12) 50%,rgba(255,217,125,0) 58%);
  animation:ccoBrillo 7s ease-in-out infinite}
@keyframes ccoBrillo{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}

.cc-in{position:relative;text-align:center;max-width:640px;margin:0 auto}

/* la señal de en vivo */
.cc-vivo{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;
  padding:5px 12px 5px 10px;border-radius:30px;
  font-size:9.8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffd1d1;
  background:rgba(255,77,77,.12);border:1px solid rgba(255,77,77,.4)}
.cc-vivo i{width:7px;height:7px;border-radius:50%;background:#ff4d4d;
  box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:ccoLate 1.8s ease-out infinite}
@keyframes ccoLate{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}

.cc h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(17px,2.6vw,23px);
  font-weight:900;letter-spacing:-.03em;line-height:1.18;color:#fff;margin-bottom:14px;
  text-wrap:pretty}
.cc h3 em{font-style:normal;background:linear-gradient(96deg,#ffd97d,#c9a040);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cc-d{display:none}

/* lo que se lleva, en chips: cuatro cajas con su texto ocupaban el doble y
   decían lo mismo */
.cc-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 auto 18px}
.cc-lista div{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:30px;
  font-size:12.2px;line-height:1.2;color:#cfdcf2;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(140,170,220,.18)}
.cc-lista svg{flex:none;width:14px;height:14px;fill:none;stroke:#e8c46a;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:12px;font-size:14.5px;font-weight:800;text-decoration:none;
  color:#1a1200;background:linear-gradient(135deg,#ffe3a0,#c9a040);
  box-shadow:0 14px 34px rgba(201,160,64,.34);
  transition:filter .15s,transform .15s,box-shadow .15s;
  animation:ccoLatido 3.4s ease-in-out infinite}
@keyframes ccoLatido{0%,92%,100%{transform:scale(1)}96%{transform:scale(1.035)}}
.cc-btn:hover{filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(201,160,64,.42)}
.cc-btn svg{width:18px;height:18px;flex:none}
.cc-pie{display:block;margin:11px auto 0;padding:0;max-width:440px;background:none;border:0;
  text-align:center;font-size:11.4px;line-height:1.5;color:#6d7d9b}
.cc-pie b{color:#9fb0cb;font-weight:600}

@media(max-width:560px){
  .cc-lista div{font-size:11.6px;padding:6px 10px}
  .cc-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .cc-fila,.cc::after,.cc-btn,.cc-vivo i{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   EL ACCESO DEL MIEMBRO — dentro de la plataforma, no se vende nada

   Mide lo que mide un atajo (`.at`), porque es un atajo. Lo único que se
   permite de más es el punto rojo de «en vivo»: eso no vende, informa.
   ══════════════════════════════════════════════════════════════════════════ */
.ccm{display:flex;align-items:center;gap:14px;text-decoration:none;
  padding:16px 18px;border-radius:14px;transition:.18s;
  border:1px solid rgba(201,160,64,.26);
  background:linear-gradient(120deg,rgba(201,160,64,.07),rgba(255,255,255,.028) 48%)}
.ccm:hover{border-color:rgba(201,160,64,.55);
  background:linear-gradient(120deg,rgba(201,160,64,.12),rgba(255,255,255,.05) 48%)}
.ccm-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040)}
.ccm-ico svg{width:19px;height:19px}
.ccm-txt{flex:1;min-width:0}
.ccm-txt b{display:block;font-size:14.4px;font-weight:700;color:#fff;line-height:1.3}
.ccm-txt i{display:block;font-style:normal;font-size:11.8px;color:#8296b4;margin-top:2px;
  /* en el móvil parte en dos líneas: `balance` las iguala y así nunca queda
     una palabra sola colgando en la última */
  text-wrap:balance}
.ccm-vivo{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:999px;font-size:10.2px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#ffb4b4;background:rgba(255,70,70,.12);border:1px solid rgba(255,70,70,.3)}
.ccm-vivo i{width:6px;height:6px;border-radius:50%;background:#ff4b4b;
  box-shadow:0 0 0 0 rgba(255,75,75,.6);animation:ccmPulso 2.2s ease-out infinite}
@keyframes ccmPulso{70%{box-shadow:0 0 0 7px rgba(255,75,75,0)}100%{box-shadow:0 0 0 0 rgba(255,75,75,0)}}
.ccm-fl{flex:none;width:18px;height:18px;color:#c9a040;transition:transform .18s}
.ccm:hover .ccm-fl{transform:translateX(3px)}
@media(max-width:560px){
  .ccm{gap:11px;padding:14px}
  .ccm-vivo{display:none}          /* en el móvil manda el texto, no el adorno */
}
@media(prefers-reduced-motion:reduce){ .ccm-vivo i{animation:none} }