/* ========================================================================== */
/*                             1. Custom Properties                           */
/* ========================================================================== */

:root {
	--main-fonts: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	--main-sizes: 3.2rem;
	--main-texts: 1.6rem;
	--main-lines: thin solid rgb(230, 230, 230);
	--main-round: 0.4rem;
	--color-back:  linear-gradient(90deg, rgba(25, 56, 100, 1) 0%, rgba(33, 58, 98, 1) 25%, rgba(25, 56, 100, 1) 50%, rgba(33, 58, 98, 1) 75%, rgba(25, 56, 100, 1) 100%);
	--color-main: 025, 055, 100;
	--color-dark: 050, 050, 050;
	--color-half: 100, 100, 100;
	--color-lite: 150, 150, 150;
	--color-soft: 250, 250, 250;
}


/* ========================================================================== */
/*                               2. Document Base                             */
/* ========================================================================== */

/* Reset agresivo de backgrounds — previene fondos heredados del UA */
*,
*::before,
*::after {
	background: 0% 0%;
}

html, body {
	overscroll-behavior: none;
}

html {
	height: 100%;
	font-size: 0.6945vw;
	scroll-behavior: smooth;
	overflow-y: scroll;
	cursor: default;
}

body {
	height: 100%;
	color: rgba(var(--color-dark), 1);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

main {
	gap: calc(var(--main-sizes) * 4);
	flex-direction: column;
	display: flex;
}

main > *:not(cover, quiz):first-child {
	padding-top: calc(var(--main-sizes) * 4);
}


/* ========================================================================== */
/*                               3. Structure                                 */
/* ========================================================================== */

header, footer {
	width: 100%;
	padding: calc(var(--main-sizes) * 0.5) calc(var(--main-sizes) * 1);
	font: 400 calc(var(--main-texts) * 0.9)/1 var(--main-fonts);
	gap: calc(var(--main-sizes) * 2);
	justify-content: space-between;
	align-items: center;
	display: flex;
}

header {
	-webkit-backdrop-filter: blur(0.1rem);
	backdrop-filter: blur(0.1rem);
	transition: background 0.25s ease-in-out;
	font-weight: 600;
	position: fixed;
	z-index: 9999;
	filter: none;
	top: 0;
}

header .isBTN {
	margin: 0;
}

section {
	padding: calc(var(--main-sizes) * 3) 0;
	background: rgba(var(--block-back), 1);
	color: rgba(var(--block-text), 1);
	gap: calc(var(--main-sizes) * 3);
	flex-direction: column;
	display: flex;
}

section[data-line] {
	border-block: var(--main-lines);
}

section[data-full] > maps {
	width: 100%;
}

section[data-full] > stats {
	padding-bottom: calc(var(--main-sizes) * 3);
}

footer {
	padding: calc(var(--main-sizes) * 3) calc(var(--main-sizes) * 2) calc(var(--main-sizes) * 5);
	position: relative;
}

/* ---------------------------------------- */
/*  Structure Variants                       */
/* ---------------------------------------- */

[data-alts] header {
	color: rgba(var(--color-soft), 1);
}

[data-alts] header .isBTN,
[data-back] header .isBTN {
	background: rgba(var(--color-soft), 1);
	color: rgba(var(--color-main), 1);
}

[data-alts] header .isF01,
[data-alts] header .isF02,
[data-back] header .isF01,
[data-back] header .isF02 {
	fill: rgba(var(--color-soft), 1);
}

[data-back] header {
	filter: drop-shadow(0 0 calc(var(--main-sizes) * 0.05) rgba(0, 0, 0, 0.5));
	background: rgba(var(--color-main), 1);
	color: rgba(var(--color-soft), 1);
}


/* ========================================================================== */
/*                               4. Typography                                */
/* ========================================================================== */

h1, h2, h3, h4, h5, h6,
p, dl, small, hr {
	width: 100%;
	margin-bottom: calc(var(--main-sizes) * 0.75);
	font-family: var(--main-fonts);
	margin-inline: auto;
}

h1    { font-size: calc(var(--main-texts) * 5.000); line-height: 0.90; }
h2    { font-size: calc(var(--main-texts) * 4.000); line-height: 0.90; }
h3    { font-size: calc(var(--main-texts) * 3.000); line-height: 1.00; }
h4    { font-size: calc(var(--main-texts) * 2.000); line-height: 1.10; }
h5    { font-size: calc(var(--main-texts) * 1.500); line-height: 1.50; }
h6    { font-size: calc(var(--main-texts) * 1.100); line-height: 1.50; font-weight: 500; }
p, dd { font-size: calc(var(--main-texts) * 1.100); line-height: 1.50; }
small { font-size: calc(var(--main-texts) * 0.800); line-height: 1.50; }

/* p es block por defecto; small se fuerza a block para uso en layout */
p     { color: rgba(var(--color-half), 1); }
small { color: rgba(var(--color-half), 1); display: block; }

tag {
	width: auto !important;
	font: 400 calc(var(--main-texts) * 0.9)/1 var(--main-fonts);
	padding: calc(var(--main-sizes) * 0.3) calc(var(--main-sizes) * 0.5);
	-webkit-backdrop-filter: blur(calc(var(--main-sizes) * 0.1));
	backdrop-filter: blur(calc(var(--main-sizes) * 0.1));
	border-radius: calc(var(--main-sizes) * 2);
	background: rgba(var(--color-main), 0.2);
	color: rgba(var(--color-main), 1);
	margin-bottom: var(--main-sizes);
	display: inline-block;
	text-align: center;
}

strong { font-weight: 500; }

hr {
	height: 1px;
	border: none;
	border-bottom: thin dashed rgba(0, 0, 0, 0.25);
	margin: calc(var(--main-sizes) * 2);
}


/* ========================================================================== */
/*                                5. Navigation                               */
/* ========================================================================== */

/* nav > ul es horizontal (row); li y sub-ul son verticales (column) */
nav > ul {
	gap: var(--main-sizes);
	display: flex;
}

nav > ul > li,
nav > ul > li > ul,
footer > div {
	gap: calc(var(--main-sizes) * 0.5);
	flex-direction: column;
	display: flex;
}

header > nav > ul > li:last-child {
	display: none;
}

nav li:not(.current-menu-item) > a:not(:hover, [href="#"]) {
	opacity: 0.75;
}

/* ---------------------------------------- */
/*  Footer Navigation                        */
/* ---------------------------------------- */

footer > div {
	width: 25%;
}

footer > nav {
	width: 75%;
}

footer > div > ul {
	gap: calc(var(--main-sizes) * 0.25);
	margin-top: auto;
	display: flex;
}

footer > div > ul > li > a {
	width: 100%;
	height: 100%;
	display: inline-block;
}

footer > nav > ul {
	gap: calc(var(--main-sizes) * 2);
}

footer > nav > ul > li {
	width: 100%;
}

footer > nav > ul > li > a {
	margin-bottom: calc(var(--main-sizes) * 0.25);
	font-size: calc(var(--main-texts) * 1.5);
	line-height: calc(var(--main-texts) * 1.5);
	color: rgba(var(--color-dark), 1);
}

/* ---------------------------------------- */
/*  Legal Bar                               */
/* ---------------------------------------- */

legal {
	width: 100%;
	padding: var(--main-sizes) calc(var(--main-sizes) * 2);
	justify-content: space-between;
	border-top: var(--main-lines);
	position: absolute;
	display: flex;
	bottom: 0;
	left: 0;
}

legal > * {
	width: auto;
	margin: 0 !important;
}


/* ========================================================================== */
/*                              6. Section Blocks                             */
/* ========================================================================== */

/* Padding base y overflow para todos los bloques de contenido */
plans, media, mixed, lines,
lists, info, maps, stats, texts {
	padding-inline: calc(var(--main-sizes) * 2);
	position: relative;
	overflow: hidden;
}

/* ---------------------------------------- */
/*  6.1 Texts                               */
/* ---------------------------------------- */

texts {
	width: 100%;
	gap: calc(var(--main-sizes) * 2);
	display: flex;
	z-index: 100;
}

texts > item {
	width: 100%;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	display: flex;
}

texts > item > stats {
	padding: 0;
}

texts > item > .isBTN {
	margin-top: auto;
}

texts > item > form {
	margin-top: var(--main-sizes);
	max-width: calc(var(--main-sizes) * 12);
	width: 90%;
}

texts > item > form,
texts > item > form > item * {
	border-radius: var(--main-sizes);
}

texts > item > form > item > output {
	text-align: center;
}

texts > item > form > item > button {
	line-height: 1.3rem;
	margin: calc(var(--main-sizes) * 0.15) !important;
	position: absolute;
	right: 0.8rem;
}

texts > item > form.form-users {
	padding: 0;
	gap: 0;
}

texts > item > form.form-users > item > button {
	right: 0;
}

texts > item > img {
	margin-bottom: var(--main-sizes);
}

texts > item > p > a {
	text-decoration: underline;
}

texts[data-line] {
	gap: calc(var(--main-sizes) * 3);
}

texts[data-line] > item:not(:last-child)::after {
	width: 1px;
	height: 100%;
	right: calc(var(--main-sizes) * -1.5);
	background: rgba(0, 0, 0, 0.1);
	position: absolute;
	content: '';
	top: 0;
}

texts > item > status {
	width: 100%;
	border-radius: calc(var(--main-sizes) * 0.25);
	background: rgba(var(--color-soft), 1);
	padding: calc(var(--main-sizes) * 0.5);
	gap: calc(var(--main-sizes) * 0.5);
	flex-direction: column;
	display: flex;
}

texts > item > status > bar {
	width: 100%;
	border-radius: calc(var(--main-sizes) * 0.5);
	height: calc(var(--main-sizes) * 0.4);
	background: rgba(255, 255, 255, 1);
	border: var(--main-lines);
	position: relative;
	overflow: hidden;
}

texts > item > status > bar::before {
	width: var(--block-size);
	height: 100%;
	background: rgba(var(--color-main), 1);
	position: absolute;
	content: '';
}

texts > item > status > * {
	width: 100%;
	justify-content: space-between;
	margin-bottom: 0;
	display: flex;
}

/* ---------------------------------------- */
/*  6.2 Cover                               */
/* ---------------------------------------- */

cover {
	width: 100%;
	background-color: rgba(var(--block-back), 1);
	justify-content: center;
	flex-direction: column;
	align-items: center;
	position: relative;
	text-align: center;
	flex-wrap: wrap;
	display: flex;
}

cover::before {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.05) 100%);
	position: absolute;
	content: '';
	z-index: 1;
	top: 0;
}

