/* «Leé con Sol» — estilos de la app de juegos (cuentos tiene su propio CSS). Regla de oro para 60 fps en tablets: lo que se anima en bucle es sólo transform/opacity (o scale/rotate sueltos). Nada de filter, box-shadow ni background animados salvo en un elemento a la vez. */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fuentes/fredoka.woff2') format('woff2'); } :root { --fondo: #FFF8E7; --tarjeta: #FFFFFF; --sol: #FF9F1C; --cielo: #2EC4B6; --rosa: #FF6B9D; --violeta: #9B5DE5; --verde: #06D6A0; --amarillo: #FFD23F; --azul: #4D9DE0; --texto: #2B2D42; --suave: #8D99AE; --radio: 28px; --sombra: 0 8px 0 rgba(0, 0, 0, .08); --sol-osc: #D97E00; --cielo-osc: #1E9A8F; --rosa-osc: #D9487A; --violeta-osc: #7A3FC4; --verde-osc: #04A57B; --amarillo-osc: #E0A800; --azul-osc: #2F78B8; --crema-osc: #EADBB8; --fuente: 'Fredoka', Nunito, system-ui, sans-serif; --resorte: cubic-bezier(.34, 1.7, .5, 1); --resorte-suave: cubic-bezier(.3, 1.35, .5, 1); --apretar: .08s; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; } body { background: var(--fondo); color: var(--texto); font-family: var(--fuente); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; } button { font-family: inherit; color: inherit; -webkit-user-select: none; user-select: none; } img, svg { display: block; } .emoji { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; line-height: 1; } .mayus { text-transform: uppercase; font-weight: 600; letter-spacing: .02em; line-height: 1; } /* feedback táctil inmediato en todo lo tocable: `scale` es independiente de `transform`, así no pisa las animaciones de cada elemento */ button { transition: scale var(--apretar) ease-out; } button:active:not(:disabled) { scale: .92; } /* ── fondo vivo: cielo, sol de fondo, nubes en parallax, brillos, colinas u olas ─ */ #fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #fondo .cielo { position: absolute; inset: 0; background: linear-gradient(180deg, #8FD8FF 0%, #BDE9FF 30%, #E6F7FF 58%, #FFF4DA 82%, var(--fondo) 100%); } #fondo .resol { position: absolute; right: -14vmax; top: -14vmax; width: 52vmax; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 160, .9) 0 18%, rgba(255, 220, 120, .35) 38%, rgba(255, 220, 120, 0) 66%); } .nubes { position: absolute; inset: 0; } .nube { position: absolute; top: var(--y); left: 0; width: 180px; height: 56px; border-radius: 60px; background: #fff; transform: translateX(-30vw) scale(var(--s)); animation: nube var(--r) linear var(--d) infinite; will-change: transform; } .nube::before, .nube::after { content: ''; position: absolute; background: #fff; border-radius: 50%; } .nube::before { width: 84px; height: 84px; left: 26px; top: -42px; } .nube::after { width: 62px; height: 62px; left: 92px; top: -28px; } .nubes.lejos { opacity: .5; } .nubes.medio { opacity: .8; } @keyframes nube { from { transform: translateX(-30vw) scale(var(--s)); } to { transform: translateX(130vw) scale(var(--s)); } } .particulas i { position: absolute; left: var(--x); bottom: -20px; width: var(--t); height: var(--t); border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, rgba(255, 220, 90, .9) 35%, rgba(255, 210, 63, 0) 70%); animation: subir var(--r) linear var(--d) infinite; will-change: transform, opacity; } @keyframes subir { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translateY(-52vh) translateX(24px) scale(1.2); } 100% { transform: translateY(-105vh) translateX(-10px) scale(.7); opacity: 0; } } .suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; } .suelo .capa { position: absolute; left: 0; bottom: 0; width: 200%; background-repeat: repeat-x; background-size: 50% 100%; will-change: transform; } .suelo .lejos { height: 100%; opacity: .9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120 Q100 30 210 90 Q300 140 400 70 Q520 0 620 85 Q720 150 800 120 V200 H0Z' fill='%23C2F0D0'/%3E%3C/svg%3E"); animation: deslizar 420s linear infinite; } .suelo .atras { height: 80%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 110 Q120 40 240 95 T480 80 T680 70 T800 110 V200 H0Z' fill='%2387E2A6'/%3E%3Ccircle cx='170' cy='96' r='5' fill='%23fff'/%3E%3Ccircle cx='560' cy='92' r='5' fill='%23FFD23F'/%3E%3C/svg%3E"); animation: deslizar 240s linear infinite; } .suelo .adelante { height: 56%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90 Q160 20 330 80 T620 60 T800 90 V200 H0Z' fill='%2306D6A0'/%3E%3Cg fill='%23FFD23F'%3E%3Ccircle cx='120' cy='112' r='8'/%3E%3Ccircle cx='470' cy='120' r='7'/%3E%3C/g%3E%3Cg fill='%23FF6B9D'%3E%3Ccircle cx='300' cy='118' r='8'/%3E%3Ccircle cx='700' cy='104' r='7'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='210' cy='135' r='6'/%3E%3Ccircle cx='600' cy='140' r='6'/%3E%3C/g%3E%3C/svg%3E"); animation: deslizar 160s linear infinite; } @keyframes deslizar { to { transform: translateX(-50%); } } body[data-fondo="mar"] #fondo .cielo { background: linear-gradient(180deg, #9ADFFF 0%, #B8EEF0 28%, #8FE0D8 62%, #5FCFC4 100%); } body[data-fondo="mar"] .suelo { height: 17vh; } body[data-fondo="mar"] .suelo .lejos { height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q50 6 100 30 T200 30 T300 30 T400 30 V120 H0Z' fill='%2380DDD3'/%3E%3C/svg%3E"); background-size: 25% 100%; animation-duration: 26s; } body[data-fondo="mar"] .suelo .atras { height: 80%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q50 10 100 40 T200 40 T300 40 T400 40 V120 H0Z' fill='%2355CFC3'/%3E%3C/svg%3E"); background-size: 25% 100%; animation-duration: 18s; animation-direction: reverse; } body[data-fondo="mar"] .suelo .adelante { height: 60%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q50 20 100 50 T200 50 T300 50 T400 50 V120 H0Z' fill='%232EC4B6'/%3E%3Cpath d='M30 44 Q50 34 70 44' stroke='%23fff' stroke-width='5' fill='none' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E"); background-size: 25% 100%; animation-duration: 11s; } body[data-fondo="mar"] #fondo .resol { opacity: .7; } body[data-fondo="cielo"] .suelo { display: none; } body[data-fondo="cielo"] #fondo .cielo { background: linear-gradient(180deg, #C9B8FF 0%, #E2D8FF 38%, #FFEFF6 75%, var(--fondo) 100%); } body[data-fondo="mapa"] #fondo .cielo { background: radial-gradient(ellipse 120% 70% at 50% 40%, #7FE3DA 0%, #4FCFC4 55%, #2EB5AA 100%); } body[data-fondo="mapa"] .suelo, body[data-fondo="mapa"] .particulas { display: none; } body[data-fondo="mapa"] .nubes.lejos { opacity: .35; } body[data-fondo="mapa"] #fondo .resol { opacity: .45; } /* ── pantallas y transiciones: desplazamiento + escala + fundido ──────────── */ #app { position: relative; z-index: 1; height: 100dvh; width: 100vw; overflow: hidden; } .pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; padding: 88px 16px 24px; animation: entrar .62s var(--resorte-suave) both; } .pantalla.saliendo { animation: salir .4s cubic-bezier(.5, 0, .75, .4) both; pointer-events: none; } @keyframes entrar { from { opacity: 0; transform: translate(9vw, 2vh) scale(.9); } 60% { opacity: 1; } } @keyframes salir { to { opacity: 0; transform: translate(-9vw, -1vh) scale(1.07); } } .pantalla.zoom-salida.saliendo { animation: salirZoom .45s cubic-bezier(.5, 0, .75, .4) both; transform-origin: var(--zx, 50%) var(--zy, 50%); } @keyframes salirZoom { to { opacity: 0; transform: scale(1.6); } } /* entradas escalonadas: cada hijo con --i entra con resorte */ .aparece { animation: rebote .75s var(--resorte) both; animation-delay: calc(var(--i, 0) * 90ms); } @keyframes rebote { from { transform: scale(0) rotate(-12deg); opacity: 0; } 55% { opacity: 1; } } .sube { animation: subeResorte .7s var(--resorte-suave) both; animation-delay: calc(var(--i, 0) * 90ms); } @keyframes subeResorte { from { transform: translateY(60px) scale(.8); opacity: 0; } } /* ── barra superior (⬅ y 🔊) ─────────────────────────────────────────────── */ .barra { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 20; pointer-events: none; } .barra .chico { pointer-events: auto; } .chico { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .92); box-shadow: 0 5px 0 var(--crema-osc), 0 8px 16px rgba(43, 45, 66, .1); font-size: 30px; display: grid; place-items: center; text-decoration: none; transition: transform .3s var(--resorte), scale var(--apretar); } .chico:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--crema-osc); } .chico.padres { position: absolute; top: 12px; right: 88px; z-index: 21; } /* ── botones grandes con sombra 3D y rebote ──────────────────────────────── */ .btn { --bc: var(--tarjeta); --bs: var(--crema-osc); min-width: 96px; min-height: 96px; padding: 12px 24px; border: 0; border-radius: var(--radio); background: var(--bc); box-shadow: 0 9px 0 var(--bs), 0 16px 24px rgba(43, 45, 66, .14); display: inline-grid; place-items: center; cursor: pointer; position: relative; transition: transform .45s var(--resorte), box-shadow .45s var(--resorte), scale var(--apretar); } .btn::after { content: ''; position: absolute; left: 14%; right: 14%; top: 8px; height: 22%; border-radius: 99px; background: rgba(255, 255, 255, .35); pointer-events: none; } .btn .ico { font-size: 52px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); } .ico.svg { display: block; width: 56px; height: 56px; } .ico.svg svg { width: 100%; height: 100%; } .btn.grande .ico.svg { width: 80px; height: 80px; } .chico .ico.svg { width: 34px; height: 34px; color: var(--violeta); filter: none; } .tecla .ico.svg { width: 52px; height: 52px; } .btn:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--bs), 0 4px 8px rgba(43, 45, 66, .1); transition-duration: .07s; } .btn:disabled { opacity: .6; } .btn.grande { min-width: 150px; min-height: 136px; border-radius: 36px; } .btn.grande .ico { font-size: 74px; } .btn.sol-bg { --bc: linear-gradient(180deg, #FFB84D, var(--sol)); --bs: var(--sol-osc); } .btn.verde { --bc: linear-gradient(180deg, #3BE6B8, var(--verde)); --bs: var(--verde-osc); } .btn.cielo { --bc: linear-gradient(180deg, #4FD8CB, var(--cielo)); --bs: var(--cielo-osc); } .btn.violeta { --bc: linear-gradient(180deg, #B27DF0, var(--violeta)); --bs: var(--violeta-osc); } .btn.rosa { --bc: linear-gradient(180deg, #FF8DB5, var(--rosa)); --bs: var(--rosa-osc); } .fila { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: center; } .pulsa { animation: pulsa 1.5s ease-in-out infinite; } @keyframes pulsa { 50% { transform: scale(1.08); } } .pulsa:active { animation: none; } .sin-boton { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; } /* animaciones de un toque */ .pop { animation: pop .6s var(--resorte); } @keyframes pop { 30% { transform: scale(1.3); } } .boing { animation: boing .6s var(--resorte); } @keyframes boing { 25% { transform: scale(1.15, .85); } 50% { transform: scale(.92, 1.1); } } .sacudir { animation: sacudir .45s; } @keyframes sacudir { 20%, 60% { transform: translateX(-14px) rotate(-3deg); } 40%, 80% { transform: translateX(14px) rotate(3deg); } } .brilla { animation: brillar 1s ease-in-out infinite !important; z-index: 3; } @keyframes brillar { 0%, 100% { box-shadow: 0 0 0 6px #fff, 0 0 30px 10px var(--sol); } 50% { box-shadow: 0 0 0 10px #fff, 0 0 50px 22px var(--sol); transform: scale(1.06); } } /* ── Sol ─────────────────────────────────────────────────────────────────── */ .sol { width: min(42vmin, 280px); aspect-ratio: 1; flex: none; position: relative; } .sol > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sol .sol-rayos { animation: girarRayos 40s linear infinite, latir 1.6s ease-in-out infinite; will-change: transform; } .sol .sol-cara { filter: drop-shadow(0 10px 14px rgba(255, 159, 28, .3)); } @keyframes girarRayos { to { rotate: 360deg; } } @keyframes latir { 50% { scale: 1.07; } } .sol .ojos { transform-box: view-box; transform-origin: 100px 90px; transition: transform .07s; } .sol.parpadea .ojos { transform: scaleY(.08); } .sol .pupilas { transition: transform .25s ease-out; } .sol .boca { transform-box: fill-box; transform-origin: center top; } .sol .boca > g, .sol .ojo-feliz, .sol .globito { display: none; } .sol .brazo { transform-box: view-box; transition: transform .5s var(--resorte); } .sol .brazo.izq { transform-origin: 46px 138px; } .sol .brazo.der { transform-origin: 154px 138px; } .sol .cejas path { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--resorte); } .sol[data-estado="feliz"] .boca-feliz { display: inline; } .sol[data-estado="sorprendida"] .boca-o { display: inline; } .sol[data-estado="sorprendida"] .cejas path { transform: translateY(-8px); } .sol[data-estado="sorprendida"] .brazo.izq { transform: rotate(48deg); } .sol[data-estado="sorprendida"] .brazo.der { transform: rotate(-48deg); } .sol[data-estado="sorprendida"] .sol-cara { animation: respingo .45s var(--resorte); } @keyframes respingo { 35% { transform: translateY(-8%) scale(1.06); } } .sol[data-estado="pensando"] .boca-pensando, .sol[data-estado="pensando"] .globito { display: inline; } .sol[data-estado="pensando"] .ceja-i { transform: translateY(-6px) rotate(-8deg); } .sol[data-estado="pensando"] .pupilas { transform: translate(4px, -4px) !important; } .sol[data-estado="pensando"] .brazo.der { transform: rotate(-78deg); } .sol[data-estado="festejando"] .boca-grande, .sol[data-estado="festejando"] .ojo-feliz { display: inline; } .sol[data-estado="festejando"] .ojo-abierto { display: none; } .sol[data-estado="festejando"] .sol-cara { animation: saltar .5s ease-in-out infinite alternate; } .sol[data-estado="festejando"] .brazo.izq { transform: rotate(110deg); } .sol[data-estado="festejando"] .brazo.der { transform: rotate(-110deg); } .sol[data-estado="festejando"] .sol-rayos { animation-duration: 6s, .5s; } .sol.saluda[data-estado="feliz"] .brazo.der, .sol.saluda[data-estado="festejando"] .brazo.der { animation: saludar .9s ease-in-out 4 alternate; transition: none; } @keyframes saludar { from { transform: rotate(-100deg); } to { transform: rotate(-150deg); } } .sol-hablando .sol .boca { animation: hablar .19s ease-in-out infinite alternate; } .sol-hablando .sol .sol-rayos { animation-duration: 40s, .6s; } .sol.mini { width: clamp(92px, 11vmin, 124px); position: absolute; right: 12px; bottom: 12px; z-index: 15; pointer-events: none; } .sol.flota { animation: flotar 3.2s ease-in-out infinite; } @keyframes hablar { from { transform: scaleY(.3) scaleX(1.05); } to { transform: scaleY(1.25) scaleX(.92); } } @keyframes flotar { 50% { transform: translateY(-12px); } } @keyframes saltar { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-9%) rotate(4deg); } } @keyframes girar { to { transform: rotate(360deg); } } /* ── PIN ─────────────────────────────────────────────────────────────────── */ .pin-caja { display: flex; flex-direction: column; align-items: center; gap: 22px; } .pin-puntos { display: flex; gap: 18px; min-height: 32px; } .pin-puntos i { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #D6CBB0; transition: transform .3s var(--resorte); } .pin-puntos i.lleno { background: var(--sol); box-shadow: 0 4px 0 var(--sol-osc); transform: scale(1.15); } .teclado { display: grid; grid-template-columns: repeat(3, 104px); gap: 14px; } .tecla { font-size: 50px; font-weight: 600; min-height: 96px; padding: 0; color: var(--violeta); } .tecla.rosa, .tecla.verde { color: #fff; font-size: 44px; } .pantalla.pin .sol { width: min(30vmin, 210px); } @media (orientation: landscape) { .pantalla.pin { flex-direction: row; gap: 7vw; padding-top: 24px; } .pantalla.pin .sol { width: min(46vh, 320px); } .teclado { grid-template-columns: repeat(3, 100px); gap: 12px; } .tecla { min-height: min(96px, 14vh); min-width: 96px; } } /* ── bienvenida ──────────────────────────────────────────────────────────── */ .pantalla.bienvenida { gap: 4vmin; } .bienvenida .escena-sol { position: relative; display: grid; place-items: center; } .bienvenida .escena-sol::before { content: ''; position: absolute; width: 170%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: repeating-conic-gradient(rgba(255, 236, 150, .55) 0 10deg, rgba(255, 236, 150, 0) 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 0 22%, transparent 62%); mask: radial-gradient(circle, #000 0 22%, transparent 62%); animation: girar 60s linear infinite; will-change: transform; } .pantalla.bienvenida .sol { width: min(68vmin, 440px); } .bienvenida .sol.entra { animation: solEntra 1.1s var(--resorte-suave) both, flotar 3.2s ease-in-out 1.1s infinite; } @keyframes solEntra { from { transform: translateY(40vh) scale(.4) rotate(-30deg); opacity: 0; } 50% { opacity: 1; } } .bienvenida .fila .btn { animation: subeResorte .8s var(--resorte) both; animation-delay: calc(.55s + var(--i, 0) * 140ms); } .bienvenida .fila .btn.pulsa { animation: subeResorte .8s var(--resorte) both, pulsa 1.5s ease-in-out 1.6s infinite; animation-delay: calc(.55s + var(--i, 0) * 140ms), 1.6s; } .bienvenida .fila .btn.grande { min-width: 160px; min-height: 148px; } .bienvenida .fila .btn.grande .ico { font-size: 82px; } .bienvenida .fila .btn.grande .ico.svg { width: 90px; height: 90px; } @media (orientation: landscape) { .pantalla.bienvenida .sol { width: min(48vh, 390px); } } @media (orientation: landscape) and (min-width: 900px) { .pantalla.bienvenida { flex-direction: row; gap: 8vw; } .pantalla.bienvenida .sol { width: min(64vh, 470px); } .bienvenida .fila { display: grid; grid-template-columns: repeat(2, auto); gap: 26px; } .bienvenida .fila .btn.grande { min-width: 190px; min-height: 170px; } } /* ── mapa de islas ───────────────────────────────────────────────────────── */ .pantalla.mapa { justify-content: flex-start; padding: 0; } .mapa-scroll { position: absolute; left: 0; right: 0; top: 0; bottom: var(--orilla); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 46px), transparent 100%); } .pantalla.mapa { --orilla: 150px; } .mapa-camino { position: relative; margin: 0 auto; width: min(100%, 1000px); } .sendero { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; } .sendero path { fill: none; stroke-linecap: round; } .sendero-base { stroke: rgba(255, 255, 255, .28); stroke-width: 38; } .sendero-puntos { stroke: rgba(255, 255, 255, .85); stroke-width: 12; stroke-dasharray: 0.1 30; } .sendero-hecho { stroke: #FFE066; stroke-width: 16; stroke-dasharray: 0.1 30; } .sendero-nuevo { stroke: #FFE066; stroke-width: 16; stroke-dasharray: 0.1 30; } .sendero-mascara { stroke: #fff; stroke-width: 40; } .ola-deco { position: absolute; pointer-events: none; font-size: 46px; animation: flotarDeco var(--r, 5s) ease-in-out infinite alternate; will-change: transform; opacity: .95; } .ola-deco.marca-ola { width: 60px; height: 14px; border-top: 5px solid rgba(255, 255, 255, .6); border-radius: 50% 50% 0 0; font-size: 0; } @keyframes flotarDeco { from { transform: translate(-50%, -50%) translateY(-6px) rotate(-4deg); } to { transform: translate(-50%, -50%) translateY(6px) rotate(4deg); } } .isla { --p1: #8BF1C9; --p2: #06D6A0; --p3: #04A57B; position: absolute; width: 168px; height: 150px; margin: -75px 0 0 -84px; border: 0; padding: 0; cursor: pointer; background: none; display: grid; place-items: center; transition: transform .4s var(--resorte), scale var(--apretar); animation: islaEntra .7s var(--resorte) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes islaEntra { from { transform: translateY(40px) scale(.5); opacity: 0; } } .isla > i, .isla .cuerpo > i { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; } .isla .cuerpo { position: absolute; inset: 0; } .isla-agua { width: 196px; height: 108px; margin: -18px 0 0 -98px; background: radial-gradient(ellipse, rgba(255, 255, 255, .5) 0 48%, rgba(255, 255, 255, 0) 70%); } .isla-arena { width: 160px; height: 92px; margin: -28px 0 0 -80px; background: linear-gradient(180deg, #FFEBB8, #FFD98A); box-shadow: 0 9px 0 #E2B262, inset 0 -6px 0 rgba(255, 255, 255, .35); } .isla-pasto { width: 132px; height: 98px; margin: -62px 0 0 -66px; border-radius: 48% 52% 46% 54% / 60% 58% 42% 40% !important; background: radial-gradient(circle at 38% 28%, var(--p1), var(--p2) 68%); box-shadow: 0 9px 0 var(--p3), inset 0 -8px 0 rgba(0, 0, 0, .06); } .isla .deco { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12)); } .isla .deco.d1 { font-size: 50px; top: -22px; left: calc(50% + var(--lado) * 58px - 25px); } .isla .deco.d2 { font-size: 30px; top: 58px; left: calc(50% - var(--lado) * 64px - 15px); } .isla .letra { position: relative; z-index: 2; margin-top: -28px; font-size: 66px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 var(--p3), 0 5px 0 var(--p3), 0 8px 10px rgba(0, 0, 0, .18); } .isla .candado { position: absolute; z-index: 3; right: 18px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); } .isla.bloqueada .cuerpo, .isla.bloqueada .deco { filter: saturate(.55) brightness(1.04); } .isla.bloqueada .letra { color: var(--p3); opacity: .8; text-shadow: 0 -2px 0 rgba(0, 0, 0, .18), 0 3px 0 rgba(255, 255, 255, .8); filter: saturate(.6); } .isla.bloqueada:active { scale: .95; } .isla.completa .letra { text-shadow: 0 2px 0 var(--sol-osc), 0 5px 0 var(--sol-osc), 0 8px 10px rgba(0, 0, 0, .18); } .isla.completa .brillo-isla { position: absolute; left: 50%; top: 50%; width: 220px; height: 170px; margin: -100px 0 0 -110px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 226, 110, .85), rgba(255, 226, 110, 0) 65%); animation: titilar 2.6s ease-in-out infinite; will-change: opacity; pointer-events: none; } .isla .sticker-isla { position: absolute; z-index: 3; right: -4px; top: -18px; width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 40px; box-shadow: 0 0 0 4px var(--amarillo), 0 6px 0 4px var(--amarillo-osc); animation: flotar 2.4s ease-in-out infinite; } .isla .chispa { position: absolute; z-index: 4; font-size: 22px; animation: chispear 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: none; } @keyframes chispear { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } } @keyframes titilar { 50% { opacity: .35; } } .isla.actual { scale: 1.12; z-index: 5; } .isla.actual .cuerpo { animation: flotar 2.2s ease-in-out infinite; } .isla.actual .letra { font-size: 80px; animation: pulsa 1.5s ease-in-out infinite; } .isla.actual::before, .isla.actual::after { content: ''; position: absolute; left: 50%; top: 50%; width: 200px; height: 124px; margin: -46px 0 0 -100px; border-radius: 50%; border: 6px solid #fff; animation: halo 2s ease-out infinite; pointer-events: none; } .isla.actual::after { animation-delay: 1s; } .isla .bandera { position: absolute; z-index: 3; left: calc(50% - var(--lado) * 52px - 6px); top: -46px; font-size: 52px; transform-origin: 10% 95%; animation: flamear 1.2s ease-in-out infinite alternate; pointer-events: none; } @keyframes flamear { from { transform: rotate(-6deg); } to { transform: rotate(6deg) scaleX(.94); } } @keyframes halo { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.45); opacity: 0; } } .isla.recien { animation: islaDesbloqueo 1.1s var(--resorte) both; } @keyframes islaDesbloqueo { 0% { transform: scale(.6) rotate(-8deg); } 40% { transform: scale(1.35) rotate(4deg); } } .isla.final .letra { font-size: 60px; } .isla.final { --p1: #FFE9A8; --p2: #FFC93C; --p3: #D99A00; } /* orilla propia del mapa: el ▶ vive acá y el scroll de islas termina arriba, así nunca tapa una isla */ .mapa-acciones { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--orilla) + 34px); padding: 34px 0 14px; display: flex; justify-content: center; align-items: center; gap: 18px; z-index: 12; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q50 4 100 20 T200 20 T300 18 T400 22 V40 H0Z' fill='%23FFE7AE'/%3E%3Cpath d='M0 22 Q50 4 100 20 T200 20 T300 18 T400 22' stroke='%23fff' stroke-width='5' fill='none' opacity='.9'/%3E%3C/svg%3E") top / 100% 40px no-repeat, linear-gradient(180deg, transparent 39px, #FFE7AE 39px, #FFD98A 100%); } .mapa-acciones::before, .mapa-acciones::after { content: '🐚'; position: absolute; font-family: 'Noto Color Emoji', 'Apple Color Emoji', sans-serif; font-size: 34px; left: 9%; bottom: 26px; rotate: -14deg; } .mapa-acciones::after { content: '⭐'; left: auto; right: 24%; bottom: 56px; font-size: 28px; rotate: 18deg; } .mapa-acciones .btn { pointer-events: auto; } .mapa-acciones .btn.grande { min-width: 170px; } .contador-estrellas { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 22; height: 64px; padding: 0 22px 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: 0 5px 0 var(--crema-osc), 0 8px 18px rgba(43, 45, 66, .12); font-size: 34px; font-weight: 600; color: var(--sol-osc); } .contador-estrellas .emoji { font-size: 36px; } .contador-estrellas.pop { animation: popCentro .5s var(--resorte); } @keyframes popCentro { 30% { transform: translateX(-50%) scale(1.3); } } /* ── juegos: estructura común ────────────────────────────────────────────── */ .escenario { position: absolute; inset: 0; padding: 88px 16px 28px; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 4vmin; overflow: hidden; } .cartel-adulto { max-width: 520px; background: var(--tarjeta); border-radius: var(--radio); box-shadow: 0 9px 0 var(--crema-osc); padding: 24px; font-size: 22px; text-align: center; line-height: 1.35; } .tarjeta-emoji, .opcion, .letra-opcion, .ficha { border: 0; border-radius: var(--radio); background: var(--tarjeta); cursor: pointer; position: relative; box-shadow: 0 9px 0 var(--crema-osc), 0 14px 22px rgba(43, 45, 66, .12); transition: transform .4s var(--resorte), box-shadow .4s var(--resorte), opacity .3s, scale var(--apretar); } .tarjeta-emoji:active, .opcion:active, .letra-opcion:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--crema-osc); transition-duration: .07s, .07s, .3s, var(--apretar); } /* brillo de vidrio arriba */ .letra-opcion::after, .ficha::after, .opcion::after { content: ''; position: absolute; left: 12%; right: 12%; top: 7px; height: 20%; border-radius: 99px; background: rgba(255, 255, 255, .38); pointer-events: none; } /* indicador de rondas (puntitos que se llenan de estrellas) */ .rondas { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 19; pointer-events: none; } .rondas i { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); display: grid; place-items: center; font-style: normal; transition: transform .4s var(--resorte); } .rondas i.hecha { background: none; box-shadow: none; transform: scale(1.5); } .rondas i.hecha::after { content: '⭐'; font-family: 'Noto Color Emoji', 'Apple Color Emoji', sans-serif; font-size: 20px; line-height: 1; } .rondas i.ahora { background: var(--sol); transform: scale(1.3); box-shadow: 0 0 0 4px #fff, 0 3px 8px rgba(217, 126, 0, .4); } /* una letra o sílaba que vuela al centro, crece y gira al acertar */ .vuela-centro { position: fixed; z-index: 54; pointer-events: none; font-weight: 700; color: var(--c, var(--violeta)); -webkit-text-stroke: 9px #fff; paint-order: stroke fill; text-shadow: 0 12px 0 rgba(0, 0, 0, .16); transform: translate(-50%, -50%); line-height: 1; } /* placement */ .opciones-letras { display: flex; gap: 5vmin; flex-wrap: wrap; justify-content: center; } .letra-opcion { width: min(40vw, 30vh, 240px); aspect-ratio: 1; font-size: min(26vw, 20vh, 156px); color: #fff; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--c); box-shadow: 0 11px 0 rgba(0, 0, 0, .2), 0 18px 28px rgba(43, 45, 66, .16); text-shadow: 0 6px 0 rgba(0, 0, 0, .16); } .letra-opcion.bien { animation: festejo .8s var(--resorte); } @keyframes festejo { 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(.95) rotate(4deg); } } .letra-opcion:disabled:not(.bien):not(.brilla) { opacity: .55; transform: scale(.9); } @media (orientation: portrait) { .opciones-letras { flex-direction: column; gap: 3.5vh; } .letra-opcion { width: min(50vw, 23vh, 240px); font-size: min(32vw, 15vh, 156px); } } /* presentación */ .letra-gigante { position: relative; font-size: min(44vmin, 46vh); font-weight: 700; line-height: .9; color: var(--violeta); text-shadow: 0 6px 0 var(--violeta-osc), 0 12px 0 var(--violeta-osc), 0 26px 30px rgba(43, 45, 66, .2); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; } .letra-gigante.entra { animation: letraEntra 1.1s var(--resorte) both; } @keyframes letraEntra { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 45% { transform: scale(1.18) rotate(6deg); opacity: 1; } 70% { transform: scale(.94) rotate(-2deg); } } .letra-gigante::before, .letra-gigante::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; border: 8px solid rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; } .letra-gigante.sonando::before { animation: ondaSonido 1.1s ease-out infinite; } .letra-gigante.sonando::after { animation: ondaSonido 1.1s ease-out .55s infinite; } @keyframes ondaSonido { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.25); opacity: 0; } } .j-presentacion .letra-gigante { font-size: min(38vmin, 27vh); } .j-presentacion .escenario { gap: 3vh; } .j-presentacion .palabras-emoji { flex-wrap: nowrap; gap: 14px; min-height: 0; } .j-presentacion .tarjeta-emoji { min-width: 112px; min-height: 112px; padding: 12px 14px 14px; } .j-presentacion .tarjeta-emoji .emoji { font-size: min(14vw, 13vh, 104px); } .j-presentacion .tarjeta-emoji .mayus { font-size: min(6.4vw, 4.4vh, 38px); } .j-presentacion .silabas-fila { flex-wrap: nowrap; gap: 8px; } .j-presentacion .silabas-fila span { font-size: min(8.5vw, 8vh, 76px); padding: 6px 10px; } .silabas-fila { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .silabas-fila:empty { display: none; } .silabas-fila span { font-size: min(12vmin, 76px); background: var(--tarjeta); color: var(--cielo-osc); border-radius: 22px; padding: 8px 16px; box-shadow: 0 7px 0 var(--crema-osc); transition: background .2s, transform .3s var(--resorte); } .silabas-fila span.sonando { background: var(--sol); color: #fff; box-shadow: 0 7px 0 var(--sol-osc); transform: translateY(-6px) scale(1.1); } .palabras-emoji { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; min-height: 140px; } .tarjeta-emoji { --tc: #fff; --ts: var(--crema-osc); min-width: 120px; min-height: 120px; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--tc); box-shadow: 0 9px 0 var(--ts), 0 14px 22px rgba(43, 45, 66, .12); } .tarjeta-emoji .emoji { font-size: min(15vmin, 88px); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .08)); } .tarjeta-emoji .mayus { font-size: min(6vmin, 32px); color: var(--texto); } .tarjeta-emoji .mayus b { color: var(--violeta); font-weight: 700; } .tarjeta-emoji.sonando { transform: translateY(-10px) scale(1.08); box-shadow: 0 0 0 6px var(--sol), 0 15px 0 var(--ts), 0 22px 30px rgba(43, 45, 66, .16); } .tarjeta-emoji.llega { animation: tarjetaLlega .8s var(--resorte) both; } @keyframes tarjetaLlega { from { transform: translateY(70px) scale(.3) rotate(-14deg); opacity: 0; } 50% { opacity: 1; } } .pastel-0 { --tc: #FFF3D6; --ts: #F2D59A; } .pastel-1 { --tc: #E2F8F5; --ts: #A8E3DA; } .pastel-2 { --tc: #FFE6EF; --ts: #F5B9CE; } .pastel-3 { --tc: #EFE5FC; --ts: #CDB5F0; } /* presentación interactiva: fichas donde la consonante se junta con la vocal */ .silabas-fichas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .sil-ficha { border: 0; cursor: pointer; display: flex; align-items: center; padding: 8px 16px; border-radius: 22px; font-size: min(9vw, 7vh, 64px); background: #fff; box-shadow: 0 7px 0 var(--crema-osc), 0 12px 18px rgba(43, 45, 66, .1); font-family: inherit; transition: scale var(--apretar); } .sil-ficha .c { color: var(--cielo-osc); transform: translateX(-10px); transition: transform .5s var(--resorte); } .sil-ficha .v { color: var(--rosa); transform: translateX(10px); transition: transform .5s var(--resorte); } .sil-ficha.junta .c, .sil-ficha.junta .v { transform: none; } .sil-ficha.junta { background: #FFF4D6; box-shadow: 0 7px 0 #F2D59A, 0 12px 18px rgba(43, 45, 66, .1); } .tarjeta-emoji .palabra { min-height: 1em; min-width: 3ch; } .mas-palabras .tarjeta-emoji.chica { min-width: 96px; min-height: 96px; padding: 8px 12px; } .j-presentacion .mas-palabras .tarjeta-emoji.chica .emoji { font-size: min(10vw, 9vh, 70px); } .j-presentacion .mas-palabras .tarjeta-emoji.chica .mayus { font-size: min(5vw, 3.4vh, 28px); } /* trazado */ .trazado .pizarra { position: relative; padding: 14px; border-radius: 44px; background: conic-gradient(from 0deg, #FF6B9D, #FFD23F, #06D6A0, #2EC4B6, #9B5DE5, #FF6B9D); box-shadow: 0 12px 0 rgba(43, 45, 66, .12), 0 22px 36px rgba(43, 45, 66, .16); } .trazado canvas { display: block; width: min(88vw, 58vh, 620px); aspect-ratio: 1; background: var(--tarjeta); border-radius: 32px; touch-action: none; } .trazado .pizarra.lista { animation: festejo .9s var(--resorte); } @media (orientation: landscape) { .trazado canvas { width: min(70vh, 620px); } } /* burbujas: flotan de verdad (X e Y con duraciones distintas = trayectoria tipo Lissajous) */ .burbujas-zona { --t: clamp(140px, 34vmin, 240px); position: absolute; inset: 80px 0 0 0; } @media (orientation: portrait) { .burbujas-zona { --t: clamp(150px, 40vmin, 250px); } } .fondo-burbujitas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .fondo-burbujitas i { position: absolute; bottom: -40px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 12%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .05)); animation: burbujita var(--r) linear var(--d) infinite; will-change: transform; } @keyframes burbujita { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(18px, -50vh); } 100% { transform: translate(-12px, -100vh); opacity: .2; } } .burbuja-pos { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; animation: derivaX var(--dx-t, 5s) ease-in-out var(--fase, 0s) infinite alternate; will-change: transform; } @keyframes derivaX { from { transform: translateX(calc(var(--ax, 24px) * -1)); } to { transform: translateX(var(--ax, 24px)); } } .burbuja-flota { position: absolute; left: calc(var(--t) / -2); top: calc(var(--t) / -2); width: var(--t); height: var(--t); animation: derivaY var(--dy-t, 3.6s) ease-in-out var(--fase, 0s) infinite alternate; will-change: transform; } @keyframes derivaY { from { transform: translateY(calc(var(--ay, 20px) * -1)) rotate(calc(var(--giro, 4deg) * -1)); } to { transform: translateY(var(--ay, 20px)) rotate(var(--giro, 4deg)); } } .burbuja { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .12) 0 38%, var(--c) 72%, rgba(0, 0, 0, .14) 100%); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 45%, #fff) 0 34%, var(--c) 72%, color-mix(in srgb, var(--c) 80%, #000) 100%); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6), inset -14px -18px 30px rgba(0, 0, 0, .14), inset 10px 12px 24px rgba(255, 255, 255, .35), 0 18px 30px rgba(43, 45, 66, .16); display: grid; place-items: center; animation: rebote .8s var(--resorte) both; animation-delay: calc(var(--i, 0) * 120ms); } .burbuja::before { content: ''; position: absolute; left: 18%; top: 14%; width: 30%; height: 20%; border-radius: 50%; background: rgba(255, 255, 255, .9); transform: rotate(-35deg); pointer-events: none; } .burbuja::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; border-right: 5px solid rgba(255, 255, 255, .45); border-bottom: 3px solid rgba(255, 255, 255, .2); transform: rotate(20deg); pointer-events: none; } .burbuja span { position: relative; font-size: calc(var(--t) * .5); font-weight: 700; color: #fff; text-shadow: 0 5px 0 rgba(0, 0, 0, .18); } .burbuja.revienta { animation: reventar .28s ease-out forwards; } .burbuja.desinfla { animation: desinflar 1.1s ease-in-out; } @keyframes desinflar { 0% { transform: none; } 10% { transform: translateX(-12px) rotate(-6deg); } 20% { transform: translateX(12px) rotate(6deg); } 30% { transform: translateX(-8px) scale(.9, .8); } 45% { transform: scale(.78, .66) translateY(16px); } 75% { transform: scale(.8, .7) translateY(14px); } 100% { transform: none; } } .burbuja.se-va { animation: seVa .6s ease-in forwards; } @keyframes seVa { to { transform: translateY(-40vh) scale(.6); opacity: 0; } } @keyframes reventar { 50% { transform: scale(1.3); opacity: .8; } to { transform: scale(1.6); opacity: 0; } } .estallido { position: fixed; z-index: 50; pointer-events: none; } .estallido i { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; animation: chispa .8s cubic-bezier(.2, .8, .4, 1) forwards; } .estallido .onda { position: absolute; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 6px solid #fff; animation: onda .6s ease-out forwards; } .estallido.gotitas i { width: 14px; height: 18px; margin: -9px -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 2px solid rgba(255, 255, 255, .9); animation-name: gota; animation-duration: .9s; } @keyframes gota { 70% { opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(var(--s)); opacity: 0; } } .estallido.grande .onda { border-width: 10px; animation-duration: .8s; } @keyframes chispa { to { transform: translate(var(--dx), var(--dy)) scale(var(--s)); opacity: 0; } } @keyframes onda { to { transform: scale(6); opacity: 0; } } /* memotest: flip 3D */ .memo { display: grid; grid-template-columns: repeat(2, var(--w)); gap: 3.5vmin; --w: min(38vw, 21vh, 200px); } @media (orientation: landscape) { .memo { grid-template-columns: repeat(3, var(--w)); --w: min(20vw, 30vh, 236px); } } .carta { width: var(--w); aspect-ratio: 3/4; perspective: 900px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; } .carta.aparece { animation-name: cartaEntra; } @keyframes cartaEntra { from { transform: translateY(-50vh) rotate(-30deg) scale(.5); opacity: 0; } 50% { opacity: 1; } } .carta-giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--resorte); } .carta.vuelta .carta-giro { transform: rotateY(180deg); } .carta .cara { position: absolute; inset: 0; border-radius: 26px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .carta .dorso { background: radial-gradient(circle at 50% 50%, #FFE9A8 0 26%, #FFC93C 27% 31%, transparent 32%), repeating-linear-gradient(45deg, var(--violeta) 0 16px, #A974EC 16px 32px); box-shadow: 0 9px 0 var(--violeta-osc), inset 0 0 0 6px rgba(255, 255, 255, .35); } .carta .dorso::after { content: ''; position: absolute; left: -30%; top: -10%; width: 40%; height: 130%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); transform: rotate(20deg); } .carta .dorso .emoji { font-size: calc(var(--w) * .3); } .carta .frente { background: var(--tarjeta); transform: rotateY(180deg); box-shadow: 0 9px 0 var(--crema-osc), inset 0 0 0 6px #F4ECDD; } .carta .frente .mayus { font-size: calc(var(--w) * .56); color: var(--violeta); text-shadow: 0 6px 0 rgba(122, 63, 196, .25); } .carta .frente .emoji { font-size: calc(var(--w) * .52); } .carta.hecha .frente { background: radial-gradient(circle at 50% 40%, #fff, #DDFBF1); box-shadow: 0 9px 0 var(--verde-osc), inset 0 0 0 6px var(--verde); } .carta.hecha .frente::after { content: '⭐'; position: absolute; right: 8px; top: 8px; font-size: calc(var(--w) * .2); font-family: 'Noto Color Emoji', 'Apple Color Emoji', sans-serif; animation: rebote .6s var(--resorte) both .2s; } .carta.hecha .carta-giro { animation: cartaHecha .7s var(--resorte); } .carta.nop .carta-giro { animation: cartaNop .5s ease-in-out; } @keyframes cartaHecha { 40% { scale: 1.16; } } @keyframes cartaNop { 25% { translate: -8px 0; } 75% { translate: 8px 0; } } /* fichas (fábrica y armar): gordas, de colores, con sombra 3D */ .ficha { --fc: var(--violeta); --fs: var(--violeta-osc); min-width: 124px; min-height: 124px; padding: 6px 20px; display: grid; place-items: center; font-size: 64px; touch-action: none; z-index: 2; color: #fff; background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--fc); box-shadow: 0 10px 0 var(--fs), 0 16px 24px rgba(43, 45, 66, .16); text-shadow: 0 4px 0 rgba(0, 0, 0, .16); } .ficha.c0 { --fc: #FF6B9D; --fs: #D9487A; } .ficha.c1 { --fc: #2EC4B6; --fs: #1E9A8F; } .ficha.c2 { --fc: #9B5DE5; --fs: #7A3FC4; } .ficha.c3 { --fc: #FF9F1C; --fs: #D97E00; } .ficha.c4 { --fc: #4D9DE0; --fs: #2F78B8; } .ficha.vocal { --fc: #FF6B9D; --fs: #D9487A; } .ficha.consonante { --fc: var(--cielo); --fs: var(--cielo-osc); cursor: default; } .ficha.arrastrando { z-index: 40; box-shadow: 0 10px 0 var(--fs), 0 30px 40px rgba(43, 45, 66, .28); cursor: grabbing; transition: none; } .ficha.volver { transition: transform .5s var(--resorte); } .ficha.usada { visibility: hidden; } .ficha:active:not(.arrastrando) { scale: .93; } .hueco { min-width: 124px; min-height: 124px; border-radius: 28px; border: 5px dashed rgba(255, 255, 255, .95); display: grid; place-items: center; font-size: 64px; background: rgba(255, 255, 255, .35); padding: 0 12px; transition: transform .3s var(--resorte), background .2s; box-shadow: inset 0 6px 0 rgba(0, 0, 0, .06); } .hueco.cerca { border-color: var(--sol); background: #FFF1DA; transform: scale(1.12); } .zona-fabrica { position: relative; min-height: 46vmin; display: grid; place-items: center; } .maquina { position: relative; padding: 34px 42px; border-radius: 44px; background: linear-gradient(180deg, #FFFFFF, #F3ECFF); box-shadow: 0 12px 0 #D8C8F4, 0 24px 40px rgba(43, 45, 66, .16); display: grid; place-items: center; min-width: min(86vw, 460px); min-height: 230px; } .maquina .engranaje { position: absolute; font-size: 54px; animation: girar 6s linear infinite; will-change: transform; } .maquina .engranaje.e1 { left: -22px; top: -22px; } .maquina .engranaje.e2 { right: -18px; bottom: -18px; font-size: 44px; animation-direction: reverse; } .maquina.trabajando .engranaje { animation-duration: .7s; } .maquina.trabajando { animation: temblar .25s linear 3; } @keyframes temblar { 25% { transform: translate(-3px, 1px); } 75% { transform: translate(3px, -1px); } } .fabrica-mesa { display: flex; align-items: center; gap: 18px; } .fabrica-mesa .mas { font-size: 84px; font-weight: 700; color: var(--sol); text-shadow: 0 5px 0 var(--sol-osc); } .fabrica-mesa .ficha, .fabrica-mesa .hueco { font-size: 92px; min-width: 150px; min-height: 150px; } .silaba-grande { font-size: min(34vmin, 250px); line-height: 1; } .fusion { display: inline-flex; animation: fusion .9s var(--resorte) both; -webkit-text-stroke: 7px #fff; paint-order: stroke fill; filter: drop-shadow(0 12px 0 rgba(43, 45, 66, .14)); } .fusion .c { color: var(--cielo); } .fusion .v { color: var(--rosa); } @keyframes fusion { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; letter-spacing: .6em; } 50% { transform: scale(1.25); opacity: 1; } 75% { transform: scale(.94); } } .choque { animation: choque .9s var(--resorte); } @keyframes choque { 40% { transform: scale(1.12, .9); } } .fichas-abajo { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; min-height: 130px; max-width: 760px; } .opciones { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; } .opcion { --oc: #fff; --os: var(--crema-osc); min-width: 180px; min-height: 160px; font-size: min(17vmin, 100px); padding: 8px 26px; color: var(--violeta); background: var(--oc); box-shadow: 0 10px 0 var(--os), 0 16px 24px rgba(43, 45, 66, .12); } .opcion.bien { --oc: var(--verde); --os: var(--verde-osc); color: #fff; transform: scale(1.14); animation: festejo .8s var(--resorte); } .opciones.resuelta .opcion:not(.bien) { opacity: .45; transform: scale(.88); } /* armá la palabra: escena con el dibujo enorme */ .j-armar .escenario { gap: 3.2vmin; } .armar-escena { display: flex; flex-direction: column; align-items: center; gap: 3.2vmin; } .armar-tarjeta { position: relative; width: min(84vw, 34vh, 420px); aspect-ratio: 1.15; border-radius: 44px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #FFFFFF 0 30%, #FFF2CC 60%, #FFE09A 100%); box-shadow: 0 12px 0 #EBC56D, 0 24px 40px rgba(43, 45, 66, .16), inset 0 0 0 8px rgba(255, 255, 255, .7); } .armar-tarjeta::before { content: ''; position: absolute; width: 150%; aspect-ratio: 1; background: repeating-conic-gradient(rgba(255, 255, 255, .55) 0 12deg, rgba(255, 255, 255, 0) 12deg 24deg); animation: girar 40s linear infinite; will-change: transform; } .armar-emoji { position: relative; font-size: min(36vmin, 70vw, 30vh, 300px); filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .1)); } .armar-emoji.contento { animation: festejo 1s var(--resorte); } .armar-juego { display: flex; flex-direction: column; align-items: center; gap: 3.2vmin; } .casilleros { display: flex; gap: 14px; flex-wrap: nowrap; justify-content: center; transition: gap .5s var(--resorte); } .casilleros .hueco { min-width: min(130px, 26vw); min-height: min(130px, 26vw); font-size: min(64px, 13vw); color: #fff; } .casilleros .hueco.lleno { border-style: solid; border-color: transparent; background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--fc, var(--verde)); box-shadow: 0 9px 0 var(--fs, var(--verde-osc)); text-shadow: 0 4px 0 rgba(0, 0, 0, .16); } .hueco.recibe { animation: recibir .6s var(--resorte); } @keyframes recibir { 0% { transform: scale(.8, 1.15); } 40% { transform: scale(1.2, .85); } 70% { transform: scale(.95, 1.05); } } .casilleros.junta { gap: 0; animation: juntar .9s var(--resorte); z-index: 5; } @keyframes juntar { 0% { transform: scale(1); } 40% { transform: scale(1.3); } } .casilleros.junta .hueco { min-width: 0; padding: 0 8px; border-radius: 0; border-width: 0; --fc: var(--verde); --fs: var(--verde-osc); } .casilleros.junta .hueco:first-child { border-radius: 28px 0 0 28px; padding-left: 22px; } .casilleros.junta .hueco:last-child { border-radius: 0 28px 28px 0; padding-right: 22px; } .ficha.se-va { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(.5); } @media (orientation: landscape) and (min-width: 820px) { .armar-escena { flex-direction: row; gap: 6vw; } .armar-tarjeta { width: min(40vw, 62vh, 500px); } .armar-emoji { font-size: min(36vmin, 42vh, 300px); } } /* veo veo */ .veoveo-cabeza { display: flex; align-items: center; gap: 14px; font-size: min(18vmin, 110px); } .veoveo-cabeza .ojos-veo { display: inline-block; animation: mirarLados 3s ease-in-out infinite; } .veoveo-cabeza .lupa { display: inline-block; animation: lupa 2.4s ease-in-out infinite; } @keyframes mirarLados { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } } @keyframes lupa { 50% { transform: rotate(-18deg) scale(1.1); } } .veoveo-grilla { display: grid; grid-template-columns: repeat(2, auto); gap: 4vmin; } @media (orientation: landscape) { .veoveo-grilla { grid-template-columns: repeat(4, auto); } } .veoveo-grilla .tarjeta-emoji { width: min(41vw, 26vh, 240px); height: min(41vw, 26vh, 240px); border-radius: 36px; } @media (orientation: landscape) { .veoveo-grilla .tarjeta-emoji { width: min(21vw, 40vh, 250px); height: min(21vw, 40vh, 250px); } } .veoveo-grilla .tarjeta-emoji .emoji { font-size: min(24vw, 15vh, 140px); } @media (orientation: landscape) { .veoveo-grilla .tarjeta-emoji .emoji { font-size: min(12vw, 23vh, 140px); } } .veoveo-grilla .tarjeta-emoji.mal { opacity: .35; transform: scale(.85); } .veoveo-grilla .tarjeta-emoji.elegida { transform: scale(1.14); box-shadow: 0 0 0 7px var(--verde), 0 12px 0 7px var(--verde-osc), 0 26px 34px rgba(43, 45, 66, .18); z-index: 4; animation: festejo .9s var(--resorte); } .rotulo { position: absolute; bottom: -22px; background: var(--verde); color: #fff !important; padding: 6px 16px; border-radius: 18px; font-size: 32px !important; box-shadow: 0 5px 0 var(--verde-osc); animation: rebote .6s var(--resorte) both; } .tarjeta-emoji .rotulo b { color: var(--amarillo); } /* micrófono */ .micro-objetivo { font-size: min(30vmin, 220px); font-weight: 700; color: var(--violeta); text-shadow: 0 6px 0 var(--violeta-osc), 0 12px 0 var(--violeta-osc), 0 24px 28px rgba(43, 45, 66, .18); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; } .micro-objetivo.logrado { color: var(--verde); text-shadow: 0 6px 0 var(--verde-osc), 0 12px 0 var(--verde-osc); animation: festejo .9s var(--resorte); } .micro-ondas { position: relative; display: grid; place-items: center; } .micro-ondas::before, .micro-ondas::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 8px solid var(--verde); opacity: 0; pointer-events: none; } .micro-ondas.escuchando::before, .micro-ondas.escuchando::after { animation: halo 1.2s ease-out infinite; } .micro-ondas.escuchando::after { animation-delay: .6s; } .btn-micro { width: 200px; height: 200px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--rosa); box-shadow: 0 11px 0 var(--rosa-osc), 0 20px 30px rgba(43, 45, 66, .16); font-size: 100px; cursor: pointer; transition: transform .4s var(--resorte), opacity .3s, scale var(--apretar); } .btn-micro:active { transform: translateY(6px); } .btn-micro.escuchando { background: var(--verde); box-shadow: 0 11px 0 var(--verde-osc); } .btn-micro:disabled { transform: scale(.86); opacity: .8; } .barras-voz { display: flex; gap: 8px; height: 60px; align-items: center; opacity: 0; transition: opacity .3s; } .barras-voz i { width: 12px; height: 60px; border-radius: 6px; background: var(--verde); transform: scaleY(.25); } .micro-ondas.escuchando + .barras-voz { opacity: 1; } .micro-ondas.escuchando + .barras-voz i { animation: barra .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -110ms); } @keyframes barra { to { transform: scaleY(1); } } /* frases */ .frase-escena { position: relative; display: grid; place-items: center; padding: 3vmin 7vmin; border-radius: 50%; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 14px rgba(255, 255, 255, .35), 0 18px 34px rgba(122, 63, 196, .14); } .frase-emoji { font-size: min(24vmin, 170px); white-space: nowrap; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .08)); } .frase-emoji.aparece { animation-duration: 1s; } .frase { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; max-width: 1100px; } .frase button { border: 0; background: #fff; font-size: min(12vmin, 92px); padding: 10px 18px; border-radius: 22px; cursor: pointer; font-family: inherit; color: var(--texto); box-shadow: 0 7px 0 var(--crema-osc), 0 12px 18px rgba(43, 45, 66, .1); transition: transform .35s var(--resorte), background .2s, scale var(--apretar); } .frase button.sonando { background: var(--sol); color: #fff; box-shadow: 0 7px 0 var(--sol-osc); transform: translateY(-8px); } .frase.leyendo button { animation: olita .9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 110ms); } @keyframes olita { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } } /* recompensa */ .resplandor { position: absolute; left: 50%; top: 42%; width: 150vmax; aspect-ratio: 1; margin: -75vmax 0 0 -75vmax; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 210, 63, .34) 0 9deg, rgba(255, 210, 63, 0) 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, #000 18%, transparent 60%); mask: radial-gradient(circle, #000 0, #000 18%, transparent 60%); animation: girar 40s linear infinite; will-change: transform; pointer-events: none; } .pantalla.recompensa .sol { width: min(50vmin, 360px); } .pantalla.recompensa .sol.entra { animation: solEntra 1s var(--resorte-suave) both; } .estrellas { display: flex; gap: 3vmin; } .estrellas span { font-size: min(20vmin, 140px); transition: opacity .3s; filter: drop-shadow(0 8px 0 rgba(217, 126, 0, .35)); } .estrellas span.apagada { opacity: .22; filter: grayscale(1); } .estrellas span.prende { animation: prender .8s var(--resorte); } @keyframes prender { 0% { transform: scale(.3) rotate(-90deg); } 50% { transform: scale(1.45) rotate(15deg); } } .estrella-vuela { position: fixed; z-index: 58; font-size: 90px; pointer-events: none; transform: translate(-50%, -50%); } .album-destino { position: absolute; top: 12px; left: 88px; z-index: 22; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, #B27DF0, var(--violeta)); box-shadow: 0 5px 0 var(--violeta-osc); display: grid; place-items: center; font-size: 34px; animation: rebote .6s var(--resorte) both; } .album-destino.pop { animation: pop .6s var(--resorte); } .sticker-vuela { position: fixed; z-index: 60; font-size: 150px; padding: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px var(--sol), 0 14px 0 10px var(--sol-osc), 0 30px 50px rgba(43, 45, 66, .25); left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: none; } .sticker-vuela.entra { animation: stickerAparece 1.2s var(--resorte) both; } @keyframes stickerAparece { 0% { transform: translate(-50%, -50%) scale(0) rotate(-360deg); } 60% { transform: translate(-50%, -50%) scale(1.15) rotate(10deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); } } .lienzo-confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 55; display: none; } /* álbum: página con stickers troquelados */ .pantalla.album { justify-content: flex-start; overflow-y: auto; padding-top: 92px; } .album-total { font-size: 60px; font-weight: 600; display: flex; align-items: center; gap: 12px; color: var(--sol-osc); background: rgba(255, 255, 255, .92); padding: 8px 30px; border-radius: 99px; box-shadow: 0 7px 0 var(--crema-osc); } .album-hoja { width: min(100%, 980px); padding: 22px; border-radius: 36px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); margin-bottom: 24px; } .album-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px; } .sticker { border: 0; padding: 0; font-family: inherit; cursor: pointer; background: radial-gradient(circle at 40% 30%, #fff, #FFF7E6); border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 8px 0 6px var(--crema-osc), 0 14px 22px rgba(43, 45, 66, .14); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; animation: pegar .6s var(--resorte) both; animation-delay: calc(var(--i, 0) * 60ms); rotate: var(--rot, 0deg); } @keyframes pegar { from { transform: scale(1.8) rotate(25deg); opacity: 0; } 60% { opacity: 1; } } .sticker .emoji { font-size: 58px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .1)); } .sticker .mayus { font-size: 28px; color: var(--violeta); } .sticker.vacio { background: rgba(255, 255, 255, .35); box-shadow: none; border: 4px dashed #CDBDE6; rotate: 0deg; cursor: default; animation: aparecerSuave .5s ease-out both; animation-delay: calc(var(--i, 0) * 12ms + .15s); } @keyframes aparecerSuave { from { opacity: 0; transform: scale(.85); } } .sticker.vacio .mayus { color: #BBA8DA; font-size: 40px; } /* ── menú libre de juegos y selector de letra ───────────────────────────── */ .pantalla.juegos, .pantalla.selector-letra { justify-content: safe center; overflow-y: auto; } .juegos-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4vmin; width: min(100%, 560px); } @media (orientation: landscape) { .juegos-grilla { grid-template-columns: repeat(4, 1fr); width: min(100%, 1000px); } } .juego-tarjeta { aspect-ratio: 1; width: 100%; min-height: 0; border-radius: 40px; padding: 0; } .juego-tarjeta .emoji { font-size: min(18vmin, 150px); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .15)); } @media (orientation: portrait) { .juego-tarjeta { aspect-ratio: 1.15; } .juego-tarjeta .emoji { font-size: min(16vh, 22vw, 130px); } } .selector-cabeza { display: flex; align-items: center; gap: 6vmin; } .selector-cabeza .juego-ico { font-size: min(20vmin, 130px); filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .12)); } .sorpresa .emoji { font-size: 74px; } .letras-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19vw, 110px), 1fr)); gap: 14px; width: min(100%, 1040px); padding-bottom: 20px; } .letra-elegir { aspect-ratio: 1; border: 0; border-radius: 26px; cursor: pointer; font-size: min(10vw, 56px); color: #fff; background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), #C9B6EE; box-shadow: 0 7px 0 #A993D8; text-shadow: 0 3px 0 rgba(0, 0, 0, .12); transition: scale var(--apretar), opacity .3s; } .letra-elegir.abierta { background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--violeta); box-shadow: 0 7px 0 var(--violeta-osc); } .letra-elegir.vocal { background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), #FFB3CC; box-shadow: 0 7px 0 #E88AAA; } .letra-elegir.vocal.abierta { background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--rosa); box-shadow: 0 7px 0 var(--rosa-osc); } .letra-elegir.apagada { opacity: .25; cursor: default; } /* ══ Etapa 6: flujo por lecciones ══════════════════════════════════════════ */ /* camino: cada estación muestra las letras de la lección, su título chiquito (para el adulto) y su planta */ .isla .letra.multi { font-size: 56px; white-space: nowrap; word-spacing: -.1em; } .isla.actual .letra.multi { font-size: 62px; } .isla .letra.larga { font-size: 36px; letter-spacing: 0; white-space: nowrap; } .isla.actual .letra.larga { font-size: 40px; } .isla .titulo-est { position: absolute; z-index: 3; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; background: rgba(43, 45, 66, .38); padding: 2px 10px; border-radius: 99px; pointer-events: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; } .isla .planta { position: absolute; z-index: 3; left: calc(50% + var(--lado) * 66px - 22px); top: 78px; font-size: 44px; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .14)); transform-origin: 50% 100%; animation: mecer 3s ease-in-out infinite; } .isla .planta.chica { font-size: 32px; top: 70px; } .isla .planta.brote { font-size: 30px; top: 74px; } .isla .planta.gris { font-size: 28px; top: 76px; filter: grayscale(1) opacity(.55); animation: none; } .isla .candado { width: 34px; height: 34px; font-size: 18px; right: 22px; bottom: 22px; } .isla.salteada .letra { opacity: .85; } @keyframes mecer { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } /* menú chico al tocar una lección completa */ .menu-chico { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(43, 45, 66, .32); animation: aparecerSuave .25s ease-out both; padding: 16px; } .menu-chico.cierra { animation: aparecerSuave .25s ease-in reverse both; pointer-events: none; } .menu-chico-caja { background: #fff; border-radius: 40px; padding: 22px 26px 30px; box-shadow: 0 12px 0 var(--crema-osc), 0 30px 60px rgba(43, 45, 66, .3); display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 100%; } .menu-chico-titulo { display: flex; align-items: center; gap: 14px; font-size: 54px; color: var(--violeta); } .menu-chico-titulo .emoji { font-size: 64px; } .opcion-chica { flex-direction: column; gap: 6px; min-width: 150px; min-height: 150px; } .opcion-chica small { font-size: 16px; font-weight: 600; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); max-width: 130px; line-height: 1.1; } /* barra del ciclo de la lección (arriba): 🔊 🛝 🫧 🚂 ❓ 📖 */ .ciclo { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 19; display: flex; gap: 6px; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .72); box-shadow: 0 4px 0 rgba(43, 45, 66, .08); pointer-events: none; } .paso-ciclo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .8); position: relative; transition: transform .4s var(--resorte); } .paso-ciclo .emoji { font-size: 24px; filter: grayscale(.85) opacity(.55); } .paso-ciclo.hecho { background: #DDFBF1; box-shadow: inset 0 0 0 3px var(--verde); } .paso-ciclo.hecho .emoji { filter: none; } .paso-ciclo.hecho::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; } .paso-ciclo.ahora { background: linear-gradient(180deg, #FFB84D, var(--sol)); transform: scale(1.22); box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(217, 126, 0, .4); } .paso-ciclo.ahora .emoji { filter: none; animation: pulsa 1.4s ease-in-out infinite; } .con-ciclo .rondas { top: 78px; } .con-ciclo .escenario { padding-top: 116px; } @media (max-width: 480px) { .ciclo { gap: 3px; padding: 4px 6px; top: 20px; } .paso-ciclo { width: 32px; height: 32px; } .paso-ciclo .emoji { font-size: 19px; } } .ciclo.grande { position: relative; top: auto; left: auto; transform: none; gap: 12px; padding: 12px 18px; animation: rebote .7s var(--resorte) both; } .ciclo.grande { gap: min(2vw, 12px); padding: 10px min(3vw, 18px); max-width: 100%; } .ciclo.grande .paso-ciclo { width: min(11.5vw, 76px); height: min(11.5vw, 76px); animation: rebote .6s var(--resorte) both; animation-delay: calc(.2s + var(--i) * 90ms); } .ciclo.grande .paso-ciclo .emoji { font-size: min(6.6vw, 44px); } .ciclo.grande .paso-ciclo.ahora { transform: scale(1.25); } .ciclo.grande .paso-ciclo.hecho::after { width: 24px; height: 24px; font-size: 16px; } .pantalla.entre-pasos { gap: 5vmin; } .entre-titulo { font-size: min(18vmin, 120px); color: #fff; -webkit-text-stroke: 8px var(--violeta); paint-order: stroke fill; text-shadow: 0 10px 0 rgba(122, 63, 196, .3); } .entre-icono { font-size: min(30vmin, 200px); filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .12)); animation: rebote .8s var(--resorte) both .3s, flotar 2.4s ease-in-out 1.1s infinite; } /* presentación: el gesto, escrito chiquito para el adulto */ .gesto-adulto { display: flex; align-items: center; gap: 8px; max-width: min(92vw, 560px); padding: 8px 16px; border-radius: 18px; background: rgba(255, 255, 255, .78); font-size: 17px; font-weight: 500; color: var(--texto); text-align: left; line-height: 1.25; box-shadow: 0 4px 0 rgba(43, 45, 66, .08); } .gesto-adulto .emoji { font-size: 26px; } .gesto-adulto.sonando { background: #FFF1DA; box-shadow: 0 0 0 3px var(--sol); } /* tobogán */ .tobogan-zona { position: relative; width: min(94vw, 680px, 92vh); aspect-ratio: 1.25; max-height: 62vh; } .tobogan-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 0 rgba(43, 45, 66, .1)); } .tobo-cons, .tobo-vocal { position: absolute; width: 118px; height: 118px; min-width: 0; min-height: 0; margin: -59px 0 0 -59px; padding: 0; font-size: 62px; z-index: 3; } .tobo-cons { cursor: pointer; animation: rebote .75s var(--resorte) both, saltito 1.6s ease-in-out .9s infinite; } .tobo-cons:disabled { animation: none; opacity: 1; } .tobo-vocal { z-index: 2; } @keyframes saltito { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .tobogan-resultado { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; font-size: min(30vmin, 210px); } @media (max-width: 480px) { .tobogan-zona .tobo-cons, .tobogan-zona .tobo-vocal { width: 92px; height: 92px; min-width: 0; min-height: 0; margin: -46px 0 0 -46px; font-size: 50px; } } /* tren de palabras */ .p-tren .escenario, .j-tren .escenario { gap: 2.5vmin; } .tren-escena { display: flex; flex-direction: column; align-items: center; gap: 3vmin; width: 100%; } .tren-cartel { position: relative; width: min(54vw, 26vh, 260px); aspect-ratio: 1; border-radius: 40px; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 40%, #fff 0 30%, #FFF2CC 60%, #FFE09A 100%); box-shadow: 0 0 0 8px #fff, 0 14px 0 8px var(--crema-osc), 0 26px 40px rgba(43, 45, 66, .16); } .tren-cartel .incognita { font-size: min(26vw, 13vh, 130px); opacity: .55; animation: flotar 2.6s ease-in-out infinite; } .tren-cartel .dibujo { font-size: min(34vw, 18vh, 180px); animation: rebote .8s var(--resorte) both; } .tren-cartel.revelado { background: radial-gradient(circle at 50% 40%, #fff 0 34%, #DDFBF1 70%, #A8F0D6 100%); box-shadow: 0 0 0 8px #fff, 0 14px 0 8px var(--verde-osc), 0 26px 40px rgba(43, 45, 66, .16); } .rotulo-tren { position: absolute; bottom: -22px; background: var(--verde); color: #fff; padding: 6px 18px; border-radius: 18px; font-size: 32px; box-shadow: 0 5px 0 var(--verde-osc); animation: rebote .6s var(--resorte) both .2s; white-space: nowrap; } .tren-pista { position: relative; width: 100%; display: flex; justify-content: center; padding-bottom: 18px; overflow: visible; } .via { position: absolute; left: -16px; right: -16px; bottom: 4px; height: 14px; border-top: 6px solid #8D6E63; background: repeating-linear-gradient(90deg, #A1887F 0 14px, transparent 14px 34px); opacity: .9; } .tren { display: flex; align-items: flex-end; gap: 8px; position: relative; z-index: 2; } .tren.llega { animation: trenLlega 1.1s cubic-bezier(.2, .9, .3, 1.15) both; } .tren.arranca { animation: trenArranca 1.1s cubic-bezier(.6, 0, .9, .5) forwards; } @keyframes trenLlega { from { transform: translateX(110vw); } } @keyframes trenArranca { 15% { transform: translateX(14px); } to { transform: translateX(-130vw); } } .loco-caja { position: relative; } .locomotora { display: block; font-size: min(26vw, 130px); line-height: .9; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .14)); animation: traqueteo .5s ease-in-out infinite; } @keyframes traqueteo { 50% { transform: translateY(-3px) rotate(-1deg); } } .humo { position: absolute; left: 18%; top: -12px; width: 40px; height: 40px; pointer-events: none; } .humo i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); animation: humo 1.8s ease-out infinite; } .humo i:nth-child(2) { animation-delay: .6s; } .humo i:nth-child(3) { animation-delay: 1.2s; } @keyframes humo { from { transform: translate(0, 0) scale(.4); opacity: .9; } to { transform: translate(-24px, -70px) scale(1.6); opacity: 0; } } .tren .casilleros { gap: 8px; } .tren .casilleros .hueco.vagon { position: relative; border-radius: 18px 18px 10px 10px; margin-bottom: 14px; } .tren .casilleros .hueco.vagon::before, .tren .casilleros .hueco.vagon::after { content: ''; position: absolute; bottom: -18px; width: 26px; height: 26px; border-radius: 50%; background: #4A4E69; box-shadow: inset 0 0 0 6px #22223B, inset 0 0 0 9px #9A8C98; left: 14%; } .tren .casilleros .hueco.vagon::after { left: auto; right: 14%; } .tren .casilleros.junta .hueco.vagon { margin-bottom: 14px; } @media (max-width: 480px) { .tren .casilleros .hueco.vagon { min-width: 84px; min-height: 84px; font-size: 40px; padding: 0 6px; } .locomotora { font-size: 92px; } .tren .casilleros { gap: 5px; } } /* ¿existe? */ .existe-escena { position: relative; display: flex; flex-direction: column; align-items: center; } .existe-tarjeta { position: relative; min-width: min(84vw, 520px); min-height: min(36vh, 300px); padding: 24px 30px 36px; border-radius: 44px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 12px 0 var(--crema-osc), 0 26px 40px rgba(43, 45, 66, .16); } .existe-tarjeta.entra { animation: rebote .7s var(--resorte) both; } .existe-palabra { font-size: min(20vw, 13vh, 132px); color: var(--texto); letter-spacing: .06em; } .existe-tarjeta.real { box-shadow: 0 0 0 8px var(--verde), 0 14px 0 8px var(--verde-osc), 0 26px 40px rgba(43, 45, 66, .16); } .existe-tarjeta.inventada { box-shadow: 0 0 0 8px var(--violeta), 0 14px 0 8px var(--violeta-osc), 0 26px 40px rgba(43, 45, 66, .16); } .existe-dibujo, .existe-monstruo { font-size: min(22vw, 12vh, 120px); animation: rebote .8s var(--resorte) both; } .existe-monstruo { animation: rebote .8s var(--resorte) both, risa .35s ease-in-out .8s 6; } @keyframes risa { 50% { transform: rotate(-12deg) scale(1.08, .94); } } .existe-micro { position: absolute; right: -14px; top: -18px; z-index: 3; } .existe-micro.escuchando { background: var(--verde); animation: pulsa 1s ease-in-out infinite; } .existe-botones { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; } .existe-botones .btn { flex-direction: column; gap: 4px; min-width: min(42vw, 250px); min-height: 150px; padding: 10px 14px; } .existe-botones .btn .emoji { font-size: 66px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12)); position: relative; z-index: 1; } .rimas-botones .btn .emoji, .opcion-chica .ico, .mlb-controles .btn .ico { position: relative; z-index: 1; } .existe-botones .btn b { color: #fff; font-size: min(5vw, 26px); text-shadow: 0 2px 0 rgba(0, 0, 0, .18); } .elegido { transform: scale(1.1); box-shadow: 0 0 0 6px #fff, 0 9px 0 6px var(--bs), 0 16px 24px rgba(43, 45, 66, .14) !important; opacity: 1 !important; } .apagado { opacity: .35 !important; transform: scale(.9); } /* minilibro */ .con-libro .escenario { padding: 84px 12px 16px; } .mini-libro { position: relative; width: 100%; height: 100%; perspective: 1800px; } .mlb-hoja { --g1: #FFE29A; --g2: #FFB36B; --g3: #FF8FA3; position: absolute; inset: 0; border-radius: 34px; overflow: hidden; display: grid; grid-template-rows: 1fr auto auto; align-items: center; justify-items: center; gap: 2vh; padding: 18px 14px 18px; background: radial-gradient(ellipse at 50% 30%, var(--g1) 0%, var(--g2) 60%, var(--g3) 100%); box-shadow: 0 12px 0 rgba(43, 45, 66, .12), 0 24px 40px rgba(43, 45, 66, .18), inset 14px 0 18px -10px rgba(0, 0, 0, .2); backface-visibility: hidden; transform-origin: left center; will-change: transform, opacity; } .mlb-hoja.entra { animation: hojaEntra .7s var(--resorte-suave) both; } .mlb-hoja.pasa { animation: hojaPasa .75s cubic-bezier(.45, .05, .55, .95) both; z-index: 3; pointer-events: none; } @keyframes hojaEntra { from { transform: translateX(12%) scale(.88); opacity: .2; } } @keyframes hojaPasa { 0% { transform: rotateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: rotateY(-115deg); opacity: 0; } } .mlb-tapa, .mlb-fin { --g1: #CBB2FF; --g2: #9B5DE5; --g3: #6A2FC0; grid-template-rows: 1fr; } .mlb-fin { --g1: #FFF1A8; --g2: #FFC46B; --g3: #FF8A5C; } .mlb-tapa-caja { display: flex; flex-direction: column; align-items: center; gap: 3vh; } .mlb-tapa-emoji { font-size: min(46vw, 30vh, 260px); filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .25)); animation: flotar 3.4s ease-in-out infinite; } .mlb-tapa-titulo { font-size: min(16vw, 10vh, 96px); color: #fff; -webkit-text-stroke: 7px var(--violeta-osc); paint-order: stroke fill; text-shadow: 0 8px 0 rgba(0, 0, 0, .2); } .mlb-tapa-sello { position: absolute; right: 22px; top: 18px; font-size: 54px; rotate: 14deg; } .mlb-fin-texto { font-size: min(11vw, 7vh, 72px); color: #fff; -webkit-text-stroke: 7px var(--sol-osc); paint-order: stroke fill; text-shadow: 0 8px 0 rgba(0, 0, 0, .18); text-align: center; } .mlb-fin-estrellas { font-size: min(14vw, 80px); animation: pulsa 1.4s ease-in-out infinite; } .mlb-escena { display: flex; align-items: center; justify-content: center; gap: 2vw; min-height: 0; } .mlb-emoji { font-size: min(40vw, 26vh, 230px); line-height: 1; animation: rebote .9s var(--resorte) both; animation-delay: calc(.2s + var(--i) * .16s); } .mlb-emoji:nth-child(2) { font-size: min(30vw, 19vh, 170px); } .mlb-emoji > span { display: inline-block; animation: flotar 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .2)); } .mlb-texto { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; max-width: 1000px; padding: 14px 18px; border-radius: 30px; background: rgba(255, 255, 255, .86); box-shadow: 0 9px 0 rgba(0, 0, 0, .07), 0 18px 34px rgba(30, 20, 60, .16); animation: subeResorte .6s var(--resorte-suave) both .25s; } .mlb-pal { border: 0; background: none; font-family: inherit; cursor: pointer; font-size: min(13vw, 8.5vh, 96px); color: var(--texto); padding: 4px 8px; border-radius: 18px; transition: transform .15s ease-out, color .15s, background .2s; } .mlb-pal.ayudada { background: #FFF1DA; } .mlb-pal.sonando, .mlb-pal.actual { color: var(--sol); transform: translateY(-6px) scale(1.1); text-shadow: 0 4px 12px rgba(255, 159, 28, .5); } .mlb-texto.leyendo .mlb-pal { color: var(--suave); } .mlb-texto.leyendo .mlb-pal.leida { color: var(--texto); } .mlb-texto.leyendo .mlb-pal.actual { color: var(--sol); } .mlb-hoja.lograda .mlb-texto { box-shadow: 0 0 0 6px var(--verde), 0 9px 0 6px var(--verde-osc); } .mlb-controles { display: flex; align-items: center; gap: 16px; } .mlb-controles .btn { min-width: 84px; min-height: 84px; padding: 8px 14px; } .mlb-controles .btn .ico { font-size: 42px; } .mlb-controles .btn.grande { min-width: 120px; min-height: 100px; } .mlb-micro.escuchando { --bc: var(--verde); --bs: var(--verde-osc); animation: pulsa 1s ease-in-out infinite; } .con-libro .sol.mini { display: none; } .mlb-num { white-space: nowrap; font-size: 20px; font-weight: 600; color: rgba(43, 45, 66, .55); background: rgba(255, 255, 255, .6); padding: 6px 14px; border-radius: 99px; } /* tambor de sílabas */ .tambor-cartel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 34px 22px; border-radius: 40px; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 0 var(--crema-osc), 0 20px 30px rgba(43, 45, 66, .12); } .tambor-dibujo { font-size: min(28vw, 18vh, 150px); line-height: 1; } .tambor-palabra { font-size: min(13vw, 8vh, 80px); color: var(--violeta); } .tambor-golpes { display: flex; gap: 10px; min-height: 30px; } .tambor-golpes i { width: 26px; height: 26px; border-radius: 50%; background: var(--rosa); box-shadow: 0 4px 0 var(--rosa-osc); } .tambor-btn { border: 0; background: none; cursor: pointer; padding: 0; position: relative; width: min(46vw, 30vh, 250px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; } .tambor-btn::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, .5), rgba(255, 210, 63, 0) 70%); opacity: 0; } .tambor-btn.listo::before { animation: halo 1.4s ease-out infinite; opacity: 1; } .tambor-btn .emoji { font-size: min(40vw, 26vh, 210px); filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .14)); } .tambor-btn:disabled { opacity: .7; } .tambor-btn.golpe .emoji { animation: golpe .26s ease-out; } @keyframes golpe { 40% { transform: scale(1.12, .86) translateY(8px); } } .tambor-fichas { display: flex; gap: 12px; min-height: 90px; flex-wrap: wrap; justify-content: center; } .tambor-ficha { font-size: min(11vw, 7vh, 64px); color: #fff; padding: 10px 20px; border-radius: 24px; background: var(--fc, var(--violeta)); box-shadow: 0 8px 0 var(--fs, var(--violeta-osc)); text-shadow: 0 3px 0 rgba(0, 0, 0, .15); } .tambor-ficha.c0 { --fc: #FF6B9D; --fs: #D9487A; } .tambor-ficha.c1 { --fc: #2EC4B6; --fs: #1E9A8F; } .tambor-ficha.c2 { --fc: #9B5DE5; --fs: #7A3FC4; } .tambor-ficha.c3 { --fc: #FF9F1C; --fs: #D97E00; } .tambor-ficha.c4 { --fc: #4D9DE0; --fs: #2F78B8; } /* ¿riman? */ .rimas-par { display: flex; align-items: center; gap: 4vmin; } .rima-dibujo { border: 0; cursor: pointer; width: min(38vw, 28vh, 250px); aspect-ratio: 1; border-radius: 40px; background: #fff; display: grid; place-items: center; font-size: min(24vw, 17vh, 160px); box-shadow: 0 10px 0 var(--crema-osc), 0 20px 30px rgba(43, 45, 66, .12); transition: transform .3s var(--resorte), scale var(--apretar); } .rima-dibujo.sonando { box-shadow: 0 0 0 7px var(--sol), 0 12px 0 7px var(--sol-osc); transform: scale(1.08); } .rima-y { font-size: min(10vw, 60px); animation: flotar 2s ease-in-out infinite; } .rimas-botones { display: flex; gap: 6vmin; } .rimas-botones .btn { min-width: min(36vw, 200px); min-height: 150px; } .rimas-botones .btn .emoji { font-size: 84px; } /* tu nombre */ .nombre-cartel { display: flex; flex-direction: column; align-items: center; gap: 3vh; } .nombre-estrella { font-size: min(20vw, 110px); animation: girar 8s linear infinite; } .nombre-letras { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin; max-width: 96vw; } .nombre-letra { border: 0; cursor: pointer; font-family: inherit; min-width: min(20vw, 150px); height: min(26vw, 25vh, 190px); padding: 0 12px; border-radius: 34px; font-size: min(17vw, 18vh, 140px); color: #fff; background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%), var(--fc); box-shadow: 0 10px 0 var(--fs), 0 18px 26px rgba(43, 45, 66, .16); text-shadow: 0 5px 0 rgba(0, 0, 0, .15); transition: transform .3s var(--resorte), scale var(--apretar); } .nombre-letra.c0 { --fc: #FF6B9D; --fs: #D9487A; } .nombre-letra.c1 { --fc: #2EC4B6; --fs: #1E9A8F; } .nombre-letra.c2 { --fc: #9B5DE5; --fs: #7A3FC4; } .nombre-letra.c3 { --fc: #FF9F1C; --fs: #D97E00; } .nombre-letra.c4 { --fc: #4D9DE0; --fs: #2F78B8; } .nombre-letra.canta { transform: translateY(-16px) scale(1.12) rotate(-4deg); } /* mi jardín */ .pantalla.jardin { justify-content: flex-start; overflow-y: auto; padding-top: 92px; gap: 3vh; } .jardin-cantero { width: min(100%, 1000px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(28vw, 150px), 1fr)); gap: 26px 16px; padding: 26px 18px 34px; border-radius: 40px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .25)); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); } .jardin-vacio { font-size: 120px; text-align: center; grid-column: 1 / -1; animation: flotar 3s ease-in-out infinite; } .maceta { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 200px; rotate: var(--rot); animation: subeResorte .7s var(--resorte-suave) both; animation-delay: calc(var(--i, 0) * 70ms); } .maceta-pote { position: relative; width: 112px; height: 78px; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); background: linear-gradient(180deg, #E58A5C 0 22%, #C9603A 22% 26%, #D9774A 26%); display: grid; place-items: center; padding-top: 16px; } .maceta-pote b { font-size: 26px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); white-space: nowrap; } .maceta.vacia .maceta-pote { filter: saturate(.4) brightness(1.1); opacity: .7; } .maceta-signo { font-size: 50px; margin-bottom: 10px; opacity: .6; animation: flotar 2.6s ease-in-out infinite; } .planta-maceta { position: relative; width: 110px; height: 118px; margin-bottom: -6px; } .planta-maceta > * { position: absolute; left: 50%; bottom: 0; transition: transform .7s var(--resorte), opacity .4s; transform-origin: 50% 100%; } .planta-maceta .tallo { width: 9px; height: 74px; margin-left: -4.5px; border-radius: 6px; background: linear-gradient(90deg, #4FA834, #7BD957); } .planta-maceta .hoja { width: 40px; height: 22px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #7BD957, #3FBF7F); bottom: 26px; } .planta-maceta .hoja.h1 { margin-left: -40px; transform-origin: 100% 100%; rotate: 20deg; } .planta-maceta .hoja.h2 { margin-left: 2px; bottom: 40px; transform-origin: 0 100%; rotate: -20deg; scale: -1 1; } .planta-maceta .brotecito { font-size: 44px; margin-left: -22px; } .planta-maceta .flor { font-size: 62px; bottom: 58px; margin-left: -31px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12)); } .planta-maceta.flor .flor { animation: mecer 3.2s ease-in-out infinite; } .planta-maceta.semilla > *, .planta-maceta.brote > :not(.brotecito) { transform: scale(0); opacity: 0; } .planta-maceta.semilla .brotecito { transform: scale(0); } .planta-maceta.brote .brotecito { transform: scale(1); } .planta-maceta.planta .brotecito, .planta-maceta.flor .brotecito { transform: scale(0); opacity: 0; } .planta-maceta.planta .flor { transform: scale(0); opacity: 0; } .planta-maceta.planta .tallo { transform: scaleY(.7); } .semilla-cae { position: fixed; z-index: 60; font-size: 54px; pointer-events: none; transform: translate(-50%, -50%); } /* menú libre: lección elegida y selector de lecciones */ .menu-leccion { display: flex; align-items: center; gap: 14px; font-size: min(14vw, 64px); color: #fff; -webkit-text-stroke: 6px var(--violeta); paint-order: stroke fill; } .menu-leccion .emoji { font-size: 1.1em; -webkit-text-stroke: 0; } .juegos-grilla { grid-template-columns: repeat(3, 1fr); width: min(100%, 620px); gap: 3.2vmin; } @media (orientation: landscape) { .juegos-grilla { grid-template-columns: repeat(6, 1fr); width: min(100%, 1180px); } } @media (orientation: portrait) { .juego-tarjeta { aspect-ratio: 1; } .juego-tarjeta .emoji { font-size: min(11vh, 17vw, 110px); } } .juego-tarjeta { border-radius: 32px; min-width: 0; } .lecciones-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(28vw, 150px), 1fr)); gap: 14px; width: min(100%, 1040px); padding-bottom: 20px; } .leccion-elegir { border: 0; cursor: pointer; font-family: inherit; aspect-ratio: 1.1; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255, 255, 255, .55); box-shadow: 0 7px 0 rgba(43, 45, 66, .1); transition: scale var(--apretar), opacity .3s; } .leccion-elegir .emoji { font-size: min(10vw, 50px); } .leccion-elegir b { font-size: min(6.4vw, 34px); color: #BBA8DA; white-space: nowrap; } .leccion-elegir.abierta { background: #fff; box-shadow: 0 7px 0 var(--crema-osc), 0 12px 18px rgba(43, 45, 66, .1); } .leccion-elegir.abierta b { color: var(--violeta); } .leccion-elegir.completa { background: radial-gradient(circle at 50% 30%, #fff, #E6FBF2); box-shadow: 0 7px 0 var(--verde-osc); } .leccion-elegir:disabled { opacity: .45; cursor: default; } /* celulares angostos: tres fichas de 120 px entran justo en una fila */ @media (max-width: 480px) { .fichas-abajo { gap: 10px; } .ficha { min-width: 120px; min-height: 120px; font-size: 54px; padding: 6px 12px; } .casilleros { gap: 10px; } .fabrica-mesa .ficha, .fabrica-mesa .hueco { font-size: 80px; min-width: 128px; min-height: 128px; } .maquina { padding: 28px 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }