:root {
    --color-bg: #050505;
    --color-text: #e0e0e0;
    --color-yellow: #feca57; 
    --color-blue: #5f27cd; 
    --color-dark-text: #111;
    --font-main: 'Outfit', sans-serif;
    --transition-speed: 0.8s;
}

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

body, html {
    width: 100%; overflow-x: hidden; overflow-y: auto;
    font-family: var(--font-main);
    background-color: var(--color-bg); color: var(--color-text);
}

:root {
    --scroll-progress: 0;
}

#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: transparent; }

/* ------------------------------------------------ */
/* BACKGROUND AUTO-SCROLLING CAROUSEL                */
/* ------------------------------------------------ */
.bg-carousel-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background-color: var(--color-bg);
    overflow: hidden;
    pointer-events: none; /* Make sure it doesn't block interactions */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2vh 0;
}

.bg-carousel-row {
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bg-carousel-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    will-change: transform;
}

.bg-carousel-track.scroll-left {
    animation: bg-scroll-left 50s linear infinite;
}

.bg-carousel-track.scroll-right {
    animation: bg-scroll-right 50s linear infinite;
}

.bg-carousel-slide {
    flex-shrink: 0;
    width: 52vw; /* Larger images */
    margin: 0 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-carousel-slide img {
    width: 100%;
    max-height: 28vh;
    object-fit: contain;
    opacity: 0.15; /* Subtle watermark opacity, slightly elevated for lines */
    mix-blend-mode: screen; /* Perfectly removes inverted black background, making it transparent */
    
    /* 
       CSS Filter Color Shift:
       1. invert(1): makes white background black (transparent) & black lines white
       2. sepia(1) saturate(18) hue-rotate(5deg): shifts white lines to rich gold-yellow
       3. brightness(1.4) contrast(1.1): makes the lines pop against the dark background
    */
    filter: invert(1) sepia(1) saturate(18) hue-rotate(5deg) brightness(1.4) contrast(1.1);
    border-radius: 8px;
}

@keyframes bg-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes bg-scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.ui-layer { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; pointer-events: none; }
.ui-layer > * { pointer-events: auto; }

/* ------------------------------------------------ */
/* HEADER REDISEÑADO                                */
/* ------------------------------------------------ */
.main-header {
    text-align: center;
    padding: 2rem 0 1rem 0;
    flex-shrink: 0; 
    display: flex; justify-content: center;
    position: fixed; top: 0; width: 100%; z-index: 300;
}

.logo-container {
    display: flex; flex-direction: column; align-items: center; position: relative;
}

.logo-container::before {
    content: '';
    position: absolute;
    top: 40%; left: 50%; transform: translate(-50%, -50%);
    width: 140%; height: 160%;
    background-color: #000;
    opacity: 0.75;
    filter: blur(25px);
    border-radius: 50%;
    z-index: 100;
    pointer-events: none;
}

.logo-row {
    display: inline-flex; align-items: flex-start; justify-content: center;
    position: relative;
}

.logo-text {
    font-size: 2.2rem; font-weight: 700; letter-spacing: 0.15rem;
    color: var(--color-yellow); text-transform: uppercase;
    line-height: 1; margin: 0;
    mix-blend-mode: difference;
    position: relative; z-index: 200;
    animation: breathe-spacing-title 6s ease-in-out infinite;
}

@keyframes breathe-spacing-title {
    0%, 100% { letter-spacing: 0.15rem; }
    50% { letter-spacing: 0.4rem; }
}

.recording-dot {
    width: 8px; height: 8px; background-color: #ff4757; border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 71, 87, 0.8);
    animation: pulse-record 1.5s infinite;
    position: absolute;
    right: -15px;
    top: 5px;
    z-index: 200;
}

@keyframes pulse-record {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.records-wrapper {
    width: 100%; display: flex; justify-content: center; overflow: visible;
}

.records-text {
    display: none;
}

/* ------------------------------------------------ */
/* CENTRO                                           */
/* ------------------------------------------------ */
.content-wrapper { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }

.center-content {
    position: absolute;
    top: 40%; /* Movido arriba para balance visual óptimo */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90vw;
    max-width: 900px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Evita bloquear interacciones con las esferas */
}

.center-title {
    font-family: 'Outfit', var(--font-main);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.25rem;
    line-height: 1.6;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 255, 255, 0.15);
    margin: 0;
    text-transform: uppercase;
}

/* Discreet footer at the bottom (only visible at scroll bottom) */
.discreet-footer {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    text-align: center;
    pointer-events: none;
    width: 90vw;
    max-width: 600px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s ease;
}

.discreet-footer.visible {
    opacity: 1;
    visibility: visible;
}

.footer-text {
    font-family: var(--font-main);
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.25rem;
    color: var(--color-yellow);
    opacity: 0.55;
    text-transform: uppercase;
    animation: breathe-opacity 4s ease-in-out infinite;
    margin: 0;
}

@keyframes breathe-opacity {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.80; }
}

