/* ============================================================
   plataforma.css — landing de EDUCREIA (plataforma.html)
   Capa 3 (pantalla), scopeada a .mk. Se carga DESPUÉS de app.css
   y SOLO en esta página: las animaciones son pesadas y no tienen
   por qué viajar al resto de la app.

   Sigue la técnica de ayuda-anim.js: animaciones CSS puras, con
   los tokens del sistema (navy/teal), sin librerías, respetando
   prefers-reduced-motion. Cada bloque tiene su "escena" que hace
   de gráfico + captura de esa función.

   Convención de arranque: una escena (.pl-scene) queda PAUSADA
   hasta que entra en pantalla (el observer de la página le agrega
   .is-in, igual que a .edu-reveal). Así nada anima fuera de vista.
   Los pocos px sueltos son geometría de dibujo (ticks, nodos,
   cursores), como la excepción del certificado en DESIGN.md.
   ============================================================ */

/* ── Imagen del hero (paneles de la plataforma) ── */
.mk-hero-img{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.32)) }

/* ── Barra de navegación en azul oscuro (texto y logo claros) ── */
.mk-nav{ background:var(--navy-950); border-bottom-color:rgba(255,255,255,.10) }
.mk-nav-links a{ color:rgba(255,255,255,.82) }
.mk-nav-links a:hover{ color:var(--teal-300) }
.mk-nav .btn-ghost{ color:#fff }
.mk-nav .btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff }

/* ── Gate de animación: pausada hasta entrar en pantalla ── */
.pl-scene:not(.is-in) *{ animation-play-state:paused !important }

/* El hero es un grid 1fr en móvil: sin min-width:0 el min-content de la copy
   fuerza su columna más ancha que la pantalla y el texto queda cortado (el hero
   tiene overflow:hidden). Va acá, scopeado, para no tocar app.css compartido. */
.mk-hero-copy, .mk-hero-media{ min-width:0 }

/* Cursor de tipeo: app.css lo hace con un border-right sobre un inline-block
   multilínea → se ve como una barra altísima. Acá lo apagamos y usamos un
   caret chico que va al final del texto, como una escritura de verdad. */
.mk-typing{ border-right:0 !important; animation:none !important }
.mk-caret{ display:inline-block; width:3px; height:.82em; margin-left:.05em; border-radius:1px;
  background:var(--teal-300); vertical-align:-0.06em; animation:mk-caret-blink .7s step-end infinite }
@keyframes mk-caret-blink{ 0%,50%{ opacity:1 } 51%,100%{ opacity:0 } }

/* ── Bloque de función en dos columnas (copy + visual) ── */
.mk-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8);
  align-items:center; max-width:var(--mk-max); margin:0 auto; padding:0 var(--mk-gutter) }
.mk-split.is-rev .mk-split-media{ order:-1 }
/* min-width:0 deja que las columnas 1fr se achiquen por debajo del contenido
   (si no, el min-content de una escena/párrafo fuerza scroll horizontal en móvil) */
.mk-split-copy, .mk-split-media{ min-width:0 }
.mk-split-copy .eyebrow{ margin-bottom:var(--sp-3) }
.mk-split-copy h2{ font-size:var(--fs-32); line-height:var(--lh-snug) }
.mk-split-copy .lead{ color:var(--text-muted); margin-top:var(--sp-3) }

/* Lista de bullets con check (reusa el look de .mk-plan-list) */
.mk-points{ list-style:none; margin:var(--sp-5) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--sp-4) }
.mk-points li{ position:relative; padding-left:var(--sp-7); font-size:var(--fs-15);
  line-height:var(--lh-normal); color:var(--text-body) }
.mk-points li strong{ color:var(--text-strong) }
.mk-points li::before{ content:""; position:absolute; left:0; top:1px; width:22px; height:22px;
  border-radius:var(--r-pill); background:var(--teal-050) }
.mk-points li::after{ content:""; position:absolute; left:7px; top:6px; width:6px; height:11px;
  border-right:2px solid var(--teal-700); border-bottom:2px solid var(--teal-700); transform:rotate(45deg) }

/* ── Marco de escena (hace de "captura"): panel redondeado ── */
.pl-fig{ position:relative; margin:0; background:var(--surface-card); border:1px solid var(--slate-200);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden }
.pl-fig-pad{ padding:var(--sp-5) }
/* Barra tipo navegador arriba de una escena */
.pl-chrome{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  background:var(--surface-page); border-bottom:1px solid var(--slate-200) }
.pl-chrome i{ width:var(--sp-2); height:var(--sp-2); border-radius:50%; background:var(--slate-300) }
.pl-chrome span{ margin-left:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-12); color:var(--text-muted) }
.pl-cap{ display:block; margin-top:var(--sp-3); text-align:center;
  font-size:var(--fs-13); color:var(--text-subtle) }

/* ============================================================
   2 · COBROS — barras "lo que vendés vs lo que te llega"
   ============================================================ */
.pl-pay{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); padding:var(--sp-5) }
.pl-pay-col{ display:flex; flex-direction:column; gap:var(--sp-3); align-items:center;
  padding:var(--sp-4); border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-page) }
.pl-pay-col.is-edu{ border-color:var(--teal-600); background:var(--teal-050);
  box-shadow:0 0 0 3px rgba(15,168,184,.14) }
.pl-pay-h{ font-size:var(--fs-13); font-weight:700; color:var(--text-muted); text-align:center }
.pl-pay-col.is-edu .pl-pay-h{ color:var(--teal-700) }
.pl-pay-track{ position:relative; width:100%; height:170px; display:flex; align-items:flex-end;
  justify-content:center; gap:var(--sp-3) }
/* el riel (slate) es "lo que vendés" · el relleno es "lo que te llega" */
.pl-bar{ position:relative; width:56px; height:100%; border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--slate-200); overflow:hidden; display:flex; align-items:flex-end }
.pl-bar > span{ display:block; width:100%; height:0; border-radius:var(--r-sm) var(--r-sm) 0 0 }
.pl-bar-get{ background:linear-gradient(180deg,var(--teal-400),var(--teal-600));
  animation:pl-fill-full 6s var(--ease-out) infinite both }
.pl-bar-cut{ background:linear-gradient(180deg,var(--slate-300),var(--slate-400));
  animation:pl-fill-cut 6s var(--ease-out) infinite both }
