/* =========================
   CUSTOM SCROLLBAR - Minimalista
========================= */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 222, 128, 1) #27282c;
}

/* Remove mobile tap highlight */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

.main-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.last-name-tight {
    margin-top: -0.09em;
}

/* ================================
   FUENTES CONDENSADAS PARA PROBAR
   ================================ */

/* Opción 1: Bebas Neue - Ultra condensada, moderna y limpia */
.font-bebas {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Opción 2: Oswald - Condensada elegante con personalidad */
.font-oswald {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Opción 3: Anton - Bold y dramática */
.font-anton {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Opción 4: Barlow Condensed - Geométrica y profesional */
.font-barlow {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    letter-spacing: 0.01em;
}

/* Opción 5: Teko - Futurista y angular */
.font-teko {
    font-family: 'Teko', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

:root {
    --color-bg: #000000;
    --color-border: rgba(209, 213, 219, 0.2);
    --color-accent: #4ade80;
    --color-accent-rgb: 74, 222, 128;
    --color-accent-glow: rgba(var(--color-accent-rgb), 0.15);
    --color-white: #d1d5db;
    --color-white-rgb: 209, 213, 219;
    --color-gray-low-opacity: rgba(var(--color-white-rgb), 0.6);
}

.highlight {
    color: var(--color-accent);
    font-weight: 600;
}


/* =========================
   HEADER NAVIGATION
========================= */

.site-header {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.site-header.scrolled {
    transform: translateX(-50%) translateY(0);
}

.site-header.scrolled .nav-links {
    background: rgba(22, 22, 22, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.site-header.menu-open {
    transform: translateX(-50%) translateY(20px) !important;
}



.nav-links li a {
    padding: 0.5rem 1rem;
    color: var(--color-gray-low-opacity);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid transparent;
    transition: border 0s ease;
}


.nav-links li a.active {
    border: 1px solid var(--color-border);
}

/* Scroll padding for sections */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* =========================
   HAMBURGER MENU
========================= */

.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1001;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.hamburger:hover {
    background: rgba(40, 40, 40, 0.9);
    border-color: var(--color-gray-low-opacity);
}

.hamburger input {
    display: none;
}

.hamburger svg {
    height: 1.8em;
    width: 1.8em;
    display: block;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger .line {
    fill: none;
    stroke: var(--color-white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger .line-top-bottom {
    stroke-dasharray: 12 63;
}

.hamburger input:checked+svg {
    transform: rotate(-45deg);
}

.hamburger input:checked+svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

/* =========================
   MOBILE FULLSCREEN MENU
========================= */

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 999;
    padding-top: 100px;
    overflow-y: auto;
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.mobile-nav-links li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
}

.mobile-menu.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.active .mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu.active .mobile-nav-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-menu.active .mobile-nav-links li:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-menu.active .mobile-nav-links li:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-menu.active .mobile-nav-links li:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-menu.active .mobile-nav-links li:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-links li a {
    display: block;
    padding: 1.5rem 2rem;
    color: var(--color-gray-low-opacity);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
    width: 100%;
}

.mobile-nav-links li a:hover,
.mobile-nav-links li a.active {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-links li a.active {
    background: rgba(255, 255, 255, 0.08);
}

/* Mobile Responsive Header */
@media (max-width: 1079px) {
    .site-header {
        top: 0.75rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(25px);
    }

    .site-header.scrolled {
        transform: translateX(-50%);
    }

    .site-header.scrolled .hamburger {
        background: rgba(22, 22, 22, 0.8);
        border: 1px solid var(--color-border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .site-header.menu-open .hamburger {
        background: transparent !important;
        border-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .nav-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }
}

body {
    box-sizing: border-box;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    background: var(--color-bg);
    color: var(--color-white);
    line-height: 1.6;
}

body.menu-open {
    overflow: hidden;
}

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

html,
body {
    min-height: 100%;
    width: 100%;
}

/* El padding general va en el contenedor principal, no en el body */
.portfolio-container {
    position: relative;
    min-height: 100%;
    width: 100%;
    min-width: 300px;
    /* Removed incorrect min-height and height */
    background-color: var(--color-bg);
    z-index: 2;
    padding: 24px;
    box-sizing: border-box;
}

.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Optimize grain on mobile */
@media (max-width: 1080px) {
    .grain-overlay {
        display: none;
        /* SVG filters are GPU killers on mobile */
    }
}

.glow-top {
    position: fixed;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: radial-gradient(ellipse at right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 25%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}


.hero-section {
    height: calc(100vh - 48px);
    /* Fallback */
    height: min(calc(100svh - 48px), 1300px);
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.hero-bg-parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.parallax-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    will-change: transform;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #ffffff 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
}

.blob-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}


.hero-content {
    position: relative;
    z-index: 3;
    padding: 2rem;
    width: 100%;
    /* max-width ahora lo maneja .main-content */
    margin: 0;
    margin-top: 2rem;
}

.hero-box-full {
    border-radius: 0;
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    min-width: 0;
}

.name-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    position: relative;
}

.name-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.name-large {
    font-weight: 900;
    line-height: 0.85;
    background: linear-gradient(120deg,
            #ffffff 0%,
            #ffffff 15%,
            rgba(255, 255, 255, 1) 30%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            rgba(255, 255, 255, 1) 70%,
            #ffffff 85%,
            #ffffff 100%);
    background-size: 200% auto;
    background-position: 0% center;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: background-position;
}


/* Year Badge - Estilo premium */
.year-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4em 0.8em;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    transition: all 0.3s ease;
    align-self: flex-start;
}

/* Hero Socials Sidebar */
.hero-socials {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 10;
}

.hero-social-link {
    color: var(--color-gray-low-opacity);
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
    opacity: 0.8;
}

.hero-social-link:hover {
    color: var(--color-accent);
    transform: translateY(-5px);
    opacity: 1;
}

.social-line {
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, var(--color-border), transparent);
    margin-top: 0.5rem;
    opacity: 0.8;
    /* Increased opacity slightly to compensate for the border color being faint */
}

/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 10;
}

.scroll-indicator.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-indicator.hidden {
    opacity: 0;
    visibility: hidden;
}

.scroll-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--color-gray-low-opacity);
    transition: color 0.3s ease;
}

.scroll-action:hover {
    color: var(--color-accent);
}

.scroll-box {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrow-drop 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.scroll-box svg {
    width: 100%;
    height: 100%;
}

/* Physics-based drop with bounce */
@keyframes arrow-drop {
    0% {
        transform: translateY(-6px);
    }

    /* Fall with acceleration */
    30% {
        transform: translateY(6px);
    }

    /* First bounce up */
    45% {
        transform: translateY(1px);
    }

    /* Settle down */
    55% {
        transform: translateY(4px);
    }

    /* Second smaller bounce */
    65% {
        transform: translateY(2px);
    }

    /* Rest briefly */
    75%,
    85% {
        transform: translateY(3px);
    }

    /* Return to start for loop */
    100% {
        transform: translateY(-6px);
    }
}

.scroll-text {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: text-pulse 2.5s ease-out infinite;
}

/* Color pulse synced with bounce impact */
@keyframes text-pulse {

    0%,
    14% {
        color: var(--color-gray-low-opacity);
    }

    /* Flash slightly before impact */
    20% {
        color: var(--color-accent);
    }

    /* Fade back */
    85%,
    100% {
        color: var(--color-gray-low-opacity);
    }
}

@media (max-width: 1079px) {
    .scroll-indicator {
        bottom: 1.5rem;
    }

    .scroll-box {
        width: 20px;
        height: 20px;
    }
}

.animate-reveal-up {
    opacity: 0;
    animation: revealUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.animate-expand-vertical {
    opacity: 0;
    transform-origin: bottom;
    animation: expandLineVertical 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes expandLineVertical {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

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

@media (max-width: 1079px) {
    .hero-socials {
        position: relative;
        right: auto;
        bottom: auto;
        flex-direction: row;
        margin-top: 2rem;
        width: 100%;
        justify-content: center;
        padding: 1rem 0;
    }

    .social-line {
        display: none;
    }
}

.roles-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    transform: translateY(-5px);
}

#rolesContainer {
    width: 100%;
    max-width: 100%;
}

#lastName {
    display: inline-block;
}

.role-text {
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--color-gray-low-opacity);
    white-space: nowrap;
}

#greeting {
    transform: translateY(-10px);
}

.divider {
    height: 1px;
    flex: 1 1 auto;
    min-width: 15px;
    margin: 0 0.5em;
    align-self: center;
    border-radius: 10px;
    background-color: var(--color-border);
    transform: translateY(4px);
}

/* Desktop separator - línea horizontal entre roles */
.desktop-separator {
    display: block;
    height: 1px;
    background-color: var(--color-border);
    flex-grow: 1;
    min-width: 20px;
    margin: 0 1rem;
}

/* Media Queries */
@media (max-width: 1080px) {
    .portfolio-container {
        padding: 16px;
    }

    .hero-section {
        min-height: calc(100vh - 32px);
        /* Fallback */
        min-height: calc(100svh - 32px);
        height: auto;
        padding: 4rem 1rem;
    }

    .hero-content {
        padding: 1rem;
    }

    .hero-box-full {
        width: 100%;
    }

    /* Mobile: Maximize width but prevent overflow */

    .roles-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        /* Remove gap, handle spacing via rows */
        transform: translateY(3px);
        padding: 0;
    }

    .role-row {
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        /* Fixed height for consistent connector alignment */
    }

    .connector {
        flex-grow: 1;
        /* Pushes text to the right */
        height: 100%;
        position: relative;
        border-left: 1px solid var(--color-border);
        min-width: 20px;
        /* Minimum curve space */
        margin-right: 10px;
        /* Spacing between line end and text */
        transform: translateY(-5px);
    }

    .top-role .connector {
        border-top: 1px solid var(--color-border);
        border-top-left-radius: 15px;
        height: calc(50% + 1px);
        /* Half height + overlap for pixel perfection */
        top: 50%;
        /* Start from vertical center */
        border-bottom: none;
        /* Ensure no extra lines */
        margin-bottom: 0;
    }

    .bottom-role .connector {
        border-bottom: 1px solid var(--color-border);
        border-bottom-left-radius: 15px;
        height: 50%;
        /* Top half of the row */
        top: 0;
        /* Start from top */
        bottom: auto;
        border-top: none;
        margin-top: 0;
    }

    .role-text {
        white-space: nowrap;
        text-align: left;
        font-size: clamp(14px, 4vw, 18px);
        line-height: 1.2;
        flex-shrink: 0;
        /* Small gap from connector */
    }

    #greeting {
        font-size: clamp(14px, 4vw, 18px);
    }

    /* Initial mobile state for separator */
    .desktop-separator {
        display: none;
    }


    /* Mobile: Maximize width but prevent overflow */
    .name-container {
        width: 100%;
    }

    .name-title-row {
        width: 100%;
    }

    .name-large {
        width: 100%;
        line-height: 0.85;
        text-align: left;
        white-space: nowrap;
    }

    #lastName {
        display: block;
        width: 100%;
    }

    .hero-box-full {
        width: 100%;
    }

    .name-large {
        width: 100%;
        white-space: nowrap;
        line-height: 0.85;
    }
}

@media (min-width: 1080px) {

    /* Desktop: Tamaño fijo para el nombre */
    .name-large {
        font-size: 200px !important;
    }

    /* Desktop: Tamaño fijo para el badge del año */
    .year-badge {
        font-size: 14px !important;
    }

    /* Desktop: Keep original compact alignment (fit-content) */
    .hero-box-full {
        width: fit-content;
        /* Matches content (Last Name) */
    }

    .roles-container {
        flex-direction: row;
        /* Side by side */
        align-items: center;
        width: 100%;
        /* Fill the width set by the Last Name */
        gap: 0;
        /* Handled by separator margin */
    }

    .role-row {
        width: auto;
        /* Fit content */
        height: auto;
        display: block;
        /* Reset flex */
    }

    .connector {
        display: none;
        /* Hide mobile connectors */
    }

    .role-text {
        text-align: left;
        padding: 0;
        font-size: 20px;
        white-space: nowrap;
    }

    /* Desktop Horizontal Line */
    .desktop-separator {
        display: block;
        height: 1px;
        background-color: var(--color-border);
        flex-grow: 1;
        /* Pushes text to corners */
        margin: 0 1rem;
        /* Space around line */
    }
}

/* Animations */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(calc(var(--end-y, 0px) + 20px));
    }

    to {
        opacity: 1;
        transform: translateY(var(--end-y, 0px));
    }
}

@keyframes revealDown {
    from {
        opacity: 0;
        transform: translateY(calc(var(--end-y, 0px) - 20px));
    }

    to {
        opacity: 1;
        transform: translateY(var(--end-y, 0px));
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    70% {
        transform: scale(1.05);
    }

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

.animate-reveal {
    opacity: 0;
    animation: revealUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.animate-reveal-down {
    opacity: 0;
    animation: revealDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

#greeting {
    --end-y: -10px;
}

.animate-pop-in {
    opacity: 0;
    animation: popIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.6s;
}

.delay-6 {
    animation-delay: 0.45s;
    /* 250ms after roles (0.4s) */
}

.delay-7 {
    animation-delay: 0.72s;
}

.delay-8 {
    animation-delay: 0.79s;
}

.delay-9 {
    animation-delay: 0.86s;
}

.delay-10 {
    animation-delay: 0.93s;
}

/* Enhanced Roles Animations */
@keyframes expandLine {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

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

@keyframes sweepLtoR {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateY(calc(var(--end-y, 0px) + 10px));
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(var(--end-y, 0px));
    }
}

@keyframes sweepRtoL {
    from {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        transform: translateY(calc(var(--end-y, 0px) + 10px));
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(var(--end-y, 0px));
    }
}

/* Desktop specific adjustments */
@media (min-width: 1080px) {
    .desktop-separator {
        transform-origin: center;
        animation: expandLine 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        animation-delay: 0.2s;
        opacity: 0;
    }

    .top-role .role-text {
        animation: sweepRtoL 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
        animation-delay: 0.4s !important;
        opacity: 0;
    }

    .bottom-role .role-text {
        animation: sweepLtoR 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
        animation-delay: 0.4s !important;
        opacity: 0;
    }
}

/* Mobile specific adjustments */
@media (max-width: 1080px) {
    .roles-container {
        --end-y: 3px;
        animation: revealUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        animation-delay: 0.45s;
        opacity: 0;
    }
}

.about-section {
    padding: 24px;
    padding-top: 4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    margin-top: 24px;
    overflow: hidden;
    /* Fix overflow */
    position: relative;
}

.about-container {
    max-width: 1000px;
    margin: 0 auto;
}

.about-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    /* Reduced from 3rem */
    position: relative;
}

.section-title {
    position: absolute;
    top: -40px;
    /* Adjusted to be tighter */
    left: -20px;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.about-main-title {
    font-size: 10rem !important;
    opacity: 0.05;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}

.title-line {
    display: none;
}

.about-intro {
    padding-left: 0;
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
    /* Adjusted to visually balance with watermark */
}

.about-text-large {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    /* Reduced from 1.5rem */
}

.about-text-sub {
    font-size: 1.1rem;
    color: var(--color-gray-low-opacity);
    max-width: 600px;
    margin-bottom: 1rem;
    /* Reduced from 2rem */
}

.text-highlight {
    color: var(--color-white);
    font-weight: 600;
    transition: color 0.3s ease;
}

.about-card.is-hovered .text-highlight {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 1.5rem;
}

.about-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: 15px;
    padding: 2rem;
    min-width: 0;
    position: relative;
    /* Removed transform from here to avoid lag during mouse move */
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Smooth return when mouse leaves */
.about-card:not(.is-hovered) {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s ease, background-color 0.4s ease;
}

.about-card.is-hovered {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    /* Subtle accent color boost */
    background: rgba(var(--color-white-rgb), 0.04);
}

.card-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Title row with button */
.card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.card-title-row .card-title {
    margin-bottom: 0;
}

.btn-see-all {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-low-opacity);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-see-all:hover {
    color: var(--color-white);
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
}

/* Card Specific Styles */
.card-edu {
    grid-column: span 2;
}

.card-group-vertical {
    grid-column: span 1;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Make languages card stretch to fill the vertical group */
.card-inner:last-child {
    flex: 1;
}

.card-skills {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
}

.card-contact {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-gray-low-opacity);
    font-size: 0.95rem;
    width: 100%;
    min-width: 0;
}

.email-container,
.phone-container {
    position: relative;
    overflow: hidden;
}

#emailText,
#phoneText {
    padding-right: 5px;
}

.contact-scroll-wrapper {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    --mask-start: black;
    --mask-end: black;
    mask-image: linear-gradient(to right, var(--mask-start), black 10%, black 90%, var(--mask-end));
    -webkit-mask-image: linear-gradient(to right, var(--mask-start), black 10%, black 90%, var(--mask-end));
    padding: 0 5px;
}

.contact-scroll-wrapper span {
    display: inline-block;
}

.copy-contact-btn {
    background: none;
    border: none;
    color: var(--color-gray-low-opacity);
    cursor: pointer;
    padding: 5px;
    font-size: 1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.copy-contact-btn:hover {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
}

.copy-contact-btn.success {
    color: #4ade80;
}

.contact-item i {
    color: var(--color-accent);
    width: 20px;
    flex-shrink: 0;
}

.cv-container {
    margin-top: 1.5rem;
}

.cv-download-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cv-text-short,
.cv-text-mini {
    display: none;
}

.cv-download-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: 0.5s;
}

.cv-download-button:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--color-accent-rgb), 0.2);
    text-shadow: 0 0 8px rgba(var(--color-white-rgb), 0.4);
}

