header#capsule-header {
	position: fixed;
	top: 0;
	width: 100%;
}

/* ================
= Fonts
=================== */
/* playfair-display-900 - latin */
@font-face {
	font-display: swap;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/playfair-display-v40-latin-900.woff2') format('woff2');
}

/* playfair-display-900italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 900;
	src: url('../fonts/playfair-display-v40-latin-900italic.woff2') format('woff2');
}

/* source-serif-4-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/source-serif-4-v14-latin-regular.woff2') format('woff2');
}

/* source-serif-4-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/source-serif-4-v14-latin-700.woff2') format('woff2');
}


/* ================
= Root styles
= "div#capsule" acts as "body" or ":root"
=================== */
div#capsule {
	--disp: 'Playfair Display', Georgia, serif;
	--body: 'Source Serif 4', Georgia, serif;
	--max-paragraph-width: 65ch;

	--brown: #1a1714;
	--l-brown: #8b7355;
	--orange: #c8380a;
	--white: #f2ede6;

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

	background-color: var(--white);
	color: var(--brown);
	font-size: 1.25rem;
	font-size: clamp(1rem, 0.8475rem + 0.678vw, 1.25rem);
	font-family: var(--body);
	hanging-punctuation: none !important;
}

div#capsule ::selection {
	color: var(--white);
	background-color: var(--orange);
}

div#capsule ::-moz-selection {
	color: var(--white);
	background-color: var(--orange);
}


/* ================
= Main styles
=================== */
p,
li,
figcaption,
#article-body #article-meta {
	text-wrap: pretty;
}

.col {
	max-width: var(--max-paragraph-width, 75ch);
	margin-inline: auto;
	padding-inline: 1rem;
}

#article-body figure {
	margin: 2rem 0;
}

#article-body figure p:nth-child(1) {
	margin: 0;
	font-size: clamp(1rem, 0.8138rem + 0.8276vw, 1.15rem);
	line-height: 1.25;
	font-weight: 900;
	opacity: 0.8;
}

#article-body figure p:nth-child(2) {
	margin-block: 0.3rem 0.5rem;
	font-size: clamp(0.9rem, 0.7759rem + 0.5517vw, 1rem);
	color: var(--l-brown);
}

#article-body figure img,
#article-body figure .fig-sub,
#article-body figure .fig-duo {
	max-width: min(calc(var(--max-paragraph-width, 75ch) * 1.5), 100%);
	margin-inline: auto;
	padding-inline: 1rem;
}

#article-body figure .fig-sub p {
	display: block;
	color: var(--l-brown);
	font-size: 0.95rem;
	font-weight: 400;
	margin-top: 0.6rem;
}

#article-body figcaption {
	max-width: var(--max-paragraph-width, 75ch);
	margin-inline: auto;
	padding-inline: 1rem;
}

#article-body figure .fig-duo {
	display: flex;
	gap: 1rem;
}

@media (max-width: 650px) {
	#article-body figure .fig-duo {
		flex-direction: column;
	}
}

#article-body figure .fig-duo figure {
	margin: 0;
}

#article-body figure .fig-duo img {
	padding: 0;
}


.monly {
	display: none;
}

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

	.donly {
		display: none;
	}
}

h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]) {
	margin-block: .65em;
	color: var(--orange);
	font-family: var(--disp);
	font-weight: 900;
}

.o {
	color: var(--orange);
}


/* ================
= Header
=================== */
header#cabecera {
	min-height: 250vh;
}

header#cabecera .header-wrap {
	position: sticky;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	top: 0;
	overflow: hidden;
}

header#cabecera .header-graphic {
	position: absolute;
	background-color: var(--brown);
	overflow: hidden;
	height: 100vh;
	height: 100lvh;
	width: 100%;
	top: 0;
}

header#cabecera .header-graphic canvas {
	opacity: 0.5;
}

@media (max-width: 500px) {
	header#cabecera .header-graphic canvas {
		transform: scale(1.75);
	}
}

header#cabecera .header-text {
	font-family: var(--disp);
	color: var(--white);
	width: min(650px, 80vw);
	text-align: center;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}

#header-counter {
	position: relative;
	color: transparent;
}

#header-counter::before {
	content: var(--hcn);
	position: absolute;
	pointer-events: none;
	color: var(--orange);
	right: 0;
	left: auto;
}

header#cabecera .header-text .hpart {
	opacity: 0;
}

header#cabecera h1 {
	color: var(--white);
	font-size: clamp(2.6rem, 1.1333rem + 6.5185vw, 7rem);
	margin-block: 0;
}

