:root {
    --neon: #00f2ff;
    --black: rgba(0, 0, 0, 0.9);
}

body {
    margin: 0;
    background-color: #050505;
}

/* CONTENEDOR PADRE: Prioridad absoluta */
.cyber-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 60px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999 !important; 
    overflow: visible !important;
    border-bottom: 1px solid var(--neon);
}

/* BOTÓN "MENU" */
.mobile-trigger {
    display: block !important;
    color: var(--neon) !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px !important;
    text-shadow: 0 0 10px var(--neon);
    border: 1px solid var(--neon);
    padding: 8px 25px;
    cursor: pointer;
    background: rgba(0, 242, 255, 0.1);
    z-index: 10000001 !important; 
    letter-spacing: 2px;
}

/* EL MENÚ DESPLEGABLE */
.nav-menu {
    display: none;
    flex-direction: column !important;
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85vw !important;
    max-width: 400px;
    max-height: 85vh !important; /* Mantiene la altura máxima */

    /* --- CAMBIA ESTO --- */
    overflow-y: auto !important; /* <--- ACTIVA EL SCROLL VERTICAL */
    /* ------------------- */

    background: #050505 !important;
    border: 2px solid var(--neon) !important;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.4), 0 0 100px rgba(0, 0, 0, 1) !important;
    z-index: 9999999 !important;
    padding: 40px 0 60px 0 !important;
    gap: 15px !important;
}

/* Amaguem la barra de scroll per estètica, però mantenim la funció */
.nav-menu::-webkit-scrollbar {
    display: none;
}

/* Clase de activación */
.nav-menu.show-mobile {
    display: flex !important;
}

/* ÍTEMS */
.nav-item {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 15px 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--neon);
    font-size: 16px !important;
    transition: 0.3s;
}

.nav-item:hover {
    background: rgba(0, 242, 255, 0.15);
    color: var(--neon);
    transform: scale(1.05);
}

/* LÍNEA ELÉCTRICA */
.electric-line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--neon);
    box-shadow: 0 0 15px var(--neon);
    z-index: 10;
}

/* --- AJUSTS ESPECÍFICS PER A PC (Pantalles grans) --- */
@media (min-width: 1101px) {
    .nav-menu {
        max-width: 600px !important; 
        width: 50vw !important;
        
        /* AJUST CLAU PC: Més espai a sota (100px) perquè l'últim ítem respiri */
        padding: 60px 0 100px 0 !important;
        gap: 25px !important;
        
        border: 3px solid var(--neon) !important;
        box-shadow: 0 0 50px rgba(0, 242, 255, 0.3), 0 0 120px rgba(0, 0, 0, 1) !important;
        
        /* Limitem l'alçada perquè en PC no toqui mai el terra del monitor */
        max-height: 80vh !important;
    }

    .nav-item {
        font-size: 20px !important; 
        padding: 20px 0 !important;
        letter-spacing: 4px !important;
    }

    .mobile-trigger {
        font-size: 18px !important;
        padding: 12px 40px !important;
    }
}



/* ESTILS PER AL SUBMENÚ IGUALS AL TEU MENÚ */
.submenu-modal {
    display: none;
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.8); /* Fons semi-transparent */
    z-index: 100000000 !important;
    justify-content: center;
    align-items: center;
}

.submenu-modal.is-active {
    display: flex !important;
}

.submenu-content {
    background: #050505 !important;
    border: 2px solid var(--neon) !important;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.6);
    width: 85vw;
    max-width: 400px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.submenu-header {
    color: var(--neon);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--neon);
}

.submenu-btn {
    display: block;
    padding: 15px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    border: 1px solid rgba(0, 242, 255, 0.3);
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 14px;
}

.submenu-btn:hover {
    background: rgba(0, 242, 255, 0.15);
    color: var(--neon);
    border-color: var(--neon);
}

.close-text {
    color: #444;
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
    font-family: sans-serif;
}

/* FINS AQUI LA SECCIO BARRA DE MENU */

/* DESDE AQUI LA SECCIO TITOL MULTIVERSO*/

:root {
  --logo-top-pc: 1035px;   
  --logo-top-mob: 881px;
  --font-principal: 'FONT-DEMO', sans-serif;
}

.logo-container {
  position: absolute; 
  top: var(--logo-top-pc);
  left: 50%;
  transform: translateX(-50%); 
  z-index: 1000;
  width: 100%;
  text-align: center;
}

.logo-text {
  font-family: var(--font-principal) !important;
  font-size: 80px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 5px;
}

/* EFECTE DE FOC ULTRA-OPTIMITZAT */
.fuego {
  font-size: 140px;
  color: #fefcc9;
  font-weight: 900;
  display: inline-block;
  position: relative;
  z-index: 1;
  
  /* L'ombra base que no es mou (la més estable) */
  text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34;
}

/* Creem una "capa fantasma" amb les ombres complexes */
.fuego::after {
  content: "MULTIVERSO"; /* Ha de ser el mateix text */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: transparent; /* Només volem veure les seves ombres */
  
  /* Aquí posem les 6 ombres detallades */
  text-shadow: 0 0 20px #fefcc9, 
               15px -15px 35px #fefcc9, 
               -25px -25px 45px #feec85, 
               25px -45px 55px #ffae34, 
               -25px -65px 65px #ec760c, 
               0 -85px 75px #cd4606;
  
  /* L'animació ara només canvia l'OPACITAT i l'ESCALA, que és instantani */
  animation: flama 1.5s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes flama {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.03);
  }
}

/* RESPONSIVE MÒBIL (Exactament com el tenies) */
@media screen and (max-width: 768px) {
  .logo-container {
    top: var(--logo-top-mob);
  }
  .logo-text {
    font-size: 30px;
    letter-spacing: 2px;
  }
  .fuego {
    font-size: 55px; 
    display: block;  
    margin: 10px 0;
  }
  /* Ajustem el contingut del pseudo-element per al mòbil si cal */
  .fuego::after {
    content: "MULTIVERSO";
  }
}

/* FINS AQUI LA SECCIO TITOL MULTIVERSO*/

/* DESDE AQUI LA SECCIO FOTOGRAFIA FANTASMA*/

:root { 
  /* CONFIGURACIÓ FOTO MÒBIL (Ajusta aquí) */ 
  --foto-mob-ample: 311px; 
  --foto-mob-top: 488px; 
  --foto-mob-left: 50%; 
  /* Posa 50% per centrar o píxels per moure a un costat */ 
  --foto-mob-transform: translate(-50%, 0); 
  /* Manté el centrat horitzontal */ 
} 

/* 1. CONFIGURACIÓ PER A ORDINADOR */ 
@media screen and (min-width: 769px) { 
  .cyber-container { 
    position: absolute; 
    z-index: 999; 
    width: 639px; 
    top: 51%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    display: block !important; 
    /* Assegura que es vegi */ 
  } 
} 

/* 2. CONFIGURACIÓ PER A MÒBIL */ 
@media screen and (max-width: 768px) { 
  .cyber-container { 
    position: absolute !important; 
    display: block !important; 
    /* Força que aparegui si estaba oculta */ 
    z-index: 9999 !important; 
    /* Utilitzem les variables del root */ 
    width: var(--foto-mob-ample) !important; 
    top: var(--foto-mob-top) !important; 
    left: var(--foto-mob-left) !important; 
    transform: var(--foto-mob-transform) !important; 
    /* Neteja de residus de PC */ 
    right: auto !important; 
    bottom: auto !important; 
    margin: 0 !important; 
    max-width: 100vw !important; 
  } 
} 

/* 3. ESTILS VISUALS */ 
.cyber-photo-wrapper { 
  position: relative; 
  width: 100%; 
  cursor: pointer; 
  border: 1px solid #0f0; 
  background: #000; 
  overflow: hidden; 
} 

.cyber-photo { 
  width: 100% !important; 
  height: auto !important; 
  display: block !important;
  /* ANIMACIÓ AMB PAUSES I INTERFERÈNCIES */
  animation: glitch-irregular 3s steps(1) infinite;
}

/* L'ANIMACIÓ AMB PAUSES DE ~0.5s I SALTS RÀPIDS */
@keyframes glitch-irregular {
  /* PAUSA 1: Blanc i negre (~0.5s) */
  0%, 15% { filter: grayscale(100%); }
  
  /* RÀPID: Interferència */
  16% { filter: grayscale(0%); }
  18% { filter: grayscale(100%); }
  20% { filter: grayscale(0%); }
  
  /* PAUSA 2: Color (~0.5s) */
  21%, 35% { filter: grayscale(0%); }
  
  /* RÀPID: Interferència intensa */
  36% { filter: grayscale(100%); }
  37% { filter: grayscale(0%); }
  39% { filter: grayscale(100%); }
  41% { filter: grayscale(0%); }
  
  /* PAUSA 3: Blanc i negre (Més llarga) */
  42%, 65% { filter: grayscale(100%); }
  
  /* RÀPID: Salt sec */
  66% { filter: grayscale(0%); }
  68% { filter: grayscale(100%); }
  
  /* PAUSA 4: Color final */
  69%, 95% { filter: grayscale(0%); }
  
  /* Salt final per tancar el bucle */
  96%, 100% { filter: grayscale(100%); }
}


/* FINS AQUI LA SECCIO FOTOGRAFIA FANTASMA*/

