@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================
   CONFIGURACIÓN - LÍNEA DECORATIVA HEADER
   ============================================ */
:root {
	/* Cambia este valor a 0 para DESACTIVAR la línea decorativa */
	/* Cambia a 1 para ACTIVAR la línea decorativa */
	--header-line-enabled: 0;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	background-color: #212121;
	background-image: url('images/FondoWeb.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #ececec;
	overflow-x: hidden;
	min-height: 100vh;
	transition: background-image 0.6s ease-in-out;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.red-theme {
	background-color: #2d1b1b;
	background-image: url('images/FondoWeb_Arte.png');
}

body.green-theme {
	background-color: #1b2d1b;
	background-image: url('images/FondoWeb_Todo.png');
}

body.yellow-theme {
	background-color: #2d2d1b;
	background-image: url('images/FondoWeb_Diseño.png');
}

body.blue-theme {
	background-color: #1b1b2d;
	background-image: url('images/FondoWeb_Programacion.png');
}

body.purple-theme {
	background-color: #2d1b2d;
	background-image: url('images/FondoWeb_Produccion.png');
}

body.pink-theme {
	background-color: #2d1b24;
	background-image: url('./images/FondoWeb_Comunicacion.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.header-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 75px;
	background: rgba(17, 17, 27, 0.85);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(34, 197, 94, 0.3) 20%,
			rgba(22, 163, 74, 0.4) 50%,
			rgba(16, 185, 129, 0.3) 80%,
			transparent 100%) 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body:has(.section.portfolio.slide-left .project-viewer.active) .header-bar {
	height: 55px;
}

body.red-theme .header-bar {
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(248, 113, 113, 0.3) 20%,
			rgba(239, 68, 68, 0.4) 50%,
			rgba(248, 113, 113, 0.3) 80%,
			transparent 100%) 1;
}

body.blue-theme .header-bar {
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(96, 165, 250, 0.3) 20%,
			rgba(59, 130, 246, 0.4) 50%,
			rgba(96, 165, 250, 0.3) 80%,
			transparent 100%) 1;
}

body.yellow-theme .header-bar {
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(251, 191, 36, 0.3) 20%,
			rgba(245, 158, 11, 0.4) 50%,
			rgba(251, 191, 36, 0.3) 80%,
			transparent 100%) 1;
}

body.purple-theme .header-bar {
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(192, 132, 252, 0.3) 20%,
			rgba(168, 85, 247, 0.4) 50%,
			rgba(192, 132, 252, 0.3) 80%,
			transparent 100%) 1;
}

body.pink-theme .header-bar {
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(244, 114, 182, 0.3) 20%,
			rgba(236, 72, 153, 0.4) 50%,
			rgba(244, 114, 182, 0.3) 80%,
			transparent 100%) 1;
}

body.green-theme .header-bar {
	border-image: linear-gradient(90deg,
			transparent 0%,
			rgba(34, 197, 94, 0.3) 20%,
			rgba(22, 163, 74, 0.4) 50%,
			rgba(16, 185, 129, 0.3) 80%,
			transparent 100%) 1;
}

.header-content {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 100%;
	padding: 0 20px 0 250px;
	position: relative;
	z-index: 2;
	gap: 30px;
}

.header-content>.section-title-header {
	position: relative;
	flex-shrink: 0;
	z-index: 2;
	order: 1;
}

/* Línea decorativa entre título y botones */
.header-content::before {
	content: '';
	flex-grow: 1;
	height: 1px;
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0.1) 0%,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0.1) 100%);
	order: 2;
	opacity: var(--header-line-enabled);
	transition: opacity 0.3s ease;
}

.header-content>.header-nav {
	position: relative;
	flex-shrink: 0;
	z-index: 2;
	transition: all 0.3s ease;
	order: 3;
}

/* Selector de idioma posicionado fijo en la esquina izquierda */
.header-content>.language-selector {
	position: fixed;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10001;
	transition: all 0.3s ease;
}

/* Ajustar selector cuando el header se reduce */
body:has(.section.portfolio.slide-left .project-viewer.active) .language-selector {
	transform: translateY(-50%) scale(0.8);
}

body:has(.section.portfolio.slide-left .project-viewer.active) .language-selector .language-current {
	padding: 6px 12px;
	gap: 8px;
}

body:has(.section.portfolio.slide-left .project-viewer.active) .language-selector .language-flag {
	width: 24px;
	height: 24px;
	font-size: 16px;
}

body:has(.section.portfolio.slide-left .project-viewer.active) .language-selector .language-label {
	font-size: 8px;
}

body:has(.section.portfolio.slide-left .project-viewer.active) .language-selector .language-name {
	font-size: 12px;
}

/* Ajustar navegación cuando el header se reduce */
body:has(.section.portfolio.slide-left .project-viewer.active) .header-nav {
	transform: scale(0.85);
}

body:has(.section.portfolio.slide-left .project-viewer.active) .nav-btn {
	padding: 7px 18px;
	font-size: 0.8rem;
}

.section-title-header {
	font-size: 1.75rem;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body:has(.section.portfolio.slide-left .project-viewer.active) .section-title-header {
	font-size: 1.2rem;
}

body:has(.section.portfolio.slide-left .project-viewer.active) .header-content {
	padding: 0 20px 0 200px;
}

/* NUEVA NAVEGACIÓN DEL HEADER */
.header-nav {
	display: flex;
	gap: 8px;
	align-items: center;
}

.nav-btn {
	padding: 10px 24px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	position: relative;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav-btn:hover {
	color: rgba(255, 255, 255, 1);
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-btn.active {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* BOTÓN DE CONTACTO - VERDE COMPLETO */
.nav-btn-contact {
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: #18181b;
	font-weight: 700;
	border: none;
	box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3);
	position: relative;
	overflow: hidden;
}

.nav-btn-contact::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.nav-btn-contact:hover::before {
	left: 100%;
}

.nav-btn-contact::after {
	display: none;
}

.nav-btn-contact:hover {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
	color: #18181b;
}

.nav-btn-contact:hover::after {
	display: none;
}

.nav-btn-contact:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(74, 222, 128, 0.3);
}

/* Responsive móvil */
@media (max-width: 768px) {
	.header-content {
		padding: 0 10px 0 10px;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	.section-title-header {
		font-size: 1rem;
		min-width: auto;
		order: 2;
		flex: 1 0 100%;
		text-align: center;
		margin: 0;
	}

	.nav-btn {
		padding: 8px 16px;
		font-size: 0.85rem;
	}

	.header-nav {
		gap: 6px;
		order: 3;
	}

	.header-content>.language-selector {
		left: 10px;
		order: 1;
		position: fixed;
	}
}

.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	padding-top: 80px;
}

.section {
	position: absolute;
	width: 100vw;
	height: calc(100vh - 60px);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.section.curriculum {
	transform: translateX(0);
}

.section.portfolio {
	transform: translateX(100vw);
}

.section.curriculum.slide-left {
	transform: translateX(-100vw);
}

.section.portfolio.slide-left {
	transform: translateX(0);
}

.cv-container {
	width: 210mm;
	height: 297mm;
	position: relative;
	transform: scale(0.75);
	margin-top: -35px;
	/* Añade esto para subir el CV */
	transition: none;
	overflow: visible;
}

.cv-background {
	position: relative;
	width: 100%;
	height: 100%;
	background: transparent;
	pointer-events: none;
}

.cv-background div {
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

.cv-background div.animate-in {
	animation: flyIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cv-background div.animate-in-subtle {
	animation: flyInSubtle 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cv-background div.animation-complete {
	opacity: 1 !important;
}

@keyframes flyIn {
	0% {
		opacity: 0;
		transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(0.3) rotate(var(--start-rotate, 0deg));
	}

	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1) rotate(0deg);
	}
}

@keyframes flyInSubtle {
	0% {
		opacity: 0;
		transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(0.3) rotate(var(--start-rotate, 0deg));
	}

	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1) rotate(0deg);
	}
}

.cv-background img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#cv-tablon,
#cv-corcho,
#cv-circulo,
#cv-clip,
#cv-chincheta-verde,
#cv-sobre {
	transition: none !important;
}

#cv-sobre {
	pointer-events: none !important;
}

