/* ==========================================================================
   JUEGOS · zonas de test y de juego — versión 2. Prefijos:
   .zz-z  test del zodiaco        .zz-c  horóscopo chino
   .zz-n  El Cuaderno del Entrenador (landing)   .zz-r  juegos de Pokémon (emulador)
   Solo tokens de V2; esquinas iguales; rejillas con minmax(0, 1fr).
   ========================================================================== */
.zz-z, .zz-c, .zz-n, .zz-r { color: var(--text-main); font-family: var(--font-primary); }
.zz-z *, .zz-c *, .zz-n *, .zz-r * { box-sizing: border-box; }
.zz-z h1, .zz-z h2, .zz-z h3, .zz-c h1, .zz-c h2, .zz-c h3, .zz-n h1, .zz-n h2, .zz-n h3, .zz-r h1, .zz-r h2, .zz-r h3 { font-family: var(--font-display); letter-spacing: -.01em; }
.zz-z .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Panel genérico */
.zz-z-cab, .zz-z-res, .zz-z-bloque, .zz-z-signo, .zz-z-cierre, .zz-c-cab, .zz-c-res, .zz-c-sec, .zz-c-cierre, .zz-c-animal, .zz-c-elem,
.zz-n-cab, .zz-n-sec, .zz-n-pasos li, .zz-r-cab, .zz-r-panel, .zz-r-sec { background: var(--v2-superficie); border: 1px solid var(--border-color); border-radius: 14px; }
[data-theme="dark"] .zz-z-cab, [data-theme="dark"] .zz-z-res, [data-theme="dark"] .zz-z-bloque, [data-theme="dark"] .zz-z-signo, [data-theme="dark"] .zz-z-cierre,
[data-theme="dark"] .zz-c-cab, [data-theme="dark"] .zz-c-res, [data-theme="dark"] .zz-c-sec, [data-theme="dark"] .zz-c-cierre, [data-theme="dark"] .zz-c-animal, [data-theme="dark"] .zz-c-elem,
[data-theme="dark"] .zz-n-cab, [data-theme="dark"] .zz-n-sec, [data-theme="dark"] .zz-n-pasos li, [data-theme="dark"] .zz-r-cab, [data-theme="dark"] .zz-r-panel, [data-theme="dark"] .zz-r-sec { background: #0f1b2d; border-color: #1e2e45; }

/* Botones comunes */
.zz-z-boton, .zz-z-acciones .zz-z-principal, .zz-c-btn, .zz-n-btn, .zz-r-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
    border: 0; border-radius: 10px; background: var(--v2-amarillo); color: #141005; font: 800 15px/1 var(--font-primary);
    text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s;
}
.zz-z-boton:hover, .zz-z-acciones .zz-z-principal:hover, .zz-c-btn:hover, .zz-n-btn:hover, .zz-r-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.zz-z-boton:focus-visible, .zz-c-btn:focus-visible, .zz-n-btn:focus-visible, .zz-r-btn:focus-visible, .zz-z-acciones a:focus-visible, .zz-z-acciones button:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 2px; }
.zz-n-btn-2, .zz-r-btn-2 { background: var(--v2-tarjeta); color: var(--text-main); border: 1px solid var(--border-color); }
[data-theme="dark"] .zz-n-btn-2, [data-theme="dark"] .zz-r-btn-2 { background: #14243a; border-color: #1e2e45; }

/* ============================ ZODIACO ============================ */
.zz-z { --signo: #8aa0c8; display: grid; gap: 22px; }
.zz-z-cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: clamp(18px, 3vw, 32px); align-items: start; }
.zz-z-kicker { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-z-test h1 { margin: 6px 0 12px; font: 800 clamp(28px, 3.4vw, 44px)/1.08 var(--font-display); }
.zz-z-test h1 em { font-style: normal; color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-z-lead { margin: 0 0 18px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--v2-texto-2); }
.zz-z-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: end; }
.zz-z-campo { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--v2-texto-2); }
.zz-z-campo select, .zz-c-campo select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--v2-tarjeta); color: var(--text-main); font: 600 15px var(--font-primary); }
[data-theme="dark"] .zz-z-campo select, [data-theme="dark"] .zz-c-campo select { background: #14243a; border-color: #1e2e45; }
.zz-z-error, .zz-c-error { margin: 10px 0 0; color: #b42318; font-weight: 700; font-size: 14px; }
[data-theme="dark"] .zz-z-error, [data-theme="dark"] .zz-c-error { color: #ff9a8f; }
.zz-z-temporada { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 8px 14px 8px 8px; width: fit-content; max-width: 100%; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); border-left: 4px solid var(--signo); font-size: 14px; color: var(--v2-texto-2); }
[data-theme="dark"] .zz-z-temporada { background: #14243a; border-color: #1e2e45; border-left-color: var(--signo); }
.zz-z-temporada img { width: 56px; height: 56px; object-fit: contain; }
.zz-z-rueda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: start; }
.zz-z-rueda-tit { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-texto-3); }
.zz-z-rueda a { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); border-top: 3px solid var(--signo); text-decoration: none; color: var(--text-main); transition: background .15s, transform .15s; }
[data-theme="dark"] .zz-z-rueda a { background: #14243a; border-color: #1e2e45; border-top-color: var(--signo); }
.zz-z-rueda a:hover { background: var(--v2-tarjeta-hover); transform: translateY(-2px); }
.zz-z-rueda a.es-hoy { outline: 2px solid var(--v2-amarillo); outline-offset: 1px; }
.zz-z-rueda a:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 2px; }
.zz-z-rueda small { font-size: 12.5px; font-weight: 700; }
.zz-z-glifo { font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", var(--font-primary); font-size: 1.5em; line-height: 1; }
.zz-z-rueda .zz-z-glifo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0f1b2d; color: var(--signo); font-size: 22px; }

