/* ============================================================
   mip-seo.css — Recuadro blanco "Sobre este juego" que va
   DEBAJO de cada juego (texto SEO visible). El color de acento
   se pasa por juego con la variable --seo-c en la <section>.
   Se puede quitar borrando el bloque entre los marcadores
   <!-- MIP-SEO-START --> ... <!-- MIP-SEO-END --> de cada juego.
   ============================================================ */
/* El juego ocupa su contenido natural; el recuadro va a una DISTANCIA FIJA
   debajo, IGUAL en los 8 juegos. La distancia se controla con el padding-top
   de .mip-seo (más abajo). El shell NO estira, para que el recuadro quede
   siempre pegado al final del juego a la misma distancia. */
.mip-stage-shell{
  display:flex; flex-direction:column;
  flex:0 0 auto;
}
/* Solo scroll vertical (nunca horizontal) */
html, body{ overflow-x:hidden !important; max-width:100%; }

/* Ruleta: su escenario usa flex:1 + 100dvh (estiraría el shell). Lo fijamos
   para que tome tamaño de viewport SIN estirar → así la distancia al recuadro
   queda fija igual que en los demás. (Solo afecta a la ruleta: tiene .stage). */
.mip-stage-shell .stage-frame{ flex:0 0 auto !important; }
.mip-stage-shell .stage{
  width:min(96vw, var(--stage-max), calc((100svh - var(--topbar)) * 16 / 9)) !important;
}

.mip-seo{
  --seo-c:#1f8fff;
  --gap-juego: 48px;      /* ← DISTANCIA FIJA entre el juego y el recuadro (igual en los 8) */
  position:relative; z-index:5;
  font-family:'Google Sans',system-ui,-apple-system,sans-serif;
  display:flex; justify-content:center;
  padding:var(--gap-juego) 16px calc(var(--gap-juego) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(2px);
}
.mip-seo-card{
  width:100%; max-width:900px;
  background:#fff;
  border-radius:22px;
  border-top:6px solid var(--seo-c);
  box-shadow:0 18px 46px rgba(0,7,102,.14);
  padding:clamp(24px,4vw,42px);
  text-align:left;
}
.mip-seo-card h2{
  color:var(--seo-c);
  font-size:clamp(21px,3.4vw,30px);
  font-weight:800; line-height:1.2;
  margin:0 0 16px;
}
.mip-seo-card p{
  color:#3a4256;
  font-size:clamp(15px,2.1vw,17px);
  line-height:1.72;
  margin:0 0 14px;
}
.mip-seo-card p:last-child{ margin-bottom:0; }
.mip-seo-card strong{ color:#1a2340; font-weight:800; }

/* Botón "Ir a los juegos" debajo del texto */
.mip-seo-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:26px; padding:14px 30px; border-radius:999px;
  background:var(--seo-c); color:#fff !important; text-decoration:none;
  font-family:inherit; font-weight:800;1;
  box-shadow:0 6px 0 color-mix(in srgb, var(--seo-c) 68%, #000), 0 10px 22px rgba(0,0,0,.16);
  transition:transform .1s ease, box-shse;
}
.mip-seo-cta:hover{ filter:brightness(1.05); }
.mip-seo-cta:active{ transform:translateY(4px); box-shadow:0 2px 0 color-mix(in srgb, var(--seo-c) 68%, #000); }
@supports not (background: color-mix(in
  .mip-seo-cta{ box-shadow:0 6px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.16); }
}