#cv-experiencia,
#cv-aptitudes,
#cv-resumen-personal,
#cv-targeta-javier,
#cv-licenciado,
#cv-photoshop,
#cv-zbrush,
#cv-opentoonz,
#cv-premiere,
#cv-after-effects,
#cv-unreal,
#cv-cascadeur,
#cv-marmoset,
#cv-substance,
#cv-3dmax,
#cv-maya,
#cv-blender,
#cv-unity,
#cv-illustrator,
#cv-portfolio-titulo {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: default;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

#cv-experiencia,
#cv-aptitudes,
#cv-resumen-personal,
#cv-targeta-javier,
#cv-licenciado {
	cursor: pointer;
}

#cv-entrada2,
#cv-entrada1,
#cv-diseno-grafico,
#cv-coral,
#cv-zapato,
#cv-modelado3d,
#cv-porky,
#cv-sydan,
#cv-ilustracion,
#cv-cinta-video2,
#cv-cinta-video1,
#cv-edicion,
#cv-artilugio,
#cv-webs,
#cv-consola,
#cv-videojuegos {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

#cv-experiencia:hover,
#cv-aptitudes:hover,
#cv-resumen-personal:hover,
#cv-licenciado:hover,
#cv-photoshop:hover,
#cv-zbrush:hover,
#cv-opentoonz:hover,
#cv-premiere:hover,
#cv-after-effects:hover,
#cv-unreal:hover,
#cv-cascadeur:hover,
#cv-marmoset:hover,
#cv-substance:hover,
#cv-3dmax:hover,
#cv-maya:hover,
#cv-blender:hover,
#cv-unity:hover,
#cv-illustrator:hover,
#cv-portfolio-titulo:hover {
	transform: scale(1.05) translateY(-2px) !important;
	z-index: 999 !important;
	filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1.12) contrast(1.05) saturate(1.15);
	animation: pulse-glow 1.5s ease-in-out infinite;
}

#cv-targeta-javier:hover {
	transform: scale(1.05) translateY(-2px) !important;
	z-index: 999 !important;
	filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1.03) contrast(1.01) saturate(1.02);
	animation: pulse-glow-subtle 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {

	0%,
	100% {
		filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1.12) contrast(1.05) saturate(1.15);
	}

	50% {
		filter: drop-shadow(0 0 6px rgba(74, 222, 128, 1)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) brightness(1.18) contrast(1.08) saturate(1.2);
	}
}

@keyframes pulse-glow-subtle {

	0%,
	100% {
		filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1.03) contrast(1.01) saturate(1.02);
	}

	50% {
		filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.95)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35)) brightness(1.05) contrast(1.02) saturate(1.03);
	}
}

#cv-sobre img {
	mix-blend-mode: hard-light;
	filter: contrast(1.3) brightness(1.15) saturate(1.1);
}

#cv-tablon {
	left: 1%;
	top: 0.2%;
	width: 96%;
	height: 99.8%;
}

#cv-corcho {
	left: 6%;
	top: 21.4%;
	width: 51%;
	height: 41.8%;
}

#cv-circulo {
	left: 7.8%;
	top: 26.6%;
	width: 40.6%;
	height: 29.4%;
}

#cv-experiencia {
	left: 37.2%;
	top: 41.8%;
	width: 59.4%;
	height: 24%;
}

#cv-aptitudes {
	left: 31.5%;
	top: 23.4%;
	width: 58.1%;
	height: 23.5%;
}

#cv-resumen-personal {
	left: 29.2%;
	top: 1.7%;
	width: 69.2%;
	height: 28.3%;
}

#cv-targeta-javier {
	left: 0%;
	top: 2.2%;
	width: 43.3%;
	height: 42.5%;
}

#cv-clip {
	left: 5.5%;
	top: 1.2%;
	width: 9.3%;
	height: 12.2%;
}

#cv-licenciado {
	left: 76.8%;
	top: 23.5%;
	width: 23.2%;
	height: 27.2%;
}

#cv-photoshop {
	left: 5.6%;
	top: 39.4%;
	width: 11.7%;
	height: 8.6%;
}

#cv-zbrush {
	left: 5.5%;
	top: 51.9%;
	width: 11.2%;
	height: 8.1%;
}

#cv-opentoonz {
	left: 24%;
	top: 54.8%;
	width: 11%;
	height: 8.3%;
}

#cv-premiere {
	left: 23.5%;
	top: 39.9%;
	width: 11.5%;
	height: 8.3%;
}

#cv-after-effects {
	left: 31%;
	top: 50.2%;
	width: 11.5%;
	height: 8.4%;
}

#cv-unreal {
	left: 31.8%;
	top: 44.7%;
	width: 10.1%;
	height: 7.3%;
}

#cv-cascadeur {
	left: 14.2%;
	top: 53.2%;
	width: 11.9%;
	height: 8.5%;
}

#cv-marmoset {
	left: 20.7%;
	top: 50.4%;
	width: 10.9%;
	height: 7.9%;
}

#cv-substance {
	left: 24.8%;
	top: 46%;
	width: 9.2%;
	height: 6.9%;
}

#cv-3dmax {
	left: 32.2%;
	top: 39.4%;
	width: 10.5%;
	height: 7.8%;
}

#cv-maya {
	left: 2%;
	top: 44.5%;
	width: 10.1%;
	height: 7.5%;
}

#cv-blender {
	left: 7.4%;
	top: 45.7%;
	width: 11.1%;
	height: 8.1%;
}

#cv-unity {
	left: 14.6%;
	top: 38.4%;
	width: 11.1%;
	height: 8%;
}

#cv-illustrator {
	left: 15.7%;
	top: 44.7%;
	width: 11.7%;
	height: 8.6%;
}

#cv-entrada2 {
	left: 11.4%;
	top: 82.2%;
	width: 46.1%;
	height: 16.8%;
}

#cv-entrada1 {
	left: 9.2%;
	top: 78.9%;
	width: 48.1%;
	height: 21%;
}

#cv-cinta-video2 {
	left: 36.8%;
	top: 62.6%;
	width: 32.4%;
	height: 20.8%;
}

#cv-cinta-video1 {
	left: 38.7%;
	top: 65.8%;
	width: 30.9%;
	height: 18.3%;
}

#cv-consola {
	left: 41.6%;
	top: 77.2%;
	width: 49.7%;
	height: 22.1%;
}

#cv-artilugio {
	left: 7.5%;
	top: 60.4%;
	width: 25.3%;
	height: 24.9%;
}

#cv-coral {
	left: 22.1%;
	top: 64.4%;
	width: 17.8%;
	height: 20.1%;
}

#cv-sydan {
	left: 72.9%;
	top: 62.3%;
	width: 16.5%;
	height: 18.5%;
}

#cv-porky {
	left: 61.3%;
	top: 64.7%;
	width: 22.2%;
	height: 17.1%;
}

#cv-zapato {
	left: 29.4%;
	top: 72.2%;
	width: 28.6%;
	height: 14.6%;
}

#cv-sobre {
	left: 7.7%;
	top: 61.1%;
	width: 85.6%;
	height: 38.8%;
}

#cv-chincheta-verde {
	left: 86.2%;
	top: 62%;
	width: 4.9%;
	height: 4.8%;
}

#cv-videojuegos {
	left: 63.6%;
	top: 94%;
	width: 16.7%;
	height: 2.8%;
}

#cv-ilustracion {
	left: 65.1%;
	top: 63.2%;
	width: 19.9%;
	height: 3.7%;
}

#cv-webs {
	left: 12.3%;
	top: 66.9%;
	width: 12.5%;
	height: 3.3%;
}

#cv-modelado3d {
	left: 25.2%;
	top: 80.5%;
	width: 16.6%;
	height: 3.3%;
}

#cv-diseno-grafico {
	left: 16.1%;
	top: 94.4%;
	width: 23.8%;
	height: 1.7%;
}

#cv-edicion {
	left: 44.8%;
	top: 67.1%;
	width: 13.7%;
	height: 3.7%;
}

#cv-portfolio-titulo {
	left: 10.7%;
	top: 59.4%;
	width: 29.8%;
	height: 6.9%;
}

.portfolio-content {
	width: 100%;
	height: 100%;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cards-container {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1400px;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	margin-bottom: 40px;
}

.cards-container.compact {
	gap: 15px;
	margin-bottom: 20px;
	transform: scale(0.5);
	position: fixed;
	top: 10px;
	left: 320px;
	justify-content: flex-start;
	max-width: calc(100vw - 340px);
	transform-origin: left top;
}

.card-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	position: relative;
}