/* DESDE AQUI LA SECCIO INTRODUCCIÓ STAR WARS */


/* --- CONTENIDOR PRINCIPAL (ESTIL MONITOR) --- */
    .terminal-multiverso {
        width: 90%;
        max-width: 650px;
        background-color: rgba(0, 20, 0, 0.75); /* Fons verd fosc translúcid */
        border: 2px solid #00ff00; /* Marjo verd brillant */
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); /* Resplendor */
        padding: 25px;
        border-radius: 8px;
        box-sizing: border-box;
        font-family: 'Courier New', Courier, monospace; /* Tipografia de terminal */
        
        /* 📍 POSICIONAMENT CENTRAL (Mode PC) */
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Centrat horitzontal perfecte */
        
        /* ↕️ AJUSTA L'ALÇADA EN PÍXELS PER A PC AQUÍ ↕️ */
        top: 1298px; /* Canvia aquest valor en px per pujar o baixar el quadre a l'ordinador */
        
        z-index: 999; /* Garanteix que es vegi per sobre del fons */
    }

    /* --- EFECTE DE LÍNIES DE MONITOR ANTIC (SCANLINES) --- */
    .terminal-multiverso::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        z-index: 2;
        background-size: 100% 4px, 6px 100%;
        pointer-events: none;
        border-radius: 6px;
    }

    /* --- TEXT VERD STAR WARS --- */
    .terminal-multiverso .terminal-text {
        color: #00ff00;
        text-shadow: 0 0 5px #00ff00;
        font-size: 1.15rem;
        line-height: 1.6;
        margin: 0;
        text-align: center; /* Text centrat a dins del quadre */
        white-space: pre-wrap;
    }

    /* --- CURSOR PARPADEJANT --- */
    .terminal-multiverso .cursor {
        display: inline-block;
        width: 10px;
        height: 18px;
        background-color: #00ff00;
        box-shadow: 0 0 5px #00ff00;
        animation: blinkTerminal 0.8s infinite;
        vertical-align: middle;
        margin-left: 2px;
    }

    @keyframes blinkTerminal {
        0%, 49% { background-color: #00ff00; }
        50%, 100% { background-color: transparent; }
    }

    /* --- 📱 AJUSTES RESPONSIVE (Mòbils) --- */
    @media (max-width: 768px) {
        .terminal-multiverso {
            width: 95%;
            padding: 15px;
            
            /* ↕️ AJUSTA L'ALÇADA EN PÍXELS PER A MÒBILS AQUÍ ↕️ */
            top: 214px; /* Canvia aquest valor en px per controlar l'alçada independentment en mòbils */
        }
        .terminal-multiverso .terminal-text {
            font-size: 1rem;
            line-height: 1.4;
        }
    }

/* FINS AQUI LA SECCIO INTRODUCCIÓ STAR WARS */


/* DESDE AQUI LA SECCIO LOGOTIPS PATROCINADORS */

:root {
    /* --- CONTROL PC --- */
    /* RECOMANACIÓ: Usa 'px' o 'vh' en lloc de '%' per evitar que balli a Netlify */
    --slider-top-pc: 3025px;      
    --slider-left-pc: 50%;     
    --logo-size-pc: 280px;      
    --glow-intensity: 40px;     

    /* --- CONTROL MÓVIL --- */
    --slider-top-movil: 3197px; 
    --logo-size-movil: 180px;

    /* --- TIEMPO --- */
    --speed: 27s; 
}

/* IMPORTANT: El body ha de ser el punt de referència */
body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Assegura que hi hagi espai per calcular la posició */
    overflow-x: hidden;
}

/* CONTENEDOR MAESTRO */
.ghost-display {
    /* Mantenim 'absolute' per poder-lo posar on vulguis */
    position: relative; 
    top: var(--slider-top-pc);
    left: var(--slider-left-pc);
    /* Això el centra perfectament sobre el punt que has triat */
    transform: translate(-50%, -50%); 
    
    width: var(--logo-size-pc);
    height: var(--logo-size-pc);
    z-index: 10;
}

.logo-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

/* EL LOGO FANTASMAGÓRICO */
.ghost-card {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: ghostApparition var(--speed) infinite ease-in-out;
}

.ghost-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ANIMACIÓN */
@keyframes ghostApparition {
    0% {
        opacity: 0;
        filter: blur(20px) brightness(3);
        transform: scale(0.5);
    }
    5% { 
        opacity: 1;
        filter: blur(0px) brightness(1.2) drop-shadow(0 0 var(--glow-intensity) #fff);
        transform: scale(1.1);
    }
    11% { 
        opacity: 1;
        filter: blur(0px) brightness(1);
        transform: scale(1);
    }
    15% { 
        opacity: 0;
        filter: blur(15px) brightness(0);
        transform: scale(1.4);
    }
    100% { opacity: 0; }
}

/* DELAYS (Es mantenen igual) */
.ghost-card:nth-child(1) { animation-delay: 0s; }
.ghost-card:nth-child(2) { animation-delay: calc(var(--speed) / 9 * 1); }
.ghost-card:nth-child(3) { animation-delay: calc(var(--speed) / 9 * 2); }
.ghost-card:nth-child(4) { animation-delay: calc(var(--speed) / 9 * 3); }
.ghost-card:nth-child(5) { animation-delay: calc(var(--speed) / 9 * 4); }
.ghost-card:nth-child(6) { animation-delay: calc(var(--speed) / 9 * 5); }
.ghost-card:nth-child(7) { animation-delay: calc(var(--speed) / 9 * 6); }
.ghost-card:nth-child(8) { animation-delay: calc(var(--speed) / 9 * 7); }
.ghost-card:nth-child(9) { animation-delay: calc(var(--speed) / 9 * 8); }

/* MODO RESPONSIVE */
@media (max-width: 768px) {
    .ghost-display {
        /* Aquí ajustem la posició per a mòbil de forma fixa */
        top: var(--slider-top-movil);
        width: var(--logo-size-movil);
        height: var(--logo-size-movil);
    }
}

/* FINS AQUI LA SECCIO LOGOTIPS PATROCINADORS */

/* DESDE AQUI LA SECCIO TEXT BIPOLAR GENIAL*/

@import url("https://googleapis.com");

/* --- CONFIGURACIÓN BASE DEL EFECTO --- */
.texto-animado {
  font-family: "Playfair Display", serif;
  line-height: 0.85;
  perspective: 1000px;
}

.word {
  opacity: 0;
  transform: rotateX(120deg);
  transform-origin: 50% 100%;
  transition: transform 1.5s cubic-bezier(0.14, 1.23, 0.33, 1.16), opacity 0.5s;
}

.contenedor-bipolar.visible .word {
  opacity: 1;
  transform: rotateX(0deg);
}

.contenedor-bipolar.visible .genial {
  transition-delay: 0.5s;
}

.bipolar { color: white; }
.genial { color: red; }

/* ===================================================
   1. POSICIONAMIENTO PC (UNA SOLA LÍNEA)
   =================================================== */
@media screen and (min-width: 769px) {
  .contenedor-bipolar {
    position: absolute;
    /* CANVI CLAU: Usa px en lloc de % per fixar la posició */
    top: 4328px;   /* Ajusta aquest número per pujar o baixar en PC */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    white-space: nowrap;
  }
  .texto-animado { font-size: 11rem; }
  .word { display: inline-block; margin: 0 20px; }
}

/* ===================================================
   2. POSICIONAMIENTO MÓVIL (STACKED)
   =================================================== */
@media screen and (max-width: 768px) {
  .contenedor-bipolar {
    position: relative;
    /* CANVI CLAU: Usa px per mòbil també */
    top: 2711px;   /* Ajusta aquest número per pujar o baixar en MÒBIL */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }
  .texto-animado { font-size: 5.5rem; }
  .word { display: block; margin: 10px 0; }
}

/* FINS AQUI LA SECCIO TEXT BIPOLAR GENIAL */


/* DESDE AQUI LA SECCIO FONS VIEWPORT */

body {
  margin: 0;
  min-height: 100vh;
  /* Fondo base: Azul muy oscuro casi negro */
  background: #020205; 
  overflow-x: hidden;
  color: white;
}

/* Capa 1: Nebulosas envolventes */
body::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200vw;
  height: 200vh;
  /* Mezcla de colores cósmicos con gradientes radiales */
  background: 
    radial-gradient(circle at 30% 40%, rgba(76, 0, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 60%);
  filter: blur(80px);
  z-index: -2;
  /* Animación lenta y rotativa para efecto envolvente */
  animation: deriva-espacial 20s infinite alternate ease-in-out;
  pointer-events: none;
}

/* Capa 2: Estrellas distantes */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Puntos pequeños y blancos para las estrellas */
  background-image: 
    radial-gradient(1px 1px at 10% 20%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 50% 40%, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 80% 10%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 25% 75%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 60% 85%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 90% 60%, #fff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 400px 400px; /* Tamaño del patrón de estrellas */
  z-index: -1;
  opacity: 0.5;
  animation: parpadeo-estelar 10s linear infinite;
  pointer-events: none;
}

/* Movimiento fluido de las nebulosas */
@keyframes deriva-espacial {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(10deg) scale(1.1);
  }
}

/* Parpadeo suave y movimiento lento de las estrellas */
@keyframes parpadeo-estelar {
  0% {
    background-position: 0 0;
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: -50px 50px;
    opacity: 0.4;
  }
}