cover > texts {
	max-width: calc(var(--main-sizes) * 36);
	padding: calc(var(--main-sizes) * 4);
	align-items: center;
}

cover > *:not(texts) {
	position: absolute;
	z-index: 0;
}

cover > texts > item {
	display: unset;
}

cover > texts > item > * {
	color: rgba(var(--block-text), 1);
}

cover > texts > item > p {
	max-width: calc(var(--main-sizes) * 24);
}

cover > texts > item > tag {
	background: rgba(var(--block-text), 0.1);
}

cover > texts > item img {
	max-width: 54rem;
	margin: 0 auto;
}

cover > texts > form {
	scroll-margin-top: calc(var(--main-sizes) * 10);
	background: rgba(var(--color-soft), 1);
	max-width: calc(var(--main-sizes) * 12);
	padding: var(--main-sizes);
	border: var(--main-lines);
}

cover > texts > form > item > output {
	text-align: center;
}

cover > texts > form > item > p {
	font-size: calc(var(--main-texts) * 2.5);
	color: rgba(var(--color-dark), 1);
}

cover[data-full]       { aspect-ratio: 16 / 9; }
cover[data-quiz] {
	background: url(../assets/@0x/IMG_001.jpg) no-repeat center center / cover;
}

cover[data-quiz]:before {
	display: none;
}

cover[data-quiz] > texts { max-width: calc(var(--main-sizes) * 26); }