.card-placeholder {
	width: 187px;
	height: 280px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
	z-index: 1;
	overflow: visible;
}

.card-slot.empty .card-placeholder {
	opacity: 1;
}

.card-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	opacity: 0;
	transform: translateY(-150vh) rotate(-15deg) scale(0.5);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 2;
}

.card-wrapper.animate-in {
	opacity: 1;
	transform: translateY(0) rotate(0deg) scale(1);
}

.card-wrapper.featured {
	position: fixed !important;
	top: 240px !important;
	left: -440px !important;
	z-index: 1000;
	transform: scale(2.5) !important;
	opacity: 1 !important;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.card-wrapper.featured .portfolio-card {
	width: 187px;
	height: 280px;
}

.card-wrapper.featured .card-inner {
	transform: rotateY(0deg);
}

.card-wrapper.in-menu {
	position: fixed;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform: scale(1.2) rotateZ(90deg) !important;
	opacity: 1;
}

.card-wrapper.in-menu .portfolio-card {
	width: 187px;
	height: 280px;
}

.card-wrapper.in-menu .card-inner {
	transform: rotateY(180deg);
}

.cards-container.compact .card-slot {
	position: fixed;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cards-container.compact .card-placeholder {
	transform: translateX(-50%) scale(1.2) rotateZ(90deg);
}

.cards-container.compact .card-slot.empty .card-placeholder {
	opacity: 1;
}

.cards-container.compact .card-wrapper:not(.featured) .card-inner {
	transform: rotateY(180deg);
}

.card-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: #e4e4e7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;
}

.card-wrapper.featured .card-title,
.card-wrapper.in-menu .card-title,
.cards-container.compact .card-wrapper:not(.featured) .card-title {
	display: none;
}

.card-subtitle {
	opacity: 0;
	transition: opacity 0.3s ease 0.5s;
	pointer-events: none;
	position: absolute;
}

.card-subtitle img {
	width: 100%;
	height: auto;
	display: block;
}

.card-wrapper.featured .card-subtitle {
	display: none;
	opacity: 0;
}

.card-wrapper.in-menu .card-subtitle {
	opacity: 1;
	width: 280px;
	height: 1307px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateX(-750px) rotateZ(90deg);
	transform-origin: center center;
}

.cards-container.compact .card-wrapper:not(.featured) .card-subtitle {
	opacity: 1;
	width: 280px;
	height: 1307px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateX(-750px) rotateZ(90deg);
	transform-origin: center center;
}

.card-wrapper.selected .card-title {
	color: #4ade80;
	text-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
}

.portfolio-card {
	width: 187px;
	height: 280px;
	perspective: 1000px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	border-radius: 16px;
	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
}

.portfolio-card:hover .card-inner {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(74, 222, 128, 0.3);
}

.portfolio-card[data-category="todo"]:hover .card-inner,
.portfolio-card[data-category="todo"] .card-inner:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(74, 222, 128, 0.5);
}

.portfolio-card[data-category="arte"]:hover .card-inner,
.portfolio-card[data-category="arte"] .card-inner:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(248, 113, 113, 0.5);
}

.portfolio-card[data-category="programacion"]:hover .card-inner,
.portfolio-card[data-category="programacion"] .card-inner:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(96, 165, 250, 0.5);
}

.portfolio-card[data-category="diseño"]:hover .card-inner,
.portfolio-card[data-category="diseño"] .card-inner:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(251, 191, 36, 0.5);
}

.portfolio-card[data-category="produccion"]:hover .card-inner,
.portfolio-card[data-category="produccion"] .card-inner:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(192, 132, 252, 0.5);
}

.portfolio-card[data-category="comunicacion"]:hover .card-inner,
.portfolio-card[data-category="comunicacion"] .card-inner:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(244, 114, 182, 0.5);
}

.card-front,
.card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 16px;
	overflow: hidden;
	background: #1a1a2a;
}

.card-front {
	transform: rotateY(0deg);
	z-index: 2;
}

.card-back {
	transform: rotateY(180deg);
}

.card-front img,
.card-back img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.category-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 32px;
}

.category-btn {
	width: 110px;
	height: 110px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 500;
	backdrop-filter: blur(20px);
	background: rgba(255, 255, 255, 0.02);
}

.category-btn.todo {
	background: rgba(74, 222, 128, 0.08);
	color: #4ade80;
	border-color: rgba(74, 222, 128, 0.2);
}

.category-btn.arte {
	background: rgba(248, 113, 113, 0.08);
	color: #f87171;
	border-color: rgba(248, 113, 113, 0.2);
}

.category-btn.diseño {
	background: rgba(251, 191, 36, 0.08);
	color: #fbbf24;
	border-color: rgba(251, 191, 36, 0.2);
}

.category-btn.programacion {
	background: rgba(96, 165, 250, 0.08);
	color: #60a5fa;
	border-color: rgba(96, 165, 250, 0.2);
}

.category-btn.produccion {
	background: rgba(192, 132, 252, 0.08);
	color: #c084fc;
	border-color: rgba(192, 132, 252, 0.2);
}

.category-btn.comunicacion {
	background: rgba(244, 114, 182, 0.08);
	color: #f472b6;
	border-color: rgba(244, 114, 182, 0.2);
}

.category-btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
	border-color: currentColor;
	background: rgba(255, 255, 255, 0.05);
}

.category-btn.active {
	transform: scale(1.08);
	box-shadow: 0 0 24px currentColor;
	border-color: currentColor;
	background: rgba(255, 255, 255, 0.08);
}

.category-icon {
	font-size: 1.8rem;
	margin-bottom: 6px;
}

