/* =========================================================
   Paleta y variables — rojo monocromo
   Fondo casi negro con tinte rojizo, rojo oscuro como principal,
   rojo vivo para brillos y blanco hueso para el texto
   ========================================================= */
:root{
	--bg:#060405;
	--bg-2:#0c0708;
	--panel:rgba(15,8,9,0.88);
	--line:rgba(141,15,22,0.34);
	--line-strong:rgba(212,32,44,0.5);
	--fg:#e8e2dc;
	--muted:#8c7f7f;
	--bone:#cbbfb6;
	--accent:#d4202c;       /* rojo vivo: brillos, estado activo */
	--accent-text:#e5484f;  /* rojo legible para texto pequeño */
	--accent-dark:#8d0f16;  /* rojo oscuro: botones, barras, bordes */

	--font-display:'Rajdhani', 'Segoe UI', system-ui, sans-serif;
	--font-mono:'Share Tech Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	--font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--container-width:1140px;
	--header-height:64px;
	--cut:14px; /* tamaño de las esquinas recortadas */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
	margin:0;
	background-color:var(--bg);
	/* rejilla tenue + brillos rojos en las esquinas */
	background-image:
		radial-gradient(60rem 40rem at -10% -10%, rgba(141,15,22,0.22), transparent 60%),
		radial-gradient(50rem 40rem at 110% 60%, rgba(141,15,22,0.12), transparent 60%),
		linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
	background-size:auto, auto, 48px 48px, 48px 48px;
	background-attachment:fixed;
	color:var(--fg);
	font-family:var(--font-body);
	line-height:1.6;
	overflow-x:clip;
	-webkit-font-smoothing:antialiased;
}

::selection{background:var(--accent);color:#fff}

img{max-width:100%}

.container{
	max-width:var(--container-width);
	margin:0 auto;
	padding:0 1rem;
}

/* Líneas de escaneo sobre toda la página */
.fx-scanlines{
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:9000;
	background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.016) 0 1px, transparent 1px 3px);
	mix-blend-mode:overlay;
}

/* =========================================================
   Cursor tipo mira (solo con ratón)
   ========================================================= */
@media (hover:hover) and (pointer:fine){
	html{
		cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23d4202c' stroke-width='1.6'%3E%3Ccircle cx='16' cy='16' r='7'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23e8e2dc'/%3E%3C/svg%3E") 16 16, crosshair;
	}
	a, button, label, .project-media{
		cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23e8e2dc' stroke-width='1.6'%3E%3Ccircle cx='16' cy='16' r='5'/%3E%3Cpath d='M16 4v6M16 22v6M4 16h6M22 16h6'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2' fill='%23d4202c'/%3E%3C/svg%3E") 16 16, pointer;
	}
	input, textarea{cursor:text}
}

/* Marco que sigue al cursor con retardo */
.cursor-ring{
	position:fixed;
	left:0;
	top:0;
	width:40px;
	height:40px;
	pointer-events:none;
	z-index:9999;
	opacity:0;
	transition:opacity .25s ease, width .2s ease, height .2s ease;
	will-change:transform;
}
.cursor-ring.visible{opacity:0.85}
.cursor-ring.hidden{opacity:0}
.cursor-ring i{
	position:absolute;
	width:9px;
	height:9px;
	border:0 solid var(--accent);
	transition:border-color .2s ease;
}
.cursor-ring i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.cursor-ring i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.cursor-ring i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.cursor-ring i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.cursor-ring.locked{width:54px;height:54px}
.cursor-ring.locked i{border-color:var(--fg)}
.cursor-ring.pressed{width:28px;height:28px}

/* =========================================================
   Tipografía
   ========================================================= */
h1, h2, h3{
	font-family:var(--font-display);
	font-weight:700;
	letter-spacing:0.02em;
	line-height:1.1;
	color:var(--fg);
	margin:0;
}
p{margin:0 0 1rem}

.highlight{color:var(--accent-text)}
.accent{color:var(--accent-text)}

/* Cursor parpadeante de los títulos */
.blink-cursor{
	color:var(--accent);
	display:inline-block;
	margin-left:4px;
	animation:blink 1s steps(1) infinite;
	user-select:none;
}
@keyframes blink{
	0%,49%{opacity:1}
	50%,100%{opacity:0}
}

.status-dot{
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:0.6rem;
	background:var(--accent);
	box-shadow:0 0 10px var(--accent);
	animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
	0%,100%{opacity:1}
	50%{opacity:0.35}
}

/* =========================================================
   Header / navegación
   ========================================================= */
.site-header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:var(--header-height);
	z-index:1000;
	background:rgba(6,4,5,0.55);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border-bottom:1px solid transparent;
	transition:background 300ms ease, border-color 300ms ease;
}
.site-header.scrolled{
	background:rgba(6,4,5,0.9);
	border-bottom-color:var(--line);
}

.nav{
	height:100%;
	display:flex;
	align-items:center;
	gap:1rem;
}
/* el header usa un contenedor algo más ancho para que quepan menú, idioma y reloj */
.site-header .container{max-width:1360px}

.brand{
	display:flex;
	flex-shrink:0;
	align-items:center;
	gap:0.7rem;
	color:var(--fg);
	text-decoration:none;
}
.brand-logo{
	width:40px;
	height:40px;
	object-fit:cover;
	border:1px solid var(--line-strong);
}
.brand-tag{
	font-family:var(--font-mono);
	font-size:1.05rem;
	letter-spacing:0.08em;
}
.brand-sys{color:var(--accent)}