@keyframes pl-fill-full{ 0%,15%{height:0} 55%,100%{height:100%} }
@keyframes pl-fill-cut{ 0%,15%{height:0} 55%,100%{height:72%} }
.pl-pay-amt{ font-family:var(--font-mono); font-weight:700; font-size:var(--fs-18); color:var(--text-strong) }
.pl-pay-col.is-edu .pl-pay-amt{ color:var(--teal-700) }
.pl-pay-note{ font-size:var(--fs-12); color:var(--text-muted); text-align:center; min-height:2.4em }
.pl-pay-col.is-edu .pl-pay-note{ color:var(--teal-700); font-weight:600 }

/* ============================================================
   3 · GRUPOS — mismo curso duplicado (desorden) vs un curso, grupos
   ============================================================ */
.pl-grp{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-4); align-items:center; padding:var(--sp-5) }
.pl-grp-side{ display:flex; flex-direction:column; gap:var(--sp-2) }
.pl-grp-h{ font-size:var(--fs-12); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); text-align:center; margin-bottom:var(--sp-1) }
/* Izquierda: 4 copias apiladas del mismo curso, con gesto de tachado */
.pl-dupe{ position:relative; display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); background:var(--surface-page); border:1px solid var(--slate-200);
  border-radius:var(--r-sm); font-size:var(--fs-12); color:var(--text-muted) }
.pl-dupe b{ color:var(--text-body); font-weight:600 }
.pl-dupe::after{ content:""; position:absolute; left:8%; right:8%; top:50%; height:2px;
  background:var(--danger); transform:scaleX(0); transform-origin:left;
  animation:pl-strike 6s var(--ease-out) infinite both }
.pl-dupe.d2::after{ animation-delay:.4s } .pl-dupe.d3::after{ animation-delay:.8s } .pl-dupe.d4::after{ animation-delay:1.2s }
@keyframes pl-strike{ 0%,20%{transform:scaleX(0)} 45%,100%{transform:scaleX(1)} }
.pl-grp-arrow{ display:grid; place-items:center; width:var(--sp-7); height:var(--sp-7);
  border-radius:var(--r-pill); background:var(--teal-050); color:var(--teal-700); font-size:var(--fs-20) }
/* Derecha: un curso con 4 grupos colgando */
.pl-one{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3);
  background:var(--teal-050); border:1px solid var(--teal-600); border-radius:var(--r-sm);
  font-weight:700; color:var(--teal-700); font-size:var(--fs-13) }
.pl-grp-groups{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-top:var(--sp-2) }
.pl-chip-grp{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  background:var(--surface-card); border:1px solid var(--slate-200); border-radius:var(--r-sm);
  font-size:var(--fs-12); color:var(--text-body); opacity:0; transform:translateY(6px);
  animation:pl-pop 6s var(--ease-out) infinite both }
.pl-chip-grp::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--teal-500) }
.pl-chip-grp.g2{ animation-delay:.15s } .pl-chip-grp.g3{ animation-delay:.3s } .pl-chip-grp.g4{ animation-delay:.45s }
@keyframes pl-pop{ 0%,25%{opacity:0; transform:translateY(6px)} 45%,100%{opacity:1; transform:none} }

/* ============================================================
   4 · COMUNIDAD — la puerta del Zoom (gate de acceso)
   ============================================================ */
.pl-door{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-5) }
.pl-door-row{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); align-items:center }
.pl-door-lbl{ font-size:var(--fs-12); font-weight:700; color:var(--text-muted); writing-mode:horizontal-tb }
.pl-flow{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap }
.pl-node{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-pill); font-size:var(--fs-12); font-weight:600; white-space:nowrap;
  background:var(--surface-page); border:1px solid var(--slate-200); color:var(--text-body) }
.pl-node.is-link{ font-family:var(--font-mono); color:var(--text-muted) }
.pl-arrow{ color:var(--slate-400); font-weight:700 }
.pl-node.ok{ background:var(--success-soft); border-color:transparent; color:var(--success) }
.pl-node.bad{ background:var(--danger-soft); border-color:transparent; color:var(--danger) }
/* cada bloque es su propia burbuja para que se lean como 2 cosas distintas */
.pl-door-old, .pl-door-new{ display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-4); border-radius:var(--r-lg); border:1px solid var(--slate-200);
  background:var(--surface-page) }
.pl-door-old{ opacity:.85 }
.pl-door-new{ border-color:var(--navy-200); background:var(--navy-050) }
.pl-gate{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-pill); background:var(--navy-700); color:#fff; font-weight:700; font-size:var(--fs-12) }
/* el "check" de membresía parpadea entre Sí/No para mostrar que se revisa cada vez */
.pl-door-new .ok{ animation:pl-blink-ok 5s steps(1) infinite both }
.pl-door-new .bad{ animation:pl-blink-bad 5s steps(1) infinite both }
@keyframes pl-blink-ok{ 0%,49%{opacity:1} 50%,100%{opacity:.25} }
@keyframes pl-blink-bad{ 0%,49%{opacity:.25} 50%,100%{opacity:1} }
.pl-door-foot{ font-size:var(--fs-12); color:var(--text-subtle); text-align:center; margin-top:var(--sp-1) }

/* ============================================================
   4b · COMUNIDAD (feed) — posteos, likes y una respuesta
   ============================================================ */
.pl-feed{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3) }
.pl-post{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-page) }
.pl-post-h{ display:flex; align-items:center; gap:var(--sp-2) }
.pl-post-h .pl-av{ width:var(--sp-7); height:var(--sp-7); font-size:var(--fs-12) }
.pl-post-name{ font-weight:700; font-size:var(--fs-13); color:var(--text-strong) }
.pl-post-time{ margin-left:auto; font-size:var(--fs-11); color:var(--text-subtle) }
.pl-post-txt{ font-size:var(--fs-13); color:var(--text-body) }
.pl-post-acts{ display:flex; gap:var(--sp-5); font-size:var(--fs-12); color:var(--text-muted) }
.pl-post-acts span{ display:inline-flex; align-items:center; gap:6px }
.pl-post-acts b{ color:var(--text-body); font-family:var(--font-mono) }
.pl-like i{ display:inline-block; animation:pl-like-pulse 4s var(--ease-in-out) infinite both }
@keyframes pl-like-pulse{ 0%,58%{transform:scale(1)} 70%{transform:scale(1.35)} 82%,100%{transform:scale(1)} }
.pl-reply-row{ margin-left:var(--sp-6); display:flex; gap:var(--sp-2); align-items:flex-start;
  opacity:0; transform:translateY(6px); animation:pl-rev-in 5s var(--ease-out) infinite both }
.pl-reply-row .pl-av{ width:var(--sp-6); height:var(--sp-6); font-size:var(--fs-11); flex:none }
.pl-reply-b{ font-size:var(--fs-12); color:var(--text-body); background:var(--surface-card);
  border:1px solid var(--slate-200); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3) }
