/* Portada más limpia y despejada (Jordi y Laura, 14/11/2026: «muy densa… que no se vea tan embotellado…
   que Luxi se vea claro, que lo tapa una pestaña encima»). Solo la carga la portada (app/index.html), después de web.css.
   No se quita ningún texto: se da más aire, se quitan cajas y nada tapa a Luxi. */

/* ---------- 1) Más aire entre bloques ---------- */
.inicio .seccion-corta { padding: 64px 0; }
@media (min-width: 860px) { .inicio .seccion-corta { padding: 104px 0; } }
.inicio .seccion-cabeza { margin-bottom: 44px; }
.inicio .diferencias, .inicio .pasos3, .inicio .ayudas4 { gap: 24px; }

/* ---------- 2) Arriba: menos cajas ---------- */
.inicio .heroe-clase { padding: 40px 0 64px; }
@media (min-width: 860px) {
  .inicio .heroe-clase { padding: 64px 0 96px; }
  .inicio .heroe-clase .contenedor { gap: 56px; }
}
/* El H1 (para Google) sin recuadro: una línea discreta encima del lema */
.inicio .heroe-clase .heroe-h1 { background: none; box-shadow: none; padding: 0; margin: 0 0 14px; font-weight: 700; }
.inicio .heroe-lema { margin-bottom: 28px; }
/* Los 3 pasos, sin tarjetas: solo el icono y la frase */
.inicio .heroe-pasos { gap: 16px; margin-bottom: 34px; }
.inicio .heroe-pasos li { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.inicio .heroe-pasos span { width: 44px; height: 44px; font-size: 22px; border-radius: 50%; }
.inicio .heroe-nota { margin-top: 18px; }

/* ---------- 3) Luxi entero, sin nada encima ----------
   Arriba, Luxi en su círculo; debajo, la ficha del cole → ✨ → el ejercicio que sale de ella.
   El bocadillo repetía el lema, así que no se enseña. */
.inicio .escena {
  aspect-ratio: auto; width: min(100%, 540px); display: grid; align-items: center; column-gap: 10px; row-gap: 6px;
  grid-template-columns: 1fr auto 1.3fr; grid-template-areas: "luxi luxi luxi" "ficha magia juego";
}
.inicio .escena-bocadillo { display: none; }
.inicio .escena-circulo { position: static; inset: auto; grid-area: luxi; justify-self: center; align-self: end; width: 80%; aspect-ratio: 1; }
.inicio .escena-luxi { position: relative; grid-area: luxi; left: auto; top: auto; justify-self: center; width: 74%; }
.inicio .escena-ficha { position: relative; grid-area: ficha; left: auto; top: auto; bottom: auto; width: auto; transform: rotate(-4deg); }
.inicio .escena-magia { position: static; grid-area: magia; }
.inicio .escena-juego { position: relative; grid-area: juego; right: auto; bottom: auto; width: auto; transform: rotate(2deg); }
/* En tablet y ordenador, algo más pequeño para que Luxi y las dos tarjetas quepan en la primera pantalla */
@media (min-width: 860px) {
  .inicio .escena { width: min(100%, 480px); }
  .inicio .escena-luxi { width: 66%; }
  .inicio .escena-circulo { width: 74%; }
}
/* Pantallas poco altas (tablet en horizontal): un poco más compacto para que se vean las dos tarjetas */
@media (min-width: 860px) and (max-height: 860px) {
  .inicio .heroe-clase { padding-top: 28px; }
  .inicio .escena-luxi { width: 56%; }
  .inicio .escena-circulo { width: 64%; }
}
@media (max-width: 559px) {
  .inicio .escena { grid-template-columns: 148px minmax(0, 1fr); grid-template-areas: "luxi luxi" "ficha juego"; column-gap: 12px; }
  .inicio .escena-magia { display: none; }
  .inicio .escena-ficha, .inicio .escena-juego { width: auto; }
  .inicio .escena-juego .muestra-opciones { gap: 6px; margin: 10px 0 2px; }
  .inicio .escena-juego .muestra-opciones span { width: auto; flex: 1; height: 44px; }
}

/* (El aviso de cookies y el botón «¿Dudas?» más pequeños están en web.css, para todas las páginas.) */

/* ---------- 4) «Lo que la hace diferente»: tarjetas más limpias ----------
   Luxi salía cuatro veces seguidas con un bocadillo; ahora la tarjeta solo lleva icono, título y frase. */
.inicio .dif { padding: 28px 26px; }
.inicio .dif .lumi-dice { display: none; }

/* ---------- 5) Ayudas: más espacio dentro ---------- */
.inicio .ayuda { padding: 26px; box-shadow: 0 6px 18px rgba(138, 90, 43, .08); }
.inicio .ayuda li { margin-bottom: 10px; }