:root {
	--turquesa: #00adb5;
	--turquesa-oscuro: #008b8b;
	--amarillo: #ffd300;
	--coral: #ff6b6b;
	--r-sm: 14px;
	--r-md: 22px;
	--r-lg: 32px;
	--r-pill: 999px;
}
/* MODO CLARO (default) */
html[data-theme='light'] {
	--bg: #fef9e7;
	--bg-2: #fbf3d6;
	--surface: #ffffff;
	--tinta: #1f252e;
	--texto: #535c68;
	--texto-2: #8a93a0;
	--borde: rgba(31, 37, 46, 0.12);
	--borde-fuerte: #1f252e;
}
/* MODO OSCURO */
html[data-theme='dark'] {
	--bg: #14181f;
	--bg-2: #1b2029;
	--surface: #232936;
	--tinta: #fef9e7;
	--texto: #b8c0cc;
	--texto-2: #7e8694;
	--borde: rgba(254, 249, 231, 0.14);
	--borde-fuerte: #fef9e7;
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Inter', system-ui, sans-serif;
	background: var(--bg);
	color: var(--texto);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	transition:
		background 0.3s ease,
		color 0.3s ease;
}

h1,
h2,
h3,
h4 {
	color: var(--tinta);
	margin: 0;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
h1 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
}
h2,
h3,
h4 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
}
p {
	margin: 0;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}
::selection {
	background: var(--amarillo);
	color: #1f252e;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
@media (max-width: 640px) {
	.container {
		padding: 0 16px;
	}
}

/* ===== Botones ===== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	padding: 14px 24px;
	border-radius: var(--r-pill);
	transition:
		transform 0.18s ease,
		box-shadow 0.25s ease,
		background 0.2s ease;
	border: 2px solid transparent;
}
.btn-primary {
	background: var(--amarillo);
	color: #1f252e;
	box-shadow: 0 10px 24px -8px rgba(255, 211, 0, 0.55);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -8px rgba(255, 211, 0, 0.7);
}
.btn-ghost {
	background: transparent;
	color: var(--tinta);
	border-color: var(--tinta);
}
.btn-ghost:hover {
	background: var(--tinta);
	color: var(--bg);
}

/* ============ NAV (más ancha + alto contraste) ============ */
.nav {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: min(1180px, calc(100% - 28px));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--tinta);
	color: var(--bg);
	padding: 10px 14px 10px 22px;
	border-radius: var(--r-pill);
	border: 2px solid var(--tinta);
	box-shadow: 0 14px 36px -12px rgba(31, 37, 46, 0.45);
}
.nav .brand {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	color: var(--bg);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.05rem;
}
.nav .brand .mark {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	position: relative;
	transform: rotate(-8deg);
}
.nav .brand .mark::after {
	content: '';
	position: absolute;
	inset: 5px;
	background: var(--amarillo);
	border-radius: 3px;
}
.nav .links {
	display: flex;
	gap: 4px;
}
.nav .links a {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--bg);
	padding: 10px 16px;
	border-radius: var(--r-pill);
	transition:
		background 0.2s ease,
		color 0.2s ease;
	opacity: 0.85;
}
.nav .links a:hover,
.nav .links a.active {
	background: var(--amarillo);
	color: #1f252e;
	opacity: 1;
}
.nav .actions-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}
.nav .cta {
	background: var(--turquesa);
	color: white;
	padding: 10px 18px;
	border-radius: var(--r-pill);
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
}
.nav .cta:hover {
	background: var(--turquesa-oscuro);
}

.theme-toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bg);
	color: var(--tinta);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 0.2s ease,
		background 0.2s ease;
}
.theme-toggle:hover {
	transform: rotate(15deg);
}
.theme-toggle svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 880px) {
	.nav .links {
		display: none;
	}
	.nav {
		padding: 8px 8px 8px 18px;
	}
	.nav .cta {
		padding: 9px 14px;
		font-size: 0.9rem;
	}
}

