/*
 * Centro Pokémon 2026: global layer. Tokens, base elements, page layout,
 * section bands and footer. Block-specific CSS lives in assets/css/blocks/
 * and in each theme block, loaded only where the block renders.
 */

:root {
	color-scheme: light dark;

	--cp-shell: var(--wp--preset--color--shell);
	--cp-shell-deep: var(--wp--preset--color--shell-deep);
	--cp-on-shell: var(--wp--preset--color--on-shell);
	--cp-ground: var(--wp--preset--color--ground);
	--cp-screen: var(--wp--preset--color--screen);
	--cp-screen-sunk: var(--wp--preset--color--screen-sunk);
	/* screen-sunk inside a reading screen or module, whose own surface is already screen-sunk. */
	--cp-screen-sunk-deep: light-dark(oklch(94.2% 0.006 60), oklch(29.1% 0.009 286));
	--cp-ink: var(--wp--preset--color--ink);
	--cp-ink-soft: var(--wp--preset--color--ink-soft);
	--cp-line: var(--wp--preset--color--line);
	--cp-accent: var(--wp--preset--color--accent);
	--cp-signal: var(--wp--preset--color--signal);
	--cp-focus: light-dark(oklch(49.49% 0.1992 260.6), oklch(82.48% 0.0797 260.3));
	/* Form errors (:user-invalid border and message): #b3261e / #f2b8b5, ≥ 6:1 on the screen. Pair with text. */
	--cp-danger: light-dark(oklch(50.13% 0.1783 28.7), oklch(83.4% 0.068 22));
	/* The Alpha red of Pokémon Legends: Arceus (the Alpha mark, #f2352d), for the alfa icon only (non-text
	   graphic): 3.9:1 on screen and 3.6:1 on screen-sunk in light, 4.4:1 / 4:1 in dark. */
	--cp-alfa: oklch(62.7% 0.2248 28.3);
	/* The ✨ emoji's two colours, sampled from the emoji as the site's readers see it (owner 2026-10-14:
	   «the emoji's yellow», the same in light and dark): the big star #ffac33, the small one #ffcc4d.
	   A non-text graphic under 3:1 on the light screens (1.9:1 and 1.5:1): the owner's call; the hidden
	   text says what it means. */
	--cp-chispa: oklch(80.68% 0.1586 71);
	--cp-chispa-small: oklch(86.83% 0.1506 86.4);
	/* Soft text on the shell (drawer group labels, meta, kickers). */
	--cp-on-shell-soft: oklch(91.6% 0.043 27);
	--cp-radius: 14px;
	--cp-radius-sm: 10px;
	/* A Juego's app icon, at any size (the «Juegos y Guías» menu's 8px at 32px): menu, drawer, header,
	   rail tiles, Guía cards, «Juegos en tendencia», the phone Guía strip. */
	--cp-radius-game-icon: 25%;
	/* All-round padding of tile bodies (collection tiles, quick tiles, home cards). */
	--cp-tile-pad: 0.75rem;
	--cp-gutter: var(--wp--style--root--padding-left, 1rem);
	/* Article ↔ rail gap from 1024px: 44px at 1100, 56px from 1440 (rem + vw, so zoom counts). */
	--cp-layout-gap: clamp(2rem, 0.324rem + 3.529vw, 3.5rem);
	/* Motion (DESIGN.md "Motion"): the transitions-polish scale under the house prefix. One
	   ease-out curve site-wide; the skill's --ease-smooth-out maps to --cp-ease-out. */
	--cp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--cp-ease-in-out: ease-in-out;
	--cp-ease-linear: linear;
	--cp-ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
	--cp-duration-stagger: 40ms;
	--cp-duration-micro: 80ms;
	--cp-duration-quick: 150ms;
	--cp-duration-fast: 250ms;
	--cp-duration-medium: 350ms;
	--cp-duration-slow: 400ms;
	--cp-duration-very-slow: 500ms;
	--cp-distance-micro: 4px;
	--cp-distance-small: 6px;
	--cp-distance-base: 8px;
	--cp-distance-medium: 12px;
	--cp-distance-large: 30px;
	--cp-scale-large: 0.96;
	--cp-scale-medium: 0.97;
	--cp-scale-small: 0.98;
	--cp-scale-tiny: 0.99;
	--cp-blur-small: 2px;
	--cp-blur-medium: 3px;
	--cp-blur-large: 8px;
}

@media (min-width: 1024px) {
	:root {
		--cp-tile-pad: 1rem;
	}
}

/* Metric-matched fallbacks: text set before the webfonts arrive occupies the same lines. */
@font-face {
	font-family: "Roboto Fallback";
	src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica");
	size-adjust: 100%;
	ascent-override: 92.8%;
	descent-override: 24.4%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Nunito Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Roboto"), local("Helvetica");
	size-adjust: 98.1%;
	ascent-override: 103.1%;
	descent-override: 36%;
	line-gap-override: 0%;
}

/* Base (good-css "The reset", one rule at a time: `min-width: 0` on every element and the
   block-level img/svg/video rule are left out, they would change existing layouts). */
:root {
	interpolate-size: allow-keywords;
	scrollbar-gutter: stable;
	/* Nunito ships no italic: an emphasised word in a heading keeps its synthesised slant. */
	font-synthesis: style;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	scrollbar-color: light-dark(oklch(76.8% 0.01 52), oklch(41.2% 0.013 286)) var(--cp-ground);
	scroll-padding-block-start: 1rem;
}

/* A modal open (lightbox, search palette, phone drawer): the page behind it stays still.
   scrollbar-gutter above keeps it from shifting sideways. */
html:has(dialog:modal) {
	/* lint-allow: hidden — scroll lock on the root while a modal is open; the viewport takes hidden */
	overflow: hidden;
}

body {
	min-block-size: 100svh;
	margin: 0;
	overflow-wrap: break-word;
}

input,
textarea {
	caret-color: var(--cp-accent);
}

/*
 * Below 16px iOS zooms the page on focus. Zero specificity: a component's own size wins, so a
 * field with a smaller size floors it with `font-size: max(var(--cp-input-min), <size>)`:
 * 16px on touch screens, nothing on a mouse (the desktop look is unchanged).
 */
:root {
	--cp-input-min: 0px;

	@media (pointer: coarse) {
		--cp-input-min: 16px;
	}
}

:where(input, textarea, select) {
	font-size: max(16px, 1rem);
}

:where(button, a, [role="button"]) {
	touch-action: manipulation;
}

:where(button, [role="button"]) {
	user-select: none;
	-webkit-user-select: none;
}

:focus-visible {
	outline: 3px solid var(--cp-focus);
	outline-offset: 2px;
}