cover[data-form] > texts {
	gap: calc(var(--main-sizes) * 4);
	text-align: left;
	max-width: 100%;
}

/* ---------------------------------------- */
/*  6.3 Mixed                               */
/* ---------------------------------------- */

mixed {
	flex-direction: column;
	gap: var(--main-sizes);
	display: flex;
}

mixed > * {
	padding: 0;
}

mixed > media > items {
	align-items: center;
}

/* ---------------------------------------- */
/*  6.4 Lists                               */
/* ---------------------------------------- */

lists {
	column-gap: var(--main-sizes);
	columns: var(--base-cols);
}

lists > item {
	font: 400 var(--main-texts)/1.5em var(--main-fonts);
	gap: calc(var(--main-sizes) * 0.5);
	color: rgba(var(--color-lite), 1);
	transition: all 0.25s ease-in-out;
	border-bottom: var(--main-lines);
	justify-content: space-between;
	display: flex;
}

lists > item[data-alts] {
	background: rgba(var(--color-soft), 1);
}

lists > item > * {
	min-width: calc(var(--main-sizes) * 5);
	padding: calc(var(--main-sizes) * 0.5) calc(var(--main-sizes) * 0.75);
	white-space: nowrap;
	text-align: left;
}

lists > item > *:nth-child(3) {
	width: 100%;
}

lists > item:not(:first-child):hover {
	background: rgba(var(--color-soft), 1);
}

lists > item > div > a {
	border-radius: calc(var(--main-sizes) * 0.2);
	margin: calc(var(--main-sizes) * -0.3) 0;
	font-size: calc(var(--main-texts) * 0.8);
	padding: calc(var(--main-sizes) * 0.3);
	text-transform: uppercase;
	font-weight: 700;
}

lists > item > div > a[data-track] {
	background: rgba(var(--color-main), 0.1);
	color: rgba(var(--color-main), 1);
}

lists > item > div > a[data-track]:hover {
	background: rgba(var(--color-main), 1);
	color: rgba(var(--color-soft), 1);
}

lists > item > div > tag {
	min-width: calc(var(--main-sizes) * 2.5);
	padding: calc(var(--main-sizes) * 0.2) calc(var(--main-sizes) * 0.3);
	font: 900 calc(var(--main-texts) * 0.6)/1 var(--main-fonts);
	border-radius: calc(var(--main-sizes) * 0.2);
	background: rgba(var(--block-text), 0.1);
	color: rgba(var(--block-text), 1);
	text-transform: uppercase;
}

/* ---------------------------------------- */
/*  6.5 Stats                               */
/* ---------------------------------------- */

stats {
	width: 100%;
	gap: calc(var(--main-sizes) * 2);
	justify-content: space-between;
	align-items: flex-start;
	display: flex;
}

stats > item {
	width: 100%;
}

stats > item > * {
	margin-bottom: calc(var(--main-sizes) * 0.25);
}

stats > item > span {
	font: 400 calc(var(--main-texts) * 6.1)/1 var(--main-fonts);
	display: inline-block;
	margin-top: -0.4rem;
}

stats > item > span > em {
	font-variant: normal;
	font-style: normal;
	font-weight: 700;
	font-size: 25%;
}

stats > item > p {
	font-size: calc(var(--main-texts) * 0.9);
}

stats > item > p:first-of-type {
	color: rgba(var(--color-dark), 1);
	font-size: calc(var(--main-texts) * 1.25);
	font-weight: 500;
	opacity: 1;
}

/* ---------------------------------------- */
/*  6.6 Scroll (Marquee)                    */
/* ---------------------------------------- */

scroll {
	overflow: hidden;
}

scroll > items {
	-webkit-animation: scroll-left 15s linear infinite;
	animation: scroll-left 15s linear infinite;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
	display: flex;
}

scroll > items:nth-child(even) {
	-webkit-animation-name: scroll-right;
	animation-name: scroll-right;
}

scroll > items > item,
scroll > items > item > div {
	gap: calc(var(--main-sizes) * 0.5);
	flex-direction: column;
	display: flex;
}

scroll > items > item {
	flex: 0 0 calc(var(--main-sizes) * 12);
	margin: calc(var(--main-sizes) * 0.5);
	padding: var(--main-sizes);
	border: var(--main-lines);
}

scroll > items > item > div {
	flex-direction: row;
}

scroll > items > item > div > img {
	border-radius: 50%;
	aspect-ratio: 1;
	width: 4.8rem;
}

scroll > items > item > div > p {
	font-weight: 600;
}

scroll > items > item > div > p > span {
	font-size: calc(var(--main-texts) * 0.8);
	font-weight: 400;
	display: block;
}

@keyframes scroll-left {
	to { transform: translateX(calc(-100% / 3)); }
}

@keyframes scroll-right {
	from { transform: translateX(calc(-100% / 3)); }
	to   { transform: translateX(0); }
}

/* ---------------------------------------- */
/*  6.7 Lines (Timeline)                    */
/* ---------------------------------------- */

lines,
lines > items,
lines > items > item {
	width: 100%;
	display: flex;
}

lines::before {
	width: 100%;
	height: 1px;
	background: rgba(var(--color-lite), 0.25);
	position: absolute;
	top: 9.2rem; /* Valor fijo ajustado al diseño */
	content: '';
	left: 0;
}

lines > items > item {
	flex-direction: column;
}

lines > items > item > span {
	font: 400 calc(var(--main-texts) * 3)/1 var(--main-fonts);
	position: relative;
	margin-bottom: 0;
	display: block;
}

lines > items > item > span::after {
	width: calc(var(--main-sizes) * 0.2);
	box-shadow: 0 0 0 0.4rem rgba(var(--color-main), 0.25);
	background: rgba(var(--color-main), 1);
	bottom: calc(var(--main-sizes) * -1.5);
	position: absolute;
	border-radius: 50%;
	aspect-ratio: 1;
	display: block;
	content: '';
}

lines > items > item > small {
	display: inline-block;
	min-height: 4.8rem;
}

lines > prev,
lines > next {
	top: 4.7rem;
}

/* ---------------------------------------- */
/*  6.8 Maps                                */
/* ---------------------------------------- */