/* ============ Sombras estandar (color contenedor + transparencia) ============ */
/* Cada contenedor define --c-shadow para que la sombra herede su color */
.panel {
	--c-shadow: 31, 37, 46;
	background: var(--surface);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-lg);
	box-shadow:
		0 18px 40px -16px rgba(var(--c-shadow), 0.35),
		0 6px 14px -8px rgba(var(--c-shadow), 0.18);
}
.panel.turq {
	--c-shadow: 0, 173, 181;
	background: var(--turquesa);
	color: white;
}
.panel.turq h2,
.panel.turq h3,
.panel.turq h4 {
	color: white;
}
.panel.amar {
	--c-shadow: 255, 211, 0;
	background: var(--amarillo);
	color: #1f252e;
}
.panel.amar h2,
.panel.amar h3,
.panel.amar h4 {
	color: #1f252e;
}
.panel.coral {
	--c-shadow: 255, 107, 107;
	background: var(--coral);
	color: white;
}
.panel.coral h2,
.panel.coral h3,
.panel.coral h4 {
	color: white;
}
.panel.dark {
	--c-shadow: 31, 37, 46;
	background: var(--tinta);
	color: var(--bg);
}
.panel.dark h2,
.panel.dark h3,
.panel.dark h4 {
	color: var(--bg);
}

/* ============ TOC / MAPA DE NAVEGACIÓN ============ */
.toc {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1.5px dashed var(--borde);
}
.toc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.toc-head .k {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texto-2);
}
.toc-head h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--tinta);
}
.toc-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
@media (max-width: 880px) {
	.toc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.toc-grid {
		grid-template-columns: 1fr;
	}
}
.toc-card {
	--c-shadow: 31, 37, 46;
	background: var(--surface);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-md);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	min-height: 130px;
	transition:
		transform 0.2s ease,
		box-shadow 0.25s ease,
		border-color 0.2s ease;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 6px 14px -10px rgba(var(--c-shadow), 0.25);
}
.toc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 26px -14px rgba(var(--c-shadow), 0.4);
	border-color: var(--borde-fuerte);
}
.toc-card .num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	color: var(--texto-2);
}
.toc-card .ttl {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--tinta);
	line-height: 1.2;
}
.toc-card .arrow {
	align-self: flex-end;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bg-2);
	color: var(--tinta);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}
.toc-card.c1 {
	--c-shadow: 0, 173, 181;
}
.toc-card.c1:hover .arrow {
	background: var(--turquesa);
	color: white;
}
.toc-card.c2 {
	--c-shadow: 255, 107, 107;
}
.toc-card.c2:hover .arrow {
	background: var(--coral);
	color: white;
}
.toc-card.c3 {
	--c-shadow: 255, 211, 0;
}
.toc-card.c3:hover .arrow {
	background: var(--amarillo);
	color: #1f252e;
}
.toc-card.c4 {
	--c-shadow: 138, 84, 220;
}
.toc-card.c4:hover .arrow {
	background: #6b4fbb;
	color: white;
}
.toc-card.c5 {
	--c-shadow: 31, 37, 46;
}
.toc-card.c5:hover .arrow {
	background: var(--tinta);
	color: var(--bg);
}

/* ============ HERO (margenes reducidos, imagen más grande, sin pop-ups) ============ */
.hero {
	position: relative;
	padding: 110px 0 70px;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 940px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.hero h1 {
	font-size: clamp(2.8rem, 6.4vw, 5rem);
	margin-bottom: 22px;
}
.hero h1 .accent {
	color: var(--turquesa);
}
.hero h1 .underline {
	position: relative;
	display: inline-block;
}
.hero h1 .underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 12px;
	background: var(--amarillo);
	z-index: -1;
	border-radius: 3px;
	transform: skew(-8deg);
}
.hero .lead {
	font-size: 1.1rem;
	max-width: 480px;
	margin-bottom: 28px;
}
.hero .actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-meta {
	margin-top: 40px;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.hero-meta .item .num {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.9rem;
	color: var(--tinta);
}
.hero-meta .item .lbl {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texto-2);
}