/* Media never wider than its box. Not on an svg with a `width` (registry icons: fixed boxes): a
   percentage max size makes WebKit count it as 0px in min-content widths, so tables, sticky columns
   and shrink-to-fit pills sized around an icon came out too narrow on iPhone. Fixed-size icons
   drawn without a `width` (type pill glyph, Pokémon list icons) set `max-inline-size: none`. */
img,
video,
iframe,
:where(svg:not([width])) {
	max-inline-size: 100%;
}

img {
	block-size: auto;
}

/* Pixel art scales with crisp pixels, never blurred (owner 2026-10-14): `is-pixel` on Pokémon
   sprites of pixel-art sets (core Pokedex `pixel`), hand-picked pixel sprites (core Media\PixelArt),
   Classic Style item icons and handheld screenshots (core BestImage). Everything else (HOME
   renders, artwork, photos) keeps the browser's smooth scaling. */
img.is-pixel {
	image-rendering: pixelated;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Global styles' link and button hovers (theme.json has no media query for them), same weight. */
@media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration-thickness: 2px;
	}

	:root :where(a:where(:not(.wp-element-button)):hover) {
		text-decoration: none;
	}

	:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
		background-color: var(--wp--preset--color--shell-deep);
	}
}

/* Press feedback for everything pressable, at zero specificity: a component's own :active wins.
   Links dim (works inline, underlined or not); buttons shrink a little. */
:where(a):active {
	opacity: 0.7;
}

:where(button, [role="button"], .wp-element-button, input[type="submit"]):active {
	scale: var(--cp-scale-medium);
}

@media (prefers-reduced-motion: no-preference) {
	:where(button, [role="button"], .wp-element-button, input[type="submit"]) {
		transition: scale var(--cp-duration-quick) var(--cp-ease-out);
	}
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}

.cp-icon {
	flex: none;
	vertical-align: middle;
}

/* The chispa (the shiny mark, every block that has one): the registry `shiny` icon where the ✨ emoji
   was, in the emoji's two colours (the icon's second path is the small star). In text (the Ficha's
   title) about the emoji's size on the line; next to a sprite, `.cp-chispa-pic` puts it on the
   sprite's top-right corner at --cp-chispa-size (each block sets it for its sprite). */
.cp-chispa {
	inline-size: 1.25em;
	block-size: 1.25em;
	color: var(--cp-chispa);
	vertical-align: -0.2em;

	& path + path {
		color: var(--cp-chispa-small);
	}
}

.cp-chispa-pic {
	position: relative;
	display: inline-flex;
	flex: none;

	& > .cp-chispa {
		position: absolute;
		inset-block-start: -0.25rem;
		inset-inline-end: -0.25rem;
		inline-size: var(--cp-chispa-size, 1.25rem);
		block-size: var(--cp-chispa-size, 1.25rem);
	}
}

.screen-reader-text {
	/* lint-allow: important — screen-reader-text, as in core: no layout rule may bring it back into view */
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: clip;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A short hyphenated name ("Z-A", "X-Y") kept on one line (core Text\Nowrap, assets/js/nowrap.js). */
.cp-nowrap {
	white-space: nowrap;
}

/* Page frame. */
.cp-main {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

.cp-wrap {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/*
 * Two-column layout: content ≤ 760px, a fixed 300px rail at ≥ 1024px.
 * Areas let one block (e.g. the Guía navigation) sit above the content on
 * phones and in the rail on desktop without being printed twice. Guía pages
 * use their own variant (.cp-layout--guia, below the reading screen rules).
 */
.cp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"lead"
		"main"
		"aside";
	gap: var(--wp--preset--spacing--60);
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	align-items: start;

	/* Grid items: the flow layout's block gap (margin-block-start) would push the second column down. */
	& > * {
		margin-block: 0;
	}

	& > .cp-col-lead {
		grid-area: lead;
	}

	& > .cp-col-main {
		grid-area: main;
		min-inline-size: 0;
	}

	& > .cp-col-aside {
		grid-area: aside;
		min-inline-size: 0;
	}

	&:not(:has(> .cp-col-lead)) {
		grid-template-areas:
			"main"
			"aside";
	}
}

.cp-col-lead:empty {
	display: none;
}

@media (min-width: 1024px) {
	.cp-layout {
		grid-template-columns: minmax(0, 760px) 300px;
		grid-template-areas:
			"main lead"
			"main aside";
		grid-template-rows: auto 1fr;
		justify-content: center;
		column-gap: var(--cp-layout-gap);
		row-gap: var(--wp--preset--spacing--50);

		&:not(:has(> .cp-col-lead)) {
			grid-template-areas: "main aside";
			grid-template-rows: auto;
		}
	}

	/* Listings (front, archives, search) carry no reading measure: span the
	   full 1280 container so their edges match the header ad and bands. */
	.cp-layout:not(:has(.wp-block-post-content)) {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.cp-col-aside {
		align-self: stretch;
	}
}

.cp-col-aside {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* A "screen": the calm reading surface set into the shell, with rounded corners. */
.cp-screen {
	background: var(--cp-screen);
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--cp-gutter);
	margin-inline: calc(var(--cp-gutter) * -1);
}

@media (min-width: 640px) {
	.cp-screen {
		margin-inline: 0;
		padding: var(--wp--preset--spacing--60);
		border-radius: var(--cp-radius);
	}
}

/* Page heads: title, meta, description. */
.cp-page-head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);

	& > * {
		margin-block: 0;
	}

	& .wp-block-post-title,
	& .wp-block-query-title,
	& h1 {
		margin: 0;
	}
}

.cp-lede,
.cp-page-head .wp-block-term-description,
.cp-page-head .wp-block-post-excerpt {
	color: var(--cp-ink-soft);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;

	& p {
		margin: 0;
	}
}

/* Plataforma archive: the launch year sits right under the h1, as its subtitle. */
.cp-page-head .cp-juego-archivo__year {
	margin-block-start: calc(-0.5 * var(--wp--preset--spacing--30));
	color: var(--cp-ink-soft);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.cp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	color: var(--cp-ink-soft);
	font-size: var(--wp--preset--font-size--small);

	& > * {
		margin: 0;
	}

	& a {
		color: inherit;
	}

	& .wp-block-post-terms a {
		color: var(--cp-accent);
		font-weight: 500;
		text-decoration: none;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				text-decoration: underline;
			}
		}
	}

	& .wp-block-post-author-name {
		font-weight: 500;
		color: var(--cp-ink);
	}
}

/* Section bands: a heading with a seam that runs to the edge. */
.cp-band {
	margin-block: var(--wp--preset--spacing--70) 0;

	& + .cp-band {
		margin-block-start: var(--wp--preset--spacing--70);
	}
}