.pl-reply-b b{ color:var(--text-strong) }

/* ============================================================
   4c · GAMIFICACIÓN — podio top-3 + confeti
   ============================================================ */
.pl-game{ position:relative; overflow:hidden; padding:var(--sp-5) var(--sp-4) var(--sp-4) }
.pl-game-h{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-bottom:var(--sp-4);
  font-weight:800; color:var(--teal-700); font-size:var(--fs-14) }
.pl-podium{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); align-items:end }
.pl-pod{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2) }
.pl-pod .pl-av{ width:var(--sp-8); height:var(--sp-8) }
.pl-pod-name{ font-size:var(--fs-11); color:var(--text-muted) }
.pl-pod-bar{ width:100%; display:flex; align-items:flex-start; justify-content:center; padding-top:var(--sp-2);
  border-radius:var(--r-sm) var(--r-sm) 0 0; background:var(--teal-050); border:1px solid var(--teal-200);
  font-family:var(--font-mono); font-weight:800; color:var(--teal-700);
  height:0; animation:pl-pod-rise 4.5s var(--ease-out) infinite both }
.pl-pod.first .pl-pod-bar{ --h:96px; background:linear-gradient(180deg,var(--teal-300),var(--teal-050)); border-color:var(--teal-400) }
.pl-pod.second .pl-pod-bar{ --h:68px; animation-delay:.12s }
.pl-pod.third .pl-pod-bar{ --h:48px; animation-delay:.24s }
@keyframes pl-pod-rise{ 0%{height:0} 50%,100%{height:var(--h,56px)} }
/* confeti cayendo */
.pl-confetti{ position:absolute; inset:0; z-index:2; pointer-events:none }
.pl-confetti i{ position:absolute; top:-12px; width:7px; height:10px; border-radius:2px; opacity:.9;
  animation:pl-fall 3.2s linear infinite both }
.pl-confetti i:nth-child(3n+1){ background:var(--teal-400) }
.pl-confetti i:nth-child(3n+2){ background:var(--navy-400) }
.pl-confetti i:nth-child(3n){ background:#f4b740 }
.pl-confetti i:nth-child(1){ left:8%;  animation-delay:-.2s }
.pl-confetti i:nth-child(2){ left:20%; animation-delay:-1.4s }
.pl-confetti i:nth-child(3){ left:33%; animation-delay:-.7s }
.pl-confetti i:nth-child(4){ left:46%; animation-delay:-2.1s }
.pl-confetti i:nth-child(5){ left:58%; animation-delay:-1s }
.pl-confetti i:nth-child(6){ left:70%; animation-delay:-.4s }
.pl-confetti i:nth-child(7){ left:82%; animation-delay:-1.8s }
.pl-confetti i:nth-child(8){ left:92%; animation-delay:-2.5s }
@keyframes pl-fall{ 0%{transform:translateY(-12px) rotate(0)} 100%{transform:translateY(230px) rotate(300deg)} }

/* ============================================================
   5 · VIDEO — player con capítulos + grabador flotante
   ============================================================ */
.pl-vid-screen{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy-800),var(--navy-950));
  display:grid; place-items:center }
.pl-vid-play{ width:56px; height:56px; border-radius:var(--r-pill); background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; color:#fff; font-size:var(--fs-20) }
/* pista con marcas de capítulo y cabezal que avanza */
.pl-vid-bar{ position:absolute; left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); height:6px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.2) }
.pl-vid-fill{ height:100%; width:0; border-radius:inherit; background:var(--teal-400);
  animation:pl-seek 8s linear infinite both }
@keyframes pl-seek{ 0%{width:4%} 100%{width:100%} }
.pl-vid-tick{ position:absolute; top:-3px; width:2px; height:12px; background:#fff; border-radius:var(--r-pill); opacity:.8 }
.pl-vid-tick.t1{ left:22% } .pl-vid-tick.t2{ left:52% } .pl-vid-tick.t3{ left:78% }
/* grabador flotante (cámara redonda sobre la pantalla) */
.pl-rec{ position:absolute; right:var(--sp-4); top:var(--sp-4); display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill); background:rgba(0,0,0,.45);
  color:#fff; font-size:var(--fs-11); font-weight:700; backdrop-filter:blur(4px) }
.pl-rec i{ width:8px; height:8px; border-radius:50%; background:#ff4d4d; animation:pl-pulse 1.4s var(--ease-in-out) infinite both }
@keyframes pl-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)} }
.pl-rec-cam{ position:absolute; left:var(--sp-4); bottom:calc(var(--sp-4) + 16px); width:52px; height:52px;
  border-radius:var(--r-pill); border:2px solid #fff; background:radial-gradient(circle at 50% 38%,var(--teal-300),var(--navy-800));
  box-shadow:var(--shadow-lg) }
/* lista de capítulos abajo */
.pl-chaps{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2) }
.pl-chap{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm); font-size:var(--fs-13); color:var(--text-body); border:1px solid transparent }
.pl-chap b{ font-family:var(--font-mono); color:var(--teal-700); font-weight:700 }
.pl-chap.on{ background:var(--teal-050); border-color:var(--teal-200) }
.pl-chap.c1{ animation:pl-chap-on 8s steps(1) infinite both }
.pl-chap.c2{ animation:pl-chap-on 8s steps(1) infinite both; animation-delay:-6s }
.pl-chap.c3{ animation:pl-chap-on 8s steps(1) infinite both; animation-delay:-4s }
@keyframes pl-chap-on{ 0%,22%{background:var(--teal-050); border-color:var(--teal-200)}
  23%,100%{background:transparent; border-color:transparent} }

/* ============================================================
   6 · MULTIFORMATO — misma clase en video / audio / PDF
   ============================================================ */
.pl-fmt{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); padding:var(--sp-5) }
.pl-dev{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4); border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-page);
  transition:none }
.pl-dev-ic{ width:var(--sp-8); height:var(--sp-8); display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--teal-050); color:var(--teal-700) }
.pl-dev-ic svg{ width:26px; height:26px }
.pl-dev-t{ font-weight:700; font-size:var(--fs-14); color:var(--text-strong) }
.pl-dev-s{ font-size:var(--fs-12); color:var(--text-muted); text-align:center }
/* halo rotando entre los tres para mostrar "una misma clase, tres formas" */
.pl-dev{ animation:pl-fmt-glow 9s var(--ease-in-out) infinite both }
.pl-dev.f2{ animation-delay:-3s } .pl-dev.f3{ animation-delay:-6s }
@keyframes pl-fmt-glow{ 0%,22%{ box-shadow:var(--shadow-md); border-color:var(--teal-600); transform:translateY(-4px) }
  33%,100%{ box-shadow:none; border-color:var(--slate-200); transform:none } }