maps {
	width: calc(100% - calc(var(--main-sizes) * 4));
	background: rgba(var(--color-lite), 1);
	display: inline-block;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
}

.getPopup .mapboxgl-popup-content {
	all: unset;
}

.isMarker {
	cursor: pointer;
	width: calc(var(--main-sizes) * 0.75);
	transition: transform 0.2s ease;
	aspect-ratio: 1 / 1.5;
}

.isMarker:hover {
	transform: scale(1.1);
}

.isPopup {
	min-width: calc(var(--main-sizes) * 10);
	padding: calc(var(--main-sizes) * 0.75);
	background: rgba(var(--color-soft), 1);
	border-radius: var(--main-round);
	border: var(--main-lines);
	align-items: flex-start;
	flex-direction: column;
	box-shadow: none;
	overflow: hidden;
	display: flex;
}

.isPopup > h6 {
	line-height: 1;
}

.isPopup > a {
	font: 600 calc(var(--main-texts) * 0.8)/1 var(--main-fonts);
	border-bottom: thin solid currentColor;
	text-transform: uppercase;
	display: inline-block;
	margin-top: auto;
}

/* ---------------------------------------- */
/*  6.9 Plans & Zoom                        */
/* ---------------------------------------- */

plans {
	background: rgba(var(--color-soft), 1);
	border: var(--main-lines);
	cursor: zoom-in;
	padding: 0;
}

plans > picture {
	mix-blend-mode: multiply;
	display: block;
}

plans > text {
	bottom: calc(var(--main-sizes) * 1.5);
	left: calc(var(--main-sizes) * 1.5);
	position: absolute;
}

plans > text > * {
	margin-bottom: calc(var(--main-sizes) * 0.25);
	opacity: 1;
}

plans > text > ul {
	font: 400 calc(var(--main-texts) * 0.8)/1 var(--main-fonts);
	gap: calc(var(--main-sizes) * 0.5);
	color: rgba(var(--color-half), 1);
	display: flex;
}

plans > text > ul > li:not(:last-child)::after {
	width: 1px;
	height: 100%;
	margin-left: calc(var(--main-sizes) * 0.5);
	background: rgba(var(--color-lite), 0.5);
	vertical-align: middle;
	display: inline-block;
	content: '';
}

plans.isHidden {
	cursor: none;
}

.isZoom {
	border: calc(var(--main-sizes) * 0.2) solid rgba(var(--color-soft), 1);
	box-shadow: 0 0 var(--main-sizes) rgba(0, 0, 0, 0.25);
	transition: opacity 0.3s ease, transform 0.3s ease;
	background-color: rgba(var(--color-soft), 1);
	pointer-events: none;
	transform: scale(0);
	position: absolute;
	border-radius: 50%;
	z-index: 100;
	opacity: 0;
}

.isZoom.isActive {
	transform: scale(1);
	opacity: 1;
}

/* ---------------------------------------- */
/*  6.10 Media (Grid Variants)              */
/* ---------------------------------------- */

media,
media > items {
	width: 100%;
	gap: calc(var(--main-sizes) * 0.5);
	align-items: flex-start;
	position: relative;
	display: grid;
}

media[data-get="1"] > items {
	gap: calc(var(--main-sizes) * 0.5);
}

media[data-get="1"] > items > item > div {
	width: 100%;
	gap: calc(var(--main-sizes) * 0.5);
	align-items: flex-start;
	position: relative;
	display: grid;
}

media[data-get="1"] > items > item > div.isText {
	padding-bottom: calc(var(--main-sizes) * 2);
}

media > items > item {
	width: 100%;
	height: 100%;
	gap: calc(var(--main-sizes) * 0.5);
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	display: flex;
}

media[data-get="2"] > items,
media[data-get="4"] > items {
	gap: calc(var(--main-sizes) * 0.5);
}

media[data-get="1"] > items > item > * > h5 {
	justify-content: space-between;
	align-items: flex-end;
	display: flex;
}

media[data-get="1"] > items > item > * > h5 > span {
	font-size: 80%;
	opacity: 0.5;
}

media > items > item > * {
	margin-bottom: 0;
}

media > items > item > picture,
media > items > item > picture > img {
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: cover;
	max-width: unset;
	display: block;
}

media > items > item > play {
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent);
	transition: opacity 0.25s ease-in-out;
	pointer-events: auto;
	position: absolute;
	opacity: 1;
}

media > items > item > play::before {
	width: calc(var(--main-sizes) * 3);
	background: rgba(0, 0, 0, 0.5) url(../assets/SVG/SVG_PLY.svg?1000) 0 0 / 200% 100%;
	transform: translate(-50%, -50%);
	-webkit-backdrop-filter: blur(0.4rem);
	backdrop-filter: blur(0.4rem);
	aspect-ratio: 1;
	border-radius: 50%;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	content: '';
	left: 50%;
	top: 50%;
}

media > items > item > play[data-playing="true"] {
	pointer-events: none;
	opacity: 0;
}

media > items > item > play[data-playing="true"]::before {
	background-position: 100% 100%;
}

media:hover > items > item > play[data-playing="true"] {
	opacity: 1;
}

/* Swiper overrides */
media.swiper {
	padding-right: calc(var(--main-sizes) * 2);
	padding-left: calc(var(--main-sizes) * 2);
}

media > items.swiper-wrapper {
	gap: unset;
}

media > items.swiper-wrapper > item {
	gap: calc(var(--main-sizes) * 0.5);
	display: flex;
}

/* Variante v1.0 — Columnas uniformes */
media[data-max="1"] > items { grid-template-columns: repeat(1, 1fr); }
media[data-max="2"] > items { grid-template-columns: repeat(2, 1fr); }
media[data-max="3"] > items { grid-template-columns: repeat(3, 1fr); }
media[data-max="4"] > items { grid-template-columns: repeat(4, 1fr); }
media[data-max="5"] > items { grid-template-columns: repeat(5, 1fr); }
media[data-max="6"] > items { grid-template-columns: repeat(6, 1fr); }