.content-area {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 32px;
	min-height: 320px;
	backdrop-filter: blur(20px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	max-width: 1200px;
	opacity: 0;
	transform: translateY(30px);
}

.content-area.show {
	opacity: 1;
	transform: translateY(0);
}

.content-area:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

.content-area h2 {
	color: #ececec;
	margin-bottom: 16px;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.content-area p {
	color: rgba(236, 236, 236, 0.8);
	line-height: 1.6;
	font-size: 1rem;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal.active {
	display: flex;
	opacity: 1;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	cursor: pointer;
}

.modal-content {
	position: relative;
	margin: auto;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 95vw;
	max-height: 95vh;
	animation: modalZoomIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalZoomIn {
	from {
		transform: scale(0.7);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-content img {
	max-width: 95vw;
	max-height: 95vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	transition: transform 0.6s ease-out;
	transform-style: preserve-3d;
	cursor: pointer;
}

.modal-close {
	position: absolute;
	top: -50px;
	right: -50px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
}

.modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

.custom-tooltip {
	position: fixed;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	pointer-events: none;
	z-index: 10002;
	opacity: 0;
	transform: translate(-50%, -100%) translateY(-8px);
	transition: opacity 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.3px;
}

.custom-tooltip.show {
	opacity: 1;
}

.custom-tooltip .tooltip-icon {
	display: inline-block;
	margin-right: 4px;
	font-size: 0.85rem;
}

.categories-container {
	position: fixed;
	top: 200px;
	left: 280px;
	right: 40px;
	bottom: 40px;
	display: none;
	flex-direction: row;
	gap: 20px;
	padding: 20px;
	background: rgba(0, 0, 0, 0.4);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	backdrop-filter: blur(10px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.categories-container.expanded {
	top: 10px;
	left: 40px;
	right: 40px;
	bottom: 40px;
	flex-direction: column;
	gap: 0;
	padding: 5px 20px 20px 20px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.6);
	transition: top 0.3s ease;
	z-index: 999;
}

body:has(.section.portfolio.slide-left .project-viewer.active) .categories-container.expanded {
	top: -25px;
}

.categories-container.expanded~.cards-container .card-wrapper {
	opacity: 0 !important;
	pointer-events: none !important;
}

.categories-container.expanded~.cards-container .card-placeholder {
	opacity: 0 !important;
}

.categories-container.expanded {
	z-index: 2000;
}

body:has(.categories-container.expanded) .card-wrapper.featured {
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 0.3s ease !important;
}

.category-navigation {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.back-button {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	background: linear-gradient(135deg, #64748b, #475569);
	border: none;
	border-radius: 40px;
	color: white;
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	line-height: 1;
	min-height: auto;
	text-align: center;
	box-shadow: 0 4px 20px rgba(100, 116, 139, 0.3);
	flex-shrink: 0;
}

.back-button:hover {
	color: #e4e4e7;
	transform: translateY(-1px);
}

.category-nav-btn {
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: #a1a1aa;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	line-height: 1.2;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0.75;
}

.category-nav-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	color: #d4d4d8;
	opacity: 0.9;
}

.category-nav-btn.active {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	opacity: 1;
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.category-detail-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.category-detail-header.project-mode {
	flex-direction: row;
	align-items: flex-start;
	padding: 12px 16px;
	gap: 16px;
	margin-bottom: 12px;
	background: transparent;
	border: none;
}

.category-detail-header-divider {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.1);
	margin: 0 4px;
	display: block;
}

.category-detail-header.project-mode .category-detail-header-divider {
	display: none;
}

.category-detail-header.project-mode .back-button {
	flex-shrink: 0;
	margin-bottom: 0;
	display: flex;
}

.category-compact-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.category-detail-header.project-mode .category-navigation {
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex !important;
	width: 100%;
	justify-content: center;
}

.category-detail-header.project-mode .category-nav-btn {
	padding: 6px 12px;
	font-size: 0.7rem;
	min-height: 32px;
	letter-spacing: 1px;
	opacity: 0.6;
}

.category-detail-header.project-mode .category-nav-btn.active {
	opacity: 1;
}

.category-detail-header.project-mode .category-nav-btn:hover {
	opacity: 0.85;
}

.project-images-thumbnails-nav {
	display: none !important;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.category-detail-header.project-mode .back-button {
	display: none;
}

.category-detail-header.project-mode .project-images-thumbnails-nav {
	display: flex !important;
}

.project-thumbnail-nav-item {
	width: 60px;
	height: 34px;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid rgba(255, 255, 255, 0.15);
	transition: all 0.2s ease;
	opacity: 0.5;
	background: rgba(0, 0, 0, 0.4);
}

.project-thumbnail-nav-item:hover {
	opacity: 0.8;
	transform: scale(1.05);
	border-color: rgba(255, 255, 255, 0.3);
}

.project-thumbnail-nav-item.active {
	opacity: 1;
	border-color: rgba(74, 222, 128, 0.9);
	box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
	transform: scale(1.08);
}

.project-thumbnail-nav-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.category-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	width: 100%;
	padding-top: 10px;
}

.category-detail-image {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.6);
	/* Mantener este */
	border: 2px solid rgba(255, 255, 255, 0.15);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(20px);
}

.category-detail-image.animate-in {
	animation: fadeInUp 0.4s ease-out forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.category-detail-image:hover {
	background: rgba(0, 0, 0, 0.75);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
	transform: translateY(-4px);
}

.category-detail-image-title {
	padding: 6px 12px 6px 12px;
	font-size: 0.75rem;
	font-weight: 400;
	color: #a1a1aa;
	text-align: left;
	background: transparent;
	/* Cambiado de rgba(255, 255, 255, 0.03) */
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	letter-spacing: 0.2px;
	line-height: 1.3;
}

.category-detail-image-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.category-detail-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.category-detail-image-wrapper img.loaded {
	opacity: 1;
}

.category-detail-image-subtitle {
	padding: 6px 12px 6px 12px;
	font-size: 0.75rem;
	font-weight: 400;
	color: #a1a1aa;
	text-align: left;
	background: transparent;
	/* Cambiado de rgba(255, 255, 255, 0.03) */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	line-height: 1.3;
	letter-spacing: 0.2px;
}

.categories-container::-webkit-scrollbar {
	display: none;
}

.category-column {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	opacity: 0;
	transform: translateY(30px);
}

.category-column.show {
	opacity: 1;
	transform: translateY(0);
}

.category-column:hover {
	background: rgba(0, 0, 0, 0.75);
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
}

.category-column-title {
	font-size: 1rem;
	font-weight: 700;
	color: #e4e4e7;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 16px;
	padding: 12px 8px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.3;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-images-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.category-image-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.category-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.category-image-wrapper img.loaded {
	opacity: 1;
}

.project-viewer {
	display: none;
	flex-direction: column;
	width: 100%;
	height: 100%;
	flex: 1;
	opacity: 0;
	transition: opacity 0.4s ease-out;
	overflow: hidden;
	min-height: 0;
}

.project-viewer.active {
	display: flex;
	opacity: 1;
}

.project-viewer-container {
	display: flex;
	width: 100%;
	height: 100%;
	gap: 0;
	flex: 1;
	overflow: hidden;
	min-height: 0;
	position: relative;
}

.project-center-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
	position: relative;
}

.project-sidebar-left {
	width: 300px;
	min-width: 300px;
	max-width: 300px;
	height: 100%;
	background: transparent;
	border-right: 2px solid rgba(255, 255, 255, 0.1);
	padding: 30px 20px;
	margin-left: -20px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 116, 139, 0.8) rgba(0, 0, 0, 0.3);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}

.project-sidebar-left::-webkit-scrollbar {
	width: 8px;
}

.project-sidebar-left::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.project-sidebar-left::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #64748b, #475569);
	border-radius: 4px;
	border: 2px solid rgba(0, 0, 0, 0.3);
}

.project-sidebar-left::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #7c8fa3, #5a6b7f);
}

.project-title-section {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.project-title-section .project-viewer-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #e4e4e7;
	margin-bottom: 8px;
	line-height: 1.3;
}

.project-title-section .project-viewer-subtitle {
	font-size: 0.9rem;
	color: #a1a1aa;
	line-height: 1.4;
}

.project-description {
	margin-bottom: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.project-description-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e4e4e7;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	flex-shrink: 0;
}

.project-description-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.project-description-text {
	font-size: 0.85rem;
	line-height: 1.6;
	color: #a1a1aa;
	text-align: justify;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
	padding-right: 8px;
}

.project-description-text::-webkit-scrollbar {
	width: 6px;
}

.project-description-text::-webkit-scrollbar-track {
	background: transparent;
}

.project-description-text::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, 0.6);
	border-radius: 3px;
}

.project-description-text::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, 0.8);
}

.project-section-separator {
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 20px 0;
	flex-shrink: 0;
}

.project-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 0;
	flex-shrink: 0;
}

.project-links-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e4e4e7;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.project-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	text-decoration: none;
	color: #e4e4e7;
	font-size: 0.75rem;
	transition: all 0.3s ease;
	cursor: pointer;
}

.project-link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateX(2px);
}

.project-link-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
	opacity: 0.9;
}

.project-link-text {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-programs {
	margin-bottom: 0;
	flex-shrink: 0;
}

.project-programs-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e4e4e7;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.project-programs-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-left: 2px;
}

.project-program-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	opacity: 1;
	transition: all 0.3s ease;
}

.project-program-icon:hover {
	opacity: 1;
	transform: scale(1.15);
}

.project-related {
	margin-bottom: 0;
	flex-shrink: 0;
	margin-top: 20px;
}

.project-related-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e4e4e7;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.project-program-icon:hover {
	opacity: 1;
	transform: scale(1.15);
}

.project-related {
	margin-bottom: 0;
	flex-shrink: 0;
	margin-top: 0;
}

.project-related-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e4e4e7;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.project-main-viewer {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	min-width: 0;
	height: 100%;
	min-height: 100%;
	flex-shrink: 0;
}

.project-images-scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	padding-top: 10px;
	scrollbar-width: auto;
	scrollbar-color: rgba(100, 116, 139, 0.9) rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: relative;
}

.project-images-scroll::-webkit-scrollbar {
	width: 16px;
	background: rgba(0, 0, 0, 0.5);
}

