/*
 * Zasca Diseño — "tebeo sobre la mesa".
 * El contorno azul tinta y la sombra dura de las ilustraciones pasan a la interfaz.
 * Las letras globo (Titan One) son el único gesto fuerte; el resto, tranquilo.
 * Clases propias con prefijo zs- para no chocar con el CSS antiguo (SO CSS usa .boton).
 */

@font-face {
	font-family: "Titan One";
	src: url("../fuentes/titanone.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Baloo 2";
	src: url("../fuentes/baloo2.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--zs-tinta: #0D3059;
	--zs-tinta-suave: #41597A;
	--zs-papel: #FFFFFF;
	--zs-cielo: #E3F1FB;
	--zs-rayo: #F6D23E;
	--zs-naranja: #ED753C;
	--zs-rojo: #E5342B;
	--zs-verde: #3FAE49;
	--zs-azul: #2B8BD8;
	--zs-morado: #8B4DB8;
	--zs-display: "Titan One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
	--zs-texto: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
	--zs-borde: 3px solid var(--zs-tinta);
	--zs-sombra: 6px 6px 0 var(--zs-tinta);

	/* Variables del tema GeneratePress */
	--contrast: var(--zs-tinta);
	--contrast-2: var(--zs-tinta);
	--contrast-3: var(--zs-tinta-suave);
	--base: var(--zs-cielo);
	--base-2: var(--zs-papel);
	--accent: var(--zs-naranja);
}

/* ---------- Base ---------- */
/* "html body" para ganar al CSS antiguo de SO CSS, que se carga después (Arial y margen de 20px) */
html body {
	margin: 0; /* SO CSS antiguo ponía 20px */
	background: var(--zs-papel);
	color: var(--zs-tinta);
	font-family: var(--zs-texto);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
}
html body, html body button, html body input, html body select, html body textarea {
	font-family: var(--zs-texto);
}
/* WordPress mete una capa interna en cada grupo con temas clásicos: que no estorbe a las rejillas */
.wp-block-group[class*="zs-"] > .wp-block-group__inner-container {
	display: contents;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--zs-display);
	font-weight: 400;
	color: var(--zs-tinta);
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: none;
	text-wrap: balance;
}
h1, .gdj-h1 { font-size: clamp(2.1rem, 5vw, 3rem); } /* .gdj-h1: pantallas de juego que se ven como h1 pero son h2 (un solo H1 por página) */
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
h4 { font-size: 1.3rem; }
a { color: var(--zs-tinta); }
a:hover, a:focus, a:active { color: var(--zs-azul); }
.entry-content a:not([class]) {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
strong, b { font-weight: 800; }
:focus-visible {
	outline: 4px solid var(--zs-azul);
	outline-offset: 3px;
}
::selection { background: var(--zs-rayo); color: var(--zs-tinta); }

/* ---------- Cabecera ---------- */
.site-header {
	max-width: none;
	background: var(--zs-papel);
	border-bottom: var(--zs-borde);
}
.site-header .inside-header {
	padding-top: 10px;
	padding-bottom: 10px;
}
.site-header .header-image {
	width: 150px;
}
@media (max-width: 768px) {
	.site-header .header-image { width: 116px; }
}
.main-navigation,
.main-navigation ul ul {
	background: var(--zs-papel);
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	font-family: var(--zs-texto);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--zs-tinta);
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--zs-tinta);
	background: var(--zs-cielo);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--zs-tinta);
	background: transparent;
	text-decoration: underline;
	text-decoration-color: var(--zs-naranja);
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
}
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	background: transparent;
	color: var(--zs-tinta);
	font-size: 24px;
}
/* Submenú de juegos: ficha con contorno */
.main-navigation ul ul {
	border: var(--zs-borde);
	border-radius: 16px;
	box-shadow: 4px 4px 0 var(--zs-tinta);
	padding: 6px 0;
	overflow: hidden;
}
.main-navigation .main-nav ul ul li a {
	font-size: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Panel lateral (móvil y botón de menú) */
.slideout-navigation.main-navigation,
.slideout-navigation.main-navigation ul ul {
	background: var(--zs-papel);
	box-shadow: none;
	border: 0;
	border-radius: 0;
}
.slideout-navigation.main-navigation {
	border-left: var(--zs-borde);
}
.slideout-navigation.main-navigation .main-nav ul li a {
	font-size: 20px;
	color: var(--zs-tinta);
}
.slideout-navigation .slideout-exit,
.slideout-navigation button.slideout-exit {
	color: var(--zs-tinta);
}
.slideout-overlay {
	background: rgba(13, 48, 89, .55); /* tinta translúcida */
}

/* ---------- Contenido ---------- */
.separate-containers .inside-article,
.one-container .site-content {
	background: transparent;
}
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 68ch;
}
.entry-meta,
.entry-meta a,
.cat-links,
.post-navigation a {
	font-family: var(--zs-texto);
	font-weight: 600;
	color: var(--zs-tinta-suave);
}