.cv-download-button:hover::after {
    left: 100%;
}

.cv-download-button i {
    transition: transform 0.4s ease;
}

.cv-download-button:hover i {
    transform: scale(1.1) rotate(-5deg);
    color: var(--color-accent);
}

.card-divider {
    height: 1px;
    background: var(--color-border);
    margin: 1.5rem 0;
    opacity: 0.5;
}

.about-text-small {
    font-size: 0.95rem;
    color: var(--color-gray-low-opacity);
}

.contact-links-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

/* --- UTILITY: Premium Glass Button (Estilo por defecto) --- */
.btn-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.btn-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: 0.5s;
    pointer-events: none;
}

.btn-glass:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--color-accent-rgb), 0.2);
}

.btn-glass:hover::after {
    left: 100%;
}

/* --- Social Buttons (Inheriting Glass Style) --- */
.contact-button {
    /* Base props from .btn-glass applied manually or via class if added to HTML. 
       Since we're doing CSS-only refactor, we duplicate/include the props here or make it share definitions. 
       Ideally we'd add .btn-glass to HTML, but let's map properties here for consistency with existing HTML. */

    /* Layout specific */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    /* Slightly larger for better touch area with new style */
    height: 45px;
    font-size: 1.2rem;

    /* Premium Look (Matching .btn-glass) */
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.contact-button:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px) rotate(5deg);
    /* Added slight rotation for fun */
    box-shadow: 0 10px 20px rgba(var(--color-accent-rgb), 0.2);
}

