/* Y2K Purple Portfolio — pages.css
   Composición de cada plantilla: hero, cabeceras, post, perfil, contacto, 404. */

/* ----------------------------------------------------------------- Hero */
.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(100svh, 62rem);
	padding: calc(var(--header-h) + 2rem) 0 4rem;
}
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }
.hero__copy { min-width: 0; }
.hero__name {
	margin: 0 0 1.4rem;
	font-size: clamp(2rem, 6.4vw + .4rem, 5.2rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
	color: #fff;
	filter: drop-shadow(0 0 26px rgba(123, 92, 255, .5));
}
.hero__name .l { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__name .l > span {
	display: inline-block;
	background: linear-gradient(180deg, #fff 20%, var(--secondary) 75%, var(--primary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hero__role { margin: 0 0 1.2rem; }
.hero__intro { max-width: 34rem; margin-bottom: 1.8rem; color: var(--muted); font-size: clamp(1rem, 1vw + .8rem, 1.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__art { position: relative; min-height: 22rem; }
@media (max-width: 899px) { .hero__art { min-height: 18rem; max-width: 26rem; } }
.fx { position: absolute; }
.fx--prism { left: -6%; bottom: -4%; width: 44%; aspect-ratio: 1; }
.prism {
	display: block;
	width: 100%; height: 100%;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	background: linear-gradient(180deg, #fff 0, #9b82ff 38%, #4328c9 62%, #d9ccff 100%);
	opacity: .92;
}
.fx--orb { right: 4%; top: -4%; width: 34%; }
.fx--orb2 { left: 18%; top: 6%; width: 11%; }
.orb {
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, #fff 0, #cdbcff 22%, #7b5cff 55%, #1d1052 100%);
	box-shadow: 0 0 40px rgba(123, 92, 255, .7), inset -10px -14px 26px rgba(10, 4, 40, .55);
}
.hud { position: absolute; inset: 14% 4% 10% 14%; display: flex; flex-direction: column; overflow: hidden; }
.hud__stats { display: flex; gap: 1.6rem; padding: 1rem 1.1rem 0; }
.stat b { display: block; font: 400 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--font-mono); letter-spacing: .04em; color: #fff; text-shadow: var(--glow); }
.stat span { color: var(--secondary); font: 400 .72rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.hud__rings {
	flex: 1;
	margin: .6rem;
	background:
		repeating-radial-gradient(circle at 50% 55%, transparent 0 14px, rgba(183, 155, 255, .4) 14px 15px),
		linear-gradient(180deg, transparent, rgba(123, 92, 255, .3));
	border-radius: var(--r-sm);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
	mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.hud__log { display: grid; gap: .1rem; margin: 0; padding: 0 1.1rem 1rem; color: var(--secondary); font: 400 .74rem var(--font-mono); letter-spacing: .08em; }
.hud__log em { display: inline-block; width: .55em; height: 1em; margin-left: .2em; vertical-align: -.15em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
.spark { position: absolute; width: 3.2rem; height: 3.2rem; pointer-events: none; overflow: visible; }
.spark--a { right: -2%; bottom: 14%; }
.spark--b { left: 4%; top: -2%; width: 2rem; height: 2rem; }

.hero__scroll {
	position: absolute;
	left: 50%; bottom: 1.4rem;
	display: grid;
	place-items: start center;
	width: 1.6rem; height: 2.6rem;
	padding-top: .5rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	transform: translateX(-50%);
}
.hero__scroll span { width: 3px; height: .55rem; background: var(--secondary); border-radius: 3px; animation: wheel 1.8s var(--ease) infinite; }
@media (max-width: 899px), (max-height: 640px) { .hero__scroll { display: none; } }

/* ------------------------------------------------------ Cabecera de página */
.page-hero { padding: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)) 0 clamp(1rem, 3vw, 2rem); }
.page-hero__kicker { margin: 0 0 .8rem; color: var(--secondary); font: 400 .85rem var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.page-title {
	margin: 0 0 1rem;
	font-size: clamp(1.8rem, 4.4vw + .5rem, 3.6rem);
	overflow-wrap: anywhere;
	background: linear-gradient(180deg, #fff 30%, var(--secondary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.page-hero__desc { max-width: 40rem; color: var(--muted); font-size: 1.1rem; }
.page-hero__desc p:last-child { margin-bottom: 0; }
.page-hero__search { max-width: 34rem; margin-block: 1.2rem; }
.page-hero__extra { margin-block: 1.2rem; }
.page-hero__count { margin: 1rem 0 0; color: var(--muted); font: 400 .85rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.page-hero__count b { color: #fff; font-weight: 400; }
.page-hero .chips { margin-top: 1rem; }
.entry--page .page-hero { padding-bottom: 0; }

/* --------------------------------------------------------- Post individual */
.post-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(22rem, 62vh, 40rem);
	padding: calc(var(--header-h) + 2rem) 0 clamp(2rem, 5vw, 3.5rem);
	overflow: hidden;
	isolation: isolate;
}
.post-hero__media { position: absolute; inset: 0; z-index: -2; }
.post-hero__media .cover__img, .post-hero__media .cover__gen { width: 100%; height: 100%; }
.post-hero__media .cover__img { transform: scale(1.06); }
.post-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(6, 4, 15, .35), rgba(6, 4, 15, .55) 45%, var(--bg) 100%), linear-gradient(120deg, rgba(123, 92, 255, .3), transparent 60%);
}
.post-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.post-title span { display: block; }
.post-title { margin: 0 0 1rem; font-size: clamp(1.8rem, 4.6vw + .4rem, 3.6rem); overflow-wrap: anywhere; text-shadow: 0 4px 40px rgba(6, 4, 15, .8); }
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; color: var(--secondary); font: 400 .82rem var(--font-mono); letter-spacing: .08em; list-style: none; }
.meta a { color: #fff; }
.entry__body { padding-block: clamp(2rem, 5vw, 3.5rem); }
.entry__figure { margin: 0 0 2rem; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r); }

/* Contenido del editor (Gutenberg) */
.prose { font-size: clamp(1rem, .3vw + .95rem, 1.12rem); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { margin-top: 2em; }
.prose p, .prose li { max-width: 70ch; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li::marker { color: var(--secondary); }
.prose img, .prose video, .prose iframe { max-width: 100%; border-radius: var(--r-sm); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: .5rem; color: var(--muted); font: 400 .82rem var(--font-mono); text-align: center; }
.prose a { color: var(--secondary); }
.prose blockquote { margin: 1.6em 0; padding: .4rem 0 .4rem 1.3rem; color: var(--text); border-left: 3px solid var(--primary); background: linear-gradient(90deg, rgba(123, 92, 255, .16), transparent); }
.prose pre, .prose code { font-family: var(--font-mono); }
.prose pre { padding: 1rem 1.2rem; overflow-x: auto; font-size: .9rem; background: rgba(6, 4, 15, .8); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.prose :not(pre) > code { padding: .1em .4em; background: rgba(123, 92, 255, .2); border-radius: 5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
.prose th { color: var(--secondary); font: 400 .8rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.prose .wp-block-gallery { display: flex; flex-wrap: wrap; gap: .75rem; }
.prose .wp-block-image img { height: auto; }
.prose .alignleft { float: left; margin: .3em 1.2em .6em 0; }
.prose .alignright { float: right; margin: .3em 0 .6em 1.2em; }
.prose .aligncenter { margin-inline: auto; }
.prose::after { content: ""; display: table; clear: both; }
.page-links { margin-top: 2rem; font: 400 .9rem var(--font-mono); }

.post-nav { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__a {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.1rem 1.3rem;
	color: var(--text);
	text-decoration: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	transition: border-color .25s, box-shadow .3s, transform .3s var(--ease);
}
.post-nav__a:hover { color: #fff; text-shadow: none; border-color: var(--secondary); box-shadow: var(--glow); transform: translateY(-3px); }
.post-nav__a span { color: var(--secondary); font: 400 .75rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.post-nav__a b { font: 800 1rem var(--font-display); overflow-wrap: anywhere; }
.post-nav__a--next { text-align: right; }
@media (min-width: 640px) { .post-nav__a--next:only-child { grid-column: 2; } }

/* --------------------------------------------------------------- Perfil */
.profile { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .profile { grid-template-columns: 1.1fr .9fr; } }
.datalist { margin: 0; padding: 1.2rem 1.4rem 1.4rem; }
.datalist > div { display: grid; gap: .15rem; padding: .85rem 0; border-bottom: 1px dashed var(--line); }
.datalist > div:last-child { border-bottom: 0; }
.datalist dt { color: var(--secondary); font: 400 .76rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.datalist dd { margin: 0; font: 800 clamp(1.05rem, 1.6vw + .6rem, 1.5rem) var(--font-display); overflow-wrap: anywhere; }
.profile__bio { color: var(--muted); font-size: 1.1rem; }
.profile__side { display: grid; gap: 1.2rem; }

/* ------------------------------------------------------------- Contacto */
.contact { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.contact__card {
	display: grid;
	gap: .3rem;
	padding: 1.6rem;
	color: var(--text);
	text-decoration: none;
	transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
}
.contact__card:hover { color: #fff; text-shadow: none; transform: translateY(-4px); border-color: var(--secondary); box-shadow: var(--glow), 0 30px 60px -24px rgba(90, 60, 240, .8); }
.contact__ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .6rem; color: #fff; background: linear-gradient(135deg, var(--primary), #5a3df0); border-radius: 50%; box-shadow: var(--glow); }
.contact__ico .ico { width: 1.3rem; height: 1.3rem; }
.contact__label { color: var(--secondary); font: 400 .76rem var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.contact__value { font: 800 clamp(1.05rem, 1.8vw + .5rem, 1.5rem) var(--font-display); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 404 */
.not-found { text-align: center; }
.not-found .page-hero__desc, .not-found .page-hero__search { margin-inline: auto; }
.not-found .chips { justify-content: center; }
.not-found__cta { margin-top: 2rem; }
.glitch {
	position: relative;
	display: inline-block;
	margin: 0 0 .5rem;
	color: #fff;
	font: 800 clamp(4rem, 16vw, 9rem)/1 var(--font-display);
	text-shadow: var(--glow);
}
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; }
.glitch::before { color: var(--accent); transform: translateX(-3px); clip-path: inset(0 0 55% 0); mix-blend-mode: screen; }
.glitch::after { color: #6ad0ff; transform: translateX(3px); clip-path: inset(55% 0 0 0); mix-blend-mode: screen; }