/* AIDEV-NOTE: estilos de la franja «Ejemplo del Plan Estudio» que llevan arriba las landings de ejemplo
   (ejemplos/*.html; GAMEFEST017-JSK y GAMEFEST018-JSK). El HTML de la franja es parciales/ejemplo.html y
   lo copia armar-parciales.py. La franja es de Mi Primera Web, no del juego: look neutro, claro y con
   fuente del sistema, para que se note que no es parte de la página que presenta. Lo propio de cada
   landing va en su CSS (alberath.css, imbasion.css). */
.mpw-franja{position:sticky;top:0;z-index:100;background:#fff;color:#1b1b1b;font:500 14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;border-bottom:3px solid #fa135e;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.mpw-franja *{box-sizing:border-box}
.mpw-wrap{max-width:1160px;margin-inline:auto;padding:8px clamp(14px,3vw,32px);display:flex;align-items:center;gap:14px}
.mpw-logo{flex:0 0 auto;display:flex}
.mpw-logo img{display:block;width:36px;height:auto}
.mpw-franja p{margin:0;flex:1 1 auto}
.mpw-franja p a{color:#1b1b1b;text-decoration:underline;text-decoration-color:#fa135e;text-underline-offset:3px}
.mpw-franja p a:hover{color:#c40c49} /* el rosa #fa135e sobre blanco da 3.95 de contraste; este, 6.0 */
/* bajo 640px la frase larga se cambia por un enlace corto a la charla: la franja pasaba de 110px */
.mpw-corto{display:none;margin-left:8px}
/* texto oscuro sobre el verde de WhatsApp: con blanco el contraste era 2.0 y Lighthouse lo marcaba (lo vio GAMEFEST018) */
.mpw-wa{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:#25d366;color:#0b2d16;font-weight:700;text-decoration:none;white-space:nowrap}
.mpw-wa:hover{background:#1fb85a}
.mpw-wa svg{width:18px;height:18px;fill:currentColor}
@media (max-width:640px){
  .mpw-wrap{flex-wrap:wrap;gap:8px 12px;padding-block:8px}
  .mpw-wrap{flex-wrap:nowrap}
  .mpw-franja p{font-size:13px;line-height:1.3}
  .mpw-largo{display:none}
  .mpw-corto{display:inline}
  .mpw-wa{padding:7px 10px;font-size:13px}
  .mpw-wa svg{width:16px;height:16px}
}