/* ------------------------------------------------ */
/* VINYL RECORD SOBRE CADA ESFERA                   */
/* ------------------------------------------------ */
.panel-vinyl {
    /*
     * Direct child of .side-panel (position: fixed).
     * Fills the sphere minus 5px on each side → 10px total.
     * position: absolute is relative to .side-panel since it's fixed.
     */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
    z-index: 1;          /* above yellow sphere bg */
    pointer-events: none;
    overflow: hidden;
}

.validation-circle-svg circle {
    fill: none !important;
    stroke: #ff3838 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 1px 6px !important;
    stroke-linecap: round !important;
    vector-effect: non-scaling-stroke !important;
}

.panel-vinyl-svg {
    width: 100%;
    height: 100%;
    animation: vinyl-spin 2s linear infinite;
    transform-origin: center center;
    will-change: transform;
    display: block;
}

@keyframes vinyl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ------------------------------------------------ */
/* BOLAS LATERALES (Curvas muy suaves tipo discos)  */
/* ------------------------------------------------ */
.side-panel {
    position: fixed;
    --w: calc(250vw - ((250vw - 30vw) * var(--scroll-progress)));
    --h: calc(120vh - ((120vh - 30vw) * var(--scroll-progress)));
    --top: calc(45% - (30% * var(--scroll-progress)));

    width: var(--w); height: var(--h);
    top: var(--top); transform: translateY(-50%);
    border-radius: 50%;
    background: transparent; /* Hidden temporarily — disc covers it */
    z-index: 5; cursor: pointer;
}

.left-panel {
    --left: calc(-220vw - (-220vw - 15px) * var(--scroll-progress));
    left: var(--left);
}
.right-panel {
    --right: calc(-220vw - (-220vw - 15px) * var(--scroll-progress));
    right: var(--right);
}

.left-panel:not(.open):not(.disc-mode) {
    --btn-translate-x: -2.5vw;
}
.right-panel:not(.open):not(.disc-mode) {
    --btn-translate-x: 2.5vw;
}

.left-panel:not(.open):not(.disc-mode) .avatar,
.left-panel:not(.open):not(.disc-mode) .toggle-btn {
    transform: translateX(var(--btn-translate-x));
}
.right-panel:not(.open):not(.disc-mode) .avatar,
.right-panel:not(.open):not(.disc-mode) .toggle-btn {
    transform: translateX(var(--btn-translate-x));
}

