:root {
    --page-brightness: 1;
    --effect-intensity: 0.3;
    --primary-hue: 260;
    --primary-saturation: 90;
    --primary-lightness: 70;
    --animation-speed: 20s;
    --font-family: 'Inter', sans-serif;
    --font-weight: 400;
    --font-style: normal;
    --text-decoration: none;
    --cursor-x: 50vw;
    --cursor-y: 50vh;
}
body {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    text-decoration: var(--text-decoration);
    background-color: #000000;
    color: #e5e7eb;
    overflow-x: hidden;
    cursor: none;
    transition: font-family 0.3s ease, font-weight 0.3s ease, font-style 0.3s ease, text-decoration 0.3s ease;
}
h1, h2, h3, h4, h5, h6, .font-bold, .font-black {
    font-weight: 700;
}
#main-wrapper { 
    filter: brightness(var(--page-brightness)); 
    transition: filter 0.3s ease; 
}

.custom-cursor { 
    position: fixed; 
    left: 0; 
    top: 0; 
    pointer-events: none; 
    z-index: 9999; 
}
.cursor-dot { 
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px; 
    height: 8px; 
    background-color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)); 
    border-radius: 50%; 
    transform: translate(var(--cursor-x), var(--cursor-y));
    transition: transform 0.2s ease-out, background-color 0.3s ease, width 0.2s ease, height 0.2s ease; 
}
.cursor-outline { 
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px; 
    height: 40px; 
    border: 1px solid hsla(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%), 0.5); 
    border-radius: 50%; 
    transform: translate(var(--cursor-x), var(--cursor-y));
    transition: width 0.3s ease-out, height 0.3s ease-out, transform 0.1s linear, background-color 0.3s ease, border-color 0.3s ease;
}
.cursor-text { 
    position: absolute; 
    top: -25px; 
    left: 25px; 
    font-size: 12px; 
    font-weight: bold; 
    color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)); 
    white-space: nowrap; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
#cursor-spotlight-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background: radial-gradient(circle 150px at var(--cursor-x) var(--cursor-y), transparent 0%, rgba(0,0,0,0.95) 100%); 
    z-index: 9990; 
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.3s ease;
}

body.cursor-effect-hidden .custom-cursor { display: none; }
body.cursor-effect-glow .cursor-outline { box-shadow: 0 0 20px 5px hsla(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%), 0.3); }
.cursor-trail, .cursor-particle { 
    position: fixed; 
    pointer-events: none; 
    z-index: 9998; 
    background-color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)); 
    border-radius: 50%; 
}
body.cursor-effect-spotlight #cursor-spotlight-overlay { opacity: 1; }
body.cursor-effect-invert .cursor-dot { background-color: white; }
body.cursor-effect-invert .cursor-outline { mix-blend-mode: difference; }
body.cursor-effect-rotate .cursor-outline { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: translate(var(--cursor-x), var(--cursor-y)) rotate(360deg); } }
body.cursor-effect-pulse .cursor-outline { animation: pulse 2s infinite; }
@keyframes pulse { 50% { transform: translate(var(--cursor-x), var(--cursor-y)) scale(1.3); } }
body.cursor-effect-text:hover .cursor-text { opacity: 1; }
body.cursor-effect-emoji .cursor-dot::after { 
    content: '✨'; 
    font-size: 20px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}
body.cursor-effect-emoji .cursor-dot { background: transparent; }
body:has(a:hover, button:hover) .cursor-outline { 
    transform: translate(var(--cursor-x), var(--cursor-y)) scale(1.5); 
    background-color: hsla(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%), 0.1); 
}
body:has(a:hover, button:hover) .cursor-dot { transform: translate(var(--cursor-x), var(--cursor-y)) scale(0.5); }