.cp-band__head {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);

	& > * {
		margin: 0;
	}
}

.cp-band__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.01em;

	&::after {
		content: "";
		flex: 1;
		block-size: 3px;
		border-radius: 3px;
		/* lint-allow: physical — gradients take no logical direction; the accent stub starts the rule in this ltr site */
		background: linear-gradient(to right, var(--cp-shell) 0 2.5rem, var(--cp-line) 2.5rem);
	}
}

.cp-more,
.cp-band__more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--cp-accent);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			text-decoration: underline;
		}
	}
}

/* Chip rows: category filters on the news feed, tags. Horizontal scroll on phones. */
.cp-chips {
	display: flex;
	gap: 0.5rem;
	margin-block: 0 var(--wp--preset--spacing--40);
	margin-inline: calc(var(--cp-gutter) * -1);
	padding-block: 0.25rem 0.5rem;
	padding-inline: var(--cp-gutter);
	/* `auto`, not clip: news-filters scrolls the current chip into view. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--cp-gutter);

	& li {
		flex: none;
		scroll-snap-align: start;
	}

	& a {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.5rem;
		padding-block: 0.375rem;
		padding-inline: 1rem;
		border: 1px solid var(--cp-line);
		border-radius: 999px;
		background: var(--cp-screen);
		color: var(--cp-ink);
		font-size: 0.9375rem;
		font-weight: 500;
		text-decoration: none;
		white-space: nowrap;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				border-color: var(--cp-accent);
				color: var(--cp-accent);
			}
		}

		&[aria-current] {
			border-color: var(--cp-shell);
			background: var(--cp-shell);
			color: var(--cp-on-shell);
		}
	}
}

@media (min-width: 640px) {
	.cp-chips {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

/* Ads: Monetization owns .cp-ad; the theme only spaces it inside its layouts. */
.cp-col-main > .cp-ad,
.cp-col-main .wp-block-post-content + .cp-ad,
.cp-main > .cp-ad {
	margin-block: var(--wp--preset--spacing--50);
}

.cp-header-ad {
	display: none;
}

@media (min-width: 1024px) {
	.cp-header-ad {
		display: flex;
		justify-content: center;
		padding-block: var(--wp--preset--spacing--40) 0;
	}
}

/* Share row. */
.cp-share-row {
	margin-block: var(--wp--preset--spacing--50);
}

/* Footer: the bottom of the casing. */
.cp-footer {
	margin-block-start: var(--wp--preset--spacing--70);
	border-block-start: 6px solid var(--cp-shell);
	background: var(--cp-shell-deep);
	color: var(--cp-on-shell);
	font-size: 0.9375rem;
	/* Secondary text on shell-deep (brand line, column titles, legal). */
	--cp-footer-soft: oklch(93.3% 0.034 27);

	& a {
		color: var(--cp-on-shell);
		text-decoration: none;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				text-decoration: underline;
			}
		}

		&:focus-visible {
			outline-color: var(--cp-on-shell);
		}
	}
}

.cp-footer__inner {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding-inline: var(--cp-gutter);
}

.cp-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);

	& img {
		display: block;
		inline-size: 150px;
		block-size: auto;
	}

	& p {
		max-inline-size: 34ch;
		margin: 0;
		color: var(--cp-footer-soft);
	}
}

.cp-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.cp-footer__col {
	& h2 {
		margin-block: 0 0.5rem;
		margin-inline: 0;
		color: var(--cp-footer-soft);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	& ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& li a {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		min-block-size: 2.25rem;
	}
}

.cp-footer__social {
	display: flex;
	gap: 0.25rem;
	margin-block: 0;
	margin-inline: -0.625rem 0;
	padding: 0;
	list-style: none;

	& a {
		display: inline-grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: 0.75rem;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				background: color-mix(in oklch, var(--cp-on-shell) 12%, transparent);
			}
		}
	}
}

.cp-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid color-mix(in oklch, var(--cp-on-shell) 18%, transparent);
	color: var(--cp-footer-soft);
	font-size: 0.875rem;

	& p {
		margin: 0;
	}
}

.cp-footer .wp-block-centropokemon-dato-curioso {
	color: var(--cp-ink);
}