/* HERO VISUAL: imagen grande del proyecto actual */
.hero-visual {
	--c-shadow: 0, 173, 181;
	position: relative;
	aspect-ratio: 4/5;
	width: 100%;
	max-width: 560px;
	margin-left: auto;
	border-radius: var(--r-lg);
	border: 2px solid var(--borde-fuerte);
	overflow: hidden;
	background-image: url('assets/images/whispers-3.png');
	background-size: cover;
	background-position: center;
	box-shadow:
		0 24px 60px -20px rgba(var(--c-shadow), 0.55),
		0 10px 24px -12px rgba(var(--c-shadow), 0.35);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	color: white;
}
.hero-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		transparent 35%,
		transparent 60%,
		rgba(0, 0, 0, 0.7) 100%
	);
	z-index: 1;
	pointer-events: none;
}
.hero-visual > * {
	position: relative;
	z-index: 2;
}
.hero-visual .label-current {
	align-self: flex-start;
	background: var(--amarillo);
	color: #1f252e;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	font-weight: 500;
}
.hero-visual .preview-frame {
	position: absolute;
	inset: 18% 14% 24% 14%;
	background: rgba(255, 255, 255, 0.08);
	border: 1.5px dashed rgba(255, 255, 255, 0.5);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 12px;
	text-align: center;
	padding: 20px;
}
.hero-visual .preview-frame .ico {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
}
.hero-visual .preview-frame .ph-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
}
.hero-visual .caption {
	background: rgba(31, 37, 46, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--r-md);
	padding: 14px 18px;
	align-self: stretch;
	z-index: 2;
}
.hero-visual .caption .k {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--amarillo);
	margin-bottom: 4px;
	display: block;
}
.hero-visual .caption .t {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: white;
}

/* ============ Sections base ============ */
section.block {
	padding: 70px 0;
	position: relative;
}
section.block .header {
	display: flex;
	align-items: end;
	gap: 24px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}
section.block .header h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	max-width: 720px;
}
section.block .header h2 em {
	font-style: normal;
	color: var(--turquesa);
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
}

/* ============ SOBRE MÍ ============ */
.about-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.2fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 940px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.portrait {
	--c-shadow: 0, 173, 181;
	aspect-ratio: 4/5;
	border-radius: var(--r-lg);
	background-image: url('assets/images/foto-lowell.jpg');
	background-size: cover;
	background-position: center top;
	border: 2px solid var(--borde-fuerte);
	box-shadow:
		0 24px 50px -18px rgba(var(--c-shadow), 0.55),
		0 8px 18px -10px rgba(var(--c-shadow), 0.35);
	position: relative;
	overflow: hidden;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: white;
}
.portrait .ph-label {
	background: rgba(31, 37, 46, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--r-md);
	padding: 14px 18px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: white;
	line-height: 1.4;
}
.portrait .ph-label strong {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--amarillo);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.about p.lead {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--tinta);
	line-height: 1.4;
	margin-bottom: 20px;
}
.about p.body {
	font-size: 1rem;
	margin-bottom: 14px;
	max-width: 560px;
}

.skills {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (max-width: 600px) {
	.skills {
		grid-template-columns: 1fr;
	}
}
.skill {
	--c-shadow: 31, 37, 46;
	background: var(--surface);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-md);
	padding: 18px 20px;
	box-shadow:
		0 10px 22px -12px rgba(var(--c-shadow), 0.25),
		0 3px 8px -4px rgba(var(--c-shadow), 0.12);
	transition:
		transform 0.18s ease,
		border-color 0.2s ease;
}
.skill:hover {
	transform: translateY(-3px);
	border-color: var(--turquesa);
}
.skill .skill-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.skill h4 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
}
.skill .icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
}
.skill .icon.web {
	background: var(--turquesa);
	color: white;
}
.skill .icon.unity {
	background: var(--tinta);
	color: var(--amarillo);
}
.skill .icon.placeholder {
	background: var(--bg-2);
	color: var(--texto-2);
	border: 1.5px dashed var(--texto-2);
}
.skill .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.skill .chips span {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.74rem;
	background: var(--bg-2);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	color: var(--texto);
}
.skill.placeholder {
	border-style: dashed;
	border-color: rgba(0, 173, 181, 0.4);
	background: transparent;
}
.skill.placeholder p {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	color: var(--turquesa-oscuro);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
html[data-theme='dark'] .skill.placeholder p {
	color: var(--turquesa);
}

/* ============ PROYECTOS — accordion (uno por proyecto, despliega abajo) ============ */
.projects-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.project-item {
	--c-shadow: 31, 37, 46;
	background: var(--surface);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow:
		0 16px 36px -16px rgba(var(--c-shadow), 0.3),
		0 5px 12px -6px rgba(var(--c-shadow), 0.15);
	transition: box-shadow 0.25s ease;
}
.project-item.color-1 {
	--c-shadow: 0, 173, 181;
}
.project-item.color-2 {
	--c-shadow: 255, 107, 107;
}
.project-item.color-3 {
	--c-shadow: 255, 211, 0;
}
.project-item[open] {
	box-shadow:
		0 24px 50px -16px rgba(var(--c-shadow), 0.5),
		0 10px 22px -8px rgba(var(--c-shadow), 0.25);
}

.project-summary {
	list-style: none;
	cursor: pointer;
	padding: 24px 28px;
	display: grid;
	grid-template-columns: 80px 1fr auto auto;
	gap: 22px;
	align-items: center;
}
.project-summary::-webkit-details-marker {
	display: none;
}

.project-summary .num {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 2.4rem;
	color: var(--turquesa);
	line-height: 1;
}
.project-item.color-2 .project-summary .num {
	color: var(--coral);
}
.project-item.color-3 .project-summary .num {
	color: #b8860b;
}
html[data-theme='dark'] .project-item.color-3 .project-summary .num {
	color: var(--amarillo);
}

.project-summary .title-block h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	margin-bottom: 4px;
}
.project-summary .title-block .meta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texto-2);
}