/* FINS AQUI LA SECCIO FONS VIEWPORT */


/* DESDE AQUI LA SECCIO NORIA RELATOS */


@import url('https://googleapis.com');

/* 1. CARREGAR LA TEVA FONT (NOMÉS UN ARXIU) */
@font-face {
    font-family: 'FONT-DEMO'; 
    src: url('./DEMO.ttf'); /* Posa aquí el nom exacte i l'extensió (.ttf, .otf, etc.) */
    font-weight: normal;
    font-style: normal;
}

:root {
  --neon-blue: #00f3ff;
  --neon-purple: #bc13fe;
  --font-titulos: 'JAPON', sans-serif; /* Definimos una variable */
}


.view-window {
    height: 100vh;
    width: 100%;
    overflow-y: auto; /* Permet scroll real */
    overflow-x: hidden;
    position: relative;
    background: transparent;
    -webkit-overflow-scrolling: touch; /* Millora l'scroll en mòbils */
}

/* Opcional: Amaga la barra de scroll per estètica */
.view-window::-webkit-scrollbar {
    display: none;
}

.elevator-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  animation: entrada80 6s cubic-bezier(0.1, 0, 0.2, 1) forwards, noriaInfinita 3000s linear infinite 6s;
  transform: translateY(100vh);
  height: auto;
  /* --- AÑADE ESTA LÍNEA --- */
  will-change: transform;
}

/* 2. IMPULS INICIAL (INTACTE) */
@keyframes entrada80 {
    0% { transform: translateY(100vh); }   
    66% { transform: translateY(100vh); }  
    100% { transform: translateY(20vh); }  
}

/* 3. RITME NORMAL (S'ha corregit el -50% per evitar el salt amb 10 relats) */
@keyframes noriaInfinita { 
    0% { transform: translateY(20vh); } 
    100% { transform: translateY(calc(20vh - 30%)); } 
}

/* Espaiat entre relats lleugerament més compacte per a la nova velocitat */
.card {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.card:hover { 
    transform: scale(1.05); 
}

/* MARC HUD COMPACTE I PERFECTE */
.multiverse-frame {
    position: relative;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 243, 255, 0.2); /* Línia base molt suau */
    margin-bottom: 20px;
    display: inline-block; /* El marc s'ajusta a l'amplada del text */
    backdrop-filter: blur(5px);
}

/* CANTONADES PROPORCIONADES */
.corner {
    position: absolute;
    width: 8px;   /* Mida petita i exacta */
    height: 8px;  /* Mida petita i exacta */
    border: 2px solid var(--neon-blue);
    filter: drop-shadow(0 0 5px var(--neon-blue));
}

/* Posicionament exacte a les puntes */
.top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.electric-txt {
  font-family: 'FONT-DEMO', sans-serif; /* Usar el nombre definido en @font-face */
  color: #fff;
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--neon-blue);
  /* Añadir esto para suavizar el cambio de fuente */
  transition: font-family 0.3s ease;
}

/* AJUST EXTRA PER A MÒBILS MOLT PETITS */
@media (max-width: 400px) {
    .multiverse-frame {
        padding: 6px 10px;
    }
    .electric-txt {
        letter-spacing: 1px;
        font-size: 0.85rem;
    }
}

.photo-box {
    width: 85vw; max-width: 700px;
    line-height: 0; border: 1px solid var(--neon-blue);
    position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.photo-box img { width: 100%; height: auto; display: block; }

/* BOTÓ TERMINAR CONEXIÓN (RELATS) - COMPACTE */
.btn-cerrar {
    /* 1. POSICIONAMENT FIX I MIDA AUTO (Molt important) */
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: auto !important;   /* Evita que ocupi tota l'amplada */
    height: auto !important;  /* Evita que ocupi tota l'alçada */
    left: auto !important;
    top: auto !important;
    
    /* 2. DISSENY NEÓ */
    z-index: 1000000 !important;
    background: #000 !important;
    color: var(--neon-blue) !important;
    border: 2px solid var(--neon-blue) !important;
    padding: 10px 20px !important; /* Espaiat controlat */
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer !important;
    pointer-events: auto !important;
    border-radius: 5px;
    box-shadow: 0 0 15px var(--neon-blue);
    
    /* 3. BLOQUEIG D'ESTIRAMENT */
    align-self: flex-end !important; /* Per si el flex el vol estirar */
    flex-grow: 0 !important;         /* No deixis que creixi */
}

/* AJUST RESPONSIVE (80% de mida) */
@media screen and (max-width: 768px) {
    .btn-cerrar {
        padding: 8px 16px !important;  
        font-size: 0.65rem !important; 
        bottom: 20px !important;
        right: 20px !important;
    }
}

#full-screen-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none; 
    z-index: 999998;
    flex-direction: column;
    align-items: center;
    
    /* CANVI CLAU: El text començarà a dalt i només creixerà cap avall */
    justify-content: flex-start; 
    
    background-color: #020205;
    /* Donem un marge superior (20%) perquè no estigui enganxat al sostre al principi */
    padding: 20vh 10% 0 10% !important; 
    box-sizing: border-box;
    overflow-y: auto;
    pointer-events: auto !important;
}


/* L'espaiador de sota perquè el botó no tapi el final */
#full-screen-overlay::after {
    content: "";
    display: block;
    min-height: 40vh; 
    width: 100%;
    flex-shrink: 0;
}

/* EL BOTÓ (A la cantonada, sense bloquejar la resta) */
#full-screen-overlay .btn-cerrar {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: auto !important;
    height: auto !important;
    z-index: 999999 !important; /* Per sobre de tot */
    
    /* Disseny Neó */
    background: #000 !important;
    color: #00f3ff !important;
    border: 2px solid #00f3ff !important;
    padding: 10px 20px !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    cursor: pointer !important;
    pointer-events: auto !important; /* Permet que es pugui clicar */
    box-shadow: 0 0 15px #00f3ff;
    
    /* NOMÉS ES MOSTRA QUAN EL PARE ÉS FLEX */
    display: none; 
}

/* Quan l'overlay s'obre, el botó apareix */
#full-screen-overlay[style*="display: flex"] .btn-cerrar {
    display: block !important;
}

/* MÒBIL: Botó un 20% més gran que el 60% anterior (80% total) */
@media screen and (max-width: 768px) {
    #full-screen-overlay .btn-cerrar {
        padding: 8px 16px !important;
        font-size: 0.65rem !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* 1. CARREGAR LA TEVA FONT (NOMÉS UN ARXIU) */
@font-face {
    font-family: 'FONT-RELATOS'; 
    src: url('./FONT.ttf'); /* Posa aquí el nom exacte i l'extensió (.ttf, .otf, etc.) */
    font-weight: normal;
    font-style: normal;
}

#typewriter-text {
    /* Mantenemos tu base */
    font-family: 'FONT-RELATOS', sans-serif !important;
    font-size: clamp(1.1rem, 3.5vw, 1.8rem) !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 1.8 !important;
    font-weight: 300 !important;
    letter-spacing: 2px; /* Un poco de aire entre letras da mucha elegancia */

  white-space: pre-line; /* Esto hace que el HTML respete los "Enters" del texto */

  margin-top: 0 !important;
    margin-bottom: 40px !important;
    flex-shrink: 0;

    /* 1. Resplandor multinivel: crea una base sólida y un aura difusa */
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.9),  /* Brillo interno */
        0 0 12px rgba(255, 255, 255, 0.4), /* Brillo medio */
        0 0 25px rgba(255, 255, 255, 0.2)  /* Aura expandida */
        !important;

    /* 2. Animación de pulsación sutil (opcional) */
    animation: glow-pulse 3s ease-in-out infinite alternate;
}

/* Definición de la animación para que el texto "viva" */
@keyframes glow-pulse {
    from {
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.3);
        opacity: 0.9;
    }
    to {
        text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.5);
        opacity: 1;
    }
}


/* FINS AQUI LA SECCIO NORIA RELATOS */


/* DESDE AQUI LA SECCIO FOTOS NORIA PORTAFOLIO */

/* --- SECCIÓ GENERAL --- */
#seccion-portafolio {
    position: relative;
    width: 100%;
    background: transparent;
}

/* --- BANNER MÒBIL (FIXAT A 240px) --- */
.banner-portafolio {
    display: none; 
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 240px; 
    overflow: hidden;
    border-bottom: 3px solid #00ff00;
    box-shadow: 0 0 15px #00ff00;
}
.banner-portafolio img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .banner-portafolio { display: block; } }

/* --- ASCENSOR / NORIA (ULTRA-FLUID) --- */
.ascensor-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    will-change: transform;
    transform: translate3d(0,0,0);
    animation: pujarNoria 40s linear infinite;
}

.scrolling .ascensor-wrapper {
    animation-play-state: paused !important;
}