/* Variante v2.0 — Collage dinámico */
media[data-get="2"] > items {
	grid-template-columns: repeat(48, 1fr);
}

media[data-get="2"] > items > item:is(:nth-child(18n+1),  :nth-child(18n+2),  :nth-child(18n+3),  :nth-child(18n+10), :nth-child(18n+11), :nth-child(18n+12)) { grid-column: span 16; aspect-ratio: 4 / 3; }
media[data-get="2"] > items > item:is(:nth-child(18n+5),  :nth-child(18n+6),  :nth-child(18n+13), :nth-child(18n+16))                                         { grid-column: span 21; aspect-ratio: 7 / 4; }
media[data-get="2"] > items > item:is(:nth-child(18n+4),  :nth-child(18n+7),  :nth-child(18n+14), :nth-child(18n+15))                                         { grid-column: span 27; aspect-ratio: 9 / 4; }
media[data-get="2"] > items > item:is(:nth-child(18n+8),  :nth-child(18n+9),  :nth-child(18n+17), :nth-child(18n+18))                                         { grid-column: span 24; aspect-ratio: 2 / 1; }

/* Variante v3.0 — Grid areas nombradas */
media[data-get="3"] > items {
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-template-areas:
		"a a b b c c"
		"a a b b c c"
		"d d b b e e"
		"d d f f e e"
		"d d f f g g"
		"d d f f g g";
	aspect-ratio: 4 / 3;
}

media[data-get="3"] > items > item              { height: 100%; }
media[data-get="3"] > items > item:nth-child(1) { grid-area: a; }
media[data-get="3"] > items > item:nth-child(2) { grid-area: b; }
media[data-get="3"] > items > item:nth-child(3) { grid-area: c; }
media[data-get="3"] > items > item:nth-child(4) { grid-area: d; }
media[data-get="3"] > items > item:nth-child(5) { grid-area: f; }
media[data-get="3"] > items > item:nth-child(6) { grid-area: e; }
media[data-get="3"] > items > item:nth-child(7) { grid-area: g; }

/* Variante v4.0 — Alternancia grande/pequeño */
media[data-get="4"] > items {
	grid-template-columns: repeat(48, 1fr);
}

media[data-get="4"] > items > item:is(:nth-child(4n+1)) { grid-column: span 32; aspect-ratio: 8 / 3; }
media[data-get="4"] > items > item:is(:nth-child(4n+2)) { grid-column: span 16; aspect-ratio: 4 / 3; }
media[data-get="4"] > items > item:is(:nth-child(4n+3)) { grid-column: span 16; aspect-ratio: 4 / 3; }
media[data-get="4"] > items > item:is(:nth-child(4n))   { grid-column: span 32; aspect-ratio: 8 / 3; }

/* ---------------------------------------- */
/*  6.11 Accordion (dt/dd)                  */
/* ---------------------------------------- */

dt, dd, dt::after {
	transition: all 0.25s ease-in-out;
	position: relative;
}

dl {
	width: calc(100% - calc(var(--main-sizes) * 2));
	max-width: calc(var(--main-sizes) * 30);
	border-bottom: var(--main-lines);
	margin-bottom: 0;
}

dt, dd {
	padding: calc(var(--main-sizes) * 0.75) var(--main-sizes);
}

dt {
	font: 500 calc(var(--main-texts) * 1.2)/1 var(--main-fonts);
	color: rgba(var(--color-dark), 1);
	border-top: var(--main-lines);
	cursor: pointer;
}

dt::after {
	content: '';
	width: calc(var(--main-sizes) * 0.75);
	height: calc(var(--main-sizes) * 0.75);
	background: url(../assets/SVG/SVG_ARW.svg) center/cover no-repeat;
	transform: translate(-50%, -50%);
	position: absolute;
	right: 0;
	top: 50%;
}

dd {
	overflow: hidden;
	padding-block: 0;
	max-height: 0;
	margin: 0;
}

dd,
dt:hover,
dt.isCurrent,
dt.isCurrent + dd {
	background: rgba(var(--color-soft), 1);
}

dt.isCurrent::after {
	transform: translate(-50%, -50%) rotate(180deg);
}

dt.isCurrent + dd {
	padding-bottom: var(--main-sizes);
}

/* ---------------------------------------- */
/*  6.12 Quiz                               */
/* ---------------------------------------- */

quiz,
quiz > items,
quiz > items > item {
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	display: flex;
}

quiz > items > item > data {
	width: 100%;
	border-radius: calc(var(--main-sizes) * 0.25);
	background: rgba(var(--color-soft), 0.9);
	-webkit-backdrop-filter: blur(var(--main-sizes));
	backdrop-filter: blur(var(--main-sizes));
	max-width: calc(var(--main-sizes) * 32);
	min-height: calc(var(--main-sizes) * 18);
	padding: calc(var(--main-sizes) * 2);
	gap: var(--main-sizes);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	display: flex;
}

quiz > items > item > data > * {
	width: 100%;
	gap: calc(var(--main-sizes) * 0.25);
	justify-content: center;
	flex-direction: column;
	align-items: center;
	display: flex;
	margin: 0;
}

quiz > items > item > data > *:not(cards) {
	max-width: calc(var(--main-sizes) * 20);
}

quiz > items > item > data > nav {
	flex-direction: row;
}

quiz > items > item > data > status,
quiz > items > item > data > status > bar {
	width: calc(100% - var(--main-sizes));
	height: calc(var(--main-sizes) * 0.25);
	margin: calc(var(--main-sizes) * 0.5);
	background: rgba(var(--color-half), 0.1);
	transition: all 0.25s ease-in-out;
	align-items: flex-start;
	border-radius: 1.6rem;
	position: absolute;
	overflow: hidden;
	bottom: 0;
}

quiz > items > item > data > status > bar {
	width: 5%;
	margin: 0;
	background: rgba(var(--color-main), 1);
}

quiz > items > item > data > items > * {
	width: 100%;
	max-width: calc(var(--main-sizes) * 12);
	position: relative;
}