.contact-button:hover::after {
    left: 100%;
}

.contact-button i {
    transition: transform 0.4s ease;
}

.contact-button:hover i {
    transform: scale(1.1);
    color: var(--color-accent);
}

/* --- CV Button (Specifics) --- */
/* We can now simplify this by making it share styles or just keeping it consistent. 
   Keeping it explicit ensures no regression. */
.cv-download-button {
    /* Premium Look */
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;

    /* Text & Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cv-download-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: 0.5s;
}

.cv-download-button:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--color-accent-rgb), 0.2);
}

.cv-download-button:hover::after {
    left: 100%;
}

.cv-download-button i {
    transition: transform 0.4s ease;
}

.cv-download-button:hover i {
    transform: scale(1.1) rotate(-5deg);
    color: var(--color-accent);
}

.education-content .edu-item {
    margin-bottom: 1rem;
}

.timeline {
    position: relative;
    padding-left: 1.2rem;
    margin-top: 0.5rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 2.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* The vertical line */
.timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 1.2rem;
    bottom: 0;
    width: 2px;
    background: var(--color-gray-low-opacity);
    opacity: 0.2;
    transform: translateX(-50%);
}

/* The solid dot */
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 0.4rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-white);
    transform: translateX(-50%);
    z-index: 1;
}

.time {
    font-size: 0.75rem;
    color: var(--color-accent);
    font-weight: 700;
    display: block;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.company-name {
    font-size: 1.1rem;
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: 0.2rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.role-text {
    font-size: 0.9rem;
    color: var(--color-gray-low-opacity);
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


.stack-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tag {
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Marquee Container - 4 Rows, No Skew */
.tech-marquee-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-grow: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Mask: Fade out left and right edges for ghost effect */
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, transparent 100%);
    padding: 0;
}

/* Individual Scrolling Tracks */
.tech-marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    /* seamless loop fix: add padding equal to gap at the end */
    padding-right: 2rem;
    will-change: transform;
}

/* Tracks 1 & 3: Scroll Left */
.track-1,
.track-3 {
    animation: scrollLeft 25s linear infinite;
}

/* Tracks 2 & 4: Scroll Right */
.track-2,
.track-4 {
    animation: scrollRight 25s linear infinite;
}


/* Animation Keyframes */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.333%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-33.333%);
    }

    100% {
        transform: translateX(0);
    }
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    /* Reduced from 0.4rem */
    color: var(--color-gray-low-opacity);
    transition: color 0.2s ease;
}