.project-summary .pill {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--bg-2);
	padding: 6px 12px;
	border-radius: var(--r-pill);
	color: var(--texto);
}
@media (max-width: 720px) {
	.project-summary .pill {
		display: none;
	}
}

.project-summary .chevron {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bg-2);
	color: var(--tinta);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	transition:
		transform 0.25s ease,
		background 0.2s ease;
}
.project-item[open] .project-summary .chevron {
	transform: rotate(180deg);
	background: var(--turquesa);
	color: white;
}
.project-item.color-2[open] .project-summary .chevron {
	background: var(--coral);
}
.project-item.color-3[open] .project-summary .chevron {
	background: var(--amarillo);
	color: #1f252e;
}

/* contenido expandido — misma estructura que "Sobre mí" */
.project-content {
	border-top: 1.5px solid var(--borde);
	padding: 36px 28px 36px;
}
.project-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.2fr;
	gap: 40px;
	align-items: start;
}
@media (max-width: 880px) {
	.project-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

.project-cover {
	--c-shadow: 0, 173, 181;
	aspect-ratio: 4/5;
	border-radius: var(--r-lg);
	border: 2px solid var(--borde-fuerte);
	box-shadow:
		0 18px 40px -16px rgba(var(--c-shadow), 0.5),
		0 6px 14px -8px rgba(var(--c-shadow), 0.25);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	color: white;
	background-size: cover;
	background-position: center;
}
.project-cover::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.05) 0%,
		transparent 35%,
		rgba(0, 0, 0, 0.6) 100%
	);
	z-index: 1;
}
.project-cover > * {
	position: relative;
	z-index: 2;
}
.project-item.color-1 .project-cover {
	background-image: url('assets/images/terkhashh.jpg');
}
.project-item.color-2 .project-cover {
	--c-shadow: 255, 107, 107;
	background-image: url('assets/images/kestt-poster.png');
	background-color: #1f1f1f;
}
.project-item.color-3 .project-cover {
	--c-shadow: 255, 211, 0;
	background-image: url('assets/images/insenas-2.png');
	background-color: #e8f2fb;
}
.project-item.color-4 {
	--c-shadow: 138, 84, 220;
}
.project-item.color-4 .project-cover {
	background-image: url('assets/images/whispers-2.jpeg');
}
.project-item#project-5 .project-cover {
	background-image: url('assets/images/last-surprise-lowell.png');
}
.project-item.color-4 .project-summary .num {
	color: #6b4fbb;
}
html[data-theme='dark'] .project-item.color-4 .project-summary .num {
	color: #b79eff;
}
.project-item.color-4[open] .project-summary .chevron {
	background: #6b4fbb;
	color: white;
}
.project-cover .ph-label {
	background: rgba(31, 37, 46, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--r-md);
	padding: 14px 18px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: white;
	line-height: 1.4;
}
.project-item.color-3 .project-cover .ph-label {
	background: rgba(254, 249, 231, 0.85);
	color: #1f252e;
}
.project-cover .ph-label strong {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--amarillo);
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}
.project-item.color-3 .project-cover .ph-label strong {
	color: var(--coral);
}