quiz > items > item > data > items > item:not(.isNot) {
	width: 100%;
	padding: calc(var(--main-sizes) * 0.4) calc(var(--main-sizes) * 0.5);
	border: thin solid rgba(var(--color-half), 0.1);
	background: rgba(var(--color-soft), 1);
	border-radius: var(--main-round);
	position: relative;
	cursor: pointer;
}

quiz > items > item > data > items > item:not(.isNot),
quiz > items > item > data > items > item:not(.isNot) > * {
	transition: all 0.25s ease-in-out;
}

quiz > items > item > data > items > item:not(.isNot) > label {
	font-size: calc(var(--main-texts) * 0.9);
	gap: calc(var(--main-sizes) * 0.5);
	flex-direction: row;
}

quiz > items > item > data > items > item:not(.isNot) > input {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	left: 0;
	top: 0;
}

quiz > items > item > data > items > item:not(.isNot) > label > span {
	--base-sizes: 2.4rem;
	width: var(--base-sizes);
	height: var(--base-sizes);
	border-radius: calc(var(--base-sizes) * 0.2);
	font-size: calc(var(--main-texts) * 0.8);
	background: rgba(0, 0, 0, 0.1);
	line-height: var(--base-sizes);
	text-align: center;
	font-weight: 600;
	display: block;
}

quiz > items > item > data > items > item:not(.isNot).isActive {
	background: rgba(var(--color-main), 1);
}

quiz > items > item > data > items > item:not(.isNot).isActive > * {
	color: rgba(var(--color-soft), 1);
}

quiz > items > item > data > items > item:not(.isNot, .isActive):hover {
	border-color: rgba(var(--color-main), 0.25);
	background: rgba(var(--color-main), 0.05);
}

quiz > items > item > data > cards {
	gap: var(--main-sizes);
	flex-direction: row;
}

quiz > items > item > data > cards > item {
	max-width: 25%;
}

quiz > items > item > data > cards > item > * {
	margin-bottom: calc(var(--main-sizes) * 0.5);
}

.smartquiz-error-message {
	font: 400 calc(var(--main-texts) * 0.9)/1 var(--main-fonts);
	padding: calc(var(--main-sizes) * 0.4) calc(var(--main-sizes) * 0.8);
	border-radius: calc(var(--main-sizes) * 0.1) !important;
	transform: translateX(-50%);
	background: rgba(220, 53, 69, 1);
	color: rgba(255, 255, 255, 1);
	position: fixed;
	z-index: 10000;
	left: 50%;
	top: 20px;
}

/* ---------------------------------------- */
/*  6.13 Info                               */
/* ---------------------------------------- */

info {
	grid-template-columns: repeat(12, 1fr);
	gap: calc(var(--main-sizes) * 2);
	display: grid;
	margin: 0;
}

info > item {
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--main-sizes);
	display: grid;
	margin: 0;
}

info > item:nth-child(1) { grid-column: span 5; }
info > item:nth-child(2) { grid-column: span 7; }

info > item > * {
	grid-column: span 1;
}

info > item > *:first-child {
	grid-column: span 2;
}

info > item > form {
	padding: 0;
}

info > item > form > item > button {
	min-width: calc(var(--main-sizes) * 2.5);
	text-align: center;
}

info > item > maps {
	width: 100%;
	border-radius: calc(var(--main-sizes) * 0.25);
	background: rgba(var(--color-soft), 1);
	padding: var(--main-sizes);
	aspect-ratio: unset;
	overflow: hidden;
}

info > item > maps > boxes {
	max-width: calc(var(--main-sizes) * 10);
}


/* ========================================================================== */
/*                             7. General Elements                            */
/* ========================================================================== */

img,
video,
picture {
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
	display: block;
}

picture {
	height: 100%;
}

picture img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0.5rem;
}

boxes {
	width: 100%;
	border-radius: calc(var(--main-sizes) * 0.25);
	background: rgba(255, 255, 255, 1);
	padding: var(--main-sizes);
	border: var(--main-lines);
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	display: flex;
	z-index: 999;
}

boxes > * {
	margin-bottom: calc(var(--main-sizes) * 0.5);
}

boxes > h5 {
	margin-bottom: calc(var(--main-sizes) * 0.25);
}

boxes > i {
	background-color: rgba(var(--color-main), 1);
	margin-bottom: calc(var(--main-sizes) * 0.75);
	border-radius: calc(var(--main-sizes) * 3);
	width: calc(var(--main-sizes) * 2);
	position: relative;
}

boxes > a {
	font: 600 calc(var(--main-texts) * 0.8)/1 var(--main-fonts);
	border-bottom: thin solid currentColor;
	text-transform: uppercase;
	display: inline-block;
	margin-top: auto;
}


/* ========================================================================== */
/*                                  8. Forms                                  */
/* ========================================================================== */

/* Estado de error en campos */

.isW {
	color: rgba(234, 65, 42, 1);
}
.isW > * {
	background-color: rgba(254, 245, 244, 1);
	border-color: currentColor;
}

/* form y form > item separados: column solo en el contenedor padre */
form {
	width: 100%;
	gap: calc(var(--main-sizes) * 0.65);
	align-items: center;
	flex-direction: column;
	-webkit-backdrop-filter: blur(calc(var(--main-sizes) * 0.1));
	backdrop-filter: blur(calc(var(--main-sizes) * 0.1));
	border-radius: calc(var(--main-sizes) * 0.25);
	padding-inline: calc(var(--main-sizes) * 2);
	background: rgba(var(--color-soft), 0.1);
	margin: 0 auto;
	display: flex;
}

form > item {
	width: 100%;
	gap: calc(var(--main-sizes) * 0.65);
	align-items: center;
	display: flex;
}

legend {
	display: none;
}

input, select, textarea, fieldset, output,
button, .isBTN {
	all: unset;
	font: 400 var(--main-texts)/2rem var(--main-fonts);
	gap: var(--main-sizes);
	text-align: left;
	display: flex;
}

input, select, textarea,
button, .isBTN {
	padding: calc(var(--main-sizes) * 0.4) calc(var(--main-sizes) * 0.6);
	width: calc(100% - calc(var(--main-sizes) * 1.25));
	background: rgba(var(--color-soft), 1);
	border-radius: var(--main-round);
	border: var(--main-lines);
}