/* Reloj HUD junto al logo (solo en pantallas anchas) */
.hud-clock{
	display:none;
	gap:1.1rem;
	margin-left:0.5rem;
	padding-left:1rem;
	border-left:1px solid var(--line);
	font-family:var(--font-mono);
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--muted);
	white-space:nowrap;
}
.hud-clock b{color:var(--accent-text);font-weight:400}
@media (min-width:1500px){
	.hud-clock{display:flex}
}

.nav-list{
	list-style:none;
	margin:0 0 0 auto;
	padding:0;
	display:flex;
	gap:0.15rem;
	align-items:center;
}
.nav-list a{
	position:relative;
	display:block;
	padding:0.45rem 0.6rem;
	color:var(--muted);
	text-decoration:none;
	font-family:var(--font-mono);
	font-size:0.85rem;
	text-transform:uppercase;
	letter-spacing:0.05em;
	white-space:nowrap;
	transition:color 180ms ease, background-color 180ms ease;
}
.nav-num{
	color:var(--accent);
	margin-right:0.4rem;
	font-size:0.72rem;
	opacity:0.85;
}
.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list a.active{
	color:var(--fg);
	background:rgba(141,15,22,0.18);
}

/* Indicador: línea superior y flecha inferior (oculto por defecto) */
.nav-list a::before,
.nav-list a::after{
	content:"";
	position:absolute;
	left:50%;
	opacity:0;
	pointer-events:none;
	transition:transform 240ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease, width 220ms ease;
}
.nav-list a::before{
	top:-10px;
	width:0%;
	height:3px;
	background:var(--accent);
	box-shadow:0 0 8px var(--accent);
	transform:translateX(-50%) translateY(-6px);
}
.nav-list a::after{
	top:calc(100% + 6px);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:6px solid var(--accent);
	transform:translateX(-50%) translateY(6px) scale(0.92);
}
.nav-list a.active::before,
.nav-list a:hover::before,
.nav-list a:focus-visible::before{
	width:60%;
	opacity:1;
	transform:translateX(-50%) translateY(0);
}
.nav-list a.active::after,
.nav-list a:hover::after,
.nav-list a:focus-visible::after{
	opacity:1;
	transform:translateX(-50%) translateY(0) scale(1);
}

/* Selector de idioma */
.lang-switch{
	display:flex;
	flex-shrink:0;
	margin-left:0.75rem;
	border:1px solid var(--line-strong);
}
.lang-switch button{
	padding:0.3rem 0.55rem;
	font-family:var(--font-mono);
	font-size:0.8rem;
	letter-spacing:0.08em;
	color:var(--muted);
	background:none;
	border:0;
	transition:background-color 180ms ease, color 180ms ease;
}
.lang-switch button:hover{color:var(--fg)}
.lang-switch button[aria-pressed="true"]{
	color:var(--fg);
	background:var(--accent-dark);
}

/* Botón hamburguesa */
.nav-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:42px;
	height:42px;
	margin-left:0.75rem;
	padding:0 9px;
	background:none;
	border:1px solid var(--line-strong);
}
.nav-toggle span{
	display:block;
	height:2px;
	background:var(--fg);
	transition:transform 220ms ease, opacity 220ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1180px){
	.nav-toggle{display:flex}
	.lang-switch{margin-left:auto}
	.nav-list{
		position:absolute;
		top:calc(var(--header-height) - 4px);
		right:1rem;
		min-width:230px;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		margin:0;
		padding:0.5rem;
		background:var(--bg-2);
		border:1px solid var(--line-strong);
		opacity:0;
		visibility:hidden;
		transform:translateY(-8px);
		transition:opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 260ms;
	}
	.nav-list.open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
		transition:opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
	}
	.nav-list a{padding:0.7rem 0.8rem}
	/* en vertical, el indicador pasa a ser una barra lateral */
	.nav-list a::before{
		top:50%;
		left:0;
		width:3px;
		height:0;
		transform:translateY(-50%);
	}
	.nav-list a.active::before,
	.nav-list a:hover::before,
	.nav-list a:focus-visible::before{
		width:3px;
		height:60%;
		transform:translateY(-50%);
	}
	.nav-list a::after{display:none}
}

/* Barra de progreso del scroll en el borde inferior del header */
.scroll-progress{
	position:absolute;
	left:0;
	right:0;
	bottom:-1px;
	height:2px;
	pointer-events:none;
}
.scroll-progress span{
	display:block;
	height:100%;
	background:linear-gradient(90deg, var(--accent-dark), var(--accent));
	box-shadow:0 0 8px rgba(212,32,44,0.6);
	transform:scaleX(0);
	transform-origin:left;
}

/* =========================================================
   Botones (esquinas recortadas)
   ========================================================= */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0.8rem 1.6rem;
	font-family:var(--font-display);
	font-weight:700;
	font-size:1.05rem;
	text-transform:uppercase;
	letter-spacing:0.08em;
	text-decoration:none;
	clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
	transition:background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.btn-primary{
	background:var(--accent-dark);
	color:var(--fg);
}
.btn-primary:hover,
.btn-primary:focus-visible{
	background:var(--accent);
	color:#fff;
	transform:translateY(-2px);
}
.btn-ghost{
	background:rgba(141,15,22,0.12);
	color:var(--fg);
	box-shadow:inset 0 0 0 1px var(--line-strong);
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
	background:rgba(212,32,44,0.22);
	transform:translateY(-2px);
}
a:focus-visible,
button:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:3px;
}