/* Botones de contenido (bloques de WordPress y GenerateBlocks) */
.zs-boton,
.entry-content .wp-block-button__link,
.entry-content a.gb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--zs-display);
	font-weight: 400;
	font-size: 1.2rem;
	letter-spacing: .02em;
	text-transform: none;
	text-decoration: none;
	color: var(--zs-papel);
	background: var(--zs-tinta);
	border: var(--zs-borde);
	border-radius: 999px;
	padding: 10px 26px;
	box-shadow: 4px 4px 0 var(--zs-c, var(--zs-naranja));
	transition: transform .08s, box-shadow .08s;
}
.zs-boton:hover, .zs-boton:focus,
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus,
.entry-content a.gb-button:hover,
.entry-content a.gb-button:focus {
	color: var(--zs-papel);
	background: var(--zs-tinta);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--zs-c, var(--zs-naranja));
}
.zs-boton:active,
.entry-content .wp-block-button__link:active,
.entry-content a.gb-button:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--zs-c, var(--zs-naranja));
}

/* Acordeón "¿Cómo se juega?" de las páginas de juego */
.wp-block-accordion-item {
	max-width: calc(100% - 8px); /* deja sitio a la sombra */
	margin-inline: auto;
	border: var(--zs-borde);
	border-radius: 18px;
	background: var(--zs-papel);
	box-shadow: 4px 4px 0 var(--zs-tinta);
	margin-bottom: 16px;
	overflow: hidden;
}
.wp-block-accordion-heading {
	margin: 0;
}
.wp-block-accordion-heading__toggle {
	font-family: var(--zs-display) !important;
	font-size: 1.3rem !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: var(--zs-tinta) !important;
	background: transparent !important;
	padding: 16px 20px !important;
}
.wp-block-accordion-heading__toggle:hover {
	background: var(--zs-cielo) !important;
}
.wp-block-accordion-item > div[role="region"],
.wp-block-accordion-item > .wp-block-accordion-panel {
	padding: 0 20px 16px;
}