output {
	width: 100%;
	font-size: calc(var(--main-texts) * 0.9);
	letter-spacing: 0.05em;
	display: inline-block;
	text-align: right;
	font-weight: 500;
}

label {
	width: 100%;
	font: 500 calc(var(--main-texts) * 0.9)/1.5 var(--main-fonts);
	gap: calc(var(--main-sizes) * 0.25);
	color: rgba(var(--color-dark), 1);
	flex-direction: column;
	display: flex;
}

label.isAlt,
fieldset > label {
	flex-direction: row;
	align-items: center;
}

select {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right calc(var(--main-sizes) * 0.75) center;
	cursor: pointer;
}

input:focus {
	border: thin solid rgba(var(--color-main), 0.5);
	outline: none;
}

input:not([type="checkbox"]):not([type="radio"]),
select, textarea,
button, .isBTN {
	-webkit-appearance: none;
	appearance: none;
}

/* Checkboxes & Radios personalizados */
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width:  calc(var(--main-sizes) * 0.5);
	height: calc(var(--main-sizes) * 0.5);
	border: thin solid rgba(var(--color-lite), 1);
	background: rgba(var(--color-soft), 1);
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
	background:   rgba(var(--color-main), 1);
	border-color: rgba(var(--color-main), 1);
}

input[type="radio"]:checked::after,
input[type="checkbox"]:checked::after {
	width:  30%;
	height: 45%;
	border: 0.3rem solid rgba(var(--color-soft), 1);
	transform: translate(-50%, -50%) rotate(45deg);
	position: absolute;
	border-left: none;
	border-top: none;
	content: '';
	left: 50%;
	top: 50%;
}

input[type="radio"]:checked::after {
	width: 45%;
	background: rgba(var(--color-soft), 1);
	border-radius: 50%;
	border: none;
}

/* Elimina spinners en Firefox */
input[type="number"] {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}


/* ========================================================================== */
/*                            9. Buttons & Controls                           */
/* ========================================================================== */

button, .isBTN {
	width: auto;
	background: rgba(var(--color-main), 1);
	font-size: calc(var(--main-texts) * 0.8);
	color: rgba(var(--color-soft), 0.9);
	transition: all 0.25s ease-in-out;
	text-transform: uppercase;
	display: inline-block;
	font-weight: 700;
	cursor: pointer;
	border: none;
}

.isBTN.isA,
button.isA {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZhZmFmYSIgZD0iTTMwLjU0LDE0LjkzbC05LjU4LTkuNThjLS42Mi0uNjItMS42Mi0uNjItMi4yMywwcy0uNjIsMS42MiwwLDIuMjNsNi44OSw2Ljg5SDIuNThjLS44NywwLTEuNTguNzEtMS41OCwxLjU4cy43MSwxLjU4LDEuNTgsMS41OGgyMy4wM2wtNi44OSw2Ljg5Yy0uNjIuNjItLjYyLDEuNjIsMCwyLjIzLjMxLjMxLjcxLjQ2LDEuMTIuNDZzLjgxLS4xNSwxLjEyLS40Nmw5LjU4LTkuNThjLjMtLjMuNDYtLjcuNDYtMS4xMnMtLjE3LS44Mi0uNDYtMS4xMloiLz48L3N2Zz4=");
	background-size: calc(var(--main-sizes) * 0.5);
	padding-right: calc(var(--main-sizes) * 1.5);
	background-position: right 1.2rem center;
	background-repeat: no-repeat;
}

button:hover, .isBTN:hover {
	background-position: right 0.8rem center;
	background-color: rgba(14, 38, 73, 1);
	color: rgba(var(--color-soft), 1);
}

.isBTN.isS,
button.isS {
	border-radius: calc(var(--main-sizes) * 0.2);
	padding: calc(var(--main-sizes) * 0.3);
}

.isRSV {
	background: rgba(var(--color-main), 0.1);
	color: rgba(var(--color-main), 0.5);
}


/* ========================================================================== */
/*                          10. Navigation Controls                           */
/* ========================================================================== */

prev, next {
	width: calc(var(--main-sizes) * 1.5);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.55 23.92l-6.52-6.52c-.77-.77-.77-2.03 0-2.8l6.52-6.52' fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/></svg>") no-repeat center center / 50% rgba(var(--color-main), 0.25);
	transition: all 0.25s ease-in-out;
	position: absolute;
	border-radius: 50%;
	aspect-ratio: 1;
	cursor: pointer;
	z-index: 999;
	top: 50%;
}

prev:hover,
next:hover {
	background-color: rgba(var(--color-main), 1);
}

prev {
	left: calc(var(--main-sizes) * 1.2) !important; /* Sobreescribe posicionamiento de Swiper.js */
	transform: translateY(-50%);
}

next {
	right: calc(var(--main-sizes) * 1.2) !important; /* Sobreescribe posicionamiento de Swiper.js */
	transform: translateY(-50%) rotate(180deg);
}

dots {
	bottom: var(--main-sizes) !important; /* Sobreescribe posicionamiento de Swiper.js */
	gap: calc(var(--main-sizes) * 0.5);
	justify-content: center;
	position: absolute;
	display: flex;
	z-index: 999;
}

dots > span {
	width: calc(var(--main-sizes) * 0.25);
	height: calc(var(--main-sizes) * 0.25);
	background: rgba(var(--color-soft), 1);
	transition: all 0.25s ease-in-out;
	display: inline-block;
	border-radius: 1rem;
	opacity: 0.5;
}

dots > span.isActive {
	width: var(--main-sizes);
	opacity: 1;
}

.swiper-button-disabled {
	cursor: not-allowed;
	opacity: 0;
}


/* ========================================================================== */
/*                               11. Icon Sets                                */
/* ========================================================================== */

i, .isSCL {
	width: var(--main-sizes);
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	aspect-ratio: 1;
}

.isBND {
	width: calc(var(--main-sizes) * 6);
}