/* Transición solo al abrir/cerrar (is-animating), para evitar lag de scroll */
.is-animating, .is-animating * {
    transition: all var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.panel-inner {
    position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    --scale: calc(1 - (0.4 * var(--scroll-progress)));
    pointer-events: none;
    z-index: 2; /* Above the vinyl disc */
}

.left-panel .panel-inner { 
    --tx: calc(107vw - (107vw - 0px) * var(--scroll-progress));
    --ty: calc(0px - (9px * var(--scroll-progress)));
    transform: translate(var(--tx), var(--ty)) scale(var(--scale)); 
}
.right-panel .panel-inner { 
    --tx: calc(-107vw - (-107vw - 0px) * var(--scroll-progress));
    --ty: calc(0px - (9px * var(--scroll-progress)));
    transform: translate(var(--tx), var(--ty)) scale(var(--scale)); 
}

/* Avatar Identificable */
.avatar {
    --closed-avatar-size: clamp(180px, 24vw, 280px);
    --closed-avatar-width: calc(var(--closed-avatar-size) * 0.75);
    width: var(--closed-avatar-width); height: var(--closed-avatar-size);
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: calc(-0.5 * var(--closed-avatar-width));
    margin-top: calc(-0.5 * var(--closed-avatar-size));
    /* No filter: black line art shows clearly on grey vinyl */
    filter: none;
    z-index: 3;
    transition: all var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 50%;
    border: 3px dotted darkviolet;
}

/* Flechas Chevron */
.toggle-btn {
    background: none; border: none; cursor: pointer; position: absolute; top: 50%; 
    margin-top: calc(100px - (40px * var(--scroll-progress))); 
    width: 50px; height: 50px; 
    display: flex; justify-content: center; align-items: center;
    pointer-events: none;
    transform: translateX(var(--btn-translate-x, 0px));
}

/* más lejos del borde de pantalla: 60px de offset */
.left-panel .toggle-btn  { margin-left: calc(-60px * (1 - var(--scroll-progress))); }
.right-panel .toggle-btn { margin-left: calc( 60px * (1 - var(--scroll-progress))); }

/* Animaciones sutiles */
.left-panel .toggle-btn { animation: hover-arrow-left 2s infinite ease-in-out; }
.right-panel .toggle-btn { animation: hover-arrow-right 2s infinite ease-in-out; }

@keyframes hover-arrow-left { 
    0%, 100% { transform: translate(var(--btn-translate-x, 0px), 0); } 
    50% { transform: translate(calc(var(--btn-translate-x, 0px) + 4px * (1 - var(--scroll-progress))), calc(2px * var(--scroll-progress))); } 
}
@keyframes hover-arrow-right { 
    0%, 100% { transform: translate(var(--btn-translate-x, 0px), 0); } 
    50% { transform: translate(calc(var(--btn-translate-x, 0px) - 4px * (1 - var(--scroll-progress))), calc(2px * var(--scroll-progress))); } 
}

.custom-arrow {
    width: 100%; height: 100%; fill: none; stroke: var(--color-dark-text);
    stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.3s ease;
}

/* Rotar flechas hacia abajo al scrollear y agrandarlas un poco */
.left-panel .custom-arrow {
    transform: rotate(calc(90deg * var(--scroll-progress))) scale(calc(1 + (0.3 * var(--scroll-progress))));
}
.right-panel .custom-arrow {
    transform: scaleX(-1) rotate(calc(90deg * var(--scroll-progress))) scale(calc(1 + (0.3 * var(--scroll-progress))));
}

.reverse-arrow { transform: scaleX(-1); }

/* Texto oculto */
.hidden-text {
    opacity: 0; visibility: hidden; position: absolute; top: 50%; transform: translateY(-50%) scale(0.9);
    width: 70vw; text-align: justify; color: var(--color-dark-text); transition: all 0.5s ease;
}
.hidden-text h2 { font-size: 1.8rem; margin-bottom: 0.5rem; font-weight: 700; color: var(--color-dark-text); }
.hidden-text p  { font-size: 1.05rem; line-height: 1.5; font-weight: 500; color: var(--color-dark-text); }

.shape-curve-right {
    float: right;
    width: 30vw; height: 500px;
    /* Espejo simétrico de shape-curve-left (S22 Ultra) */
    shape-outside: polygon(
        100%  4%,
         76%  0%,
         80% 10%,
         85% 20%,
         88% 30%,
         81% 40%,
         73% 50%,
         62% 60%,
         34% 70%,
         22% 80%,
          0% 87%,
          0% 100%,
        100% 100%
    );
}

.shape-curve-left {
    float: left;
    width: 30vw; height: 500px;
    /* Calibrado manualmente en S22 Ultra */
    shape-outside: polygon(
          0%  4%,
         24%  0%,
          20% 10%,
          15% 20%,
          12% 30%,
         19% 40%,
         27% 50%,
         38% 60%,
         66% 70%,
         78% 80%,
        100% 87%,
        100% 100%,
          0% 100%
    );
}

.hidden-text h2 { font-size: 1.8rem; margin-bottom: 0.5rem; font-weight: 700; }
.hidden-text p { font-size: 1.05rem; line-height: 1.5; font-weight: 500; }

/* ------------------------------------------------ */
/* ESTADO ABIERTO (Gigante)                         */
/* ------------------------------------------------ */
.side-panel.open {
    width: 250vw !important; 
    height: 120vh !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: default; z-index: 100;
}

.left-panel.open {
    left: -177vw !important; 
}

.right-panel.open {
    right: -177vw !important;
}

/* Centramos el contenido dentro del area visible (aprox 73vw) */
.left-panel.open .panel-inner  { transform: translateX(88.5vw) scale(1) !important; }
.right-panel.open .panel-inner { transform: translateX(-88.5vw) scale(1) !important; }
.side-panel.open .panel-inner  { pointer-events: auto; }

.side-panel.open { overflow: visible; }

/* ================================================ */
/* PANEL-CONTENT-BOX — triada cara / texto / flecha */
/*                                                  */
/* Geometría: elipse 250vw×120vh centrada en 63.5vw */
/*   Disco visible: 73vw × 76vh                     */
/*   Container: top=12vh bottom=88vh (centrado 50vh)*/
/*   indent(y_vp) = 125×(1-sqrt(1-((y_vp-50)/60)²))*/
/*                                                  */
/* Clip-path = forma del disco (73vw×76vh):         */
/*   y=0% (12vh)  → indent=28.4vw → 39% del ancho  */
/*   y=10% (19.6vh)→ 17.3vw → 24%                  */
/*   y=20% (27.2vh)→ 9.5vw  → 13%                  */
/*   y=30% (34.8vh)→ 4.1vw  →  6%                  */
/*   y=40% (42.4vh)→ 1.0vw  →  1%                  */
/*   y=50% (50vh)  → 0                              */
/* (simétrico por arriba y abajo)                   */
/* ================================================ */
.panel-content-box {
    display: contents;
}

.side-panel.open .panel-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:  73vw;
    height: 76vh;             /* 12vh→88vh: flecha a 80-88vh, visible */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* ---- Clip-path: forma del disco (calculada para 76vh) ---- */
.right-panel.open .panel-content-box {
    clip-path: polygon(
        39%  0%,   24%  10%,  13%  20%,
         6%  30%,   1%  40%,   0%  50%,
         1%  60%,   6%  70%,  13%  80%,
        24%  90%,  39% 100%,
        100% 100%, 100%  0%
    );
    padding-left: calc(3.75vw + 5px);
}

.left-panel.open .panel-content-box {
    clip-path: polygon(
         0%  0%,  0% 100%,
        61% 100%,  76%  90%,  87%  80%,
        94%  70%,  99%  60%,  100%  50%,
        99%  40%,  94%  30%,  87%  20%,
        76%  10%,  61%   0%
    );
    padding-right: calc(3.75vw + 5px);
}

/* ---- Cara: 28% superior ---- */
.side-panel.open .avatar {
    position: relative !important;
    top: auto !important; left: auto !important; margin: 0 !important;
    width: auto !important;
    height: 28% !important;
    flex-shrink: 0;
    object-fit: contain;
}

.left-panel.open .avatar {
    transform: translateX(-3.5vw) !important;
}

.right-panel.open .avatar {
    transform: translateX(3.5vw) !important;
}

/* ---- Texto: 62% central ---- */
/* overflow:hidden contiene el texto SIN romper shape-outside:
   el float y el p están en el mismo BFC (el de hidden-text).
   Lo que NO puede tener overflow:hidden es el propio <p>. */
.side-panel.open .hidden-text {
    position: relative !important;
    top: auto !important; transform: none !important; margin: 0 !important;
    opacity: 1 !important; visibility: visible !important;
    width: 100%;
    flex: 1;
    display: block !important;
    overflow: hidden;
    transition-delay: 0.3s;
}
/* Margen en el lado "plano" del disco (sin curva) */
.right-panel.open .hidden-text { padding-right: 2vw; }
.left-panel.open  .hidden-text { padding-left:  2vw; }

/* ================================================ */
/* SHAPE-OUTSIDE — polígonos para el layout 76vh    */
/*                                                  */
/* texto inicia en viewport y=33.3vh (28%×76 + 12) */
/* texto termina en viewport y=80.3vh (90%×76 + 12)*/
/* float: 25vw × 50vh (cubre el área de texto)     */
/*                                                  */
/* right-edge del left-float (= indent/25vw):       */
/*   y=0%  (33.3vh): 5.0vw → 20%                   */
/*   y=10% (38.3vh): 2.4vw → 10%                   */
/*   y=20% (43.3vh): 0.8vw →  3%                   */
/*   y=33%  (50vh):  0     →  0%  ← centro disco   */
/*   y=60% (63.3vh): 3.1vw → 12%                   */
/*   y=70% (68.3vh): 6.1vw → 24%                   */
/*   y=80% (73.3vh): 9.8vw → 39%                   */
/*   y=94% (80.3vh): 17.2vw→ 69%                   */
/* shape-margin:2vw agrega margen legible           */
/* ================================================ */

/* RIGHT panel (Agustina): float IZQUIERDO */
.right-panel.open .shape-curve-left {
    display: block;
    float: left;
    width: 25vw;
    height: 50vh;
    shape-margin: 5vw;
    shape-outside: polygon(
          0%   0%,
         20%   0%,
         10%  10%,
          3%  20%,
          0%  33%,
         12%  60%,
         24%  70%,
         39%  80%,
         69%  94%,
        100% 100%,
          0% 100%
    );
}

/* LEFT panel (Esteban): float DERECHO (simétrico) */
.left-panel.open .shape-curve-right {
    display: block;
    float: right;
    width: 25vw;
    height: 50vh;
    shape-margin: 5vw;
    shape-outside: polygon(
         80%   0%,
        100%   0%,
        100% 100%,
          0% 100%,
         31%  94%,
         61%  80%,
         76%  70%,
         88%  60%,
        100%  33%,
         97%  20%,
         90%  10%
    );
}

/* p: NO overflow:hidden (rompería shape-outside creando nuevo BFC) */
.side-panel.open .hidden-text p {
    overflow: visible;
}

/* ---- Flecha: 10% inferior ---- */
.side-panel.open .toggle-btn {
    position: relative !important;
    top: auto !important; bottom: auto !important; margin: 0 !important;
    pointer-events: auto; animation: none;
    flex-shrink: 0;
    height: 10%;
    display: flex; align-items: center; justify-content: center;
}
.right-panel.open .toggle-btn { align-self: flex-end;   width: 40%; }
.left-panel.open  .toggle-btn { align-self: flex-start; width: 40%; }
.left-panel.open  .toggle-btn .custom-arrow { transform: scaleX(-1); }
.right-panel.open .toggle-btn .custom-arrow { transform: scaleX(1);  }


/* ------------------------------------------------ */
/* SECCIÓN PROYECTOS                                */
/* ------------------------------------------------ */
.portfolio-section {
    width: 200vw; margin-left: -50vw;
    min-height: 100vh;
    border-top-left-radius: 100vw 25vh;
    border-top-right-radius: 100vw 25vh;
    background-color: rgb(84, 75, 129);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    position: relative; z-index: 50; 
    margin-top: -30vh; padding-top: 5px; padding-bottom: 40px;
}

.scroll-down-btn {
    background: none; border: none; cursor: pointer;
    width: 40px; height: 40px; margin-bottom: 20px; margin-top: 0px;
    animation: bounce-arrow 2s infinite ease-in-out;
    
    /* Fade out a medida que hacemos scroll! */
    opacity: calc(1 - (var(--scroll-progress) * 1.2));
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.vertical-arrow {
    width: 100%; height: 100%; fill: none; stroke: #fff; 
    stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; 
}

.portfolio-title {
    font-size: 2.2rem; font-weight: 500; letter-spacing: 0.15rem;
    color: #fff; text-transform: uppercase; margin-bottom: 3rem; margin-top: 0px;
    /* El texto se quedará pegado exactamente entre las esferas */
    position: sticky; top: 15vh; transform: translateY(-50%); z-index: 100;
}

.album-container {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2rem;
}

.vinyl-record {
    position: absolute;
    width: 80vw; max-width: 400px; aspect-ratio: 1;
    top: 0; left: 50%; transform: translateX(-50%);
    z-index: 1; opacity: 1;
}

.vinyl-record.is-playing {
    animation: fly-away 1.5s forwards ease-in-out;
}

@keyframes fly-away {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    40% { transform: translateX(10%) rotate(90deg); opacity: 1; }
    80% { transform: translateX(100vw) translateY(20vh) rotate(180deg) scale(0.5); opacity: 1; }
    100% { transform: translateX(100vw) translateY(20vh) rotate(180deg) scale(0.5); opacity: 0; }
}

.album-cover {
    width: 80vw; max-width: 400px;
    border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 4px;
    position: relative; z-index: 2;
}

.record-player {
    position: relative;
    width: 100%;
    max-width: 380px; /* Perfect retro player size */
    aspect-ratio: 120 / 90;
    margin-top: 1.5rem;
}

.player-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tonearm-overlay-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 40;
}

/* Vintage Toggle Switch Container */
.toggle-switch-container {
    position: absolute;
    bottom: 21%;
    right: 18%;
    display: flex;
    flex-direction: row; /* Align LED and switch horizontally! */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    gap: 12px;
    user-select: none;
    outline: none;
}

/* Power LED (No text label, placed horizontally next to switch) */
.retro-led {
    width: 9px;
    height: 9px;
    background: #3a0000; /* Dark red when OFF */
    border-radius: 50%;
    border: 1px solid #111;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 0.5px 0.5px rgba(255,255,255,0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

/* Active LED state (Vibrant retro red glow) */
.record-player.is-playing .retro-led {
    background: #ff3838;
    box-shadow: 0 0 8px #ff3838, 0 0 15px #ff3838, inset 0 1px 1px rgba(255,255,255,0.4);
}

/* Row containing labels and horizontal slot */
.switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Label for ON/OFF - Always yellow, never changes color */
.switch-txt-label {
    font-family: 'Bebas Neue', 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-yellow) !important;
    text-shadow: 0 0 4px rgba(254, 202, 87, 0.5);
}

/* Toggle Switch Housing (Horizontal black slot with metallic border) */
.toggle-switch-housing {
    position: relative;
    width: 32px;
    height: 14px;
    background: #0d0d0d;
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 0.5px 0 rgba(255,255,255,0.05);
    border: 1px solid #222;
    display: flex;
    align-items: center;
}

/* Metallic faceplate border for the slot */
.toggle-switch-housing::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 5px;
    background: linear-gradient(135deg, #444, #222 50%, #334);
    border: 0.5px solid #111;
    z-index: -1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* The metal lever cylinder (extends vertically like a real vintage toggle switch) */
.toggle-switch-lever {
    position: absolute;
    width: 8px;
    height: 18px;
    background: linear-gradient(to right, #ffffff 0%, #cccccc 40%, #666666 100%);
    border-radius: 4px;
    left: 2px; /* OFF position */
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 2px 0 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.7);
    transition: left 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s ease, box-shadow 0.25s ease;
}

/* When the record player is playing (ON state) */
.record-player.is-playing .toggle-switch-lever {
    left: 20px; /* Moves RIGHT to ON position */
    background: linear-gradient(to right, #ffffff 0%, #cccccc 40%, #666666 100%);
    box-shadow: -2px 0 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Spinning record and swoop in */
.vinyl-perspective-container {
    transform-origin: 55px 47.5px;
    transform: scaleY(0.306);
    display: block;
}

.spinning-record {
    transform-origin: 55px 47.5px;
    opacity: 0;
}

.spinning-record.is-dropping {
    animation: drop-vinyl 1.8s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes drop-vinyl {
    0% {
        opacity: 0;
        transform: translate(150px, -50px) scale(0.4) rotate(180deg);
    }
    40% {
        opacity: 0;
    }
    41% {
        opacity: 0.8;
        transform: translate(120px, -40px) scale(0.5) rotate(140deg);
    }
    85% {
        opacity: 1;
        transform: translate(-10px, -5px) scale(1.05) rotate(-15deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

.spinning-record.is-spinning {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition: opacity 0.5s ease;
}

@keyframes rotate-record {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tonearm Group swings from (86, 42) */
.tonearm-group {
    transform-origin: 86px 42px;
    transform: rotate(-18deg); /* Default (OFF): Swung off the record (to the right, onto the clip) */
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When playing, swing the needle onto the vinyl */
.record-player.is-playing .tonearm-group {
    transform: rotate(15deg); /* Playing (ON): Swung onto the record */
}

/* Z-INDEX MANAGEMENT */
.side-panel:not(.open) { z-index: 101; }

/* ------------------------------------------------ */
/* DISC-MODE: caras giran con el vinilo             */
/* Se activa al llegar a la sección PROYECTOS       */
/* ------------------------------------------------ */
.side-panel.disc-mode {
    animation: vinyl-spin 2s linear infinite !important;
}

.side-panel.disc-mode .panel-vinyl-svg,
.side-panel.disc-mode .avatar {
    animation: none !important;
}

.side-panel.disc-mode .panel-inner {
    /* Cancelamos el transform de scroll para que el avatar */
    /* quede centrado en el sphere/disco                    */
    transform: translate(0, 0) scale(1) !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-panel.disc-mode .hidden-text,
.side-panel.disc-mode .toggle-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease;
}

.side-panel.disc-mode .avatar {
    top: 50%;
    left: 50%;
    margin-top: -36px;  /* -half of 72px */
    margin-left: -36px;
    width: 72px;
    height: 72px;
    transform-origin: center center !important;
    transition: top 0.8s ease, left 0.8s ease, margin 0.8s ease, width 0.6s ease, height 0.6s ease;
    filter: none;
    z-index: 5;
}

/* ------------------------------------------------ */
/* SOPORTE PARA PANTALLAS ANCHAS (>= 900px)         */
/* ------------------------------------------------ */
@media (min-width: 900px) {
    /* 0. Forzar el ancho del contenedor central */
    .center-content {
        width: 300px !important;
        max-width: 300px !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 1. Geometría dinámica de los paneles */
    .side-panel {
        --w: calc(2250px - (1980px * var(--scroll-progress)));
        --h: calc(120vh - ((120vh - 270px) * var(--scroll-progress)));
        --top: calc(45% - (30% * var(--scroll-progress)));
        
        width: var(--w);
        height: var(--h);
        top: var(--top);
        cursor: default;
        pointer-events: auto !important; /* Habilitar clics por defecto */
    }

    .side-panel:not(.disc-mode):not(.open) {
        pointer-events: none !important; /* Desactivar clics SOLO en Home cerrado */
    }
    
    .left-panel {
        left: calc((1 - var(--scroll-progress)) * (50vw - 150px - var(--w)) + var(--scroll-progress) * (50vw - 435px));
    }
    
    .right-panel {
        right: calc((1 - var(--scroll-progress)) * (50vw - 150px - var(--w)) + var(--scroll-progress) * (50vw - 435px));
    }

    /* 2. Traslaciones internas del panel-inner (sin desalineación) */
    .left-panel .panel-inner,
    .right-panel .panel-inner {
        --tx: 0px !important;
        --ty: 0px !important;
        transform: translate(var(--tx), var(--ty)) scale(var(--scale)) !important;
    }

    /* 3. Contenedor de contenido de disco maximizado (alineado al borde visible) */
    .left-panel .panel-content-box {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: auto !important;
        right: 0 !important;
        width: calc(50vw - 150px) !important;
        height: 76vh !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        pointer-events: none !important;
    }
    
    .right-panel .panel-content-box {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 0 !important;
        right: auto !important;
        width: calc(50vw - 150px) !important;
        height: 76vh !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        pointer-events: none !important;
    }
    
    .right-panel .panel-content-box {
        clip-path: polygon(
            39%  0%,   24%  10%,  13%  20%,
             6%  30%,   1%  40%,   0%  50%,
             1%  60%,   6%  70%,  13%  80%,
            24%  90%,  39% 100%,
            100% 100%, 100%  0%
        ) !important;
        padding-left: calc(3.75vw + 5px) !important;
    }
    
    .left-panel .panel-content-box {
        clip-path: polygon(
             0%  0%,  0% 100%,
            61% 100%,  76%  90%,  87%  80%,
            94%  70%,  99%  60%,  100%  50%,
            99%  40%,  94%  30%,  87%  20%,
            76%  10%,  61%   0%
        ) !important;
        padding-right: calc(3.75vw + 5px) !important;
    }

    /* 4. Avatar (cuando no está en disc-mode) */
    .side-panel:not(.disc-mode) .avatar {
        position: relative !important;
        top: auto !important; left: auto !important; margin: 0 !important;
        width: auto !important;
        height: 28% !important;
        flex-shrink: 0;
        object-fit: contain;
    }
    
    .left-panel:not(.disc-mode) .avatar {
        transform: translateX(-3.5vw) !important;
    }
    
    .right-panel:not(.disc-mode) .avatar {
        transform: translateX(3.5vw) !important;
    }

    /* 5. Texto de biografía visible (desvaneciéndose en scroll) */
    .side-panel .hidden-text {
        opacity: calc(1 - var(--scroll-progress)) !important;
        visibility: visible !important;
        position: relative !important;
        top: auto !important; transform: none !important; margin: 0 !important;
        width: 100%;
        display: block !important;
        overflow: hidden;
    }
    
    .right-panel .hidden-text { padding-right: 2vw !important; }
    .left-panel .hidden-text { padding-left: 2vw !important; }

    /* 6. Formas del contorno del texto */
    .right-panel .shape-curve-left {
        display: block !important;
        float: left;
        width: 12vw !important;
        height: 50vh;
        shape-margin: 2vw !important;
    }
    
    .left-panel .shape-curve-right {
        display: block !important;
        float: right;
        width: 12vw !important;
        height: 50vh;
        shape-margin: 2vw !important;
    }

    /* 7. Desactivar flechas chevron únicamente cuando el panel esté cerrado */
    .side-panel:not(.open) .toggle-btn {
        display: none !important;
    }

    /* 8. Alineación de los discos de vinilo (anclados al borde visible) */
    .side-panel:not(.disc-mode) .panel-vinyl {
        width: var(--h) !important;
        height: var(--h) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .left-panel:not(.disc-mode) .panel-vinyl {
        right: 0 !important;
        left: auto !important;
    }

    .right-panel:not(.disc-mode) .panel-vinyl {
        left: 0 !important;
        right: auto !important;
    }

    .side-panel.disc-mode .panel-vinyl {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(1) !important;
        width: calc(100% - 4px) !important;
        height: calc(100% - 4px) !important;
    }

    /* 9. Corrección de disc-mode en desktop: centrar avatares en los discos giratorios */
    .side-panel.disc-mode .panel-inner {
        transform: translate(0, 0) scale(1) !important;
    }

    .side-panel.disc-mode .panel-content-box {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        clip-path: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .side-panel.disc-mode .avatar {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: -36px !important; /* -mitad de 72px */
        margin-left: -36px !important;
        width: 72px !important;
        height: 72px !important;
        transform: none !important;
        z-index: 5 !important;
    }

    /* 11. Estilos forzados para paneles abiertos (incluso en la sección de proyectos con scroll) */
    .side-panel.open {
        --w: 2250px !important;
        --h: 120vh !important;
        --top: 45% !important;
    }

    .left-panel.open {
        left: calc(50vw - 150px - var(--w)) !important;
    }

    .right-panel.open {
        right: calc(50vw - 150px - var(--w)) !important;
    }

    .side-panel.open .hidden-text {
        opacity: 1 !important;
    }
}

/* 10. Bloqueo de posición para pantallas ultra-anchas (>= 1200px) */
@media (min-width: 1200px) {
    .left-panel {
        left: calc((1 - var(--scroll-progress)) * (50vw - 150px - var(--w)) + var(--scroll-progress) * (50vw - 550px)) !important;
    }
    
    .right-panel {
        right: calc((1 - var(--scroll-progress)) * (50vw - 150px - var(--w)) + var(--scroll-progress) * (50vw - 550px)) !important;
    }
}

/* 12. Estilos para el carrusel de álbumes interactivo */
.album-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 540px; /* 400px de portada + espacio para flechas */
    gap: 1.5rem;
    z-index: 10;
}

.album-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 3;
}

.album-arrow svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.album-arrow:hover {
    background: #ffeca0;
    border-color: #ffeca0;
    color: #000000;
    box-shadow: 0 0 20px rgba(255, 236, 160, 0.6);
    transform: scale(1.1);
}

.prev-arrow:hover svg {
    transform: translateX(-2px);
}

.next-arrow:hover svg {
    transform: translateX(2px);
}

/* 13. Estilos premium para transiciones de color en Proyectos */
.portfolio-section {
    overflow: hidden; /* Evita que el ripple expansivo cause desbordamiento lateral */
    transition: background-color 0.5s ease; /* Transición suave de respaldo */
}

.color-ripple {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); /* Inicialmente invisible */
    transition: transform 2.5s cubic-bezier(0.15, 0.85, 0.35, 1); /* Transición majestuosa y lenta */
    z-index: 1; /* Detrás del tocadiscos y portada, delante del fondo original */
    pointer-events: none;
}

.color-ripple.is-expanded {
    transform: translate(-50%, -50%) scale(3500); /* Expande cubriendo toda la sección */
}

.record-player {
    z-index: 10 !important; /* Se mantiene arriba del color en expansión */
}

.album-wrapper {
    z-index: 10 !important; /* Se mantiene arriba de la expansión */
}