/* ---------- Pie ---------- */
.site-info {
	background: var(--zs-tinta);
	color: var(--zs-papel);
	font-family: var(--zs-texto);
	font-weight: 600;
	font-size: 16px;
	border-top: var(--zs-borde);
}
.site-info a,
.site-info a:hover {
	color: var(--zs-papel);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.site-info a:hover { color: var(--zs-rayo); }

/* =========================================================
 * Portada
 * ========================================================= */
.home .site.grid-container,
.home .site-content,
.home .inside-article {
	max-width: none;
}
.home .site-content,
.home .inside-article,
.home .entry-content {
	padding: 0;
	margin: 0;
}
.home .site-main,
.home .content-area {
	margin: 0;
}
.home .entry-content :is(p, h1, h2, h3, ul, ol, figure, .wp-block-buttons, .wp-block-group) {
	margin-top: 0;
	margin-bottom: 0;
}

.zs-envol {
	max-width: 1180px;
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.zs-envol > * { margin-top: 0; margin-bottom: 0; }

/* Portada: amarillo con rayos del estallido */
.zs-portada {
	position: relative;
	overflow: hidden;
	background: var(--zs-rayo);
	border-bottom: var(--zs-borde);
}
.zs-portada::before {
	content: "";
	position: absolute;
	inset: -60%;
	background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .28) 0 9deg, transparent 9deg 22.5deg);
	pointer-events: none;
}
.zs-portada .zs-envol {
	position: relative;
	display: grid;
	grid-template-columns: 1.25fr .9fr;
	align-items: center;
	gap: 32px;
	padding-block: 56px 64px;
}
.zs-portada .zs-texto-portada { min-width: 0; }
.zs-portada .zs-texto-portada > * { margin: 0; }
.zs-globo {
	font-family: var(--zs-display);
	font-size: clamp(2.7rem, 9vw, 7rem);
	line-height: 1;
	letter-spacing: .01em;
	-webkit-text-stroke: .09em var(--zs-tinta);
	paint-order: stroke fill;
	text-shadow: .06em .07em 0 var(--zs-tinta);
	margin: 0;
}
.zs-globo .zs-pal { display: inline-block; white-space: nowrap; }
.zs-globo .zs-pal span { display: inline-block; color: var(--zs-rojo); }
.zs-globo .zs-pal:nth-child(2) span { color: var(--zs-azul); }
.zs-globo .zs-pal:nth-child(3) span:nth-child(odd) { color: var(--zs-verde); }
.zs-globo .zs-pal:nth-child(3) span:nth-child(even) { color: var(--zs-papel); }
.zs-globo .zs-pal:nth-child(3) span:nth-child(4n+1) { color: var(--zs-morado); }
.zs-globo .zs-pal:nth-child(3) span:last-child { color: var(--zs-naranja); }
.zs-portada h1 {
	font-family: var(--zs-texto);
	font-weight: 800;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.3;
	letter-spacing: 0;
	max-width: 30ch;
	margin-top: 22px !important;
}
.zs-portada .zs-entradilla {
	font-size: 1.2rem;
	font-weight: 600;
	max-width: 36ch;
	margin-top: 8px !important;
}
.zs-pegatinas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 24px 0 0 !important;
}
.zs-pegatinas li {
	background: var(--zs-papel);
	border: var(--zs-borde);
	border-radius: 999px;
	padding: 4px 16px;
	font-weight: 800;
	font-size: 1rem;
	box-shadow: 3px 3px 0 var(--zs-tinta);
	margin: 0;
}
.zs-pegatinas li:nth-child(2) { transform: rotate(-2deg); }
.zs-pegatinas li:nth-child(3) { transform: rotate(1.5deg); }
.zs-portada .zs-estallido {
	justify-self: center;
	margin: 0;
	width: min(100%, 380px);
}
.zs-portada .zs-estallido img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(8px 8px 0 var(--zs-tinta));
}
@media (prefers-reduced-motion: no-preference) {
	.zs-portada .zs-estallido img { animation: zs-zas .7s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
	@keyframes zs-zas {
		from { transform: scale(.2) rotate(-25deg); opacity: 0; }
		to { transform: none; opacity: 1; }
	}
}
@media (max-width: 760px) {
	.zs-portada .zs-envol { grid-template-columns: 1fr; padding-block: 28px 40px; gap: 8px; }
	.zs-portada .zs-estallido { order: -1; width: 130px; justify-self: center; }
	/* En móvil, la cabecera centrada */
	.zs-portada .zs-texto-portada { text-align: center; }
	.zs-portada h1, .zs-portada .zs-entradilla { margin-inline: auto !important; }
	.zs-pegatinas { justify-content: center; }
}

/* Zona de juegos */
.zs-juegos {
	background: var(--zs-cielo);
	border-bottom: var(--zs-borde);
}
.zs-juegos .zs-envol { padding-block: 56px 72px; }
.zs-cab-seccion {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 32px !important;
}
.zs-cab-seccion > * { margin: 0; }
.zs-cab-seccion p { color: var(--zs-tinta-suave); font-weight: 600; }
.zs-rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
@media (max-width: 980px) { .zs-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .zs-rejilla { grid-template-columns: 1fr; gap: 22px; } }
.zs-ficha {
	--zs-c: var(--zs-azul);
	background: var(--zs-papel);
	border: var(--zs-borde);
	border-radius: 22px;
	box-shadow: var(--zs-sombra);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin: 0;
}
.zs-ficha > * { margin: 0; }
.zs-ficha .wp-block-image,
.zs-ficha figure { margin: 0; }
.zs-ficha img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 545;
	object-fit: cover;
	border-bottom: var(--zs-borde);
}
.zs-ficha .zs-cuerpo {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1;
}
.zs-ficha .zs-cuerpo > * { margin: 0; }
.zs-ficha h3 {
	font-size: 1.9rem;
	letter-spacing: .02em;
	color: var(--zs-c);
	-webkit-text-stroke: .14em var(--zs-tinta);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 var(--zs-tinta);
}
.zs-ficha .zs-gancho { font-weight: 600; flex: 1; }
.zs-dato {
	font-size: .95rem !important;
	font-weight: 800;
	padding: 2px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--zs-c) 18%, var(--zs-papel));
	border: 2px solid var(--zs-tinta);
}
.zs-ficha .wp-block-buttons { margin-top: 6px; }
.zs-impostor { --zs-c: var(--zs-morado); }
.zs-prohibidas { --zs-c: var(--zs-rojo); }
.zs-bomba { --zs-c: var(--zs-naranja); }
.zs-mimica { --zs-c: var(--zs-azul); }
.zs-dibujar { --zs-c: var(--zs-verde); }
.zs-mayoria { --zs-c: var(--zs-rayo); }

