/* 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; } } /* 2026-07-13: pedido explicito de Eduardo - textos mas grandes, mas separados, resumidos (ver

en temas_estudiar.html) y una maquetacion mas claramente infantil, no solo la paleta de colores. */ body.modo-infantil { font-size: 1.1rem; } body.modo-infantil p, body.modo-infantil li, body.modo-infantil .cur-temas__explicacion, body.modo-infantil .cur-temas__ejemplos li, body.modo-infantil .cur-temas__ejercicios li { font-size: 1.15em; line-height: 1.75; } body.modo-infantil h1 { font-size: 2.2rem; } body.modo-infantil h2 { font-size: 1.75rem; margin-bottom: .75rem; } body.modo-infantil h3 { font-size: 1.3rem; } /* Mas aire entre bloques - separados pedido explicitamente */ body.modo-infantil .cur-libro__pagina > * + *, body.modo-infantil .cur-temas__estudio > * + * { margin-top: 1.25rem; } body.modo-infantil .cur-temas__ejemplos li, body.modo-infantil .cur-temas__ejercicios li { margin-bottom: .6rem; } /* Bloques pagina de libro mas anchos de margen, mas acolchados, con un golpe de color en el borde para que cada tema se sienta como su propia tarjeta de cuento, no una pagina de texto plano. */ body.modo-infantil .cur-libro__pagina { padding: 2.25rem 2rem; border-left: 8px solid var(--t-accent, #0f7a5c) !important; } body.modo-infantil .cur-libro__eyebrow { font-size: 1rem; padding: .3rem .8rem; background: var(--t-accent-faint, #e4f5ee); } /* Desplegables resumido - los ejemplos/ejercicios de cada tema quedan colapsados por defecto (ejercicios) o abiertos con menos peso visual (ejemplos), en vez de aparecer siempre desplegados de golpe. */ body.modo-infantil .cur-libro__detalle { background: var(--t-accent-faint, #f4f9f7); padding: 1rem 1.25rem; margin-top: 1.25rem; } body.modo-infantil .cur-libro__detalle summary { font-size: 1.2rem; font-weight: 700; cursor: pointer; list-style: revert; color: var(--t-accent, #0f7a5c); } body.modo-infantil .cur-libro__detalle[open] summary { margin-bottom: .75rem; } /* Checkboxes de elige tus temas y botones - objetivo tactil mas grande y mas separado, pensado para dedos de niños/moviles. */ body.modo-infantil .cur-temas__item { padding: 1.1rem 1.3rem; margin-bottom: 1rem; } body.modo-infantil .cur-temas__item input[type="checkbox"] { width: 26px; height: 26px; } body.modo-infantil .cur-temas__titulo { font-size: 1.2rem; } body.modo-infantil .btn-primary, body.modo-infantil .cur-libro__btn { font-size: 1.1rem; padding: .9rem 1.6rem; }