/* Puesta en escena original, actualizada sin dependencias JavaScript externas. */
:root {
	--aku-purple: #9300d3;
	--aku-mauve: #efdaf7;
	--aku-ink: #24132d;
	--aku-cookies-browser-entry-x: calc(50vw + 50%);
	--aku-cookies-story-scale: 2.05;
}

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

html, body, p {
	margin: 0;
	padding: 0;
}

html { height: 100%; }

body {
	min-height: 100%;
	overflow-x: hidden;
	background: linear-gradient(180deg, #f7effa, #d8c0e2 100%);
	color: var(--aku-ink);
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

.aku-cookies--animated .aku-cookies__scene {
	position: fixed;
	z-index: 100;
}

.aku-cookies__card {
	inline-size: min(72rem, calc(100vw - 2.5rem));
	margin: clamp(1rem, 3vw, 2rem) auto;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border: 2px solid rgba(147, 0, 211, .25);
	border-radius: 1.5rem;
	background-color: #fff;
	box-shadow: 0 1.25rem 4rem rgba(55, 0, 76, .16);
}

.aku-cookies--animated .aku-cookies__card {
	left: 50%;
	translate: -50% 0;
	margin: 0;
	max-block-size: 90dvh;
	overflow: auto;
}

.aku-cookies__card--intro { transform-origin: 0 0; }

.aku-cookies__card--browser {
	background-color: #fff;
}

.aku-cookies__card--summary {
	border: 10px solid var(--aku-purple);
	background-color: var(--aku-mauve);
}

.aku-cookies__background {
	display: none;
	inset: -512px;
	background: url(../../images/akutangulo-cookies.png) repeat 0 0;
	pointer-events: none;
	will-change: transform;
}

.aku-cookies--animated .aku-cookies__background { display: block; }

.aku-cookies__background--near { z-index: 50; }
.aku-cookies__background--middle { z-index: 49; background-image: url(../../images/cookies.png); }
.aku-cookies__background--far { z-index: 48; background-image: url(../../images/coookies.png); }

.aku-cookies p {
	padding: 10px 5px;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.62;
}

.aku-cookies__featured-text {
	color: #4e3b56;
	font-size: clamp(1.08rem, 1.5vw, 1.35rem);
	line-height: 1.58;
}

.aku-cookies__byline {
	padding: .15rem 0 !important;
	color: #6a5573;
	font-size: clamp(.78rem, 1vw, .95rem) !important;
	line-height: 1.35 !important;
}

.aku-cookies__heading-emphasis {
	font-weight: inherit;
	text-transform: uppercase;
}

.aku-cookies h1,
.aku-cookies h2,
.aku-cookies__scroll-cue {
	color: var(--aku-ink);
	animation: glow 8s ease-in-out infinite;
}

.aku-cookies h1 {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 4rem);
	line-height: 1.05;
}

.aku-cookies h2,
.aku-cookies__scroll-cue {
	font-size: clamp(1.65rem, 3.1vw, 3rem);
	line-height: 1.15;
}

.aku-cookies h2:first-child { margin-top: 0; }

.aku-cookies__accent { color: var(--aku-purple); }

@keyframes glow {
	0%, 100% { text-shadow: 0 0 24px rgba(147, 0, 211, .38); }
	33% { text-shadow: 0 0 26px rgba(218, 0, 142, .4); }
	66% { text-shadow: 0 0 22px rgba(111, 0, 180, .35); }
}

.aku-cookies__progress {
	display: none;
	z-index: 200;
	bottom: 0;
	width: 0;
	height: .65rem;
	background-color: rgb(147, 0, 211);
	box-shadow: 0 -2px 14px rgba(55, 0, 76, .2);
}

.aku-cookies--animated .aku-cookies__progress { display: block; }

.aku-cookies__scrollbar {
	display: none;
	right: 2px;
	top: 0;
	width: 6px;
	height: 50px;
	margin-top: 2px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 3px;
	background: rgba(0, 0, 0, .6);
	z-index: 300;
}

.aku-cookies--animated .aku-cookies__scrollbar { display: block; }

.aku-cookies--animated .aku-cookies__card--intro {
	top: 10%;
}

.aku-cookies--animated .aku-cookies__card--virus {
	top: 20%;
	transform: scale(0) rotate(0deg);
}

.aku-cookies--animated .aku-cookies__card--privacy {
	top: 160%;
	translate: -50% -50%;
}

.aku-cookies--animated .aku-cookies__browser-stage {
	inset-inline: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
}

.aku-cookies--animated .aku-cookies__card--browser {
	display: grid;
	position: absolute;
	top: 10%;
	transform: translateX(var(--aku-cookies-browser-entry-x));
	background-color: rgba(255, 255, 255, .1);
	overflow: hidden;
	z-index: 101;
}

.aku-cookies--animated .aku-cookies__browser-intro,
.aku-cookies--animated .aku-cookies__browser-note { grid-area: 1 / 1; }

.aku-cookies__browser-note {
	align-self: center;
	line-height: 1.35;
}

.aku-cookies__browser-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: clamp(.4rem, 1.2vw, 1rem);
	inline-size: min(72rem, calc(100vw - 2.5rem));
	margin: 1rem auto 2rem;
	padding: 0;
	list-style: none;
}