/* Así se juega: tres pasos */
.zs-como .zs-envol { padding-block: 64px 32px; }
.zs-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	list-style: none;
	padding: 0;
	margin: 32px 0 0 !important;
	counter-reset: zs-paso;
}
@media (max-width: 760px) { .zs-pasos { grid-template-columns: 1fr; gap: 20px; } }
.zs-pasos li {
	counter-increment: zs-paso;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: start;
	margin: 0;
	font-weight: 600;
	color: var(--zs-tinta-suave);
}
.zs-pasos li::before {
	content: counter(zs-paso);
	grid-row: span 2;
	font-family: var(--zs-display);
	font-size: 2.4rem;
	color: var(--zs-tinta);
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border: var(--zs-borde);
	border-radius: 50%;
	background: var(--zs-rayo);
	box-shadow: 3px 3px 0 var(--zs-tinta);
}
.zs-pasos li:nth-child(2)::before { background: var(--zs-verde); color: var(--zs-papel); }
.zs-pasos li:nth-child(3)::before { background: var(--zs-rojo); color: var(--zs-papel); }
.zs-pasos strong {
	display: block;
	font-family: var(--zs-display);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.15;
	color: var(--zs-tinta);
	padding-top: 6px;
}

/* ¿Cuánto me conoces? destacado */
.zs-destacado .zs-envol { padding-block: 32px 64px; }
.zs-panel {
	--zs-c: var(--zs-azul);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	border: var(--zs-borde);
	border-radius: 22px;
	box-shadow: var(--zs-sombra);
	background: var(--zs-papel);
	overflow: hidden;
}
.zs-panel > * { margin: 0; }
.zs-panel figure { margin: 0; height: 100%; }
.zs-panel img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1000 / 545;
	object-fit: cover;
	border-right: var(--zs-borde);
}
.zs-panel .zs-cuerpo {
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.zs-panel .zs-cuerpo > * { margin: 0; }
.zs-panel p { font-weight: 600; }
@media (max-width: 760px) {
	.zs-panel { grid-template-columns: 1fr; }
	.zs-panel img { border-right: 0; border-bottom: var(--zs-borde); height: auto; }
}
/* Los demás tests, debajo del destacado */
.zs-destacado .zs-mas-tests {
	margin: 40px 0 22px !important;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
}
.zs-test { --zs-c: var(--zs-azul); }

/* Portada: últimas ideas (bucle de consulta de la categoría Ideas, se actualiza solo) */
.zs-ideas {
	background: var(--zs-cielo);
	border-top: var(--zs-borde);
	border-bottom: var(--zs-borde);
}
.zs-ideas .zs-envol { padding-block: 56px 64px; }
.zs-ideas .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
	justify-content: center;
	gap: 28px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 600px) { .zs-ideas .wp-block-post-template { grid-template-columns: 1fr; gap: 22px; } }
