:root {
   
            --color-background: #000000;   /* Black */
            --color-primary-accent: #054ff0; /* Bright Blue */
            --color-secondary-accent: #dcfc73; /* Neon Green/Lime */
            --color-tertiary-accent: #e1d2f3; /* Lavender (Subtle Accent) */
            --color-white: #f9f8f3;        /* Light Cream Text */
            
        }


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-white);
    overflow-x: hidden;
    transition: background-color 0.8s ease;
}

/* Ocultar el cursor original en toda la web */
body, a, button {
    cursor: none !important;
}

.cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    pointer-events: none; /* Importante: para que no bloquee los clics */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
}

.cursor-star {
    font-size: 24px;
    color: #ffffff; /* Estrella negra */
    z-index: 2;
    position: relative;
    transition: transform 0.3s ease;
}

.cursor-glow {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #dcfc73; /* Tu verde neón */
    border-radius: 50%;
    filter: blur(15px);
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
    z-index: 1;
}

/* EFECTO DE DESTELLO AL PASAR POR ENLACES */
.cursor-follower.is-hovering .cursor-glow {
    opacity: 0.8;
    width: 45px;
    height: 45px;
}

.cursor-follower.is-hovering .cursor-star {
    transform: scale(1.5) rotate(45deg);
    color: #000;
}

header {
    transition: background 0.3s ease;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-primary-accent); /* Tu azul vibrante */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    /* Transición de salida tipo fundido a negro o hacia arriba */
    transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1), visibility 1s;
}

.preloader-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cinematic-star {
    font-size: 80px;
    color: #000000; /* ESTRELLA NEGRA */
    line-height: 1;
    margin-bottom: 20px;
    /* Animación de entrada: aparece de la nada y escala */
    animation: starEntry 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transform: scale(0);
    opacity: 0;
}

.cinematic-title {
    display: flex;
    gap: 10px;
}

.letter {
    display: inline-block;
    font-family: 'Inter', sans-serif; /* O una Serif elegante si prefieres */
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 0.5rem;
    color: #000000;
    opacity: 0;
    transform: translateY(10px);
    animation: letterFade 1s forwards;
}


/* Impacto Visual Hero */
.hero-visual {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    margin-top: 100px;
}

.hero-title-main {
    font-size: clamp(60px, 15vw, 7rem);
    line-height: 0.8;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.text-outline {
    -webkit-text-stroke: 1.5px #054ff0; /* Tu azul característico */
    color: transparent;
}

.hero-star-divider {
    color: #dcfc73; /* Tu verde neón */
    font-size: clamp(2rem, 5vw, 4rem);
    margin: 2rem 0;
    animation: starRotate 8s linear infinite;
}

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

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #054ff0; /* Azul Ada Bleu */
    font-weight: 700;
}

/* Estilos para About Me */
.text-ada-blue { color: #054ff0; font-weight: 800; }
.text-ada-neon { color: #dcfc73; }
.text-outline-white {
    -webkit-text-stroke: 1px white;
    color: transparent;
    font-weight: 900;
}

/* Recuadro Fun Facts con tu imagen de fondo */
.fun-facts-container {
    background-color: #054ff0;
    background-size: cover;
    background-position: center;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 15px 15px 0px #dcfc73; /* Sombra neón sólida */
    border: none;
}

.fun-fact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    color: white;
}

.about-highlight-box {
    border-left: 3px solid #054ff0;
    padding-left: 1.5rem;
    margin: 2rem 0;
}





/* Espaciado entre ADA y BLEU */
.letter-space { width: 20px; }

/* Delay escalonado para las letras */
.letter:nth-child(1) { animation-delay: 0.8s; }
.letter:nth-child(2) { animation-delay: 0.9s; }
.letter:nth-child(3) { animation-delay: 1.0s; }
.letter:nth-child(5) { animation-delay: 1.1s; }
.letter:nth-child(6) { animation-delay: 1.2s; }
.letter:nth-child(7) { animation-delay: 1.3s; }
.letter:nth-child(8) { animation-delay: 1.4s; }

/* ANIMACIONES */
@keyframes starEntry {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; filter: blur(10px); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}

@keyframes letterFade {
    to { opacity: 1; transform: translateY(0); }
}

/* Clase para el cierre */
.preloader-off {
    opacity: 0;
    visibility: hidden;
}


.nav-link {
    position: relative;
}

/* Hover underline effect */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--primary-accent); /* Make sure this variable is defined */
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* --- ESTADO POR DEFECTO: ESCRITORIO (Pantalla Grande) --- */
.portfolio-title {
    display: flex !important;
    flex-direction: row !important; /* Fuerza una sola línea */
    flex-wrap: nowrap !important;   /* Prohíbe que salte abajo */
    justify-content: center;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    font-size: 12vw; /* Tamaño para que quepa todo a lo ancho */
    line-height: 1;
    margin-top: 100px;
}