/* ============================================================
   7 · TRABAJOS PRÁCTICOS — ventana de entrega + cuenta atrás
   ============================================================ */
/* El mock de TP tiene poco contenido; sin tope se despatarra en tablet/escritorio
   (el botón queda solo con mucho vacío al lado). Lo acotamos y centramos para que
   se lea como una "captura" compacta a cualquier ancho. */
.pl-win{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4);
  width:100%; max-width:24rem; margin-inline:auto }
.pl-win-card{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4);
  border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-page) }
.pl-win-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) }
.pl-win-title{ font-weight:700; font-size:var(--fs-14); color:var(--text-strong) }
.pl-win-pill{ font-size:var(--fs-11); font-weight:700; padding:2px 10px; border-radius:var(--r-pill) }
.pl-win-open{ background:var(--success-soft); color:var(--success) }
.pl-win-cd{ display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono);
  font-size:var(--fs-13); color:var(--text-muted) }
.pl-win-cd b{ padding:2px 8px; border-radius:var(--r-xs); background:var(--navy-700); color:#fff }
.pl-drop{ display:grid; place-items:center; padding:var(--sp-5); border:2px dashed var(--slate-300);
  border-radius:var(--r-md); color:var(--text-muted); font-size:var(--fs-13); text-align:center }
.pl-drop b{ display:block; color:var(--text-body) }
.pl-win-btn{ align-self:flex-start; padding:var(--sp-2) var(--sp-5); border-radius:var(--r-sm);
  background:var(--brand-gradient-control); color:#fff; font-weight:600; font-size:var(--fs-14);
  animation:pl-nudge 4s var(--ease-in-out) infinite both }
@keyframes pl-nudge{ 0%,100%{transform:none} 50%{transform:translateY(-3px)} }
/* nota + estado que cambia cuando "cierra" */
.pl-win-grade{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--text-body) }
.pl-win-grade b{ display:inline-grid; place-items:center; width:var(--sp-7); height:var(--sp-7); border-radius:var(--r-pill);
  background:var(--teal-050); color:var(--teal-700); font-family:var(--font-mono); font-weight:800 }

/* ============================================================
   7b · CERTIFICADOS — ejemplo de diploma con QR y sello
   ============================================================ */
.pl-cert{ padding:var(--sp-5); display:grid; place-items:center; background:var(--surface-page) }
.pl-cert-card{ position:relative; width:100%; max-width:420px; text-align:center;
  background:var(--surface-card); border:1px solid var(--slate-200); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:var(--sp-6);
  outline:2px solid var(--teal-100); outline-offset:-8px }   /* doble marco tipo diploma */
.pl-cert-logo{ display:flex; justify-content:flex-start; align-items:center; gap:6px; margin-bottom:var(--sp-4);
  padding-right:52px; font-weight:800; color:var(--navy-700); font-size:var(--fs-14) }
.pl-cert-logo i{ width:10px; height:10px; border-radius:50%; background:var(--teal-500) }
.pl-cert-kicker{ font-size:var(--fs-11); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted) }
.pl-cert-name{ font-size:var(--fs-24); font-weight:800; color:var(--text-strong); margin:var(--sp-2) 0 }
.pl-cert-course{ font-size:var(--fs-13); color:var(--text-body) }
.pl-cert-course b{ color:var(--teal-700) }
.pl-cert-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-5) }
.pl-cert-sign{ flex:1; text-align:left }
.pl-cert-sign i{ display:block; margin-bottom:4px; padding-bottom:2px; border-bottom:1.5px solid var(--slate-300);
  font-style:italic; font-weight:700; color:var(--navy-700); font-size:var(--fs-16) }
.pl-cert-sign small{ font-size:var(--fs-11); color:var(--text-muted) }
.pl-cert-qr{ width:46px; height:46px; flex:none; border:1px solid var(--slate-300); border-radius:4px;
  background-color:#fff;
  background-image:conic-gradient(from 0deg, var(--navy-900) 90deg, #0000 0 180deg, var(--navy-900) 0 270deg, #0000 0);
  background-size:9px 9px }
.pl-cert-seal{ position:absolute; right:var(--sp-5); top:var(--sp-4); width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:var(--fs-20);
  background:radial-gradient(circle at 40% 35%, #f6c95a, #d99a1a); box-shadow:var(--shadow-md);
  transform:scale(0) rotate(-40deg); animation:pl-seal-in 5s var(--ease-out) infinite both }
@keyframes pl-seal-in{ 0%,20%{transform:scale(0) rotate(-40deg)} 34%{transform:scale(1.14) rotate(6deg)}
  44%,100%{transform:scale(1) rotate(0)} }

/* ============================================================
   7c · ENCUESTAS DE FINALIZACIÓN — encuesta branded en el momento justo
   ============================================================ */
.pl-survey{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3) }
.pl-survey-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border-radius:var(--r-pill); background:var(--teal-050); color:var(--teal-700);
  font-size:var(--fs-12); font-weight:700 }
.pl-survey-card{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4);
  border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-page) }
.pl-survey-q{ font-weight:700; font-size:var(--fs-14); color:var(--text-strong) }
.pl-emojis{ display:flex; gap:var(--sp-2) }
.pl-emojis span{ width:var(--sp-8); height:var(--sp-8); display:grid; place-items:center; border-radius:var(--r-md);
  border:1px solid var(--slate-200); background:var(--surface-card); font-size:var(--fs-20);
  filter:grayscale(.6); opacity:.65 }
.pl-emojis .pick{ filter:none; opacity:1; border-color:var(--teal-600); background:var(--teal-050);
  box-shadow:0 0 0 3px rgba(15,168,184,.14); animation:pl-pick 5s var(--ease-out) infinite both }
@keyframes pl-pick{ 0%,25%{transform:scale(1)} 34%{transform:scale(1.18)} 44%,100%{transform:scale(1)} }
.pl-survey-comment{ font-size:var(--fs-13); color:var(--text-body); padding:var(--sp-3);
  border-radius:var(--r-sm); background:var(--surface-card); border:1px solid var(--slate-200);
  opacity:0; animation:pl-rev-in 5s var(--ease-out) infinite both }