.project-images-scroll::-webkit-scrollbar-track {
	background: linear-gradient(90deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0.4) 50%,
			rgba(0, 0, 0, 0.6) 100%);
	border-radius: 0;
	border-left: 2px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.project-images-scroll::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg,
			rgba(100, 116, 139, 0.95) 0%,
			rgba(71, 85, 105, 1) 50%,
			rgba(100, 116, 139, 0.95) 100%);
	border-radius: 8px;
	border: 3px solid rgba(0, 0, 0, 0.5);
	min-height: 60px;
	box-shadow:
		0 0 15px rgba(100, 116, 139, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.project-images-scroll::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg,
			rgba(124, 143, 163, 1) 0%,
			rgba(90, 107, 127, 1) 50%,
			rgba(124, 143, 163, 1) 100%);
	border-color: rgba(0, 0, 0, 0.7);
	box-shadow:
		0 0 20px rgba(100, 116, 139, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.project-images-scroll::-webkit-scrollbar-thumb:active {
	background: linear-gradient(180deg,
			rgba(90, 107, 127, 1) 0%,
			rgba(71, 85, 105, 1) 50%,
			rgba(90, 107, 127, 1) 100%);
}

.project-nav-prev,
.project-nav-next {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 100;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, 0.7);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #e4e4e7;
	font-size: 2.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	padding-bottom: 6px;
	transition: all 0.3s ease;
}

.project-nav-prev:hover:not(:disabled),
.project-nav-next:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-50%) scale(1.1);
}

.project-nav-prev {
	left: 10px;
	padding-right: 2px;
}

.project-nav-next {
	right: 27px;
	padding-left: 2px;
}

.project-nav-prev:disabled,
.project-nav-next:disabled {
	opacity: 0.2;
	cursor: not-allowed;
}

.project-viewer-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 30px;
	background: rgba(0, 0, 0, 0.6);
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.project-viewer-title-container {
	flex: 1;
}

.project-viewer-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #e4e4e7;
	margin-bottom: 4px;
}

.project-viewer-subtitle {
	font-size: 0.9rem;
	color: #a1a1aa;
}

.project-viewer-nav {
	display: flex;
	gap: 12px;
	align-items: center;
}

.project-close-btn {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, #64748b, #475569);
	border: none;
	border-radius: 8px;
	color: white;
	font-size: 1.3rem;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(100, 116, 139, 0.3);
}

.project-close-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 24px rgba(100, 116, 139, 0.4);
}

.project-image-item {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80px;
	flex-shrink: 0;
	position: relative;
	box-sizing: border-box;
	pointer-events: none;
}

.project-image-item img,
.project-image-item video,
.project-image-item .project-youtube-wrapper {
	pointer-events: auto;
}

.project-image-item:first-child {
	margin-top: -20vh;
}

.project-image-item:not(:last-child) {
	margin-bottom: -34vh;
}

.project-image-item img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	display: block;
	margin: 0 auto;
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.project-image-item img.loaded {
	opacity: 1;
}

.project-video {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90vh;
	aspect-ratio: 16/9;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	display: block;
	margin: 0 auto;
	opacity: 0;
	transition: opacity 0.15s ease-out;
	background: #000;
}

.project-video.loaded {
	opacity: 1;
}

.project-youtube-wrapper {
	width: 100%;
	max-width: 1920px;
	aspect-ratio: 16/9;
	margin: 0 auto;
	position: relative;
}

.project-youtube {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.15s ease-out;
	background: #000;
}

.project-youtube.loaded {
	opacity: 1;
}

.project-sidebar-right {
	width: 300px;
	min-width: 300px;
	max-width: 300px;
	background: transparent;
	border-left: 2px solid rgba(255, 255, 255, 0.1);
	padding: 30px 20px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 116, 139, 0.8) rgba(0, 0, 0, 0.3);
	flex-shrink: 0;
}

.project-sidebar-right::-webkit-scrollbar {
	width: 8px;
}

.project-sidebar-right::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.project-sidebar-right::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #64748b, #475569);
	border-radius: 4px;
	border: 2px solid rgba(0, 0, 0, 0.3);
}

.project-sidebar-right::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #7c8fa3, #5a6b7f);
}

.project-thumbnails {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	align-items: stretch;
}

.project-thumbnail {
	width: 100%;
	height: 146px;
	border-radius: 8px;
	overflow: visible;
	cursor: pointer;
	border: 2px solid rgba(255, 255, 255, 0.1);
	transition: border-color 0.3s ease;
	position: relative;
	flex-shrink: 0;
	flex-grow: 0;
}

.project-thumbnail::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
	z-index: -1;
}

.project-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease, opacity 0.15s ease-out;
	opacity: 0;
	will-change: transform;
	transform-origin: center center;
	border-radius: 6px;
}

.project-thumbnail img.loaded {
	opacity: 1;
}

.project-thumbnail:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

.project-thumbnail:hover img {
	transform: scale(1.1);
}

.project-thumbnail.active {
	border-color: rgba(74, 222, 128, 0.8);
}

.project-thumbnail.active::before {
	opacity: 1;
}

.project-thumbnail.active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(74, 222, 128, 0.2);
	pointer-events: none;
	border-radius: 8px;
	transition: transform 0.3s ease;
	transform-origin: center center;
}

.project-thumbnail.active:hover::after {
	transform: scale(1.1);
}

.project-thumbnail.video-thumb {
	position: relative;
}