/* =========================================================
   Portada
   ========================================================= */
.hero{
	position:relative;
	min-height:100vh;
	min-height:100svh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding-top:var(--header-height);
	overflow:hidden;
}

/* fondo binario difuminado */
.hero-bg{
	position:absolute;
	inset:0;
	background:url('imagenes/Binarios.webp') center / cover no-repeat;
	opacity:0.06;
	-webkit-mask-image:radial-gradient(ellipse at 70% 45%, #000 10%, transparent 70%);
	mask-image:radial-gradient(ellipse at 70% 45%, #000 10%, transparent 70%);
	pointer-events:none;
}

/* mapa de red animado (canvas); más tenue en la zona del texto */
.hero-net{
	position:absolute;
	inset:0;
	pointer-events:none;
	-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 40%, #000 70%);
	mask-image:linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 40%, #000 70%);
}

.hero-content{
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
	align-items:center;
	gap:clamp(2rem, 5vw, 4rem);
	padding-top:3rem;
	padding-bottom:6rem;
}

.hud-label{
	display:inline-flex;
	align-items:center;
	margin:0 0 1.25rem;
	padding:0.3rem 0.8rem;
	font-family:var(--font-mono);
	font-size:0.85rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--accent-text);
	border:1px solid var(--line-strong);
	background:rgba(141,15,22,0.12);
}

.terminal-line{
	font-family:var(--font-mono);
	color:var(--fg);
	margin:0 0 0.75rem;
}
.prompt{color:var(--accent-text)}
.terminal-line .blink-cursor{color:var(--accent);margin-left:2px}

.hero h1{
	font-size:clamp(2.6rem, 7vw, 5.4rem);
	text-transform:uppercase;
	line-height:0.95;
	letter-spacing:0.01em;
	margin-bottom:1.25rem;
	text-shadow:0 0 40px rgba(141,15,22,0.45);
}

.subtitle{
	max-width:38rem;
	font-size:clamp(1rem, 1.6vw, 1.15rem);
	color:var(--muted);
	margin-bottom:2rem;
}
.subtitle .sep{color:var(--accent);font-family:var(--font-mono)}

.hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}

/* Texto con efecto glitch: dos copias desplazadas (rojo vivo y hueso) */
.glitch{
	position:relative;
	display:inline-block;
}
.glitch::before,
.glitch::after{
	content:attr(data-text);
	position:absolute;
	left:0;
	top:0;
	width:100%;
	pointer-events:none;
	opacity:0;
}
.glitch::before{
	color:var(--accent);
	animation:glitch-a 5s infinite steps(1);
}
.glitch::after{
	color:var(--bone);
	animation:glitch-b 5s infinite steps(1);
}
@keyframes glitch-a{
	0%, 88%, 100%{opacity:0;transform:none;clip-path:none}
	89%{opacity:0.9;transform:translate(-3px,1px);clip-path:inset(10% 0 60% 0)}
	91%{opacity:0.9;transform:translate(3px,-1px);clip-path:inset(55% 0 20% 0)}
	93%{opacity:0.9;transform:translate(-2px,0);clip-path:inset(30% 0 45% 0)}
	95%{opacity:0}
}
@keyframes glitch-b{
	0%, 88%, 100%{opacity:0;transform:none;clip-path:none}
	90%{opacity:0.7;transform:translate(3px,-1px);clip-path:inset(65% 0 5% 0)}
	92%{opacity:0.7;transform:translate(-3px,2px);clip-path:inset(5% 0 75% 0)}
	94%{opacity:0.7;transform:translate(2px,0);clip-path:inset(40% 0 35% 0)}
	96%{opacity:0}
}

/* Ficha de perfil escaneado */
.hero-visual{
	display:flex;
	justify-content:flex-end;
}
.profile-card{
	position:relative;
	width:min(100%, 420px);
	padding:1.1rem 1.25rem 1.25rem;
	overflow:hidden;
	font-family:var(--font-mono);
	background:rgba(12,7,8,0.85);
	border:1px solid var(--line);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	box-shadow:0 0 60px rgba(141,15,22,0.15);
	transition:transform 400ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease;
}
.corner{
	position:absolute;
	width:22px;
	height:22px;
	border:0 solid var(--accent);
	z-index:1;
}
.c-tl{top:0;left:0;border-top-width:3px;border-left-width:3px}
.c-tr{top:0;right:0;border-top-width:3px;border-right-width:3px}
.c-bl{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}
.c-br{bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}

.profile-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1rem;
	padding-bottom:0.75rem;
	margin-bottom:1rem;
	border-bottom:1px dashed var(--line-strong);
	font-size:0.72rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--muted);
}
.profile-head > span{display:inline-flex;align-items:center}
.profile-head b{color:var(--accent-text);font-weight:400;margin-left:0.4rem;min-width:4ch}
.profile-head .status-dot{width:7px;height:7px}