@media (min-width: 1024px) {
	.cp-footer__inner {
		grid-template-columns: 18rem 1fr;
		column-gap: var(--wp--preset--spacing--70);
	}

	.cp-footer__legal {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

/* Empty / not-found states. */
.cp-empty {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--cp-radius);
	background: var(--cp-screen);
	text-align: center;

	& > * {
		margin-block: 0 var(--wp--preset--spacing--30);
	}
}

/* A live light/dark switch (Setup::html_flags): colours change at once, never through a fade. */
.cp-scheme-swap,
.cp-scheme-swap *,
.cp-scheme-swap *::before,
.cp-scheme-swap *::after {
	/* lint-allow: important — a live colour-scheme switch must beat every component transition */
	transition: none !important;
}

/* Front page. */
body.paged .cp-front-only {
	display: none;
}

.cp-hoy {
	margin-block-end: var(--wp--preset--spacing--60);
}

.cp-front-bands {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Related lists render a heading even when the variation finds nothing: hide the empty band. */
.cp-related:not(:has(.wp-block-post-template > li)) {
	display: none;
}

/* "Actualizado: <fecha>" sits on one line. */
.cp-meta .cp-updated {
	margin-inline-end: -0.5rem;
}

/* Rail boxes (lists in the sidebar). */
.cp-rail-box {
	padding-block: 0.75rem;
	padding-inline: 1rem;
	border-radius: var(--cp-radius);
	background: var(--cp-screen);

	& > .wp-block-query {
		margin: 0;
	}
}

.cp-rail-box__title {
	margin-block: 0 0.25rem;
	margin-inline: 0;
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.cp-collection--trucos.is-layout-list .cp-tile__meta {
	display: none;
}

/* Not-found page. */
.cp-notfound {
	max-inline-size: 60rem;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);

	& > h1 {
		margin-block: 0 var(--wp--preset--spacing--30);
	}

	& > .wp-block-search {
		max-inline-size: 36rem;
		margin-block: var(--wp--preset--spacing--50);
	}

	/* Its three bands list 6 each: two full rows of three from 640px (2-up rows below). */
	@media (min-width: 640px) {
		& .cp-collection .cp-collection__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

/* Dato curioso above the footer, on the ground. */
.cp-footer-dato {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-inline: var(--cp-gutter);

	& + .cp-footer,
	& + * .cp-footer {
		margin-block-start: var(--wp--preset--spacing--50);
	}
}

.cp-site-footer > .cp-footer-dato:empty {
	display: none;
}

/* Rhythm inside the content column: more space above a section than inside it. */
.cp-col-main > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.cp-col-main > :first-child + .cp-page-head {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Core flow layout adds block-gap margins; these containers manage their own gaps. */
.cp-page-head.cp-page-head > *,
.cp-meta.cp-meta > *,
.cp-band__head.cp-band__head > * {
	margin-block: 0;
}

/* "Actualizado:" only when a modified date follows (core prints nothing if never modified). */
.cp-meta .cp-updated:last-child {
	display: none;
}

/* "Destacados" is a legacy flag category, not a topic: never shown in meta rows. */
.cp-meta .wp-block-post-terms {
	/* Inline padding: a hit area of at least 24px tall (WCAG 2.5.8) without moving the line. */
	& a {
		padding-block: 0.3125rem;
	}

	& a[href*="/cat/destacado/"],
	& a[href*="/cat/destacado/"] + .wp-block-post-terms__separator,
	& .wp-block-post-terms__separator:has(+ a[href*="/cat/destacado/"]:last-child) {
		display: none;
	}
}

/* Header ad: aligned to the 1280 container, label included. */
@media (min-width: 1024px) {
	.cp-header-ad {
		display: block;
		box-sizing: border-box;
		max-inline-size: var(--wp--style--global--wide-size);
		margin-inline: auto;
		inline-size: min(100% - 2rem, var(--wp--style--global--wide-size));
	}
}

/* Trucos on phones: the decorative banner that opens the content floats beside the intro, so the codes come sooner. */
@media (max-width: 639px) {
	.cp-trucos .wp-block-post-content > p:first-child:has(> img:only-child, > a:only-child > img) {
		float: inline-end;
		inline-size: 42%;
		margin-block: 0.25rem 0.5rem;
		margin-inline: 0.875rem 0;

		/* A block link, not prose's shrink-to-fit inline-block: until the image loads, a shrink-wrapped link
		   is 0 px wide and the image reserves no box, so the intro jumps when it arrives (CLS 0.07 on phones). */
		& > a {
			display: block;
		}

		& img {
			display: block;
			inline-size: 100%;
			margin: 0;
		}
	}

	.cp-trucos .wp-block-post-content > :is(h2, h3, .cp-ad) {
		clear: both;
	}
}

/* Section headers: a small Poké Ball marks each band. */
.cp-band__title::before {
	content: "";
	flex: none;
	order: -1;
	inline-size: 0.8em;
	block-size: 0.8em;
	background: var(--cp-shell);
	-webkit-mask: url("../images/pokeball-mask.svg") center / contain no-repeat;
	mask: url("../images/pokeball-mask.svg") center / contain no-repeat;
}

/* Empty states and the 404: a puzzled Psyduck. */
.cp-empty::before,
.cp-notfound::before {
	content: "";
	display: block;
	inline-size: 6rem;
	aspect-ratio: 1;
	margin-block: 0 var(--wp--preset--spacing--30);
	margin-inline: auto;
	background: url("../images/psyduck.webp") center / contain no-repeat;
}

.cp-notfound::before {
	inline-size: 7.5rem;
	margin-inline: 0;
}

/*
 * The rail's card is a desktop extra (phones get the footer one). The home's trio prints one
 * copy per layout (`viewport`): the rail's on desktop, the main column's on phones and tablets.
 */
@media (max-width: 1023px) {
	.cp-col-aside .cp-dato-curioso--card,
	.cp-dato-curioso--desktop {
		display: none;
	}
}

@media (min-width: 1024px) {
	.cp-dato-curioso--mobile {
		display: none;
	}
}

/*
 * The home's trio on phones and tablets (the `--mobile` copies, after the feed in the main column)
 * stacks like the rail under the content on every other page: the layout's column gap above the
 * first box (after the pagination), the rail's gap between boxes. The module surface's `margin: 0`
 * (below) would otherwise butt the boxes against the pagination and each other.
 */
.cp-col-main > .cp-pkdia--mobile {
	margin-block-start: var(--wp--preset--spacing--60);
}

.cp-col-main > :is(.cp-dato-curioso--mobile, .cp-cdd--mobile) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Short uppercase labels (band kickers, rail and footer column titles) in Nunito Black. */
:where(.cp-band__title, .cp-rail-box__title, .cp-footer__col h2, .cp-comments-archive__title) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	letter-spacing: 0.01em;
}

/*
 * C1: Pokémon type colours as section wayfinding. Each section has a type:
 * Noticias and Juegos y Guías = Fuego (brand red; owner 2026-10-12: /juegos/, Guías and their
 * bands carry the brand, no section colour of their own), Trucos = Eléctrico, Pokémon GO = Agua, TCG = Psíquico, Anime = Hada, Distribuciones = Dragón,
 * Datos curiosos = Fantasma. The colour marks (Poké Ball, rules, chips) always
 * sit next to a text label; values hold ≥ 3:1 as graphics on the ground and
 * ≥ 4.5:1 where used as text.
 */
:root {
	--cp-type-fire: var(--cp-accent);
	--cp-type-electric: light-dark(oklch(53% 0.109 83), oklch(86.33% 0.1758 89.8));
	--cp-type-grass: light-dark(oklch(52.34% 0.1347 144.2), oklch(77.96% 0.15 141.9));
	--cp-type-water: light-dark(oklch(50.21% 0.1676 258.6), oklch(75.16% 0.1286 257.4));
	--cp-type-psychic: light-dark(oklch(49.82% 0.1875 2.2), oklch(78.3% 0.144 355));
	--cp-type-fairy: light-dark(oklch(52.6% 0.17 336), oklch(81.83% 0.119 334.3));
	--cp-type-dragon: light-dark(oklch(46.36% 0.1916 280.4), oklch(74.06% 0.1408 286.6));
	--cp-type-ghost: light-dark(oklch(47.31% 0.1059 306.6), oklch(77% 0.087 307));
	--cp-section: var(--cp-type-fire);
}

.cp-section-trucos { --cp-section: var(--cp-type-electric); }
.cp-section-go { --cp-section: var(--cp-type-water); }
.cp-section-tcg-pocket { --cp-section: var(--cp-type-psychic); }

.cp-collection--trucos { --cp-section: var(--cp-type-electric); }
.cp-eventos-band,
.cp-collection--juego-posts.is-go { --cp-section: var(--cp-type-water); }
.cp-collection--juego-posts.is-tcg { --cp-section: var(--cp-type-psychic); }
.post-type-archive-dato_curioso { --cp-section: var(--cp-type-ghost); }

.cp-band__title::before {
	background: var(--cp-section);
}

.cp-band__title::after {
	/* lint-allow: physical — gradients take no logical direction; the accent stub starts the rule in this ltr site */
	background: linear-gradient(to right, var(--cp-section) 0 2.5rem, var(--cp-line) 2.5rem);
}

/* Every page head opens with a short accent bar (the brand accent on every page type, never the
   section colour; as in the Pokédex app): 2px, square ends. A border, so forced colours keep
   it; 1px above and below keep the 4px slot it always had, so the rhythm doesn't move. */
.cp-col-main > .cp-page-head::before {
	content: "";
	display: block;
	inline-size: 2.5rem;
	block-size: 0;
	margin-block: 1px;
	border-block-start: 2px solid var(--cp-accent);
}

/* Chips: a dot before the label, in the chip's type colour (the news facets set --cp-chip from core's data/temas.json), which also fills the current chip. */
.cp-chips a {
	gap: 0.5rem;

	&::before {
		content: "";
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: 50%;
		background: var(--cp-chip, var(--cp-type-fire));
	}

	&[aria-current] {
		border-color: var(--cp-chip, var(--cp-shell));
		background: var(--cp-chip, var(--cp-shell));

		&::before {
			background: currentColor;
		}
	}
}

/* A filled current chip in a light dark-mode type colour takes dark text. */
.cp-chips a.has-color[aria-current] {
	color: light-dark(var(--cp-on-shell), oklch(19.2% 0.004 286));
}

/*
 * News facet chips (block news-filters): on phones one row that scrolls sideways (the .cp-chips
 * scroller; never a second row; news-filters scrolls the current chip into view), from 640px every
 * chip in sight, wrapping. The games open their own group after a thin rule. Icons sit in a fixed
 * 30px box (no late size change).
 */
.cp-chips--facets {
	padding-block: 0.375rem 0.5rem;

	& .cp-chips__group {
		margin-inline-start: 0.25rem;
		padding-inline-start: 0.75rem;
		border-inline-start: 1px solid var(--cp-line);
	}

	& a.has-icon {
		padding-inline-start: 0.375rem;

		&::before {
			content: none;
		}
	}
}

.cp-chips__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	margin-block: -0.4rem;

	& img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
	}
}

/* Game chips: the opaque app icon sits as far from the pill's start as from its top and bottom (the same
   ≈12px visual inset as the topic chips' sprites), so its corners clear the curve; a rounder corner nests
   it in the pill (nested radius, short of a circle so the app art keeps its shape). */
.cp-chips--facets a.is-juego {
	padding-inline-start: 0.75rem;
}

.cp-chips a.is-juego .cp-chips__icon {
	inline-size: 28px;
	block-size: 28px;
	overflow: clip;
	border-radius: 9px;
}

/* C3: Poké Ball spinner for loading states. */
@keyframes cp-spin {
	to {
		transform: rotate(1turn);
	}
}

.cp-spinner,
.cp-contact-form[data-status="sending"] .cp-contact-form__submit::before {
	content: "";
	display: inline-block;
	inline-size: 1.1em;
	block-size: 1.1em;
	margin-inline-end: 0.5em;
	vertical-align: -0.2em;
	background: currentColor;
	-webkit-mask: url("../images/pokeball-mask.svg") center / contain no-repeat;
	mask: url("../images/pokeball-mask.svg") center / contain no-repeat;
}

/* Under reduced motion the ball breathes instead (motion.css). */
@media (prefers-reduced-motion: no-preference) {
	.cp-spinner,
	.cp-contact-form[data-status="sending"] .cp-contact-form__submit::before {
		animation: cp-spin 0.9s linear infinite;
	}
}

/* C6: Poké Ball bullets in navigation-like lists on the shell (footer, drawer); a barely visible
   Poké Ball tile on the ground. Desktop mega-menu rows align on their own icon slot instead. */

:where(.cp-footer__col li a, .cp-drawer__links a:not(:has(.cp-link__sprite)))::before {
	content: "";
	flex: none;
	inline-size: 0.6em;
	block-size: 0.6em;
	margin-inline-end: 0.15em;
	background: currentColor;
	opacity: 0.55;
	-webkit-mask: url("../images/pokeball-mask.svg") center / contain no-repeat;
	mask: url("../images/pokeball-mask.svg") center / contain no-repeat;
}


/* Home on phones: the Guías band below the feed already covers the rail's "Guías recientes". */
@media (max-width: 1023px) {
	.cp-front .cp-col-aside .cp-collection--guias {
		display: none;
	}
}


/*
 * Reading templates: the main column is a "screen" (Posts, pages, Guías,
 * Secciones and Trucos, Eventos, Datos curiosos, search
 * results, /archivo/, 404). Phones: the screen runs edge to edge with a normal
 * reading gutter, no card around it. From 768px: a rounded surface of its own
 * above the patterned ground. Inside, nested surfaces step down one tone.
 */
:is(.single, .page, .search, .post-type-archive-dato_curioso) .cp-col-main,
.error404 .cp-notfound.cp-notfound {
	--cp-screen: var(--wp--preset--color--screen-sunk);
	--cp-screen-sunk: var(--cp-screen-sunk-deep);
	margin-inline: calc(var(--cp-gutter) * -1);
	padding-block: var(--cp-card-pad) 1.5rem;
	--cp-card-pad: var(--cp-gutter);
	padding-inline: var(--cp-card-pad);
	background: var(--wp--preset--color--screen);
}

/* Phones: the screen starts right under the header, no strip of ground above it. */
@media (max-width: 767px) {
	:is(.single, .page, .search, .post-type-archive-dato_curioso, .error404) .cp-main.cp-main {
		margin-block-start: 0;
		padding-block-start: 0;
	}
}

/* Tablets (768–1023px) with a Guía/Sección index: the index strip sits right under the header,
   as on phones. Keyed on the layout's classes (server-set, in the HTML before the lead is parsed),
   never on the strip itself. */
@media (min-width: 768px) and (max-width: 1023px) and (scripting: enabled) {
	.cp-main.cp-main:has(> .cp-layout--guia:not(.cp-layout--no-lead)) {
		margin-block-start: 0;
		padding-block-start: 0;
	}
}

@media (min-width: 768px) {
	:is(.single, .page, .search, .post-type-archive-dato_curioso) .cp-col-main,
	.error404 .cp-notfound.cp-notfound {
		margin-inline: 0;
		--cp-card-pad: 2rem;
		padding: var(--cp-card-pad);
		border: 1px solid var(--cp-line);
		border-radius: var(--cp-radius);
	}

	.error404 .cp-notfound.cp-notfound {
		margin-inline: auto;
	}
}

/*
 * Insets on every article card (owner 2026-10-13), measured to the ink:
 * - card top → the first ink (the breadcrumb's text, or an image) = the side padding;
 * - an image → the breadcrumb = the side padding;
 * - the breadcrumb → what follows (the page head's accent bar, or a Juego root's hero card) =
 *   half of it, `--cp-crumb-after` (12px at least: half the phone gutter is too tight under a
 *   36px row).
 * `--cp-crumb-gap` is the gap above. The constants are the trail's own empty row around its
 * ink (36px hit rows of 13px Roboto: ~3px of the trimmed row above the ink, ~12px below the
 * baseline).
 */
.cp-col-main {
	--cp-crumb-gap: var(--cp-card-pad, 1.5rem);
	--cp-crumb-after: max(calc(var(--cp-card-pad, 1.5rem) / 2), 0.75rem);
}

.cp-col-main > .yoast-breadcrumbs + :is(.cp-guia-juego--hero, .cp-page-head) {
	margin-block-start: calc(var(--cp-crumb-after) - 0.9rem);
}

/* The slim Guía banner (Guía pages, `/{juego}/noticias/`) spans the card's full inner width: out
   through the card's inline padding, square, flush with its sides; what follows keeps the padding. */
.cp-col-main > .cp-guia-hero {
	margin-inline: calc(var(--cp-card-pad) * -1);
	border-radius: 0;
}

@media (min-width: 1024px) {
	:is(.single, .page, .search, .post-type-archive-dato_curioso) .cp-col-main,
	.error404 .cp-notfound.cp-notfound {
		--cp-card-pad: 2.5rem;
		padding: var(--cp-card-pad);
	}
}

/* Breadcrumbs: a quiet line at the top of the screen (type and colours: blocks/breadcrumbs.css).
   Its rows are 36px hit targets, so ~10px of empty row sits above the text. As the card's first
   line the row starts that much up in the padding (`--cp-crumb-trim`), so the visible gap above
   the text is the padding; the link targets keep their size. */
.cp-col-main > .yoast-breadcrumbs {
	--cp-crumb-trim: calc((1lh - 2.25rem) / 2);
	margin-block-end: 0;

	/* First in the card: the row starts up in the padding, so the ink sits one crumb gap down
	   (the padding itself, except over a full-bleed hero). */
	&:first-child {
		margin-block-start: calc(var(--cp-crumb-gap) - var(--cp-card-pad, 1.5rem) + var(--cp-crumb-trim) - 0.2rem);
	}

	/* After an image (the Guía hero, a Sección's banner): the same gap from the image's edge to
	   the trail's ink. */
	.cp-col-main > :is(.cp-guia-hero, .cp-seccion-hero) + & {
		margin-block-start: calc(var(--cp-crumb-gap) - 0.2rem + var(--cp-crumb-trim));
	}
}

/*
 * Guía pages (.cp-layout--guia): the guide's index (centropokemon/guia-nav, in "lead").
 * ≥ 1280px: three columns, IGN-style. The index is a sticky, full-height pane on the
 * left (its own scroll; the pane's surface runs to the viewport edge), the article
 * keeps its measure, the rail (ads + modules) stays on the right, its edge on the
 * 1280 container's. 1024–1279px: article + rail as on other pages (the rail starts
 * with its ad); the index is the "Índice de la guía" bar above the article, opening a
 * full-height drawer. Phones: the bar opens a bottom sheet.
 */
@media (max-width: 767px) {
	/* The bar opens the reading screen: same surface, edge to edge, no strip of ground. */
	.cp-layout--guia > .cp-col-lead {
		margin-inline: calc(var(--cp-gutter) * -1);
		margin-block-end: calc(var(--wp--preset--spacing--60) * -1);
		padding-block: 0.75rem 0;
		padding-inline: var(--cp-gutter);
		background: var(--wp--preset--color--screen);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.cp-layout--guia > .cp-col-lead {
		margin-block-end: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--60));
	}
}

/* `.cp-layout.cp-layout--guia`: outranks the listing rule `.cp-layout:not(:has(.wp-block-post-content))`,
   which also matches while the article is still being parsed. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.cp-layout.cp-layout--guia {
		grid-template-columns: minmax(0, 760px) 300px;
		grid-template-areas:
			"lead aside"
			"main aside";
	}
}

@media (min-width: 1280px) {
	.cp-layout.cp-layout--guia {
		--cp-guia-pane: color-mix(in oklch, var(--wp--preset--color--screen) 55%, var(--wp--preset--color--ground));
		/* 32px at 1280, 36px at 1440. */
		--cp-guia-gap: clamp(1.5rem, 0.45rem + 2vw, 2.5rem);
		max-inline-size: none;
		/* The rail ends where the 1280 container ends; the index pane takes the space on the left. */
		padding-inline-end: max(0px, (100% - var(--wp--style--global--wide-size)) / 2);
		/* Widths from the container only, never from content: the index is final when its
		   inline script measures it, before the article is parsed. */
		grid-template-columns: max(17rem, 100% - 760px - 300px - 2 * var(--cp-guia-gap)) minmax(0, 760px) 300px;
		grid-template-areas: "lead main aside";
		grid-template-rows: auto;
		justify-content: stretch;
		column-gap: var(--cp-guia-gap);

		& > .cp-col-lead {
			position: sticky;
			inset-block-start: var(--wp-admin--admin-bar--height, 0px);
			align-self: start;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			box-sizing: border-box;
			block-size: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
			/* Docked to the viewport edge: the column reaches over the page gutter, so the pane's
			   surface starts at the screen's edge and its content sits the same distance from both
			   of the pane's edges (cp-guia-nav.css, --cp-pane-pad). Its top, bottom and inner edge
			   line up with the cards beside it. */
			margin-inline-start: calc(var(--cp-gutter) * -1);
			border: 1px solid var(--cp-line);
			border-inline-start: 0;
			border-start-end-radius: var(--cp-radius);
			border-end-end-radius: var(--cp-radius);
			background: var(--cp-guia-pane);
		}

		/* The pane carries "Guía de X" and the key art: the slim banner would repeat it. */
		& .cp-guia-hero--compact {
			display: none;
		}

		& > .cp-col-main > .cp-guia-hero--compact + .yoast-breadcrumbs {
			margin-block-start: calc(var(--cp-crumb-trim) - 0.2rem);
		}
	}
}