@keyframes pujarNoria {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* --- ÍTEMS Y MARCOS --- */
.item-noria {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0; /* Móvil */
    cursor: pointer;
}

.marco-neon-portafolio {
    border: 2px solid #b026ff;
    box-shadow: 0 0 15px #b026ff;
    padding: 10px;
    background: #000;
    width: 92%;
    max-width: 400px;
    box-sizing: border-box !important;
}

/* --- AJUSTOS PC (IGUALADOS A LA OTRA SECCIÓN) --- */
@media (min-width: 768px) {
    .item-noria { 
        margin: 40px 0; /* Espaciado equilibrado en PC */
    } 

    .marco-neon-portafolio { 
        width: auto; /* Permite que el marco se ajuste a la foto reducida */
        max-width: 85vw; 
        padding: 15px;
    }

    .foto-principal { 
        width: auto !important; /* Permitimos que el ancho sea automático */
        height: 73vh !important; /* Altura controlada como en la sección anterior */
        max-height: 650px !important; 
        display: block; 
        object-fit: contain;
        margin: 0 auto;
    }

    .titulo-neon-portafolio {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
}

/* --- TÍTULOS Y ANIMACIÓN NEÓN --- */
.titulo-neon-portafolio {
    font-family: 'FONT-DEMO', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.6rem;
    margin: 0 0 8px 0;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #b026ff, 0 0 30px #b026ff, 0 0 40px #b026ff;
    animation: neonFlicker 3s infinite alternate;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #b026ff, 0 0 30px #b026ff, 0 0 40px #b026ff;
    }
    20%, 22%, 24%, 55% {
        text-shadow: 0 0 2px #b026ff;
        color: rgba(255, 255, 255, 0.8);
    }
}

@media (max-width: 767px) {
    .titulo-neon-portafolio {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    /* En móvil mantenemos que ocupen el ancho de la pantalla */
    .foto-principal { width: 100% !important; height: auto !important; }
}

/* --- OVERLAY IMMERSIU --- */
.overlay-immersiu { display: none; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.98) !important; z-index: 99999999 !important; justify-content: center; align-items: center; }
.overlay-immersiu.activo { display: flex !important; }
.contenedor-video-neon { border: 3px solid #b026ff; box-shadow: 0 0 30px #b026ff; background: #000; max-width: 90%; max-height: 85%; display: flex; pointer-events: none; }
video#video-portafolio { width: 100%; max-height: 80vh; display: block; object-fit: contain; }

/* FINS AQUI LA SECCIO FOTOS NORIA PORTAFOLIO */

/* DESDE AQUI LA SECCIO FOTO PC UNIVERSO ALEIX */

/* 1. Escondido por defecto (Móviles) */

.pc-hero-banner {
    display: none;
}

@media (min-width: 1024px) {
    .pc-hero-banner {
        display: block;
        width: 100%;
        height: 950px;
        margin: 0;
        overflow: hidden;
        position: relative; /* Preparado por si quieres poner texto encima */
        
        /* EFECTO PARALLAX TIPO VENTANA */
        background-image: url("./INICIO/FOTO5.jpg");
        background-attachment: fixed; 
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* Nos aseguramos de que no haya restos de la imagen anterior */
    .pc-hero-banner img {
        display: none;
    }
}

/* FINS AQUI LA SECCIO FOTO PC UNIVERSO ALEIX */

/* DESDE AQUI LA SECCIO FOTO ENFERMO */

/* 1. Por defecto (PC y pantallas grandes), lo ocultamos */
.contenedor-foto-mobil {
    display: none;
}

/* 2. Solo cuando la pantalla sea de móvil, lo mostramos y aplicamos tus estilos */
@media screen and (max-width: 768px) { 
    .contenedor-foto-mobil { 
        display: block; /* Aquí lo hacemos visible */
        position: relative; 
        width: 100vw; 
        overflow: hidden; 
        border: 1px solid #00f2ff; 
        box-sizing: border-box; 
        box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff, 0 0 18px rgba(0, 242, 255, 0.5); 
    }

    .foto-nomes-mobil { 
        width: 100%; 
        display: block; 
        filter: brightness(1.1); 
        transition: filter 0.2s; 
    }

    /* Tu animación se queda igual aquí dentro */
    .activa-peli { animation: jitterPeli 0.4s infinite; }
    
    @keyframes jitterPeli { 
        0% { filter: sepia(0.7) brightness(1) contrast(1.2); }
        20% { filter: sepia(0.8) brightness(1.2) contrast(1.4); }
        40% { filter: sepia(0.7) brightness(0.9) contrast(1.1); }
        60% { filter: sepia(0.9) brightness(1.1) contrast(1.3); }
        80% { filter: sepia(0.7) brightness(0.8) contrast(1.2); }
        100% { filter: sepia(0.8) brightness(1) contrast(1.2); }
    }
}

/* FINS AQUI LA SECCIO FOTO ENFERMO */

/* DESDE AQUI LA SECCIO BIOGRAFIA COMPLETA */

/* =========================================
   SECCIÓ: EL MULTIVERSO BIOGRÁFICO (TURQUESA NEÓ)
   ========================================= */

/* 1. FONS DEL VIEWPORT */
.bg-multiverso {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    background: 
        radial-gradient(circle at 50% 50%, rgba(112, 0, 255, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, #05050a 0%, #110820 50%, #050505 100%);
}

/* 2. CONTENIDOR PC */
.container {
    max-width: 1200px;
    margin: 120px auto 50px auto; 
    padding: 20px;
    box-sizing: border-box;
}

.bio-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    background: rgba(15, 15, 25, 0.85);
    padding: 50px;
    border-radius: 25px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 242, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}

/* 3. FOTO AMB NEÓ VERD BLAU (MATEIX COLOR QUE EL FIL DE LA FOTO) */
.bio-image-box {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.bio-image-box img {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
    border: 2px solid rgba(0, 242, 255, 0.4);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.1);
}

/* EFECTE NEÓ VERD BLAU EN HOVER I ACTIVE */
.bio-image-box img:hover, 
.bio-image-box img:active {
    transform: scale(1.05) rotate(-3deg);
    border-color: #00f2ff; /* Color verd blau / cian pur */
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.6), 0 0 15px rgba(0, 242, 255, 0.8); 
    filter: brightness(1.1);
}

/* 4. TEXTOS I NEGRETES VERMELLES */
.bio-text h1 {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.1;
    background: linear-gradient(90deg, #00f2ff, #7000ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bio-text h2 {
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #00f2ff;
    margin-top: 35px;
}

.bio-text p {
    font-size: 1.25rem;
    line-height: 1.8;
    text-align: justify;
    color: #e0e0e0;
}

.bio-text strong {
    color: #ff0033; /* Vermell neó per contrastar */
    font-weight: 900;
    text-shadow: 0 0 8px rgba(255, 0, 51, 0.4);
}

.bio-text ul li {
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 0;
    list-style-type: "◈ ";
    color: #ccc;
}

/* 5. AJUST MÒBIL 366PX (FOTO MÉS AMUNT I CENTRADA) */
@media (max-width: 768px) {
    .container {
        margin-top: 60px; /* Mig cm respecte al menú mòbil */
        padding: 10px;
    }

    .bio-layout {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        align-items: center;
    }

    .bio-text {
        min-width: 100%;
        margin-left: 0;
    }

    .bio-text h1 {
        font-size: 1.8rem;
        text-align: center;
    }

    .bio-text p {
        font-size: 1.1rem;
        text-align: left;
    }

    .bio-image-box img {
        max-width: 250px;
    }
}

/* FINS AQUI LA SECCIO BIOGRAFIA COMPLETA */

/* DESDE AQUI LA SECCIO PAGINA BIPOLARIDAD */

/* --- DISSENY FINAL RIP XENI: NITIDESA, COLORS I CONTROL DE MIDES --- */

/* 1. SECCIÓ I FONS (ESTIL MULTIVERSO VERD) */
.seccion-bipolaridad {
    background: transparent;
    min-height: 100vh;
    padding: 140px 20px 80px 20px; 
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

/* 2. EL MARC ENVOLUPANT (CÀPSULA) */
.contenedor-neon {
    position: relative;
    width: 100%;
    max-width: 1100px;
    padding: 60px 40px;
    background: rgba(15, 15, 25, 0.85); /* Vidre fosc */
    backdrop-filter: blur(15px);
    border: 3px solid #39ff14;
    border-radius: 40px;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.3), inset 0 0 20px rgba(57, 255, 20, 0.2);
    animation: flotacionBio 6s infinite ease-in-out;
}

@keyframes flotacionBio {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* 3. TÍTOLS I TEXTOS */
.seccion-bipolaridad h1 {
    font-family: 'JAPANBIO', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3rem);
    text-align: center;
    background: linear-gradient(90deg, #39ff14, #00f2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* FORÇAR EL DESPLAÇAMENT CAP AVALL */
    padding-top: 40px !important; 
    margin-bottom: 40px;
    
    font-weight: 900;
    display: block; /* Assegura que el padding s'apliqui correctament */
}

.seccion-bipolaridad h3 {
    font-family: 'JAPANBIO', sans-serif;
    /* Pujat a 2.1rem (aprox +20% de l'original 1.7rem) */
    font-size: 2.1rem; 
    color: #39ff14;
    text-align: center;
    margin-top: 60px;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
    text-transform: uppercase;
}

.seccion-bipolaridad p {
    font-family: 'FONTBIO', sans-serif;
    /* Pujat a 1.7rem (aprox +20% de l'original 1.4rem) */
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: center;
    color: #e0e0e0;
    margin: 25px auto;
    max-width: 900px;
}

/* ... resta del codi igual (strong, gallery, etc.) ... */

/* 5. RESPONSIVE */
@media (max-width: 768px) {
    .seccion-bipolaridad { padding-top: 100px; }
    .contenedor-neon { padding: 30px 20px; }
    
    /* Mida P per a Mòbil: 1.95rem (aprox +40% sobre la base de 1.4rem) */
    .seccion-bipolaridad p { 
        font-size: 1.35rem !important; 
        text-align: left; 
    }

    /* Mida H3 per a Mòbil: 2.4rem (aprox +40% sobre la base de 1.7rem) */
    .seccion-bipolaridad h3 {
        font-size: 1.5rem;
    }

    .gallery-row { flex-direction: column; align-items: center; }
}

.seccion-bipolaridad strong {
    color: #00f2ff; /* Turquesa neó */
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
}

/* 4. GALERIA (2 FOTOS PER FILA) */
.gallery-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 50px 0;
    flex-wrap: wrap;
}

.photo-card {
    flex: 1;
    min-width: 280px;
    max-width: 450px;
    cursor: pointer;
}

.photo-inner {
    position: relative;
    width: 100%;
}

.photo-front, .photo-back {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 2px solid #39ff14;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
    display: block;
}

.photo-back {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-color: #00f2ff;
}

/* Activació per JS */
.photo-card.active .photo-back {
    opacity: 1;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.6);
}

/* 5. RESPONSIVE */
@media (max-width: 768px) {
    .seccion-bipolaridad { padding-top: 100px; }
    .contenedor-neon { padding: 30px 20px; }
    .seccion-bipolaridad p { font-size: 1.15rem; text-align: left; }
    .gallery-row { flex-direction: column; align-items: center; }
}

/* Primer "ensenyem" al navegador on és la font */
@font-face {
    font-family: "JAPANBIO"; 
    src: url("JAPAN.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FONTBIO'; /* El nom que tu vulguis posar-li */
    src: url('FONT.ttf') format('truetype'); /* Canvia la ruta pel nom del fitxer */
    font-weight: normal;
    font-style: normal;
}


/* FINS AQUI LA SECCIO PAGINA BIPOLARIDAD */


/* DESDE AQUI LA SECCIO PAGINA PORTAFOLIO 2 */

.pagina-portafolio {
    /* Mantenim les teves variables actuals */
    --neon-v: #fff200;
    --neon-glow: 0 0 5px #fff200, 0 0 10px rgba(255, 242, 0, 0.3);
    
    background-color: transparent;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

/* El Marc Neó Groc */
.pagina-portafolio .contenedor-maestro {
    width: 100%;
    max-width: 1100px;
    border: 1px solid var(--neon-v);
    box-shadow: inset var(--neon-glow), var(--neon-glow);
    border-radius: 40px;
    padding: 60px 40px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Afegeix overflow visible al header per seguretat */
.pagina-portafolio header {
    text-align: center; /* Manté el bloc general i h1 centrat */
    margin-bottom: 70px;
    overflow: visible !important; /* <--- Molt important */
}

.pagina-portafolio h1 {
    display: inline-block;
    width: 100%;
    font-family: 'DEMOFONT', sans-serif;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin: 0 0 15px 0;
    text-align: center; /* Es manté centrat per a impacte gràfic */

    /* CORRECCIÓ AQUÍ: Afegit el ";" que faltava i ajustat */
    line-height: 1.6 !important; 
    padding-top: 30px !important; 
    margin-top: -10px !important;
    overflow: visible !important;

    line-height: 1.8 !important;     /* Una mica més d'espai entre línies */
    display: inline-block;           /* Indispensable perquè el padding funcioni correctament amb el clip */
    vertical-align: middle;

    /* Forcem la desaparició de qualsevol color previ */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    /* Tècnica per aplicar el fons al text */
    background: linear-gradient(to right, #b2fab4 0%, #b2fab4 45%, #00ffff 55%, #00ffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* Millora de renderitzat */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.1) !important;
}


/* Ajust per al Mòbil */
@media (max-width: 850px) {
    .pagina-portafolio h1 {
        font-size: 1.8rem;
        margin-top: 60px; /* Baixem el text */
    }
    .pagina-portafolio header p {
        font-size: 1.35rem !important; /* Mida paràgraf mòbil */
        text-align: left; /* Força lectura d'esquerra a dreta en pantalles petites */
    }
}

.pagina-portafolio header p {
    font-family: 'FONT-RELATOS', sans-serif !important;
    color: #ffffff; /* Canviat a blanc pur */
    letter-spacing: 3px;
    font-size: 2rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Brillantor blanca suau */
    margin: 0;
    opacity: 1; /* Pugem l'opacitat perquè el blanc ressalti */
    text-align: left; /* ALINEAT A L'ESQUERRA: De costat a costat */
    word-break: normal; /* Evita trencaments estranys de paraules */
}

/* Color VERD per al strong dins del paràgraf */
.pagina-portafolio header p strong {
    font-family: 'FONT-RELATOS', sans-serif !important;
    color: #39ff14;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

/* Grid de fotos */
.pagina-portafolio .galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
}

/* Targeta de la foto */
.pagina-portafolio .foto-card {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pagina-portafolio .foto-wrapper {
    position: relative;
    width: 100%;
    border: 2px solid var(--neon-v);
    border-radius: 15px;
    background: #0a0a0a;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 10px rgba(255, 242, 0, 0.1);
}

.pagina-portafolio .foto-card.vertical .foto-wrapper {
    aspect-ratio: 3 / 4;
}

.pagina-portafolio .foto-card:not(.vertical) .foto-wrapper {
    aspect-ratio: 16 / 9;
}

.pagina-portafolio .foto-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.8s ease;
}

/* Títol ocult inicial */
.pagina-portafolio .titulo-elegant {
    font-family: 'FONT-DEMO', sans-serif;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.5s ease;
    pointer-events: none;
}

.pagina-portafolio .titulo-elegant span {
    color: white;
    font-size: 1.3rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    border: 1px solid var(--neon-v);
    padding: 12px 25px;
    text-align: center;
    box-shadow: inset 0 0 5px var(--neon-v);
}

/* ESTAT REVELAT */
.pagina-portafolio .foto-card.revelada .titulo-elegant {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.2);
}

.pagina-portafolio .foto-card.revelada .foto-wrapper {
    transform: scale(1.12);
    box-shadow: var(--neon-glow), 0 0 60px var(--neon-v);
    z-index: 50;
    border-width: 3px;
}

.pagina-portafolio .foto-card.revelada img {
    transform: scale(1.05);
}

/* Ajust Responsive Mòbil */
@media (max-width: 850px) {
    .pagina-portafolio .galeria-grid {
        grid-template-columns: 1fr;
    }

    .pagina-portafolio h1 {
        font-size: 2.2rem;
        /* Aumentamos el margen superior para bajarlo más */
        margin-top: 100px !important; 
        text-align: center; /* Es manté al centre en mòbils */
        
        /* Añadimos line-height para que la fuente tenga espacio arriba y abajo */
        line-height: 2.3; 
        
        /* Un poco de padding superior ayuda a que el degradado no se corte */
        padding-top: 10px; 
        
        letter-spacing: 4px; /* Reducimos un poco el espaciado para que no desborde */
    }

    .pagina-portafolio .contenedor-maestro {
        padding: 20px 15px;
        /* Aseguramos que el contenedor maestro no tenga overflow oculto que corte el h1 */
        overflow: visible !important; 
    }

    .pagina-portafolio header p {
        font-size: 1.65rem; /* Mida demanada per al mòbil */
        text-align: left; /* Es llegeix d'esquerra a dreta perfectament */
    }
}

@font-face {
    font-family: 'DEMOFONT';
    src: url('./JAPAN.otf');
    font-weight: normal;
    font-style: normal;
}

/* FINS AQUI LA SECCIO PAGINA PORTAFOLIO 2 */

/* DESDE AQUI LA SECCIO CAPSULA TEXT PRINCIPAL */

:root {
  --lila-neon: #bf00ff;
  --lila-faint: rgba(191, 0, 255, 0.3);
  
  /* Nous colors neó afegits */
  --azul-neon: #00f0ff;
  --verde-neon: #39ff14;

  /* --- CONTROL TOTAL POR PÍXELES --- */
  
  /* PC / Desktop */
  --pos-top-pc: 1060px;
  --pos-left-pc: 50%; /* 50% centra, o usa px para mover lateralmente */
  --ancho-capsula-pc: 700px;

  /* Móvil Vertical */
  --pos-top-mob: 450px;
  --ancho-capsula-mob: 340px;

  /* Móvil Horizontal (Landscape) */
  --pos-top-mob-hor: 40px;
  --ancho-capsula-mob-hor: 550px;
}

/* 1. ESTRUCTURA DE POSICIONAMIENTO */
.contenedor-principal-xeni {
  position: relative; /* Permite posicionamiento exacto sobre el fondo */
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center; /* Centrado base */
  pointer-events: none; /* Permite que se pueda clicar lo que hay detrás si es necesario */
}

.capsula-neon {
  pointer-events: auto; /* La cápsula sí es clicable */
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  text-align: center; /* Manté el títol i elements generals centrados por defecto */
  border-radius: 12px;
  box-sizing: border-box;
  
  /* El Hilo Neón Definido */
  border: 1px solid var(--lila-neon);
  box-shadow: 0 0 10px var(--lila-neon), inset 0 0 10px var(--lila-neon);
  
  /* Efecto 3D Estático */
  transform: perspective(1000px) rotateX(5deg);
}

/* 2. CONFIGURACIÓN PC */
@media screen and (min-width: 769px) {
  .contenedor-principal-xeni {
    top: var(--pos-top-pc);
    left: var(--pos-left-pc);
    transform: translateX(-50%); /* Ajuste para centrado perfecto si usas 50% */
  }
  .capsula-neon {
    width: var(--ancho-capsula-pc);
    padding: 50px;
  }
  /* Lectura neta d'esquerra a dreta a PC */
  .contenido-texto p {
    text-align: left;
  }
}

/* 3. CONFIGURACIÓN MÓVIL VERTICAL (LECTURA D'ESQUERRA A DRETA) */
@media screen and (max-width: 768px) {
  .contenedor-principal-xeni {
    top: var(--pos-top-mob);
    left: 50%;
    transform: translateX(-50%);
  }
  .capsula-neon {
    width: var(--ancho-capsula-mob);
    max-width: 90%; /* Margen de seguridad */
    padding: 30px;
    transform: none; /* Evitamos distorsión en pantallas pequeñas */
  }
  
  /* Força la lectura d'esquerra a dreta sense deformar les paraules */
  .contenido-texto p {
    text-align: left;
    word-break: normal; /* Manté les paraules senceres per a una lectura fluida */
  }
}

/* 4. CONFIGURACIÓN MÓVIL HORIZONTAL (LANDSCAPE) */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .contenedor-principal-xeni {
    top: var(--pos-top-mob-hor);
  }
  .capsula-neon {
    width: var(--ancho-capsula-mob-hor);
    padding: 20px;
    transform: scale(0.9); /* Reducción ligera para que quepa todo el texto en pantalla corta */
  }
  .contenido-texto p {
    text-align: left;
  }
}

/* Busca esto al final de tu CSS y añade el bloque de abajo: */
.hilo-neon-titulo {
  font-family: 'FONT-DEMO', sans-serif;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 55px; /* Mantiene la separación con el párrafo */
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(45deg, var(--azul-neon), var(--verde-neon));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.6)) 
          drop-shadow(0 0 15px rgba(57, 255, 20, 0.4));
}

/* === AFEGEIX AIXÒ AQUÍ SOTA === */
@media screen and (max-width: 768px) {
  .hilo-neon-titulo {
    margin-top: 2.3cm !important; /* Baixa el títol mig centímetre exactament en mòbils */
  }
}

.contenido-texto p {
  font-family: 'FONT-RELATOS', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 15px;
  opacity: 0.8;
}

/* ESTILO PARA LAS NEGRITAS (STRONG) EN VERDE NEÓN */
.contenido-texto p strong {
  color: var(--verde-neon);
  font-weight: bold;
  opacity: 1; /* Hace que resalte por encima de la opacidad del párrafo */
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.6); /* Brillo neón en las palabras clave */
}

.final {
  margin-top: 25px;
  font-size: 18px;
  color: var(--lila-neon);
  font-weight: bold;
  text-align: center; /* La teva signatura es manté centrada amb personalitat */
}

/* FINS AQUI LA SECCIO CAPSULA TEXT PRINCIPAL */

/* DESDE AQUI LA SECCIO CALENDARI EXPOSICIONS */

/* 2. VARIABLES I CONFIGURACIÓ GLOBAL */
:root {
    --neon-lila: #bc13fe;
    --neon-lila-glow: rgba(188, 19, 254, 0.4);
}

/* 3. CÀPSULA GLOBAL (Moure tot el bloc: títol + fotos) */
.seccio-global-wrapper {
    width: 100%;
    margin-top: 150px; /* AJUSTA AQUÍ PER BAIXAR TOT EL BLOC EN PC */
    margin-bottom: 100px;
}

/* TÍTOL H2 */
.calendar-title {
    text-align: center;
    font-family: 'DEMOFONT', sans-serif;
    color: #fff;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* L'ANY (SPAN) - GROC NEÓ I EL DOBLE DE GRAN */
.calendar-title span {
    color: #ffff00; /* Groc pur */
    font-size: 4rem; 
    /* Resplendor neó groc */
    text-shadow: 
        0 0 10px #ffff00, 
        0 0 20px #ffff00, 
        0 0 40px #ffcc00; 
    line-height: 3;
    display: inline-block;
}

/* AJUST PER A MÒBILS */
@media (max-width: 768px) {
    .calendar-title {
        font-size: 1.8rem;
        flex-direction: column;
        gap: 15px;
    }

    .calendar-title span {
        font-size: 4rem; 
        text-shadow: 0 0 10px #ffff00, 0 0 25px #ffcc00;
    }
}

/* 5. CONTENIDOR DE LES TARGETES */
.expo-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 6. LA TARGETA (EXPO-CARD) */
.expo-card {
    display: flex;
    flex-direction: row; /* Desktop: Foto a l'esquerra, text a la dreta */
    background: rgba(10, 10, 10, 0.9);
    border-radius: 15px;
    overflow: hidden;
    
    /* Marc lila neó permanent */
    border: 2px solid var(--neon-lila);
    box-shadow: 0 0 15px var(--neon-lila-glow), inset 0 0 10px var(--neon-lila-glow);
    
    transition: transform 0.3s ease;
}

.expo-card:hover {
    transform: translateY(-5px);
}

/* 7. IMATGE I INFORMACIÓ */
.expo-img {
    width: 40%;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    border-right: 2px solid var(--neon-lila);
}

.expo-info {
    width: 60%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.expo-info h3 {
    font-family: 'DEMOFONT', sans-serif;
    color: #fff;
    text-shadow: 0 0 8px var(--neon-lila);
    margin: 10px 0;
    font-size: 1.8rem;
}

/* Aplicació de la font descarregada a P i SPAN */
.expo-info p, 
.expo-info .date,
.expo-info .status {
    font-family: 'LaMevaFontPersonalitzada', sans-serif;
    color: #e0e0e0;
    line-height: 1.5;
}

/* 8. MODE RESPONSIVE (MÒBILS) */
@media (max-width: 768px) {
    
    /* Control d'alçada forçat per a mòbil */
    .seccio-global-wrapper {
        margin-top: 0 !important;
        padding-top: 100px !important; /* AJUSTA AQUÍ PER BAIXAR EL BLOC EN MÒBIL */
    }

    .calendar-title {
        font-size: 1.8rem;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .calendar-title span {
        margin-left: 0;
    }

    .expo-card {
        flex-direction: column !important; /* Foto dalt, text baix */
        text-align: center !important;
        width: 95%;
        margin: 0 auto;
    }

    .expo-img {
        width: 100% !important;
        height: 220px !important;
        border-right: none !important;
        border-bottom: 2px solid var(--neon-lila) !important;
    }

    .expo-info {
        width: 100% !important;
        padding: 25px !important;
        align-items: center !important;
    }

    .expo-info h3 {
        font-size: 1.4rem !important;
        width: 100% !important;
    }
    
    .expo-info p, 
    .expo-info .date,
    .expo-info .status {
        width: 100%;
        margin: 5px 0;
    }
}

/* FINS AQUI LA SECCIO CALENDARI EXPOSICIONS */

/* DESDE AQUI LA SECCIO EFECTES FOTOS PAGINA PRINCIPAL */

   /* El contenidor ha de tenir overflow hidden perquè res surti de la foto */
    #wrapper-efecte {
        position: relative;
        overflow: hidden;
        display: inline-block; /* O el que tinguis per ajustar-lo a la imatge */
        transition: transform 0.8s ease-in-out;
    }

    @keyframes batecInternSang {
        0% { 
            filter: brightness(0.7) contrast(1.1) sepia(0);
            transform: scale(1);
        }
        50% { 
            /* Tot passa DINS de la foto: s'enfosqueix cap al vermell i puja el contrast */
            filter: brightness(0.5) contrast(2) sepia(1) hue-rotate(-50deg) saturate(5); 
            transform: scale(1.03); 
        }
        100% { 
            filter: brightness(0.7) contrast(1.1) sepia(0);
            transform: scale(1);
        }
    }

    .reproduint-dimoni {
        animation: batecInternSang 4s infinite ease-in-out;
    }

    /* Efecte de "pols de sang" encara més immersiu dins de la foto */
    .reproduint-dimoni::after {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: radial-gradient(circle, rgba(138, 3, 3, 0) 30%, rgba(138, 3, 3, 0.4) 100%);
        pointer-events: none;
    }


       /* Efecte visual de pel·lícula vella */
    @keyframes vellaPeli {
        0% { filter: sepia(0.8) brightness(1) contrast(1.1); }
        10% { filter: sepia(0.8) brightness(1.1) contrast(1.2); }
        20% { filter: sepia(0.8) brightness(0.9) contrast(1.1); }
        30% { filter: sepia(0.9) brightness(1.2) contrast(1.3); }
        40% { filter: sepia(0.8) brightness(0.95) contrast(1.1); }
        50% { filter: sepia(0.8) brightness(1.15) contrast(1.2); }
        60% { filter: sepia(0.9) brightness(1) contrast(1.1); }
        70% { filter: sepia(0.8) brightness(1.2) contrast(1.3); }
        80% { filter: sepia(0.8) brightness(0.9) contrast(1.1); }
        90% { filter: sepia(0.9) brightness(1.1) contrast(1.2); }
        100% { filter: sepia(0.8) brightness(1) contrast(1.1); }
    }

    /* Apliquem el parpelleig i un lleuger tremolor */
    .efecte-vella-peli {
        animation: vellaPeli 0.5s infinite;
        /* Opcional: un lleuger tremolor de la imatge */
        position: relative;
    }

    /* Afegim soroll/gra a sobre de la foto (opcional però molt immersiu) */
    .efecte-vella-peli::after {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: url('https://transparenttextures.com');
        opacity: 0.2;
        pointer-events: none;
    }

    /* FINS AQUI LA SECCIO EFECTES FOTOS PAGINA PRINCIPAL */

    
    /* DESDE AQUI LA SECCIO FOTOGRAFIA PIANO */

/* --- CONFIGURACIÓ PC --- */
.piano-wrapper {
    position: relative;
    
    /* CONTROL D'ALTURA REAL (Evita el buit invisible de sota) */
    margin-top: 1141px; 
    
    /* CENTRAT HORITZONTAL AUTOMÀTIC */
    left: 50%;
    transform: translateX(-50%); 
    
    /* MIDES PC */
    width: 800px;
    height: 500px;
    
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
    
    /* MARCO NEÓ FIX (Blanc subtil) */
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.2);
    
    transition: all 0.8s ease;
    z-index: 999;
}

/* QUAN ESTÀ ACTIU (ON) */
.piano-wrapper.activo {
    transform: translateX(-50%) scale(1.05); 
    border: 2px solid #fff;
    /* Neó més intens en encendre's */
    box-shadow: 0 0 35px #fff, inset 0 0 15px #fff;
}

/* --- CONFIGURACIÓ MÒBIL (CORREGIDA SENSE ESPAIS BUITS) --- */
@media screen and (max-width: 768px) {
    .piano-wrapper {
        /* Centrat horitzontal */
        left: 50%;
        transform: translateX(-50%); 
        
        /* Control d'altura real per a mòbils */
        margin-top: 489px;  
        
        /* Mides reactives per a pantalles petites */
        width: 90%; 
        max-width: 370px; 
        height: 230px;
    }
    
    .piano-wrapper.activo {
        /* Mantenim el centrado al aplicar el escalado */
        transform: translateX(-50%) scale(1.05);
    }
}

/* LA FOTO I EL ZOOM INTERN */
.piano-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
    transition: transform 3.5s ease, filter 1.5s ease;
}

.piano-wrapper.activo .piano-foto {
    transform: scale(1.25);
    filter: brightness(1.2);
}

/* NOTES MUSICALS */
.nota-musical {
    position: absolute;
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 0 15px #fff, 0 0 30px #fff;
    pointer-events: none;
    z-index: 1001;
    animation: flotarNota 4.5s ease-out forwards;
}

@keyframes flotarNota {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-220px) rotate(25deg) scale(1.5); opacity: 0; }
}


