body.fonts-loading {
            visibility: hidden;
        }
/* Icono de ampliar en la esquina superior derecha de la imagen */
        .project-card .expand-icon {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 2;
            background: none;
            border-radius: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
            transition: transform 0.22s cubic-bezier(.4, 0, .2, 1);
        }

        .project-card .expand-icon i {
            display: none;
        }

        /* Use the provided zoom icon image for expand-icon (default for all project cards)
           Will be hidden for cards in data-category="apps" below. */
        .project-card .expand-icon {
            background-image: url('Iconos_Optimizado/iconoZoomImagen.webp');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 24px 24px;
            width: 38px;
            height: 38px;
        }

        @keyframes expandIconBounce {
            0% {
                transform: scale(1);
            }

            11% {
                transform: scale(1.13);
            }

            16% {
                transform: scale(0.93);
            }

            21% {
                transform: scale(1.07);
            }

            25% {
                transform: scale(1);
            }

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

        .project-card:hover .expand-icon {
            animation: expandIconBounce 3.38s cubic-bezier(.4, 0, .2, 1) infinite;
            animation-delay: 0s;

            .project-card .expand-icon svg {
                width: 28px;
                height: 28px;
                display: block;
            }
        }

        /* Fallback: show the provided zoom icon as a pseudo-element on the image container
           for project cards that do NOT belong to the apps/games category. This avoids
           needing to inject HTML and keeps changes reversible and minimal. */
        .project-card:not([data-category="apps"]) .h-48::after {
            content: "";
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 20;
            width: 38px;
            height: 38px;
            background: url('Iconos_Optimizado/iconoZoomImagen.webp') center/24px 24px no-repeat;
            pointer-events: none;
            transition: transform 0.22s cubic-bezier(.4, 0, .2, 1);
            opacity: 1;
        }

        /* Reuse same bounce animation on hover so it matches other icon behaviour */
        .project-card:hover .h-48::after {
            animation: expandIconBounce 3.38s cubic-bezier(.4, 0, .2, 1) infinite;
        }

        /* Explicitly hide the pseudo-icon for apps/games category cards (they have custom badges) */
        .project-card[data-category="apps"] .h-48::after,
        .project-card[data-category="games"] .h-48::after {
            display: none !important;
        }

        /* For 3D projects, show a specific 3D viewer icon instead of the generic zoom icon */
        .project-card[data-category="3d"] .h-48::after,
        .project-card[data-category="3d"] .expand-icon {
            background-image: url('Iconos_Optimizado/icono3DViewer.webp') !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 30px 30px !important;
            width: 48px !important;
            height: 48px !important;
            display: block !important;
        }

        /* Slightly stronger bounce to emphasize 3D viewer icon on hover */
        .project-card[data-category="3d"]:hover .h-48::after,
        .project-card[data-category="3d"]:hover .expand-icon {
            animation: expandIconBounce 3.38s cubic-bezier(.4, 0, .2, 1) infinite;
        }

        /* Animación de zoom para la imagen de la tarjeta en hover */
        .project-card .h-48 img,
        .project-card .h-64 img {
            transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
        }

        .project-card:hover .h-48 img,
        .project-card:hover .h-64 img {
            transform: scale(1.07) translateY(-3.5%);
        }

        /* Animación elástica de zoom para los iconos de programas en hover */
        @keyframes iconZoomElastic {
            0% {
                transform: scale(1);
            }


            80% {
                transform: scale(1.22);
            }

            100% {
                transform: scale(1.12);
            }
        }

        .project-card:hover .program-icon {
            animation: iconZoomElastic 0.4s forwards;
        }

        /* External badge: icon in top-right of project image */
        .external-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            /* remove inner white padding */
            border-radius: 0;
            /* remove rounded white frame */
            background: transparent;
            /* show icon background transparent */
            pointer-events: none;
            /* keep badge decorative and non-interactive */
        }

        .external-badge img {
            display: block;
        }

        .external-badge .badge-box {
            height: 28px;
            width: 28px;
            display: block;
            transition: transform .28s cubic-bezier(.2, .9, .2, 1);
            will-change: transform;
        }

        /* place arrow slightly more to the top-right initially */
        .external-badge .badge-arrow {
            position: absolute;
            right: 2px;
            top: 2px;
            height: 22px;
            width: 22px;
            display: block;
            transition: transform .5s cubic-bezier(.22, .9, .3, 1), opacity .18s ease;
            will-change: transform;
        }

        /* Hover/focus trigger: animate both elements */
        .project-link:hover .external-badge,
        .project-link:focus .external-badge {
            transform: translateY(-4px);
        }

        .project-link:hover .external-badge .badge-box,
        .project-link:focus .external-badge .badge-box {
            animation: zoom-bounce .5s cubic-bezier(.22, .9, .3, 1);
        }

        .project-link:hover .external-badge .badge-arrow,
        .project-link:focus .external-badge .badge-arrow {
            animation: translate-bounce .5s cubic-bezier(.22, .9, .3, 1);
        }

        /* If a project card is in the apps/games category, hide the generic expand icon
           because those cards have their own program icons. */
        .project-card[data-category="apps"] .expand-icon,
        .project-card[data-category="games"] .expand-icon {
            display: none !important;
        }

        /* Animations used by the external badge (copied from apps.html) */
        @keyframes zoom-bounce {
            0% {
                transform: scale(1);
            }

            40% {
                transform: scale(1.18);
            }

            60% {
                transform: scale(0.98);
            }

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

        @keyframes translate-bounce {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }

            30% {
                transform: translate3d(4px, -4px, 0);
                opacity: 1;
            }

            55% {
                transform: translate3d(2px, -2px, 0);
                opacity: 1;
            }

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

        /* Helper class: apply via JS to reliably trigger the icon animation */
        .program-icon-animate {
            animation: iconZoomElastic 0.4s forwards !important;
        }

        .project-card:hover .program-icon:nth-child(1) {
            animation-delay: 0s;
        }

        .project-card:hover .program-icon:nth-child(2) {
            animation-delay: 0.08s;
        }

        .project-card:hover .program-icon:nth-child(3) {
            animation-delay: 0.16s;
        }

        .project-card:hover .program-icon:nth-child(4) {
            animation-delay: 0.24s;
        }

        .project-card:hover .program-icon:nth-child(5) {
            animation-delay: 0.32s;
        }


        :root {
            --icon-marmoset: url('Iconos_Optimizado/marmoset_toolbag.webp');
.icon-marmoset {
    background-image: var(--icon-marmoset);
}
            /* Colores principales (tema claro) */
            --primary-dark: #eef3f8;
            /* Fondo principal claro (ligeramente más profundo) */
            --primary: #ffffff;
            /* Fondo secundario / tarjetas */
            --accent: #ff6b00;
            /* Color principal naranja */
            --accent-light: #ff8c42;
            /* Color naranja claro */
            --text: #1f2937;
            /* Texto principal (gris oscuro) */
            --text-light: #475569;
            /* Texto secundario */
            /* Tokens suaves y alto contraste (sin negro puro) */
            --dark-gray: #1f2937;
            /* Gris oscuro para overlays en lugar de negro */
            --filter-accent: #ff9800;
            /* Naranja brillante para filtros activos */
            --skill-bg: #e6edf3;
            /* Fondo de barras de habilidad (claro) */
            --skill-fill-start: #7dd3fc;
            /* Cian/azul claro inicio */
            --skill-fill-end: #93c5fd;
            /* Azul suave final */
            --skill-empty-border: #cbd5e1;
            /* Borde de segmentos vacíos */
            --app-card-bg: #f1f5f9;
            /* Fondo de contenedor de apps (claro) */
            --app-card-border: #d1d5db;
            /* Borde visible de contenedor de apps */

            /* Colores adicionales para fácil edición */
            --shadow-color: rgba(0, 0, 0, 0.12);
            /* Sombras suaves en tema claro */
            --accent-overlay: rgba(255, 107, 0, 0.8);
            /* Overlay naranja */

            /* Colores para componentes */
            --footer-bg: #f8fafc;
            /* Fondo del footer claro */
            --footer-text: #6b7280;
            /* Texto del footer */
            --card-bg: #ffffff;
            /* Fondo de tarjetas de programas */
            --filter-bg: #ffb066;
            /* Fondo de filtros inactivos (naranja suave, buen contraste con blanco) */
            --filter-text: #fff;
            /* Texto de filtros inactivos (blanco) */
            --input-bg: #ffffff;
            /* Fondo de inputs del formulario */
            --input-border: #d1d5db;
            /* Borde de inputs */

            /* Gradientes de proyectos - Cambia estos para nuevos colores */
            --green-gradient-start: #059669;
            /* Verde UI/UX inicio */
            --green-gradient-end: #0891B2;
            /* Verde UI/UX final */
            --emerald-gradient-start: #10B981;
            /* Esmeralda 2D inicio */
            --emerald-gradient-end: #06B6D4;
            /* Esmeralda 2D final */
            --amber-gradient-start: #D97706;
            /* Ámbar animación inicio */
            --amber-gradient-end: #EA580C;
            /* Ámbar animación final */
            --yellow-gradient-start: #EAB308;
            /* Amarillo texturas inicio */
            --yellow-gradient-end: #F59E0B;
            /* Amarillo texturas final */

            /* Colores de elementos decorativos */
            --purple-blob: #a855f7;
            /* Blob púrpura del hero */
            --orange-blob: #f97316;
            /* Blob naranja del hero */

            /* Colores por categoría de programa - FÁCIL DE EDITAR */
            --color-2d: #10b981;
            /* Verde esmeralda para programas 2D */
            --color-3d: #3b82f6;
            /* Azul para programas 3D */
            --color-video: #8b5cf6;
            /* Púrpura para edición de vídeo */
            --color-photo: #f59e0b;
            /* Ámbar para edición de fotos */
            --color-ui: #06b6d4;
            /* Cian para UI/UX */
            --color-3dprint: #ef4444;
            /* Rojo para impresión 3D */
            --color-texture: #84cc16;
            /* Verde lima para texturas */
            --color-dev: #6366f1;
            /* Índigo para desarrollo */
            --color-streaming: #ec4899;
            /* Rosa para streaming/grabación */
            --color-audio: #f97316;
            /* Naranja para audio */
        }

        /* ===== VARIABLES PARA MODO OSCURO - FÁCIL DE EDITAR ===== */
        html.dark-mode {
            /* Color de fondo principal para bg-primary en modo oscuro */
            --primary: #ececec;
            /* Cambia este valor para modificar el fondo de la sección de habilidades en modo oscuro */
            
            /* Colores para formularios y tarjetas en modo oscuro */
            --input-bg: #ececec;
            /* Fondo de inputs/textarea en modo oscuro */
            --input-border: #ececec;
            /* Borde de inputs/textarea en modo oscuro */
            --card-bg: #ececec;
            /* Fondo de tarjetas y enlaces sociales en modo oscuro */
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--primary-dark);
            /* Fondo base blanco */
            background-image: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
            background-attachment: fixed;
            color: var(--text);
            overflow-x: hidden;
            position: relative;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: 'Bebas Neue', cursive;
            letter-spacing: 1px;
        }

        /* BACKGROUND DEL HERO: Cambia la URL por tu imagen de fondo preferida */
        .hero-bg {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(30, 41, 59, 0.35) 100%),
                url('Proyectos/2D_Optimizado/stitch-surf-ocean2-A1aJNVgyKqUM4lQp.webp');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        /* Utilidad local para usar --primary como fondo en tarjetas/secciones */
        .bg-primary {
            background-color: var(--primary) !important;
        }

        .project-card {
            transition: box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: center;
            perspective: 1000px;
            background: #fff;
            /* Fondo blanco para todas las tarjetas */
            min-width: 260px;
            max-width: 100%;
        }

        /* Color específico para modo oscuro */
        html.dark-mode .project-card {
            background: #ececec !important;
        }

        .project-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow:
                0 0 0 0px rgba(16, 185, 129, 0.0),
                /* transición inicial */
                0 0 0 4px #ff9557,
                /* contorno esmeralda exterior tono intermedio */
                0 25px 50px -12px var(--shadow-color);
            z-index: 10;
        }

        .project-card:hover .project-overlay {
            opacity: 1;
            transform: none;
            filter: brightness(1.35);
        }

        /* Líneas esmeralda en diagonal */
        .emerald-lines {
            position: absolute;
            top: -48px;
            right: -48px;
            z-index: 30;
            width: 260px;
            height: 260px;
            pointer-events: none;
        }

        .emerald-line {
            position: absolute;
            top: 0;
            right: 0;
            transform: rotate(45deg);
            background: linear-gradient(90deg, #ffa33a 60%, #ff7c30 100%);
            border-radius: 2px;
            transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .emerald-line-1 {
            width: 260px;
            height: 64px;
            top: 0px;
            right: -48px;
            transition-delay: 0.12s;
        }

        .emerald-line-2 {
            width: 220px;
            height: 24px;
            top: 100px;
            right: -32px;
            transition-delay: 0.06s;
        }

        .emerald-line-3 {
            width: 360px;
            height: 4px;
            top: 135px;
            right: -72px;
            transition-delay: 0.0s;
        }

        /* Animación en hover: las líneas salen por la esquina */
        .project-card.bg-primary:nth-child(-n+3):hover .emerald-lines .emerald-line {
            transform: rotate(45deg) translate(80px, -80px);
            opacity: 0;
        }

        .project-overlay {
            transition: opacity 0.4s ease;
            opacity: 0;
            background-color: rgba(31, 41, 55, 0.45) !important;
            /* gris oscuro en lugar de negro puro */
        }

        /* Hover personalizado solo para las 3 primeras tarjetas de proyectos */
        .project-card.bg-primary:nth-child(1):hover .project-overlay,
        .project-card.bg-primary:nth-child(2):hover .project-overlay,
        .project-card.bg-primary:nth-child(3):hover .project-overlay {
            background: linear-gradient(to right, rgba(81, 255, 197, 0.35), rgba(64, 226, 255, 0.35));
        }

        /* Minimal, valid styles for category filters (visuals are managed inline in index.html) */
        .category-filter {
            transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.25s ease;
        }

        /* active visuals are intentionally kept in index.html for simpler overrides */

        @keyframes filterActivePop {
            /* reduce -> expand to final active size (no rebound) */
            0% {
                transform: scale(0.96);
                box-shadow: 0 0 0 0 rgba(255,176,102,0);
            }

            100% {
                transform: scale(1.12); /* match final active scale */
                box-shadow: 0 0 8px 3px rgba(255,176,102,0.12);
            }
        }

        .gallery-item {
            transition: all 0.4s ease;
            cursor: pointer;
        }

        .gallery-item:hover {
            transform: scale(1.03);
            z-index: 5;
        }

        .floating {
            animation: floatingRotate 12s linear infinite;
        }

        @keyframes floatingRotate {
            0% {
                transform: translateY(0px) rotate(0deg) scale(1);
            }

            100% {
                transform: translateY(0px) rotate(360deg) scale(1);
            }
        }

        /* Círculos adicionales para efecto fluido */
        .floating-2 {
            animation: floatingRotate2 15s linear infinite;
        }

        .floating-3 {
            animation: floatingRotate3 18s linear infinite;
        }

        @keyframes floatingRotate2 {
            0% {
                transform: rotate(0deg) scale(0.98);
            }

            25% {
                transform: rotate(90deg) scale(1.02);
            }

            50% {
                transform: rotate(180deg) scale(1.04);
            }

            75% {
                transform: rotate(270deg) scale(1.02);
            }

            100% {
                transform: rotate(360deg) scale(0.98);
            }
        }

        @keyframes floatingRotate3 {
            0% {
                transform: rotate(0deg) scale(1.01);
            }

            33% {
                transform: rotate(120deg) scale(0.97);
            }

            66% {
                transform: rotate(240deg) scale(1.05);
            }

            100% {
                transform: rotate(360deg) scale(1.01);
            }
        }

        /* Variables para control de velocidad de rotación */
        :root {
            --rotation-multiplier: 1;
            /* Multiplicador de velocidad (1 = normal, 2 = doble, etc.) */
        }

        /* Animaciones para círculos fluidos alrededor de la imagen */
        @keyframes circularFlow1 {
            from {
                transform: translate(-50%, -50%) rotate(0deg) translateX(260px) rotate(135deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(calc(360deg * var(--rotation-multiplier))) translateX(260px) rotate(135deg);
            }
        }

        @keyframes circularFlow2 {
            from {
                transform: translate(-50%, -50%) rotate(120deg) translateX(270px) rotate(135deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(calc(120deg + 360deg * var(--rotation-multiplier))) translateX(270px) rotate(135deg);
            }
        }

        @keyframes circularFlow3 {
            from {
                transform: translate(-50%, -50%) rotate(240deg) translateX(250px) rotate(135deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(calc(240deg + 360deg * var(--rotation-multiplier))) translateX(250px) rotate(135deg);
            }
        }

        @keyframes circularFlow4 {
            from {
                transform: translate(-50%, -50%) rotate(60deg) translateX(280px) rotate(135deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(calc(60deg + 360deg * var(--rotation-multiplier))) translateX(280px) rotate(135deg);
            }
        }

        @keyframes circularFlow5 {
            from {
                transform: translate(-50%, -50%) rotate(180deg) translateX(245px) rotate(135deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(calc(180deg + 360deg * var(--rotation-multiplier))) translateX(245px) rotate(135deg);
            }
        }

        @keyframes circularFlow6 {
            from {
                transform: translate(-50%, -50%) rotate(300deg) translateX(265px) rotate(135deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(calc(300deg + 360deg * var(--rotation-multiplier))) translateX(265px) rotate(135deg);
            }

            75% {
                transform: translate(-50%, -50%) rotate(570deg) translateX(265px) rotate(135deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(660deg) translateX(265px) rotate(135deg);
            }
        }

        /* Clases para los círculos fluidos */
        .fluid-circle {
            position: absolute;
            border-radius: 50% 50% 50% 20%;
            top: 50%;
            left: 50%;
            /* box-shadow eliminado para quitar el glow */
            z-index: 3;
            transform-origin: center;
            transition: transform 0.3s ease-out;
        }

        /* Variables para control dinámico de velocidades */
        :root {
            --speed-orbital-1: 12s;
            --speed-fade-1: 8s;
            --speed-morph-1: 3s;

            --speed-orbital-2: 15s;
            --speed-fade-2: 10s;
            --speed-morph-2: 2.5s;

            --speed-orbital-3: 18s;
            --speed-fade-3: 12s;
            --speed-morph-3: 3s;

            --speed-orbital-4: 10s;
            --speed-fade-4: 6s;
            --speed-morph-4: 1.5s;

            --speed-orbital-5: 14s;
            --speed-fade-5: 9s;
            --speed-morph-5: 2.2s;

            --speed-orbital-6: 16s;
            --speed-fade-6: 11s;
            --speed-morph-6: 2.8s;
        }

        /* Clases específicas para cada gota con sus duraciones únicas */
        .fluid-circle-1 {
            width: 20px;
            height: 20px;
            background: #ff6b00;
            animation: none;
            /* DESACTIVADO - Ahora usa JavaScript */
            animation-duration: var(--speed-orbital-1), var(--speed-fade-1), var(--speed-morph-1);
            animation-timing-function: linear, ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite, infinite;
        }

        .fluid-circle-2 {
            width: 16px;
            height: 16px;
            background: #ff8c42;
            animation-duration: var(--speed-orbital-2), var(--speed-fade-2), var(--speed-morph-2);
            animation-timing-function: linear, ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite, infinite;
        }

        .fluid-circle-3 {
            width: 24px;
            height: 24px;
            background: #ff5722;
            animation-name: circularFlow3, fadeInOut3, dropMorph3;
            animation-duration: var(--speed-orbital-3), var(--speed-fade-3), var(--speed-morph-3);
            animation-timing-function: linear, ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite, infinite;
        }

        .fluid-circle-4 {
            width: 12px;
            height: 12px;
            background: #ff7f00;
            animation-name: circularFlow4, fadeInOut1, dropMorph4;
            animation-duration: var(--speed-orbital-4), var(--speed-fade-4), var(--speed-morph-4);
            animation-timing-function: linear, ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite, infinite;
        }

        .fluid-circle-5 {
            width: 18px;
            height: 18px;
            background: #ff4500;
            animation-name: circularFlow5, fadeInOut2, dropMorph5;
            animation-duration: var(--speed-orbital-5), var(--speed-fade-5), var(--speed-morph-5);
            animation-timing-function: linear, ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite, infinite;
        }

        .fluid-circle-6 {
            width: 14px;
            height: 14px;
            background: #ffab00;
            animation-name: circularFlow6, fadeInOut3, dropMorph6;
            animation-duration: var(--speed-orbital-6), var(--speed-fade-6), var(--speed-morph-6);
            animation-timing-function: linear, ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite, infinite;
        }

        /* Animaciones de morfología - forma de gota correcta: redonda delante, UN pico detrás */
        @keyframes dropMorph1 {
            0% {
                border-radius: 50% 50% 50% 0%;
            }

            25% {
                border-radius: 50% 50% 40% 0%;
            }

            50% {
                border-radius: 50% 50% 60% 0%;
            }

            75% {
                border-radius: 50% 50% 45% 0%;
            }

            100% {
                border-radius: 50% 50% 50% 0%;
            }
        }

        @keyframes dropMorph2 {
            0% {
                border-radius: 50% 50% 45% 0%;
            }

            30% {
                border-radius: 50% 50% 55% 0%;
            }

            60% {
                border-radius: 50% 50% 35% 0%;
            }

            100% {
                border-radius: 50% 50% 45% 0%;
            }
        }

        @keyframes dropMorph3 {
            0% {
                border-radius: 50% 50% 55% 0%;
            }

            20% {
                border-radius: 50% 50% 40% 0%;
            }

            40% {
                border-radius: 50% 50% 65% 0%;
            }

            60% {
                border-radius: 50% 50% 35% 0%;
            }

            80% {
                border-radius: 50% 50% 50% 0%;
            }

            100% {
                border-radius: 50% 50% 55% 0%;
            }
        }

        @keyframes dropMorph4 {
            0% {
                border-radius: 50% 50% 42% 0%;
            }

            33% {
                border-radius: 50% 50% 58% 0%;
            }

            66% {
                border-radius: 50% 50% 38% 0%;
            }

            100% {
                border-radius: 50% 50% 42% 0%;
            }
        }

        @keyframes dropMorph5 {
            0% {
                border-radius: 50% 50% 48% 0%;
            }

            25% {
                border-radius: 50% 50% 62% 0%;
            }

            50% {
                border-radius: 50% 50% 36% 0%;
            }

            75% {
                border-radius: 50% 50% 52% 0%;
            }

            100% {
                border-radius: 50% 50% 48% 0%;
            }
        }

        @keyframes dropMorph6 {
            0% {
                border-radius: 50% 50% 46% 0%;
            }

            30% {
                border-radius: 50% 50% 56% 0%;
            }

            60% {
                border-radius: 50% 50% 40% 0%;
            }

            100% {
                border-radius: 50% 50% 46% 0%;
            }
        }

        /* Animaciones de impulso - ACELERACIÓN SÚPER DRAMÁTICA Y VISIBLE */
        @keyframes speedDeform1 {
            0% {
                border-radius: 50% 50% 50% 0%;
            }

            1% {
                border-radius: 50% 50% 5% 0%;
            }

            3% {
                border-radius: 50% 50% 1% 0%;
            }

            5% {
                border-radius: 50% 50% 0% 0%;
            }

            10% {
                border-radius: 50% 50% 2% 0%;
            }

            20% {
                border-radius: 50% 50% 10% 0%;
            }

            40% {
                border-radius: 50% 50% 25% 0%;
            }

            70% {
                border-radius: 50% 50% 40% 0%;
            }

            100% {
                border-radius: 50% 50% 50% 0%;
            }
        }

        @keyframes speedDeform2 {
            0% {
                border-radius: 50% 50% 45% 0%;
            }

            1% {
                border-radius: 50% 50% 3% 0%;
            }

            4% {
                border-radius: 50% 50% 0% 0%;
            }

            6% {
                border-radius: 50% 50% 1% 0%;
            }

            12% {
                border-radius: 50% 50% 5% 0%;
            }

            25% {
                border-radius: 50% 50% 15% 0%;
            }

            45% {
                border-radius: 50% 50% 28% 0%;
            }

            75% {
                border-radius: 50% 50% 38% 0%;
            }

            100% {
                border-radius: 50% 50% 45% 0%;
            }
        }

        @keyframes speedDeform3 {
            0% {
                border-radius: 50% 50% 55% 0%;
            }

            2% {
                border-radius: 50% 50% 4% 0%;
            }

            5% {
                border-radius: 50% 50% 0% 0%;
            }

            7% {
                border-radius: 50% 50% 2% 0%;
            }

            15% {
                border-radius: 50% 50% 8% 0%;
            }

            30% {
                border-radius: 50% 50% 20% 0%;
            }

            50% {
                border-radius: 50% 50% 35% 0%;
            }

            80% {
                border-radius: 50% 50% 48% 0%;
            }

            100% {
                border-radius: 50% 50% 55% 0%;
            }
        }

        @keyframes speedDeform4 {
            0% {
                border-radius: 50% 50% 42% 0%;
            }

            1% {
                border-radius: 50% 50% 2% 0%;
            }

            3% {
                border-radius: 50% 50% 0% 0%;
            }

            5% {
                border-radius: 50% 50% 1% 0%;
            }

            11% {
                border-radius: 50% 50% 6% 0%;
            }

            22% {
                border-radius: 50% 50% 16% 0%;
            }

            42% {
                border-radius: 50% 50% 28% 0%;
            }

            72% {
                border-radius: 50% 50% 38% 0%;
            }

            100% {
                border-radius: 50% 50% 42% 0%;
            }
        }

        @keyframes speedDeform5 {
            0% {
                border-radius: 50% 50% 48% 0%;
            }

            2% {
                border-radius: 50% 50% 3% 0%;
            }

            4% {
                border-radius: 50% 50% 0% 0%;
            }

            6% {
                border-radius: 50% 50% 2% 0%;
            }

            13% {
                border-radius: 50% 50% 7% 0%;
            }

            26% {
                border-radius: 50% 50% 18% 0%;
            }

            46% {
                border-radius: 50% 50% 30% 0%;
            }

            76% {
                border-radius: 50% 50% 42% 0%;
            }

            100% {
                border-radius: 50% 50% 48% 0%;
            }
        }

        @keyframes speedDeform6 {
            0% {
                border-radius: 50% 50% 46% 0%;
            }

            1% {
                border-radius: 50% 50% 2% 0%;
            }

            3% {
                border-radius: 50% 50% 0% 0%;
            }

            5% {
                border-radius: 50% 50% 1% 0%;
            }

            12% {
                border-radius: 50% 50% 6% 0%;
            }

            24% {
                border-radius: 50% 50% 17% 0%;
            }

            44% {
                border-radius: 50% 50% 29% 0%;
            }

            74% {
                border-radius: 50% 50% 40% 0%;
            }

            100% {
                border-radius: 50% 50% 46% 0%;
            }
        }

        /* Animaciones para círculos grandes que crean efecto fluido */
        @keyframes bigCircleFlow1 {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) scale(1);
            }

            25% {
                transform: translate(-50%, -50%) rotate(90deg) scale(1.01);
            }

            50% {
                transform: translate(-50%, -50%) rotate(180deg) scale(1.02);
            }

            75% {
                transform: translate(-50%, -50%) rotate(270deg) scale(1.01);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) scale(1);
            }
        }

        @keyframes bigCircleFlow2 {
            0% {
                transform: translate(-50%, -50%) rotate(120deg) scale(1.01);
            }

            25% {
                transform: translate(-50%, -50%) rotate(210deg) scale(1);
            }

            50% {
                transform: translate(-50%, -50%) rotate(300deg) scale(1.015);
            }

            75% {
                transform: translate(-50%, -50%) rotate(390deg) scale(1.05);
            }

            100% {
                transform: translate(-50%, -50%) rotate(480deg) scale(1.01);
            }
        }

        @keyframes bigCircleFlow3 {
            0% {
                transform: translate(-50%, -50%) rotate(240deg) scale(1.05);
            }

            25% {
                transform: translate(-50%, -50%) rotate(330deg) scale(1.02);
            }

            50% {
                transform: translate(-50%, -50%) rotate(420deg) scale(1);
            }

            75% {
                transform: translate(-50%, -50%) rotate(510deg) scale(1.015);
            }

            100% {
                transform: translate(-50%, -50%) rotate(600deg) scale(1.05);
            }
        }

        @keyframes bigCircleFlow4 {
            0% {
                transform: translate(-50%, -50%) rotate(60deg) scale(1.015);
            }

            25% {
                transform: translate(-50%, -50%) rotate(150deg) scale(1.05);
            }

            50% {
                transform: translate(-50%, -50%) rotate(240deg) scale(1.01);
            }

            75% {
                transform: translate(-50%, -50%) rotate(330deg) scale(1.02);
            }

            100% {
                transform: translate(-50%, -50%) rotate(420deg) scale(1.015);
            }
        }

        /* Animaciones para círculos blancos con centro más desplazado */
        @keyframes whiteCircleFlow1 {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) scale(1);
            }

            25% {
                transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
            }

            50% {
                transform: translate(-50%, -50%) rotate(180deg) scale(1.01);
            }

            75% {
                transform: translate(-50%, -50%) rotate(270deg) scale(1.03);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) scale(1);
            }
        }

        @keyframes whiteCircleFlow2 {
            0% {
                transform: translate(-50%, -50%) rotate(45deg) scale(1.02);
            }

            25% {
                transform: translate(-50%, -50%) rotate(135deg) scale(1);
            }

            50% {
                transform: translate(-50%, -50%) rotate(225deg) scale(1.03);
            }

            75% {
                transform: translate(-50%, -50%) rotate(315deg) scale(1.01);
            }

            100% {
                transform: translate(-50%, -50%) rotate(405deg) scale(1.02);
            }
        }

        @keyframes whiteCircleFlow3 {
            0% {
                transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
            }

            25% {
                transform: translate(-50%, -50%) rotate(180deg) scale(1.01);
            }

            50% {
                transform: translate(-50%, -50%) rotate(270deg) scale(1);
            }

            75% {
                transform: translate(-50%, -50%) rotate(360deg) scale(1.03);
            }

            100% {
                transform: translate(-50%, -50%) rotate(450deg) scale(1.02);
            }
        }

        @keyframes whiteCircleFlow4 {
            0% {
                transform: translate(-50%, -50%) rotate(30deg) scale(1.03);
            }

            25% {
                transform: translate(-50%, -50%) rotate(120deg) scale(1.01);
            }

            50% {
                transform: translate(-50%, -50%) rotate(210deg) scale(1.02);
            }

            75% {
                transform: translate(-50%, -50%) rotate(300deg) scale(1.04);
            }

            100% {
                transform: translate(-50%, -50%) rotate(390deg) scale(1.03);
            }
        }

        /* Círculos grandes para efecto fluido */
        .big-fluid-circle {
            position: absolute;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            pointer-events: none;
        }

        .big-fluid-circle-1 {
            width: 310px;
            height: 310px;
            background: #ff6b00;
            animation: bigCircleFlow1 10s linear infinite;
            transform-origin: center center;
        }

        .big-fluid-circle-2 {
            width: 310px;
            height: 310px;
            background: #ff5722;
            animation: bigCircleFlow2 25s linear infinite;
            transform-origin: center center;
        }

        .big-fluid-circle-3 {
            width: 310px;
            height: 310px;
            background: #ffab00;
            animation: bigCircleFlow3 30s linear infinite;
            transform-origin: center center;
        }

        .big-fluid-circle-4 {
            width: 210px;
            height: 210px;
            background: #ff9500;
            animation: bigCircleFlow4 18s linear infinite;
            transform-origin: center center;
        }

        /* Círculos blancos encima de los grandes */
        .white-fluid-circle {
            position: absolute;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            pointer-events: none;
            border: 2px solid rgba(255, 255, 255, 1.0);
            z-index: 5;
        }

        .white-fluid-circle-1 {
            width: 270px;
            height: 270px;
            background: rgba(255, 255, 255, 1.0);
            animation: whiteCircleFlow1 6s linear infinite;
            transform-origin: 46% 47%;
            /* Más desfase hacia arriba */
        }

        .white-fluid-circle-2 {
            width: 290px;
            height: 290px;
            background: rgba(255, 255, 255, 1.0);
            animation: whiteCircleFlow2 8s linear infinite reverse;
            /* Rotación inversa */
            transform-origin: 50.5% 47%;
            /* Más desfase hacia arriba */
        }

        .white-fluid-circle-3 {
            width: 310px;
            height: 310px;
            background: rgba(255, 255, 255, 1.0);
            animation: whiteCircleFlow3 7s linear infinite;
            transform-origin: 50.5% 51%;
            /* Menos desfase hacia abajo */
        }

        .white-fluid-circle-4 {
            width: 250px;
            height: 250px;
            background: rgba(255, 255, 255, 1.0);
            animation: whiteCircleFlow4 9s linear infinite reverse;
            /* Rotación inversa */
            transform-origin: 46% 51%;
            /* Menos desfase hacia abajo */
        }

        /* Círculo blanco del tamaño de la foto de perfil */
        .profile-size-circle {
            width: 280px;
            /* Tamaño que sobresale de la foto */
            height: 280px;
            background: rgba(255, 255, 255, 1.0);
            border: 3px solid rgba(255, 255, 255, 1.0);
            animation: whiteCircleFlow1 4s linear infinite;
            transform-origin: 50.8% 49.2%;
            /* Desfase sutil diagonal */
        }

        /* Pétalos naranjas grandes que orbitan alrededor */
        /* :root {
            --petal-orbit-duration: 60s; */
        /* Variables de control del borde */
        /* --petal-border-thickness: 3px;
            --petal-border-color: rgba(255, 140, 60, 0.2);
            --petal-border-coverage: 70%; */
        /* Porcentaje del contorno visible */
        /* --petal-border-fade-strength: 1; */
        /* Fuerza del degradado (0-1) */
        /* } */

        /* .orange-petal {
            position: absolute;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            pointer-events: none;
            z-index: -1; */
        /* Debajo de todo */
        /* width: 450px;
            height: 450px;
            filter: drop-shadow(2px 0 8px rgba(255, 200, 100, 0.6));
            animation: petalOrbit var(--petal-orbit-duration) linear infinite;
        }

        .orange-petal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse 70% 100% at 100% 50%,
                    rgba(255, 140, 60, 0.5) 0%,
                    rgba(255, 120, 40, 0.35) 15%,
                    rgba(255, 100, 20, 0.25) 30%,
                    rgba(255, 87, 34, 0.15) 60%,
                    transparent 80%);
            border-radius: 50%;
        } */

        /* .orange-petal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: var(--petal-border-thickness) solid transparent;
            background:
                radial-gradient(ellipse 70% 100% at 100% 50%,
                    var(--petal-border-color) 0%,
                    var(--petal-border-color) var(--petal-border-coverage),
                    transparent calc(var(--petal-border-coverage) + 20%)) border-box;
            -webkit-mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: subtract;
            mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            mask-composite: subtract;
        }

        .orange-petal:nth-child(1) {
            animation: petalOrbit var(--petal-orbit-duration) linear infinite;
            animation-delay: 0s;
        }

        .orange-petal:nth-child(2) {
            animation: petalOrbit var(--petal-orbit-duration) linear infinite;
            animation-delay: calc(var(--petal-orbit-duration) * -0.2);
        }

        .orange-petal:nth-child(3) {
            animation: petalOrbit var(--petal-orbit-duration) linear infinite;
            animation-delay: calc(var(--petal-orbit-duration) * -0.4);
        }

        .orange-petal:nth-child(4) {
            animation: petalOrbit var(--petal-orbit-duration) linear infinite;
            animation-delay: calc(var(--petal-orbit-duration) * -0.6);
        }

        .orange-petal:nth-child(5) {
            animation: petalOrbit var(--petal-orbit-duration) linear infinite;
            animation-delay: calc(var(--petal-orbit-duration) * -0.8);
        }

        @keyframes petalOrbit {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) translateY(-200px) rotate(-0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) translateY(-200px) rotate(-0deg);
            }
        } */





        .lang-selector {
            transition: all 0.3s ease;
            cursor: pointer;
            opacity: 1;
            background: rgba(255, 255, 255, 0.25);
            /* glass effect */
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: var(--text);
            border-radius: 10px;
            box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.07);
            backdrop-filter: blur(8px) saturate(160%);
            -webkit-backdrop-filter: blur(8px) saturate(160%);
        }

        .lang-selector:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.45);
            border-color: #bcdfff;
            box-shadow: 0 6px 32px 0 rgba(31, 38, 135, 0.12);
        }

        .lang-selector.active {
            opacity: 1;
            background: rgba(173, 216, 255, 0.35);
            color: var(--dark-gray);
            border-color: #a5d8ff;
            box-shadow: 0 8px 36px 0 rgba(31, 38, 135, 0.18);
        }

        .lang-selector.active::after {
            content: "✓";
            margin-left: auto;
            padding-left: 10px;
        }

        .lang-menu {
            transition: all 0.4s ease;
            transform-origin: top right;
            border: 0;
            background-color: transparent !important;
            /* contenedor general transparente */
            box-shadow: none !important;
            /* elimina sombra que oscurece la parte inferior */
        }

        /* Botón del selector de idioma en tema claro */
        #lang-btn {
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.25);
            box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.07);
            backdrop-filter: blur(8px) saturate(160%);
            -webkit-backdrop-filter: blur(8px) saturate(160%);
            color: var(--text);
            /* mantiene la forma original */
            transition: all 0.3s ease;
        }

        #lang-btn:hover {
            background: rgba(255, 255, 255, 0.45) !important;
            box-shadow: 0 6px 32px 0 rgba(31, 38, 135, 0.12);
        }

        .skill-bar-container {
            width: 100%;
            height: 16px;
            background-color: var(--skill-bg);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            display: flex;
            gap: 4px;
            /* Barra y bordes originales */
        }

        .skill-segment {
            height: 100%;
            background: linear-gradient(90deg, var(--skill-fill-start), var(--skill-fill-end));
            border-radius: 4px;
            transition: all 0.5s ease-in-out;
            flex-grow: 1;
            position: relative;
        }

        .skill-segment.empty {
            background: var(--skill-bg);
            border: 1px solid var(--skill-empty-border);
        }

        .skill-label {
            position: absolute;
            top: -20px;
            font-size: 10px;
            color: var(--text-light);
            transform: translateX(-50%);
        }

        /* ============================================
         * CONFIGURACIÓN DE ICONOS - EDITAR AQUÍ
         * ============================================
         * Para cambiar cualquier icono, solo modifica la URL aquí:
         */
        :root {
            --icon-unity: url('Iconos_Optimizado/unity.webp');
            --icon-3ds: url('Iconos_Optimizado/3ds_Max.webp');
            --icon-blender: url('Iconos_Optimizado/Blender_logo.webp');
            --icon-photoshop: url('Iconos_Optimizado/Photoshop_icon.webp');
            --icon-substance: url('Iconos_Optimizado/substance-painter.webp');
            --icon-figma: url('Iconos_Optimizado/figma.webp');
            --icon-illustrator: url('Iconos_Optimizado/Illustrator.webp');
            --icon-aftereffects: url('Iconos_Optimizado/After_Effects.webp');
            --icon-maya: url('Iconos_Optimizado/maya.webp');
            --icon-zbrush: url('Iconos_Optimizado/zbrush.webp');
            --icon-cinema4d: url('Iconos_Optimizado/cinema4d.webp');
            --icon-unreal: url('Iconos_Optimizado/unreal-engine.webp');
            --icon-procreate: url('Iconos_Optimizado/Procreate.webp');
            --icon-figma-v1: url('Iconos_Optimizado/figma-v1.webp');
            --icon-aftereffects-v2: url('Iconos_Optimizado/After_Effects.webp');
            --icon-unity-v2: url('Iconos_Optimizado/unity.webp');
            --icon-illustrator-v2: url('Iconos_Optimizado/Illustrator.webp');
            --icon-substancedesigner: url('Iconos_Optimizado/substance-designer.webp');
            --icon-quixel: url('Iconos_Optimizado/quixel.webp');
            --icon-cura: url('Iconos_Optimizado/cura.webp');
            --icon-bambu: url('Iconos_Optimizado/BambuStudio.webp');
            --icon-capcut: url('Iconos_Optimizado/capcut.webp');
            --icon-clipstudiopaint: url('Iconos_Optimizado/Clip_Studio_Paint.webp');
            --icon-corona: url('Iconos_Optimizado/corona.webp');
            --icon-davinci: url('Iconos_Optimizado/DaVinci_Resolve.webp');
            --icon-dreams: url('Iconos_Optimizado/dreams.webp');
            --icon-gimp: url('Iconos_Optimizado/GIMP.webp');
            --icon-githubdesktop: url('Iconos_Optimizado/Github_desktop.webp');
            --icon-inkscape: url('Iconos_Optimizado/Inkscape.webp');
            --icon-krita: url('Iconos_Optimizado/Krita.webp');
            --icon-lightroom: url('Iconos_Optimizado/Lightroom.webp');
            --icon-obs: url('Iconos_Optimizado/OBS_Studio.webp');
            --icon-piskel: url('Iconos_Optimizado/piskel.webp');
            --icon-premiere: url('Iconos_Optimizado/Premiere_Pro.webp');
            --icon-prusaslicer: url('Iconos_Optimizado/prusaslicer.webp');
            --icon-pureref: url('Iconos_Optimizado/PureRef.webp');
            --icon-sketchfab: url('Iconos_Optimizado/sketchfab.webp');
            --icon-sonyvegas: url('Iconos_Optimizado/sony_vegas.webp');
            --icon-spine: url('Iconos_Optimizado/spine.webp');
            --icon-vscode: url('Iconos_Optimizado/Visual_Studio_Code.webp');
            --icon-handdraw: url('Iconos_Optimizado/HandDrawR.webp');
            --icon-unreal: url('Iconos_Optimizado/Unreal-Logo.svg');
        }

        /* Estilos para iconos personalizados de programas */
        .program-icon {
            width: 40px;
            height: 40px;
            display: inline-block;
            position: relative;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            object-fit: contain;
        }


        /* Iconos específicos - usan las variables de arriba */
        .icon-unity {
            background-image: var(--icon-unity);
        }

        .icon-bambu { background-image: var(--icon-bambu); }
        .icon-capcut { background-image: var(--icon-capcut); }
        .icon-clipstudiopaint { background-image: var(--icon-clipstudiopaint); }
        .icon-corona { background-image: var(--icon-corona); }
        .icon-davinci { background-image: var(--icon-davinci); }
        .icon-dreams { background-image: var(--icon-dreams); }
        .icon-gimp { background-image: var(--icon-gimp); }
        .icon-githubdesktop { background-image: var(--icon-githubdesktop); }
        .icon-inkscape { background-image: var(--icon-inkscape); }
        .icon-krita { background-image: var(--icon-krita); }
        .icon-lightroom { background-image: var(--icon-lightroom); }
        .icon-obs { background-image: var(--icon-obs); }
        .icon-piskel { background-image: var(--icon-piskel); }
        .icon-premiere { background-image: var(--icon-premiere); }
        .icon-prusaslicer { background-image: var(--icon-prusaslicer); }
        .icon-pureref { background-image: var(--icon-pureref); }
        .icon-sketchfab { background-image: var(--icon-sketchfab); }
        .icon-sonyvegas { background-image: var(--icon-sonyvegas); }
        .icon-spine { background-image: var(--icon-spine); }
        .icon-vscode { background-image: var(--icon-vscode); }
        .icon-handdraw { background-image: var(--icon-handdraw); }
        .icon-unreal { background-image: var(--icon-unreal); }

        .icon-3ds {
            background-image: var(--icon-3ds);
        }

        .icon-blender {
            background-image: var(--icon-blender);
        }

        .icon-photoshop {
            background-image: var(--icon-photoshop);
        }

        .icon-substance {
            background-image: var(--icon-substance);
        }

        .icon-figma {
            background-image: var(--icon-figma);
        }

        .icon-illustrator {
            background-image: var(--icon-illustrator);
        }

        .icon-aftereffects {
            background-image: var(--icon-aftereffects);
        }

        .icon-maya {
            background-image: var(--icon-maya);
        }

        .icon-zbrush {
            background-image: var(--icon-zbrush);
        }

        .icon-cinema4d {
            background-image: var(--icon-cinema4d);
        }

        .icon-unreal {
            background-image: var(--icon-unreal);
        }

        .icon-procreate {
            background-image: var(--icon-procreate);
        }

        .icon-figma-v1 {
            background-image: var(--icon-figma-v1);
        }

        .icon-aftereffects-v2 {
            background-image: var(--icon-aftereffects-v2);
        }

        .icon-unity-v2 {
            background-image: var(--icon-unity-v2);
        }

        .icon-illustrator-v2 {
            background-image: var(--icon-illustrator-v2);
        }

        .icon-substancedesigner {
            background-image: var(--icon-substancedesigner);
        }

        .icon-quixel {
            background-image: var(--icon-quixel);
        }

        .icon-unity,
        .icon-3ds,
        .icon-blender,
        .icon-photoshop,
        .icon-substance,
        .icon-marmoset,
        .icon-figma,
        .icon-illustrator,
        .icon-aftereffects,
        .icon-maya,
        .icon-zbrush,
        .icon-cinema4d {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .icon-bambu,
        .icon-capcut,
        .icon-clipstudiopaint,
        .icon-corona,
        .icon-davinci,
        .icon-dreams,
        .icon-gimp,
        .icon-githubdesktop,
        .icon-inkscape,
        .icon-krita,
        .icon-lightroom,
        .icon-obs,
        .icon-piskel,
        .icon-premiere,
        .icon-prusaslicer,
        .icon-pureref,
        .icon-sketchfab,
        .icon-sonyvegas,
        .icon-spine,
        .icon-vscode,
        .icon-handdraw {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .icon-cura {
            background-image: var(--icon-cura);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* ============================================
         * INSTRUCCIONES PARA CAMBIAR ICONOS
         * ============================================
         * 
         * ¡MUY FÁCIL! Solo tienes que:
         * 1. Ir al bloque ":root" arriba (líneas con --icon-...)
         * 2. Reemplazar la URL del icono que quieras cambiar
         * 3. ¡Listo! No toques nada más del código
         * 
         * Ejemplo:
         * --icon-unity: url('TU_NUEVA_URL_AQUÍ');
         * 
         * Formatos compatibles: .png, .jpg, .svg, .gif
         * Tamaño recomendado: 48px o más
         * 
         */

        /* Glassmorphism para la caja principal del hero */
        .glass-card {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(18px) saturate(160%);
            border: 3px solid rgba(255, 255, 255, 0.22);
            border-radius: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }

        /* Botón principal naranja vibrante y bonito */
        .btn-orange {
            position: relative;
            overflow: hidden;
            z-index: 1;
            border-radius: 2rem;
            color: #fff;
            font-weight: 700;
            font-size: inherit;
            background: linear-gradient(90deg, #ffb347 0%, #ff5e00 100%);
            background-size: 200% 100%;
            background-position: 0% 0%;
            transition: background-position 0.4s cubic-bezier(.4, 0, .2, 1), transform 0.13s cubic-bezier(.4, 0, .2, 1);
        }

        .btn-orange:hover {
            background-position: 100% 0%;
            transform: scale(1.03);
        }

        .btn-orange:active {
            background-position: 100% 0%;
        }

        .btn-orange>* {
            position: relative;
            z-index: 2;
            color: #fff;
            font-weight: 700;
            font-size: inherit;
        }

        /* Elimina ::before para gradiente principal */
        .btn-orange::before {
            display: none !important;
        }

        /* Botón secundario claro y legible */
        .btn-light {
            background: rgba(255, 255, 255, 0.85);
            color: #ff9800;
            border: 2px solid #ffb347;
            border-radius: 2rem;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(255, 140, 0, 0.08);
            transition: background 0.3s, color 0.3s;
        }

        .btn-light:hover {
            background: #fff;
            color: #ffb347;
        }

        /* === ZOOM MÁS SUTIL Y HOVER DEL BOTÓN VOLVER ARRIBA AJUSTADO === */
        .btn-orange,
        .btn-light,
        button,
        .category-filter,
        .fixed.bottom-8.right-8.w-14.h-14 {
            transition: transform 0.13s cubic-bezier(.4, 0, .2, 1);
        }

        .btn-orange:hover,
        .btn-light:hover,
        button:hover,
        .category-filter:hover,
        .fixed.bottom-8.right-8.w-14.h-14:hover {
            transform: scale(1.03);
        }

        .fixed.bottom-8.right-8.w-14.h-14:hover {
            background-color: #ff7300ff !important;
        }

        @media (min-width: 768px) {
                        .skills-row {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 3rem;
                            max-width: 75rem;
                            margin-left: auto;
                            margin-right: auto;
                        }

                        .skills-row>div {
                            min-width: 0;
                            word-break: break-word;
                        }

                        .skills-row.shrink-font>div {
                            font-size: 0.95rem;
                        }
                    }
        .program-card {
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        gap: 0.5em;
                        padding: 1em 0.5em;
                        border-radius: 0.75em;
                        font-size: 0.97em;
                        min-width: 120px;
                        max-width: 150px;
                        height: 100px;
                        background-color: var(--app-card-bg);
                        border: 1px solid var(--app-card-border);
                        color: var(--text);
                        display: flex;
                        font-weight: 600;
                        transition: all 0.2s ease-in-out;
                    }

                    .program-card.highlight {
                        background: linear-gradient(120deg, #ffe082 0%, #fffbe6 60%, #ffd700 100%);
                        border: 2px solid #ffd700;
                        box-shadow: 0 0 24px 6px #ffe082, 0 0 60px 0px #ffd700 inset;
                        position: relative;
                        overflow: visible;
                        color: #b8860b;
                        font-size: 1.02em;
                    }

                    /* Colores automáticos por categoría - FÁCIL DE EDITAR */
                    /* Solo cambia el atributo data-category en el HTML para cambiar el color */
                    
                    .program-card[data-category="2d"]:not(.highlight) {
                        background-color: rgba(16, 185, 129, 0.08);
                        border: 1px solid rgba(16, 185, 129, 0.15);
                    }

                    .program-card[data-category="3d"]:not(.highlight) {
                        background-color: rgba(59, 130, 246, 0.08);
                        border: 1px solid rgba(59, 130, 246, 0.15);
                    }

                    .program-card[data-category="video"]:not(.highlight) {
                        background-color: rgba(139, 92, 246, 0.08);
                        border: 1px solid rgba(139, 92, 246, 0.15);
                    }

                    .program-card[data-category="photo"]:not(.highlight) {
                        background-color: rgba(245, 158, 11, 0.08);
                        border: 1px solid rgba(245, 158, 11, 0.15);
                    }

                    .program-card[data-category="ui"]:not(.highlight) {
                        background-color: rgba(6, 182, 212, 0.08);
                        border: 1px solid rgba(6, 182, 212, 0.15);
                    }

                    .program-card[data-category="3dprint"]:not(.highlight) {
                        background-color: rgba(239, 68, 68, 0.08);
                        border: 1px solid rgba(239, 68, 68, 0.15);
                    }

                    .program-card[data-category="texture"]:not(.highlight) {
                        background-color: rgba(132, 204, 22, 0.08);
                        border: 1px solid rgba(132, 204, 22, 0.15);
                    }

                    .program-card[data-category="dev"]:not(.highlight) {
                        background-color: rgba(99, 102, 241, 0.08);
                        border: 1px solid rgba(99, 102, 241, 0.15);
                    }

                    .program-card[data-category="streaming"]:not(.highlight) {
                        background-color: rgba(236, 72, 153, 0.08);
                        border: 1px solid rgba(236, 72, 153, 0.15);
                    }

                    .program-card[data-category="audio"]:not(.highlight) {
                        background-color: rgba(249, 115, 22, 0.08);
                        border: 1px solid rgba(249, 115, 22, 0.15);
                    }

                    .program-card[data-category="streaming"]:not(.highlight) {
                        background: linear-gradient(120deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.05) 60%, rgba(236, 72, 153, 0.2) 100%);
                        border: 2px solid rgba(236, 72, 153, 0.3);
                        box-shadow: 0 0 12px 3px rgba(236, 72, 153, 0.15);
                    }

                    .program-card[data-category="audio"]:not(.highlight) {
                        background: linear-gradient(120deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.05) 60%, rgba(249, 115, 22, 0.2) 100%);
                        border: 2px solid rgba(249, 115, 22, 0.3);
                        box-shadow: 0 0 12px 3px rgba(249, 115, 22, 0.15);
                    }

                    @keyframes shine {
                        0% {
                            background-position: -200px 0;
                        }

                        100% {
                            background-position: 200px 0;
                        }
                    }

                    .program-card.highlight::after {
                        display: none;
                        /* Barras de brillo animadas */
                        /* Primera barra */
                        /* Segunda barra */
                    }

                    .program-card.highlight .shine-bar,
                    .program-card.highlight .shine-bar {
                        position: absolute;
                        top: -24px;
                        left: -72px;
                        width: 32px;
                        height: 200px;
                        background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0.1) 100%);
                        opacity: 0.85;
                        transform: skew(-20deg, -20deg) rotate(45deg);
                        pointer-events: none;
                        z-index: 2;
                        animation: shine-bar-move 4s linear infinite;
                    }

                    @keyframes crown-bounce-rot {
                        0% {
                            transform: rotate(-18deg) translateY(0);
                        }

                        5% {
                            transform: rotate(-18deg) translateY(-7px) scaleY(1.08) scaleX(0.97);
                        }

                        10% {
                            transform: rotate(-18deg) translateY(-3px) scaleY(0.95) scaleX(1.03);
                        }

                        13% {
                            transform: rotate(-18deg) translateY(-4px) scaleY(1.03) scaleX(0.99);
                        }

                        16% {
                            transform: rotate(-18deg) translateY(0) scaleY(1) scaleX(1);
                        }

                        100% {
                            transform: rotate(-18deg) translateY(0) scaleY(1) scaleX(1);
                        }
                    }

                    .program-card.highlight img[alt="Corona"] {
                        animation: crown-bounce-rot 4s cubic-bezier(.42, 0, .58, 1) infinite;
                        transform: rotate(-18deg) translateY(0);
                        animation-delay: 0s;
                    }

                    .program-card.highlight .shine-bar2 {
                        position: absolute;
                        top: -24px;
                        left: -200px;
                        width: 38px;
                        height: 200px;
                        background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 80%, rgba(255, 255, 255, 0.1) 100%);
                        opacity: 0.7;
                        transform: skew(-20deg, -20deg) rotate(45deg);
                        pointer-events: none;
                        z-index: 2;
                        animation: shine-bar-move 4s linear infinite;
                        animation-delay: 0.2s;
                    }

                    @keyframes shine-bar-move {
                        0% {
                            left: -150px;
                            /* Inicia más a la izquierda */
                        }

                        15% {
                            left: calc(100% + 150px);
                            /* Termina más a la derecha */
                        }

                        100% {
                            left: calc(100% + 150px);
                        }
                    }


                    @keyframes sparkle {
                        0% {
                            opacity: 0.5;
                        }

                        50% {
                            opacity: 0.8;
                        }

                        100% {
                            opacity: 0.5;
                        }
                    }


                    .program-group-title {

                        width: 100%;
                        text-align: left;
                        font-weight: bold;
                        font-size: 1.1em;
                        margin: 1.5em 0 0.5em 0;
                        color: var(--amber-700, #d97706);
                    }
        
    .modal-cross-line {
                    transition: stroke 0.38s cubic-bezier(.4, 0, .2, 1);
                }

/* Línea cartoon global que recorre toda la página */
.global-cartoon-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

/* Animación de la línea global */
@keyframes globalLineFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -130; }
}