.project-detail h4 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1.7rem;
	margin-bottom: 14px;
}
.project-detail p.lead {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 1.15rem;
	color: var(--tinta);
	line-height: 1.4;
	margin-bottom: 16px;
}
.project-detail p.body {
	font-size: 0.98rem;
	margin-bottom: 12px;
	max-width: 560px;
}
.project-detail .info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 24px;
}
@media (max-width: 540px) {
	.project-detail .info-grid {
		grid-template-columns: 1fr;
	}
}
.project-detail .info-item {
	--c-shadow: 31, 37, 46;
	background: var(--bg-2);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-md);
	padding: 14px 16px;
	box-shadow: 0 6px 14px -10px rgba(var(--c-shadow), 0.25);
}
.project-detail .info-item .k {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texto-2);
	margin-bottom: 4px;
	display: block;
}
.project-detail .info-item .v {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	color: var(--tinta);
	font-size: 0.98rem;
}

/* ============ AR (con QR) ============ */
.ar-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
@media (max-width: 940px) {
	.ar-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.ar-content h2 {
	font-size: clamp(2rem, 4.4vw, 3rem);
	margin-bottom: 18px;
}
.ar-content p {
	font-size: 1rem;
	margin-bottom: 14px;
	max-width: 460px;
}

.ar-features {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ar-feat {
	--c-shadow: 31, 37, 46;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: var(--surface);
	border-radius: var(--r-md);
	border: 1.5px solid var(--borde);
	box-shadow: 0 8px 18px -12px rgba(var(--c-shadow), 0.25);
}
.ar-feat .ico {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--turquesa);
	color: white;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}
.ar-feat:nth-child(2) .ico {
	background: var(--amarillo);
	color: #1f252e;
}
.ar-feat:nth-child(3) .ico {
	background: var(--coral);
}
.ar-feat strong {
	color: var(--tinta);
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 0.98rem;
	margin-bottom: 4px;
}
.ar-feat span {
	font-size: 0.92rem;
}

/* QR card */
.qr-card {
	--c-shadow: 31, 37, 46;
	margin-top: 28px;
	background: var(--surface);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-md);
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 18px;
	box-shadow: 0 12px 24px -14px rgba(var(--c-shadow), 0.3);
	max-width: 480px;
}
.qr-card .qr {
	width: 96px;
	height: 96px;
	border-radius: 10px;
	background: white;
	padding: 8px;
	border: 2px solid var(--tinta);
	flex-shrink: 0;
}
.qr-card .qr svg {
	width: 100%;
	height: 100%;
	display: block;
}
.qr-card .qr-text strong {
	color: var(--tinta);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	display: block;
	margin-bottom: 6px;
}
.qr-card .qr-text p {
	font-size: 0.88rem;
	line-height: 1.4;
}
.qr-card .qr-text .mono {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	color: var(--texto-2);
	margin-top: 6px;
	display: block;
}