/* Below 1024px the slim banner is hidden too (guia-hero style.css: the index strip names the
   Guía), so the breadcrumb is the card's first line: no flow gap above it, the card's own top
   padding only, as on a Juego root (owner 2026-10-13: every Guía page starts at one inset). */
@media (max-width: 1023px) {
	.cp-layout--guia:has(> .cp-col-lead .cp-guia-nav) > .cp-col-main > .cp-guia-hero--compact + .yoast-breadcrumbs {
		margin-block-start: calc(var(--cp-crumb-trim) - 0.2rem);
	}
}

/* No index to show (a Sección without subpages, a Juego without a Guía): the ordinary article +
   rail. The class comes from the server (Content::mark_empty_lead), never from `:empty`, which
   changes while the lead is being parsed. The empty lead is hidden: the ≥1280px pane rule
   (display: flex, 100dvh) would otherwise place it in an extra grid row, a viewport-tall gap. */
.cp-layout.cp-layout--guia.cp-layout--no-lead > .cp-col-lead {
	display: none;
}

@media (min-width: 1024px) {
	.cp-layout.cp-layout--guia.cp-layout--no-lead {
		max-inline-size: var(--wp--style--global--wide-size);
		padding-inline-end: 0;
		grid-template-columns: minmax(0, 760px) 300px;
		grid-template-areas: "main aside";
		grid-template-rows: auto;
		justify-content: center;
		column-gap: var(--cp-layout-gap);
	}
}