.aku-cookies--animated .aku-cookies__browser-list {
	position: absolute;
	inset-inline: 4%;
	bottom: 5%;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	inline-size: auto;
	margin: 0;
}

.aku-cookies__browser-list > li { min-width: 0; }

.aku-cookies__browser-link {
	display: block;
	padding: .75rem .4rem;
	border: 2px solid var(--aku-mauve);
	border-radius: .8rem;
	background: #fff;
	box-shadow: 0 .7rem 1.7rem rgba(0, 0, 0, .2);
	color: #5d087e;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.aku-cookies__browser-link:hover,
.aku-cookies__browser-link:focus-visible {
	color: var(--aku-purple);
	text-decoration: underline;
}

.aku-cookies--animated .aku-cookies__card--summary {
	top: 100%;
	border-color: var(--aku-purple);
}

.aku-cookies__card--summary p { font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.aku-cookies__card--summary a { color: #65008f; font-weight: 700; }

.aku-cookies__back-to-top {
	display: block;
	margin: 1rem auto 0;
	padding: .7rem 1.15rem;
	border: 2px solid var(--aku-purple);
	border-radius: 999px;
	background: var(--aku-purple);
	box-shadow: 0 .55rem 1.4rem rgba(55, 0, 76, .2);
	color: #fff;
	font: 700 1rem/1.2 "Open Sans", sans-serif;
	cursor: pointer;
}

.aku-cookies__back-to-top:hover,
.aku-cookies__back-to-top:focus-visible {
	background: #fff;
	color: var(--aku-purple);
}

.aku-cookies__back-to-top:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.aku-cookies__security-note {
	margin-top: .55rem;
	padding: .75rem 1rem;
	border-left: 4px solid var(--aku-purple);
	background: rgba(255, 255, 255, .45);
	text-align: left;
}

.aku-cookies code {
	padding: .08em .3em;
	border-radius: .25em;
	background: #fff;
	color: #62008c;
	font: 700 .88em ui-monospace, Consolas, monospace;
}

.aku-cookies__scroll-label {
	display: block;
	font: 600 .42em/1.2 "Open Sans", sans-serif;
	color: #5c4666;
	text-shadow: none;
}

.aku-cookies__scroll-cue {
	margin: .83em 0;
	font-weight: 700;
}

.aku-cookies__scroll-icons { display: block; }

@media (max-width: 720px) {
	:root {
		--aku-cookies-browser-entry-x: 0vw;
		--aku-cookies-story-scale: 1.45;
	}

	.aku-cookies h1 { font-size: clamp(1.65rem, 7vw, 2rem); overflow-wrap: anywhere; }
	.aku-cookies h2,
	.aku-cookies__scroll-cue { font-size: clamp(1.35rem, 6vw, 1.8rem); }
	.aku-cookies__featured-text { font-size: 1rem; }
	.aku-cookies__card--intro { overflow-x: hidden; }
	.aku-cookies--animated .aku-cookies__card--virus { top: 14%; }
	.aku-cookies--animated .aku-cookies__card--browser { top: 4%; }
	.aku-cookies--animated .aku-cookies__browser-list { inset-inline: 8%; bottom: 3%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
	.aku-cookies__browser-link { padding: .55rem .35rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aku-cookies h1,
	.aku-cookies h2,
	.aku-cookies__scroll-cue,
	.aku-cookies .fa-spin { animation: none !important; }
	.aku-cookies__background { display: none; }
}
