:root {--primary-blue: #a3d8f4;--purple-accent: #9a8cfa;--pink-accent: #ff7597;--green-accent: #4fc98a;--yellow-accent: #1d87b9;--white-card: rgba(255, 255, 255, 0.95);--text-color: #5c6b89;--text-sub: #7889a8;--text-muted: #92a4d3;--border-color: #ffffff;--icon-blue: #1d87b9;--glass-bg: rgba(255, 255, 255, 0.88);--glass-bg-strong: rgba(255, 255, 255, 0.95);--glass-border-w: 2px;--glass-border-w-lg: 3px;--shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.05);--shadow-card: 0 8px 8px rgba(118, 156, 212, 0.3);--shadow-card-hover: 0 8px 8px rgba(118, 156, 212, 0.4);--shadow-screen: 0 15px 35px rgba(0, 0, 0, 0.35);--radius-lg: 18px;--radius-md: 12px;--transition-fast: 0.2s ease;--transition-btn: 0.25s cubic-bezier(0.4, 0, 0.2, 1);}*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}html {font-size: 16px;}body {font-family: 'Fredoka', sans-serif;user-select: none;background-color: #1e395b;display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 20px;}button {font-family: inherit;}@media (prefers-reduced-motion: reduce) {* {transition-duration: 0.01ms !important;animation-duration: 0.01ms !important;}}.ui-screen {position: relative;width: min(1050px, 96vw);aspect-ratio: 1050 / 590;border-radius: 24px;overflow: hidden;box-shadow: var(--shadow-screen);background: #ffffff;border: 4px solid #ffffff;}.placeholder-background {position: absolute;inset: 0;background-image: url('../assets/fondo.jpeg');background-size: cover;background-position: center;background-repeat: no-repeat;z-index: 1;}.ui-overlay {position: absolute;inset: 0;z-index: 2;padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(28px, 4vw, 40px);display: flex;flex-direction: column;justify-content: space-between;pointer-events: none;}.interactive {pointer-events: auto;}.glass {background: var(--glass-bg);backdrop-filter: blur(4px);border: var(--glass-border-w) solid var(--border-color);box-shadow: var(--shadow-soft);}.icon-btn {width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;color: var(--icon-blue);font-weight: bold;cursor: pointer;transition: transform var(--transition-fast);}.icon-btn:hover, .icon-btn:focus-visible {transform: scale(1.08);}.icon-btn:focus-visible {outline: 2px solid var(--purple-accent);outline-offset: 2px;}.icon-btn--round {border-radius: 50%;}.top-bar {display: flex;justify-content: space-between;align-items: flex-start;width: 100%;gap: 12px;}.left-top {display: flex;flex-direction: column;gap: 6px;}.status-badge {background-color: #f053ab;color: white;font-weight: bold;padding: 4px 16px;border-radius: 12px;font-size: 13px;display: inline-flex;align-items: center;gap: 6px;width: fit-content;box-shadow: 0 4px 10px rgba(255, 82, 119, 0.3);}.status-badge::before {content: "•";font-size: 16px;}.portfolio-title {font-size: clamp(22px, 3.4vw, 36px);font-weight: 700;color: #ffffff;text-shadow: 0 4px 0px #82aaff;line-height: 1.1;}.right-top {display: flex;align-items: center;gap: 12px;}.visit-counter {border-radius: 20px;padding: 4px 14px;display: flex;align-items: center;gap: 8px;font-size: 12px;color: var(--text-color);font-weight: 600;}.stat-icon {width: 14px;height: 14px;background-color: var(--icon-blue);border-radius: 50%;flex-shrink: 0;}.system-nav {display: none;align-items: center;gap: 8px;}.middle-content {display: flex;justify-content: space-between;align-items: flex-end;flex: 1 1 auto;min-height: 0;margin-bottom: 12px;gap: 16px;}.nav-menu {display: flex;flex-direction: column;gap: 14px;}.main-btn {position: relative;background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(225, 238, 254, 0.85) 100%);border: var(--glass-border-w-lg) solid #ffffff;border-radius: 8px;width: 170px;padding: 12px 16px;display: flex;align-items: center;gap: 12px;box-shadow: var(--shadow-card);backdrop-filter: blur(6px);cursor: pointer;transition: background var(--transition-btn), box-shadow var(--transition-btn);text-decoration: none;}.main-btn:hover, .main-btn:focus-visible {background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(208, 232, 254, 0.95) 100%);box-shadow: var(--shadow-card-hover);}.main-btn:focus-visible {outline: 2px solid var(--purple-accent);outline-offset: 3px;}.btn-icon {width: 40px;height: 40px;object-fit: contain;display: block;flex-shrink: 0;filter: drop-shadow(0 2px 4px rgba(120, 150, 200, 0.2));}.btn-text {display: flex;flex-direction: column;min-width: 0;}.btn-title {font-size: 14px;font-weight: 800;color: var(--text-color);text-transform: uppercase;letter-spacing: 0.5px;line-height: 1.1;}.btn-sub {font-size: 9px;color: var(--text-muted);font-weight: 600;margin-top: 2px;}.sketchfab-viewer {flex: 1 1 auto;min-width: 0;align-self: stretch;position: relative;background: transparent;}.sketchfab-iframe {position: absolute;inset: 0;width: 100%;height: 100%;border: 0;display: block;background: transparent;}.sketchfab-facade {position: absolute;inset: 0;width: 100%;height: 100%;border: none;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;border-radius: var(--radius-md);overflow: hidden;background: rgba(30, 57, 91, 0.35);font-family: inherit;}.sketchfab-poster {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}.sketchfab-play-icon {width: 56px;height: 56px;border-radius: 50%;background: var(--glass-bg-strong);color: var(--icon-blue);display: flex;align-items: center;justify-content: center;font-size: 18px;box-shadow: var(--shadow-card);transition: transform var(--transition-fast);}.sketchfab-facade:hover .sketchfab-play-icon, .sketchfab-facade:focus-visible .sketchfab-play-icon {transform: scale(1.1);}.sketchfab-facade-label {color: #ffffff;font-size: 12px;font-weight: 700;text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}.sketchfab-facade:focus-visible {outline: 2px solid var(--purple-accent);outline-offset: -3px;}.main-content-panel {width: min(440px, 46vw);height: 100%;align-self: stretch;display: flex;flex-direction: column;gap: 0;}.tabs-header {display: flex;gap: 4px;padding-left: 16px;position: relative;z-index: 2;}.tab-btn {position: relative;background: rgba(255, 255, 255, 0.65);border: var(--glass-border-w-lg) solid var(--border-color);border-bottom: none;padding: 8px 16px;border-radius: 14px 14px 0 0;font-size: 11px;font-weight: 700;color: var(--text-sub);cursor: pointer;transition: background var(--transition-fast), color var(--transition-fast);margin-bottom: -3px;}.tab-btn.active {background: var(--glass-bg-strong);color: var(--text-color);padding-top: 10px;}.tab-btn:focus-visible {outline: 2px solid var(--purple-accent);outline-offset: 2px;}.window-box {background: rgb(222, 235, 250);border: var(--glass-border-w-lg) solid var(--border-color);border-radius: var(--radius-lg);flex: 1 1 auto;min-height: 0;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);overflow-y: auto;overflow-x: hidden;z-index: 1;}.tab-content {display: none;padding: 24px 18px 18px 18px;}.tab-content.active {display: block;}.about-text {font-size: 12px;color: #3b4861;line-height: 1.5;margin-bottom: 12px;}.skills-tag-container {display: flex;flex-wrap: wrap;gap: 6px;margin-top: 8px;}.skill-tag {background: #ffffff;color: var(--text-color);border: 1px solid #bbdefb;padding: 3px 8px;border-radius: 8px;font-size: 10px;font-weight: 600;}.software-container {display: flex;align-items: center;gap: 10px;margin-top: 14px;}.software-label {font-size: 11px;font-weight: 700;color: var(--text-sub);}.software-icons {display: flex;align-items: center;gap: 10px;}.software-icon {width: 24px;height: 24px;object-fit: contain;filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));}.project-pager {display: flex;width: 200%;transition: transform var(--transition-btn);}.project-pager.showing-detail {transform: translateX(-50%);}.pager-page {width: 50%;min-width: 0;flex-shrink: 0;}.projects-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}.project-card {display: flex;flex-direction: column;background: #ffffff;border: 2px solid #e8eaf6;border-radius: var(--radius-md);overflow: hidden;text-decoration: none;cursor: pointer;transition: border-color var(--transition-fast);}.project-card:hover, .project-card:focus-visible {border-color: #a3c2f0;}.project-card:focus-visible {outline: 2px solid var(--purple-accent);outline-offset: 2px;}.project-card-thumb {position: relative;width: 100%;aspect-ratio: 4 / 3;overflow: hidden;background: #eef3fb;}.project-card-thumb::before {content: "";position: absolute;inset: 0;background: linear-gradient(100deg, #eef3fb 30%, #dfe7f7 50%, #eef3fb 70%);background-size: 200% 100%;animation: thumb-shimmer 1.4s ease-in-out infinite;transition: opacity 0.25s ease;}.project-card-thumb.is-loaded::before {opacity: 0;animation: none;}.project-card-thumb img {position: relative;width: 100%;height: 100%;object-fit: cover;display: block;opacity: 0;transition: opacity 0.35s ease;}.project-card-thumb.is-loaded img {opacity: 1;}@keyframes thumb-shimmer {0% {background-position: 200% 0;}100% {background-position: -200% 0;}}.project-card-tag {position: absolute;top: 6px;left: 6px;z-index: 1;font-size: 8px;font-weight: 700;color: #ffffff;padding: 3px 7px;border-radius: 7px;text-transform: uppercase;letter-spacing: 0.4px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);background: var(--icon-blue);}.tag-lowpoly {background: var(--icon-blue);}.tag-free {background: var(--green-accent);}.tag-vrchat {background: var(--purple-accent);}.tag-rigging {background: var(--pink-accent);}.project-card-info {display: flex;flex-direction: column;gap: 2px;padding: 8px 10px 10px;}.project-card-title {font-size: 11px;font-weight: 700;color: var(--text-color);line-height: 1.2;}.project-card-date {font-size: 9px;font-weight: 600;color: var(--text-muted);}.project-detail {display: flex;flex-direction: column;gap: 10px;}.project-detail-back {align-self: flex-start;font-size: 20px;line-height: 1;margin-bottom: 2px;background: transparent;border: none;padding: 0;}.project-detail-cover {width: 100%;height: 130px;flex-shrink: 0;border-radius: var(--radius-md);background: #eef3fb;border: 2px solid #e8eaf6;display: flex;align-items: center;justify-content: center;color: #b0bec5;font-size: 11px;font-weight: 600;}.project-detail-title {font-size: 15px;font-weight: 800;color: var(--text-color);}.project-detail-desc {font-size: 12px;color: var(--text-color);line-height: 1.5;}.project-detail-video {width: 100%;aspect-ratio: 16 / 9;flex-shrink: 0;border-radius: var(--radius-md);background: #101625;color: #ffffff;display: flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 600;}.contact-group {display: flex;flex-direction: column;gap: 14px;background: #ffffff;border: 1px solid #e8eaf6;border-radius: 14px;padding: 14px;}.contact-email-row {display: flex;align-items: center;gap: 8px;}.contact-email-icon {width: 16px;height: 16px;flex-shrink: 0;color: var(--yellow-accent);}.contact-email-text {font-size: 11px;font-weight: 600;color: var(--text-color);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex: 1 1 auto;min-width: 0;}.copy-email-btn {flex-shrink: 0;display: flex;align-items: center;gap: 5px;background: var(--yellow-accent);color: #ffffff;border: none;padding: 6px 10px;border-radius: 8px;font-family: inherit;font-size: 10px;font-weight: 700;cursor: pointer;}.copy-email-btn.copied {background: var(--green-accent);}.copy-email-icon {width: 12px;height: 12px;}.contact-links-row {display: flex;align-items: flex-start;justify-content: space-between;gap: 4px;padding-top: 12px;border-top: 1px solid #eef1f8;}.contact-link-item {display: flex;flex-direction: column;align-items: center;gap: 5px;text-decoration: none;flex: 1 1 0;}.contact-link-icon {width: 34px;height: 34px;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;background: #ffffff;border: 1.5px solid #e8eaf6;box-shadow: var(--shadow-soft);}.contact-link-glyph {width: 19px;height: 19px;}.glyph-linkedin {fill: #0a66c2;}.glyph-fab {fill: #232733;}.contact-link-label {font-size: 9px;font-weight: 600;color: var(--text-sub);text-align: center;}@media (max-width: 720px) {.ui-screen {aspect-ratio: auto;height: min(94vh, 720px);}.ui-overlay {overflow-y: auto;}.portfolio-title {font-size: 20px;}.system-nav {display: flex;}.middle-content {flex-wrap: wrap;align-items: stretch;}.nav-menu {flex-direction: row;flex-wrap: wrap;transform-origin: top left;transition: max-height var(--transition-fast), opacity var(--transition-fast);}.nav-menu[data-collapsed="true"] {max-height: 0;opacity: 0;overflow: hidden;pointer-events: none;}.main-btn {width: auto;flex: 1 1 140px;}.main-content-panel {width: 100%;height: auto;align-self: auto;order: 3;}.window-box {flex: none;max-height: 60vh;}.sketchfab-viewer {width: 100%;flex: 1 1 auto;align-self: auto;height: 260px;order: 2;}}.project-page-body {--ppg-bg: #14151b;--ppg-card: #1b1d25;--ppg-border: #2f313d;--ppg-text: #e7e3d8;--ppg-text-muted: #9694a3;--ppg-accent: #1d87b9;--ppg-media-bg: #0e0f13;display: block;min-height: 100vh;padding: clamp(20px, 4vw, 48px) 16px 64px;font-family: 'Literata', Georgia, 'Times New Roman', serif;background: radial-gradient(700px 460px at 10% -10%, rgba(215, 163, 194, 0.05), transparent 60%), radial-gradient(600px 420px at 100% 0%, rgba(154, 140, 250, 0.05), transparent 55%), var(--ppg-bg);}.project-page-wrap {width: min(680px, 100%);margin: 0 auto;}.project-page-nav {display: flex;align-items: center;gap: 12px;margin-bottom: 18px;}.project-page-nav .project-back {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;text-decoration: none;transition: transform var(--transition-fast);}.project-page-nav .project-back:hover, .project-page-nav .project-back:focus-visible {transform: scale(1.1);}.project-page-nav .project-back:focus-visible {outline: 2px solid var(--ppg-accent);outline-offset: 3px;border-radius: 50%;}.project-back-icon {width: 22px;height: 22px;object-fit: contain;display: block;filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));}.project-crumb {font-family: 'Literata', Georgia, serif;font-size: 12px;font-style: italic;color: var(--ppg-text-muted);letter-spacing: 0.2px;}.project-page-card {background: var(--ppg-card);border: 1px solid var(--ppg-border);border-radius: var(--radius-lg);box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);padding: clamp(24px, 4vw, 44px);display: flex;flex-direction: column;gap: 26px;}.project-page-eyebrow {font-size: 12px;font-weight: 600;font-style: italic;color: var(--ppg-accent);letter-spacing: 0.3px;}.project-page-title {font-size: clamp(24px, 3.6vw, 34px);font-weight: 600;color: var(--ppg-text);line-height: 1.2;margin-top: -6px;}.project-page-media {display: block;width: fit-content;margin: 0 auto;max-width: 100%;border-radius: var(--radius-md);overflow: hidden;border: 1px solid var(--ppg-border);box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);background: var(--ppg-media-bg);}.project-page-media img {display: block;width: auto;height: auto;max-width: 100%;max-height: 480px;}.project-page-explanation {font-size: 16px;line-height: 1.75;color: var(--ppg-text);max-width: 62ch;}.project-page-video {width: 100%;aspect-ratio: 16 / 9;border-radius: var(--radius-md);overflow: hidden;border: 1px solid var(--ppg-border);box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);background: var(--ppg-media-bg);}.project-page-video iframe {width: 100%;height: 100%;border: 0;display: block;}.project-compare {position: relative;display: block;width: fit-content;margin: 0 auto;max-width: 100%;border-radius: var(--radius-md);overflow: hidden;border: 1px solid var(--ppg-border);box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);background: var(--ppg-media-bg);touch-action: pan-y;}.compare-img {display: block;-webkit-user-select: none;user-select: none;pointer-events: none;}.compare-img-before {position: relative;z-index: 1;width: auto;height: auto;max-width: 100%;max-height: 480px;}.compare-img-after {position: absolute;inset: 0;z-index: 2;width: 100%;height: 100%;object-fit: contain;clip-path: inset(0 50% 0 0);}.compare-handle {position: absolute;inset: 0;left: 50%;width: 0;z-index: 3;pointer-events: none;}.compare-handle::before {content: "";position: absolute;top: 0;bottom: 0;left: -1px;width: 2px;background: var(--ppg-text);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}.compare-handle-grip {position: absolute;top: 50%;left: 50%;width: 34px;height: 34px;transform: translate(-50%, -50%);background: var(--ppg-card);border: 1px solid var(--ppg-border);border-radius: 50%;box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;}.compare-handle-grip svg {width: 16px;height: 16px;color: var(--ppg-accent);}.compare-range {position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;background: transparent;-webkit-appearance: none;appearance: none;cursor: ew-resize;z-index: 4;opacity: 0;}.compare-range:focus-visible {outline: 2px solid var(--ppg-accent);outline-offset: -2px;}.compare-range::-webkit-slider-runnable-track {-webkit-appearance: none;background: transparent;height: 100%;}.compare-range::-moz-range-track {background: transparent;height: 100%;border: none;}.compare-range::-webkit-slider-thumb {-webkit-appearance: none;width: 34px;height: 100%;background: transparent;cursor: ew-resize;}.compare-range::-moz-range-thumb {width: 34px;height: 100%;background: transparent;border: none;cursor: ew-resize;}.project-page-section-label {font-family: 'Literata', Georgia, serif;font-size: 12px;font-style: italic;font-weight: 500;color: var(--ppg-text-muted);letter-spacing: 0.2px;text-transform: none;margin-bottom: 10px;}@media (max-width: 480px) {.project-page-media img, .compare-img-before {max-height: 300px;}}body {cursor: url('../assets/left_ptr.png'), auto;}a, button, .interactive, .tab-btn, .main-btn, .icon-btn, .project-card, .software-icon {cursor: url('../assets/pointing_hand.png'), pointer !important;}