/* phone mockup */
.ar-phone-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 560px;
}
.phone {
	--c-shadow: 31, 37, 46;
	width: 300px;
	height: 600px;
	background: #1f252e;
	border-radius: 44px;
	padding: 12px;
	box-shadow:
		0 36px 70px -34px rgba(var(--c-shadow), 0.5),
		0 18px 40px -22px rgba(0, 173, 181, 0.3);
	position: relative;
	z-index: 2;
}
.phone .notch {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 26px;
	background: #1f252e;
	border-radius: 18px;
	z-index: 5;
}
.phone .screen {
	width: 100%;
	height: 100%;
	background: #fef9e7;
	border-radius: 34px;
	overflow: hidden;
	position: relative;
}
.ar-scene {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(
			180deg,
			rgba(31, 37, 46, 0.5) 0%,
			transparent 35%,
			transparent 65%,
			rgba(31, 37, 46, 0.55) 100%
		),
		linear-gradient(180deg, #2a3340 0%, #4a5764 60%, #d4ad7c 100%);
	position: relative;
	overflow: hidden;
}
.ar-scene::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background:
		repeating-linear-gradient(
			transparent 0 38px,
			rgba(31, 37, 46, 0.18) 38px 39px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0 56px,
			rgba(31, 37, 46, 0.1) 56px 57px
		),
		linear-gradient(180deg, #b08661 0%, #8a6043 100%);
	transform: perspective(280px) rotateX(58deg);
	transform-origin: top center;
}
.ar-status {
	position: absolute;
	top: 56px;
	left: 16px;
	right: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	color: #fef9e7;
	z-index: 10;
}
.ar-status .pill-status {
	background: rgba(254, 249, 231, 0.95);
	color: #1f252e;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	display: flex;
	align-items: center;
	gap: 6px;
}
.ar-status .pill-status .live-dot {
	width: 8px;
	height: 8px;
	background: #ff6b6b;
	border-radius: 50%;
	animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.5);
		opacity: 0.4;
	}
}
.ar-object {
	position: absolute;
	bottom: 28%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	perspective: 600px;
}
.cube {
	width: 100px;
	height: 100px;
	position: relative;
	transform-style: preserve-3d;
	animation: cubeRotate 14s linear infinite;
}
@keyframes cubeRotate {
	0% {
		transform: rotateX(-22deg) rotateY(0deg);
	}
	100% {
		transform: rotateX(-22deg) rotateY(360deg);
	}
}
.cube .face {
	position: absolute;
	inset: 0;
	border: 2px solid #1f252e;
	box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);
}
.cube .face.front {
	background: #00adb5;
	transform: translateZ(50px);
}
.cube .face.back {
	background: #008b8b;
	transform: rotateY(180deg) translateZ(50px);
}
.cube .face.right {
	background: #ffd300;
	transform: rotateY(90deg) translateZ(50px);
}
.cube .face.left {
	background: #ff6b6b;
	transform: rotateY(-90deg) translateZ(50px);
}
.cube .face.top {
	background: #fef9e7;
	transform: rotateX(90deg) translateZ(50px);
}
.cube .face.bottom {
	background: #535c68;
	transform: rotateX(-90deg) translateZ(50px);
}
.ar-object::after {
	content: '';
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 14px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	filter: blur(6px);
}
.ar-tracking {
	position: absolute;
	inset: 100px 30px 180px 30px;
	border: 1.5px dashed rgba(255, 211, 0, 0.7);
	border-radius: 12px;
	z-index: 4;
	animation: trackPulse 2.4s ease-in-out infinite;
}
.ar-tracking::before,
.ar-tracking::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border: 3px solid #ffd300;
}
.ar-tracking::before {
	top: -2px;
	left: -2px;
	border-right: none;
	border-bottom: none;
}
.ar-tracking::after {
	bottom: -2px;
	right: -2px;
	border-left: none;
	border-top: none;
}
@keyframes trackPulse {
	0%,
	100% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
}
.ar-controls {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 16px;
	z-index: 10;
}
.ar-controls .btn-ar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(254, 249, 231, 0.95);
	color: #1f252e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	border: 2px solid #1f252e;
}
.ar-controls .capture {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffd300;
	border: 4px solid #fef9e7;
	box-shadow: 0 0 0 2px #1f252e;
}

/* ============ CONTACTO (mismo fondo / cohesión) ============ */
.contact-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: start;
}
@media (max-width: 940px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.contact-form {
	--c-shadow: 0, 173, 181;
	background: var(--surface);
	color: var(--tinta);
	border-radius: var(--r-lg);
	padding: 32px;
	border: 1.5px solid var(--borde);
	box-shadow:
		0 18px 40px -16px rgba(var(--c-shadow), 0.35),
		0 6px 14px -8px rgba(var(--c-shadow), 0.18);
}
.contact-form h3 {
	font-size: 1.4rem;
	margin-bottom: 22px;
}
.field {
	margin-bottom: 16px;
}
.field label {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texto);
	margin-bottom: 8px;
}
.field input,
.field textarea {
	width: 100%;
	padding: 13px 16px;
	background: var(--bg);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-sm);
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	color: var(--tinta);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--turquesa);
	box-shadow: 0 0 0 3px rgba(0, 173, 181, 0.18);
}
.field textarea {
	min-height: 110px;
	resize: vertical;
	font-family: inherit;
}

.contact-form .submit {
	background: var(--amarillo);
	color: #1f252e;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	padding: 14px 26px;
	border-radius: var(--r-pill);
	width: 100%;
	transition:
		background 0.2s ease,
		transform 0.15s ease;
	border: 2px solid var(--tinta);
}
.contact-form .submit:hover {
	background: var(--coral);
	color: white;
	transform: translateY(-2px);
}
.form-success {
	display: none;
	margin-top: 14px;
	padding: 12px 16px;
	background: rgba(0, 173, 181, 0.1);
	border: 1.5px dashed var(--turquesa);
	border-radius: var(--r-sm);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.84rem;
	color: var(--turquesa-oscuro);
}
html[data-theme='dark'] .form-success {
	color: var(--turquesa);
}
.form-success.show {
	display: block;
}

