/* ─────────────────────────────────────────────────────────────
   skool.css — la venta de la escuela dentro de los lead magnets.
   AUTOCONTENIDO a propósito: la guía influencer no carga style.css
   (usa guia.css), así que este bloque trae sus propios tokens y su
   propio botón, y se ve idéntico en /influencer-digital, /skills y
   /modelar-3d. Lo usan tres piezas:
     .escuela        — sección grande bajo el hero: logo + texto + VSL
     .escuela-final  — cierre compacto al final de la página
     .escuela-card   — tarjeta "Únete a la escuela" entre las skills
   ───────────────────────────────────────────────────────────── */
.escuela, .escuela-final, .escuela-card {
  --sk-card: #13131B; --sk-card2: #181822; --sk-ink: #FBFAF7;
  --sk-muted: rgba(251,250,247,.74); --sk-faint: rgba(251,250,247,.58);
  --sk-line: rgba(251,250,247,.09); --sk-line2: rgba(251,250,247,.16);
  --sk-acc: #FF3DAE; --sk-acc2: #8B5CF6; --sk-green: #3DDC84; --sk-r: 22px;
  --sk-display: 'Gabarito', 'Anton', sans-serif; --sk-body: 'Inter', sans-serif;
  --sk-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--sk-body); color: var(--sk-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Sección grande ── */
.escuela { padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 0; }
.escuela__box {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 1.6rem; align-items: center;
  background: linear-gradient(160deg, rgba(255,61,174,.10), rgba(139,92,246,.08) 55%, transparent 80%), var(--sk-card2);
  border: 1px solid rgba(255,61,174,.32); border-radius: calc(var(--sk-r) + 6px);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
@media (min-width: 900px) { .escuela__box { grid-template-columns: 1fr 1.15fr; gap: 2.6rem; } }
.escuela__logo { display: block; width: 138px; height: auto; margin: 0 0 1rem; }
.escuela__kick {
  display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-acc); font-weight: 700; margin-bottom: .7rem;
}
.escuela__t {
  margin: 0; font-family: var(--sk-display); font-weight: 900;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em;
  color: var(--sk-ink); text-wrap: balance;
}
.escuela__t em { font-style: normal; color: var(--sk-green); text-shadow: 0 0 30px rgba(61,220,132,.35); }
.escuela__p { margin: .9rem 0 0; color: var(--sk-muted); font-size: 1rem; line-height: 1.6; }
.escuela__p strong { color: var(--sk-ink); }
.escuela__lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.escuela__lista li { position: relative; padding-left: 1.7rem; color: var(--sk-muted); font-size: .93rem; line-height: 1.5; }
.escuela__lista li::before { content: "✓"; position: absolute; left: 0; color: var(--sk-green); font-weight: 700; }
.escuela__lista b { color: var(--sk-ink); font-weight: 600; }
.escuela__cta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
.escuela__nota { display: block; margin-top: .8rem; color: var(--sk-faint); font-size: .8rem; line-height: 1.4; }
.escuela__mas {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 .4rem;
  color: var(--sk-ink); font-weight: 600; font-size: .95rem; text-decoration: underline;
  text-decoration-color: rgba(251,250,247,.35); text-underline-offset: 4px; transition: text-decoration-color .2s;
}
.escuela__mas:hover { text-decoration-color: var(--sk-green); }

/* El botón (propio, para no depender de .btn de style.css) */
.escuela__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .95rem 2.1rem; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--sk-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #ff3b30, #e5245e 60%, #FF3DAE);
  box-shadow: 0 10px 34px rgba(229,36,94,.42);
  transition: transform .25s var(--sk-ease), box-shadow .25s;
}
.escuela__btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 44px rgba(229,36,94,.55); }
.escuela__btn--block { width: 100%; }

/* ── El VSL (mismo video que la portada, arranca al tocar, con sonido) ── */
.escuela__vsl { position: relative; }
.escuela__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #000; border: 1px solid var(--sk-line2);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.escuela__frame video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.escuela__vsl.is-playing .escuela__frame video { cursor: default; }
.escuela__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--sk-acc), var(--sk-acc2)); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 40px rgba(255,61,174,.45);
  transition: transform .25s var(--sk-ease);
}
.escuela__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.escuela__play svg { width: 28px; height: 28px; margin-left: 3px; }
.escuela__ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(255,61,174,.65); animation: skoolRing 1.8s ease-out infinite;
}
@keyframes skoolRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.escuela__badge {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); white-space: nowrap;
  background: rgba(11,11,16,.72); border: 1px solid var(--sk-line2); border-radius: 999px;
  padding: .42rem .95rem; font-size: .78rem; font-weight: 600; color: var(--sk-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.escuela__vsl.is-playing .escuela__play, .escuela__vsl.is-playing .escuela__badge { display: none; }
.escuela__vsl.is-cargando .escuela__frame::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); pointer-events: none;
}
@media (max-width: 899px) { .escuela__vsl { order: -1; } }   /* en el celular, el video primero */
@media (prefers-reduced-motion: reduce) { .escuela__ring { animation: none; } .escuela__btn:hover, .escuela__play:hover { transform: none; } }

/* ── Cierre compacto al final ── */
.escuela-final { padding: clamp(2rem, 5vw, 3.5rem) 1.25rem; }
.escuela-final__box {
  max-width: 960px; margin: 0 auto; display: grid; gap: 1.1rem; align-items: center; text-align: center;
  background: var(--sk-card); border: 1px solid rgba(255,61,174,.3); border-radius: calc(var(--sk-r) + 6px);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
@media (min-width: 820px) { .escuela-final__box { grid-template-columns: auto 1fr auto; gap: 1.8rem; text-align: left; } }
.escuela-final__logo { display: block; width: 112px; height: auto; margin: 0 auto; }
.escuela-final__t {
  margin: 0; font-family: var(--sk-display); font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.15; letter-spacing: -.01em; color: var(--sk-ink);
}
.escuela-final__p { margin: .4rem 0 0; color: var(--sk-muted); font-size: .92rem; line-height: 1.55; }
.escuela-final__p a { color: var(--sk-green); text-decoration: underline; text-underline-offset: 3px; }

/* ── Tarjeta entre las skills (hereda .money-card de style.css) ── */
.escuela-card {
  background: linear-gradient(160deg, rgba(255,61,174,.13), rgba(139,92,246,.09) 60%, transparent 85%), var(--sk-card2) !important;
  border-color: rgba(255,61,174,.38) !important;
}
.escuela-card:hover { border-color: rgba(255,61,174,.6) !important; }
.escuela-card__logo { display: block; width: 124px; height: auto; margin-bottom: .4rem; }
.escuela-card h3 { color: var(--sk-ink); }
.escuela-card p { color: var(--sk-muted) !important; }
.escuela-card p strong { color: var(--sk-ink); }
.escuela-card .escuela__btn { margin-top: .9rem; align-self: flex-start; }