/* ================
= Fonts
=================== */
/* zilla-slab-highlight-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Zilla Slab Highlight';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/zilla-slab-highlight-v21-latin-regular.woff2') format('woff2');
}

/* DepartureMono-Regular */
@font-face {
	font-display: swap;
	font-family: 'DepartureMono-Regular';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/DepartureMono-Regular.woff2') format('woff2');
}

/* ================
= Root styles
= "div#capsule" acts as "body" or ":root"
=================== */
div#capsule {
	--mono: 'DepartureMono-Regular', Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
	--highlight: 'Zilla Slab Highlight', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
	--max-paragraph-width: 65ch;

	--yellow: #EFE35C;
	--g-100: #CFD0C5;
	--g-200: #666663;
	--g-300: #404040;
	--g-400: #343434;
	--g-500: #212121;
	--g-600: #171717;

	--lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 63 70'%3E%3Cpath fill='%23171717' d='M21 14h7v14h-7zM0 56h7v14H0zm7-14h7v14H7zm7-14h7v14h-7zM28 0h7v14h-7zm14 14h7v14h-7zM21 56h7v14h-7zm7-14h7v14h-7zm7-14h7v14h-7zM49 0h7v14h-7zm-7 56h7v14h-7zm7-14h7v14h-7zm7-14h7v14h-7zM0 14h7v14H0zM7 0h7v14H7z'/%3E%3C/svg%3E");

	--focus-outline-color: var(--yellow);

	background-color: var(--g-500);
	color: var(--g-100);
	font-size: 1.25rem;
	font-size: clamp(1rem, 0.8475rem + 0.678vw, 1.25rem);
}

div#capsule ::selection {
	color: var(--g-500);
	background-color: var(--yellow);
}

div#capsule ::-moz-selection {
	color: var(--g-500);
	background-color: var(--yellow);
}

/* ================
= Main styles
=================== */
.highlight {
	font-family: var(--highlight);
	color: var(--yellow);
	letter-spacing: unset;
	font-weight: 400;
}

p,
li,
figcaption,
#article-body #article-meta {
	max-width: var(--max-paragraph-width, 75ch);
	text-wrap: pretty;
}

.monly {
	display: none;
}

@media (max-width: 650px) {
	.monly {
		display: block;
	}

	.donly {
		display: none;
	}
}

/* ================
= Header
=================== */
header#cabecera {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding-inline: 1rem;
	text-align: center;
	min-height: 50svh;
	min-height: clamp(25rem, 11.7647rem + 58.8235vw, 35rem);
	margin-bottom: 3rem;
	padding-block: calc(var(--header-height) + 2rem) 5rem;
}

header#cabecera::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/header_bg-min.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
	mix-blend-mode: plus-lighter;
	opacity: 0.25;
	pointer-events: none;
}

header#cabecera * {
	z-index: 1;
}

header#cabecera h1 {
	font-size: 2.75rem;
	font-size: clamp(2rem, 1.4762rem + 2.3278vw, 3.5rem);
	max-width: 29ch;
	line-height: 1.2;
	text-wrap-style: balance;
}

header#cabecera p {
	font-size: 1.3rem;
	font-size: clamp(1.15rem, 0.6833rem + 2.0741vw, 1.85rem);
	text-shadow: 0 0 10px #000000cc;
	text-wrap-style: balance;
}

#ticket {
	width: 550px;
	height: auto;
	position: absolute;
	bottom: -50px;
	transform: rotate(-3deg);
	margin-left: clamp(16.875rem, -20.2384rem + 77.3196vw, 45rem);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	filter: drop-shadow(0 0 8px #00000025);
}

@media (max-width: 1200px) {
	#ticket {
		max-width: 460px;
	}
}

@media (max-width: 768px) {
	#ticket {
		max-width: 320px;
		max-width: clamp(20rem, 17.2426rem + 12.2549vw, 23.125rem);
		margin-left: 0;
	}
}

@media (max-width: 968px) {
	header#cabecera {
		margin-bottom: 6rem;
	}
}

/* ================
= Article body
=================== */
#article-body>p,
#article-body>h2,
#article-body>header {
	margin-inline: auto;
	padding-inline: 1rem;
}

#article-body strong {
	color: var(--yellow);
}

#article-body a {
	color: var(--yellow);
}

#article-body a:hover {
	background-color: var(--yellow);
	color: var(--g-500);
}

#article-meta {
	display: grid;
	justify-items: start;
	gap: 0.3em;
	line-height: 1.3;
}

#article-meta ::selection,
#article-meta p ::selection,
#article-meta p::selection {
	background-color: var(--g-600);
	color: var(--yellow);
}