/* El tema le pone a cada entrada sus clases de rejilla del blog (grid-33, masonry…): fuera */
.zs-ideas .wp-block-post-template > li.wp-block-post {
	width: auto;
	float: none;
	padding: 0;
	margin: 0;
	background: var(--zs-papel);
	border: var(--zs-borde);
	border-radius: 22px;
	box-shadow: var(--zs-sombra);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.zs-ideas .wp-block-post-featured-image { margin: 0; }
.zs-ideas .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 545;
	object-fit: cover;
	border-bottom: var(--zs-borde);
}
.zs-ideas .wp-block-post-title {
	margin: 0;
	padding: 18px 20px 0;
	font-family: var(--zs-texto);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.25;
}
.zs-ideas .wp-block-post-title a { color: var(--zs-tinta); text-decoration: none; }
.zs-ideas .wp-block-post-title a:hover { color: var(--zs-azul); }
.zs-ideas .wp-block-post-excerpt { margin: 0; padding: 8px 20px 22px; }
.zs-ideas .wp-block-post-excerpt__excerpt { margin: 0; font-weight: 600; }
.zs-ideas .zs-ideas-mas { justify-content: center; margin-top: 32px !important; }

/* Texto para buscadores, al final */
.zs-texto-seo {
	background: var(--zs-cielo);
	border-top: var(--zs-borde);
}
.zs-texto-seo .zs-envol { padding-block: 48px 56px; }
.zs-texto-seo h2 { margin-bottom: 16px !important; }
.zs-texto-seo p {
	max-width: 68ch;
	margin-bottom: 14px !important;
	color: var(--zs-tinta-suave);
}
.zs-texto-seo p strong { color: var(--zs-tinta); }

/* =========================================================
 * Juegos (plugin zasca y ¿Cuánto me conoces?)
 * Se cambian las variables de cada juego y las fuentes; su lógica no se toca.
 * El "body" delante gana a los estilos que imprime cada juego.
 * ========================================================= */
body #bomba-wrapper { --zs-c: var(--zs-naranja); }
body #impostor-wrapper { --zs-c: var(--zs-morado); }
body #prohibidas-wrapper { --zs-c: var(--zs-rojo); }
body #mayoria-wrapper { --zs-c: var(--zs-rayo); }
body #mimica-wrapper { --zs-c: var(--zs-azul); }
body #dibujo-wrapper { --zs-c: var(--zs-verde); }
body #cmc-wrapper { --zs-c: var(--zs-azul); }