.tech-item i,
iconify-icon {
    display: inline-flex;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
    /* Reduced from 1.5rem */
    /* Force uniformity: Remove colors and make white, then allow opacity to control shade */
    filter: grayscale(100%) brightness(200%);
    -webkit-filter: grayscale(100%) brightness(200%);
}

.tech-item span {
    font-size: 0.65rem;
    /* Reduced from 0.7rem */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tech-item:hover {
    color: var(--color-white);
}

.languages-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.lang-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Scroll reveal helper */
.scroll-reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.scale-in {
    opacity: 0;
    will-change: transform, opacity;
}

.scroll-reveal {
    transform: translateY(30px);
}

.reveal-up {
    transform: translateY(50px);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.scale-in {
    transform: scale(0.9);
}

.scroll-reveal.active,
.reveal-up.active,
.reveal-left.active,
.reveal-right.active,
.scale-in.active {
    opacity: 1;
    transform: translate(0) scale(1);
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1),
        transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 
   ⚡️ FIX: Disable entrance transitions when hovering on 3D objects
   This prevents the 1s entrance transition from lagging the JS-driven 3D movement.
*/
.about-card.is-hovered,
.mosaic-item.is-hovered {
    transition: none !important;
    transition-delay: 0s !important;
}

/* Delay Utilites */
.delay-50 {
    transition-delay: 0.05s;
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-150 {
    transition-delay: 0.15s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-250 {
    transition-delay: 0.25s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-350 {
    transition-delay: 0.35s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

.delay-800 {
    transition-delay: 0.8s;
}


@media (max-width: 1080px) {
    .about-section {
        padding: 4rem 1rem;
    }

    .about-text-large {
        font-size: 1.8rem;
    }

    .section-title h2 {
        font-size: 60px;
    }
}

/* Mobile specific (max-width: 768px) */
@media (max-width: 768px) {
    .about-section {
        padding: 3rem 1.25rem;
    }

    /* Watermark title adjustment */
    .about-main-title {
        font-size: 5.5rem !important;
        opacity: 0.08;
    }

    .about-header {
        margin-bottom: 2rem;
    }

    .about-intro {
        margin-top: 1.5rem;
    }

    /* Condensed text */
    .about-text-large {
        font-size: 1.6rem;
        margin-bottom: 0.75rem;
    }

    .about-text-sub {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        color: rgba(255, 255, 255, 0.5);
    }

    /* Flatten and Reorder Grid */
    .about-grid {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .card-group-vertical {
        display: contents;
    }

    .about-card {
        padding: 1.5rem;
        order: 10;
        /* Default base order */
    }

    /* Priority Order */
    .card-experience {
        order: 1;
    }

    .card-edu {
        order: 2;
    }

    .card-skills {
        order: 3;
    }

    /* Languages card (the second .card-inner) */
    .card-inner:last-child {
        order: 4;
    }

    .card-contact {
        order: 5;
    }

    /* Card internal compactness */
    .card-title {
        font-size: 1.05rem;
        margin-bottom: 1.25rem;
    }

    .timeline-item {
        padding-bottom: 1.8rem;
    }

    .company-name {
        font-size: 1.05rem;
    }

    .role-text {
        font-size: 0.85rem;
    }

    /* Tech Marquee scaling */
    .tech-item i,
    iconify-icon {
        width: 1.1rem;
        height: 1.1rem;
        font-size: 1.1rem;
    }

    .tech-item span {
        font-size: 0.6rem;
    }
}

/* =========================
   CONTEXTO 3D
========================= */

.about-grid {
    perspective: 1000px;
}

.about-card {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    /* transition is now handled in the main declaration above */
}

/* =========================
   CONTENEDOR QUE RECORTA
========================= */

.card-clip {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 🔒 ACÁ se encierra el glow */
    border-radius: inherit;
    /* mantiene la forma */
}

/* =========================
   GLOW
========================= */

.card-glow {
    position: absolute;
    inset: 0;
    /* Match card size exactly */
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    /* Contain glow within card */
    border-radius: inherit;

    /* Multi-layered gradient for a premium spotlight effect */
    background:
        /* Center White Hotspot (Small & Sharp) */
        radial-gradient(250px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-white-rgb), 0.15),
            transparent 80%),
        /* Primary Accent Glow (Medium & Soft) */
        radial-gradient(450px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.12),
            transparent 100%),
        /* Large Ambient Bloom (Very faint) */
        radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.05),
            transparent 100%);

    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    mix-blend-mode: screen;
}

/* =========================
   CONTENIDO ARRIBA DEL GLOW
========================= */

.card-clip> :not(.card-glow) {
    position: relative;
    z-index: 1;
}

/* =========================
   ACTIVACIÓN
========================= */

.about-card.is-hovered .card-glow {
    opacity: 1;
}

/* =========================
   EXPERIENCE SECTION
========================= */

.experience-section {
    padding: 24px;
    padding-top: 4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}

.experience-container {
    max-width: 1000px;
    margin: 0 auto;
}

.experience-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    position: relative;
}

.experience-main-title {
    font-size: 10rem !important;
    opacity: 0.05;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}

.experience-intro {
    padding-left: 0;
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
}

.experience-text-large {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.experience-text-sub {
    font-size: 1.1rem;
    color: var(--color-gray-low-opacity);
    max-width: 600px;
    margin-bottom: 1rem;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    perspective: 1000px;
    margin-bottom: 5px;
}

/* Project Card */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    will-change: transform;
    display: flex;
    flex-direction: column;
    grid-column: span 2;
}

.project-image-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(var(--color-accent-rgb), 0.15);
}

/* Featured Card - Takes 3 columns of 5 (60%) */
.project-card.featured {
    grid-column: span 3;
}

/* Project Image */
.project-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}



.project-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Placeholder Icon (until real images are added) */
.project-placeholder-icon {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.15);
    transition: all 0.5s ease;
}

.project-card.featured .project-placeholder-icon {
    font-size: 5rem;
}

.project-card:hover .project-placeholder-icon {
    color: rgba(255, 255, 255, 0.25);
    transform: scale(1.1) rotate(5deg);
}

/* Image Overlay */
.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.7) 100%);
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

/* Project Content */
.project-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex-grow: 1;
}

/* Project Meta */
.project-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-year {
    font-size: 0.75rem;
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.project-type {
    font-size: 0.7rem;
    color: var(--color-gray-low-opacity);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
}

/* Project Title */
.project-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    transition: color 0.3s ease;
}

.project-card:hover .project-title {
    color: var(--color-accent);
}

/* Project Description */
.project-description {
    font-size: 0.9rem;
    color: var(--color-gray-low-opacity);
    line-height: 1.6;
    margin: 0;
}

/* Tech Tags */
.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.tech-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.tech-tag iconify-icon {
    font-size: 0.9rem;
    opacity: 0.3;
}

.project-card:hover .tech-tag {
    background: rgba(var(--color-accent-rgb), 0.2);
}