.card-wrapper { perspective: 1000px; }
.interactive-card { 
    background: rgba(10, 10, 10, 0.4); 
    backdrop-filter: blur(16px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transform-style: preserve-3d; 
    transition: transform 0.5s ease, box-shadow 0.5s ease; 
    position: relative; 
    overflow: hidden; 
}
.card-content { transform: translateZ(40px); }
.card-image { 
    transition: transform 0.5s ease, filter 0.5s ease; 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}
.card-shine { 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); 
    transform: rotate(20deg); 
    opacity: 0; 
    transition: opacity 0.5s ease, transform 0.1s linear; 
    pointer-events: none;
}
.card-border { 
    position: absolute; 
    inset: 0; 
    border-radius: inherit; 
    padding: 1px; 
    background: conic-gradient(from var(--angle, 0deg) at 50% 50%, hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)), hsl(calc(var(--primary-hue) + 60), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)), hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%))); 
    opacity: 0; 
    transition: opacity 0.4s; 
    animation: spin-border 4s linear infinite paused;
}
.interactive-card:hover .card-border { 
    opacity: 1; 
    animation-play-state: running; 
}
@keyframes spin-border { to { --angle: 360deg; } }
.card-overlay-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 1.5rem; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
    transform: translateY(100%); 
    transition: transform 0.5s ease; 
}
[data-card-effect="glow"] .card-wrapper:hover .interactive-card { 
    border-color: hsla(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%), 0.4); 
    box-shadow: 0 0 30px hsla(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%), 0.2); 
}
[data-card-effect="simple"] .card-wrapper:hover .interactive-card { transform: translateY(-8px); }
[data-card-effect="float"] .card-wrapper:hover .interactive-card { 
    transform: translateY(-20px) translateZ(10px); 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
}
[data-card-effect="tilt"] .card-wrapper:hover .interactive-card .card-image,
[data-card-effect="parallax"] .card-wrapper:hover .interactive-card .card-image { transform: scale(1.05) translateZ(20px); }
[data-card-effect="shine-directed"] .card-wrapper:hover .card-shine { opacity: 1; }
[data-card-effect="content-up"] .card-wrapper:hover .card-overlay-content { transform: translateY(0); }
[data-card-effect="image-zoom"] .card-wrapper:hover .card-image { transform: scale(1.2); }
[data-card-effect="color-filter"] .card-wrapper:hover .card-image { filter: grayscale(0%); }
[data-card-effect="color-filter"] .card-image { filter: grayscale(100%); }
[data-card-effect="glitch"] .card-wrapper:hover .card-image { animation: glitch-anim 0.5s infinite; }
@keyframes glitch-anim { 
    0%, 100% { clip-path: inset(0 0 0 0); } 
    20% { clip-path: inset(20% 0 50% 0); } 
    40% { clip-path: inset(40% 0 30% 0); } 
    60% { clip-path: inset(10% 0 80% 0); } 
    80% { clip-path: inset(70% 0 5% 0); } 
}
[data-card-effect="pixelate"] .card-wrapper:hover .card-image { filter: url(#pixelate); }
[data-card-effect="bevel"] .card-wrapper:hover .interactive-card { box-shadow: inset 5px 5px 10px #0a0a0a, inset -5px -5px 10px #2a2a2a; }

.reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.background-effects { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    opacity: var(--effect-intensity); 
    transition: opacity 0.3s ease; 
}
.background-effects > div, .background-effects > canvas { display: none; }
.background-effects > .active { display: block; }
#liquid-gooey-effect { filter: url(#gooey-filter); }
.gooey-blob { 
    position: absolute; 
    background: radial-gradient(circle at center, hsl(var(--primary-hue), calc(var(--primary-saturation) * 1% - 10%), calc(var(--primary-lightness) * 1% - 10%)), hsl(calc(var(--primary-hue) - 30), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)));
    border-radius: 50%; 
    mix-blend-mode: screen; 
    animation: move var(--animation-speed) infinite alternate;
}
.gooey-blob:nth-child(1) { 
    width: 200px; 
    height: 200px; 
    top: 20%; 
    left: 20%; 
    animation-duration: calc(var(--animation-speed) * 0.75); 
}
.gooey-blob:nth-child(2) { 
    width: 300px; 
    height: 300px; 
    top: 60%; 
    left: 70%; 
    animation-duration: calc(var(--animation-speed) * 1.25); 
    animation-delay: -5s; 
}
@keyframes move { 
    from { transform: translate(0, 0) scale(1); } 
    to { transform: translate(400px, 200px) scale(1.5); } 
}
#control-panel-toggle { 
    position: fixed; 
    bottom: 20px; 
    left: 20px; 
    z-index: 100; 
}
.panel { 
    position: fixed; 
    bottom: 90px; 
    left: 20px; 
    z-index: 100; 
    background: rgba(10, 10, 10, 0.6); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 1.5rem; 
    border-radius: 1rem; 
    width: 18rem; 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
#control-panel { 
    transform: translateY(20px) scale(0.95); 
    opacity: 0; 
    pointer-events: none; 
}
#control-panel.open { 
    transform: translateY(0) scale(1); 
    opacity: 1; 
    pointer-events: auto; 
}
#submenu-panel { 
    transform: translateX(-20px) scale(0.95); 
    opacity: 0; 
    pointer-events: none; 
}
#submenu-panel.open { 
    transform: translateX(0) scale(1); 
    opacity: 1; 
    pointer-events: auto; 
}
.submenu-section { display: none; }
.submenu-section.active { display: block; }
.control-button.active, .font-style-btn.active { 
    background-color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)); 
    color: #000; 
}
.submenu-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.5rem; 
    max-height: 250px; 
    overflow-y: auto; 
    padding-right: 0.5rem;
}
input[type="range"]::-webkit-slider-thumb { background: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)); }
.gradient-text { 
    background: linear-gradient(90deg, hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)), hsl(calc(var(--primary-hue) + 40), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)), hsl(calc(var(--primary-hue) - 20), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)), hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%))); 
    background-size: 200% auto; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    animation: gradient-flow 5s linear infinite; 
}
@keyframes gradient-flow { to { background-position: 200% center; } }
.project-tag { color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1%), calc(var(--primary-lightness) * 1%)); }
.primary-button { background-color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1% - 10%), calc(var(--primary-lightness) * 1% - 10%)); }
.primary-button:hover { background-color: hsl(var(--primary-hue), calc(var(--primary-saturation) * 1% - 10%), calc(var(--primary-lightness) * 1% - 15%)); }

#whatsapp-flotante {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#whatsapp-flotante:hover {
    transform: scale(1.1);
    background-color: #128C7E;
}