/* Modo infantil: además del cambio de paleta (--t-*, ver temas.Tema "modo-infantil"), añade dinamismo real — bordes redondeados más grandes, tarjetas con "rebote" al pasar el ratón y una tipografía más redondeada en títulos. Todo gated por la clase .modo-infantil en , nunca afecta al tema normal. */ body.modo-infantil { --t-radius: 20px; } body.modo-infantil * { border-radius: var(--t-radius, 20px) !important; } body.modo-infantil h1, body.modo-infantil h2, body.modo-infantil h3 { font-family: 'Comic Sans MS', 'Baloo 2', system-ui, sans-serif; } body.modo-infantil .cur-card, body.modo-infantil .ej-card, body.modo-infantil .pia-msg, body.modo-infantil .btn-primary { transition: transform 0.15s ease; } body.modo-infantil .cur-card:hover, body.modo-infantil .ej-card:hover { transform: scale(1.03) rotate(-1deg); } body.modo-infantil .btn-primary:hover, body.modo-infantil .nav-modo-infantil-btn:hover { transform: scale(1.06); } @keyframes modoInfantilRebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } body.modo-infantil .modo-infantil-float-btn { animation: modoInfantilRebote 2s ease-in-out infinite; } /* 2026-07-13: antes vivia dentro del navbar (.nav-modo-infantil-*) y se solapaba con "Iniciar sesion"/"Matricúlate" en pantallas normales - pedido de Eduardo, viendolo en vivo. Ahora boton flotante fijo abajo a la izquierda, mismo nivel/z-index que el widget de chat (abajo a la derecha), para no competir por espacio con el resto de la navegacion. */ /* bottom:96px, no 20px: el banner de cookies (#cookieBanner) es fixed, ancho completo, ~68px de alto en 2 lineas de texto - con 20px este boton quedaba tapado DEBAJO del banner (mismo rectangulo, z-index 9999 del banner por encima), inclickeable hasta aceptar cookies. Confirmado con getBoundingClientRect: banner y:831-900, boton y:840-880 en viewport de 900px de alto - solapamiento total. */ .modo-infantil-float-form { position: fixed; left: 20px; bottom: 96px; z-index: 10000; } .modo-infantil-float-btn { border: 2px solid var(--t-accent, #0f7a5c); background: var(--t-panel, #fff); color: var(--t-accent, #0f7a5c); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 0.85rem; cursor: pointer; box-shadow: 0 4px 16px -4px rgba(0,0,0,.22); } .modo-infantil-float-btn:hover { background: var(--t-accent-faint, #e4f5ee); } @media (max-width: 480px) { .modo-infantil-float-form { left: 12px; bottom: 12px; } .modo-infantil-float-btn { padding: 8px 14px; font-size: 0.8rem; } }