Portal Estudiantil del IEMS

Memorama de Derechos de Niñas, Niños y Adolescentes | IEMS :root { --guinda: #5b0b18; --guinda-2: #7a1023; --dorado: #c79a3b; --dorado-claro: #f0d58b; --blanco: #ffffff; --gris: #f4f4f4; --oscuro: #21151a; } * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--blanco); background: radial-gradient(circle at top left, #9f2740, var(--guinda) 35%, #2b0710 100%); min-height: 100vh; } .site-header { padding: 28px 20px 18px; text-align: center; background: linear-gradient(135deg, rgba(91,11,24,.96), rgba(122,16,35,.9), rgba(199,154,59,.78)); border-bottom: 1px solid rgba(255,255,255,.18); } .site-header h1 { margin: 0 auto 10px; max-width: 1100px; font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1.05; letter-spacing: -1px; } .site-header p { margin: 0 auto; max-width: 900px; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.5; } .microsite { width: min(1180px, 94vw); margin: 28px auto 60px; } .intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-bottom: 24px; } .panel { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 26px; padding: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.2); backdrop-filter: blur(10px); } .panel h2, .panel h3 { margin-top: 0; } .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.18); padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; } .game-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .stat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 16px; text-align: center; } .stat span { display: block; font-size: .85rem; opacity: .85; margin-bottom: 6px; } .stat strong { font-size: 1.65rem; } button { border: none; cursor: pointer; border-radius: 18px; font-weight: 800; padding: 13px 16px; transition: transform .2s ease, filter .2s ease; } button:hover { transform: translateY(-2px); filter: brightness(1.08); } .primary-btn { background: var(--dorado-claro); color: var(--oscuro); } .secondary-btn { background: rgba(255,255,255,.14); color: white; border: 1px solid rgba(255,255,255,.22); } .game-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .board { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 14px; } .card { position: relative; min-height: 172px; perspective: 1000px; } .card-inner { position: absolute; inset: 0; transition: transform .55s ease; transform-style: preserve-3d; } .card.flipped .card-inner, .card.matched .card-inner { transform: rotateY(180deg); } .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 24px; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 16px 32px rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.22); overflow: hidden; } .front { background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(0,0,0,.25)); } .front::before { content: "?"; font-size: 4rem; font-weight: 900; color: var(--dorado-claro); } .back { transform: rotateY(180deg); color: white; padding: 13px; background: linear-gradient(145deg, var(--guinda-2), var(--dorado)); } .back-content .emoji { display: block; font-size: 2.2rem; margin-bottom: 8px; } .back-content h4 { margin: 0 0 7px; font-size: .95rem; line-height: 1.1; } .back-content p { margin: 0; font-size: .76rem; line-height: 1.25; opacity: .94; } .ranking ol { padding-left: 22px; margin-bottom: 0; } .ranking li { margin: 9px 0; line-height: 1.35; } .message { margin-top: 20px; padding: 20px; border-radius: 24px; background: var(--blanco); color: var(--guinda); text-align: center; display: none; box-shadow: 0 18px 40px rgba(0,0,0,.25); } .message.show { display: block; } .rights-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; font-size: .9rem; } .rights-list div { background: rgba(255,255,255,.1); padding: 10px; border-radius: 15px; } @media (max-width: 980px) { .intro-grid, .game-layout { grid-template-columns: 1fr; } .board { grid-template-columns: repeat(4, minmax(110px, 1fr)); } .game-tools { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .board { grid-template-columns: repeat(2, 1fr); } .card { min-height: 158px; } .rights-list { grid-template-columns: 1fr; } .site-header { padding-top: 22px; } } /* Ajuste para 20 derechos */ .board { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } @media (max-width: 1024px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .card { min-height: 150px !important; } } Memorama de los Derechos de Niñas, Niños y Adolescentes Micrositio interactivo para aprender jugando sobre derechos, protección, participación, igualdad y bienestar. ¿Cómo se juega? Da clic en dos cartas para encontrar las parejas. Cada par muestra un derecho y una breve explicación. El reto es completar el memorama con el menor número de movimientos y en el menor tiempo posible. Ranking local El ranking se guarda en este navegador. Sirve para actividades en aula, ferias, tutorías o jornadas escolares. Borrar ranking Tiempo00:00 Movimientos0 Parejas0/10 Reiniciar juego Mejores resultados Vida y desarrollo Prioridad Identidad Familia Igualdad Salud Educación Participación Protección Esparcimiento SITIO IEMS Material interactivo para uso educativo. Puede integrarse como recurso digital institucional.

juegos

Memorama de los Derechos de Niñas, Niños y Adolescentes

¿Cómo se juega?

Latest from Super User

Sitio Oficial IEMS

Portal Académico

Redes sociales

Estado del Tiempo