/* Imagilang 2.0 · bienvenida.css — login + onboarding.
   La pantalla es una CONVERSACIÓN: Prepy pregunta arriba (bocadillo que se escribe solo
   mientras murmura, ver screens/onboarding.js) y el niño responde en la tarjeta de abajo.
   Por eso el orden visual es Prepy → tarjeta, y no al revés. */

/* ═══════════════════════════════════════════════════════════════════════════════
   LOGIN — la puerta del tutor
   Aquí no entra un niño: entra el adulto que va a crear la cuenta, contratar y pagar.
   Por eso Prepy no sale (ya saldrá al otro lado) y el registro es sobrio: una tarjeta,
   jerarquía clara, nada de fiesta. Lo único que se queda de la marca son los orbes,
   que sostienen el mundo al que está a punto de entrar su hijo/a.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ojo al `.on`: sin él, el ID le ganaría en especificidad al `.screen{display:none}` del
   shell y el login se quedaría pintado encima del mapa para siempre. */
/* La tarjeta y, debajo, la salida.
   OJO al centrado: con `align-content:center` (o `justify-content:center`), cuando la
   ventana es más baja que la tarjeta el sobrante se desborda HACIA ARRIBA y el scroll no
   llega hasta él — el logo y el titular quedaban cortados y era imposible verlos.
   Con márgenes automáticos no pasa: si sobra alto, centran; si no cabe, se rinden a 0 y
   el contenido empieza arriba, donde el scroll sí lo alcanza. */
#s-login.on{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;
  min-height:100%;padding:24px 16px}
.lg-card{margin-top:auto}
.lg-volver{margin-bottom:auto}

/* En el login no hay partida que abandonar, ni progreso que enseñar, ni marca que repetir
   (el logo ya preside la tarjeta): la cabecera del juego sobra entera. Se va con ella el
   logo duplicado de la esquina. */
body:has(#s-login.on) header.top{display:none}

/* los mismos orbes del onboarding, pero anclados a la pantalla entera y más apagados:
   aquí son atmósfera, no protagonistas — el protagonista es el formulario. */
.lg-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);z-index:0;
  background:radial-gradient(circle at 32% 30%, #FFFFFF, rgba(167,139,250,.55) 55%, rgba(124,58,237,.25));
  animation:ob-sube 13s ease-in-out infinite}
.lg-orb.o1{width:96px;height:96px;left:6%;top:12%;opacity:.34;animation-duration:16s}
.lg-orb.o2{width:44px;height:44px;right:9%;top:16%;opacity:.3;animation-duration:11s;animation-delay:-3s}
.lg-orb.o3{width:68px;height:68px;right:5%;bottom:14%;opacity:.26;animation-duration:18s;animation-delay:-6s}
.lg-orb.o4{width:30px;height:30px;left:14%;bottom:12%;opacity:.32;animation-duration:9s;animation-delay:-2s}

/* el shell recorta las pantallas a 560px; el login es una puerta, no una vista del juego,
   y en escritorio necesita respirar a lo ancho para no obligar a hacer scroll */
main>#s-login.on{max-width:none}

.lg-card{position:relative;z-index:1;width:min(100%,25rem);
  background:var(--surface);border-radius:26px;box-shadow:0 18px 50px rgba(46,16,101,.14);
  padding:34px 30px 26px;text-align:center}

.lg-logo{height:44px;width:auto;margin:0 auto 16px;object-fit:contain}
.lg-tit{font-size:1.5rem;margin-bottom:8px}
.lg-sub{color:var(--text2);font-size:.92rem;line-height:1.55;margin-bottom:24px;text-wrap:balance}

/* Google: el camino corto. Va primero y con peso propio (borde marcado, no un botón más).
   Antes usaba .btn.white y quedaba blandengue, sin decir "púlsame". */
.lg-google{display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:54px;padding:14px 20px;
  border:2px solid var(--border);border-radius:99px;background:#fff;color:var(--deep);
  font-size:1rem;font-weight:800;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .15s}
