/* Popup de bienvenida (primera visita) - pide elegir modo serio/infantil.
   Ocupa ~90% del viewport en cualquier dispositivo, como pidió Eduardo. */
.bienvenida-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

.bienvenida-modal {
  width: 90vw;
  height: 90vh;
  max-width: 720px;
  max-height: 640px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
}

.bienvenida-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 1rem;
  animation: bienvenidaRebote 1.6s ease-in-out infinite;
}
@keyframes bienvenidaRebote {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-4deg); }
}

.bienvenida-titulo {
  font-size: 1.9rem;
  margin: 0 0 .75rem;
  color: #0f172a;
}

.bienvenida-texto {
  font-size: 1.1rem;
  color: #475569;
  max-width: 480px;
  line-height: 1.6;
  margin: 0 0 2.5rem;
}

.bienvenida-opciones {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
  max-width: 520px;
  flex-wrap: wrap;
  justify-content: center;
}
/* 2026-07-14 (bug real, reportado por Eduardo viendo el popup en vivo):
   1) las dos tarjetas no median lo mismo de alto - "Colores, letra grande y
      más divertido" ocupa 2 líneas y "Diseño estándar, para adultos" solo 1,
      y el flex no las igualaba porque el <form> que envuelve cada boton no
      se estiraba. align-items:stretch en el padre + display:flex en el form
      soluciona esto.
   2) el hover cambiaba el FONDO de la tarjeta a un tono casi blanco
      (#f0faf7/#fef4f3) pero el COLOR DEL TEXTO en modo oscuro seguía siendo
      el mismo casi-blanco (#f1f5f9) del tema oscuro - en modo oscuro, al
      pasar el raton, quedaba texto casi blanco sobre fondo casi blanco,
      ilegible. Arreglado quitando el cambio de fondo del hover por completo
      (solo borde + elevacion sutil, funciona igual en claro y oscuro sin
      tocar el color del texto en absoluto). */
.bienvenida-opciones form { flex: 1; min-width: 200px; display: flex; }

.bienvenida-opcion {
  width: 100%;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bienvenida-opcion:hover {
  transform: translateY(-3px);
  border-color: #0f7a5c;
  box-shadow: 0 6px 16px rgba(15, 122, 92, .18);
}
.bienvenida-opcion--infantil:hover {
  border-color: #e0554f;
  box-shadow: 0 6px 16px rgba(224, 85, 79, .18);
}
.bienvenida-opcion__icono { font-size: 2.2rem; }
.bienvenida-opcion__titulo { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.bienvenida-opcion__desc { font-size: .82rem; color: #64748b; }

.bienvenida-nota {
  margin-top: 2rem;
  font-size: .8rem;
  color: #94a3b8;
}

@media (max-width: 480px) {
  .bienvenida-modal { padding: 2rem 1.25rem; border-radius: 18px; }
  .bienvenida-logo { width: 72px; height: 72px; }
  .bienvenida-titulo { font-size: 1.5rem; }
  .bienvenida-texto { font-size: 1rem; margin-bottom: 1.75rem; }
  .bienvenida-opciones { gap: 1rem; }
}

@media (prefers-color-scheme: dark) {
  .bienvenida-modal { background: #1e293b; }
  .bienvenida-titulo { color: #f1f5f9; }
  .bienvenida-texto { color: #cbd5e1; }
  .bienvenida-opcion { background: #0f172a; border-color: #334155; }
  .bienvenida-opcion__titulo { color: #f1f5f9; }
}