/* Policía Covajón. Source Sans 3 is self-hosted.
   Navy #202f5b is the colour of the previous municipal header. */

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/source-sans-3-400.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/source-sans-3-600.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/source-sans-3-700.woff2") format("woff2");
}

:root {
	--navy: #202f5b;
	--navy-deep: #152042;
	--ink: #1b2433;
	--muted: #5c677a;
	--paper: #f3f5f8;
	--card: #fff;
	--line: #e2e6ee;
	--gold: #c6a15b;
	--text: #1b2433;
	--heading: #152042;
	--accent: #1a4f8b;
	--border: #e2e6ee;
	--footer: #12192e;
	--footer-text: #e7ebf4;
	--pad: 16px;
	--shadow: 0 16px 40px rgba(21, 32, 66, 0.12);
	--max: 1120px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: clip;
	background: var(--paper);
	color: var(--ink);
	font-family: "Source Sans 3", "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--accent);
}

a:hover {
	color: var(--navy);
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -40px;
	z-index: 20;
	background: #fff;
	color: var(--navy);
	padding: 8px 12px;
	border-radius: 6px;
}

.skip-link:focus {
	top: 12px;
}

.wrap {
	width: min(var(--max), calc(100% - (var(--pad) * 2)));
	margin: 0 auto;
}

/* Header. Language switch stays top right at every width. */

body.pc .site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 3px solid var(--navy);
	box-shadow: 0 1px 0 rgba(198, 161, 91, 0.9);
	backdrop-filter: blur(10px);
}

body.pc .header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"brand toggle lang"
		"nav nav nav";
	align-items: center;
	column-gap: 10px;
	width: min(var(--max), calc(100% - (var(--pad) * 2)));
	margin: 0 auto;
	padding: 10px 0 0;
}

.brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--navy);
	text-decoration: none;
}

.brand img {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold);
}

.brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.brand-kicker {
	color: var(--gold);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.brand-name {
	color: var(--navy);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.lang {
	grid-area: lang;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.lang a {
	color: var(--navy);
	text-decoration: none;
	padding: 4px 2px;
}

.lang a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lang .sep {
	color: var(--gold);
	margin: 0;
}

.nav-toggle {
	grid-area: toggle;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--navy);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
}

.nav-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
}

.site-nav {
	grid-area: nav;
	display: none;
	margin: 10px calc(var(--pad) * -1) 0;
	background: #fff;
	border-top: 1px solid var(--line);
}

.site-nav.is-open {
	display: block;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 6px 0 8px;
}

.site-nav a {
	display: block;
	padding: 12px 20px;
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}

.site-nav a[aria-current="page"] {
	background: var(--navy);
	color: #fff;
}

.site-nav a:hover {
	background: #eef2f8;
	color: var(--navy);
}

.site-nav a[aria-current="page"]:hover {
	background: var(--navy-deep);
	color: #fff;
}

/* Hero and home */

.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 280px;
	color: #fff;
	background: var(--navy) center / cover no-repeat;
	isolation: isolate;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 18, 36, 0.28) 0%, rgba(12, 18, 36, 0.62) 42%, rgba(8, 12, 24, 0.9) 100%);
	z-index: -1;
}

.hero-copy {
	width: min(var(--max), calc(100% - (var(--pad) * 2)));
	margin: 0 auto;
	padding: 48px 0 36px;
}

.hero .eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--navy-deep);
	color: var(--gold);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: 0 0 0 1px rgba(198, 161, 91, 0.55);
}