@media (min-width: 1280px) and (max-width: 1439px) {
	:is(.single, .page) .cp-layout--guia > .cp-col-main {
		--cp-card-pad: 2rem;
		padding: var(--cp-card-pad);
	}
}

/*
 * Sidebar module (`.cp-module`; `.cp-panel` is the mega menu): every block in a sidebar uses this surface,
 * header and list row. The head is the title only, on one line, never cut. A module's
 * "Ver todas →" is a footer row after its last panel row (`.cp-module__more`), the same in
 * every module at every width. No marks, rules or dots in panel headers.
 */
.cp-module,
.cp-col-aside > :is(.cp-dato-curioso, .cp-rail-box, .cp-collection, .cp-juego-facts, .cp-guia-nav),
.cp-dato-curioso--daily {
	--cp-screen: var(--wp--preset--color--screen-sunk);
	--cp-screen-sunk: var(--cp-screen-sunk-deep);
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	background: var(--wp--preset--color--screen);
	box-shadow: none;
}

.cp-module__head,
.cp-col-aside .cp-band__head {
	display: block;
	min-block-size: 0;
	margin-block: 0 0.75rem;
	margin-inline: 0;
	padding: 0;
}

.cp-module__title,
.cp-col-aside :is(.cp-dato-curioso__title, .cp-rail-box__title, .cp-band__title, .cp-juego-facts__title),
.cp-dato-curioso--daily .cp-dato-curioso__title {
	margin-block: 0 0.75rem;
	margin-inline: 0;
	color: var(--cp-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;

	&::before,
	&::after {
		content: none;
		display: none;
	}
}

.cp-col-aside .cp-band__head .cp-band__title,
.cp-module__head > .cp-module__title {
	margin: 0;
}

/* "Ver todas →": a quiet footer row closing the module, ruled off like a panel row,
   the text at the end, the whole 44px row the link. */
.cp-module__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: stretch;
	justify-self: stretch;
	gap: 0.25rem;
	min-block-size: 2.75rem;
	margin-block: 0.75rem -0.5rem;
	margin-inline: 0;
	padding: 0;
	border-block-start: 1px solid var(--cp-line);
	color: var(--cp-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			color: color-mix(in oklch, var(--cp-accent) 70%, oklch(from var(--cp-ink) l c none));
			text-decoration: none;
		}
	}
}