body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #dibujo-wrapper, #cmc-wrapper) {
	--accent: var(--zs-tinta);
	--danger: var(--zs-rojo);
	--success: var(--zs-verde);
	--text-main: var(--zs-tinta);
	font-family: var(--zs-texto);
	color: var(--zs-tinta);
}
body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #dibujo-wrapper, #cmc-wrapper) :is(h1, h2) {
	font-family: var(--zs-display);
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--zs-c);
	-webkit-text-stroke: .1em var(--zs-tinta);
	paint-order: stroke fill;
	text-shadow: 2px 3px 0 var(--zs-tinta);
}
body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #dibujo-wrapper, #cmc-wrapper) :is(h3, h4) {
	font-family: var(--zs-display);
	font-weight: 400;
	color: var(--zs-tinta);
}
/* Palabras grandes en pantalla */
body :is(#bomba-wrapper .category-text, #bomba-wrapper .boom-text, #impostor-wrapper .word-reveal, #prohibidas-wrapper .target-word, #mayoria-wrapper .question-display, #mimica-wrapper .big-word, #dibujo-wrapper .big-word) {
	font-family: var(--zs-display);
	font-weight: 400;
	color: var(--zs-tinta);
	letter-spacing: .01em;
}
body #bomba-wrapper .boom-text {
	color: var(--zs-rojo);
	-webkit-text-stroke: .08em var(--zs-tinta);
	paint-order: stroke fill;
	text-shadow: 3px 4px 0 var(--zs-tinta);
}
/* Tarjeta de juego: ficha con contorno en pantallas grandes */
@media (min-width: 769px) {
	body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper) .game-card,
	body #cmc-wrapper .cmc-box {
		background: var(--zs-papel);
		border: var(--zs-borde);
		border-radius: 22px;
		box-shadow: var(--zs-sombra);
	}
}
/* Campos */
body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #dibujo-wrapper, #cmc-wrapper) :is(input[type="text"], input[type="number"], input[type="email"], select, textarea) {
	font-family: var(--zs-texto);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--zs-tinta);
	background: var(--zs-papel);
	border: var(--zs-borde);
	border-radius: 14px;
}
/* Botones de juego (no los de las herramientas de dibujo) */
body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #cmc-wrapper) button,
body #dibujo-wrapper button:not(.tool-btn):not(#peek-btn),
body #cmc-wrapper .cmc-btn {
	font-family: var(--zs-display);
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	border: var(--zs-borde);
	border-radius: 999px;
	box-shadow: 4px 4px 0 var(--zs-c);
	transition: transform .08s, box-shadow .08s;
}
body :is(#bomba-wrapper, #impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #cmc-wrapper) button:active,
body #dibujo-wrapper button:not(.tool-btn):not(#peek-btn):active,
body #cmc-wrapper .cmc-btn:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--zs-c);
	opacity: 1;
}
body :is(#impostor-wrapper, #prohibidas-wrapper, #mayoria-wrapper, #mimica-wrapper, #dibujo-wrapper) button.secondary,
body #bomba-wrapper .reset-btn {
	background: var(--zs-papel);
	color: var(--zs-tinta);
	box-shadow: 4px 4px 0 var(--zs-tinta);
}
body :is(#impostor-wrapper, #mayoria-wrapper, #mimica-wrapper, #dibujo-wrapper) button.vote-btn {
	font-family: var(--zs-texto);
	font-weight: 800;
	background: var(--zs-papel);
	color: var(--zs-tinta);
	border-radius: 16px;
	box-shadow: 3px 3px 0 var(--zs-tinta);
}
body #mayoria-wrapper button.vote-btn:hover {
	background: color-mix(in srgb, var(--zs-rayo) 30%, var(--zs-papel));
}
/* La bomba: botón redondo gordo */
body #bomba-wrapper .big-btn {
	font-weight: 400; /* Titan One no tiene negrita */
	background: var(--zs-rojo);
	color: var(--zs-papel);
	font-size: 1.6rem;
	box-shadow: 6px 6px 0 var(--zs-tinta);
}
body #bomba-wrapper .big-btn[style*="border-radius"] {
	border-radius: 999px !important;
}
/* ¿Cuánto me conoces? */
/* El acordeón de la entrada del quiz trae su propio CSS con la letra del sistema: la de la marca */
html body .cmc-accordion { font-family: var(--zs-texto); }
/* Enlaces dentro del texto del acordeón del quiz: que se distingan */
html body .cmc-accordion .accordion-content a {
	color: var(--zs-azul);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}
/* Titan One solo tiene grosor 400: pedirle negrita hace que el navegador la engorde y se emborrone */
html body .cmc-accordion summary :is(h2, h3),
html body .cmc-accordion > h2 { font-weight: 400; }
/* El CSS del quiz pone los h2 de las cajas en gris oscuro y en negrita: con el contorno de tinta quedaban emborronados */
body #cmc-wrapper .cmc-box h2 { color: var(--zs-c); font-weight: 400; }