.profile-main{
	display:grid;
	grid-template-columns:96px minmax(0,1fr);
	gap:1rem;
	align-items:start;
}
.profile-avatar{
	--pad:0px;
	position:relative;
	aspect-ratio:1/1;
	overflow:hidden;
	border:1px solid var(--line-strong);
}
.profile-avatar img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.profile-data{
	display:grid;
	gap:0.5rem;
	margin:0;
}
.profile-data dt{
	font-size:0.66rem;
	text-transform:uppercase;
	letter-spacing:0.14em;
	color:var(--muted);
}
.profile-data dd{
	margin:0;
	font-size:0.95rem;
	line-height:1.3;
	color:var(--fg);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.profile-status,
.profile-threat{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:0.9rem;
	font-size:0.72rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--muted);
}
.profile-status{
	margin-top:1rem;
	padding-top:0.8rem;
	border-top:1px dashed var(--line-strong);
}
.profile-status b{color:var(--accent-text);font-weight:400;font-size:0.9rem}
.profile-threat{margin-top:0.55rem}
.profile-threat b{color:var(--bone);font-weight:400;font-size:0.9rem;min-width:4ch;text-align:right}
.threat-meter{
	display:flex;
	gap:3px;
	flex:1;
	max-width:120px;
}
.threat-meter i{
	flex:1;
	height:8px;
	background:rgba(255,255,255,0.07);
	transform:skewX(-20deg);
	transition:background-color 300ms ease, box-shadow 300ms ease;
}
.threat-meter i.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.is-scanning .threat-meter i.on{background:rgba(255,255,255,0.07);box-shadow:none}

/* barrido de escaneo al aparecer la ficha */
.profile-sweep{
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:45%;
	background:linear-gradient(to bottom, transparent, rgba(212,32,44,0.14) 85%, rgba(212,32,44,0.7));
	opacity:0;
	pointer-events:none;
	z-index:2;
}
.scan-run .profile-sweep{animation:sweep 1.1s ease-in-out forwards}
@keyframes sweep{
	0%{opacity:1;transform:translateY(-100%)}
	85%{opacity:1}
	100%{opacity:0;transform:translateY(230%)}
}

/* línea que recorre el avatar de arriba abajo */
.scan-line{
	position:absolute;
	left:var(--pad);
	right:var(--pad);
	top:var(--pad);
	height:2px;
	background:var(--accent);
	box-shadow:0 0 12px 2px rgba(212,32,44,0.6);
	animation:scan 3.2s ease-in-out infinite;
}
@keyframes scan{
	0%,100%{top:var(--pad);opacity:0.2}
	50%{top:calc(100% - var(--pad) - 2px);opacity:1}
}

/* Cinta inferior inclinada */
.ticker{
	position:absolute;
	left:-2%;
	right:-2%;
	bottom:2.2rem;
	overflow:hidden;
	background:var(--accent-dark);
	color:var(--fg);
	transform:rotate(-1.5deg);
	box-shadow:0 0 30px rgba(141,15,22,0.35);
}
.ticker-track{
	display:flex;
	width:max-content;
	animation:ticker 28s linear infinite;
}
.ticker-track span{
	padding:0.45rem 1.4rem;
	font-family:var(--font-display);
	font-weight:700;
	font-size:1rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	white-space:nowrap;
}
.ticker-track span::after{
	content:"///";
	margin-left:2.8rem;
	color:rgba(0,0,0,0.55);
}
@keyframes ticker{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}

@media (max-width:900px){
	.hero-content{
		grid-template-columns:1fr;
		text-align:left;
		padding-bottom:7rem;
	}
	.hero-visual{justify-content:flex-start}
}
@media (max-width:420px){
	.profile-main{grid-template-columns:72px minmax(0,1fr)}
	.profile-card{padding:1rem}
}

/* =========================================================
   Secciones genéricas
   ========================================================= */
main > section:not(.hero){
	padding-top:5.5rem;
	padding-bottom:2rem;
	scroll-margin-top:calc(var(--header-height) - 1.5rem);
}

.section-head{
	display:flex;
	align-items:center;
	gap:1rem;
	margin-bottom:2.25rem;
}
.section-index{
	font-family:var(--font-mono);
	font-size:0.95rem;
	color:var(--accent);
}
.section-index::before{
	content:"//";
	color:var(--accent-dark);
	margin-right:0.35rem;
}
.section-head h2{
	font-size:clamp(1.55rem, 8vw, 3rem);
	text-transform:uppercase;
	white-space:nowrap;
}
@media (max-width:360px){
	.section-head h2{white-space:normal;overflow-wrap:anywhere}
}
.section-line{
	flex:1;
	height:1px;
	background:linear-gradient(90deg, var(--line-strong), transparent);
}
.section-intro{
	margin:-1rem 0 1.5rem;
	color:var(--muted);
}
.section-intro code{
	padding:0.1rem 0.45rem;
	font-family:var(--font-mono);
	color:var(--accent-text);
	background:rgba(141,15,22,0.15);
	border:1px solid var(--line);
}

/* Panel con esquina superior derecha recortada y marca roja */
.panel{
	position:relative;
	background:var(--panel);
	border:1px solid var(--line);
	clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.panel::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:44px;
	height:3px;
	background:var(--accent);
}

/* Aparición al hacer scroll (solo si hay JS) */
.js .reveal{
	opacity:0;
	transform:translateY(18px);
	transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.8,.2,1);
}
.js .reveal.is-visible{
	opacity:1;
	transform:none;
}