/* One list row inside panels: optional 64×48 thumb or 32px sprite, title, meta. The thumb
   sits at the row's top, not its middle: centred, it moved whenever the text beside it
   grew, and while the HTML streams in a row is painted before its title has arrived. */
.cp-col-aside .cp-cards--compact,
.cp-collection.is-layout-list .cp-collection__list {
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	list-style: none;
}

.cp-col-aside :is(.cp-cards--compact .cp-card, .cp-collection.is-layout-list .cp-tile) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.75rem;
	block-size: auto;
	padding-block: 0.75rem;
	padding-inline: 0;
	border: 0;
	border-block-end: 1px solid var(--cp-line);
	border-radius: 0;
	background: none;
	translate: none;
}

.cp-col-aside :is(.cp-cards--compact > li:last-child .cp-card, .cp-collection.is-layout-list .cp-tile:last-child) {
	border-block-end: 0;
	padding-block-end: 0;
}

.cp-col-aside :is(.cp-cards--compact > li:first-child .cp-card, .cp-collection.is-layout-list .cp-tile:first-child) {
	padding-block-start: 0;
}

.cp-col-aside .cp-cards--compact .cp-card__media {
	inline-size: 64px;
	block-size: 48px;
	aspect-ratio: auto;
	border-radius: var(--cp-radius-sm);

	& img {
		inline-size: 64px;
		block-size: 48px;
		/* lint-allow: important — beats the aspect-ratio core's featured-image block prints on the image */
		aspect-ratio: auto !important;
		object-fit: cover;
		/* lint-allow: important — the 64px aside thumbs never take the card art zoom from motion.css */
		scale: none !important;
	}
}

.cp-collection.is-layout-list .cp-tile__icon {
	inline-size: 32px;
	block-size: 32px;
	object-fit: contain;
	image-rendering: auto;
}

/* Every version of a Juego's crossfading icon gets the app-icon corners. */
.cp-collection.is-layout-list :is(.cp-tile__icon, .cp-art-stack:has(> .cp-tile__icon) > img) {
	border-radius: var(--cp-radius-game-icon);
}

