/* ============================================================ ESCENA 3D · Programa PRI — relieve de la interfaz ------------------------------------------------------------ Acompaña a escena3d.js. El archivo JavaScript pone la figura que gira detrás; esto levanta la lámina y lo que hay dentro de ella para que dejen de ser una hoja pegada a la pantalla. Todo lo de aquí va bajo html.e3d-activo , una clase que solo aparece si el JavaScript arrancó bien. Si algo falla, la página se ve exactamente como antes. Nota técnica: no se usa transform-style: preserve-3d porque la lámina tiene overflow:hidden , y eso obliga al navegador a aplanar a los hijos. En su lugar cada elemento lleva su propia perspective(), que sí funciona por sí sola. ============================================================ */ /* El lienzo de la escena */ .e3d-lienzo { opacity: 1; } /* El fondo plano de símbolos que había antes: lo sustituye la escena con profundidad. Se oculta, no se borra. */ .e3d-reemplazado { display: none !important; } /* La figura del tema vive dentro de la lámina, pegada a su fondo y por debajo del texto. El recorte lo hace el border-radius de la propia lámina. */ .e3d-figura { opacity: 1; } /* ── La lámina flota sobre la escena ───────────────────────── No se le cambia el color de fondo: solo gana la sombra que la despega de la pantalla. */ html.e3d-activo #slide-card { will-change: transform; transition: box-shadow .45s ease; box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 18px 44px rgba(0, 0, 0, .55), 0 42px 90px rgba(0, 0, 0, .35); } /* ── Tarjetas de concepto: baldosas que se levantan ────────── */ html.e3d-activo .ctype-card { transform: perspective(900px) translateZ(0); transition: transform .38s cubic-bezier(.2, .9, .3, 1.2), box-shadow .38s ease, border-color .3s; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); } html.e3d-activo .ctype-card:hover { transform: perspective(900px) translateZ(26px) rotateX(3.5deg); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(124, 58, 237, .18); } /* ── Fichas: pastillas con grosor, no círculos pintados ────── */ html.e3d-activo .conn-chip { transform: perspective(600px) translateZ(0); transition: transform .26s cubic-bezier(.2, .9, .3, 1.3), box-shadow .26s ease; box-shadow: 0 3px 0 rgba(0, 0, 0, .34), 0 6px 14px rgba(0, 0, 0, .3); } html.e3d-activo .conn-chip:hover:not(.used) { transform: perspective(600px) translateZ(18px) rotateX(-6deg); box-shadow: 0 7px 0 rgba(0, 0, 0, .3), 0 16px 28px rgba(0, 0, 0, .45); } html.e3d-activo .conn-chip:active:not(.used) { transform: perspective(600px) translateZ(2px) translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .34); } /* ── Opciones del quiz: se inclinan hacia quien las mira ───── */ html.e3d-activo .q-opt { transform: perspective(1000px) translateZ(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease, border-color .25s, background .25s; } html.e3d-activo .q-opt:hover:not(.locked) { transform: perspective(1000px) translateZ(16px) rotateX(2.5deg); box-shadow: 0 12px 26px rgba(0, 0, 0, .45); } html.e3d-activo .q-opt.ok { transform: perspective(1000px) translateZ(12px); box-shadow: 0 10px 26px rgba(16, 185, 129, .22); } /* ── La fórmula: una losa de vidrio, no un rectángulo ─────── */ html.e3d-activo .formula, html.e3d-activo .ec-bloque { transform: perspective(1100px) translateZ(14px) rotateX(1.6deg); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 12px 30px rgba(0, 0, 0, .42), 0 0 30px rgba(124, 58, 237, .1); } /* ── Los números de paso: esferas, no discos ──────────────── */ html.e3d-activo .step-n { background-image: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 34%, rgba(0, 0, 0, .28) 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 14px rgba(124, 58, 237, .45); } /* ── Los puntos de navegación: también esferas ────────────── */ html.e3d-activo .dot { background-image: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); } /* ── Botones de avanzar y retroceder: teclas con recorrido ── */ html.e3d-activo .nav-btn { transform: perspective(600px) translateZ(0); transition: transform .24s cubic-bezier(.2, .9, .3, 1.3), box-shadow .24s ease, background .25s, border-color .25s; box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .3); } html.e3d-activo .nav-btn:hover:not(:disabled) { transform: perspective(600px) translateZ(14px) translateY(-2px); box-shadow: 0 7px 0 rgba(0, 0, 0, .35), 0 18px 30px rgba(0, 0, 0, .45); } html.e3d-activo .nav-btn:active:not(:disabled) { transform: perspective(600px) translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); } /* ── El área de juego y el pasaje: hundidos, no planos ─────── */ html.e3d-activo .conn-area { box-shadow: 0 2px 14px rgba(0, 0, 0, .3) inset, 0 1px 0 rgba(255, 255, 255, .04); } html.e3d-activo .passage, html.e3d-activo .example { box-shadow: 0 6px 18px rgba(0, 0, 0, .28); } /* ── La barra de progreso: un tubo, con luz propia ─────────── */ html.e3d-activo #prog-track { box-shadow: 0 1px 3px rgba(0, 0, 0, .5) inset; } /* ══ Teléfono ══════════════════════════════════════════════ En pantallas pequeñas el dedo no "pasa por encima": los efectos de hover no aplican y solo queda el relieve fijo, que es lo que de verdad se nota. Bajamos también el desenfoque, que es lo más caro de dibujar. */ @media (max-width: 640px) { html.e3d-activo #slide-card { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); } html.e3d-activo .formula, html.e3d-activo .ec-bloque { transform: perspective(900px) translateZ(8px); } } /* ══ Quien pidió menos movimiento ══════════════════════════ Se queda el relieve —que es estático y ayuda a leer— pero se van las inclinaciones y los desplazamientos. */ @media (prefers-reduced-motion: reduce) { html.e3d-activo #slide-card, html.e3d-activo .ctype-card, html.e3d-activo .conn-chip, html.e3d-activo .q-opt, html.e3d-activo .nav-btn, html.e3d-activo .formula, html.e3d-activo .ec-bloque { transform: none !important; transition: box-shadow .3s ease, background .3s ease !important; } }