/* =========================================================
   Sobre mí
   ========================================================= */
.about-grid{
	display:grid;
	grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
	gap:1.25rem;
	align-items:start;
}
.about-text{
	padding:2rem;
	color:var(--muted);
	text-align:justify;
}
.about-text p:last-child{margin-bottom:0}

.about-stats{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.25rem;
}
.stat{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:0.5rem;
	min-height:130px;
	padding:1.25rem;
	background:var(--panel);
	border:1px solid var(--line);
	border-left:3px solid var(--accent-dark);
}
.stat-value{
	font-family:var(--font-display);
	font-weight:700;
	font-size:2.4rem;
	line-height:1;
	color:var(--accent);
	text-shadow:0 0 18px rgba(212,32,44,0.35);
}
.stat-value small{
	font-size:1rem;
	margin-left:0.25rem;
	color:var(--fg);
	text-shadow:none;
}
.stat-label{
	font-family:var(--font-mono);
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.06em;
	color:var(--muted);
}

@media (max-width:900px){
	.about-grid{grid-template-columns:1fr}
	.about-text{text-align:left;padding:1.5rem}
}

/* =========================================================
   Trayectoria
   ========================================================= */
.timeline{
	list-style:none;
	margin:0;
	padding:0 0 0 2rem;
	position:relative;
	display:grid;
	gap:1.25rem;
}
.timeline::before{
	content:"";
	position:absolute;
	top:0.5rem;
	bottom:0.5rem;
	left:7px;
	width:1px;
	background:linear-gradient(var(--accent), rgba(141,15,22,0.15));
}
.timeline-item{position:relative}
.timeline-node{
	position:absolute;
	left:calc(-2rem + 2px);
	top:1.6rem;
	width:11px;
	height:11px;
	background:var(--bg);
	border:2px solid var(--accent-dark);
	transform:rotate(45deg);
}
.timeline-item.is-current .timeline-node{
	background:var(--accent);
	border-color:var(--accent);
	box-shadow:0 0 12px var(--accent);
	animation:pulse 1.6s ease-in-out infinite;
}
.timeline-card{padding:1.4rem 1.6rem}
.timeline-card h3{font-size:1.45rem;margin-bottom:0.2rem}
.timeline-card p{color:var(--muted);margin:0.5rem 0 0}
.timeline-card .timeline-sub{
	font-family:var(--font-mono);
	font-size:0.85rem;
	color:var(--bone);
	margin-top:0;
}
.timeline-status{
	display:inline-block;
	margin-bottom:0.5rem;
	font-family:var(--font-mono);
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.08em;
	color:var(--muted);
}
.is-current .timeline-status{color:var(--accent-text)}

/* =========================================================
   Proyectos
   ========================================================= */
.gallery{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap:1.25rem;
}

.project-card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:var(--panel);
	border:1px solid var(--line);
	clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	transition:border-color 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), opacity 600ms ease;
}
/* más específico que .js .reveal para no perder el efecto hover tras la aparición */
.js .gallery .project-card{
	transition:border-color 220ms ease, transform 300ms cubic-bezier(.2,.8,.2,1), opacity 600ms ease;
}
.gallery .project-card:hover,
.js .gallery .project-card.is-visible:hover{
	border-color:var(--accent);
	transform:translateY(-6px);
}

.project-media{
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:16/10;
	padding:0;
	border:0;
	border-bottom:1px solid var(--line);
	background:#000;
	overflow:hidden;
}
.project-media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
	filter:saturate(0.6) brightness(0.85);
	transition:transform 400ms ease, filter 400ms ease;
}
/* tinte rojo y líneas de escaneo sobre la captura */
.project-media::after{
	content:"";
	position:absolute;
	inset:0;
	background:
		repeating-linear-gradient(to bottom, rgba(0,0,0,0.08) 0 1px, transparent 1px 3px),
		linear-gradient(rgba(141,15,22,0.18), rgba(141,15,22,0.18));
	pointer-events:none;
	transition:opacity 400ms ease;
}
.media-hint{
	position:absolute;
	left:50%;
	top:50%;
	z-index:1;
	padding:0.35rem 0.8rem;
	font-family:var(--font-mono);
	font-size:0.85rem;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:#fff;
	background:var(--accent);
	opacity:0;
	transform:translate(-50%,-40%);
	transition:opacity 220ms ease, transform 220ms ease;
	white-space:nowrap;
}
.project-card:hover .project-media img,
.project-media:focus-visible img{
	transform:scale(1.05);
	filter:saturate(1) brightness(1);
}
.project-card:hover .project-media::after{opacity:0.4}
.project-card:hover .media-hint,
.project-media:focus-visible .media-hint{
	opacity:1;
	transform:translate(-50%,-50%);
}

.project-info{
	display:flex;
	flex:1;
	flex-direction:column;
	align-items:flex-start;
	padding:1.25rem 1.4rem 1.4rem;
}
.project-info h3{font-size:1.4rem;margin:0.5rem 0 0.4rem}
.project-info p{color:var(--muted);margin:0;font-size:0.95rem}
.project-tag{
	display:inline-block;
	padding:0.15rem 0.55rem;
	font-family:var(--font-mono);
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--accent-text);
	border:1px solid var(--line-strong);
}
.pending{
	font-family:var(--font-mono);
	font-size:0.85rem !important;
	opacity:0.7;
}
.project-open{
	margin-top:auto;
	padding:1rem 0 0;
	font-family:var(--font-mono);
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--accent-text);
	background:none;
	border:0;
}
.project-open:hover{color:var(--fg)}