.socials-side .lead {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--tinta);
	margin-bottom: 24px;
}
.social-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.social-list a {
	--c-shadow: 31, 37, 46;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--surface);
	border: 1.5px solid var(--borde);
	border-radius: var(--r-md);
	box-shadow: 0 10px 22px -14px rgba(var(--c-shadow), 0.25);
	transition:
		transform 0.2s ease,
		border-color 0.2s ease;
}
.social-list a:hover {
	transform: translateY(-3px);
	border-color: var(--turquesa);
}
.social-list a .row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.social-list a .ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--bg-2);
	color: var(--tinta);
	display: flex;
	align-items: center;
	justify-content: center;
}
.social-list a:hover .ico {
	background: var(--amarillo);
	color: #1f252e;
}
.social-list a .ico svg {
	width: 20px;
	height: 20px;
}
.social-list a .label-block {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--tinta);
}
.social-list a .handle {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.74rem;
	color: var(--texto-2);
	margin-top: 2px;
}
.social-list a .arrow {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--tinta);
	transition: transform 0.2s ease;
}
.social-list a:hover .arrow {
	transform: translateX(4px);
}

/* ============ Marquee separador animado ============ */
.marquee {
	--c-shadow: 31, 37, 46;
	background: var(--tinta);
	color: var(--bg);
	overflow: hidden;
	padding: 18px 0;
	border-top: 2px solid var(--tinta);
	border-bottom: 2px solid var(--tinta);
	box-shadow: 0 12px 28px -16px rgba(var(--c-shadow), 0.35);
}
.marquee.alt {
	background: var(--turquesa);
	--c-shadow: 0, 173, 181;
	border-color: var(--turquesa-oscuro);
}
.marquee.alt2 {
	background: var(--coral);
	--c-shadow: 255, 107, 107;
	border-color: var(--coral);
}
.marquee.alt3 {
	background: var(--amarillo);
	color: #1f252e;
	--c-shadow: 255, 211, 0;
	border-color: #1f252e;
}
.marquee-track {
	display: flex;
	gap: 40px;
	width: max-content;
	animation: scroll 38s linear infinite;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.marquee-track > span {
	display: inline-flex;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
}
.marquee-track .star {
	color: var(--amarillo);
	font-size: 1rem;
}
.marquee.alt3 .marquee-track .star {
	color: var(--coral);
}
@keyframes scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ============ Footer ============ */
.footer {
	border-top: 1.5px solid var(--borde);
	padding: 32px 0;
	margin-top: 40px;
}
.footer-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	color: var(--texto-2);
}
/* CONTENEDOR */
.sphere-container {
	width: 100%;
	height: 650px;
	border-radius: 30px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #000;
	position: relative;
}

.sphere-container canvas {
	border-radius: 30px;
}

/* ============ Iconos como imagen ============ */

.theme-toggle img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.skill .icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: block;
}

.toc-card img.arrow {
	padding: 6px;
	object-fit: contain;
}

.social-list a .ico img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* ============ ANIMATED SECTION BACKGROUNDS ============ */

/* Contener pseudo-elementos dentro de cada sección */
.hero,
section.block {
	overflow: hidden;
}

/* Z-index: el contenido siempre encima de los fondos animados */
section.block > .container {
	position: relative;
	z-index: 1;
}
.hero > .container {
	position: relative;
	z-index: 1;
}

/* ---- HERO: orbes flotantes ---- */
.hero::before,
.hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.hero::before {
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(0, 173, 181, 0.28) 0%, transparent 65%);
	top: -180px;
	right: -140px;
	animation: bgOrbFloat 10s ease-in-out infinite;
}
.hero::after {
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(255, 211, 0, 0.25) 0%, transparent 65%);
	bottom: -120px;
	left: -120px;
	animation: bgOrbFloat 14s ease-in-out infinite reverse;
}
@keyframes bgOrbFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%       { transform: translate(28px, -22px) scale(1.06); }
	66%       { transform: translate(-18px, 26px) scale(0.95); }
}