.pl-survey-comment b{ color:var(--text-strong) }
.pl-survey-btn{ align-self:flex-start; padding:var(--sp-2) var(--sp-5); border-radius:var(--r-sm);
  background:var(--brand-gradient-control); color:#fff; font-weight:600; font-size:var(--fs-13) }

/* ============================================================
   8 · SEGUIMIENTO — ficha del alumno con barras que se llenan
   ============================================================ */
.pl-ficha-head{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4);
  border-bottom:1px solid var(--slate-200) }
.pl-av{ width:var(--sp-8); height:var(--sp-8); border-radius:var(--r-pill); background:var(--brand-gradient);
  color:#fff; display:grid; place-items:center; font-weight:800 }
.pl-ficha-name{ font-weight:700; color:var(--text-strong) }
.pl-ficha-sub{ font-size:var(--fs-12); color:var(--text-muted) }
.pl-tabs{ display:flex; gap:var(--sp-1); padding:var(--sp-3) var(--sp-4) 0; flex-wrap:wrap }
.pl-tab{ font-size:var(--fs-12); font-weight:600; padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  color:var(--text-muted); background:var(--surface-page) }
.pl-tab.on{ background:var(--teal-050); color:var(--teal-700) }
.pl-ficha-body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3) }
.pl-prog{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-1) var(--sp-3); align-items:center }
.pl-prog-lbl{ font-size:var(--fs-13); color:var(--text-body) }
.pl-prog-pct{ font-family:var(--font-mono); font-size:var(--fs-12); font-weight:700; color:var(--teal-700) }
.pl-prog-bar{ grid-column:1 / -1; height:8px; border-radius:var(--r-pill); background:var(--surface-sunken); overflow:hidden }
.pl-prog-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--teal-400),var(--teal-600));
  animation:pl-bar-grow 5s var(--ease-out) infinite both }
.pl-prog.p1 i{ --to:88% } .pl-prog.p2 i{ --to:64% } .pl-prog.p3 i{ --to:35% }
.pl-prog.p2 i{ animation-delay:.15s } .pl-prog.p3 i{ animation-delay:.3s }
@keyframes pl-bar-grow{ 0%{width:0} 55%,100%{width:var(--to,60%)} }
.pl-note-chip{ font-size:var(--fs-12); color:var(--text-muted); padding:var(--sp-2) var(--sp-3);
  background:var(--surface-page); border:1px dashed var(--slate-300); border-radius:var(--r-sm) }
.pl-note-chip b{ color:var(--text-body) }

/* ============================================================
   9 · FEEDBACK — estrellas que se llenan + reseña publicada
   ============================================================ */
.pl-rev{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4) }
.pl-stars{ display:flex; gap:var(--sp-1); font-size:var(--fs-24); color:var(--slate-200) }
.pl-stars span{ color:var(--slate-200); animation:pl-star 5s steps(1) infinite both }
.pl-stars .s2{ animation-delay:.25s } .pl-stars .s3{ animation-delay:.5s }
.pl-stars .s4{ animation-delay:.75s } .pl-stars .s5{ animation-delay:1s }
@keyframes pl-star{ 0%,10%{color:var(--slate-200)} 20%,100%{color:#f4b740} }
.pl-rev-q{ font-size:var(--fs-13); color:var(--text-muted) }
.pl-rev-card{ display:flex; gap:var(--sp-3); padding:var(--sp-4); border:1px solid var(--slate-200);
  border-radius:var(--r-md); background:var(--surface-page); opacity:0; transform:translateY(8px);
  animation:pl-rev-in 5s var(--ease-out) infinite both }
@keyframes pl-rev-in{ 0%,45%{opacity:0; transform:translateY(8px)} 65%,100%{opacity:1; transform:none} }
.pl-rev-card .pl-av{ flex:none }
.pl-rev-txt{ font-size:var(--fs-13); color:var(--text-body) }
.pl-rev-txt .who{ display:block; font-weight:700; color:var(--text-strong); margin-bottom:2px }
.pl-rev-mini{ display:flex; gap:1px; color:#f4b740; font-size:var(--fs-12); margin-top:var(--sp-1) }

/* ============================================================
   10 · ASISTENTE IA — chat con typing y respuesta
   ============================================================ */
.pl-chat{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3) }
.pl-msg{ max-width:82%; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); font-size:var(--fs-13);
  line-height:var(--lh-normal) }
.pl-msg.me{ align-self:flex-end; background:var(--navy-700); color:#fff; border-bottom-right-radius:var(--r-xs) }
.pl-msg.bot{ align-self:flex-start; background:var(--surface-page); border:1px solid var(--slate-200);
  color:var(--text-body); border-bottom-left-radius:var(--r-xs) }
.pl-bot-head{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2);
  font-weight:700; font-size:var(--fs-12); color:var(--teal-700) }
.pl-bot-head .pl-av{ width:var(--sp-6); height:var(--sp-6); font-size:var(--fs-12) }
.pl-msg.me{ opacity:0; animation:pl-msg-in 7s var(--ease-out) infinite both }
.pl-typing{ align-self:flex-start; display:inline-flex; gap:5px; padding:var(--sp-3) var(--sp-4);
  background:var(--surface-page); border:1px solid var(--slate-200); border-radius:var(--r-lg);
  animation:pl-typing-show 7s steps(1) infinite both }
.pl-typing i{ width:7px; height:7px; border-radius:50%; background:var(--slate-400);
  animation:pl-dot 1s var(--ease-in-out) infinite both }
.pl-typing i:nth-child(2){ animation-delay:.15s } .pl-typing i:nth-child(3){ animation-delay:.3s }
@keyframes pl-dot{ 0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }
.pl-msg.bot.reply{ opacity:0; animation:pl-reply-in 7s var(--ease-out) infinite both }
@keyframes pl-msg-in{ 0%{opacity:0; transform:translateY(6px)} 12%,100%{opacity:1; transform:none} }
@keyframes pl-typing-show{ 0%,18%{opacity:0} 22%,55%{opacity:1} 60%,100%{opacity:0} }
@keyframes pl-reply-in{ 0%,58%{opacity:0; transform:translateY(6px)} 68%,100%{opacity:1; transform:none} }

/* ============================================================
   11 · MIGRACIÓN — cajas que entran a Educreia (3 pasos)
   ============================================================ */
.pl-move{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:center; padding:var(--sp-6) var(--sp-5) }
.pl-move-src{ display:flex; flex-direction:column; gap:var(--sp-2) }
.pl-box{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  background:var(--surface-page); border:1px solid var(--slate-200); border-radius:var(--r-sm);
  font-size:var(--fs-12); color:var(--text-body);
  animation:pl-move-box 6s var(--ease-in-out) infinite both }
.pl-box .em{ font-size:var(--fs-16) }
.pl-box.b2{ animation-delay:.5s } .pl-box.b3{ animation-delay:1s }
@keyframes pl-move-box{ 0%,15%{ transform:translateX(0); opacity:1 }
  45%{ transform:translateX(30px); opacity:.15 } 46%,100%{ transform:translateX(0); opacity:1 } }
.pl-move-to{ display:grid; place-items:center; gap:var(--sp-3); padding:var(--sp-5);
  border:2px dashed var(--teal-400); border-radius:var(--r-lg); background:var(--teal-050); text-align:center }
.pl-move-badge{ font-weight:800; color:var(--teal-700) }
.pl-move-count{ font-family:var(--font-mono); font-size:var(--fs-13); color:var(--teal-700) }

/* ============================================================
   12 · LANDINGS — bloques que caen y arman la página
   ============================================================ */
.pl-build{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); padding:var(--sp-5) }
.pl-palette{ display:flex; flex-direction:column; gap:var(--sp-2) }
.pl-block-src{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  background:var(--surface-page); border:1px solid var(--slate-200); border-radius:var(--r-sm);
  font-size:var(--fs-12); font-weight:600; color:var(--text-muted) }
