/**
 * MSM ACADEMY — Popup de acceso anticipado (pre-lanzamiento).
 *
 * Se carga en el home standalone y en el resto del sitio, así que no depende de
 * msm-tokens.css: trae sus propios tokens, copiados del home (bkp_home/css).
 * Los selectores van anidados bajo .msm-pl para ganar a los estilos de
 * formulario de BuddyBoss y Tutor sin recurrir a !important.
 */

.msm-pl{
  --pl-bg:#141614; --pl-bg2:#1a1d1a; --pl-fg:#F6F1E6; --pl-muted:rgba(246,241,230,.62);
  --pl-line:rgba(246,241,230,.14); --pl-field:rgba(246,241,230,.05);
  --pl-gold:#d26e23; --pl-gold-hover:#fb8b36; --pl-violet:94,44,201; --pl-error:#ff8a7a;
  --pl-serif:'Playfair Display',Georgia,serif; --pl-sans:'Roboto',system-ui,sans-serif;
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  font-family:var(--pl-sans); color:var(--pl-fg);
}
.msm-pl[hidden]{display:none}
.msm-pl *,.msm-pl *::before,.msm-pl *::after{box-sizing:border-box}

.msm-pl-backdrop{
  position:absolute; inset:0; background:rgba(8,9,8,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s ease;
}
.msm-pl-card{
  position:relative; width:100%; max-width:1000px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--pl-bg); border:1px solid var(--pl-line); border-radius:28px; overflow:hidden;
  box-shadow:0 60px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(210,110,35,.08);
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .4s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}
.msm-pl.is-open .msm-pl-backdrop{opacity:1}
.msm-pl.is-open .msm-pl-card{opacity:1; transform:none}

.msm-pl-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:40px; height:40px; padding:9px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,22,20,.6); border:1px solid var(--pl-line); color:var(--pl-fg);
  cursor:pointer; transition:background .2s, transform .2s;
}
.msm-pl-close:hover{background:var(--pl-gold); border-color:var(--pl-gold); transform:rotate(90deg)}
.msm-pl-close svg{width:18px; height:18px}

/* ---- Mosaico: dos columnas en bucle, en sentidos opuestos ---- */
.msm-pl-media{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:0 12px; overflow:hidden; background:var(--pl-bg2); min-height:100%;
}
.msm-pl-media::before,.msm-pl-media::after{
  content:""; position:absolute; left:0; right:0; height:22%; z-index:2; pointer-events:none;
}
.msm-pl-media::before{top:0; background:linear-gradient(var(--pl-bg2),transparent)}
.msm-pl-media::after{bottom:0; background:linear-gradient(transparent,var(--pl-bg2))}
.msm-pl-col{position:relative; overflow:hidden}
/* Absoluta: la altura de la tarjeta la marca el formulario, no las fotos. */
.msm-pl-track{position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:12px; will-change:transform}
.msm-pl-col--up .msm-pl-track{animation:msmPlUp 38s linear infinite}
.msm-pl-col--down .msm-pl-track{animation:msmPlDown 42s linear infinite}
.msm-pl-media:hover .msm-pl-track{animation-play-state:paused}
/* La pista contiene la serie dos veces: desplazar la mitad (más medio hueco) cierra el bucle. */
@keyframes msmPlUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 6px))}}
@keyframes msmPlDown{from{transform:translateY(calc(-50% - 6px))}to{transform:translateY(0)}}

.msm-pl-tile{margin:0; border-radius:18px; overflow:hidden; aspect-ratio:3/4; background:#222}
.msm-pl-tile img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03)}

.msm-pl-media-badge{
  position:absolute; left:50%; bottom:22px; z-index:3; transform:translateX(-50%);
  padding:12px 20px; border-radius:99px;
  background:rgba(20,22,20,.72); border:1px solid var(--pl-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.msm-pl-media-badge img{display:block; height:22px; width:auto; max-width:none}

/* ---- Contenido ---- */
/* Solo scroll vertical, y únicamente si la pantalla es más baja que el formulario. */
.msm-pl-body{
  position:relative; z-index:1; display:flex; flex-direction:column;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:52px 48px 40px;
  /* El max-height de la tarjeta no limita una fila de grid de altura automática: va aquí. */
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  scrollbar-width:thin; scrollbar-color:rgba(246,241,230,.22) transparent;
}
.msm-pl-body::-webkit-scrollbar{width:8px; height:0}
.msm-pl-body::-webkit-scrollbar-track{background:transparent}
.msm-pl-body::-webkit-scrollbar-thumb{background:rgba(246,241,230,.22); border-radius:8px; border:2px solid var(--pl-bg)}
.msm-pl-step{flex:1 0 auto}
.msm-pl-media{z-index:1}
/* Los orbes cuelgan de la tarjeta (que recorta) y no del cuerpo con scroll:
   dentro de él generaban barras de desplazamiento. */
.msm-pl-orb{position:absolute; z-index:0; border-radius:50%; pointer-events:none; filter:blur(8px)}
.msm-pl-orb--a{width:420px; height:420px; top:-200px; right:-160px; background:radial-gradient(circle,rgba(var(--pl-violet),.34) 0%,transparent 70%); animation:msmPlOrb 22s ease-in-out infinite}
.msm-pl-orb--b{width:360px; height:360px; bottom:-180px; left:calc(47% - 120px); background:radial-gradient(circle,rgba(210,110,35,.22) 0%,transparent 70%); animation:msmPlOrb 26s ease-in-out infinite reverse}
@keyframes msmPlOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,40px) scale(1.1)}}