.author,
.date {
	background-color: var(--yellow);
	display: inline-block;
	padding-inline: 0.2em;
	color: var(--g-500);
}

.author {
	font-weight: 700;
}

#article-meta .author a {
	text-decoration: none;
	color: var(--g-500);
}

#article-meta .author a:hover {
	text-decoration: underline;
}

#article-body>h2 {
	text-align: center;
	text-wrap-style: balance;
	font-size: 2rem;
	font-size: clamp(1.3rem, -0.1897rem + 6.6207vw, 2.5rem);
	max-width: 50ch;
	margin-block: 3rem 2rem;
	line-height: 1.2;
}

#article-body>img,
#article-body>picture {
	width: 100ch;
	max-width: 100%;
	margin-inline: auto;
}

p.img-title.highlight {
	text-align: center;
	margin-block: 1.5rem 0.5rem;
}

.mapimg {
	mix-blend-mode: difference;
	filter: contrast(0.96);
}

/* ================
= CTA
=================== */
.subs-cta {
	margin-inline: auto;
	max-width: 70ch;
	display: flex;
	align-items: center;
	background-color: var(--g-600);
	padding: 2rem;
	gap: 2rem;
	justify-content: space-around;
	font-size: 1.5rem;
	margin-block: 2rem;
}

@media (max-width: 530px) {
	.subs-cta {
		flex-direction: column;
		text-align: center;
	}
}

body.logged-in .subs-cta {
	display: none;
}

.subs-cta p {
	max-width: 100%;
	margin: 0;
}

.subs-cta a {
	background-color: var(--yellow);
	border: 2px solid var(--yellow);
	color: var(--g-500);
	padding: 1rem 1.5rem;
	text-decoration: none;
	color: var(--g-500) !important;
}

.subs-cta a:hover,
.subs-cta a:focus-visible {
	opacity: 0.75;
}

/* ================
= Sponsor
=================== */
.sponsor {
	padding: 2rem;
}

.sponsor img {
	width: 260px !important;
	height: auto !important;
}

.sponsor p {
	font-size: 1rem;
	margin: 0;
	text-align: center;
}

/* ================
= Footer
=================== */
.prefooter {
	margin-inline: auto;
	max-width: 42ch;
	margin-block: 3rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1ex;
	padding-inline: 1rem;
	font-style: italic;
}

.prefooter::before,
.prefooter::after {
	content: "—";
}

.prefooter p {
	/* font-size: 1rem; */
	margin: 0;
}

footer {
	background-color: var(--g-600);
	padding: 1rem;
	margin-top: 3rem;
}

.footer-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: 1024px;
	margin-inline: auto;
}

@media (max-width: 680px) {
	.footer-wrap {
		flex-direction: column;
		gap: 1rem;
		margin-block: 2rem;
	}
}

#footerEOM img {
	width: 200px;
}

.footerBtn {
	background-color: transparent;
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	gap: 1ch;
	border: 2px solid var(--yellow);
	color: var(--yellow);
	transition: .15s;
}

.footerBtn:hover,
.footerBtn:focus-visible {
	color: var(--g-500);
	background-color: var(--yellow);
	outline: none;
}

@media (max-width: 450px) {
	.footerBtn {
		padding: 1rem;
	}
}

.footerBtn svg {
	width: 2ch;
	aspect-ratio: 1;
	fill: var(--yellow);
}

.footerBtn.footerBtnShare svg path {
	fill: var(--yellow);
}

.footerBtn:hover svg,
.footerBtn:focus-visible svg,
.footerBtn.footerBtnShare:hover svg path,
.footerBtn.footerBtnShare:focus-visible svg path {
	fill: var(--g-500);
	stroke: var(--g-500);
}

.article-end-btns {
	display: flex;
	margin-inline: auto;
	justify-content: space-evenly;
	gap: 0.5rem;
	max-width: 1024px;
	margin-top: 3rem;
}

/* ================
= Panels
=================== */

.panel {
	display: grid;
	place-items: center;
	margin-block: clamp(1.5rem, -0.3621rem + 8.2759vw, 3rem) clamp(1.5rem, 0.2586rem + 5.5172vw, 2.5rem);
}

pre {
	font-family: var(--mono);
	max-width: 100%;
	line-height: 1.27;
	margin-block: 0;
	padding: 0.5em 0;
	font-size: clamp(0.36rem, -0.0245rem + 1.7091vw, 1.3rem);
}

pre span {
	animation: blink-animation 1.75s infinite;
}

@keyframes blink-animation {
	0%, 50% {
		color: var(--yellow);
	}

	51%, 100% {
		color: var(--g-100);
	}
}