.pl-block-src::before{ content:"⠿"; color:var(--slate-400) }
.pl-canvas{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-card) }
.pl-block{ border-radius:var(--r-sm); background:var(--surface-page); border:1px solid var(--slate-200);
  opacity:0; transform:translateY(-10px); animation:pl-drop-in 6s var(--ease-out) infinite both }
.pl-block.k-title{ height:26px } .pl-block.k-video{ height:56px; background:linear-gradient(135deg,var(--navy-700),var(--navy-900)) }
.pl-block.k-price{ height:34px } .pl-block.k-btn{ height:26px; background:var(--brand-gradient-control); border:0 }
.pl-block.bk2{ animation-delay:.4s } .pl-block.bk3{ animation-delay:.8s } .pl-block.bk4{ animation-delay:1.2s }
@keyframes pl-drop-in{ 0%,10%{opacity:0; transform:translateY(-10px)} 30%,100%{opacity:1; transform:none} }

/* ============================================================
   13 · AFILIADOS — flujo circular alumno→link→venta→comisión
   ============================================================ */
.pl-aff{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-6) var(--sp-5) }
.pl-aff-step{ display:inline-flex; flex-direction:column; align-items:center; gap:var(--sp-1);
  padding:var(--sp-3); min-width:88px; border:1px solid var(--slate-200); border-radius:var(--r-md);
  background:var(--surface-page); text-align:center;
  animation:pl-aff-on 6s steps(1) infinite both }
.pl-aff-step .em{ font-size:var(--fs-24) }
.pl-aff-step small{ font-size:var(--fs-11); color:var(--text-muted); font-weight:600 }
.pl-aff-step.a2{ animation-delay:1.2s } .pl-aff-step.a3{ animation-delay:2.4s } .pl-aff-step.a4{ animation-delay:3.6s }
@keyframes pl-aff-on{ 0%,15%{ border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(15,168,184,.14); background:var(--teal-050) }
  25%,100%{ border-color:var(--slate-200); box-shadow:none; background:var(--surface-page) } }
.pl-aff-arrow{ color:var(--teal-500); font-size:var(--fs-20); font-weight:700 }

/* ============================================================
   13b · VENDER MEJOR — tienda con barra de anuncios, pop-up,
   cupón y prueba social en vivo (todo en una escena)
   ============================================================ */
.pl-sell{ position:relative }
/* barra de anuncios que se desplaza */
.pl-ann{ display:flex; align-items:center; padding:var(--sp-2) var(--sp-4);
  background:var(--brand-gradient-control); color:#fff; font-size:var(--fs-12); font-weight:700;
  white-space:nowrap; overflow:hidden }
.pl-ann span{ display:inline-block; animation:pl-ann-slide 12s linear infinite both }
@keyframes pl-ann-slide{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.pl-shop{ position:relative; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3) }
.pl-shop-prod{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3);
  border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-page) }
.pl-shop-cover{ width:var(--sp-8); height:var(--sp-8); flex:none; border-radius:var(--r-sm); background:var(--brand-gradient) }
.pl-shop-meta{ min-width:0 }
.pl-shop-t{ font-weight:700; font-size:var(--fs-14); color:var(--text-strong) }
.pl-shop-price{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--text-muted) }
.pl-view{ align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:2px 10px; border-radius:var(--r-pill); background:var(--teal-050); color:var(--teal-700);
  font-size:var(--fs-12); font-weight:600 }
.pl-view b{ font-family:var(--font-mono) }
/* order bump: casillero tildado que suma un extra */
.pl-bump{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  border:1px dashed var(--teal-600); border-radius:var(--r-sm); background:var(--teal-050) }
.pl-bump-box{ width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:4px;
  background:var(--teal-600); color:#fff; font-size:var(--fs-12); font-weight:800 }
.pl-bump-txt{ font-size:var(--fs-12); color:var(--text-body) }
.pl-bump-txt b{ color:var(--teal-700) }
.pl-coupon{ display:flex; align-items:center; gap:var(--sp-2) }
.pl-coupon-fld{ flex:1; padding:var(--sp-2) var(--sp-3); border:1px dashed var(--slate-300); border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:var(--fs-13); color:var(--text-body); background:var(--surface-card) }
.pl-coupon-ok{ padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm); background:var(--navy-700); color:#fff;
  font-size:var(--fs-12); font-weight:700 }
.pl-coupon-tot{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-13); color:var(--text-body) }
.pl-coupon-tot .a{ text-decoration:line-through; color:var(--text-subtle); margin-right:var(--sp-2) }
.pl-coupon-tot .b{ font-family:var(--font-mono); font-weight:800; color:var(--teal-700) }
/* pop-up de oferta (esquina), aparece y se va */
.pl-pop{ position:absolute; right:var(--sp-3); top:var(--sp-3); z-index:2; width:150px; padding:var(--sp-3);
  border-radius:var(--r-md); background:var(--surface-card); border:1px solid var(--teal-600); box-shadow:var(--shadow-lg);
  font-size:var(--fs-12); color:var(--text-muted); opacity:0; transform:translateY(-6px) scale(.96);
  animation:pl-pop-in 8s var(--ease-out) infinite both }
.pl-pop b{ display:block; color:var(--teal-700); font-size:var(--fs-16) }
@keyframes pl-pop-in{ 0%,6%{opacity:0; transform:translateY(-6px) scale(.96)} 16%,74%{opacity:1; transform:none}
  84%,100%{opacity:0; transform:translateY(-6px) scale(.96)} }