.msm-pl-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font:500 11px/1.4 var(--pl-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--pl-muted);
}
.msm-pl-dot{width:8px; height:8px; border-radius:50%; background:var(--pl-gold); box-shadow:0 0 0 0 rgba(210,110,35,.6); animation:msmPlPulse 2s ease-out infinite; flex:none}
@keyframes msmPlPulse{0%{box-shadow:0 0 0 0 rgba(210,110,35,.55)}80%,100%{box-shadow:0 0 0 10px rgba(210,110,35,0)}}

.msm-pl .msm-pl-title{
  margin:0 0 14px; padding:0; border:0;
  font:800 44px/1 var(--pl-sans); letter-spacing:-.03em; text-transform:uppercase; color:var(--pl-fg);
}
.msm-pl .msm-pl-title em{font:italic 500 1.08em/1 var(--pl-serif); letter-spacing:-.01em; text-transform:none; color:var(--pl-gold)}
.msm-pl .msm-pl-sub{margin:0 0 26px; font:400 15px/1.6 var(--pl-sans); color:var(--pl-muted); max-width:44ch}

/* ---- Formulario ---- */
.msm-pl-form{display:flex; flex-direction:column; gap:14px; margin:0}
.msm-pl-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.msm-pl .msm-pl-field{display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; padding:0; border:0}
.msm-pl .msm-pl-field > span,.msm-pl .msm-pl-field legend{
  display:block; float:none; width:auto; margin:0 0 6px; padding:0;
  font:500 11px/1.3 var(--pl-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--pl-muted);
}
.msm-pl .msm-pl-field > span{margin:0}
.msm-pl .msm-pl-field small{font-size:10px; letter-spacing:.06em; text-transform:none; opacity:.7}