/* Project Actions */
.project-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.project-link.primary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-white);
    border: 1px solid var(--color-border);
}

.project-link.primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.5s;
}

.project-link.primary:hover {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--color-accent-rgb), 0.2);
}

.project-link.primary:hover::after {
    left: 100%;
}

.project-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.project-link:hover i {
    transform: translate(2px, -2px);
}

/* Project Glow */
.project-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.1),
            transparent 100%);
}

.project-card:hover .project-glow {
    opacity: 1;
}

/* =========================
   RESPONSIVE - EXPERIENCE
========================= */

@media (max-width: 1080px) {
    .experience-section {
        padding: 3rem 1rem;
    }

    .experience-main-title {
        font-size: 5.5rem !important;
    }

    .experience-intro {
        margin-top: 1.5rem;
    }

    .experience-text-large {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }

    .experience-text-sub {
        font-size: 0.95rem;
    }

    /* Tablet Grid - 2 columns */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .project-card,
    .project-card.featured {
        grid-column: span 1;
        border-radius: 12px;
    }

    /* Compact image wrapper for mobile - Match 3:2 image ratio */
    .project-image-wrapper {
        aspect-ratio: 3 / 2;
    }

    /* Compact content padding */
    .project-content {
        padding: 1.25rem;
        gap: 0.6rem;
    }

    /* Smaller meta text */
    .project-meta {
        gap: 0.6rem;
    }

    .project-year {
        font-size: 0.7rem;
    }

    .project-type {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }

    /* Compact title */
    .project-title {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    /* Description styling */
    .project-description {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Tech tags with wrap */
    .project-tech {
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 1rem;
    }

    .tech-tag {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .tech-tag iconify-icon {
        font-size: 0.75rem;
    }

    /* Compact action buttons */
    .project-actions {
        margin-top: 0.75rem;
    }

    .project-link {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .project-link i {
        font-size: 0.75rem;
    }

    /* Disable heavy hover effects on mobile */
    .project-card:hover {
        transform: none;
        box-shadow: none;
    }

    .project-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Small mobile - Single column */
@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   PROJECTS SECTION (Showcase)
========================= */

.projects-section {
    padding: 24px;
    padding-top: 4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}

.projects-container {
    max-width: 1000px;
    margin: 0 auto;
}

.projects-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    position: relative;
}

.projects-main-title {
    font-size: 10rem !important;
    opacity: 0.05;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}

.projects-intro {
    padding-left: 0;
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
}

.projects-text-large {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.projects-text-sub {
    font-size: 1.1rem;
    color: var(--color-gray-low-opacity);
    max-width: 600px;
    margin-bottom: 1rem;
}

/* Project Showcase Card */
.project-showcase {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.5rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-showcase:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.03);
}

/* Showcase Header */
.showcase-header {
    margin-bottom: 2rem;
    text-align: center;
}

.showcase-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.15);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.showcase-title {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 0.8rem 0;
}

.showcase-subtitle {
    font-size: 1rem;
    color: var(--color-gray-low-opacity);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

.showcase-subtitle iconify-icon {
    font-size: 1.2rem;
    color: var(--color-accent);
}

/* Showcase Section Title */
.showcase-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Showcase Content */
.showcase-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.showcase-description p {
    font-size: 0.95rem;
    color: var(--color-gray-low-opacity);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.showcase-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: rgba(var(--color-accent-rgb), 0.1);
    padding: 1rem;
    border-radius: 10px;
    border-left: 3px solid var(--color-accent);
}

.showcase-note iconify-icon {
    color: var(--color-accent);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Objectives List */
.objectives-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.objectives-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--color-gray-low-opacity);
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.objectives-list iconify-icon {
    color: #4ade80;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Architecture Diagram */
.showcase-architecture {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    border: 1px solid var(--color-border);
}

.architecture-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.arch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.arch-node:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

.arch-node iconify-icon {
    font-size: 2rem;
    color: var(--color-accent);
}

.arch-node span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.arch-arrow {
    color: var(--color-gray-low-opacity);
    font-size: 1.5rem;
}

/* Tech Tags Grid */
.showcase-tech {
    margin-bottom: 2rem;
}

.tech-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tech-tags-grid .tech-tag {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* Components Grid */
.showcase-components {
    margin-bottom: 2rem;
}

.components-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.component-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.component-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-5px);
}

.component-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-accent-rgb), 0.15);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.component-icon iconify-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.component-card h5 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 0.8rem 0;
}

.component-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.component-card li {
    font-size: 0.85rem;
    color: var(--color-gray-low-opacity);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.component-card li::before {
    content: "";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* Project Status */
.showcase-status {
    margin-bottom: 2rem;
    text-align: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 0.8rem;
}

.status-badge iconify-icon {
    font-size: 1.3rem;
    color: #4ade80;
}

.status-badge span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4ade80;
}

.status-note {
    font-size: 0.85rem;
    color: var(--color-gray-low-opacity);
    margin: 0;
}

/* Gallery Grid */
.showcase-gallery {
    margin-top: 2rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(var(--color-accent-rgb), 0.2);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-label {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-white);
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

/* Showcase Glow */
.showcase-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(800px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.08),
            transparent 100%);
}

.project-showcase:hover .showcase-glow {
    opacity: 1;
}

/* Responsive - Projects Section */
@media (max-width: 1080px) {
    .showcase-content {
        grid-template-columns: 1fr;
    }

    .components-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1080px) {
    .projects-section {
        padding: 4rem 1rem;
    }

    .projects-text-large {
        font-size: 1.8rem;
    }

    .project-showcase {
        padding: 1.5rem;
    }

    .showcase-title {
        font-size: 1.5rem;
    }

    .showcase-subtitle {
        flex-direction: column;
        text-align: center;
    }

    .architecture-flow {
        flex-direction: column;
        gap: 0.8rem;
    }

    .arch-arrow {
        transform: rotate(90deg);
    }

    .components-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item img {
        aspect-ratio: 16 / 9;
    }
}

/* =========================
   PROJECTS SECTION (Personal Projects)
========================= */

.projects-section {
    padding: 24px;
    padding-top: 4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}

.projects-container {
    max-width: 1000px;
    margin: 0 auto;
}

.projects-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    position: relative;
}

.projects-main-title {
    font-size: 10rem !important;
    opacity: 0.05;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}

.projects-intro {
    padding-left: 0;
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
}

.projects-text-large {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.projects-text-sub {
    font-size: 1.1rem;
    color: var(--color-gray-low-opacity);
    max-width: 600px;
    margin-bottom: 1rem;
}

/* Personal Project Card */
.personal-project-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.personal-project-card:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(var(--color-accent-rgb), 0.15);
}

.personal-project-card .card-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(250px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-white-rgb), 0.15),
            transparent 80%),
        radial-gradient(450px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.12),
            transparent 100%),
        radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.05),
            transparent 100%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    mix-blend-mode: screen;
}

.personal-project-card:hover .card-glow {
    opacity: 1;
}

.personal-project-content {
    padding: 2.5rem;
    position: relative;
    z-index: 1;
}

.personal-project-header {
    margin-bottom: 2rem;
}

.personal-project-title {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1rem 0;
    transition: color 0.3s ease;
}