.isBND .isF01 { fill: rgba(var(--color-main), 1); transition: fill 0.25s ease-in-out; }
.isBND .isF02 { fill: rgba(var(--color-dark), 1); transition: fill 0.25s ease-in-out; }

.isWSP {
	width: 4rem;
	background: url(../assets/SVG/SVG_WSP.svg?700) no-repeat center center / 90% 90% rgba(37, 211, 102, 1);
	bottom: calc(var(--main-sizes) * 0.75);
	right: calc(var(--main-sizes) * 0.75);
	display: inline-block;
	border-radius: 50%;
	position: fixed;
	aspect-ratio: 1;
	z-index: 999;
}

.isSCL { background-image: url(../assets/SVG/SVG_SCL.svg?700); }
.isS00 { background-image: url(../assets/SVG/SVG_S00.svg?700); }
.isS01 { background-image: url(../assets/SVG/SVG_S01.svg?700); }

.isP31 { background-position: 0%   100%; }
.isP32 { background-position: 50%  100%; }
.isP33 { background-position: 100% 100%; }

.isP61 { background-position: 0%   100%; }
.isP62 { background-position: 20%  100%; }
.isP63 { background-position: 40%  100%; }
.isP64 { background-position: 60%  100%; }
.isP65 { background-position: 80%  100%; }
.isP66 { background-position: 100% 100%; }

.isP01 { background-position: 0%      100%; }
.isP02 { background-position: 11.11%  100%; }
.isP03 { background-position: 22.22%  100%; }
.isP04 { background-position: 33.33%  100%; }
.isP05 { background-position: 44.44%  100%; }
.isP06 { background-position: 55.56%  100%; }
.isP07 { background-position: 66.67%  100%; }
.isP08 { background-position: 77.78%  100%; }
.isP09 { background-position: 88.89%  100%; }
.isP10 { background-position: 100%    100%; }

/* ========================================================================== */
/*                           12. Utilities & Misc                             */
/* ========================================================================== */

[data-full] {
	width: 100%;
	padding: 0;
}

[data-base] {
	margin-bottom: calc(var(--main-sizes) * -2);
}

[data-cover] {
	background: url(../assets/@0x/IMG_000.jpg);
	aspect-ratio: 16 / 9;
}

[data-grid] {
	background-image: url(../assets/@0x/IMG_GRD.png);
	background-size: calc(var(--main-sizes) * 2);
	padding-top: calc(var(--main-sizes) * 2);
}

/* Fade-out lateral para scroll y lines */
lines, scroll {
	position: relative;
}

lines::after,
scroll::after,
scroll::before {
	width: 25vw;
	pointer-events: none;
	position: absolute;
	content: '';
	z-index: 2;
	bottom: 0;
	top: 0;
}

scroll::before {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
	left: 0;
}

lines::after,
scroll::after {
	background: linear-gradient(270deg, rgba(255, 255, 255, 1), transparent);
	right: 0;
}

/* Elimina margen inferior del último hijo en cualquier contenedor */
*:last-child {
	margin-bottom: 0;
}

[data-mail] {
	background: url(../assets/@0x/IMG_000.jpg) no-repeat center center / cover;
	color: rgba(var(--color-soft), 1.0);
}


/* ========================================================================== */
/*                              13. Transitions                               */
/* ========================================================================== */

a, button {
	transition: all 0.25s ease-in-out;
}


/* ========================================================================== */
/*                              14. Burger Menu                               */
/* ========================================================================== */

/* Siempre oculto en desktop — !important bloquea cualquier toggle JS */
menu {
	width: var(--main-sizes);
	height: 1.2rem;
	transform: translateY(-75%);
	right: var(--main-sizes);
	position: absolute;
	cursor: pointer;
	display: none !important;
	padding: 0;
	margin: 0;
	top: 50%;
}

menu > span {
	width: var(--main-sizes);
	background: currentColor;
	position: absolute;
	transition: .25s;
	height: 0.2rem;
	opacity: 1;
	left: 0;
}

menu > span:nth-child(1) { top:   0%; }
menu > span:nth-child(2),
menu > span:nth-child(3) { top:  50%; }
menu > span:nth-child(4) { top: 100%; }

/* nth-child(1) y (4) comparten el mismo estado abierto */
.isOpen menu span:nth-child(1),
.isOpen menu span:nth-child(4) {
	width: 0%;
	left: 50%;
	top: 0.8rem;
}

.isOpen menu span:nth-child(2) { transform: rotate( 45deg); }
.isOpen menu span:nth-child(3) { transform: rotate(-45deg); }


/* ========================================================================== */
/*                              15. Maintenance                               */
/* ========================================================================== */

maintenance {
	width: 100%;
	background: url(../assets/@0x/IMG_000.jpg);
	--color-main: 255, 255, 255;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 100vh;		/* Fallback para navegadores sin soporte dvh */
	min-height: 100dvh;
	display: flex;
	gap: 1.6rem;
}

maintenance * {
	color: rgba(var(--color-main), 1);
}

maintenance .isBND {
	background: url(../assets/SVG/SVG_ALT.svg);
}

maintenance > p {
	max-width: 24rem;
}

maintenance > footer {
	padding: var(--main-sizes);
	justify-content: center;
	align-items: center;
	position: fixed;
	display: flex;
	bottom: 0;
}

maintenance > footer > ul {
	filter: brightness(0) invert(1);
}

maintenance > footer > small {
	width: auto;
	margin: 0;
}

/* ========================================================================== */
/*                               16. Dev Tools                                */
/* ========================================================================== */

.isDev * {
	box-shadow: inset 0 0 0 0.05rem rgba(255, 29, 255, 1) !important;
}

.isDev wrapper {
	background-color: rgba(255, 0, 0, 0.1);
}

.isDev header::before,
.isDev header::after {
	width: 0.1rem;
	height: 100vh;
	background: rgba(255, 29, 255, 1);
	position: fixed;
	z-index: 99999;
	content: '';
	top: 0;
}

.isDev header::before { left:  calc(var(--main-sizes) * 2); }
.isDev header::after  { right: calc(var(--main-sizes) * 2); }