/* POLYMAT Play · v5.css · v5.1.0 (2026-10-01): rediseño de la plataforma y tanda de mejoras Se carga DESPUÉS de app.css en todas las páginas de la plataforma (portada, todos los juegos, página personal de la Aventura polimérica). Lo anterior (app.css) se conserva para lo que sigue en uso; aquí está lo nuevo: 1. utilidades y ajustes comunes (saltar al contenido, cabecera con idiomas en banderas, pie con la línea de FECYT) 2. portada: banner con las dos vías y el vídeo, filtros y tarjetas de juego 3. diálogo de acceso (iniciar sesión / crear cuenta) y diálogo de vídeo, siempre centrados 4. POL de la esquina y página personal de la Aventura polimérica 5. accesibilidad (contraste, foco, reflow) y contenido sin JavaScript 7. (v5.4.0, 10/10/2026) el camino de la Aventura polimérica y sus misiones secundarias (página personal) 8. (v5.4.0) el aviso del final de la portada: «Hay N juegos más por descubrir en la Aventura polimérica» (v5.4.1, 10/10/2026: formatos compactos y acceso a la formación del profesorado en la cabecera; ver 1 y 2) 9. (v5.4.2, 11/10/2026) la formación del profesorado en la página de la Aventura, junto a los premios (en la 5.4.1 estuvo en el banner) Dirección visual: la de la marca de siempre (coral #D8544C, azul marino #1E293B, verde azulado #80BCB4, Montserrat/Open Sans con pila del sistema), con las portadas de los juegos y POL como protagonistas. El movimiento es de entrada, corto y de CSS (nada en bucle: WCAG 2.2.2); con prefers-reduced-motion no hay ninguno y el contenido se ve igual. */ :root { --teal-tx: #2F6A62; /* verde azulado para TEXTO sobre claro (contraste >= 5:1) */ --navy-2: #2B3A55; --sombra-2: 0 14px 34px rgba(30, 41, 59, .18); } /* ---------- 1. comunes ---------- */ .pp-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #fff; color: var(--navy); font-weight: 800; padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra-2); } .pp-skip:focus { left: 16px; } html.pu-modal, html.pu-modal body { overflow: hidden; } html { scroll-padding-bottom: 150px; scroll-padding-top: 70px; } /* cabecera: la marca a la izquierda; los idiomas (banderas) y, a su derecha, el menú */ .pp-head.v4 { gap: 10px 14px; } .pp-head.v4 .pp-langs { margin-left: auto; gap: 6px; } .pp-head.v4 .pp-langs .pp-lang { display: inline-grid; place-items: center; width: 48px; min-height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; } .pp-head.v4 .pp-langs .pp-lang:hover { border-color: var(--navy); } .pp-head.v4 .pp-langs .pp-lang[aria-pressed="true"] { border-color: var(--navy); background: var(--teal-lt); box-shadow: inset 0 -3px 0 var(--navy); } .pp-head.v4 .pp-langs .pp-lang:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } .pp-flag { display: block; width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(30,41,59,.3); } .pp-head.v4 .pp-home.on { background: var(--navy); color: #fff; } .pp-head.v4 .pp-home { min-height: 40px; } .pp-headr-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pp-headr { gap: 12px; } @media (max-width: 760px) { /* móvil: la marca y los idiomas en la primera fila y los iconos de navegación en la segunda */ .pp-head.v4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; } .pp-head.v4 .pp-headr { display: contents; } .pp-head.v4 .pp-brand { grid-column: 1; grid-row: 1; } .pp-head.v4 .pp-langs { grid-column: 2; grid-row: 1; margin-left: 0; } .pp-head.v4 .pp-headr-links { grid-column: 1 / -1; grid-row: 2; gap: 6px; } .pp-head.v4 .pp-home span { display: none; } .pp-head.v4 .pp-home { padding: 8px; min-width: 40px; justify-content: center; } .pp-head.v4 .pp-sesion span { display: none; } .pp-head.v4 .pp-sesion { padding: 8px; min-width: 44px; min-height: 44px; justify-content: center; } .pp-head.v4 .pp-sesion.dentro span { display: inline; max-width: 8ch; } .pp-head.v4 .pp-langs .pp-lang { width: 44px; } .pp-head.v4 .pp-prof .pp-ext { display: none; } } /* v5.4.1: acceso a la formación del profesorado en la cabecera (enlace externo, otra pestaña). En pantallas medianas, solo el icono (como en el móvil) para no partir el menú; a 379 px o menos con la sesión iniciada (el botón lleva el nombre, hasta 8 caracteres) no cabe en la fila: no se pinta, y el acceso principal sigue en el banner de la portada */ .pp-head.v4 .pp-prof .pp-ext { width: 14px; height: 14px; opacity: .85; } @media (min-width: 761px) and (max-width: 1120px) { .pp-head.v4 .pp-prof span, .pp-head.v4 .pp-prof .pp-ext { display: none; } .pp-head.v4 .pp-prof { padding: 8px; min-width: 40px; justify-content: center; } } @media (max-width: 379px) { .pp-head.v4 .pp-headr-links:has(.pp-sesion.dentro) .pp-prof { display: none; } } .btn { min-height: 44px; justify-content: center; } .btn.grande { min-height: 52px; } .btn:focus-visible, .pv-chip:focus-visible, .pj-cerrar:focus-visible, .pv-pol:focus-visible, .pv-vbtn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; } .pv-via.av .btn:focus-visible, .pv-via.av button:focus-visible, .pv-via.av a:focus-visible { outline-color: #fff; } /* pie: una sola línea con la colaboración de FECYT (logotipo oficial con banderas y la leyenda) y, en pequeño, lo legal mínimo */ .pp-foot.v6 { margin: 28px 0 0; padding: 16px var(--gut, 0px) 20px; border-top: 1px solid var(--line); background: #fff; display: grid; gap: 8px; } .pp-foot.v6 .pp-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border: 0; margin: 0; padding: 0; } .pp-foot.v6 .pp-fin .pp-colab { color: var(--navy); font-weight: 800; font-size: 13px; white-space: nowrap; } .pp-foot.v6 .pp-fin img { height: 40px; width: auto; max-width: 100%; display: block; } .pp-foot.v6 .pp-fin-tx { flex: 1 1 280px; max-width: 80ch; font-size: 12.5px; line-height: 1.4; color: #4A5668; } .pp-foot.v6 .pp-foot-tx { margin: 0; font-size: 12px; color: #4A5668; } .pp-mapa .pp-foot.v6, .pp-juegos .pp-foot.v6 { margin: 30px -16px -40px; padding-inline: 16px; } .pp-mapa .pp-foot.v6 > *, .pp-juegos .pp-foot.v6 > * { max-width: 1180px; width: 100%; margin-inline: auto; } @media (max-width: 560px) { .pp-foot.v6 .pp-fin img { height: 36px; } } /* ---------- 2. portada ---------- */ .pp.pp-portada { max-width: none; padding: 0; --gut: max(16px, calc((100% - 1180px) / 2)); } .pp-portada .pp-head.v4 { margin: 0; padding: 10px var(--gut); } .pp-portada main { display: block; outline: none; } /* banner de POLYMAT Play */ .pv-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(0, .66fr); gap: clamp(16px, 3vw, 36px); align-items: center; padding: clamp(24px, 3.4vw, 44px) var(--gut); min-height: clamp(440px, 44vw, 560px); overflow: hidden; background: #FBF7F5 url("../img/hero_polymat.webp") right center / cover no-repeat; } .pv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(251,247,245,.98) 0%, rgba(251,247,245,.94) 52%, rgba(251,247,245,.55) 74%, rgba(251,247,245,.12) 100%); } .pv-hero-txt { display: grid; gap: 12px; max-width: 780px; } .pp-kicker, .pv-hero .pp-kicker { color: #B5362F; } .pv-hero h1 { margin: 0; font-family: var(--head); font-weight: 900; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1.04; letter-spacing: -.015em; color: var(--navy); text-wrap: balance; } /* «Digital y en papel» y «Solo o en grupo»: compactos, en una fila y sin cajón (v5.4.1, 10/10/2026: dejan sitio a la formación del profesorado) */ .pv-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; } .pv-feat li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; min-width: 0; } .pv-feat-ic { display: inline-flex; gap: 2px; color: var(--coral-dk); } .pv-feat-ic .ic { width: 22px; height: 22px; } .pv-feat b { display: block; font-family: var(--head); font-weight: 900; font-size: 1.05rem; line-height: 1.15; color: var(--navy); } .pv-feat div { display: grid; gap: 0; } .pv-feat span:not(.pv-feat-ic) { font-size: .84rem; line-height: 1.3; color: #3E4A5C; } .pv-feat-1 .pv-feat-ic { color: var(--coral-dk); } .pv-feat-2 .pv-feat-ic { color: var(--teal-tx); } @media (max-width: 760px) { .pv-feat { gap: 8px 18px; } .pv-feat b { font-size: 1rem; } } /* las dos vías: «Aventura polimérica» y «Juegos sueltos» (en la 5.4.1 la segunda fue la formación del profesorado; desde la 5.4.2 está en mapa.html) */ .pv-vias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; } .pv-via { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; border-radius: 22px; background: #fff; color: var(--ink); border: 2px solid var(--navy); box-shadow: 6px 6px 0 rgba(30,41,59,.9); min-width: 0; } .pv-via.av { background: var(--navy); color: #fff; box-shadow: 6px 6px 0 var(--coral-dk); } .pv-via-cab { display: flex; align-items: center; gap: 12px; } .pv-via h2 { margin: 0; font-family: var(--head); font-weight: 900; font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); line-height: 1.08; text-wrap: balance; } .pv-via-d { margin: 0 0 4px; font-size: .92rem; line-height: 1.4; } .pv-via.av .pv-via-d { color: rgba(255,255,255,.92); } .pv-via.suelto .pv-via-d { color: #3E4A5C; } .pv-edad { flex: none; display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 50%; border: 2.5px solid var(--coral-lt); color: #fff; font-family: var(--head); font-weight: 900; font-size: 1rem; } .pv-via.suelto .pv-edad { border-color: var(--teal-tx); color: var(--teal-tx); } /* texto solo para el lector de pantalla (p. ej. «se abre en otra pestaña») */ .pp-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .pv-edad .ic { width: 26px; height: 26px; } .pv-via .btn { width: 100%; } .pv-via.av .btn.p { background: var(--coral-dk); box-shadow: 0 10px 26px rgba(196,69,61,.5); } .pv-via.av .btn.p:hover { background: #AF3A33; } .pv-via-estado { margin: 0; min-height: 0; color: #9FD3CC; font-weight: 700; font-size: .88rem; } .pv-via-estado:empty { display: none; } @media (max-width: 760px) { .pv-vias { grid-template-columns: 1fr; gap: 12px; } .pv-via { box-shadow: 4px 4px 0 rgba(30,41,59,.9); } .pv-via.av { box-shadow: 4px 4px 0 var(--coral-dk); } } /* el vídeo de presentación: POL animado con su botón (escritorio) o, en el móvil, un botón de reproducir sin avatar */ .pv-hero-pol { display: grid; justify-items: center; align-content: center; min-width: 0; } .pv-escena { position: relative; width: min(100%, 520px); aspect-ratio: 16 / 12; display: grid; align-items: stretch; } .pv-pol { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 8px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; border-radius: 28px; min-height: 0; } .pv-pol-fig { display: block; height: 100%; width: auto; aspect-ratio: 608 / 640; max-width: 100%; min-height: 0; justify-self: center; transition: transform .25s ease; } .pv-pol-fig .polav { height: 100%; } .pv-pol-img { height: 100%; width: auto; max-width: 100%; } .pv-pol:hover .pv-pol-fig, .pv-pol:focus-visible .pv-pol-fig { transform: translateY(-4px) scale(1.02); } .pv-pol-etq { display: inline-flex; align-items: center; gap: 10px; background: var(--coral-dk); color: #fff; font-family: var(--head); font-weight: 800; font-size: 1rem; padding: 12px 22px 12px 14px; border-radius: 999px; box-shadow: 0 12px 28px rgba(196,69,61,.45); min-height: 48px; } .pv-pol-etq .ic { width: 26px; height: 26px; background: #fff; color: var(--coral-dk); border-radius: 50%; padding: 5px 4px 5px 7px; box-sizing: border-box; } .pv-pol:hover .pv-pol-etq, .pv-pol:focus-visible .pv-pol-etq { background: #AF3A33; } .pv-pol::before { content: ""; position: absolute; left: 50%; top: 4%; width: 78%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.7) 55%, rgba(255,255,255,0) 100%); } .pv-vbtn { position: relative; display: block; width: 100%; max-width: 520px; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 20px; overflow: hidden; background: var(--navy); color: #fff; cursor: pointer; box-shadow: 0 18px 44px rgba(30,41,59,.32); } .pv-vbtn img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-vbtn::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to top, rgba(15,23,42,.9), rgba(15,23,42,0)); pointer-events: none; } .pv-vbtn-play { position: absolute; left: 50%; top: 46%; z-index: 1; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--coral-dk); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(196,69,61,.55); } .pv-vbtn-play .ic { width: 36px; height: 36px; margin-left: 4px; } .pv-vbtn-tx { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; text-align: left; font-family: var(--head); font-weight: 800; font-size: 1rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); } @media (max-width: 860px) { .pv-hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: 28px; background-position: 70% top; background-image: url("../img/hero_polymat_m.webp"); } .pv-hero::before { background: linear-gradient(180deg, rgba(251,247,245,.97) 0%, rgba(251,247,245,.92) 55%, rgba(251,247,245,.8) 100%); } .pv-escena { width: min(100%, 460px); aspect-ratio: 16 / 11; margin-top: 4px; } } @media (max-width: 420px) { .pv-escena { aspect-ratio: 4 / 3.4; } .pv-pol-etq { font-size: .92rem; padding: 10px 16px 10px 10px; } } /* secuencia de entrada de la propia portada: corta, de CSS, sin ocultar nada a la espera de JavaScript */ @keyframes pv-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes pv-pop { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pv-pol-entra { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } } .pv-a1 { animation: pv-sube .5s .02s ease backwards; } .pv-a2 { animation: pv-sube .55s .1s ease backwards; } .pv-a3 { animation: pv-sube .55s .2s ease backwards; } .pv-a4 > li { animation: pv-pop .5s .32s cubic-bezier(.2,.8,.3,1.2) backwards; } .pv-a4 > li + li { animation-delay: .44s; } .pv-a5 { animation: pv-sube .5s .52s ease backwards; } .pv-hero-pol.pv-a3 { animation: pv-pol-entra .7s .12s cubic-bezier(.2,.8,.3,1.1) backwards; } /* los juegos sueltos */ .pv-juegos { padding: clamp(28px, 4vw, 48px) var(--gut) 18px; scroll-margin-top: 64px; outline: none; } .pv-juegos-cab h2 { margin: 0 0 16px; font-family: var(--head); font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--navy); line-height: 1.1; } .pv-filtros { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow); } .pv-fgrupo { display: grid; grid-template-columns: 9.5rem 1fr; gap: 6px 14px; align-items: center; } .pv-fgrupo .lb { font-family: var(--head); font-weight: 800; color: var(--navy); } .pv-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pv-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 2px solid #8A94A0; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; transition: border-color .15s, background .15s, color .15s; } .pv-chip .ic { width: 20px; height: 20px; color: var(--teal-tx); } .pv-chip .punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; } .pv-chip .n { background: var(--teal-lt); color: var(--teal-tx); border-radius: 999px; padding: 0 8px; font-size: .8rem; min-width: 1.6em; text-align: center; } .pv-chip:hover:not(:disabled) { border-color: var(--navy); } .pv-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; } .pv-chip.on .ic { color: #fff; } .pv-chip.on .n { background: rgba(255,255,255,.2); color: #fff; } .pv-chip:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; } .pv-fila-res { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 2px 10px; flex-wrap: wrap; } .pv-res { margin: 0; color: var(--muted); font-weight: 700; } .pv-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; color: var(--coral-dk); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; } .pv-reset .ic { width: 18px; height: 18px; } .pv-reset:disabled { color: var(--muted); text-decoration: none; opacity: .6; cursor: default; } .pv-vacio { background: #fff; border: 2px dashed var(--coral-line); border-radius: 18px; padding: 26px; text-align: center; display: grid; gap: 8px; justify-items: center; } .pv-vacio b { font-family: var(--head); font-size: 1.25rem; color: var(--navy); } .pv-vacio p { margin: 0; color: var(--muted); max-width: 52ch; } .pv-vacio .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; } @media (max-width: 700px) { .pv-fgrupo { grid-template-columns: 1fr; } .pv-chip { padding: 4px 12px; } } .pv-grupos { display: grid; gap: 30px; } .pv-grupo-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .pv-grupo-img { width: 64px; height: 41px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 3px var(--c); } .pv-grupo-tit { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pv-grupo-tit h3 { margin: 0; font-family: var(--head); font-weight: 900; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); color: var(--navy); display: inline-flex; align-items: center; gap: 10px; } .pv-grupo-tit .punto { width: 14px; height: 14px; border-radius: 50%; background: var(--c); display: inline-block; } .pv-grupo-tit .n { color: var(--muted); font-size: .88rem; font-weight: 700; } @media (max-width: 700px) { .pv-grupo-img { width: 48px; height: 31px; } } /* tarjetas: cerrada = imagen, nombre, tema y tipo; abierta (ratón, foco o toque) = resumen, datos y todas las acciones */ .pv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 960px) { .pv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pj-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 20px; box-shadow: var(--shadow); min-width: 0; transition: transform .25s ease, box-shadow .25s ease; } .pj-card:hover, .pj-card:focus-within { box-shadow: var(--sombra-2); transform: translateY(-4px); z-index: 3; } .pj-media { position: relative; display: block; aspect-ratio: 31 / 20; overflow: hidden; background: var(--coral-bg); border-radius: 16px 16px 0 0; } .pj-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .pj-card:hover .pj-media img { transform: scale(1.045); } /* miniatura animada (C.animar): se superpone a la imagen estática, sin cambiar el tamaño de nada, por debajo de las etiquetas */ .pj-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .pp-cover > span, .pp-cover > button, .pp-cover > a { z-index: 1; } .pj-body { display: grid; gap: 10px; align-content: start; padding: 12px 14px 14px; } .pj-body h4 { margin: 0; font-family: var(--head); font-weight: 800; font-size: 1.12rem; line-height: 1.2; color: var(--navy); } /* el nombre es el botón que abre la ficha; su ::after cubre toda la tarjeta, así que tocar en cualquier sitio la abre */ .pj-abre { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .pj-abre::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .pj-abre:focus-visible { outline: none; } .pj-abre:focus-visible::after { outline: 3px solid var(--navy); outline-offset: 3px; } .pj-tags { display: flex; flex-wrap: wrap; gap: 6px; } .pj-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--teal-lt); color: var(--navy); font-family: var(--head); font-weight: 700; font-size: .76rem; line-height: 1.4; } .pj-tag .punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; } .pj-tag .ic { width: 14px; height: 14px; color: var(--teal-tx); } .pj-tag.tema { background: #F3EFEC; } /* ficha de la tarjeta */ .pj-panel { background: #fff; padding: 14px 14px 12px; display: grid; gap: 10px; align-content: start; } .pj-pt { margin: 0; font-family: var(--head); font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: var(--navy); } .pj-res { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); } .pj-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: .82rem; } .pj-datos li { display: grid; gap: 1px; min-width: 0; } .pj-datos .k { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-tx); font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .pj-datos .k .ic { width: 14px; height: 14px; } .pj-datos .v { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; } .pj-acts { display: flex; flex-wrap: wrap; gap: 6px; } .pj-acts .btn { padding: 6px 12px; font-size: .82rem; min-height: 40px; } .pj-acts .btn.p { flex: 1 1 100%; font-size: .95rem; min-height: 44px; } .pj-acts .btn .ic { width: 16px; height: 16px; } .pj-cerrar { display: none; justify-self: end; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font-weight: 800; border-radius: 999px; } .pj-cerrar .ic { width: 18px; height: 18px; } /* con ratón y pantalla ancha: la ficha cubre la tarjeta al pasar o dar foco y CRECE hacia abajo lo que haga falta (flota sobre la fila siguiente, sin mover la rejilla): nunca se recorta ni hay que desplazarla por dentro, así que «Jugar online» y el resto de botones se ven siempre (revisión del 01/10/2026) */ @media (min-width: 700px) and (hover: hover) and (pointer: fine) { /* min-height: la caja interior (100 %) más los bordes de la tarjeta (4 px arriba + 1 px abajo): así la ficha cubre la tarjeta entera también cuando la tarjeta es más alta que su contenido (v5.4.0: la etiqueta «Misión secundaria» añade una línea en algunas filas) */ .pj-panel { position: absolute; inset: 0 0 auto 0; min-height: calc(100% + 5px); z-index: 2; border-radius: 16px 16px 20px 20px; box-shadow: var(--sombra-2); border: 1px solid var(--line); border-top: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; padding: 14px 16px 14px; gap: 8px; } .pj-card:hover .pj-panel, .pj-card:focus-within .pj-panel, .pj-card.abierta .pj-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .pj-card.abierta { z-index: 3; } /* lo primero que se ve es el título y las acciones («Jugar online» siempre arriba); el resumen (4 líneas con el ratón; entero si se abre a propósito) y los datos, después. Solo cambia el orden VISUAL: el del teclado y los lectores de pantalla sigue siendo el del DOM (título, resumen, datos, botones) */ .pj-pt { order: 0; } .pj-acts { order: 1; } .pj-res { order: 2; } .pj-datos { order: 3; } .pj-cerrar { order: 4; } .pj-card:not(.abierta) .pj-res { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .pj-res { font-size: .84rem; line-height: 1.38; } .pj-datos { gap: 4px 12px; font-size: .78rem; } .pj-acts { gap: 5px; } .pj-acts .btn { min-height: 36px; padding: 3px 10px; font-size: .76rem; } .pj-acts .btn.p { min-height: 42px; font-size: .92rem; } .pj-card.abierta .pj-cerrar { display: inline-flex; min-height: 36px; } /* abierta a propósito: cierre claro */ /* Esc descarta la ficha de hover/foco (WCAG 1.4.13) hasta que el puntero o el foco salgan de la tarjeta; si luego se abre a propósito (Enter, clic), manda lo segundo */ .pj-card.callada:not(.abierta):hover .pj-panel, .pj-card.callada:not(.abierta):focus-within .pj-panel { opacity: 0; visibility: hidden; } } /* con toque o pantalla estrecha: la tarjeta cerrada es compacta; tocarla la amplía a todo el ancho, con cierre claro */ @media not all and (min-width: 700px), (hover: none), (pointer: coarse) { .pj-pt { display: none; } .pj-panel { display: none; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; } .pj-card.abierta { grid-column: 1 / -1; transform: none; } .pj-card.abierta .pj-panel { display: grid; } .pj-card.abierta .pj-cerrar { display: inline-flex; } .pj-card.abierta .pj-abre::after { display: none; } /* ya abierta: los botones de la ficha reciben el toque */ .pj-card:hover { transform: none; } } @media (max-width: 600px) { .pv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pj-card { border-radius: 16px; } .pj-media { border-radius: 12px 12px 0 0; } .pj-body { padding: 8px 10px 10px; gap: 6px; } .pj-body h4 { font-size: .92rem; } .pj-tag { font-size: .7rem; padding: 2px 8px 2px 6px; } .pj-datos { grid-template-columns: 1fr 1fr; } } @media (max-width: 339px) { .pv-cards { grid-template-columns: 1fr; } .pj-card:not(.abierta) { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; } .pj-card:not(.abierta) .pj-media { aspect-ratio: auto; height: 100%; min-height: 76px; border-radius: 12px 0 0 12px; } .pj-card:not(.abierta) .pj-body { align-content: center; } .pj-datos { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .pv-a1, .pv-a2, .pv-a3, .pv-a4 > li, .pv-a5, .pv-hero-pol.pv-a3 { animation: none; } .pj-card, .pj-media img, .pj-panel, .pv-pol-fig { transition: none; } .pj-card:hover, .pj-card:focus-within { transform: none; } .pj-card:hover .pj-media img { transform: none; } } /* ---------- 3. diálogos: acceso y vídeo (siempre centrados) ---------- */ /* centrado «seguro»: con márgenes automáticos dentro de un contenedor flex el diálogo se centra y, si no cabe, empieza arriba y se puede desplazar (con place-items:center la parte de arriba quedaba cortada e inalcanzable en un móvil apaisado) */ .pu-fondo, .ppv-fondo { position: fixed; inset: 0; z-index: 140; display: flex; padding: 16px; overflow: auto; background: rgba(15,23,42,.66); animation: pv-sube .2s ease backwards; } .pu-fondo > .pu-dlg, .ppv-fondo > .ppv-caja { margin: auto; } .pu-dlg { position: relative; width: min(470px, 100%); background: #fff; color: var(--ink); border-radius: 22px; padding: 28px 26px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.4); display: grid; gap: 10px; } .pu-kicker { margin: 0; font-family: var(--head); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--coral-dk); } .pu-dlg h2 { margin: 0; font-family: var(--head); font-weight: 900; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); line-height: 1.12; color: var(--navy); padding-right: 40px; } .pu-dlg .pu-expl { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; } .pu-x, .ppv-x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg); color: var(--navy); font-size: 28px; line-height: 1; display: grid; place-items: center; } .pu-x:hover, .ppv-x:hover { background: var(--navy); color: #fff; } .pu-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg); padding: 5px; border-radius: 999px; margin-top: 4px; } .pu-tab { border: 0; background: transparent; color: var(--navy); font-weight: 800; border-radius: 999px; min-height: 44px; padding: 0 10px; } .pu-tab.on { background: var(--navy); color: #fff; } .pu-form-dlg { display: grid; gap: 10px; margin-top: 4px; } .pu-campos { display: grid; grid-template-columns: 1fr 96px; gap: 10px; } .pu-campos label { display: block; font-weight: 800; font-size: .84rem; color: var(--navy); margin-bottom: 4px; } .pu-campos input { width: 100%; min-height: 48px; border: 2px solid #767676; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); } .pu-campos input.ini { text-align: center; text-transform: uppercase; } .pu-campos input:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-color: var(--navy); } .pu-dlg .pu-aviso { margin: 0; min-height: 1.3em; color: #B03A33; font-weight: 700; font-size: .9rem; } .pu-dlg .pu-b { min-height: 50px; font-size: 1.02rem; background: var(--coral-dk); width: 100%; border: 0; border-radius: 14px; color: #fff; font-weight: 800; } .pu-dlg .pu-b:hover { background: #AF3A33; } .pu-dlg .pu-b[disabled] { opacity: .6; cursor: progress; } .pu-recupera { margin: 0; color: var(--teal-tx); font-weight: 700; font-size: .86rem; line-height: 1.4; } .pu-dlg .pu-publico { margin: 2px 0 0; } .pu-dlg.espera { cursor: progress; } /* el ancho se limita también por la altura de la ventana (cabecera ~64 px + márgenes): en un móvil apaisado el vídeo entero cabe */ .ppv-caja { width: min(980px, 100%); width: min(100%, max(260px, min(980px, calc((100vh - 110px) * 16 / 9)))); width: min(100%, max(260px, min(980px, calc((100dvh - 110px) * 16 / 9)))); background: var(--navy); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); position: relative; } .ppv-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 18px; color: #fff; } .ppv-cab h2 { margin: 0; font-family: var(--head); font-weight: 800; font-size: 1rem; padding-right: 8px; } .ppv-cab .ppv-x { position: static; flex: none; background: rgba(255,255,255,.14); color: #fff; } .ppv-cab .ppv-x .ic { width: 22px; height: 22px; } .ppv-cab .ppv-x:hover { background: #fff; color: var(--navy); } .ppv-marco { position: relative; aspect-ratio: 16 / 9; background: #000; } .ppv-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ppv-aviso { margin: 0; padding: 10px 18px 14px; color: #fff; font-size: .88rem; line-height: 1.4; } .ppv-centinela { position: absolute; width: 1px; height: 1px; overflow: hidden; } .ppv-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; background: #fff; color: var(--navy); } .ppv-caja :focus-visible { outline-color: #fff; } /* dentro de un iframe tan alto como la página (polymat.eu): el fondo cubre el documento y la caja se centra en lo que se VE (comun.js: colocarDialogo) */ .pu-fondo.emb, .ppv-fondo.emb { position: absolute; inset: 0 0 auto 0; display: block; padding: 0 16px; overflow: visible; } .pu-fondo.emb .pu-dlg, .ppv-fondo.emb .ppv-caja { margin-left: auto; margin-right: auto; } /* la caja de un diálogo dentro del iframe se reposiciona (sin saltos) si se desplaza la página de arriba; con movimiento reducido, de golpe */ .pu-fondo.emb .pu-dlg, .ppv-fondo.emb .ppv-caja { transition: margin-top .2s ease; } .pu-fondo.emb .pu-dlg.sin-trans, .ppv-fondo.emb .ppv-caja.sin-trans { transition: none; } @media (prefers-reduced-motion: reduce) { .pu-fondo, .ppv-fondo { animation: none; } .pu-fondo.emb .pu-dlg, .ppv-fondo.emb .ppv-caja { transition: none; } } /* ---------- 4. POL de la esquina y página personal de la Aventura polimérica ---------- */ .pol-av.v4 { padding: 4px; } .pol-fig { display: block; width: 100%; height: 100%; } .pol-fig .polav { height: 100%; width: 100%; aspect-ratio: auto; } .pol-fig .polav-svg { overflow: hidden; } .pol-zona { transition: opacity .25s ease, transform .25s ease, visibility 0s; } html.hero-pol-visible .pol-zona:not(.abierta) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; } .pol-zona.emb { position: absolute; bottom: auto; } .pol-panel { max-height: min(74vh, 600px); } .pol-cuerpo p a, .pol-lk { color: var(--teal-tx); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .pol-cuerpo p a:hover { color: var(--navy); } .pol-cuerpo p.q { margin-top: 1em; } .pol-j .a a { display: inline-flex; align-items: center; min-height: 36px; } .pol-j .a .s { color: var(--teal-tx); } /* adornos del POL de la esquina: unos segundos, no para siempre (WCAG 2.2.2) */ .pol-av { animation: pol-flota 4s ease-in-out 1; } .pol-av.v4 .anillo { animation-iteration-count: 2; } @media (max-width: 420px) { .pol-av.v4 { width: 60px; height: 60px; } .pol-zona { right: 8px; bottom: 8px; } } @media (prefers-reduced-motion: reduce) { .pol-av, .pol-av.v4 .anillo, .pol-av.v4.saluda, .pp-pin.entra { animation: none; } } .av .pp-ficha-cab { background: var(--navy); border-radius: 22px; padding: clamp(18px, 3vw, 30px); position: relative; overflow: hidden; isolation: isolate; } .av .pp-ficha-cab::before { content: ""; position: absolute; inset: -30% -8% auto auto; width: 420px; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(216,84,76,.38), rgba(216,84,76,0) 70%); } .av .pp-ficha-cab h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); } .av .pp-ficha-cab .previos { color: var(--teal); font-weight: 700; } .av-edad { margin: 4px 0 2px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: rgba(255,255,255,.95); } .av-edad b { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 50%; border: 2.5px solid var(--coral-lt); color: #fff; font-family: var(--head); font-weight: 900; font-size: 1rem; } .pp-info { margin-top: 6px; } .pp-info summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 800; color: #C4EAE4; text-decoration: underline; text-underline-offset: 3px; } .pp-info summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .pp-info .expl { margin: 6px 0 0; color: #E2E8F0; } /* color sólido (no rgba): contraste medible sobre el azul marino */ .pp-salir { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0 auto; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 2px solid rgba(255,255,255,.6); background: transparent; color: #fff; font-weight: 800; } .pp-salir .ic { width: 20px; height: 20px; } .pp-salir:hover { background: #fff; color: var(--navy); } .pp-ficha-cab { display: flex; flex-direction: column; } .pp-ficha-cab .fila { width: 100%; } .av-puerta { background: #fff; border: 2px solid var(--coral-line); } /* (v5.4.0: el «recorrido» de tarjetas .pp-minis se sustituyó por el camino de la sección 7) */ /* marca de los juegos de la Aventura en «Todos los juegos» */ .pp-cover .av-marca { position: absolute; left: 10px; top: 36px; display: inline-flex; align-items: center; gap: 5px; background: var(--coral-dk); color: #fff; font-weight: 800; font-size: 11px; padding: 3px 9px 3px 6px; border-radius: 999px; } .pp-cover .av-marca .ic { width: 13px; height: 13px; } .pp-filters .pp-etapas .lb, .pp-etapas .lb { color: var(--navy); } .pp-etapas .etapa .n { color: var(--teal-tx); } /* rótulo de «Todos los juegos»: foco blanco sobre el fondo navy y altura reservada antes de que cargue la imagen (sin salto de diseño) */ .pp-rotulo.v4 :focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 640px) { .pp-rotulo.v4 > img { height: 160px; max-height: none; } } /* ---------- 5. accesibilidad (WCAG 2.2 AA): contraste y foco ---------- */ /* los grises verdosos y los hover claros de app.css no llegaban a 4,5:1 */ .pp-ficha-cab .pp-kicker { color: #F7B8B3; } .pp-home { color: var(--teal-tx); } .pp-home:hover { background: var(--teal-tx); color: #fff; } .pp-home.on, .pp-head.v4 .pp-home.on { color: #fff; background: var(--navy); } .btn.t { color: var(--teal-tx); } .btn.p:hover, .pp-sesion.dentro:hover { background: #AF3A33; border-color: #AF3A33; } .pp-puntos span, .pp-insignias .lb { color: #C4EAE4; } .pp-insignia { color: rgba(255,255,255,.72); } .pp-insignia small { color: rgba(255,255,255,.72); } .pp-insignia.on { color: var(--t, #fff); background: var(--cf, var(--c)); border-color: var(--cf, var(--c)); } .pp-insignia.on small { color: var(--t, #fff); opacity: 1; } .pp-premio .pp-kicker, .pp-premio .estado { color: #A93730; } .pp-etapas .etapa.on, .pp-etapas .etapa.on .n { color: #A93730; } /* foco visible también sobre fondos oscuros y en piezas con overflow */ .pp-ficha-cab :focus-visible { outline-color: #fff; } /* ---------- 6. sin JavaScript: contenido estático de cada página (