/* FINS AQUI LA SECCIO FOTOGRAFIA PIANO */

/* DESDE AQUI LA SECCIO PÀGINA CEMENTIRIS (MUERTE) */

:root {
  --font-titols: 'FONT-DEMO', Gadget, sans-serif;
  --neon-azul: #00f3ff;
  --neon-lila: #d800ff;
  --neon-rojo: #ff0000;
}

#seccion-muerte {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: transparent;
}

/* 1. BANNER FIX MÒBIL */
#seccion-muerte .banner-responsive {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 240px;
  z-index: 1000;
  border-bottom: 5px solid var(--neon-rojo);
  box-shadow: 0 5px 25px rgba(255, 0, 0, 0.8);
  background: #000;
  overflow: hidden;
}

#seccion-muerte .banner-responsive img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

@media (max-width: 768px) {
  #seccion-muerte .banner-responsive {
    display: block;
  }
  #seccion-muerte .ascensor-wrapper {
    padding-top: 260px;
  }
}

/* 2. ANIMACIÓ ASCENSOR */
.ascensor-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: subirNoria 152s linear infinite;
  will-change: transform;
}

@keyframes subirNoria {
  0% { transform: translateY(80vh); }
  100% { transform: translateY(-50%); }
}

@media (max-width: 768px) {
  @keyframes subirNoria {
    0% { transform: translateY(40vh); }
    100% { transform: translateY(-50%); }
  }
}