/* =========================================================
   Ficha de proyecto (panel lateral)
   ========================================================= */
html.panel-open body{overflow:hidden}
.project-panel{
	position:fixed;
	inset:0;
	z-index:10050;
	visibility:hidden;
	pointer-events:none;
	transition:visibility 0s linear 400ms;
}
.project-panel.open{
	visibility:visible;
	pointer-events:auto;
	transition:none;
}
.pp-backdrop{
	position:absolute;
	inset:0;
	background:rgba(3,2,2,0.78);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
	opacity:0;
	transition:opacity 300ms ease;
}
.project-panel.open .pp-backdrop{opacity:1}
.pp-dialog{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	width:min(100%, 760px);
	background:var(--bg-2);
	border-left:1px solid var(--line-strong);
	box-shadow:-30px 0 80px rgba(0,0,0,0.6);
	transform:translateX(100%);
	transition:transform 400ms cubic-bezier(.2,.8,.2,1);
	outline:none;
}
.project-panel.open .pp-dialog{transform:none}
.pp-dialog::before{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:-1px;
	width:3px;
	background:linear-gradient(var(--accent), transparent 40%);
}
.pp-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1rem;
	padding:0.9rem 1.5rem;
	border-bottom:1px solid var(--line);
	font-family:var(--font-mono);
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--muted);
}
.pp-close{
	padding:0.35rem 0.7rem;
	font-size:1rem;
	color:var(--fg);
	background:var(--accent-dark);
	border:0;
}
.pp-close:hover{background:var(--accent)}
.pp-body{
	flex:1;
	overflow-y:auto;
	padding:1.75rem 1.5rem 2.5rem;
	scrollbar-width:thin;
	scrollbar-color:var(--accent-dark) transparent;
}
.pp-title{
	font-size:clamp(1.8rem, 4vw, 2.6rem);
	text-transform:uppercase;
	margin:0.7rem 0 1.25rem;
}
.pp-figure{
	position:relative;
	display:block;
	margin-bottom:0.75rem;
	background:#000;
	border:1px solid var(--line-strong);
	overflow:hidden;
}
.pp-figure img{
	display:block;
	width:100%;
	height:auto;
	max-height:52vh;
	object-fit:contain;
}
.pp-figure:hover .media-hint,
.pp-figure:focus-visible .media-hint{
	opacity:1;
	transform:translate(-50%,-50%);
}
.pp-thumbs{
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
	margin-bottom:1.5rem;
}
.pp-thumbs button{
	width:84px;
	aspect-ratio:16/10;
	padding:0;
	background:#000;
	border:1px solid var(--line);
	opacity:0.55;
	overflow:hidden;
}
.pp-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.pp-thumbs button[aria-current="true"]{opacity:1;border-color:var(--accent)}
.pp-content{margin-top:1.5rem}
.pp-content .pd-summary{
	font-size:1.05rem;
	color:var(--fg);
	margin-bottom:1.5rem;
}
.pp-content dl{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap:1rem;
	margin:0;
}
.pp-content dl > div{
	padding:1rem 1.1rem;
	background:rgba(255,255,255,0.02);
	border:1px solid var(--line);
	border-left:3px solid var(--accent-dark);
}
.pp-content dt{
	margin-bottom:0.3rem;
	font-family:var(--font-mono);
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--accent-text);
}
.pp-content dd{margin:0;color:var(--muted)}
.pp-content .pd-links{
	display:flex;
	flex-wrap:wrap;
	gap:0.75rem;
	margin-top:1.5rem;
}

/* =========================================================
   Habilidades
   ========================================================= */
.skill-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap:1.25rem;
}
.skill-card{padding:1.5rem}
.skill-code{
	font-family:var(--font-mono);
	font-size:0.8rem;
	letter-spacing:0.1em;
	color:var(--accent-text);
}
.skill-card h3{font-size:1.35rem;margin:0.35rem 0 1rem}

/* etiquetas de herramientas (para cuando se rellenen) */
.chips{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
}
.chips li{
	padding:0.25rem 0.65rem;
	font-family:var(--font-mono);
	font-size:0.85rem;
	color:var(--fg);
	background:rgba(141,15,22,0.15);
	border:1px solid var(--line-strong);
}

.loading-line{
	margin:0;
	font-family:var(--font-mono);
	font-size:0.85rem;
	color:var(--muted);
}
.loading-bar{
	display:block;
	position:relative;
	height:3px;
	margin-top:0.6rem;
	background:rgba(255,255,255,0.05);
	overflow:hidden;
}
.loading-bar::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width:35%;
	background:var(--accent);
	animation:loading 1.8s ease-in-out infinite;
}
@keyframes loading{
	from{left:-35%}
	to{left:100%}
}

/* =========================================================
   Certificaciones
   ========================================================= */
