/* ==========================================================================
   1. EL TELÓ DE LA INTRO (On surt l'espiral)
   ========================================================================== */
#pantalla-espiral {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998; /* Per sobre de tota la web */
    
    /* 🎨 COLOR GRANAT DEL TELÓ INICIAL */
    background-color: #800020 !important; /* Pots canviar aquest codi si tens un granat diferent */
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1000px;
    
    /* Efecte de pujada suau estil Cocota Studio */
    transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1);
}

/* Classe que s'activa amb JS per fer pujar el teló */
#pantalla-espiral.marxar {
    transform: translateY(-100%);
}

/* ==========================================================================
   2. L'ESPIRAL (Animacions)
   ========================================================================== */
#imatge-espiral {
    width: 400px;
    max-width: 85vw;
    opacity: 0;
    
    animation: 
        entrarRodant 2s ease-out forwards,
        voltereta 1s ease-in-out 2s forwards;
    z-index: 2;
}

@keyframes entrarRodant {
    0% { opacity: 0; transform: translateX(-150vw) rotate(0deg); }
    10% { opacity: 1; }
    100% { opacity: 1; transform: translateX(0) rotate(1080deg); }
}

@keyframes voltereta {
    0% { transform: translateX(0) rotate(1080deg) rotateX(0deg); }
    100% { transform: translateX(0) rotate(1080deg) rotateX(360deg); }
}

/* ==========================================================================
   1. LA CAPÇALERA ORIGINAL (Seqüència: Espiral + Scroll)
   ========================================================================== */
#capcalera-gratis {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px !important; 
    z-index: 99999 !important; /* Força perquè floti per sobre del fons blanc */
    background-color: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    
    /* 1. ESTAT INICIAL: Amagada mentre dura l'espiral */
    transform: translateY(-100%); 
    opacity: 0;
    pointer-events: none; 
}

/* 2. ESTAT ACTIU: El JS la mostra post-espiral i quan puges l'scroll */
#capcalera-gratis.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important; 
}

#capcalera-gratis .elementor-container {
    display: flex !important;
    flex-direction: row !important;       
    flex-wrap: nowrap !important;          
    justify-content: space-between !important; 
    align-items: center !important;        
    max-width: 1200px !important; 
    margin: 0 auto !important;    
    width: 100% !important;
    padding: 0 20px !important;   
    height: 60px !important; 
}

#capcalera-gratis {
    align-items: center !important;
}

#capcalera-gratis .e-image-base {
    max-height: 95% !important; 
    width: auto !important;
    display: block !important;
}

#capcalera-gratis .e-image-link-base {
    display: flex !important;
    align-items: center !important;
    height: 100% !important; 
}
/* ==========================================================================
   4. SEGONA PANTALLA (Inici real de la teva web)
   ========================================================================== */
body.bloquejar-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

#pantalla-text {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 🎨 COLOR DE FONS DE LA WEB REAL (Quan marxa el granat) */
    background-color: #ffffff !important; 
}

#text-animat {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s; /* Retard perquè s'esperi que el teló pugi */
}

#text-animat.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================================================
   6. SEGURETAT PER A L'EDITOR (Desactiva la intro només en mode edició)
   ========================================================================== */
.elementor-editor-active #pantalla-espiral {
    display: none !important; /* Esborra el teló granat instantàniament a l'editor */
}

.elementor-editor-active body,
.elementor-editor-active body.bloquejar-scroll {
    overflow: visible !important; /* Força que l'scroll funcioni per editar */
    overflow-y: auto !important;
    height: auto !important;
}
/* Compensa la barra d'administració de WordPress */
body.admin-bar #capcalera-gratis {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #capcalera-gratis {
        top: 46px !important;
    }
}
/* Capçalera visible per defecte a totes les pàgines menys la d'inici */
body:not(.home) #capcalera-gratis {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
}
#capcalera-gratis {
    margin: 0 !important;
}
/* ===================================================
   CONTROL INFAL·LIBLE DE PEU DE PÀGINA (SISTEMA XIP)
   =================================================== */

/* 1. Al MÒBIL: Amaguem el bloc que té a dins el xip de desktop */
@media (max-width: 767px) {
  .elementor-section:has(.soc-el-footer-desktop),
  .e-con:has(.soc-el-footer-desktop) {
    display: none !important;
  }
}

/* 2. A L'ORDINADOR: Amaguem el bloc que té a dins el xip de mòbil */
@media (min-width: 768px) {
  .elementor-section:has(.soc-el-footer-mobil),
  .e-con:has(.soc-el-footer-mobil) {
    display: none !important;
  }
}
/* ==========================================================================
   CAPÇALERA DOS: EFECTE SCROLL FLUID (Resta de pàgines)
   ========================================================================== */
#capcalera-dos {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999 !important; /* Es manté per sobre de tot */
    background-color: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.4s ease, opacity 0.4s ease;
    
    /* Neix visible immediatament perquè aquí no hi ha espiral */
    transform: translateY(0); 
    opacity: 1;
}

/* L'ordre d'amagar-se que s'activarà quan l'usuari faci scroll avall */
#capcalera-dos.amagar-capcalera {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none;
}