.personal-project-card:hover .personal-project-title {
    color: var(--color-accent);
}

.personal-project-description {
    font-size: 1.1rem;
    color: var(--color-gray-low-opacity);
    line-height: 1.7;
    margin: 0;
    max-width: 800px;
}

/* Features Section */
.personal-project-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-column {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.feature-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-list li {
    font-size: 0.95rem;
    color: var(--color-gray-low-opacity);
    line-height: 1.5;
    padding-left: 1.2rem;
    position: relative;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.6;
}

/* Tech Tags for Personal Projects */
.personal-project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.personal-project-tech .tech-tag {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
}

/* Project Gallery */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.project-gallery-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-gallery-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

.project-gallery-item:hover .project-gallery-image {
    transform: translateY(-5px);
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.gallery-label {
    font-size: 0.75rem;
    color: var(--color-gray-low-opacity);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* =========================
   RESPONSIVE - PROJECTS SECTION
========================= */

@media (max-width: 1080px) {
    .projects-section {
        padding: 4rem 1rem;
        padding-bottom: 3rem;
    }

    .projects-text-large {
        font-size: 1.8rem;
    }

    .personal-project-content {
        padding: 1.5rem;
    }

    .personal-project-title {
        font-size: 1.5rem;
    }

    .personal-project-description {
        font-size: 1rem;
    }

    .personal-project-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-gallery-image {
        aspect-ratio: 16 / 9;
    }
}

/* =========================
   ASYMMETRIC GALLERY LAYOUT
========================= */

.project-gallery-asymmetric {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    min-height: 350px;
}

.gallery-featured {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gallery-featured .project-gallery-image {
    flex: 1;
    aspect-ratio: auto;
    min-height: 300px;
    border-radius: 16px;
}

.gallery-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-stack-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.gallery-stack-item .project-gallery-image {
    flex: 1;
    aspect-ratio: auto;
    min-height: 120px;
    border-radius: 12px;
}

.gallery-stack-item .project-gallery-image.mobile-aspect {
    aspect-ratio: 9 / 16;
    max-height: none;
}

/* Hover effects for asymmetric gallery */
.gallery-featured:hover .project-gallery-image,
.gallery-stack-item:hover .project-gallery-image {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(var(--color-accent-rgb), 0.15);
}

/* Responsive asymmetric gallery */
@media (max-width: 1080px) {
    .project-gallery-asymmetric {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gallery-featured .project-gallery-image {
        min-height: 200px;
        aspect-ratio: 3 / 2;
    }

    .gallery-stack {
        flex-direction: row;
        gap: 1rem;
    }

    .gallery-stack-item .project-gallery-image {
        min-height: 150px;
        aspect-ratio: 1 / 1;
    }

    .gallery-stack-item .project-gallery-image.mobile-aspect {
        aspect-ratio: 1 / 1;
    }
}

/* ==========================================================================
   PERSONAL PROJECTS MODULE - CONSOLIDATED & CLEAN
   ========================================================================== */

/* 1. SECTION WRAPPERS
   -------------------------------------------------------------------------- */
.projects-section {
    overflow: visible;
}

.project-content-wrapper {
    position: relative;
    margin-left: 1rem;
    display: flex;
    gap: 1.5rem;
    overflow: visible;
    margin-bottom: 2rem;
}

/* 2. TIMELINE INDICATOR
   -------------------------------------------------------------------------- */
.project-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    background: var(--color-border);
    border-radius: 50%;
    margin-top: 1.1rem;
    /* Aligns with text-top of major headings */
    z-index: 2;
    flex-shrink: 0;
}

.timeline-line {
    width: 1px;
    flex-grow: 1;
    background: linear-gradient(to bottom, var(--color-border), transparent);
    margin-top: -2px;
    z-index: 1;
}

/* 3. CONTENT AREA (Text, Tags)
   -------------------------------------------------------------------------- */
.project-text-content {
    flex-grow: 1;
}

.personal-project-title {
    margin-bottom: 1rem;
    line-height: 1.2;
}

.personal-project-description {
    opacity: 0.8;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.personal-project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.tech-tag iconify-icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

.tech-tag:hover {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    color: var(--color-accent);
}

/* 4. GALLERY MOSAIC (Hero + Floats)
   -------------------------------------------------------------------------- */
.gallery-mosaic {
    position: relative;
    width: 100%;
    height: auto;
    perspective: 1400px;
    transform-style: preserve-3d;
    padding-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.mosaic-item {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Hero Item - 75% width, background base */
.mosaic-item.pos-hero {
    position: relative;
    width: 75%;
    z-index: 1;
    /* Lower than floats wrapper */
}

/* Floating Wrapper - 35% width, vertical center overlap */
.mosaic-floats-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateZ(70px) translateX(-40px);
    /* Sufficient depth to avoid intersection without extreme perspective scaling */
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 10;
    /* Always above hero */
    transform-style: preserve-3d;
}

/* Shared image styles */
.mosaic-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: background-image 0.5s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.mosaic-item.pos-float1,
.mosaic-item.pos-float2 {
    cursor: pointer;
    transform-style: preserve-3d;
}

/* Visual Glow effects */
.mosaic-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(var(--color-accent-rgb), 0.15) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    /* Ensure it stays above image but below interaction if needed */
}

/* 5. INTERACTIONS & PERSPECTIVE
   -------------------------------------------------------------------------- */
.mosaic-item.is-hovered .mosaic-glow {
    opacity: 1;
}

.mosaic-item.is-hovered .mosaic-image {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--color-accent-rgb), 0.2);
}


/* 6. RESPONSIVE DESIGN
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .project-content-wrapper {
        margin-left: 0;
        gap: 1rem;
    }

    .gallery-mosaic {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        perspective: none;
    }

    .mosaic-item.pos-hero,
    .mosaic-floats-wrapper {
        position: relative;
        width: 100%;
        top: auto;
        right: auto;
        transform: none !important;
    }

    .mosaic-item {
        transform: none !important;
    }

    .mosaic-item.is-hovered .mosaic-image {
        transform: translateY(-5px);
    }
}

/* =========================
   CONTACT CTA SECTION
========================= */

.contact-section {
    padding: 24px;
    padding-top: 4rem;
    padding-bottom: 4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}

.contact-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.contact-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    will-change: transform, width, height, opacity;
}

.contact-particle.warp {
    /* Shape and opacity handled by JS to sync with inertia */
    border-radius: 0;
    background: linear-gradient(to right, transparent, rgba(var(--color-white-rgb), 0.6));
    transform: rotate(15deg);
    /* Match diagonal movement */
}

.contact-cta-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding: 3rem 2rem;
    z-index: 1;
    overflow: visible;
}

.contact-cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.contact-cta-content {
    position: relative;
    z-index: 1;
}

.contact-cta-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.contact-cta-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.contact-cta-subtitle {
    font-size: 1.1rem;
    color: var(--color-gray-low-opacity);
    max-width: 550px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

/* Contact Method Cards */
.contact-cta-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-method-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.contact-method-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: 0.5s;
}

.contact-method-card:hover::after {
    left: 100%;
}

.contact-method-card:hover {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: var(--color-accent);
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.15);
}

