/* ============================================================
   Comunidad CAE — landing pública (marketing).
   Reutiliza los tokens y utilidades de cae.css (.wrap/.btn/.eyebrow/.lead/.gold/.sec/.sec__head).
   Solo añade aquí lo específico de la landing, con prefijo cl-. Dark-first.
   ============================================================ */
.community-landing{--cl-practitioner:#8FA3D4;--cl-red:#F0635C;--cl-ok:#74C795}

/* ---- alternancia de paneles oscuros (en vez de .sec--light, que es ivory) ---- */
.community-landing .cl-sec--alt{background:var(--indigo-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- hero (con malla animada de fondo) ---- */
.cl-hero{position:relative;min-height:80svh;display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 18%,rgba(187,146,38,.16),transparent 60%),
    radial-gradient(90% 80% at 0% 100%,rgba(67,71,96,.5),transparent 55%),
    var(--indigo-deep)}
#cl-mesh{position:absolute;inset:0;width:100%;height:100%;opacity:.85;z-index:0}
.cl-hero__shade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(31,35,53,.55) 0%,rgba(31,35,53,0) 28%,rgba(31,35,53,0) 68%,rgba(31,35,53,.7) 100%)}
.cl-hero__in{position:relative;z-index:2;padding:140px 0 64px}
.cl-hero h1{font-family:var(--font-d);font-weight:700;line-height:1.12;letter-spacing:-.01em;
  font-size:clamp(2.2rem,5vw,4rem);margin:22px 0 20px;max-width:16em}
.cl-hero h1 .gold{text-shadow:0 0 38px rgba(217,174,51,.4)}
.cl-lead{max-width:42em}
.cl-lead b{color:var(--text);font-weight:600}

.cl-ctas{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:32px}
.cl-ctas--center{justify-content:center;margin-top:26px}
.cl-arr{transition:transform .16s}
.btn:hover .cl-arr{transform:translateX(4px)}

.cl-access-note{margin-top:24px;max-width:40em;font-size:.95rem;color:var(--muted);
  background:rgba(187,146,38,.08);border:1px solid rgba(187,146,38,.25);border-radius:12px;padding:14px 18px}
.cl-access-note b{color:var(--gold-bright);font-weight:600}

.cl-cred{margin-top:38px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--font-m);font-size:.76rem;color:var(--muted)}
.cl-cred b{color:var(--text);font-weight:500}
.cl-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}

/* ---- secciones (reusa .sec/.sec__head) ---- */
.cl-sec .sec__head{max-width:46em}

/* cómo funciona — tarjeta con número índice (sin borde lateral) */
.cl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cl-step{background:var(--indigo-3);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px}
.cl-sec--alt .cl-step{background:var(--indigo-ink)}
.cl-step__n{font-family:var(--font-m);font-size:.8rem;color:var(--gold-bright);letter-spacing:.1em;margin-bottom:14px}
.cl-step h3{font-family:var(--font-d);font-size:1.18rem;margin-bottom:10px}
.cl-step p{color:var(--muted);font-size:.95rem}

/* disciplinas — etiqueta mono arriba, sin borde lateral */
.cl-disc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cl-disc{background:var(--indigo-3);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:transform .2s,border-color .2s}
.cl-sec--alt .cl-disc{background:var(--indigo-ink)}
.cl-disc:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.cl-disc__tag{display:inline-block;font-family:var(--font-m);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:12px}
.cl-disc h3{font-family:var(--font-d);font-size:1.16rem;margin-bottom:8px}
.cl-disc p{color:var(--muted);font-size:.92rem}

/* niveles — insignia de color por nivel (sin borde lateral) */
.cl-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cl-tcard{background:var(--indigo-3);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  transition:transform .2s,border-color .2s}
.cl-sec--alt .cl-tcard{background:var(--indigo-ink)}
.cl-tcard:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.cl-tier{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-d);font-weight:600;
  font-size:.74rem;letter-spacing:.04em;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.cl-tier::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cl-tcard p{color:var(--muted);font-size:.88rem}
.cl-tier--est{color:var(--muted);background:rgba(175,179,200,.14)}
.cl-tier--prac{color:var(--cl-practitioner);background:rgba(143,163,212,.16)}
.cl-tier--ment{color:var(--gold-bright);background:rgba(217,174,51,.16)}
.cl-tier--inst{color:var(--cl-red);background:rgba(230,43,37,.16)}

/* en vivo / cadencia — chip de momento (sin borde lateral) */
.cl-cadence{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cl-cad{background:var(--indigo-3);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:transform .2s,border-color .2s}
.cl-sec--alt .cl-cad{background:var(--indigo-ink)}
.cl-cad:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.cl-cad__when{display:inline-block;font-family:var(--font-m);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-bright);background:rgba(187,146,38,.1);
  border:1px solid rgba(187,146,38,.28);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.cl-cad h3{font-family:var(--font-d);font-size:1.12rem;margin-bottom:8px}
.cl-cad p{color:var(--muted);font-size:.92rem}

/* cta final */
.cl-cta{text-align:center;max-width:40em;margin:0 auto}
.cl-cta .eyebrow{justify-content:center}
.cl-cta h2{font-family:var(--font-d);font-size:clamp(1.8rem,3.4vw,2.6rem);margin:16px 0 14px}
.cl-cta .lead{margin:0 auto}
.cl-cta__note{margin-top:22px;font-family:var(--font-m);font-size:.74rem;color:var(--muted)}

@media(max-width:900px){
  .cl-steps,.cl-disc-grid,.cl-tiers,.cl-cadence{grid-template-columns:1fr}
  .cl-hero__in{padding-top:120px}
}
@media(min-width:560px) and (max-width:900px){
  .cl-tiers{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.cl-arr,.cl-disc,.cl-tcard,.cl-cad{transition:none}}