/* Constelaciones */
.zz-z-const { width: 100%; height: 100%; }
.zz-z-const polyline { fill: none; stroke: var(--signo); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.zz-z-const circle { fill: var(--signo); }
.zz-z-elem { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vertical-align: -5px; }

/* Resultado (lo pinta el JS) */
.zz-z-res { padding: clamp(16px, 3vw, 28px); border-top: 4px solid var(--signo); scroll-margin-top: calc(var(--zz-z-cabecera, 90px) + 12px); }
.zz-z-res[hidden] { display: none; }
.zz-z-res-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.zz-z-res-glifo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #0f1b2d; color: var(--signo); font-size: 36px; }
.zz-z-res-cab p { margin: 0 0 4px; color: var(--v2-texto-2); font-weight: 600; }
.zz-z-res-cab h2 { margin: 0; font: 800 clamp(24px, 3vw, 36px)/1.1 var(--font-display); }
.zz-z-res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zz-z-carta { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 12px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-align: center; }
[data-theme="dark"] .zz-z-carta { background: #14243a; border-color: #1e2e45; }
.zz-z-carta small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-texto-3); }
.zz-z-carta strong { font: 800 18px/1.2 var(--font-display); }
.zz-z-carta--grande { grid-column: 1 / -1; padding: 22px 12px; border-top: 4px solid var(--signo); }
.zz-z-carta--grande strong { font-size: clamp(24px, 3vw, 32px); }
.zz-z-carta-imgs { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; }
.zz-z-carta-imgs img { max-width: 100%; height: auto; object-fit: contain; }
.zz-z-carta-imgs .zz-z-const { position: absolute; inset: 0; opacity: .35; pointer-events: none; }
.zz-z-carta--grande .zz-z-carta-imgs { min-height: 220px; }
.zz-z-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.zz-z-acciones a, .zz-z-acciones button { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--v2-tarjeta); color: var(--text-main); font: 700 14px var(--font-primary); text-decoration: none; cursor: pointer; }
[data-theme="dark"] .zz-z-acciones a, [data-theme="dark"] .zz-z-acciones button { background: #14243a; border-color: #1e2e45; }
.zz-z-acciones .zz-z-principal { background: var(--v2-amarillo); color: #141005; border: 0; }
.zz-z-tipo-ficha { display: grid; place-items: center; min-width: 96px; min-height: 56px; padding: 10px 18px; border-radius: 12px; background: var(--tipo, #888); color: var(--tipo-ink, #fff); font: 800 17px var(--font-display); }
.zz-z-carta .zz-z-tipo-ficha { min-height: 72px; }

/* Bloques de texto */
.zz-z-bloque { padding: clamp(18px, 3vw, 30px); }
.zz-z-bloque h2 { margin: 0 0 12px; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); }
.zz-z-intro { margin: 0 0 18px; max-width: 80ch; line-height: 1.65; color: var(--v2-texto-2); }
.zz-z-criterio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: crit; }
.zz-z-criterio li { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); line-height: 1.55; font-size: 14.5px; color: var(--v2-texto-2); }
[data-theme="dark"] .zz-z-criterio li { background: #14243a; border-color: #1e2e45; }
.zz-z-criterio b { font: 800 17px var(--font-display); color: var(--text-main); }
.zz-z-crit-ico { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; min-width: 56px; height: 56px; padding: 0 10px; border-radius: 12px; background: #0f1b2d; color: #e9d8a6; --signo: #e9d8a6; }
.zz-z-crit-ico .zz-z-elem { width: 18px; height: 18px; }
.zz-z-crit-ico .zz-z-const { width: 40px; height: 40px; }
.zz-z-pokedex { width: 32px; height: 32px; fill: none; stroke: #e9d8a6; stroke-width: 1.8; }
.zz-z-mapa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.zz-z-mapa a { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 14px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); border-bottom: 3px solid var(--signo); text-decoration: none; color: var(--text-main); text-align: center; transition: transform .15s, background .15s; }
[data-theme="dark"] .zz-z-mapa a { background: #14243a; border-color: #1e2e45; border-bottom-color: var(--signo); }
.zz-z-mapa a:hover { transform: translateY(-3px); background: var(--v2-tarjeta-hover); }
.zz-z-mapa a:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 2px; }
.zz-z-mapa-art { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #0f1b2d; }
.zz-z-mapa-art .zz-z-const { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); opacity: .55; }
.zz-z-mapa-art img { position: relative; width: 64px; height: 64px; object-fit: contain; }
.zz-z-mapa strong { font-size: 14px; }
.zz-z-mapa strong .zz-z-glifo { font-size: 1.15em; margin-right: 2px; }
.zz-z-mapa span:last-child { font-size: 12.5px; color: var(--v2-texto-2); }

/* Ficha de cada signo: lateral con la constelación y texto + 4 tarjetas */
.zz-z-signo { display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; scroll-margin-top: 90px; border-left: 4px solid var(--signo); }
.zz-z-signo-cab { display: grid; align-content: start; gap: 12px; padding: 22px; background: var(--v2-tarjeta); border-right: 1px solid var(--border-color); }
[data-theme="dark"] .zz-z-signo-cab { background: #0b1524; border-right-color: #1e2e45; }
.zz-z-chapa { width: 100%; max-width: 200px; aspect-ratio: 1; border-radius: 14px; background: #0f1b2d; padding: 12px; }
.zz-z-signo-cab h2 { margin: 0; font: 800 clamp(20px, 2vw, 24px)/1.2 var(--font-display); }
.zz-z-signo-cab h2 .zz-z-glifo { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 8px; border-radius: 50%; background: #0f1b2d; color: var(--signo); font-size: 20px; vertical-align: middle; }
.zz-z-meta { display: grid; gap: 4px; margin: 0; font-size: 13.5px; color: var(--v2-texto-2); }
.zz-z-rasgos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zz-z-rasgos li { padding: 4px 10px; border-radius: 999px; background: var(--v2-superficie); border: 1px solid var(--border-color); font-size: 12.5px; font-weight: 700; }
[data-theme="dark"] .zz-z-rasgos li { background: #14243a; border-color: #1e2e45; }
.zz-z-signo-cuerpo { padding: 22px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.zz-z-signo-intro { margin: 0; line-height: 1.7; color: var(--v2-texto-2); max-width: 75ch; }
.zz-z-cuatro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zz-z-uno { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); }
[data-theme="dark"] .zz-z-uno { background: #14243a; border-color: #1e2e45; }
.zz-z-uno-img { grid-row: 1 / span 2; display: flex; gap: 2px; align-items: center; }
.zz-z-uno-img img { width: 100%; max-width: 96px; height: auto; object-fit: contain; }
.zz-z-uno-img img + img { max-width: 48px; }
.zz-z-uno > .zz-z-tipo-ficha { grid-row: 1 / span 2; width: 96px; min-width: 0; padding: 8px; font-size: 14px; }
.zz-z-uno h3 { margin: 0 0 4px; font: 800 17px/1.2 var(--font-display); }
.zz-z-uno h3 small { display: block; font: 800 11px var(--font-primary); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-texto-3); margin-bottom: 2px; }
.zz-z-uno p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--v2-texto-2); }

.zz-z-faq-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.zz-z-faq details, .zz-c-faq details, .zz-n-faq details { border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); padding: 0 16px; }
[data-theme="dark"] .zz-z-faq details, [data-theme="dark"] .zz-c-faq details, [data-theme="dark"] .zz-n-faq details { background: #14243a; border-color: #1e2e45; }
.zz-z-faq summary, .zz-c-faq summary, .zz-n-faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; line-height: 1.4; }
.zz-z-faq details p, .zz-c-faq details p, .zz-n-faq details p { margin: 0 0 14px; line-height: 1.65; color: var(--v2-texto-2); }
.zz-z-cierres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zz-z-cierre { display: grid; gap: 14px; align-content: space-between; padding: 22px; }
.zz-z-cierre p { margin: 0; line-height: 1.6; color: var(--v2-texto-2); }
.zz-z-cierre p b { display: block; margin-bottom: 4px; font: 800 18px var(--font-display); color: var(--text-main); }
.zz-z-cierre a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: var(--v2-amarillo); color: #141005; font-weight: 800; text-decoration: none; }

/* ============================ HORÓSCOPO CHINO ============================ */
.zz-c { --vermellon: #b53a2d; display: grid; gap: 22px; }
@font-face { font-family: 'HC Pincel'; src: url('../../fonts/mashanzheng-hc.woff2') format('woff2'); font-display: swap; }
.zz-c-cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: clamp(18px, 3vw, 32px); align-items: start; }
.zz-c-h1 { margin: 14px 0 12px; font: 800 clamp(26px, 3.1vw, 40px)/1.1 var(--font-display); }
.zz-c-h1 em { font-style: normal; color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-c-intro { margin: 0 0 16px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--v2-texto-2); }
.zz-c-sello { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: var(--vermellon); color: #fff; font: 400 38px/1 'HC Pincel', serif; box-shadow: inset 0 0 0 3px var(--vermellon), inset 0 0 0 4.5px rgba(255,255,255,.5); }
.zz-c-sello.is-grande { width: 96px; height: 96px; font-size: 64px; }
.zz-c-sello.is-mini { width: 38px; height: 38px; font-size: 24px; border-radius: 6px; flex: none; }
.zz-c-ahora { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); font-size: 14.5px; line-height: 1.5; color: var(--v2-texto-2); }
[data-theme="dark"] .zz-c-ahora { background: #14243a; border-color: #1e2e45; }
.zz-c-ahora b { color: var(--text-main); }
.zz-c-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.zz-c-campo { display: grid; gap: 6px; }
.zz-c-campo label { font-size: 13px; font-weight: 700; color: var(--v2-texto-2); }
.zz-c-form .zz-c-btn { grid-column: 1 / -1; }
.zz-c-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.zz-c-rejilla a { position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-main); font-weight: 700; font-size: 14px; transition: transform .15s, background .15s; }
[data-theme="dark"] .zz-c-rejilla a { background: #14243a; border-color: #1e2e45; }
.zz-c-rejilla a:hover { transform: translateY(-2px); background: var(--v2-tarjeta-hover); }
.zz-c-rejilla a:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 2px; }
.zz-c-rejilla a.is-hoy { outline: 2px solid var(--v2-amarillo); outline-offset: 1px; }
.zz-c-hoy-etiqueta { position: absolute; top: -9px; padding: 2px 8px; border-radius: 999px; background: var(--v2-amarillo); color: #141005; font-size: 11px; font-weight: 800; }

.zz-c-res { padding: clamp(16px, 3vw, 28px); border-top: 4px solid var(--vermellon); scroll-margin-top: calc(var(--zz-c-cabecera, 90px) + 12px); }
.zz-c-res[hidden] { display: none; }
.zz-c-res-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.zz-c-res-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-texto-3); }
.zz-c-res-kicker-2 { margin-top: 22px; }
.zz-c-res-titulo { margin: 0 0 6px; font: 800 clamp(22px, 2.6vw, 32px)/1.15 var(--font-display); }
.zz-c-res-nota { margin: 0; line-height: 1.55; color: var(--v2-texto-2); }
.zz-c-res-sol img { width: 170px; max-width: 100%; height: auto; }
.zz-c-res-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.zz-c-ficha { padding: 12px 14px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); }
[data-theme="dark"] .zz-c-ficha { background: #14243a; border-color: #1e2e45; }
.zz-c-ficha dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-texto-3); }
.zz-c-ficha dd { margin: 4px 0 0; font-weight: 700; }
.zz-c-afines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zz-c-afin { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-main); font-weight: 600; font-size: 14px; }
[data-theme="dark"] .zz-c-afin { background: #14243a; border-color: #1e2e45; }
.zz-c-afin img { width: 44px; height: 44px; object-fit: contain; }
.zz-c-compartir { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.zz-c-compartir a, .zz-c-compartir button { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--v2-tarjeta); color: var(--text-main); font: 700 14px var(--font-primary); text-decoration: none; cursor: pointer; }
[data-theme="dark"] .zz-c-compartir a, [data-theme="dark"] .zz-c-compartir button { background: #14243a; border-color: #1e2e45; }
.zz-c-tipo { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--t, #888); color: var(--tt, #fff); font-size: 12.5px; font-weight: 800; vertical-align: 1px; }

.zz-c-sec { padding: clamp(18px, 3vw, 30px); }
.zz-c-sec h2 { margin: 0 0 12px; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); }
.zz-c-lead { margin: 0 0 18px; max-width: 80ch; line-height: 1.65; color: var(--v2-texto-2); }
.zz-c-como { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.zz-c-como p { margin: 0; line-height: 1.7; color: var(--v2-texto-2); }
.zz-c-como p + p { padding: 14px 16px; border-left: 4px solid var(--vermellon); border-radius: 0 12px 12px 0; background: var(--v2-tarjeta); }
[data-theme="dark"] .zz-c-como p + p { background: #14243a; }
.zz-c-tabla-det { margin-top: 16px; border: 1px solid var(--border-color); border-radius: 12px; padding: 0 14px; }
[data-theme="dark"] .zz-c-tabla-det { border-color: #1e2e45; }
.zz-c-tabla-det summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.zz-c-tabla-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; font-size: 13px; color: var(--v2-texto-2); }
.zz-c-tabla-leyenda i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; background: var(--v2-tarjeta-hover); border: 1px solid var(--border-color); vertical-align: -1px; }
.zz-c-tabla-leyenda i.es-feb { background: var(--v2-amarillo); }
.zz-c-desliza { display: none; }
.zz-c-tabla-caja { overflow-x: auto; margin-bottom: 14px; }
.zz-c-tabla { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 12.5px; text-align: center; }
.zz-c-tabla th, .zz-c-tabla td { padding: 6px 4px; border: 1px solid var(--border-color); }
[data-theme="dark"] .zz-c-tabla th, [data-theme="dark"] .zz-c-tabla td { border-color: #1e2e45; }
.zz-c-tabla td b { display: block; }
.zz-c-tabla td small { color: var(--v2-texto-3); }
.zz-c-tabla td.es-feb { background: color-mix(in srgb, var(--v2-amarillo) 28%, transparent); }
.zz-c-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zz-c-elementos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.zz-c-elem { display: grid; gap: 8px; align-content: start; padding: 16px; border-top: 4px solid var(--e); background: var(--v2-tarjeta); }
[data-theme="dark"] .zz-c-elem { background: #14243a; }
.zz-c-elem-hz { font: 400 44px/1 'HC Pincel', serif; color: var(--text-main); }
.zz-c-elem h3 { margin: 0; font-size: 19px; }
.zz-c-elem p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--v2-texto-2); }
.zz-c-elem small { color: var(--v2-texto-3); font-weight: 700; }
.zz-c-elem .zz-c-tipo { margin-left: 0; width: fit-content; }
.zz-c-animales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zz-c-animal { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 18px; background: var(--v2-tarjeta); scroll-margin-top: 90px; }
[data-theme="dark"] .zz-c-animal { background: #14243a; }
.zz-c-animal-lado { display: grid; gap: 10px; justify-items: center; align-content: start; }
.zz-c-animal-lado img { width: 100%; max-width: 130px; height: auto; }
.zz-c-animal h3 { margin: 0; font-size: 20px; }
.zz-c-animal-pinyin { margin: 2px 0 8px; font-size: 13px; color: var(--v2-texto-3); }
.zz-c-animal-txt p { margin: 0 0 10px; line-height: 1.6; font-size: 14.5px; color: var(--v2-texto-2); }
.zz-c-rasgos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.zz-c-rasgos span { padding: 3px 10px; border-radius: 999px; background: var(--v2-superficie); border: 1px solid var(--border-color); font-size: 12.5px; font-weight: 700; }
[data-theme="dark"] .zz-c-rasgos span { background: #0f1b2d; border-color: #1e2e45; }
.zz-c-animal-poke { margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: var(--v2-superficie); border-left: 4px solid var(--vermellon); }
[data-theme="dark"] .zz-c-animal-poke { background: #0f1b2d; }
.zz-c-animal-poke p { margin: 6px 0 0; }
.zz-c-anios a, .zz-c-como a, .zz-r-aviso a, .zz-r-vacio a { color: var(--nx-canal-txt, var(--v2-activo)); font-weight: 700; }
.zz-c-faq-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.zz-c-cierre { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; }
.zz-c-cierre p { margin: 0; line-height: 1.6; color: var(--v2-texto-2); }
.zz-c-cierre .zz-c-btn { flex: none; }

/* ============================ CUADERNO (landing) ============================ */
.zz-n { display: grid; gap: 22px; }
.zz-n-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: clamp(18px, 3vw, 32px); align-items: center; }
.zz-n-txt h1 { margin: 14px 0 12px; font: 800 clamp(28px, 3.2vw, 42px)/1.1 var(--font-display); }
.zz-n-sub { margin: 0 0 18px; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--v2-texto-2); }
.zz-n-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.zz-n-vida { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; font-weight: 700; color: var(--v2-texto-2); }
.zz-n-punto { width: 10px; height: 10px; border-radius: 50%; background: #1f8a3d; }
.zz-n-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; max-width: 420px; }
.zz-n-datos li { padding: 10px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-align: center; }
[data-theme="dark"] .zz-n-datos li { background: #14243a; border-color: #1e2e45; }
.zz-n-datos b { display: block; font: 800 22px var(--font-display); }
.zz-n-datos span { font-size: 12.5px; color: var(--v2-texto-2); }
.zz-n-banner { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: #fff; }
.zz-n-banner img { display: block; width: 100%; height: auto; }
.zz-n-sec { padding: clamp(18px, 3vw, 30px); }
.zz-n-sec h2 { margin: 0 0 16px; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); }
.zz-n-pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zz-n-pasos li { position: relative; padding: 18px; background: var(--v2-tarjeta); }
[data-theme="dark"] .zz-n-pasos li { background: #14243a; }
.zz-n-num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 50%; background: var(--v2-amarillo); color: #141005; font: 800 18px var(--font-display); }
.zz-n-pasos h3 { margin: 0 0 6px; font-size: 18px; }
.zz-n-pasos p { margin: 0; line-height: 1.6; font-size: 14.5px; color: var(--v2-texto-2); }
.zz-n-prosa { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.zz-n-prosa p { margin: 0; line-height: 1.7; color: var(--v2-texto-2); font-size: 15px; }
.zz-n-prosa a { color: var(--nx-canal-txt, var(--v2-activo)); font-weight: 700; }
.zz-n-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.zz-n-faq, .zz-n-versiones { display: grid; gap: 10px; }
.zz-n-version { padding: 14px 16px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); }
[data-theme="dark"] .zz-n-version { background: #14243a; border-color: #1e2e45; }
.zz-n-version h3 { margin: 0 0 8px; font-size: 17px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zz-n-fecha { font: 600 13px var(--font-primary); color: var(--v2-texto-3); }
.zz-n-version ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.zz-n-version li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--v2-texto-2); }
.zz-n-version li i { margin-top: 3px; color: var(--nx-canal-txt, var(--v2-activo)); }

/* ============================ JUEGOS DE POKÉMON (emulador) ============================ */
.zz-r { display: grid; gap: 22px; }
.zz-r-cab { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; padding: clamp(18px, 3vw, 32px); align-items: center; }
.zz-r-txt h1 { margin: 14px 0 12px; font: 800 clamp(28px, 3.3vw, 44px)/1.08 var(--font-display); }
.zz-r-hl { color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-r-lead { margin: 0 0 18px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--v2-texto-2); }
.zz-r-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.zz-r-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.zz-r-cifras li { padding: 16px 10px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-align: center; }
[data-theme="dark"] .zz-r-cifras li { background: #14243a; border-color: #1e2e45; }
.zz-r-cifras b { display: block; font: 800 28px var(--font-display); }
.zz-r-cifras span { font-size: 13px; color: var(--v2-texto-2); }
.zz-r-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); border-left: 4px solid var(--v2-azul); font-size: 14.5px; line-height: 1.5; color: var(--v2-texto-2); }
[data-theme="dark"] .zz-r-aviso { background: #14243a; border-color: #1e2e45; border-left-color: var(--v2-azul); }
.zz-r-aviso i { margin-top: 3px; }
.zz-r-sec { padding: clamp(18px, 3vw, 30px); }
.zz-r-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 800 clamp(21px, 2.3vw, 28px)/1.15 var(--font-display); scroll-margin-top: 90px; }
.zz-r-sec h2 i { color: var(--nx-canal-txt, var(--v2-activo)); font-size: .8em; }
.zz-r-saves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zz-r-save { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-main); }
[data-theme="dark"] .zz-r-save { background: #14243a; border-color: #1e2e45; }
.zz-r-save:hover { background: var(--v2-tarjeta-hover); }
.zz-r-save-img { display: grid; place-items: center; width: 84px; height: 64px; border-radius: 8px; overflow: hidden; background: #0f1b2d; color: #cfd8e8; }
.zz-r-save-img img { width: 100%; height: 100%; object-fit: cover; }
.zz-r-save-txt { display: grid; gap: 3px; min-width: 0; }
.zz-r-save-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zz-r-save-txt small { color: var(--v2-texto-3); font-size: 12.5px; }
.zz-r-save-txt em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-r-biblio { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.zz-r-filtros { position: sticky; top: 90px; display: grid; gap: 6px; }
.zz-r-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--v2-tarjeta); color: var(--text-main); font: 700 14px var(--font-primary); text-align: left; cursor: pointer; }
[data-theme="dark"] .zz-r-chip { background: #14243a; border-color: #1e2e45; }
.zz-r-chip .n { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--v2-superficie); font-size: 12px; text-align: center; }
[data-theme="dark"] .zz-r-chip .n { background: #0b1524; }
.zz-r-chip:hover { background: var(--v2-tarjeta-hover); }
.zz-r-chip.activo { background: var(--v2-amarillo); border-color: var(--v2-amarillo); color: #141005; }
.zz-r-chip.activo .n { background: rgba(20, 16, 5, .14); }
.zz-r-chip:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 2px; }
.zz-r-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zz-r-card { display: grid; grid-template-rows: auto 1fr; border-radius: 12px; overflow: hidden; background: var(--v2-tarjeta); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-main); transition: transform .15s, border-color .15s; }
[data-theme="dark"] .zz-r-card { background: #14243a; border-color: #1e2e45; }
.zz-r-card[hidden] { display: none; }
.zz-r-card:hover { transform: translateY(-3px); border-color: var(--v2-amarillo); }
.zz-r-card:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 2px; }
.zz-r-card-art { display: grid; place-items: center; aspect-ratio: 1 / 1; background: #0f1b2d; color: #cfd8e8; font-size: 40px; }
.zz-r-card-art img { width: 100%; height: 100%; object-fit: contain; }
.zz-r-card-body { display: grid; gap: 6px; align-content: start; padding: 12px; }
.zz-r-card-sys { width: fit-content; padding: 2px 8px; border-radius: 999px; background: var(--v2-superficie); border: 1px solid var(--border-color); font-size: 11.5px; font-weight: 800; color: var(--v2-texto-2); }
[data-theme="dark"] .zz-r-card-sys { background: #0f1b2d; border-color: #1e2e45; }
.zz-r-card h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.zz-r-card small { color: var(--v2-texto-3); font-size: 12.5px; }
.zz-r-jugar { font-weight: 800; font-size: 13px; color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-r-vacio { text-align: center; padding: 30px 10px; color: var(--v2-texto-2); }
.zz-r-vacio i { font-size: 34px; margin-bottom: 8px; }
.zz-r-paneles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zz-r-panel { display: grid; gap: 12px; align-content: space-between; justify-items: start; padding: 22px; }
.zz-r-panel h3 { margin: 0; font-size: 19px; display: flex; gap: 10px; align-items: center; }
.zz-r-panel h3 i { color: var(--nx-canal-txt, var(--v2-activo)); }
.zz-r-panel p { margin: 0; line-height: 1.6; color: var(--v2-texto-2); }
.zz-r-about-txt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.zz-r-about-txt p { margin: 0; line-height: 1.7; color: var(--v2-texto-2); font-size: 15px; }
.zz-r-3d { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; border-radius: 14px; text-decoration: none; background: linear-gradient(120deg, #4c1d95, #2e1065); color: #fff; }
.zz-r-3d:hover { filter: brightness(1.08); }
.zz-r-3d:focus-visible { outline: 3px solid var(--v2-amarillo); outline-offset: 3px; }
.zz-r-3d-badge { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.zz-r-3d h2 { margin: 0 0 4px; font: 800 clamp(19px, 2.4vw, 26px)/1.2 var(--font-display); color: #fff; }
.zz-r-3d h2 em { font-style: normal; color: #ffd84a; }
.zz-r-3d p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.92); line-height: 1.55; font-size: 14.5px; }
.zz-r-3d-cta { flex: none; padding: 12px 18px; border-radius: 10px; background: #fff; color: #2e1065; font-weight: 800; white-space: nowrap; }

/* ============================ Adaptación ============================ */
@media (max-width: 1100px) {
    .zz-z-signo { grid-template-columns: 240px minmax(0, 1fr); }
    .zz-z-mapa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zz-c-elementos { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .zz-c-elem { grid-template-columns: 70px minmax(0, 1fr); column-gap: 14px; }
    .zz-c-elem > * { grid-column: 2; }
    .zz-c-elem .zz-c-elem-hz { grid-column: 1; grid-row: 1 / span 4; }
    .zz-n-prosa, .zz-r-about-txt { grid-template-columns: minmax(0, 1fr); }
    .zz-r-saves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .zz-z-cab, .zz-c-cab, .zz-n-cab, .zz-r-cab, .zz-n-dos, .zz-c-animales, .zz-z-cierres, .zz-r-paneles, .zz-c-como, .zz-z-faq-lista, .zz-c-faq-lista { grid-template-columns: minmax(0, 1fr); }
    .zz-z-criterio { grid-template-columns: minmax(0, 1fr); }
    .zz-z-signo { grid-template-columns: minmax(0, 1fr); }
    .zz-z-signo-cab { border-right: 0; border-bottom: 1px solid var(--border-color); }
    .zz-z-chapa { max-width: 140px; }
    .zz-n-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zz-r-biblio { grid-template-columns: minmax(0, 1fr); }
    .zz-r-filtros { position: static; display: flex; overflow-x: auto; padding-bottom: 4px; }
    .zz-r-chip { width: auto; flex: none; }
    .zz-r-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zz-c-cierre { flex-direction: column; align-items: flex-start; }
    .zz-c-desliza { display: inline; }
}
@media (max-width: 640px) {
    .zz-z-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .zz-z-boton { grid-column: 1 / -1; }
    .zz-z-rueda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zz-z-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zz-z-res-grid { grid-template-columns: minmax(0, 1fr); }
    .zz-z-res-cab { align-items: flex-start; }
    .zz-z-cuatro { grid-template-columns: minmax(0, 1fr); }
    .zz-c-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zz-c-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .zz-c-form .zz-c-campo:nth-child(3) { grid-column: 1 / -1; }
    .zz-c-res-top { grid-template-columns: auto minmax(0, 1fr); }
    .zz-c-res-sol { grid-column: 1 / -1; text-align: center; }
    .zz-c-res-fichas, .zz-c-afines { grid-template-columns: minmax(0, 1fr); }
    .zz-c-animal { grid-template-columns: minmax(0, 1fr); }
    .zz-c-animal-lado { grid-template-columns: auto 100px; justify-content: start; align-items: center; }
    .zz-n-pasos { grid-template-columns: minmax(0, 1fr); }
    .zz-r-saves { grid-template-columns: minmax(0, 1fr); }
    .zz-r-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zz-r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .zz-r-3d { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .zz-z *, .zz-c *, .zz-n *, .zz-r * { transition: none !important; }
}