.method-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-accent-rgb), 0.1);
    border-radius: 12px;
    color: var(--color-accent);
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.contact-method-card:hover .method-icon {
    background: var(--color-accent);
    color: white;
}

.method-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.method-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-low-opacity);
}

.method-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.method-arrow {
    color: var(--color-gray-low-opacity);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-10px);
    position: relative;
    z-index: 1;
}

.contact-method-card:hover .method-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--color-accent);
}

/* Social Links */
.contact-cta-socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-social-link {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-gray-low-opacity);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.cta-social-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.15),
            transparent);
    transition: 0.5s;
}

.cta-social-link:hover::after {
    left: 100%;
}

.cta-social-link:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-5px) rotate(10deg);
    box-shadow: 0 10px 25px rgba(var(--color-accent-rgb), 0.2);
}

/* Contact Divider */
.contact-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.contact-divider::before,
.contact-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.contact-divider span {
    font-size: 0.8rem;
    color: var(--color-gray-low-opacity);
    text-transform: lowercase;
    white-space: nowrap;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    text-align: left;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1px;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-low-opacity);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-white);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(var(--color-accent-rgb), 0.05);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
}

.form-group textarea {
    resize: none;
    height: 120px;
    overflow-y: auto;
}

.form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-white);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    align-self: flex-end;
    position: relative;
    overflow: hidden;
}

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

.form-submit-btn:hover::after {
    left: 100%;
}

.form-submit-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.2);
}