/* ---- SOBRE MÍ: grilla de puntos animada ---- */
#sobre::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(0, 173, 181, 0.5) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	opacity: 0.8;
	animation: bgGridDrift 22s linear infinite;
}
@keyframes bgGridDrift {
	from { background-position: 0 0; }
	to   { background-position: 28px 28px; }
}

/* ---- PROYECTOS: líneas diagonales + orbe coral ---- */
#proyectos::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent 0,
		transparent 38px,
		rgba(0, 173, 181, 0.11) 38px,
		rgba(0, 173, 181, 0.11) 39px
	);
	pointer-events: none;
	animation: bgDiagScroll 18s linear infinite;
}
@keyframes bgDiagScroll {
	from { background-position: 0 0; }
	to   { background-position: 78px 78px; }
}
#proyectos::after {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	top: -120px;
	right: -120px;
	background: radial-gradient(circle, rgba(255, 107, 107, 0.25) 0%, transparent 65%);
	pointer-events: none;
	animation: bgOrbFloat 13s ease-in-out infinite;
}

/* ---- AR: anillos concéntricos pulsantes ---- */
#ar::before {
	content: '';
	position: absolute;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	top: 50%;
	right: -160px;
	transform: translateY(-50%) scale(1);
	background:
		radial-gradient(circle at center, transparent 28%, rgba(0, 173, 181, 0.22) 29%, transparent 31%),
		radial-gradient(circle at center, transparent 48%, rgba(0, 173, 181, 0.17) 49%, transparent 51%),
		radial-gradient(circle at center, transparent 68%, rgba(0, 173, 181, 0.12) 69%, transparent 71%);
	pointer-events: none;
	animation: bgRingPulse 5s ease-in-out infinite;
}
@keyframes bgRingPulse {
	0%, 100% { transform: translateY(-50%) scale(1);    opacity: 0.7; }
	50%       { transform: translateY(-50%) scale(1.12); opacity: 1; }
}

/* ---- CONTACTO: orbes coral + amarillo ---- */
#contacto::before {
	content: '';
	position: absolute;
	width: 440px;
	height: 440px;
	border-radius: 50%;
	top: -100px;
	right: -80px;
	background: radial-gradient(circle, rgba(255, 107, 107, 0.26) 0%, transparent 65%);
	pointer-events: none;
	animation: bgFloatSlow 12s ease-in-out infinite;
}
#contacto::after {
	content: '';
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	bottom: -80px;
	left: -80px;
	background: radial-gradient(circle, rgba(255, 211, 0, 0.26) 0%, transparent 65%);
	pointer-events: none;
	animation: bgFloatSlow 16s ease-in-out infinite reverse;
}
@keyframes bgFloatSlow {
	0%, 100% { transform: translate(0, 0); }
	50%       { transform: translate(22px, -28px); }
}

/* ---- Ajustes modo oscuro (opacidades más visibles) ---- */
html[data-theme='dark'] .hero::before {
	background: radial-gradient(circle, rgba(0, 173, 181, 0.18) 0%, transparent 65%);
}
html[data-theme='dark'] .hero::after {
	background: radial-gradient(circle, rgba(255, 211, 0, 0.14) 0%, transparent 65%);
}
html[data-theme='dark'] #sobre::before {
	opacity: 0.6;
}
html[data-theme='dark'] #proyectos::before {
	background: repeating-linear-gradient(
		-45deg,
		transparent 0,
		transparent 38px,
		rgba(0, 173, 181, 0.07) 38px,
		rgba(0, 173, 181, 0.07) 39px
	);
}
html[data-theme='dark'] #proyectos::after {
	background: radial-gradient(circle, rgba(255, 107, 107, 0.16) 0%, transparent 65%);
}
html[data-theme='dark'] #ar::before {
	background:
		radial-gradient(circle at center, transparent 28%, rgba(0, 173, 181, 0.14) 29%, transparent 31%),
		radial-gradient(circle at center, transparent 48%, rgba(0, 173, 181, 0.1)  49%, transparent 51%),
		radial-gradient(circle at center, transparent 68%, rgba(0, 173, 181, 0.07) 69%, transparent 71%);
}
html[data-theme='dark'] #contacto::before {
	background: radial-gradient(circle, rgba(255, 107, 107, 0.18) 0%, transparent 65%);
}
html[data-theme='dark'] #contacto::after {
	background: radial-gradient(circle, rgba(255, 211, 0, 0.18) 0%, transparent 65%);
}