.cert-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap:1.25rem;
}
.cert-card{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:0.4rem;
	min-height:170px;
	padding:1.4rem 1.5rem;
	background:var(--panel);
	border:1px solid var(--line);
	border-left:3px solid var(--accent);
	clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cert-card.is-locked{
	border-style:dashed;
	border-left:3px solid var(--accent-dark);
	background:
		repeating-linear-gradient(135deg, rgba(141,15,22,0.07) 0 10px, transparent 10px 20px),
		var(--panel);
}
.cert-icon{
	width:26px;
	height:26px;
	margin-bottom:0.4rem;
	color:var(--accent-dark);
}
.cert-status{
	font-family:var(--font-mono);
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--accent-text);
}
.cert-card h3{font-size:1.25rem}
.cert-card.is-locked h3{color:var(--muted)}
.cert-meta{
	margin:0;
	font-family:var(--font-mono);
	font-size:0.8rem;
	color:var(--muted);
	letter-spacing:0.06em;
}
.cert-card.is-locked .cert-meta{color:rgba(141,15,22,0.6)}
.cert-link{
	margin-top:auto;
	padding-top:0.6rem;
	font-family:var(--font-mono);
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--accent-text);
	text-decoration:none;
}
.cert-link:hover{color:var(--fg)}

/* =========================================================
   Ventanas de terminal (contacto y terminal interactiva)
   ========================================================= */
.terminal{
	background:var(--panel);
	border:1px solid var(--line-strong);
	box-shadow:0 0 40px rgba(141,15,22,0.12);
}
.terminal-bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0.5rem 1rem;
	font-family:var(--font-mono);
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--fg);
	background:var(--accent-dark);
}
.terminal-bar-dots{display:flex;gap:6px}
.terminal-bar-dots i{width:10px;height:10px;background:var(--fg);opacity:0.45}
.terminal-body{padding:1.75rem}
.terminal-msg{
	max-width:42rem;
	color:var(--muted);
	margin-bottom:1.75rem;
}