.pausar-animacion {
  animation-play-state: paused !important;
}

/* 3. TÍTOLS I FOTOS (ADAPTACIÓN PC) */
.item-noria {
  margin: 40px 0; /* Margen reducido en PC para mejor encuadre */
  cursor: pointer;
  text-align: center;
}

.titulo-neon {
  font-family: var(--font-titols);
  color: #fff;
  text-shadow: 0 0 10px var(--neon-azul), 0 0 20px var(--neon-azul);
  margin-bottom: 12px;
  font-size: 1.8rem; /* Ligeramente más pequeño para ahorrar espacio */
  text-transform: uppercase;
}

.marco-neon-foto {
  padding: 15px;
  border: 3px solid #fff;
  box-shadow: 0 0 25px var(--neon-azul);
  display: inline-block;
  background: rgba(0,0,0,0.4);
}

.foto-principal {
  width: auto;
  height: 60vh; /* Reducido de 70vh a 60vh para que quepa entera en PC */
  max-width: 85vw;
  max-height: 600px; /* Límite de seguridad para pantallas muy grandes */
  display: block;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 4px;
}

/* 4. OVERLAY VÍDEO IMMERSIU GLOBAL */
.video-immersiu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000;
  z-index: 999999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.video-immersiu-overlay.activo {
  visibility: visible;
  opacity: 1;
}