.portfolio-line {
    display: flex;
    flex-wrap: nowrap;
}

/* Color general para todas las letras (Blanco) */
.animated-letter {
    color: #ffffff !important; 
    display: inline-block;
}

/* Color específico solo para las estrellas/símbolos (Azul #054ff0) */
.animated-letter.symbol {
    color: #054ff0 !important;
}

/* --- ESTADO PARA MÓVIL (Pantalla Pequeña) --- */
@media (max-width: 768px) {
    .portfolio-title {
        flex-direction: column !important; /* Fuerza las dos líneas */
        flex-wrap: wrap !important;
        margin-top: 50px;
    }

    .portfolio-line {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .animated-letter {
        /* Hacemos la letra mucho más grande en móvil para que se vea bien */
        font-size: 22vw !important; 
        line-height: 0.8;
        margin: 5px 0 !important;
    }
}



.text-secondary-accent {
    color:#dcfc73;
}


        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--color-background);
            color: var(--color-white);
            overflow-x: hidden;
            transition: background-color 0.8s ease;
        }
        
        /* If the body is hidden, it prevents scrolling */
        body.menu-open {
            overflow: hidden;
        }

           .hero-section {
             margin-bottom: -150px;
             margin-top: -150px;
        }
        

        /* --- Layout & Typography --- */
        .page-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
            transition: opacity 0.5s ease;
           
        }

     
        @keyframes letterBounce {
            0% { opacity: 0; transform: translateY(50px) rotate(10deg) scale(0.9); }
            60% { opacity: 1; transform: translateY(-10px) rotate(-2deg) scale(1.05); }
            100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
        }

        .animated-letter {
            display: inline-block;
            opacity: 0;
            animation: letterBounce 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
            font-size: 180px; 
            line-height: 0.9;
            letter-spacing: -0.05em;
            font-weight: 900;
            margin-top: 200px;
            margin-bottom: 150px;
        }

 /* Navbar */
.custom-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 50px;
    z-index: 9999;
    display: flex;
    justify-content: center;
}

.nav-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo img {
    height: 50px;
    transition: transform 0.3s;
}

/* Estrella Interactiva */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-accent);
    width: 80px;
    height: 50px;
    padding: 0;
    z-index: 10001;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.star-icon {
    width: 100%;
    height: 100%;
}

.close-menu {
    position: absolute;
    top: 30px;
    right: 50px;
    background: none;
    border: none;
    color: var(--color-secondary-accent); /* Tu verde neón #dcfc73 */
    font-size: 50px; /* Grande para que se vea bien */
    cursor: pointer;
    z-index: 10002; /* Por encima del overlay */
    font-family: Arial, sans-serif;
    line-height: 1;
    transition: transform 0.3s ease;
}

.close-menu:hover {
    transform: scale(1.2);
}

/* Aseguramos que el overlay tenga el z-index correcto */
.menu-overlay {
    z-index: 10000;
}

/* Overlay del Menú */
.menu-overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Escondido a la derecha */
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu-overlay.open {
    right: 0;
}

.menu-links {
    list-style: none;
    text-align: left;
}

.menu-links li {
    margin: 30px 0;
    opacity: 0;
    transform: translateX(50px);
    transition: 0.4s ease;
}

.menu-overlay.open .menu-links li {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(0.1s * var(--i)); /* Efecto escalonado */
}

.menu-links a {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-num {
    font-size: 1.5rem;
    color: var(--color-primary-accent);
    vertical-align: super;
}

.menu-icon {
    color: var(--color-secondary-accent);
}

.menu-links a:hover {
    color: var(--color-secondary-accent);
    padding-left: 20px;
}

/* Scroll Up Button */
.scroll-up-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-primary-accent);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.scroll-up-btn.show {
    opacity: 1;
    visibility: visible;
}

.scroll-up-btn:hover {
    background: var(--color-secondary-accent);
    color: black;
}
        
   
           /* Estilo para los títulos de sección en About Me */



#about-details h2 {
    color: var(--color-white); /* */
}


@keyframes blink {
    0%, 100% { border-color: var(--color-primary-accent); }
    50% { border-color: transparent; }
}

/* Decoración para las listas de habilidades */
#about-details ul li {
    position: relative;
    padding-left: 15px;
}

#about-details ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-primary-accent); /* */
    font-weight: bold;
}