header#cabecera .hline {
	height: 2px;
	background-color: var(--orange);
	display: block;
	margin-block: 1rem;
	position: relative;
}

/* header#cabecera .hline::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 961 944'%3E%3Cpath fill='%23c8380a' fill-rule='evenodd' d='M1 469q29-26 85-29L50 278q-5-13 8-13l39 3q9 1 15 10l101 143 213-9-77-399q-5-15 12-13l62 7 223 398 190-6c57 4 99 22 117 51 9 16 10 24 2 40-16 30-59 50-119 54l-190-6-223 398-62 7q-16 3-12-13l77-399-213-9-101 144q-6 7-15 10l-39 3q-13-1-8-14l36-162q-57-3-85-29-2-2 0-5' clip-rule='evenodd'/%3E%3C/svg%3E");
	width: 2rem;
	aspect-ratio: 1;
	display: block;
	position: absolute;
	right: -2rem;
	top: -0.9rem;
	opacity: var(--plane-opacity, 1);
} */

header#cabecera p {
	font-size: clamp(2rem, 1.3333rem + 2.963vw, 4rem);
	font-style: italic;
	line-height: 1.1;
	margin-block: 0;
	letter-spacing: -0.02em;
}

#progressbar {
	position: fixed;
	top: var(--header-height);
	width: 100%;
	height: 1px;
	z-index: 10;
	--progress: 0%;
	background: linear-gradient(90deg, red var(--progress), transparent var(--progress));
}

#scroll-cta {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23f2ede6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 15a7 7 0 0 0 14 0V9A7 7 0 0 0 5 9zm7-9v8'/%3E%3Cpath stroke='%23f2ede6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m15 11-3 3-3-3'/%3E%3C/svg%3E");
	position: absolute;
	top: calc(100svh - 65px);
	left: calc(50% - 20px);
	width: 40px;
	aspect-ratio: 1;
	animation: f 2s ease-in-out infinite;
	opacity: 0.7;
	transition: opacity 2s;
}

#scroll-cta.fadeout {
	opacity: 0;
}

@keyframes f {
	50% {
		transform: translateY(-10px);
	}
}


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

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

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

#article-body a:hover {
	text-decoration: underline;
}

#article-meta {
	display: flex;
	align-items: center;
	gap: 1ch;
	margin-block: 1rem 0.5rem;
}

#article-meta::before {
	content: "";
	width: 3ch;
	height: 2px;
	background-color: var(--orange);
	display: inline-block;
}

#article-meta p {
	font-size: clamp(0.8rem, 0.6364rem + 0.7273vw, 1rem);
	padding-inline: 0;
	display: inline-block;
	padding-inline: 0.2em;
	color: var(--orange);
	text-transform: uppercase;
	letter-spacing: 0.2ch;
}

#article-meta ::selection,
#article-meta p ::selection,
#article-meta p::selection {
	background-color: var(--orange);
	color: var(--white);
}

#article-meta a {
	text-decoration: none;
	color: var(--orange);
}

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

.drop::first-letter {
	font-weight: 900;
	font-family: var(--disp);
	font-size: 5em;
	line-height: 0.7;
	float: left;
	margin-right: 0.085em;
	margin-top: 0.12em;
	color: var(--orange);
}

#article-body>.headline {
	max-width: var(--max-paragraph-width, 75ch);
	margin-inline: auto;
	padding-inline: 1rem;
	margin-top: 3rem;
}

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

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

#article-body iframe {
	aspect-ratio: 16 / 12;
	max-width: 1200px;
	margin-inline: auto;
	display: block;
}

@media (max-width: 745px) {
	#article-body iframe#mapa-bolas {
		aspect-ratio: 16 / 14;
	}
}

#article-body .dark-section {
	background-color: var(--brown);
}

/* ================
= Counter
=================== */
.counter-wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block: 1.8rem;
	padding-block: 1.5rem;
	background: linear-gradient(270deg, #c8380a0d, transparent);
	/* border-left: 3px solid var(--orange); */
	border-radius: 12px;
}

#counter {
	font-size: clamp(2.6rem, 9vw, 6rem);
	font-family: var(--disp);
	color: var(--orange);
	text-align: right;
	min-width: 5.5ch;
	line-height: 1;
	font-variant-numeric: lining-nums;
}

#counter.biggy {
	font-size: clamp(2rem, 1rem + 4.4444vw, 4.6rem);
}

.counter-wrap-text {
	font-weight: 700;
	color: var(--orange);
	line-height: 1.2;
}