.marco-video-lila {
  width: 100vw;
  height: 100vh;
  border: 2px solid var(--neon-lila);
  box-shadow: inset 0 0 30px var(--neon-lila), 0 0 50px var(--neon-lila);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  box-sizing: border-box;
}

#video-principal {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 5. AJUSTS RESPONSIVE MÒBIL FOTOS */
@media (max-width: 768px) {
  .item-noria {
    margin: 60px 0;
  }
  .foto-principal {
    width: 85vw;
    height: auto;
    max-height: 55vh;
  }
  .titulo-neon {
    font-size: 1.4rem;
  }
}

/* FINS AQUI LA SECCIO PÀGINA CEMENTIRIS (MUERTE) */

/* DESDE AQUI LA SECCIO PÀGINA CONTACTO GRACIAS Y FORMULARIO */

/* 1. SEPARACIÓN DEL MENÚ: Añadimos margen superior */
.contacto-multiverso {
    background: transparent;
    padding: 60px 20px;
    margin-top: 80px; 
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: normal; /* <--- CAMBIADO: Evita conflictos de centrado con el grid */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
}

.contenedor-contacto {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto; /* <--- AÑADIDO: Fuerza el centrado horizontal perfecto en pantalla */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}


/* --- COLUMNA TEXTO (Efecto Cristal) --- */
.columna-texto {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px); /* Efecto cristalizado */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.titulo-fantastico {
    font-family: 'FONT-DEMO', sans-serif; /* Tu fuente personalizada */
    font-size: 4.8rem; /* <--- AUMENTADO (Antes 2.5rem) */
    background: linear-gradient(45deg, #00ffcc, #c77dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
    letter-spacing: 2px;
    line-height: 1.2;
}

.subtitulo {
    color: #b0a8bf;
    font-size: 1.3rem; /* <--- AUMENTADO (Antes 1rem) */
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Lista de motivos */
.motivos-lista {
    margin-bottom: 35px;
}

.motivo-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 12px;
    border-left: 3px solid #c77dff;
}

.icono-motivo {
    color: #00ffcc;
    font-size: 1.2rem;
    margin-top: 3px;
}

.motivo-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e2dbec;
}

/* --- BOTONES DE ENLACE DIRECTO (Escritorio) --- */
.botones-contacto {
    display: flex;
    gap: 40px; /* <--- AUMENTADO: Antes 20px. Da el doble de espacio horizontal */
    flex-wrap: wrap;
}



.btn-contacto {
    flex: 1;
    min-width: 180px;
    padding: 14px 20px;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* WhatsApp Estilo Eléctrico */
.btn-contacto.whatsapp {
    background: transparent;
    color: #25d366;
    border: 2px solid #25d366;
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.2);
}

.btn-contacto.whatsapp:hover {
    background: #25d366;
    color: #000;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
    transform: translateY(-3px);
}