.msm-pl .msm-pl-field input,
.msm-pl .msm-pl-field select{
  width:100%; height:48px; margin:0; padding:0 16px;
  background:var(--pl-field); border:1px solid var(--pl-line); border-radius:14px; box-shadow:none;
  font:400 15px/1 var(--pl-sans); color:var(--pl-fg);
  transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.msm-pl .msm-pl-field select{
  padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E6' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.msm-pl .msm-pl-field select option{color:#1a1d1a; background:#fff}
.msm-pl .msm-pl-field input::placeholder{color:rgba(246,241,230,.35)}
.msm-pl .msm-pl-field input:focus,
.msm-pl .msm-pl-field select:focus{outline:none; border-color:var(--pl-gold); background:rgba(246,241,230,.07); box-shadow:0 0 0 3px rgba(210,110,35,.18)}
.msm-pl .is-invalid input,
.msm-pl .is-invalid select{border-color:var(--pl-error)}

.msm-pl-chips{flex-direction:row !important; flex-wrap:wrap; gap:8px !important}
.msm-pl-chips legend{width:100% !important}
.msm-pl .msm-pl-chip{position:relative; margin:0; cursor:pointer}
.msm-pl .msm-pl-chip input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.msm-pl .msm-pl-chip span{
  display:inline-block; padding:10px 16px; border-radius:99px;
  border:1px solid var(--pl-line); background:var(--pl-field);
  font:500 13px/1 var(--pl-sans); color:var(--pl-fg);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.msm-pl .msm-pl-chip:hover span{border-color:rgba(210,110,35,.6)}
.msm-pl .msm-pl-chip input:checked + span{background:var(--pl-gold); border-color:var(--pl-gold); color:#1a1d1a; font-weight:700}
.msm-pl .msm-pl-chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(210,110,35,.35)}
.msm-pl .msm-pl-chips.is-invalid .msm-pl-chip span{border-color:rgba(255,138,122,.6)}

.msm-pl .msm-pl-consent{display:flex; gap:10px; align-items:flex-start; margin:2px 0 0; cursor:pointer; font:400 12.5px/1.5 var(--pl-sans); color:var(--pl-muted)}
.msm-pl .msm-pl-consent input{
  flex:none; width:18px; height:18px; margin:1px 0 0; padding:0;
  -webkit-appearance:none; appearance:none; border:1px solid var(--pl-line); border-radius:5px; background:var(--pl-field);
  display:grid; place-items:center; cursor:pointer;
}
.msm-pl .msm-pl-consent input:checked{background:var(--pl-gold); border-color:var(--pl-gold)}
.msm-pl .msm-pl-consent input:checked::after{content:""; width:5px; height:9px; border:solid #1a1d1a; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)}
.msm-pl .msm-pl-consent.is-invalid input{border-color:var(--pl-error)}
.msm-pl .msm-pl-consent a{color:var(--pl-fg); text-decoration:underline; text-underline-offset:2px}

.msm-pl-trap{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}

.msm-pl .msm-pl-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:54px; margin:6px 0 0; padding:0 24px;
  background:var(--pl-gold); color:#1a1d1a; border:none; border-radius:99px;
  font:700 15px/1 var(--pl-sans); letter-spacing:.01em; text-transform:none; cursor:pointer;
  box-shadow:0 14px 34px rgba(210,110,35,.28);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.msm-pl .msm-pl-submit:hover{background:var(--pl-gold-hover); transform:translateY(-1px); box-shadow:0 18px 40px rgba(210,110,35,.38)}
.msm-pl .msm-pl-submit svg{width:18px; height:18px; transition:transform .2s}
.msm-pl .msm-pl-submit:hover svg{transform:translateX(3px)}
.msm-pl .msm-pl-submit[disabled]{opacity:.7; cursor:progress; transform:none}
.msm-pl .msm-pl-submit--ghost{background:transparent; color:var(--pl-fg); border:1px solid var(--pl-line); box-shadow:none}
.msm-pl .msm-pl-submit--ghost:hover{background:rgba(246,241,230,.06); box-shadow:none}

.msm-pl-msg{display:block; min-height:18px; font:400 13px/1.4 var(--pl-sans); color:var(--pl-error); text-align:center}

/* ---- Éxito ---- */
.msm-pl-done{display:flex; flex-direction:column; align-items:flex-start; justify-content:center}
.msm-pl-done[hidden]{display:none}
.msm-pl-check{
  display:grid; place-items:center; width:64px; height:64px; margin-bottom:22px; border-radius:50%;
  background:var(--pl-gold); color:#1a1d1a; box-shadow:0 0 0 10px rgba(210,110,35,.14);
  animation:msmPlPop .5s cubic-bezier(.22,1.4,.4,1) both;
}
.msm-pl-check svg{width:30px; height:30px}
@keyframes msmPlPop{from{transform:scale(.4); opacity:0}to{transform:none; opacity:1}}

body.msm-pl-locked{overflow:hidden}

/* ---- Caja de la ficha de curso (sidebar de Tutor) ---- */
.msm-pl-box{display:flex; flex-direction:column; gap:12px}
.msm-pl-box-eyebrow{display:inline-flex; align-items:center; gap:10px; font:500 11px/1.4 'Roboto',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#d26e23}
.msm-pl-box-text{margin:0; font-size:14px; line-height:1.55; opacity:.8}
.msm-pl-box .tutor-btn{white-space:normal; text-align:center; line-height:1.3}

/* CTA del header (público y home): una sola línea también en móvil. */
.msm-nav-right [data-msm-prelaunch],.nav-right [data-msm-prelaunch]{white-space:nowrap}

/* CTA del héroe del home: el texto largo no cabía en el ancho pensado para «Únete ahora». */
.hero-int-cta[data-msm-prelaunch]{white-space:nowrap; text-align:center; padding-left:40px; padding-right:40px}
@media (max-width:600px){
  .hero-int-cta[data-msm-prelaunch]{white-space:normal; padding:16px 28px}
}

/* El modal de login de Tutor no tiene sentido mientras la puerta esté cerrada. */
body.msm-prelaunch .tutor-login-modal{display:none !important}

/* ---- Responsive ---- */
@media (max-width:860px){
  .msm-pl{padding:12px; align-items:flex-end}
  .msm-pl-card{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); border-radius:24px}
  /* En móvil el mosaico se vuelve una cinta horizontal en la parte superior. */
  .msm-pl-media{display:block; height:150px; min-height:0; padding:12px 0}
  .msm-pl-media::before,.msm-pl-media::after{top:0; bottom:0; height:auto; width:18%}
  .msm-pl-media::before{left:0; right:auto; background:linear-gradient(90deg,var(--pl-bg2),transparent)}
  .msm-pl-media::after{right:0; left:auto; background:linear-gradient(-90deg,var(--pl-bg2),transparent)}
  .msm-pl-col{height:100%}
  .msm-pl-col--down{display:none}
  .msm-pl-col--up .msm-pl-track{position:static; flex-direction:row; height:100%; width:max-content; animation:msmPlLeft 30s linear infinite}
  .msm-pl-tile{height:100%; aspect-ratio:4/3; border-radius:14px}
  .msm-pl-media-badge{display:none}
  .msm-pl-body{padding:28px 22px 24px}
  .msm-pl .msm-pl-title{font-size:32px}
  .msm-pl .msm-pl-sub{font-size:14px; margin-bottom:20px}
  .msm-pl-close{top:10px; right:10px}
}
@keyframes msmPlLeft{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}

@media (max-width:480px){
  .msm-pl-row{grid-template-columns:1fr}
  .msm-pl-media{height:120px}
  .msm-pl .msm-pl-title{font-size:28px}
  .msm-pl .msm-pl-chip span{padding:9px 13px; font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .msm-pl-track,.msm-pl-orb,.msm-pl-dot,.msm-pl-check{animation:none !important}
  .msm-pl-card,.msm-pl-backdrop{transition:none}
}