/* ================
= Gráficos
=================== */
#g1 {
	height: 650vh;
	margin-block: 2.5rem;
}

#g1 iframe {
	height: 100vh;
	max-width: 1600px;
	position: sticky;
	top: 0;
}

#g1 .g1-captions {
	pointer-events: none;
}

#g1 .cap {
	height: 120vh;
	color: var(--white);
	display: grid;
	place-items: center;
}

#g1 p {
	width: min(560px, 84vw);
	padding: 1.4rem 1.8rem;
	border: 1px solid #2b2b2b;
	box-shadow: 0 18px 50px #00000073;
	border-radius: 14px;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.5);
}

@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
	#g1 p {
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		background-color: #12100e9e;
		border: 1px solid #f2ede64d;
	}
}

#g2 {
	margin-block: 2.5rem;
}


/* ================
= CTA
=================== */
.subs-cta {
	margin-inline: auto;
	max-width: 70ch;
	display: flex;
	align-items: center;
	color: var(--white);
	background-color: var(--brown);
	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(--orange);
	border: 2px solid var(--orange);
	color: var(--white) !important;
	padding: 1rem 1.5rem;
	text-decoration: none
}

.subs-cta a:hover,
.subs-cta a:focus-visible {
	opacity: 0.75;
	text-decoration: none !important;
}


/* ================
= Footer
=================== */
footer {
	background: var(--brown);
	padding: 2rem 1rem;
}

footer a {
	text-decoration: none;
	display: flex;
	justify-content: center;
}

footer a img {
	max-width: 140px;
}

.footerBtn {
	background-color: var(--orange);
	padding: 0.5rem;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 1ch;
	border: 1px solid var(--orange);
	color: var(--white);
	transition: .15s;
}

.footerBtn:hover,
.footerBtn:focus-visible {
	color: var(--white);
	background-color: var(--orange);
	outline: none;
}

.footerBtn svg {
	width: 2ch;
	aspect-ratio: 1;
	fill: var(--orange);
	stroke: var(--white);
	transition: .15s;
}

.footerBtn.footerBtnShare svg path {
	fill: var(--orange);
	transition: .15s;
}

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

.article-end-btns {
	display: flex;
	margin-inline: auto;
	justify-content: flex-start;
	gap: 1rem;
	max-width: var(--max-paragraph-width, 75ch);
	padding-inline: 1rem;
	margin-bottom: 2rem;
	margin-top: 2rem;
	border-top: 1px solid #725a423b;
	padding-top: 2rem;
}


/* ================
= SCROLLY DE BOLAS: "100 millones" → regiones de origen
=================== */
#balls-scrolly {
	position: relative;
}

#balls-sticky {
	position: relative;
	height: 130px;
	overflow: hidden;
	max-width: var(--col);
	margin: 0.4rem auto;
}

#ballsCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

#ballsOutline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

#balls-caption {
	position: absolute;
	top: 12%;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 3;
	pointer-events: none;
	height: 1.4em;
}

#balls-caption .balls-eyebrow {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--earth);
}

#ballsCap2 {
	opacity: 0;
}

.balls-region-lbl {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.34rem 0.8rem;
	border: 1.4px solid;
	border-radius: 999px;
	opacity: 0;
	transition: opacity 0.25s;
	white-space: nowrap;
	pointer-events: none;
}

#balls-hint {
	position: absolute;
	bottom: 2.2rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--f-mono);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--earth);
	z-index: 3;
	transition: opacity 0.3s;
}

.map-ph-lbl {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(242, 237, 230, 0.25);
	z-index: 1;
}

.viz-legend-row {
	padding: 1rem var(--gap) 2rem;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.leg {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--f-mono);
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--earth);
}

.leg-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

#metodologia {
	margin-top: 2rem;
	border: 1px solid #8b735545;
	background-color: #8b735514;
	font-size: 1.1rem;
}

#metodologia summary {
	padding: 0.5rem 1rem;
	display: flex;
	justify-content: space-between;
	list-style: none;
	cursor: pointer;
	font-size: 1.25rem;
}

#metodologia summary::-webkit-details-marker {
	display: none;
}

#metodologia summary::marker {
	content: "";
	display: none;
}

#metodologia summary::after {
	content: "\00FF0B";
	font-weight: bold;
	transition: transform 250ms ease-in-out;
}

#metodologia[open] summary::after {
	transform: rotate(45deg);
}

#metodologia[open] .safarifix {
	padding: 0.5rem 1rem 1rem;
	display: block;
}