/* Email Estilo Galáctico */
.btn-contacto.email {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.btn-contacto.email:hover {
    background: #ffffff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
}

/* Adaptación y optimización para Teléfonos Móviles */
@media (max-width: 768px) {
    /* FORZAMOS QUE NADA SE SALGA DE LA PANTALLA */
    .contacto-multiverso {
        padding: 40px 15px; /* Reducimos un poco el margen en los bordes del móvil */
        box-sizing: border-box; /* Asegura que el padding no estire la pantalla */
        overflow: hidden; /* Corta cualquier brillo o elemento que sobresalga */
    }

    .contenedor-contacto {
        grid-template-columns: 1fr; /* Pone la foto arriba y el texto abajo */
        gap: 35px;
        width: 100%;
        max-width: 100%; /* Evita que el contenedor sea más ancho que el móvil */
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .marco-fotografico {
        transform: none; /* Quitamos la inclinación 3D en móvil */
        width: 100%;
        box-sizing: border-box;
    }

       .botones-contacto {
        flex-direction: column; 
        gap: 35px !important; /* <--- AUMENTADO: Antes 25px. Da más espacio vertical en móviles */
        width: 100%;
        margin-top: 15px; }

    /* TEXTO MÁS GRANDE para los botones de acción */
    .btn-contacto {
        font-size: 1.1rem; 
        padding: 16px 24px; 
        width: 100%; /* Ocupan todo el ancho de forma limpia */
        min-width: 0 !important; /* <--- ELIMINA el mínimo que empujaba el diseño a la derecha */
        box-sizing: border-box;
    }

    /* Aumentamos el título del portal */
    .titulo-fantastico {
        font-size: 3rem; /* <--- BAJADO de 4.2rem a 3rem. 4.2rem es demasiado grande para móviles estándar y rompe el margen */
        word-break: break-word; /* Si el título es muy largo, se corta de forma segura */
    }

    /* TEXTO MÁS GRANDE para los motivos de contacto */
    .motivo-item p {
        font-size: 1.1rem; 
        line-height: 1.6;  
    }
    
    .motivo-item strong {
        font-size: 1.15rem; 
    }
}

/* Adaptamos el marco al video manteniendo tus efectos */
.marco-video {
    /* Copia exacta de tus estilos anteriores de .marco-fotografico */
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 204, 0.4); 
    box-shadow: 
        0 0 10px rgba(0, 255, 204, 0.2),  
        0 0 25px rgba(0, 255, 204, 0.15), 
        inset 0 0 15px rgba(0, 255, 204, 0.2); 
    transform-origin: center;
    transform: perspective(1000px) rotateY(5deg); 
    transition: all 0.5s ease;
    cursor: pointer;
}

/* Mantenemos tus efectos Hover en el nuevo contenedor */
.marco-video:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
    border-color: rgba(0, 255, 204, 0.8);
    box-shadow: 
        0 0 15px rgba(0, 255, 204, 0.4),
        0 0 35px rgba(0, 255, 204, 0.3),
        inset 0 0 20px rgba(0, 255, 204, 0.3);
}

.marco-video:hover .efecto-brillo {
    left: 125%;
}

/* Ajuste del elemento video */
.marco-video video {
    width: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.2) brightness(0.9);
}

/* Botón flotante de Play/Pause */
.btn-reproductor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #00ffcc;
    color: #00ffcc;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10; /* Por encima del brillo */
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
}

.btn-reproductor:hover {
    background: #00ffcc;
    color: #000;
    scale: 1.1;
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.8);
}


/* Desactivar inclinación en móviles igual que hiciste con la foto */
@media (max-width: 768px) {
    .marco-video {
        transform: none;
        width: 100%;
    }
}

/* --- CORRECCIÓN PARA MÓVILES Y ESCRITORIO --- */

/* 1. Cuando el video se está reproduciendo, el botón se vuelve invisible */
.marco-video.reproduciendo .btn-reproductor {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none; /* Evita que interfiera con los toques en la pantalla */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 2. En escritorio, si el usuario pasa el ratón por encima MIENTRAS se reproduce, reaparece sutilmente */
@media (min-width: 769px) {
    .marco-video.reproduciendo:hover .btn-reproductor {
        opacity: 0.8 !important;
        visibility: visible !important;
    }
}

/* FINS AQUI LA SECCIO PÀGINA CONTACTO Y FORMULARIO */

/* DESDE AQUI LA SECCIO PÀGINA PAPA */

/* SEPARADOR INVISIBLE INFAVLIABLE (PC): Obre espai real a la força sota el menú */
.papa-separador-forcat-pc {
    display: block;
    width: 100%;
    height: 180px; 
    visibility: hidden; 
    clear: both;
}

/* BANNER EXCLUSIU EN MÒBILS */
.banner-papa-contenedor {
    display: none; 
}

/* CONTENEDOR CENTRAL: Centrat perfecte de la narrativa en PC */
.seccion-papa-multiverso {
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px 40px 80px 40px; 
    box-sizing: border-box;
}

/* GRID DE CAIXES NARRATIVES */
.contenedor-papa-bloques {
    display: flex;
    flex-direction: column;
    gap: 100px; 
}

/* L'ENVOLTORI 3D (Efecte Caixa de Cristall Flotant) */
.papa-caixa-3d {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    padding: 50px; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    
    transform: perspective(1200px) rotateX(1deg);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.papa-caixa-3d:hover {
    transform: perspective(1200px) rotateX(0deg) translateY(-5px);
    border-color: rgba(0, 255, 204, 0.3);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 40px 80px rgba(0, 255, 204, 0.08);
}

/* TÍTULS DISSOLTS EN DEGRADAT DE DOS COLORS */
.papa-titulo-degradado {
    font-family: 'FONT-DEMO', sans-serif;
    font-size: 4.5rem;
    line-height: 1.3;
    margin: 0;
    letter-spacing: 1px;
    background: linear-gradient(45deg, #00ffcc 0%, #c77dff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TEXTOS NARRATIUS */
.papa-texto {
    font-family: 'FONT-RELATOS', sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #b9b2c7;
    margin: 0;
}

/* PARAULES EN NEGRETA BRILLANTS EN VERD NEÓ */
.papa-resaltado {
    color: #00ffcc;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

/* GRID DE FOTOGRAFIES SIMÈTRIQUES */
.papa-galeria-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 10px;
}

/* TARGETES MULTIMÈDIA */
.papa-tarjeta-foto {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background: #000000;
    border: 2px solid rgba(199, 125, 255, 0.12);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* EFECTE OMBRA MISTERIOSA */
.papa-img-completa {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; 
    opacity: 0.35; 
    filter: grayscale(100%) brightness(0.25) contrast(1.2);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.papa-tarjeta-foto:hover {
    border-color: rgba(0, 255, 204, 0.4);
    transform: scale(1.01);
}

.papa-tarjeta-foto:hover .papa-img-completa {
    opacity: 0.55;
    filter: grayscale(60%) brightness(0.45) contrast(1.1);
}

/* L'INDICADOR VISUAL DE CLIC */
.papa-indicador-clic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 255, 204, 0.6);
    font-size: 1.8rem;
    pointer-events: none; 
    transition: all 0.4s ease;
    z-index: 5;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
}

.papa-tarjeta-foto:hover .papa-indicador-clic {
    color: #00ffcc;
    transform: translate(-50%, -50%) scale(1.15);
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.8);
}

/* IMATGE REVELADA */
.papa-tarjeta-foto.papa-reproduciendo {
    border-color: #00ffcc; 
    transform: scale(1.03) translateY(-3px);
    box-shadow: 0 0 35px rgba(0, 255, 204, 0.4);
}

.papa-tarjeta-foto.papa-reproduciendo .papa-img-completa {
    opacity: 1 !important; 
    filter: grayscale(0%) brightness(1) saturate(1.2) contrast(1) !important;
}

.papa-tarjeta-foto.papa-reproduciendo .papa-indicador-clic {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.7);
}

/* SUPORT DE FOTO VERTICAL */
.papa-tarjeta-vertical {
    max-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.papa-tarjeta-vertical .papa-img-completa {
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* ==========================================================================
   OPTIMITZACIÓ RESPONSIVE ADAPTADA PER A PANTALLES DE MÒBIL (FORÇAT TOTAL)
   ========================================================================== */
@media (max-width: 768px) {

    .papa-separador-forcat-pc {
        display: none !important;
    }

    /* EL BANNER REAJUSTAT */
    .banner-papa-contenedor {
        display: block; 
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .banner-papa-marco {
        width: 100% !important;
        max-height: 240px; 
        overflow: hidden;
        border-bottom: 3px solid #ff003c; 
        box-shadow: 0 4px 25px rgba(255, 0, 60, 0.4); 
        border-radius: 0px !important;
    }

    .banner-papa-img {
        width: 100% !important;
        height: auto;
        object-fit: cover;
        display: block;
        filter: none !important; 
    }

    /* MARGES EXTERIORS DE LA PÀGINA EN MÒBIL (CENTRADO MATEMÁTICO) */
    .seccion-papa-multiverso {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px 40px 16px !important; 
        margin: 0 auto !important; /* Forza el centrat */
        box-sizing: border-box !important;
    }

    .contenedor-papa-bloques {
        gap: 50px;
        width: 100% !important;
    }

    /* LA CAIXA PROTECTIVA EN MÒBILS */
    .papa-caixa-3d {
        padding: 35px 25px !important; 
        border-radius: 22px !important;
        transform: none !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .papa-caixa-3d:hover {
        transform: none !important;
    }

    .papa-titulo-degradado {
        font-size: 2.95rem; 
    }

    .papa-texto {
        font-size: 1.35rem;
        line-height: 1.6;
    }

    .papa-galeria-fotos {
        grid-template-columns: 1fr !important; 
        gap: 25px;
        width: 100% !important;
    }

    .papa-tarjeta-vertical {
        max-height: 380px;
    }

    /* Cancel·lem interferències hover del tacte en mòbils */
    .papa-tarjeta-foto:hover .papa-img-completa {
        opacity: 0.35;
        filter: grayscale(100%) brightness(0.25) contrast(1.2);
    }
    
    .papa-tarjeta-foto:hover .papa-indicador-clic {
        color: rgba(0, 255, 204, 0.6);
        transform: translate(-50%, -50%) scale(1);
    }
    
    .papa-tarjeta-foto.papa-reproduciendo .papa-img-completa {
        opacity: 1 !important;
    }
}

/* FINS AQUI LA SECCIO PÀGINA PAPA */