.contact-links{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap:1rem;
}
.contact-link{
	display:grid;
	grid-template-columns:auto 1fr;
	grid-template-rows:auto auto;
	column-gap:0.9rem;
	align-items:center;
	padding:1rem 1.1rem;
	color:var(--fg);
	text-decoration:none;
	background:rgba(255,255,255,0.02);
	border:1px solid var(--line);
	transition:border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.contact-link .icon{
	grid-row:1 / span 2;
	width:28px;
	height:28px;
	color:var(--accent);
	transition:color 180ms ease;
}
.contact-name{
	font-family:var(--font-display);
	font-weight:700;
	font-size:1.15rem;
	text-transform:uppercase;
	letter-spacing:0.06em;
	line-height:1.2;
}
.contact-handle{
	font-family:var(--font-mono);
	font-size:0.8rem;
	color:var(--muted);
}
.contact-link:hover,
.contact-link:focus-visible{
	border-color:var(--accent);
	background:rgba(141,15,22,0.14);
	transform:translateY(-3px);
}
.contact-link:hover .icon,
.contact-link:focus-visible .icon{color:var(--fg)}

/* Terminal interactiva */
.cli{transition:border-color 200ms ease, box-shadow 200ms ease}
.cli:focus-within{
	border-color:var(--accent);
	box-shadow:0 0 40px rgba(212,32,44,0.15);
}
.cli-body{
	height:380px;
	overflow-y:auto;
	padding:1.25rem 1.5rem;
	font-family:var(--font-mono);
	font-size:0.92rem;
	cursor:text;
	scrollbar-width:thin;
	scrollbar-color:var(--accent-dark) transparent;
}
.cli-body::-webkit-scrollbar{width:8px}
.cli-body::-webkit-scrollbar-thumb{background:var(--accent-dark)}

.cli-line{
	line-height:1.6;
	color:var(--fg);
	white-space:pre-wrap;
	word-break:break-word;
}
.cli-muted{color:var(--muted)}
.cli-error{color:#ff6b5c}
.cli-accent{color:var(--accent-text)}
.cli-ok{color:var(--bone);font-weight:600}

.cli-input-line{
	display:flex;
	align-items:center;
	gap:0.6rem;
}
.cli-input-line .prompt{flex-shrink:0}
.cli-input-line input{
	flex:1;
	min-width:0;
	padding:0;
	font:inherit;
	color:var(--fg);
	background:transparent;
	border:0;
	outline:none;
	caret-color:var(--accent);
}
@media (max-width:700px){
	.cli-body{height:340px;padding:1rem;font-size:0.85rem}
	.cli-input-line input{font-size:16px} /* evita el zoom automático en iOS */
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
	margin-top:5rem;
	border-top:1px solid var(--line);
	background:rgba(6,4,5,0.7);
}
.footer-inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	gap:0.5rem 1.5rem;
	padding-top:1.25rem;
	padding-bottom:1.25rem;
}
.site-footer p{
	margin:0;
	font-family:var(--font-mono);
	font-size:0.8rem;
	color:var(--muted);
}
.footer-status{
	display:inline-flex;
	align-items:center;
	text-transform:uppercase;
	letter-spacing:0.08em;
}

/* =========================================================
   Secuencia de arranque
   ========================================================= */
.boot{display:none}
html.booting body{overflow:hidden}
html.booting .boot{
	position:fixed;
	inset:0;
	z-index:20000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1.5rem;
	background:#030202;
}
.boot-inner{
	width:min(100%, 640px);
	font-family:var(--font-mono);
	color:var(--fg);
}
.boot-log{
	min-height:15em;
	font-size:clamp(0.8rem, 2.4vw, 0.95rem);
	line-height:1.85;
}
.boot-ok{color:var(--accent)}
.boot-wait{color:var(--bone)}
.boot-bar{
	height:3px;
	margin:1.2rem 0 1.5rem;
	background:rgba(255,255,255,0.06);
}
.boot-bar span{
	display:block;
	width:0;
	height:100%;
	background:var(--accent);
	box-shadow:0 0 10px var(--accent);
	transition:width 160ms ease;
}
.boot-granted-msg{
	margin:0;
	font-family:var(--font-display);
	font-weight:700;
	font-size:clamp(2rem, 7vw, 3.6rem);
	line-height:1;
	text-transform:uppercase;
	letter-spacing:0.06em;
	color:var(--accent);
	text-shadow:0 0 30px rgba(212,32,44,0.5);
	opacity:0;
}
.boot-granted .boot-granted-msg{opacity:1}
.boot .glitch::before,
.boot .glitch::after{animation-duration:0.8s}
.boot-skip{
	margin:1.75rem 0 0;
	font-size:0.72rem;
	text-transform:uppercase;
	letter-spacing:0.14em;
	color:var(--muted);
	opacity:0.7;
}
/* salida tipo monitor CRT que se apaga */
.boot.boot-out{animation:boot-out 450ms steps(5) forwards}
@keyframes boot-out{
	0%{opacity:1;clip-path:inset(0)}
	40%{clip-path:inset(28% 0 28% 0);transform:translateX(-6px)}
	70%{clip-path:inset(48% 0 48% 0);transform:translateX(8px)}
	100%{opacity:0;clip-path:inset(50% 0 50% 0)}
}

/* =========================================================
   Transición glitch (franjas a pantalla completa)
   ========================================================= */
.glitch-fx{
	position:fixed;
	inset:0;
	z-index:9500;
	display:none;
	pointer-events:none;
}
.glitch-fx.active{display:block}
.glitch-fx span{
	position:absolute;
	left:0;
	right:0;
	opacity:0;
	transform:translateX(var(--shift));
	animation:glitch-bar 380ms steps(3) forwards;
}
.glitch-fx .inv{
	-webkit-backdrop-filter:invert(1) hue-rotate(180deg);
	backdrop-filter:invert(1) hue-rotate(180deg);
}
.glitch-fx .red{background:rgba(212,32,44,0.45);mix-blend-mode:screen}
.glitch-fx .bone{background:rgba(232,226,220,0.25);mix-blend-mode:screen}
@keyframes glitch-bar{
	0%{opacity:1;transform:translateX(var(--shift))}
	50%{opacity:1;transform:translateX(calc(var(--shift) * -1))}
	100%{opacity:0;transform:translateX(0)}
}

/* =========================================================
   Modo hackeado (easter egg): la web pasa a verde "intruso"
   ========================================================= */
html.hacked{
	--accent:#39ff6a;
	--accent-text:#5dff86;
	--accent-dark:#0f6a2c;
	--bone:#b6ffc8;
	--line:rgba(57,255,106,0.22);
	--line-strong:rgba(57,255,106,0.5);
}
html.hacked main,
html.hacked .site-header{animation:hacked-flicker 0.18s steps(2) infinite}
html.hacked .fx-scanlines{
	background:repeating-linear-gradient(to bottom, rgba(57,255,106,0.07) 0 1px, transparent 1px 3px);
}
@keyframes hacked-flicker{
	0%{transform:translateX(0);opacity:1}
	50%{transform:translateX(1px);opacity:0.93}
	100%{transform:translateX(-1px);opacity:1}
}

.hacked-msg{
	position:fixed;
	inset:0;
	z-index:9600;
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.75rem;
	padding:1.5rem;
	text-align:center;
	pointer-events:none;
	background:radial-gradient(ellipse at center, rgba(0,30,10,0.8), rgba(3,6,4,0.45) 70%);
}
html.hacked .hacked-msg{display:flex}
.hacked-title{
	margin:0;
	font-family:var(--font-display);
	font-weight:700;
	font-size:clamp(2.2rem, 8vw, 5rem);
	line-height:1;
	text-transform:uppercase;
	letter-spacing:0.05em;
	color:#39ff6a;
	text-shadow:0 0 30px rgba(57,255,106,0.6);
}
.hacked-msg .glitch::before,
.hacked-msg .glitch::after{animation-duration:0.6s}
.hacked-sub{
	margin:0;
	font-family:var(--font-mono);
	font-size:0.9rem;
	letter-spacing:0.08em;
	color:var(--fg);
}

/* =========================================================
   Tarjetas 3D (inclinación con el ratón)
   ========================================================= */
.js [data-tilt].is-tilting{
	transition:transform 90ms linear, border-color 220ms ease, opacity 600ms ease;
	border-color:var(--accent);
}
/* reflejo que sigue al ratón */
.project-card[data-tilt]::after,
.skill-card[data-tilt]::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	pointer-events:none;
	background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.09), transparent 45%);
	opacity:0;
	transition:opacity 220ms ease;
}
.project-card.is-tilting::after,
.skill-card.is-tilting::after{opacity:1}

/* =========================================================
   Movimiento reducido: desactivar animaciones
   ========================================================= */
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto}
	*, *::before, *::after{
		animation:none !important;
		transition:none !important;
	}
	.glitch::before, .glitch::after{display:none}
}