/* ================
= Timeline
=================== */
.crono {
	max-width: 120ch;
	margin-inline: auto;
	display: flex;
	align-items: center;
	margin-block: 3rem;
}

.timeline {
	flex: 1;
	padding-inline: 1rem 3rem;
	width: 430px;
	max-width: 100%;
}

.crono .text {
	flex: 1.5;
}

.crono .text p {
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (max-width: 980px) {
	.crono {
		flex-direction: column;
		margin-block: 3rem -0.5rem;
	}

	.timeline {
		padding-inline: 1rem;
		margin-bottom: 1.5rem;
	}
}


/* ================
= Imagen doble
=================== */
.double-img {
	display: flex;
	align-items: flex-start;
	max-width: 120ch;
	margin-inline: auto;
	margin-block: 2rem;
	gap: 1rem;
	padding-inline: 1rem;
}

@media (max-width: 630px) {
	.double-img {
		flex-direction: column;
	}
}

.double-img>* {
	flex: 1;
}

.double-img figure {
	margin: 0;
	max-width: 100%;
}

.double-img img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
	mix-blend-mode: lighten;
}

.double-img figcaption {
	font-size: 1rem;
	opacity: 0.6;
}

/* ================
= Anexo
=================== */
.gallery {
	display: flex;
	max-width: 2560px;
	background-color: var(--g-600);
	margin-inline: auto;
	overflow: hidden;
	margin-block: 2rem;
}

@media (max-width: 1025px) {
	.gallery {
		flex-direction: column;
	}
}

.gallery>* {
	flex: 1;
	max-width: 50%;
}

@media (max-width: 1025px) {
	.gallery>* {
		max-width: 100%;
	}
}

.gallery img {
	mix-blend-mode: lighten;
}

.sidetext {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sidetext p {
	margin-bottom: 0;
}

/* ================
= Gallery
=================== */
.slides {
	position: relative;
	aspect-ratio: 3 / 2;
	cursor: pointer;
	max-width: 100ch;
	margin-inline: auto;
	margin-block: 2rem;
}

.slides figure {
	margin-inline: auto;
	position: relative;
}

.slides figure img {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 3 / 2;
	width: 100%;
	height: 100%;
	transition: 85ms;
}

.slides.lightbox::after {
	opacity: 0;
}

.slides figcaption {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--g-600);
	padding: 0.3em 1em;
	font-size: 0.8em;
	line-height: 1;
	max-width: calc(100% - 2rem);
}

.slide-control {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: var(--g-600);
	width: auto;
	padding: 0 0.5rem;
	z-index: 1;
}

.slide-control::before {
	content: "";
	width: 0;
	height: 0;
	border-bottom: 1.8rem solid var(--g-600);
	border-left: 0.85rem solid transparent;
	position: absolute;
	left: -0.8rem;
	bottom: 0;
}

.slide-control button {
	background-color: transparent;
	border: none;
	font-family: var(--mono);
	font-size: 0;
}

.slide-control button::before {
	content: "o";
	font-size: 1.7rem;
	line-height: 0.9;
}

.slide-control button.active {
	margin-top: 0.15rem;
}

.slide-control button.active::before {
	content: "\00D7";
}

.slides.lightbox {
	position: fixed;
	inset: 0;
	max-width: 100%;
	height: 100%;
	aspect-ratio: unset;
	background: var(--g-600);
	display: grid;
	place-items: center;
	padding: 2rem;
	z-index: 900;
	margin-block: 0;
}

@media (max-width: 850px) {
	.slides.lightbox {
		padding: 0;
	}
}

.slides.lightbox figure {
	cursor: default;
}

.slides.lightbox::before {
	content: "\00D7";
	position: absolute;
	/* top: calc(var(--header-height) + 1rem); */
	top: 1rem;
	right: 1rem;
	font-size: 2.5rem;
	z-index: 1;
	background: #0000002b;
	width: 0.7em;
	height: 0.7em;
	border-radius: 99vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slides.lightbox .blaze-container {
	/* max-height: calc(100svh - (max(var(--header-height), 20px) * 2)); */
	max-height: 100svh;
	height: auto;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.blaze-slider {
	--slides-to-show: 1;
	--slide-gap: 20px;
	direction: ltr;
}

.blaze-container {
	position: relative;
	height: 100%;
}

.blaze-track-container {
	overflow: hidden;
	height: 100%;
}

.blaze-track {
	will-change: transform;
	touch-action: pan-y;
	display: flex;
	gap: var(--slide-gap);
	--slide-width: calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));
	box-sizing: border-box;
	height: 100%;
}

.blaze-track>* {
	box-sizing: border-box;
	width: var(--slide-width);
	flex-shrink: 0;
}