.lg-google:hover{border-color:#CFC7F5;box-shadow:0 8px 20px rgba(46,16,101,.1)}
.lg-google:active{transform:scale(.985)}
.lg-google:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.lg-gico{width:20px;height:20px;flex:0 0 auto}

/* separador: una línea con la palabra dentro, para que se lea como una bifurcación */
/* Aviso "estás dentro de Instagram/Facebook/TikTok": ahí Google no deja iniciar sesión */
.lg-inapp{margin-bottom:14px;padding:12px 14px;border-radius:14px;background:#FFF6E0;
  border:1px solid #F5D98B;color:#6B4E00;font-size:.84rem;font-weight:600;line-height:1.4;text-align:left}
.lg-inapp b{color:#4A3500}
.lg-inapp-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lg-inapp-acciones button{min-height:44px;padding:8px 14px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-weight:800;background:var(--purple);color:#fff}
.lg-inapp-acciones button.sec{background:#fff;color:var(--purple);border:1px solid #D9D0FA}
.lg-google.bloqueado{opacity:.45}
.lg-sep{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--text2)}
.lg-sep::before,.lg-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.lg-sep span{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* campos: alineados a la izquierda (un formulario centrado no se rellena, se descifra) */
.lg-field{margin-top:14px;text-align:left}
.lg-field label{display:block;margin-bottom:6px;
  font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text2)}
.lg-field input{width:100%;min-height:52px;padding:12px 16px;
  border:2px solid var(--border);border-radius:14px;background:#fff;
  font-size:16px;                       /* 16px o iOS hace zoom al enfocar */
  color:var(--deep);font-weight:700;transition:border-color .18s,box-shadow .18s}
.lg-field input::placeholder{color:#B6B3C7;font-weight:600}
.lg-field input:hover{border-color:#CFC7F5}
.lg-field input:focus{border-color:var(--purple);outline:none;box-shadow:0 0 0 4px rgba(124,58,237,.13)}

/* ═══ cambio de modo (entrar ⇄ crear cuenta) ═══
   Cambiar cuatro textos y ya está no se percibe: parece que no ha pasado nada y el padre
   no sabe si está creando cuenta o entrando. Con esto las dos mitades se reintroducen —
   primero la marca, y 70 ms después el formulario— así el ojo baja solo hacia los campos.
   Es un guiño, no una transición de escena: 320 ms y fuera. */
@keyframes lg-entra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.lg-card.cambiando .lg-marca{animation:lg-entra .32s cubic-bezier(.2,.9,.3,1) both}
.lg-card.cambiando .lg-form {animation:lg-entra .32s cubic-bezier(.2,.9,.3,1) .07s both}

/* el botón grande es el que cambia de significado ("Entrar" → "Crear cuenta"): que dé un
   golpecito para que se lea de nuevo en vez de darse por sabido */
@keyframes lg-late{0%,100%{transform:scale(1)}45%{transform:scale(1.028)}}
.lg-card.cambiando .lg-entrar{animation:lg-late .42s ease .16s}

/* "mínimo 6 caracteres": solo aparece al crear cuenta, y antes de fallar, no después */
.lg-pista{margin-top:6px;font-size:.76rem;font-weight:600;color:var(--text2)}

.lg-entrar{margin-top:20px;max-width:none}

/* crear cuenta: no es un botón gordo compitiendo con "Entrar". Es un enlace en una frase,
   porque la mayoría ya tiene cuenta y quien no, la busca. */
.lg-alta{margin-top:20px;font-size:.88rem;color:var(--text2);font-weight:600}
.lg-link{background:none;border:0;padding:4px 2px;cursor:pointer;
  color:var(--purple);font-size:.88rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.lg-link:hover{color:var(--purple-hover)}
/* "¿Has olvidado tu contraseña?" bajo el campo, alineado a la derecha y discreto */
.lg-olvido{display:block;margin:6px 0 0 auto;font-size:.8rem}
.lg-link:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px}

/* la nota legal: tiene que estar, no tiene que gritar */
.lg-legal{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.72rem;line-height:1.5;color:var(--text2)}
.lg-legal a{color:var(--text2);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.lg-legal a:hover{color:var(--purple)}

#s-login .msg{margin-top:14px}

@media (max-width:400px){
  .lg-card{padding:28px 20px 22px;border-radius:22px}
  .lg-tit{font-size:1.32rem}
}

/* ═══ escritorio: la tarjeta se abre en dos ═══
   Apilar marca + formulario funciona en un móvil (se hace scroll con el pulgar sin pensar),
   pero en un portátil obliga a bajar para encontrar "Entrar", que es justo lo que no debe
   costar. A partir de 62rem se ponen lado a lado: la altura cae y todo entra de una vez.
   La condición de ALTURA importa: en una pantalla alta y estrecha (una tablet en vertical)
   apilado se ve mejor, así que solo cambiamos cuando de verdad sobra ancho. */
@media (min-width:62rem){
  .lg-card{width:min(100%,54rem);display:grid;grid-template-columns:1fr 1fr;
    align-items:stretch;          /* estirada: así el filete llega de arriba abajo */
    gap:44px;padding:44px 46px;text-align:left}
  /* una línea, no un bloque de color: separa las dos mitades sin pesar. El contenido va
     centrado dentro de su mitad —en vertical Y en horizontal—, pero la línea recorre la
     tarjeta entera. Alineado a la izquierda quedaba desplazado y sin peso propio. */
  .lg-marca{display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding-right:44px;border-right:1px solid var(--border)}
  .lg-logo{margin:0 0 22px}
  .lg-tit{font-size:1.9rem;margin-bottom:12px}
  .lg-sub{font-size:1rem;margin-bottom:0;max-width:26ch}   /* línea corta = se lee de un vistazo */
  .lg-sep{margin:18px 0 2px}
  .lg-legal{text-align:left}
  .lg-alta{text-align:left}
}

/* la salida hacia la web: discreta, fuera de la tarjeta, pero con área de toque de sobra */
.lg-volver{position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;
  color:var(--text2);font-size:.82rem;font-weight:700;text-decoration:none;border-radius:99px;
  transition:color .18s,background .18s}
.lg-volver svg{width:16px;height:16px}
.lg-volver:hover{color:var(--purple);background:rgba(124,58,237,.07)}
.lg-volver:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ═══ escena ═══ */
.ob-scene{position:relative;padding:8px 0 24px}

/* orbes flotando de fondo: dan profundidad y calidez sin robar atención */
.ob-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);opacity:.5;
  background:radial-gradient(circle at 32% 30%, #FFFFFF, rgba(167,139,250,.55) 55%, rgba(124,58,237,.25));
  animation:ob-sube 13s ease-in-out infinite}
.ob-orb.o1{width:74px;height:74px;left:-18px;top:16%;animation-duration:15s}
.ob-orb.o2{width:38px;height:38px;right:2%;top:8%;animation-duration:11s;animation-delay:-3s;opacity:.42}
.ob-orb.o3{width:54px;height:54px;right:-12px;bottom:14%;animation-duration:17s;animation-delay:-6s;opacity:.38}
.ob-orb.o4{width:26px;height:26px;left:12%;bottom:6%;animation-duration:9s;animation-delay:-2s;opacity:.45}
@keyframes ob-sube{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.06)}}

/* ═══ progreso: cierra la escena, debajo de la tarjeta ═══ */
.ob-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.ob-dots i{width:10px;height:10px;border-radius:99px;background:#DCD6F2;transition:width .25s,background .25s}
.ob-dots i.done{background:var(--purple-light)}
.ob-dots i.on{width:28px;background:var(--purple)}

/* ═══ Prepy: el que pregunta ═══ */
/* altura fija (la del chat): pase lo que pase con los bocadillos, Prepy no se mueve */
.ob-prepy{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:20px;padding:0 8px;min-height:11rem}
.ob-prepy img{width:clamp(96px,18vw,140px);height:auto;flex-shrink:0;
  filter:drop-shadow(0 10px 26px rgba(124,58,237,.24));animation:float-prepy 4s ease-in-out infinite}
/* mientras habla, se mueve al ritmo del murmullo (la clase la pone/quita el JS) */
.ob-prepy img.hablando{animation:float-prepy 4s ease-in-out infinite, ob-habla .32s ease-in-out infinite}
@keyframes ob-habla{0%,100%{transform:scale(1)}50%{transform:scale(1.035) rotate(-1.2deg)}}

/* la conversación: los bocadillos se apilan, no se sustituyen. El último es el que habla;
   los anteriores se quedan ahí, algo apagados, como en un chat. */
/* El chat reserva su altura de antemano (la de la conversación completa) y los bocadillos
   crecen DENTRO de ese hueco. Así Prepy se queda clavado en su sitio: si la caja creciera,
   el flex lo iría empujando hacia arriba con cada frase nueva. */
/* Los bocadillos se anclan ARRIBA (no centrados): así el primero tampoco se recoloca cuando
   aparece el segundo — el nuevo simplemente sale debajo, y nada de lo ya escrito se mueve. */
.ob-chat{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start;
  width:min(380px,72vw);min-height:11rem;padding-top:.5rem}
.ob-bubble{position:relative;background:var(--surface);border:2px solid var(--border);
  border-radius:20px;border-bottom-left-radius:6px;padding:14px 18px;min-height:2.4em;
  display:flex;align-items:center;font-weight:800;font-size:1.02rem;line-height:1.45;color:var(--deep);
  box-shadow:var(--shadow);animation:ob-burbuja .3s cubic-bezier(.2,.9,.3,1.3) both;transition:opacity .4s,transform .4s}
/* lo ya dicho pasa a segundo plano: se queda de contexto, pero no compite con la frase
   que está sonando. Pierde el blanco, el borde y el peso; el que habla es el de abajo. */
.ob-bubble.vieja{opacity:.62;transform:scale(.96);transform-origin:left center;
  font-size:.92rem;font-weight:700;color:var(--text2);
  background:#EFECFB;border-color:transparent;box-shadow:none}
@keyframes ob-burbuja{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
/* Pico: un cuadrado girado 45° que hereda el fondo y CONTINÚA el borde del bocadillo
   (dos de sus lados). Con los triángulos de bordes clásicos el trazo de 2px no casaba con
   el del globo y se leía como una flecha suelta. Solo lo lleva el que está hablando. */
.ob-bubble:last-child::after{content:'';position:absolute;left:-9px;top:50%;width:15px;height:15px;
  background:var(--surface);border-left:2px solid var(--border);border-bottom:2px solid var(--border);
  border-bottom-left-radius:4px;transform:translateY(-50%) rotate(45deg)}
/* cursor de máquina de escribir: parpadea solo mientras Prepy está escribiendo */
.ob-bubble .cursor{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-2px;
  background:var(--purple);border-radius:2px;animation:ob-cursor .7s steps(1,end) infinite}
@keyframes ob-cursor{50%{opacity:0}}

/* ═══ la tarjeta: lo que responde el niño ═══ */
/* nace del bocadillo (por eso el hilo vertical) y entra con un rebote suave en cada paso */
/* La tarjeta entra con la transición (no con @keyframes): una animación con fill:both
   ganaría a la clase .esperando y la tarjeta no llegaría a ocultarse nunca. */
.ob-card{position:relative;margin-top:32px;opacity:1;transform:none;
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.9,.3,1.3)}
/* mientras Prepy habla, la tarjeta no está: primero se escucha la pregunta, luego se responde.
   visibility (y no display) para que la página no pegue un salto al aparecer. */
.ob-card.esperando{opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);pointer-events:none}
/* La tarjeta solo tiene controles, así que no necesita el ancho de un formulario: cuanto
   más estrecha, más claro es que solo hay UNA cosa que hacer aquí. */
.ob-card{width:min(100%,26rem);margin-inline:auto;padding:26px 24px 24px}

/* el campo del nombre: una caja a todo lo ancho para escribir "Dave" pedía demasiado.
   Se queda en el ancho justo, centrada, y el nombre se escribe grande y centrado. */
.ob-card .field{margin-top:0;max-width:17rem;margin-inline:auto;text-align:center}
.ob-card .field label{text-align:center;color:var(--text2);font-size:.82rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.ob-card .field input{text-align:center;font-size:1.15rem;font-weight:800;color:var(--deep);
  transition:border-color .18s,box-shadow .18s}
.ob-card .field input:hover{border-color:#CFC7F5}
.ob-card .field input:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(124,58,237,.13)}

/* paso del tutor: las dos casillas con las que el adulto declara serlo y acepta lo legal.
   Es la única pantalla del onboarding con letra de adulto, así que se lee alineada a la
   izquierda (un párrafo centrado no se lee, se ojea) y algo más ancha que las demás. */
.ob-card:has(.ob-legal){width:min(100%,30rem)}
.ob-legal{display:grid;gap:12px;margin-bottom:20px;text-align:left}
.ob-check{display:flex;align-items:flex-start;gap:12px;padding:12px;
  border:2px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;
  min-height:48px;                    /* el dedo tiene que caber: no bajar de aquí */
  transition:border-color .18s,background .18s}
.ob-check:hover{border-color:#CFC7F5}
.ob-check:has(:checked){border-color:var(--purple);background:rgba(124,58,237,.05)}
/* el foco se ve en la fila entera, no solo en el cuadradito: se navega con teclado */
.ob-check:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px rgba(124,58,237,.13)}
.ob-check input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--purple);cursor:pointer}
.ob-check span{font-size:.88rem;line-height:1.45;color:var(--text2);font-weight:600}
.ob-check b{color:var(--deep);font-weight:800}
.ob-check a{color:var(--purple);font-weight:800;text-decoration:underline}

/* apunte bajo el campo del nombre: aclara sin gritar */
.ob-hint{margin:10px 0 18px;font-size:.8rem;line-height:1.4;color:var(--text2);text-align:center}

/* el relevo: la tarjeta más vacía del onboarding, y a propósito. Aquí solo hay una cosa que
   hacer —pulsar— y quien la hace es un niño que acaba de llegar: el botón manda. */
.ob-relevo{margin:0 0 18px;font-size:.95rem;line-height:1.45;color:var(--text2);
  font-weight:700;text-align:center}
/* la salida para cuando el niño no está: existe, pero no compite con el botón grande.
   Es del padre, no del niño, así que va en pequeño y al fondo. */
.ob-luego{display:block;margin:14px auto 0;padding:8px 12px;min-height:44px;
  background:none;border:0;cursor:pointer;
  font-size:.82rem;font-weight:700;color:var(--text2);text-decoration:underline;
  text-underline-offset:3px;transition:color .18s}
.ob-luego:hover{color:var(--purple)}
.ob-luego:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:8px}

/* cursos: rejilla de 3, no flujo libre. Todos los chips miden lo mismo (los bloqueados
   también), así la cuadrícula queda perfecta y no baila al seleccionar. */
.ob-card .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:0}
.ob-card .chip{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:12px 8px;min-height:60px;font-size:.95rem;line-height:1.2}
.ob-card .chip.sel{box-shadow:0 8px 22px rgba(124,58,237,.32)}
/* "Próximamente" es una nota al pie del chip, no un segundo título: que se lea, no que pese */
.ob-card .chip.locked span{font-size:.58rem;letter-spacing:.04em}
/* nivel MCER bajo el ciclo: nota de apoyo. Morado sobre chip claro, blanco sobre el elegido */
.ob-card .chip .chip-nivel{font-size:.6rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--purple);opacity:.9}
.ob-card .chip.sel .chip-nivel{color:#fff;opacity:.95}

/* avatares: los cuatro en una fila, del mismo tamaño que en 2×2 — para eso la tarjeta se
   ensancha SOLO en este paso (:has), en vez de encoger las caras para que quepan. */
.ob-card:has(.avgrid){width:min(100%,34rem)}
.ob-card .avgrid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:0;margin-inline:auto}
.ob-card .avgrid .opt{padding:12px;position:relative}
.ob-card .avgrid img{width:100%;height:auto;max-width:88px;aspect-ratio:1;margin-inline:auto;background:#F5F3FF}
@media (max-width:560px){
  .ob-card .avgrid{grid-template-columns:repeat(2,1fr);max-width:17rem}   /* móvil: 2×2 */
}
/* el elegido lleva su check: en una rejilla de caras, el borde solo no se ve lo bastante */
.ob-card .avgrid .opt.sel::after{content:'✓';position:absolute;top:-6px;right:-6px;
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--purple);color:#fff;font-size:.8rem;font-weight:800;box-shadow:var(--shadow)}

/* el botón no necesita todo el ancho: es una acción, no una barra */
.ob-card .btn{width:min(100%,15rem);margin:22px auto 0;display:block}

/* foco de teclado visible en todo lo que se puede pulsar aquí */
.ob-card .chip:focus-visible,.ob-card .opt:focus-visible,.ob-card .btn:focus-visible,
.ob-back:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

@media (max-width:420px){
  /* 3 ciclos con dos líneas cada uno: en móvil estrecho se leen mejor apilados */
  .ob-card .chips-ciclo{grid-template-columns:1fr}
  .ob-card .chips:not(.chips-ciclo){grid-template-columns:repeat(2,1fr)}
}
.ob-card::before{content:'';position:absolute;left:50%;top:-24px;width:2px;height:20px;
  background:linear-gradient(180deg,rgba(124,58,237,.35),rgba(124,58,237,0));transform:translateX(-50%)}

/* ═══ atrás ═══ */
/* Fijo en la esquina superior izquierda de la ventana, justo debajo del logo: vive fuera de
   la escena, así que no empuja nada al aparecer ni compite con la tarjeta. El margen
   izquierdo es el mismo que usa la cabecera (shell.css), para que caiga a plomo con el logo.
   Sin recuadro: solo la flecha, y el fondo sutil aparece al pasar por encima. */
.ob-back{position:fixed;left:clamp(16px,4vw,28px);top:78px;z-index:41;
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:0;border-radius:50%;color:var(--purple);cursor:pointer;
  transition:background .2s,transform .2s}
.ob-back:hover{background:rgba(124,58,237,.1);transform:translateX(-3px)}
.ob-back[hidden]{display:none}
.ob-back svg{width:24px;height:24px}

@media (prefers-reduced-motion:reduce){
  .ob-prepy img,.ob-prepy img.hablando,.ob-orb,.ob-card,.ob-bubble .cursor{animation:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* aviso al elegir 3º-4º: empieza por el Nivel 1 (ciclo puente) */
.ob-aviso-ciclo{margin:4px 0 16px;padding:12px 14px;border-radius:14px;background:#F5F3FF;border:1px solid #DDD6FE;
  color:var(--deep);font-size:.86rem;font-weight:600;line-height:1.45;text-align:left}
.ob-aviso-ciclo b{color:var(--purple)}