.form-submit-btn i {
    font-size: 0.85rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.form-submit-btn span {
    position: relative;
    z-index: 1;
}

.form-submit-btn:hover i {
    transform: translateX(3px) translateY(-2px);
    color: var(--color-accent);
}

/* Responsive Form */
@media (max-width: 1080px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .form-submit-btn {
        width: 100%;
    }
}

/* =========================
   FOOTER
========================= */

.site-footer {
    padding: 1.5rem 24px;
    margin-top: 24px;
    text-align: center;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer-name {
    font-size: 3rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-accent) 0%, rgba(99, 102, 241, 0.5) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-tagline {
    font-size: 0.85rem;
    color: var(--color-gray-low-opacity);
    letter-spacing: 0.1em;
}

.footer-divider {
    width: 60px;
    height: 1px;
    background: var(--color-border);
    margin: 0 auto 1.5rem auto;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.footer-copyright {
    font-size: 0.8rem;
    color: var(--color-gray-low-opacity);
    margin: 0;
    opacity: 0.6;
}

.footer-made {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.footer-made .heart {
    color: #ef4444;
    display: inline-block;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {

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

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

/* =========================
   RESPONSIVE - CONTACT & FOOTER
========================= */

@media (max-width: 1080px) {
    .contact-section {
        padding: 3rem 1rem;
    }

    .contact-cta-container {
        padding: 2rem 1rem;
    }

    .contact-cta-title {
        font-size: 3rem;
    }

    .contact-cta-subtitle {
        font-size: 1rem;
    }

    .contact-method-card {
        padding: 1rem;
    }

    .method-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .method-value {
        font-size: 0.85rem;
    }

    .cta-social-link {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .footer-name {
        font-size: 2.5rem;
    }
}

/* ============================================================
   RESPONSIVE - RANGE 768px to 1000px (Specific request)
   ============================================================ */
@media (max-width: 1000px) and (min-width: 768px) {

    .cv-text-long,
    .cv-text-mini {
        display: none !important;
    }

    .cv-text-short {
        display: inline !important;
    }

    .contact-links-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        justify-content: center;
    }

    .contact-button {
        width: 100% !important;
    }
}

/* 860px - 768px: Use "CV" Stage */
@media (max-width: 860px) and (min-width: 768px) {

    .cv-text-long,
    .cv-text-short {
        display: none !important;
    }

    .cv-text-mini {
        display: inline !important;
    }
}

/* ============================================================
   RESPONSIVE - RANGE 500px to 768px (Custom Layout for About Me)
   Layout: 
   - Row 1: EXPERIENCIA | EDUCACIÓN
   - Row 2: IDIOMAS (full width, languages in a row)
   - Row 3: TECNOLOGÍA | CONTACTO
   ============================================================ */
@media (max-width: 768px) and (min-width: 500px) {
    .about-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 1rem !important;
    }

    /* Break apart the vertical group so cards can be placed independently */
    .card-group-vertical {
        display: contents !important;
    }

    /* Row 1: Experiencia | Educación */
    .about-card.card-experience {
        grid-row: 1 !important;
        grid-column: 1 !important;
        order: 1;
    }

    .about-card.card-edu {
        grid-row: 1 !important;
        grid-column: 2 !important;
        order: 2;
    }

    /* Row 2: Idiomas - "IDIOMAS:" left, languages right with space-between */
    .about-card.card-inner {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
        order: 3;
        padding: 0.75rem 1.25rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .about-card.card-inner .card-title {
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    .about-card.card-inner .card-title::after {
        content: ":";
    }

    .about-card.card-inner .languages-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2rem !important;
        padding: 0 !important;
    }

    .about-card.card-inner .lang-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    /* Row 3: Tecnología | Contacto */
    .about-card.card-skills {
        grid-row: 3 !important;
        grid-column: 1 !important;
        order: 4;
    }

    .about-card.card-contact {
        grid-row: 3 !important;
        grid-column: 2 !important;
        order: 5;
    }

    /* Compact padding for this breakpoint */
    .about-card {
        padding: 1.25rem !important;
    }

    .card-title {
        font-size: 1rem !important;
    }
}

/* ============================================================
   RESPONSIVE - RANGE 500px to 640px (CV Text Adjustment)
   Shows "CURRICULUM" instead of "CURRICULUM VITAE"
   ============================================================ */
@media (max-width: 640px) and (min-width: 500px) {

    .cv-text-long,
    .cv-text-mini {
        display: none !important;
    }

    .cv-text-short {
        display: inline !important;
    }

    /* Social buttons in 2x2 grid */
    .about-card.card-contact .contact-links-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }

    .about-card.card-contact .contact-button {
        width: 100% !important;
    }
}

/* ============================================================
   RESPONSIVE - Under 500px (Technologies spacing fix)
   ============================================================ */
@media (max-width: 499px) {
    .tech-marquee-container {
        gap: 0.5rem !important;
    }

    .tech-marquee-track {
        padding: 0.4rem 0 !important;
    }

    .tech-item {
        gap: 0.15rem !important;
    }

    .tech-item span {
        font-size: 0.55rem !important;
    }
}

/* ============================================================
   RESPONSIVE - Under 370px (CV Button shows CURRICULUM)
   ============================================================ */
@media (max-width: 370px) {

    .cv-text-long,
    .cv-text-mini {
        display: none !important;
    }

    .cv-text-short {
        display: inline !important;
    }

    /* Social buttons in 2x2 grid */
    .about-card.card-contact .contact-links-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .about-card.card-contact .contact-button {
        width: 100% !important;
    }
}

/* ============================================================
   RESPONSIVE - Under 410px (Contact title size)
   ============================================================ */
@media (max-width: 410px) {
    .contact-cta-title {
        font-size: 2rem;
    }
}

/* ============================================================
   RESPONSIVE - Section Watermark Titles (Scale to fit screen)
   ============================================================ */
@media (max-width: 768px) {

    .about-main-title,
    .experience-main-title,
    .projects-main-title {
        font-size: 22vw !important;
    }
}

@media (max-width: 500px) {

    .about-main-title,
    .experience-main-title,
    .projects-main-title {
        font-size: 18vw !important;
    }
}

/* ============================================================
   DISPOSITIVOS TÁCTILES (Eliminar Hovers "pegajosos")
   ============================================================ */
@media (pointer: coarse) {

    /* 1. Eliminamos el hover "pegajoso" en los links de la navegación */
    .nav-links li a:hover,
    .mobile-nav-links li a:hover {
        background: transparent;
        color: var(--color-gray-low-opacity);
        border-color: transparent;
    }

    /* 2. Mantenemos el estilo .active resaltado sin que el hover interfiera */
    .nav-links li a.active,
    .mobile-nav-links li a.active {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-white);
    }

    /* 3. Eliminamos el hover "pegajoso" del botón hamburguesa */
    /* Cuando NO está scrolled, forzamos que el hover sea transparente como el estado base */
    .hamburger:hover {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    /* Cuando SÍ está scrolled, forzamos que el hover mantenga el color del scroll 
       y no el color gris oscuro del hover de desktop */
    .site-header.scrolled .hamburger:hover {
        background: rgba(22, 22, 22, 0.8);
        border: 1px solid var(--color-border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    /* 4. Eliminamos escalados de hover en tarjetas para evitar saltos visuales en touch */
    .about-card:hover,
    .project-card:hover,
    .personal-project-card:hover,
    .mosaic-item:hover .mosaic-image {
        transform: none !important;
    }

    /* 5. Eliminamos hover en botones del carousel */
    .carousel-arrow:hover,
    .carousel-arrow:active,
    .carousel-arrow:focus {
        background: rgba(0, 0, 0, 0.5) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-50%) !important;
        box-shadow: none !important;
    }
}

/* =========================
   MOBILE CAROUSEL
========================= */

/* Hidden by default - Desktop shows mosaic */
.mobile-carousel {
    display: none;
}

/* Show carousel on mobile, hide mosaic */
@media (max-width: 1080px) {
    .gallery-mosaic {
        display: none;
    }

    .mobile-carousel {
        display: block;
        width: 100%;
        position: relative;
        margin-top: 2rem;
        border-radius: 16px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--color-border);
    }

    .carousel-track {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

    .carousel-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: scale(1.05);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .carousel-slide.active {
        opacity: 1;
        transform: scale(1);
        z-index: 1;
    }

    .carousel-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    /* Navigation Dots */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.3);
    }

    .carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .carousel-dot::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: transparent;
        transition: all 0.3s ease;
    }

    .carousel-dot:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    .carousel-dot.active {
        background: var(--color-accent);
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
        transform: scale(1.2);
    }

    .carousel-dot.active::before {
        background: #4ade802c;
    }

    /* Navigation Arrows */
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        color: var(--color-white);
        font-size: 1rem;
        cursor: pointer;
        z-index: 5;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .carousel-arrow:hover {
        background: rgba(99, 102, 241, 0.6);
        border-color: var(--color-accent);
        transform: translateY(-50%) scale(1.1);
    }

    .carousel-arrow:active {
        transform: translateY(-50%) scale(0.95);
    }

    .carousel-prev {
        left: 0.75rem;
    }

    .carousel-next {
        right: 0.75rem;
    }

    /* Drag cursor */
    .carousel-track {
        cursor: grab;
    }

    .carousel-track.dragging {
        cursor: grabbing;
    }

    .carousel-track.dragging .carousel-slide {
        transition: none;
    }
}

/* =========================
   CERTIFICATES COLLAPSIBLE (Mobile)
========================= */

/* Desktop: Just show everything normally */
.certificates-collapsible {
    position: relative;
}

.certificates-fade-overlay,
.certificates-toggle {
    display: none;
}

/* Mobile: Collapsible effect */
@media (max-width: 1080px) {
    .certificates-collapsible {
        position: relative;
    }

    .certificates-wrapper {
        max-height: 620px;
        overflow: hidden;
        transition: max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .certificates-collapsible.expanded .certificates-wrapper {
        max-height: 3000px;
    }

    /* Force all certificate cards to be visible immediately (skip scroll reveal) */
    .certificates-collapsible .project-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* TRUE fade to transparent using mask */
    .certificates-wrapper {
        -webkit-mask-image: linear-gradient(to bottom,
                black 0%,
                black 70%,
                transparent 100%);
        mask-image: linear-gradient(to bottom,
                black 0%,
                black 70%,
                transparent 100%);
    }

    .certificates-collapsible.expanded .certificates-wrapper {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Hide the overlay div since we don't need it anymore */
    .certificates-fade-overlay {
        display: none;
    }

    .certificates-collapsible.expanded .certificates-fade-overlay,
    .certificates-collapsible.expanded .certificates-toggle {
        display: none;
    }

    /* Toggle button - Discrete style like VER TODO */
    .certificates-collapsible {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .certificates-wrapper {
        width: 100%;
    }

    .certificates-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        margin-top: 1rem;
        background: transparent;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        color: var(--color-gray-low-opacity);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .certificates-toggle:hover {
        color: var(--color-white);
        border-color: var(--color-white);
    }

    .certificates-toggle .toggle-icon {
        font-size: 0.6rem;
    }
}

/* =========================
   CONTACT OVERLAYS
========================= */

.contact-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-overlay.active {
    opacity: 1;
    visibility: visible;
}

.overlay-backdrop {
    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);
}

.overlay-content {
    position: relative;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.contact-overlay.active .overlay-content {
    transform: scale(1) translateY(0);
}

.overlay-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--color-gray-low-opacity);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.overlay-close:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.overlay-icon {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.overlay-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.overlay-value {
    font-size: 0.9rem;
    color: var(--color-gray-low-opacity);
    margin-bottom: 2rem;
    word-break: break-all;
}

.overlay-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-white);
}

.overlay-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

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

/* Copy button success state */
.overlay-btn.copied {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Primary action (Send Email) */
.overlay-btn-primary {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.overlay-btn-primary:hover {
    background: rgba(var(--color-accent-rgb), 0.3);
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(var(--color-accent-rgb), 0.3);
}

/* WhatsApp button */
.overlay-btn-whatsapp {
    background: rgba(37, 211, 102, 0.15);
    border-color: #25d366;
    color: #25d366;
}

.overlay-btn-whatsapp:hover {
    background: rgba(37, 211, 102, 0.3);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* Call button */
.overlay-btn-call {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #3b82f6;
}

@media (min-width: 1025px) {
    .overlay-btn-call {
        display: none;
    }
}

.overlay-btn-call:hover {
    background: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Contact method card as button */
button.contact-method-card {
    width: 100%;
    text-align: left;
    font-family: inherit;
}

/* Mobile adjustments for overlay */
@media (max-width: 480px) {
    .overlay-content {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }

    .overlay-icon {
        font-size: 2rem;
    }

    .overlay-title {
        font-size: 1.25rem;
    }

    .overlay-value {
        font-size: 0.8rem;
    }

    .overlay-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.8rem;
    }
}