/* Contenedor de la ventana-estrella */
.star-window {
    width: 280px;
    height: 280px;
    background: white;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.190, 0.885, 0.8, 1.275);
    cursor: pointer;
}

.star-window:hover {
    transform: scale(2) rotate(5deg);
}

/* Contenedor del Slider dentro de la estrella */
.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.slider-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la imagen llene la forma de la estrella */
}


/* Botón View More */
.view-more-btn {
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.view-more-btn:hover {
    background: #dcfc73;
    color: #000000;
}

.highlighted-text {
    font-size: 20px;
    color: #dcfc73;
    font-weight: bold;
}


/* editorial.html */

.editorial-section {
    
    background-color: var(--color-background);
    transition: background-color 0.8s ease;
}

/* poster.html */

    .poster-masonry {
        column-count: 3;
        column-gap: 25px;
    }
    
    .poster-item {
        display: inline-block; /* Esto evita que el póster se rompa entre columnas */
        width: 100%;
        margin-bottom: 25px;
        position: relative;
    }

    @media (max-width: 1024px) { .poster-masonry { column-count: 2; } }
    @media (max-width: 600px) { .poster-masonry { column-count: 1; } }

   /* Overlay principal */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(15px);
    justify-content: center;
    align-items: center;
}

/* La X de cerrar - Prioridad máxima */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #dcfc73; /* Tu verde neón */
    font-size: 60px;
    cursor: pointer;
    z-index: 100010;
    line-height: 1;
    transition: transform 0.3s ease;
}

.lightbox-close:hover { transform: scale(1.2); }

/* Flechas laterales */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    padding: 30px;
    z-index: 100005;
    transition: color 0.3s ease;
}

.nav-btn:hover { color: #dcfc73; }
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Contenedor de imagen */
.lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 85%;
}

.lightbox-image {
    max-height: 80vh;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid rgba(255,255,255,0.1);
}

.lightbox-caption {
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 900;
}


/* footer */

.cinematic-footer {
    background-color: #000;
    padding: 100px 5% 20px 5%;
    color: var(--color-white);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
}


/* Enlaces de contacto */
.contact-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-around;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-item a {
    text-decoration: none;
    color: white;
    font-weight: 900;
    letter-spacing: 2px;
    transition: color 0.3s;
    font-size: 25px;
}

.contact-item a:hover {
    color: var(--color-primary-accent);
}

/* TEXTO GIGANTE (Impacto visual) */
.cinematic-footer {
    background-color: var(--color-primary-accent); /* TU AZUL #054ff0 */
    padding: 100px 5% 20px 5%;
    color: #000000; /* Texto base en negro para contraste sobre azul */
    position: relative;
    overflow: hidden;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 40px;
}

/* Estilo IDARTE */
.studies-info {
    font-family: 'Inter', sans-serif;
    max-width: 450px;
}

.school-name {
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    margin-bottom: 5px;
}

.degree {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Enlaces con el verde neón para que "salten" a la vista */
.contact-item a {
    text-decoration: none;
    color: #000;
    font-weight: 900;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: var(--color-secondary-accent); /* Verde neón al pasar el mouse */
}

.star-mini {
    color: #000;
}

/* ADA BLEU GIGANTE */
.footer-giant-text {
    margin: 60px 0;
    pointer-events: none;
}

.title-ada {
    font-size: clamp(5rem, 22vw, 30rem);
    font-weight: 950;
    line-height: 0.75;
    letter-spacing: -0.06em;
    margin: 0;
    text-align: center;
    color: #000; /* ADA en negro */
}

.white-text {
    color: var(--color-white); /* BLEU en tu blanco crema */
}

/* Barra inferior técnica */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}



/* Navegación de Proyectos */
.project-navigation {
    padding: 100px 5%;
    background-color: var(--color-background);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* Lo tira a la derecha */
}

.next-project-link {
    text-decoration: none;
    color: var(--color-white);
    display: inline-block;
    transition: all 0.4s ease;
}

.nav-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 0.8rem;
    color: var(--color-primary-accent); /* Tu azul */
    margin-bottom: 10px;
}

.nav-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.nav-title h2 {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

.outline-text {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-white);
}

.nav-arrow {
    margin-top: 20px;
    color: var(--color-secondary-accent); /* Verde neón */
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* EFECTO HOVER */
.next-project-link:hover .nav-arrow {
    transform: translateX(30px); /* La flecha se mueve a la derecha */
}

.next-project-link:hover .outline-text {
    color: var(--color-white);
    transition: 0.4s;
}




/* Responsivo */
@media (max-width: 768px) {
    .nav-title h2 { font-size: 4rem; }
    .nav-arrow svg { width: 60px; }
}