.hero h1,
.page-head h1,
.prose-head h1 {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.hero h1 {
	max-width: 16ch;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
	text-shadow: 0 2px 16px rgba(8, 12, 24, 0.65);
}

.lede {
	max-width: 38rem;
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.125rem;
}

.hero .lede {
	color: #fff;
	text-shadow: 0 1px 10px rgba(8, 12, 24, 0.7);
}

.hero-cta {
	display: inline-block;
	margin-top: 16px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.hero-cta:hover {
	background: var(--gold);
	color: var(--navy-deep);
}

.page {
	padding: 22px 0 56px;
}

.page:has(.home-grid) {
	padding-top: 24px;
}

.home-grid {
	display: grid;
	gap: 22px;
	margin-top: 0;
}

.feature {
	display: grid;
	overflow: hidden;
	background: var(--card);
	border-radius: 18px;
	box-shadow: var(--shadow);
}

.feature img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}

.feature-body,
.card-body,
.panel {
	padding: 16px 18px 18px;
}

.feature h2,
.card h2,
.panel h2 {
	margin: 8px 0;
	font-size: 1.45rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.feature h2 a,
.card h2 a {
	color: var(--heading);
	text-decoration: none;
}

.feature h2 a:hover,
.card h2 a:hover {
	color: var(--accent);
}

.meta {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
}

.excerpt {
	margin: 0;
	color: var(--ink);
}

.chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e7eef8;
	color: var(--navy);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.chip:hover {
	background: var(--navy);
	color: #fff;
}

.section-title {
	margin: 8px 0 0;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
}

.cards {
	display: grid;
	gap: 16px;
}

.card {
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.card img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.card h2 {
	font-size: 1.15rem;
}

.panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.panel + .panel {
	margin-top: 16px;
}

.panel h2 {
	margin-top: 0;
	font-size: 1.15rem;
}

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

.panel li + li {
	margin-top: 8px;
}

.notice {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-left: 4px solid var(--gold);
	border-radius: 12px;
	background: #fff8ec;
}

.notice strong {
	display: block;
	margin-bottom: 4px;
	color: var(--navy-deep);
	letter-spacing: 0.02em;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.filters a {
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--navy);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
}

.filters a[aria-current="page"] {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.page-head,
.prose-head {
	margin-bottom: 18px;
}

.page-head h1,
.prose-head h1 {
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
	color: var(--heading);
}

.crumbs {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 0.92rem;
}

.crumbs a {
	color: var(--muted);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--accent);
}

.article {
	max-width: 46rem;
}

.prose p {
	margin: 0 0 1rem;
}

.figure {
	margin: 0 0 1rem;
}

.figure img {
	display: block;
	width: 100%;
	border-radius: 14px;
}

.figure figcaption {
	margin-top: 6px;
	color: var(--muted);
	font-size: 0.88rem;
}

.empty {
	margin: 0;
	padding: 22px;
	border: 1px dashed var(--line);
	border-radius: 16px;
	background: #fff;
	color: var(--muted);
}

.calendar {
	width: 100%;
	max-width: 420px;
	border-collapse: collapse;
	table-layout: fixed;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
}

.calendar caption {
	margin-bottom: 8px;
	font-weight: 700;
	text-align: left;
}

.calendar th,
.calendar td {
	padding: 0.55rem 0;
	border: 1px solid var(--line);
	text-align: center;
	font-size: 0.95rem;
}

.calendar th {
	background: var(--navy);
	color: #fff;
	font-weight: 700;
}

.calendar td.is-day {
	background: #f7f8fb;
	color: var(--muted);
}

.back {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
}

/* Footer. Shared legal pages use .main-footer and .page-wrapper. */

.site-footer,
.main-footer {
	background: var(--footer);
	color: var(--footer-text);
	padding: 32px 0 18px;
}

.footer-brand img {
	display: block;
	width: min(360px, 100%);
	height: auto;
	margin: 0 auto;
}

.copyright-bar {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	text-align: center;
}

.footer-game,
.footer-legal {
	margin: 0 0 8px;
}

.site-footer a,
.main-footer a {
	color: #fff;
}

.sep {
	margin: 0 6px;
}

.lang-bar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding: 10px var(--pad);
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.lang-link {
	color: #fff;
	text-decoration: none;
}

.lang-link.is-current {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lang-sep {
	color: var(--gold);
}

.lang-link img {
	display: inline-block;
	width: 20px;
	height: 14px;
	margin-right: 4px;
	vertical-align: -2px;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

body:not(.pc) {
	display: flex;
	flex-direction: column;
	background: #fff;
}

.page-wrapper {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.main-header {
	background: #fff;
	border-bottom: 3px solid var(--navy);
	box-shadow: 0 1px 0 var(--gold);
}

.header-inner.legal-only,
.main-header .header-inner {
	display: flex;
	justify-content: center;
	padding: 18px var(--pad);
}

.ce-logo img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold);
}

.breadcrumb-section {
	background: var(--navy);
	padding: 28px var(--pad);
}

.breadcrumb-title h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	text-align: center;
	text-wrap: balance;
}

.legal-page {
	flex: 1 0 auto;
	padding: 28px 0 56px;
}

.container {
	width: min(1140px, calc(100% - (var(--pad) * 2)));
	margin: 0 auto;
}

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

@media (min-width: 768px) {
	:root {
		--pad: 24px;
	}

	.brand img {
		width: 52px;
		height: 52px;
	}

	.brand-name {
		font-size: 1.2rem;
	}

	.hero {
		min-height: 380px;
	}

	.page:has(.home-grid) {
		padding-top: 40px;
	}

	.feature img {
		height: 280px;
	}

	.cards {
		grid-template-columns: 1fr 1fr;
	}

	.site-nav ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 8px;
	}

	.figure.side {
		width: min(280px, 46%);
	}

	.figure.side.left {
		float: left;
		margin: 0.25rem 1.1rem 0.6rem 0;
	}

	.figure.side.right {
		float: right;
		margin: 0.25rem 0 0.6rem 1.1rem;
	}

	.prose::after {
		content: "";
		display: block;
		clear: both;
	}
}

@media (min-width: 960px) {
	body.pc .header-inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "brand nav lang";
		min-height: 78px;
		padding: 0;
	}

	.nav-toggle {
		display: none;
	}

	.site-nav,
	.site-nav.is-open {
		display: block;
		margin: 0;
		background: transparent;
		border-top: 0;
	}

	.site-nav ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		padding: 0 0 0 12px;
	}

	.site-nav a {
		padding: 8px 12px;
		border-radius: 999px;
	}

	.hero {
		min-height: 460px;
	}

	.home-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}

	.feature,
	.news-block {
		grid-column: 1;
	}

	.aside {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.feature {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.feature img {
		height: 100%;
		min-height: 280px;
	}

	.cards {
		grid-template-columns: 1fr 1fr;
	}

	.feature-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 24px 26px;
	}
}

@media (min-width: 1280px) {
	.cards {
		grid-template-columns: 1fr 1fr;
	}

	.hero {
		min-height: 500px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto;
	}
}