.cp-col-aside :is(.cp-cards--compact .cp-card__title, .cp-collection.is-layout-list .cp-tile__link) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: clip;
	color: var(--cp-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-decoration: none;

	& a {
		color: inherit;
		text-decoration: none;
	}

	&::before {
		content: none;
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.cp-col-aside :is(.cp-cards--compact .cp-card:hover .cp-card__title, .cp-collection.is-layout-list .cp-tile:hover .cp-tile__link) {
		color: var(--cp-accent);
	}
}

.cp-col-aside :is(.cp-cards--compact .cp-card__meta, .cp-collection.is-layout-list .cp-tile__meta) {
	display: block;
	margin-block: 0.125rem 0;
	margin-inline: 0;
	color: var(--cp-ink-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
}

.cp-collection.is-layout-list .cp-tile__body {
	display: block;
	padding: 0;
}

.cp-collection.is-layout-list .cp-tile:not(:has(.cp-tile__icon)),
.cp-col-aside .cp-cards--compact .cp-card:not(:has(.cp-card__media)) {
	grid-template-columns: minmax(0, 1fr);
}

/* «Actualizado» (core Actualizaciones::badge(); owner 2026-10-17): the one marker of a bumped
   item, before its title in every card and row. The shell red with white text (5.6:1 light,
   7.3:1 dark, whatever is under it: the Hoy scrim too); sized by the title it opens. The body
   face (owner: not the display face) after the registry's `exclamation-bubble`, the «!»
   balloon a Pokémon trainer shows on spotting you (owner: no tail), its «!» cut out so the red
   shows through. The word carries the pill's baseline (the icon is centred, outside baseline
   alignment), so the pill lines up with the note it opens in a card's callout.
   Concentric corners (owner: «match the border radii»): the balloon's corners are 7.5 of the
   svg's 24 units and sit 2 units inside its box, and the icon is inset by --pad on its top and
   start, so the pill's radius is the balloon's plus that whole gap (0.675em). */
.cp-actualizado {
	--icon: 1.2em;
	--pad: 0.2em;
	--radius: calc(var(--icon) * 9.5 / 24 + var(--pad));

	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	margin-inline-end: 0.15em;
	padding-block: var(--pad);
	padding-inline: var(--pad) 0.6em;
	border-radius: var(--radius);
	background: var(--cp-shell);
	color: var(--cp-on-shell);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: none;
	vertical-align: middle;
	white-space: nowrap;
}

.cp-actualizado__icon {
	flex: none;
	align-self: center;
	inline-size: var(--icon);
	block-size: var(--icon);
}

/* Tiles and «Lo más visto» rows: the pill and the title's link share one block, so they wrap
   together. A Juego card row's link is a clamped block: the pill sits on its own line above it. */
:is(.cp-tile__title, .cp-lo-mas-visto__title) {
	display: block;
	min-inline-size: 0;
}

.cp-juego-card__text {
	display: grid;
	justify-items: start;
	gap: 0.25rem;
	min-inline-size: 0;

	/* On its own line, sized for the 15px row title. */
	& .cp-actualizado {
		font-size: 0.75rem;
	}
}

/* Dates in the reader's time zone (inc/LocalTime.php): the full date and time of a
   <time data-cp-date> in a top-layer tooltip, on hover with a mouse or on tap. */
/* Above stretched card links (the title link covers the whole card), so hover and tap reach the date. */
time[data-cp-full] {
	position: relative;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	time[data-cp-full] {
		cursor: help;
	}
}

.cp-datetip {
	position: fixed;
	inset-block: 0 auto;
	inset-inline: 0 auto;
	margin: 0;
	max-inline-size: min(22rem, calc(100vw - 1rem));
	padding-block: 0.375rem;
	padding-inline: 0.625rem;
	border: 0;
	border-radius: 8px;
	background: var(--cp-ink);
	box-shadow: 0 4px 16px oklch(0% 0 none / 0.2);
	color: var(--cp-screen);
	font: 500 0.8125rem/1.35 var(--wp--preset--font-family--body);
	letter-spacing: normal;
	text-transform: none;
	pointer-events: none;
	/* A quick fade in and out (opacity only: the script places it with `translate`). */
	opacity: 0;
	transition:
		opacity var(--cp-duration-quick) var(--cp-ease-out),
		display var(--cp-duration-quick) allow-discrete,
		overlay var(--cp-duration-quick) allow-discrete;

	&:popover-open {
		opacity: 1;
	}

	&::first-letter {
		text-transform: uppercase;
	}
}

@starting-style {
	.cp-datetip:popover-open {
		opacity: 0;
	}
}

/*
 * Sticky table headers (core blocks/tabla-guia/sticky.js, owner 2026-10-14): the page's one overlay with a copy of
 * the header rows of the long table being read, pinned below whatever is stuck at the top (`--cp-sticky-top`: the
 * admin bar, the phones' Guía bar). The script sets its box, its colours (copied from the real cells) and its
 * offsets. Fixed, so it moves nothing; z-index 15: above the content and its sticky first columns, below the
 * Guía bar (20), the header (40) and the toast (60); dialogs (index sheet, drawer, lightbox) are in the top layer.
 * Rows inside a table with a pinned header leave room for it when a link jumps to them.
 */
.cp-sticky-head {
	position: fixed;
	inset-block-start: var(--cp-sticky-top, 0px);
	z-index: 15;
	box-sizing: border-box;
	overflow: clip;
	pointer-events: none;
	box-shadow: 0 6px 10px -6px oklch(0% 0 none / 0.28);

	& > table {
		max-inline-size: none;
	}

	@media print {
		display: none;
	}

	@media (forced-colors: active) {
		border-block-end: 1px solid CanvasText;
	}
}

.has-sticky-head :is(tr, td, th) {
	scroll-margin-block-start: calc(var(--cp-sticky-top, 0px) + var(--cp-sticky-head-h, 0px) + 0.5rem);
}

/*
 * Toast (assets/js/toast.js): one message at the bottom centre, above the safe area and any
 * ad anchored to the bottom of the screen (--cp-toast-bottom, measured when it opens). Fixed,
 * so it moves nothing; inverted surface (ink on screen swaps with the theme).
 */
.cp-toast-region {
	position: fixed;
	z-index: 60;
	inset-inline: 0;
	inset-block-end: calc(var(--cp-toast-bottom, 0px) + max(1rem, env(safe-area-inset-bottom)));
	display: grid;
	justify-items: center;
	padding-inline: 1rem;
	pointer-events: none;
}

.cp-toast {
	display: flex;
	align-items: center;
	gap: 0.25rem 0.75rem;
	inline-size: min(100%, 30rem);
	box-sizing: border-box;
	padding-block: 0.5rem;
	padding-inline: 1rem 0.375rem;
	border-radius: var(--cp-radius);
	background: var(--cp-ink);
	box-shadow: 0 8px 24px oklch(0% 0 none / 0.24);
	color: var(--cp-screen);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	line-height: 1.4;
	pointer-events: auto;

	& :focus-visible {
		outline: 2px solid var(--cp-screen);
		outline-offset: 2px;
	}
}

.cp-toast__text {
	flex: 1;
	margin: 0;
	text-wrap: pretty;
}

.cp-toast__action {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding-block: 0;
	padding-inline: 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
	cursor: pointer;

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			text-decoration-thickness: 2px;
		}
	}
}

.cp-toast__close {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			background: color-mix(in oklch, var(--cp-screen) 14%, transparent);
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cp-toast {
		animation: cp-toast-in var(--cp-duration-fast) var(--cp-ease-out);

		&.is-leaving {
			animation: cp-toast-out var(--cp-duration-medium) var(--cp-ease-out) forwards;
		}
	}
}

@keyframes cp-toast-in {
	from {
		opacity: 0;
		translate: 0 0.75rem;
	}
}

@keyframes cp-toast-out {
	to {
		opacity: 0;
		translate: 0 0.5rem;
	}
}

@media (forced-colors: active) {
	.cp-toast {
		border: 1px solid CanvasText;
	}
}