#globalPath {
    animation: globalLineFlow 6s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255, 171, 0, 0.4)) drop-shadow(0 0 15px rgba(255, 87, 34, 0.3)) drop-shadow(0 0 20px rgba(255, 152, 0, 0.2));
    transition: d 0.1s ease-out; /* Transición suave para las deformaciones */
}

/* Efectos adicionales para los puntos animados */
.global-dot-1, .global-dot-2, .global-dot-3 {
    filter: drop-shadow(0 0 6px rgba(255, 171, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 87, 34, 0.4)) drop-shadow(0 0 18px rgba(255, 152, 0, 0.3));
}

/* Asegurar que todo el contenido esté por encima de la línea */
body > * {
    position: relative;
    z-index: 1;
}

/* Excepción para el SVG global */
.global-cartoon-line {
    z-index: -1 !important;
}

/* ===== Minimal ring-only styles (idempotent) ===== */
/* Targets thumb wrappers and their injected .filter-ring SVG. Safe to leave even if JS not present. */
.filter-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
.filter-ring svg { display: block; }
.filter-ring .arc-ring { fill: none; stroke: rgba(255,255,255,0.02); stroke-width: 6; stroke-linecap: round; transform-origin: 50% 50%; transform: rotate(-90deg); transition: stroke-dashoffset 0.48s cubic-bezier(.4,0,.2,1), stroke 0.18s ease; }
/* when original element has .active, prefer visible white stroke */
.category-filter.active .filter-ring .arc-ring { stroke: #ffffff !important; stroke-opacity: 1 !important; }

/* Anchor used when images are direct children of .category-filter */
.dh-ring-anchor { display:inline-block; position:relative; }
/* raise z so ring sits above halo but below label and image border */
.filter-ring { z-index: 6; }
/* ensure the anchor doesn't shift the layout and centers its contents */
.dh-ring-anchor { line-height: 0; vertical-align: middle; }
.dh-ring-anchor .filter-ring { left: 50%; top: 50%; transform: translate(-50%,-50%); }

/* end minimal ring-only styles */