/* aviso de prueba social (toast) que entra y sale */
.pl-toast{ display:flex; align-items:center; gap:var(--sp-2); margin:0 var(--sp-4) var(--sp-4);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-card);
  border:1px solid var(--slate-200); box-shadow:var(--shadow-md);
  opacity:0; transform:translateX(-12px); animation:pl-toast-in 5s var(--ease-out) infinite both }
.pl-toast .pl-av{ width:var(--sp-7); height:var(--sp-7); font-size:var(--fs-12); flex:none }
.pl-toast-txt{ font-size:var(--fs-12); color:var(--text-body) }
.pl-toast-txt b{ color:var(--text-strong) }
.pl-toast-txt small{ display:block; color:var(--text-subtle); font-size:var(--fs-11) }
@keyframes pl-toast-in{ 0%{opacity:0; transform:translateX(-12px)} 12%,80%{opacity:1; transform:none}
  92%,100%{opacity:0; transform:translateX(-12px)} }

/* ============================================================
   14 · GRILLA "TODO LO DEMÁS" — tarjetas chicas
   ============================================================ */
.pl-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3) }
.pl-tile{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-4);
  background:var(--surface-card); border:1px solid var(--slate-200); border-radius:var(--r-md); box-shadow:var(--shadow-xs) }
.pl-tile-ic{ flex:none; width:var(--sp-7); height:var(--sp-7); display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--teal-050); color:var(--teal-700) }
.pl-tile-ic svg{ width:18px; height:18px }
.pl-tile b{ display:block; font-size:var(--fs-14); color:var(--text-strong) }
.pl-tile span{ font-size:var(--fs-12); color:var(--text-muted) }

/* ── Precios: línea en pesos + extras al pie ── */
.mk-plan-ars{ display:flex; align-items:baseline; gap:4px; margin:calc(var(--sp-2) * -1) 0 var(--sp-1);
  font-family:var(--font-mono); font-weight:700; font-size:var(--fs-16); color:var(--text-body) }
.mk-plan-ars sup{ color:var(--teal-700); font-weight:800 }
.mk-plan-ars-note{ max-width:60ch; margin:var(--sp-6) auto 0; text-align:center;
  color:var(--text-muted); font-size:var(--fs-14) }
.mk-plan-ars-note sup{ color:var(--teal-700); font-weight:800 }
.mk-plan-note{ text-align:center; color:var(--text-muted); font-size:var(--fs-14); margin-top:var(--sp-5) }
.mk-plan-note b{ color:var(--text-body) }
/* Un solo CTA para probar, como bloque aparte debajo de los planes: centrado y
   con el ancho aproximado de la columna del medio. */
.mk-plans-cta{ margin-top:var(--sp-6); text-align:center }
.mk-plans-cta .btn{ display:inline-flex; align-items:center; justify-content:center;
  width:100%; max-width:22rem; padding-block:var(--sp-4); font-size:var(--fs-18);
  line-height:1; border-radius:var(--r-pill) }
.mk-plan-tag{ font-size:var(--fs-13); color:var(--text-muted); min-height:2.6em }
.mk-plan-badge2{ position:static; align-self:flex-start; margin-bottom:var(--sp-2) }

/* ============================================================
   16 · FAQ — acordeón nativo (<details>)
   ============================================================ */
.pl-faq{ max-width:52rem; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-3) }
.pl-q{ border:1px solid var(--slate-200); border-radius:var(--r-md); background:var(--surface-card);
  box-shadow:var(--shadow-xs); overflow:hidden }
.pl-q summary{ list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-5); font-weight:700;
  color:var(--text-strong); font-size:var(--fs-16); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) }
.pl-q summary::-webkit-details-marker{ display:none }
.pl-q summary::after{ content:"+"; color:var(--teal-600); font-size:var(--fs-24); font-weight:400; line-height:1 }
.pl-q[open] summary::after{ content:"–" }
.pl-q summary:hover{ color:var(--text-accent) }
.pl-q-a{ padding:0 var(--sp-5) var(--sp-4); color:var(--text-muted); font-size:var(--fs-15); line-height:var(--lh-prose) }

/* ============================================================
   17 · CTA final — calculadora "cuánto podés cobrar"
   ============================================================ */
.mk-calc{ margin:var(--sp-5) 0; display:flex; flex-direction:column; gap:var(--sp-4); max-width:none }
.mk-calc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) }
.mk-calc-fld{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0 }
.mk-calc-fld > span{ font-size:var(--fs-13); font-weight:600; color:#fff }
.mk-calc-input{ display:flex; align-items:center; gap:var(--sp-2); height:var(--au-fld-h);
  padding:0 var(--sp-3); border-radius:var(--r-sm); background:rgba(255,255,255,.94) }
.mk-calc-input:focus-within{ box-shadow:var(--focus-ring) }
.mk-calc-input i{ font-style:normal; color:var(--text-muted); font-weight:700; font-size:var(--fs-16) }
.mk-calc-input input{ width:100%; min-width:0; border:0; background:transparent;
  font-family:var(--font-mono); font-size:var(--fs-16); font-weight:700; color:var(--text-strong) }
.mk-calc-input input:focus{ outline:none }
.mk-calc-out{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4);
  border-radius:var(--r-md); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.mk-calc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-14); color:rgba(255,255,255,.85) }
.mk-calc-row b{ font-family:var(--font-mono); font-weight:800; color:#fff }
.mk-calc-row.mk-calc-big b{ font-size:var(--fs-32); line-height:1.05 }
.mk-calc-net{ padding-top:var(--sp-2); border-top:1px solid rgba(255,255,255,.16) }
.mk-calc-net b{ color:var(--teal-300) }
/* comparación en barras: costo mensual Educreia vs. tu plataforma actual.
   Barras juntas y centradas; el monto flota justo arriba de cada barra. */
.mk-calc-bars{ display:flex; justify-content:center; align-items:flex-end; gap:var(--sp-5); padding:var(--sp-7) 0 0 }
.mk-bar-col{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); width:150px }
.mk-bar-track{ width:88px; height:150px; display:flex; align-items:flex-end }
.mk-bar-fill{ position:relative; width:100%; height:var(--h,8%); min-height:8px;
  border-radius:var(--r-sm) var(--r-sm) 0 0; transition:height var(--t-base) var(--ease-out) }