/* El CSS del quiz fuerza su botón morado y plano con !important: hay que ganarle igual */
body #cmc-wrapper .cmc-btn:not(.cmc-danger) {
	background: var(--zs-tinta) !important;
	color: var(--zs-papel) !important;
	border: var(--zs-borde) !important;
	border-radius: 999px !important;
	box-shadow: 4px 4px 0 var(--zs-c) !important;
}
body #cmc-wrapper .cmc-btn:not(.cmc-danger):active {
	box-shadow: 0 0 0 var(--zs-c) !important;
}
body #cmc-wrapper :is(.cmc-question-row, .cmc-custom-row) {
	background: var(--zs-papel);
	border: 2px solid var(--zs-tinta);
	border-radius: 14px;
}
body #cmc-wrapper .cmc-category :is(h4, .cmc-h4) {
	font-size: 1.3rem;
}
/* Títulos de sección del formulario: son h2 (orden de encabezados para Google) pero se ven como antes */
body #cmc-wrapper .cmc-box h2.cmc-h3 {
	font-weight: 400;
	color: var(--zs-tinta);
	-webkit-text-stroke: 0;
	text-shadow: none;
}
/* Más tests: tarjetas con contorno, como las de los juegos */
html body .cmc-otros-lista a {
	border: var(--zs-borde);
	border-radius: 18px;
	box-shadow: 5px 5px 0 var(--zs-tinta);
	transition: transform .08s, box-shadow .08s;
}
html body .cmc-otros-lista a:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--zs-tinta);
}
html body .cmc-otros-lista img {
	border-bottom: var(--zs-borde);
}
html body .cmc-otros-lista p {
	font-family: var(--zs-texto);
}

/* ---------- Aviso de cookies (Complianz) ----------
 * Aceptar y Denegar con el mismo tamaño y peso: rechazar debe ser igual de fácil. */
html body .cmplz-cookiebanner {
	--cmplz_banner_border_color: var(--zs-tinta);
	--cmplz_banner_border_width: 3px;
	--cmplz_banner_border_radius: 18px;
	--cmplz_text_color: var(--zs-tinta);
	--cmplz_text_font_size: 14px;
	--cmplz_hyperlink_color: var(--zs-tinta);
	--cmplz_button_border_radius: 999px;
	--cmplz_button_font_size: 16px;
	--cmplz_button_accept_background_color: var(--zs-tinta);
	--cmplz_button_accept_border_color: var(--zs-tinta);
	--cmplz_button_accept_text_color: var(--zs-papel);
	--cmplz_button_deny_background_color: var(--zs-tinta);
	--cmplz_button_deny_border_color: var(--zs-tinta);
	--cmplz_button_deny_text_color: var(--zs-papel);
	--cmplz_button_settings_background_color: var(--zs-papel);
	--cmplz_button_settings_border_color: var(--zs-tinta);
	--cmplz_button_settings_text_color: var(--zs-tinta);
	--cmplz_slider_active_color: var(--zs-verde);
	font-family: var(--zs-texto);
	box-shadow: var(--zs-sombra);
}
html body .cmplz-cookiebanner .cmplz-title {
	font-family: var(--zs-display);
	font-weight: 400;
}
html body .cmplz-cookiebanner .cmplz-btn {
	font-family: var(--zs-texto);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	border-width: 3px;
}

/* Presentación de las páginas de categoría (Tests, Juegos) */
html body .taxonomy-description p + p {
	margin-top: 1em;
}

/* Aviso de transparencia sobre IA: al pie, pequeño y discreto */
html body .zs-aviso-ia {
	max-width: 720px;
	margin: 10px auto 0;
	font-size: .72rem;
	line-height: 1.4;
	opacity: .75;
	font-weight: 400;
}
html body .zs-aviso-ia strong {
	font-weight: 600;
}

/* Artículos de Ideas: ficha de cada juego */
html body .zs-ficha-juego {
	font-size: .95rem;
	color: var(--zs-tinta-suave);
	margin-top: -.4em;
}