.video-thumbnail-overlay {
	position: absolute;
	top: 2px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.video-thumbnail-icon {
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
	opacity: 0.85;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.project-thumbnail.video-thumb:hover .video-thumbnail-icon {
	opacity: 1;
	transform: scale(1.15);
}

@media (max-width: 1400px) {
	.categories-container {
		left: 400px;
		gap: 15px;
		padding: 15px;
	}

	.category-column {
		padding: 12px;
	}

	.category-column-title {
		font-size: 0.85rem;
		padding: 10px 6px;
		min-height: 50px;
	}

	.category-images-grid {
		gap: 10px;
	}
}

@media (max-width: 1024px) {
	.portfolio-content {
		padding: 40px 20px 20px 20px;
	}

	.cv-container {
		transform: scale(0.5);
	}

	.portfolio-card {
		width: 150px;
		height: 210px;
	}

	.cards-container.compact {
		transform: scale(0.4) translateY(-100px);
	}

	.categories-container {
		left: 320px;
		top: 120px;
		gap: 12px;
		padding: 12px;
	}

	.category-column {
		padding: 10px;
	}

	.category-column-title {
		font-size: 0.75rem;
		padding: 8px 4px;
		min-height: 45px;
		letter-spacing: 1px;
	}

	.category-images-grid {
		gap: 8px;
	}
}

@media (max-width: 768px) {
	.cv-container {
		transform: scale(0.4);
	}

	.header-content {
		padding: 0 10px 0 10px;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	.section-title-header {
		font-size: 1rem;
	}

	.portfolio-card {
		width: 120px;
		height: 168px;
	}

	.card-title {
		font-size: 0.9rem;
	}

	.cards-container {
		gap: 20px;
	}

	.cards-container.compact {
		transform: scale(0.35) translateY(-80px);
	}

	.modal-close {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

	.modal-content {
		max-width: 95vw;
		max-height: 85vh;
	}

	.categories-container {
		left: 20px;
		right: 20px;
		top: 140px;
		flex-direction: column;
	}

	.category-column {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.portfolio-content {
		padding: 20px 10px 10px 10px;
	}

	.content-area {
		padding: 20px;
		min-height: 250px;
	}

	.content-area h2 {
		font-size: 1.3rem;
	}

	.content-area p {
		font-size: 0.9rem;
	}

	.cv-container {
		transform: scale(0.35);
	}
}

/* Botón flotante para volver al proyecto anterior */
.back-to-previous-floating {
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	z-index: 10000;

	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	padding: 14px 28px;
	border-radius: 30px;
	border: 1px solid rgba(74, 222, 128, 0.4);

	color: #4ade80;
	font-size: 0.95rem;
	font-weight: 500;

	cursor: pointer;

	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		0 0 20px rgba(74, 222, 128, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	opacity: 0;
	pointer-events: none;
}

.back-to-previous-floating.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.back-to-previous-floating:hover {
	background: rgba(0, 0, 0, 0.92);
	border-color: rgba(74, 222, 128, 0.7);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.5),
		0 0 30px rgba(74, 222, 128, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transform: translateX(-50%) translateY(-2px);
}

.back-to-previous-floating:active {
	transform: translateX(-50%) translateY(0);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.4),
		0 0 15px rgba(74, 222, 128, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.back-to-previous-floating .button-icon {
	display: inline-block;
	margin-right: 8px;
	font-size: 1.1rem;
	transition: transform 0.3s ease;
}

.back-to-previous-floating:hover .button-icon {
	transform: translateX(-3px);
}

/* Botón flotante para volver al proyecto anterior */
.back-to-previous-floating {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	z-index: 10000;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(74, 222, 128, 0.4);
	border-radius: 8px;
	color: #4ade80;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
	min-height: 32px;
	cursor: pointer;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 222, 128, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
}

.back-to-previous-floating.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.back-to-previous-floating:hover {
	background: rgba(0, 0, 0, 0.92);
	border-color: rgba(74, 222, 128, 0.7);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transform: translateX(-50%) translateY(-2px);
}

.back-to-previous-floating:active {
	transform: translateX(-50%) translateY(0);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 15px rgba(74, 222, 128, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.back-to-previous-floating .button-icon {
	display: inline-block;
	font-size: 0.7rem;
	transition: transform 0.3s ease;
}

.back-to-previous-floating:hover .button-icon {
	transform: translateX(-3px);
}

/* ============================================== */
/* SECCIÓN TODO - CONTENEDOR FIJO, NO SE EXPANDE */
/* ============================================== */

.categories-container.todo-grid-mode {
	position: fixed;
	top: 200px;
	left: 280px;
	right: 40px;
	bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	overflow: visible;
	background: rgba(0, 0, 0, 0.4);
}

.todo-projects-grid {
	display: grid;
	gap: 12px;
	width: 100%;
	height: 100%;
	align-content: center;
	justify-content: center;
	overflow: visible;
	/* Las columnas se establecen dinámicamente por JS */
	/* Las filas son automáticas basadas en aspect-ratio */
}

.todo-project-card {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	transform: scale(0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.todo-project-card.show {
	opacity: 1;
	transform: scale(1);
}

.todo-project-card:hover {
	background: rgba(0, 0, 0, 0.8);
	border-color: rgba(74, 222, 128, 0.8);
	transform: scale(1.05);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 40px rgba(74, 222, 128, 0.4);
	z-index: 10;
}

.todo-project-image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.todo-project-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease, opacity 0.15s ease-out;
	opacity: 0;
}

.todo-project-image-wrapper img.loaded {
	opacity: 1;
}

.todo-project-card:hover .todo-project-image-wrapper img {
	transform: scale(1.1);
}

.todo-project-title,
.todo-project-subtitle {
	display: none !important;
}

/* ============================================== */
/* MODAL DE INFORMACIÓN CV - PANTALLA COMPLETA  */
/* ============================================== */

.modal.info-modal .modal-overlay {
	background: rgba(0, 0, 0, 0.95);
}

.modal.info-modal .modal-content {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	display: block;
	overflow: visible;
	animation: none;
}

/* Contenedor base con las proporciones del PSD (1920x1080) */
.modal-info-layout {
	position: relative;
	width: 1920px;
	height: 1080px;
	margin: 0 auto;
	transform-origin: center center;
	overflow: visible;
}

/* Escalar el contenedor para que se ajuste a la pantalla */
.modal-info-layout-wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}




.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 330px;
	width: 1019px;
	height: 539px;
}

.modal-info-text-area {
	position: absolute;
	left: 1156px;
	top: 303px;
	width: 660px;
	height: 560px;
	z-index: 2;
	padding: 30px;
	overflow-y: auto;
	color: #e4e4e7;
	background: rgba(24, 24, 27, 0.85);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-info-text-area::-webkit-scrollbar {
	width: 6px;
}

.modal-info-text-area::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.modal-info-text-area::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

.modal-info-text-area::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

.modal-info-text-area h3 {
	font-size: 1.6rem;
	color: #f4f4f5;
	margin-top: 0;
	margin-bottom: 15px;
	font-weight: 600;
}

.modal-info-text-area p {
	margin-bottom: 15px;
	color: #c4c4c8;
	line-height: 1.6;
	font-size: 1.05rem;
}



/* Botón de cerrar para modal de información */
.modal.info-modal .modal-close {
	position: fixed;
	top: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA MODAL DE WEBS
   ============================================ */

.modal.info-modal.modal-webs .modal-info-image-1 img {
	position: absolute;
	left: 208px;
	top: 198px;
	width: 744px;
	height: 736px;
	transform: rotate(0deg);
}

/* Estilos para video en modal de Webs - Video libre sin contenedor */
.modal.info-modal.modal-webs .modal-info-video-1 video {
	position: absolute;
	left: 155px;
	top: 257px;
	width: 1054px;
	height: 627px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	z-index: 1;
	transform: translate(0px, -18px);
}

/* Asegurar que la imagen de artilugio esté por encima del video */
.modal.info-modal.modal-webs .modal-info-image-1 {
	z-index: 2;
}

.modal.info-modal.modal-webs .modal-info-image-1 img {
	z-index: 3;
}


.modal.info-modal.modal-webs .modal-info-text-area {
	position: absolute;
	left: 1011px;
	top: 301px;
	width: 511px;
	height: 626px;
	z-index: 2;
	padding: 30px;
	overflow-y: auto;
	color: #e4e4e7;
	background: rgba(24, 24, 27, 0.85);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transform: translate(223px, -66px);
}

.modal.info-modal.modal-webs .modal-close {
	position: fixed;
	top: 161px;
	right: 170px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal.modal-webs .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA MODAL DE MODELADO 3D
   ============================================ */

/* Imagen en lugar de video - misma posición que el video de Webs */
.modal.info-modal.modal-modelado3d .modal-info-image-1 {
	z-index: 1;
}

.modal.info-modal.modal-modelado3d .modal-info-image-1 img {
	position: absolute;
	left: 132px;
	top: 271px;
	width: 1054px;
	height: 593px;
	object-fit: contain;
	display: block;
	border-radius: 12px;
	z-index: 1;
	transform: translate(0px, -18px);
	clip-path: inset(0 round 12px);
}

.modal.info-modal.modal-modelado3d .modal-info-text-area {
	position: absolute;
	left: 1017px;
	top: 299px;
	width: 537px;
	height: 626px;
	z-index: 2;
	padding: 30px;
	overflow-y: auto;
	color: #e4e4e7;
	background: rgba(24, 24, 27, 0.85);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transform: translate(197px, -66px);
}

.modal.info-modal.modal-modelado3d .modal-close {
	position: fixed;
	top: 151px;
	right: 170px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal.modal-modelado3d .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA MODAL DE ILUSTRACIÓN
   ============================================ */

/* Imagen - mismas posiciones que Modelado 3D */
.modal.info-modal.modal-ilustracion .modal-info-image-1 {
	z-index: 1;
}

.modal.info-modal.modal-ilustracion .modal-info-image-1 img {
	position: absolute;
	left: 132px;
	top: 271px;
	width: 1054px;
	height: 593px;
	object-fit: contain;
	display: block;
	border-radius: 12px;
	z-index: 1;
	transform: translate(0px, -18px);
	clip-path: inset(0 round 12px);
}

.modal.info-modal.modal-ilustracion .modal-info-text-area {
	position: absolute;
	left: 1017px;
	top: 299px;
	width: 537px;
	height: 626px;
	z-index: 2;
	padding: 30px;
	overflow-y: auto;
	color: #e4e4e7;
	background: rgba(24, 24, 27, 0.85);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transform: translate(197px, -66px);
}

.modal.info-modal.modal-ilustracion .modal-close {
	position: fixed;
	top: 151px;
	right: 170px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal.modal-ilustracion .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA MODAL DE DISEÑO GRÁFICO
   ============================================ */

/* Imagen - mismas posiciones que Ilustración */
.modal.info-modal.modal-diseño-grafico .modal-info-image-1 {
	z-index: 1;
}

.modal.info-modal.modal-diseño-grafico .modal-info-image-1 img {
	position: absolute;
	left: 132px;
	top: 271px;
	width: 1054px;
	height: 593px;
	object-fit: contain;
	display: block;
	border-radius: 12px;
	z-index: 1;
	transform: translate(0px, -18px);
	clip-path: inset(0 round 12px);
}

.modal.info-modal.modal-diseño-grafico .modal-info-text-area {
	position: absolute;
	left: 1018px;
	top: 329px;
	width: 537px;
	height: 576px;
	z-index: 2;
	padding: 30px;
	overflow-y: auto;
	color: #e4e4e7;
	background: rgba(24, 24, 27, 0.85);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transform: translate(197px, -66px);
}

.modal.info-modal.modal-diseño-grafico .modal-close {
	position: fixed;
	top: 181px;
	right: 170px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal.modal-diseño-grafico .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}



/* ============================================
   ESTILOS ESPECÍFICOS PARA MODAL DE VIDEOJUEGOS
   ============================================ */

.modal.info-modal.modal-videojuegos .modal-close {
	position: fixed;
	top: 175px;
	right: 130px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal.modal-videojuegos .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA MODAL DE EDICIÓN
   ============================================ */

.modal.info-modal.modal-edicion .modal-info-text-area {
	position: absolute;
	left: 179px;
	top: 262px;
	width: 700px;
	height: 560px;
	z-index: 2;
	padding: 30px;
	overflow-y: auto;
	color: #e4e4e7;
	background: rgba(24, 24, 27, 0.85);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal.info-modal.modal-edicion .modal-info-image-1 img {
	position: absolute;
	left: 894px;
	top: 251px;
	width: 866px;
	height: 583px;
	transform: rotate(0deg);
}

/* Video para modal de Edición - misma posición que la imagen pero detrás */
.modal.info-modal.modal-edicion .modal-info-video-1 video {
	position: absolute;
	left: 919px;
	top: 323px;
	width: 824px;
	height: 440px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	z-index: 0;
}

/* Asegurar que la imagen de cinta esté por encima del video */
.modal.info-modal.modal-edicion .modal-info-image-1 {
	z-index: 2;
}


.modal.info-modal.modal-edicion .modal-close {
	position: fixed;
	top: 190px;
	right: 100px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10002;
}

.modal.info-modal.modal-edicion .modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

.modal.info-modal.modal-videojuegos .modal-info-image-1 img {
	position: absolute;
	left: 114px;
	top: 342px;
	width: 1019px;
	height: 539px;
	transform: rotate(0deg);
}


/* Estilos para video en modal de Videojuegos */
.modal.info-modal.modal-videojuegos .modal-info-video-1 {
	position: absolute;
	left: 79px;
	top: 348px;
	width: 1019px;
	height: 539px;
	z-index: 1;
	overflow: hidden;
	border-radius: 12px;
}

.modal.info-modal.modal-videojuegos .modal-info-video-1 video {
	position: relative;
	left: 112px;
	top: -71px;
	width: 547px;
	height: 309px;
	transform: translate(144px, 87px);
	object-fit: cover;
	display: block;
}

/* Asegurar que la imagen de consola esté por encima del video */
.modal.info-modal.modal-videojuegos .modal-info-image-1 {
	z-index: 2;
}

/* Asegurar que en Videojuegos la imagen esté por encima del video */
.modal.info-modal.modal-videojuegos .modal-info-image-1 img {
	position: absolute;
	left: 96px;
	top: 294px;
	width: 1019px;
	height: 539px;
	z-index: 3;
}

/* Imagen de fondo (consolaback) en modal de Videojuegos */
.modal.info-modal.modal-videojuegos .modal-info-image-2 img {
	position: absolute;
	left: 79px;
	top: 298px;
	width: 1019px;
	height: 539px;
	z-index: 0;
}

.modal.info-modal.modal-videojuegos .modal-info-text-area {
	left: 1127px;
	top: 256px;
	height: 592px;
	/* Mejoras anti-blur */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* ============================================
   ESTILOS PARA MODAL DE VIDEOJUEGOS - ROLES Y CTA
   ============================================ */

.roles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin: 20px 0 10px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	/* Mejoras anti-blur */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.role-item {
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 1.5px;
	color: #a1a1aa;
	padding: 10px 15px;
	background: rgba(161, 161, 170, 0.15);
	border-radius: 6px;
	border: 1px solid rgba(161, 161, 170, 0.25);
	/* Mejoras anti-blur */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.cta-section {
	margin-top: 15px;
	text-align: center;
	padding: 15px 0 10px 0;
}

.cta-text {
	font-size: 1.3rem;
	color: #d4d4d8;
	margin-bottom: 15px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.portfolio-btn {
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: #18181b;
	border: none;
	padding: 14px 40px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3);
	position: relative;
	overflow: hidden;
}

.portfolio-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.portfolio-btn:hover::before {
	left: 100%;
}

.portfolio-btn:hover {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
}

.portfolio-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(74, 222, 128, 0.3);
}

/* Línea separadora antes del CTA */
.separator-line {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 20px 0 10px 0;
}

/* ============================================

	);
}

body.blue-theme .section-title-header::after,
body.blue-theme .header-nav::before {
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(96, 165, 250, 0.3) 20%,
		rgba(96, 165, 250, 0.5) 50%,
		rgba(96, 165, 250, 0.3) 80%,
		transparent 100%
	);
}

body.yellow-theme .section-title-header::after,
body.yellow-theme .header-nav::before {
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(251, 191, 36, 0.3) 20%,
		rgba(251, 191, 36, 0.5) 50%,
		rgba(251, 191, 36, 0.3) 80%,
		transparent 100%
	);
}

body.purple-theme .section-title-header::after,
body.purple-theme .header-nav::before {
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(192, 132, 252, 0.3) 20%,
		rgba(192, 132, 252, 0.5) 50%,
		rgba(192, 132, 252, 0.3) 80%,
		transparent 100%
	);
}

body.pink-theme .section-title-header::after,
body.pink-theme .header-nav::before {
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(244, 114, 182, 0.3) 20%,
		rgba(244, 114, 182, 0.5) 50%,
		rgba(244, 114, 182, 0.3) 80%,
		transparent 100%
	);
}

body.green-theme .section-title-header::after,
body.green-theme .header-nav::before {
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(34, 197, 94, 0.3) 20%,
		rgba(34, 197, 94, 0.5) 50%,
		rgba(34, 197, 94, 0.3) 80%,
		transparent 100%
	);
}


/* Variaciones de color de la línea horizontal según el tema */
body.red-theme .header-content::before {
	background: linear-gradient(90deg,
			transparent 0%,
			transparent 10%,
			rgba(248, 113, 113, 0.1) 15%,
			rgba(248, 113, 113, 0.4) 50%,
			rgba(248, 113, 113, 0.1) 85%,
			transparent 90%,
			transparent 100%);
}

body.blue-theme .header-content::before {
	background: linear-gradient(90deg,
			transparent 0%,
			transparent 10%,
			rgba(96, 165, 250, 0.1) 15%,
			rgba(96, 165, 250, 0.4) 50%,
			rgba(96, 165, 250, 0.1) 85%,
			transparent 90%,
			transparent 100%);
}

/* Variaciones de color de la línea según el tema */
body.red-theme .header-content::before {
	background: linear-gradient(90deg,
			rgba(248, 113, 113, 0.1) 0%,
			rgba(248, 113, 113, 0.4) 50%,
			rgba(248, 113, 113, 0.1) 100%);
	opacity: var(--header-line-enabled);
}

body.blue-theme .header-content::before {
	background: linear-gradient(90deg,
			rgba(96, 165, 250, 0.1) 0%,
			rgba(96, 165, 250, 0.4) 50%,
			rgba(96, 165, 250, 0.1) 100%);
	opacity: var(--header-line-enabled);
}

body.yellow-theme .header-content::before {
	background: linear-gradient(90deg,
			rgba(251, 191, 36, 0.1) 0%,
			rgba(251, 191, 36, 0.4) 50%,
			rgba(251, 191, 36, 0.1) 100%);
	opacity: var(--header-line-enabled);
}

body.purple-theme .header-content::before {
	background: linear-gradient(90deg,
			rgba(192, 132, 252, 0.1) 0%,
			rgba(192, 132, 252, 0.4) 50%,
			rgba(192, 132, 252, 0.1) 100%);
	opacity: var(--header-line-enabled);
}

body.pink-theme .header-content::before {
	background: linear-gradient(90deg,
			rgba(244, 114, 182, 0.1) 0%,
			rgba(244, 114, 182, 0.4) 50%,
			rgba(244, 114, 182, 0.1) 100%);
	opacity: var(--header-line-enabled);
}

body.green-theme .header-content::before {
	background: linear-gradient(90deg,
			rgba(34, 197, 94, 0.1) 0%,
			rgba(34, 197, 94, 0.4) 50%,
			rgba(34, 197, 94, 0.1) 100%);
	opacity: var(--header-line-enabled);
}

/* ============================================
   BOTÓN FLOTANTE "VER PORTFOLIO" EN CURRICULUM
   ============================================ */
.curriculum-portfolio-cta {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 900;
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mostrar solo en sección curriculum */
.section.curriculum:not(.slide-left)~* .curriculum-portfolio-cta,
body:has(.section.curriculum:not(.slide-left)) .curriculum-portfolio-cta {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

/* Texto del CTA */
.curriculum-cta-text {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.3px;
}

@keyframes floatText {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

/* Botón verde brillante */
.curriculum-portfolio-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: #18181b;
	border: none;
	padding: 16px 32px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow:
		0 4px 15px rgba(74, 222, 128, 0.4),
		0 8px 25px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
}

.curriculum-portfolio-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.curriculum-portfolio-btn:hover::before {
	left: 100%;
}

.curriculum-portfolio-btn:hover {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 6px 20px rgba(74, 222, 128, 0.5),
		0 12px 35px rgba(0, 0, 0, 0.3);
}

.curriculum-portfolio-btn:active {
	transform: translateY(-1px) scale(0.98);
	box-shadow:
		0 3px 12px rgba(74, 222, 128, 0.4),
		0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Icono de flecha */
.curriculum-portfolio-btn i {
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}

.curriculum-portfolio-btn:hover i {
	transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
	.curriculum-portfolio-cta {
		bottom: 20px;
		right: 20px;
		gap: 8px;
	}

	.curriculum-cta-text {
		font-size: 0.9rem;
	}

	.curriculum-portfolio-btn {
		padding: 12px 24px;
		font-size: 0.95rem;
		gap: 10px;
	}

	.curriculum-portfolio-btn i {
		font-size: 1rem;
	}
}

/* ============================================
   BOTÓN CTA PORTFOLIO → CURRICULUM
   ============================================ */

.portfolio-curriculum-cta {
	position: fixed;
	bottom: 40px;
	left: 40px;
	z-index: 900;
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mostrar SOLO en Vista 2 (cuando se ven las subcategorías) */
body:has(.card-wrapper.featured):not(:has(.categories-container.expanded)) .portfolio-curriculum-cta {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

/* Ocultar en vista principal de portfolio (sin categoría seleccionada) */
body:has(.section.portfolio.slide-left):not(:has(.card-wrapper.featured)) .portfolio-curriculum-cta {
	display: none !important;
	opacity: 0;
}

/* Ocultar SIEMPRE en sección currículum */
body:has(.section.curriculum:not(.slide-left)) .portfolio-curriculum-cta,
.section.curriculum:not(.slide-left)~* .portfolio-curriculum-cta {
	display: none !important;
	opacity: 0;
}

/* Ocultar cuando está en Vista 3 (detalle de categoría - .expanded) */
body:has(.categories-container.expanded) .portfolio-curriculum-cta {
	display: none !important;
	opacity: 0;
}

/* Ocultar cuando está en Vista 4 (proyecto abierto) */
body:has(.project-viewer.active) .portfolio-curriculum-cta {
	display: none !important;
	opacity: 0;
}

/* Texto del CTA */
.portfolio-cta-text {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.3px;
}

/* Botón verde brillante */
.portfolio-curriculum-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: #18181b;
	border: none;
	padding: 16px 32px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow:
		0 4px 15px rgba(74, 222, 128, 0.4),
		0 8px 25px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
}

.portfolio-curriculum-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.portfolio-curriculum-btn:hover::before {
	left: 100%;
}

.portfolio-curriculum-btn:hover {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 6px 20px rgba(74, 222, 128, 0.5),
		0 12px 35px rgba(0, 0, 0, 0.3);
}

.portfolio-curriculum-btn:active {
	transform: translateY(-1px) scale(0.98);
	box-shadow:
		0 3px 12px rgba(74, 222, 128, 0.4),
		0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Icono de flecha (invertida) */
.portfolio-curriculum-btn i {
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}

.portfolio-curriculum-btn:hover i {
	transform: translateX(-5px);
}

/* Responsive */
@media (max-width: 768px) {
	.portfolio-curriculum-cta {
		bottom: 20px;
		left: 20px;
		gap: 8px;
	}

	.portfolio-cta-text {
		font-size: 0.9rem;
	}

	.portfolio-curriculum-btn {
		padding: 12px 24px;
		font-size: 0.95rem;
		gap: 10px;
	}

	.portfolio-curriculum-btn i {
		font-size: 1rem;
	}
}

/* ============================================
   MODAL DE CONTACTO
   ============================================ */

.contact-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.contact-modal.active {
	display: flex;
	opacity: 1;
}

.contact-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.contact-modal-content {
	position: relative;
	background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.98) 100%);
	border-radius: 24px;
	padding: 40px;
	max-width: 550px;
	width: 90%;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 1px rgba(255, 255, 255, 0.1) inset;
	border: 1px solid rgba(255, 255, 255, 0.1);
	animation: contactModalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center center;
}

@keyframes contactModalZoomIn {
	0% {
		opacity: 0;
		transform: scale(0.9) translateY(20px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Botón X igual que los otros modales */
.contact-modal-close {
	position: absolute;
	top: -50px;
	right: -50px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	line-height: 1;
	padding: 0;
	z-index: 10;
}

.contact-modal-close:hover {
	background: rgba(248, 113, 113, 0.3);
	border-color: rgba(248, 113, 113, 0.5);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
}

.contact-modal-header {
	text-align: center;
	margin-bottom: 32px;
}

.contact-modal-title {
	font-family: 'Poppins', sans-serif;
	font-size: 2.2rem;
	font-weight: 700;
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 8px;
	letter-spacing: -0.5px;
}

.contact-modal-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
}

.contact-sections {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-section-title {
	font-family: 'Poppins', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 2px;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.contact-item:hover {
	background: rgba(74, 222, 128, 0.1);
	border-color: rgba(74, 222, 128, 0.3);
	transform: translateX(8px);
	box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}

.contact-item-icon {
	width: 44px;
	height: 44px;
	min-width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.2) 100%);
	border-radius: 12px;
	font-size: 22px;
	color: #4ade80;
	transition: all 0.3s ease;
}

.contact-item:hover .contact-item-icon {
	transform: scale(1.1) rotate(5deg);
	background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(34, 197, 94, 0.3) 100%);
}

.contact-item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.contact-item-label {
	font-family: 'Poppins', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.contact-item-value {
	font-family: 'Poppins', sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.95);
}

.contact-item-arrow {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.4);
	transition: all 0.3s ease;
}

.contact-item:hover .contact-item-arrow {
	color: #4ade80;
	transform: translateX(4px);
}

/* Estilos para elementos NO clicables (correo y teléfono) */
.contact-item-non-clickable {
	cursor: default !important;
	pointer-events: none;
}

.contact-item-non-clickable:hover {
	background: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	transform: translateX(0) !important;
	box-shadow: none !important;
}

.contact-item-non-clickable .contact-item-icon {
	cursor: default;
}

.contact-item-non-clickable:hover .contact-item-icon {
	transform: none !important;
	background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.2) 100%) !important;
}


/* Responsive */
@media (max-width: 768px) {
	.contact-modal-content {
		padding: 32px 24px;
		width: 95%;
		max-width: 95%;
	}

	.contact-modal-close {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

	.contact-modal-title {
		font-size: 1.8rem;
	}

	.contact-modal-subtitle {
		font-size: 0.85rem;
	}

	.contact-sections {
		gap: 20px;
	}

	.contact-item {
		padding: 12px 14px;
	}

	.contact-item-icon {
		width: 38px;
		height: 38px;
		min-width: 38px;
		font-size: 18px;
	}

	.contact-item-value {
		font-size: 0.85rem;
	}
}

/* ============================================
   MENSAJE MÓVIL
   ============================================ */
.mobile-warning {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(20px);
	z-index: 999999;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.mobile-warning-content {
	text-align: center;
	max-width: 500px;
	padding: 40px 30px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.mobile-warning-icon {
	font-size: 80px;
	margin-bottom: 20px;
	animation: pulse 2s ease-in-out infinite;
}

.mobile-warning-title {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
	letter-spacing: -0.5px;
}

.mobile-warning-text {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.6;
	margin-bottom: 15px;
}

.mobile-warning-subtext {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

/* Mostrar solo en móviles y tablets (basado en ancho de pantalla) */
@media (max-width: 768px) {
	.mobile-warning {
		display: flex;
	}
}