.mk-bar-amt{ position:absolute; left:50%; top:0; transform:translate(-50%,-135%); white-space:nowrap;
  font-family:var(--font-mono); font-weight:800; color:#fff; font-size:var(--fs-16) }
.mk-bar-fill.is-edu{ background:linear-gradient(180deg,var(--teal-300),var(--teal-600)) }
.mk-bar-fill.is-otras{ background:linear-gradient(180deg,#ffb08a,#ff7a4d) }
.mk-bar-lbl{ text-align:center; color:#fff; font-size:var(--fs-13); font-weight:700; line-height:var(--lh-snug) }
.mk-bar-lbl small{ display:block; font-weight:400; font-size:var(--fs-11); color:rgba(255,255,255,.7) }
.mk-calc-verdict{ margin-top:var(--sp-5); text-align:center; font-size:var(--fs-18); font-weight:700; color:#fff }
.mk-calc-verdict b{ color:var(--teal-300) }
.mk-calc-verdict .mk-mag{ font-size:var(--fs-24) }   /* la magnitud, más grande para que pegue */
.mk-close-tagline{ margin-top:var(--sp-5); max-width:46ch; font-size:var(--fs-18); font-weight:700;
  color:#fff; line-height:var(--lh-snug) }
.mk-close-tagline span{ color:var(--teal-300) }
/* casilla "¿cuánto te cobra tu plataforma hoy?" (para comparar) */
.mk-calc-compare{ display:flex; flex-direction:column; gap:var(--sp-2) }
.mk-calc-compare-h{ font-size:var(--fs-13); font-weight:700; color:#fff }

/* toggle de moneda */
.mk-calc-cur{ align-self:flex-start; display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.14) }
.mk-calc-cur-btn{ border:0; margin:0; cursor:pointer; padding:var(--sp-1) var(--sp-4); border-radius:var(--r-pill);
  background:transparent; color:rgba(255,255,255,.85); font-family:var(--font-sans); font-weight:700;
  font-size:var(--fs-13); transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out) }
.mk-calc-cur-btn.is-on{ background:#fff; color:var(--navy-800) }

/* cierre en una sola columna (sin el box de acceso), más ancho para la calculadora */
.mk-close-in.is-solo{ grid-template-columns:1fr; max-width:56rem; margin-inline:auto }

/* Buscador "Entrar a mi academia" en el pie */
.mk-foot-access{ display:flex; flex-direction:column; gap:var(--sp-2); max-width:24rem; min-width:0 }
.mk-foot-access-title{ color:#fff; font-size:var(--fs-16) }
.mk-foot-access-form{ display:flex; gap:var(--sp-2) }
.mk-foot-access-form input{ flex:1; min-width:0; height:var(--ctl-h); border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.95); padding:0 var(--ctl-px);
  font-family:var(--font-sans); font-size:var(--fs-14); color:var(--text-strong) }
.mk-foot-access-form input:focus{ outline:none; box-shadow:var(--focus-ring) }
.mk-foot-access-form .btn{ white-space:nowrap }
.mk-foot-access .err{ min-height:1em; color:#FFD9D9; font-size:var(--fs-12) }
.mk-foot-access-note{ color:var(--text-inverse-muted); font-size:var(--fs-12) }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .mk-split{ grid-template-columns:1fr; gap:var(--sp-6); max-width:40rem }
  .mk-split.is-rev .mk-split-media{ order:0 }   /* siempre visual abajo del copy en móvil */
  .pl-tiles{ grid-template-columns:repeat(2,1fr) }
  .pl-fmt{ grid-template-columns:1fr }
  .mk-split-copy h2{ font-size:var(--fs-28,var(--fs-24)) }
}
@media (max-width:560px){
  .pl-tiles{ grid-template-columns:1fr }
  /* Comparación de barras: en el celular quedan lado a lado (como en escritorio),
     con espaciados y tamaños más chicos para que entren cómodas. */
  .pl-pay{ gap:var(--sp-2); padding:var(--sp-3) }
  .pl-pay-col{ padding:var(--sp-3) var(--sp-2); gap:var(--sp-2) }
  .pl-pay-track{ height:130px }
  .pl-bar{ width:38px }
  .pl-pay-amt{ font-size:var(--fs-16) }
  .pl-pay-h{ font-size:var(--fs-12) }
  .pl-grp{ grid-template-columns:1fr; gap:var(--sp-3) }
  .pl-grp-arrow{ transform:rotate(90deg); justify-self:center }
  .pl-move, .pl-build{ grid-template-columns:1fr }
  /* Puerta del Zoom: en el celular el flujo se lee de arriba hacia abajo, no
     en fila (si no, la flecha "→" queda suelta cuando los chips se envuelven). */
  .pl-flow{ flex-direction:column; align-items:stretch }
  .pl-flow .pl-node, .pl-flow .pl-gate{ justify-content:center; text-align:center }
  .pl-flow .pl-arrow{ align-self:center; transform:rotate(90deg) }
  /* En el celular el CTA del nav es más largo ("Probá gratis 30 días"):
     "Ingresar" se oculta (vive en el hero #entrar y el pie) para que la
     barra no desborde los 375px. */
  .mk-nav-cta .btn-ghost{ display:none }
  .mk-nav-cta .btn-accent{ padding:0 var(--sp-3); font-size:var(--fs-14) }
}

/* ── Reduced motion: sin loops; cada escena queda en un estado legible ── */
@media (prefers-reduced-motion:reduce){
  .pl-scene *{ animation:none !important; transition:none !important }
  .pl-bar-get{ height:100% } .pl-bar-cut{ height:72% }
  .pl-chip-grp{ opacity:1; transform:none }
  .pl-dupe.d1::after,.pl-dupe.d2::after,.pl-dupe.d3::after,.pl-dupe.d4::after{ transform:scaleX(1) }
  .pl-vid-fill{ width:62% }
  .pl-chap.c1{ background:var(--teal-050); border-color:var(--teal-200) }
  .pl-dev.f1{ box-shadow:var(--shadow-md); border-color:var(--teal-600) }
  .pl-prog-bar i{ width:var(--to,60%) }
  .pl-stars span{ color:#f4b740 }
  .pl-rev-card{ opacity:1; transform:none }
  .pl-msg.me,.pl-msg.bot.reply{ opacity:1; transform:none }
  .pl-typing{ display:none }
  .pl-block{ opacity:1; transform:none }
  .pl-ann span{ transform:none }
  .pl-pop, .pl-toast{ opacity:1; transform:none }
  .pl-reply-row{ opacity:1; transform:none } .pl-like i{ transform:none }
  .pl-pod-bar{ height:var(--h,56px) } .pl-confetti{ display:none }
  .pl-cert-seal{ transform:none }
  .pl-emojis .pick{ transform:none } .pl-survey-comment{ opacity:1 }
}