/* ==========================================================================
   3. HEADER
   ========================================================================== */
 header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 20px;
     z-index: 100;
     transition: padding 0.3s ease;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
 }


 #burgerBtn {
     grid-column: 3;
     justify-self: end;
 }



 /* ==========================================================================
   4. BURGER BUTTON
   ========================================================================== */
 #burgerBtn {
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border-radius: 50px;
     padding: 4px 14px 6px 16px;
     line-height: 1em;
     border: 2px solid var(--color-white);
     color: var(--color-white);
     background-color: transparent;
     opacity: 1;
     transform: translateY(-10px);
     pointer-events: none;
     transition: all 0.3s ease;
 }

 .burger-icon {
     width: 24px;
     height: 24px;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     z-index: 10;
 }

 .burger-line {
     background-color: currentColor;
     height: 2px;
     width: 100%;
     border-radius: 2px;
     display: block;
     transition: all 0.3s ease-in-out;
     position: relative;
     transform-origin: center;
 }

 .menu-label {
     font-size: 1.2rem;
     line-height: 1em;
     letter-spacing: 1px;
     text-transform: uppercase;
     padding-top: 4px;
     min-width: 70px;
     text-align: right;
     margin-right: 12px;
     font-weight: 500;
 }

 /* Burger Activo */
 .menu-trigger.active {
     border-color: var(--color-green) !important;
     color: var(--color-green) !important;
     z-index: 9999 !important;
 }

 .menu-trigger.active .burger-icon {
     justify-content: center;
 }

 .menu-trigger.active .burger-line:nth-child(1) {
     position: absolute;
     top: 50%;
     margin-top: -1px;
     transform: rotate(45deg);
 }

 .menu-trigger.active .burger-line:nth-child(2) {
     opacity: 0;
 }

 .menu-trigger.active .burger-line:nth-child(3) {
     position: absolute;
     top: 50%;
     margin-top: -1px;
     transform: rotate(-45deg);
 }




 /* Idiomas */
 .mf-langs {
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: var(--font-sans);
     font-size: 0.9rem;
     color: var(--color-green);
 }

 .mf-lang-item {
     text-decoration: none;
     color: var(--color-green);
     opacity: 0.6;
     transition: opacity 0.3s;
     font-weight: 600;
 }

 .mf-lang-item.active,
 .mf-lang-item:hover {
     opacity: 1;
 }

 .sep {
     opacity: 0.4;
 }




 /* ==========================================================================
   7. PAGINA LEGAL
   ========================================================================== */

 body.page-template-page-legal #burgerBtn {
     pointer-events: all !important;
     transform: translateY(0) !important;
 }

 .bottom-ui-wrapper,
 .mobile-timeline-bar,
 .floating-timeline-nav,
 .header-context-menu,
 #customCursor {
     display: none !important;
 }

 .legal-page-wrapper {
     width: 100%;
     min-height: 100vh;
     padding: 100px 20px 20px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .legal-container {
     width: 100%;
     max-width: 800px;
 }

 .legal-main-title {
     font-family: var(--font-serif);
     font-size: clamp(2.5rem, 5vw, 4rem);
     color: var(--color-gold);
     line-height: 1.1;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 60px;
     padding-bottom: 40px;
     border-bottom: 1px solid rgba(212, 175, 104, 0.3);
 }

 .legal-content {
     font-size: 1.15rem;
     line-height: 1.8;
     font-weight: 300;
     color: var(--color-cream);
 }

 .legal-content h2 {
     font-size: 2rem;
     margin-top: 60px;
     margin-bottom: 25px;
     text-transform: uppercase;
 }

 .legal-content h3,
 .legal-content h4 {
     font-size: 1.5rem;
     color: var(--color-white);
     margin-top: 40px;
     margin-bottom: 15px;
 }

 .legal-content p {
     margin-bottom: 25px;
     opacity: 0.9;
 }

 .legal-content ul,
 .legal-content ol {
     margin-bottom: 30px;
     padding-left: 20px;
 }

 .legal-content li {
     margin-bottom: 10px;
     padding-left: 10px;
 }

 .legal-content li::marker {
     color: var(--color-gold);
 }

 .legal-content a {
     color: var(--color-gold);
     border-bottom: 1px solid var(--color-gold);
     transition: all 0.3s ease;
 }

 .legal-content a:hover {
     color: var(--color-white);
     border-bottom-color: var(--color-white);
 }

 .simple-legal-footer {
     margin-top: 80px;
     padding: 40px;
     width: 100%;

     border-top: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     justify-content: center;
 }



 /* ==========================================================================
   8. MEDIA QUERIES (DESKTOP)
   ========================================================================== */
 @media (max-width: 1024px) {
     #burgerBtn {
         transform: none !important;
         opacity: 1 !important;
         pointer-events: auto !important;
         padding: 2px 10px 2px 0px;
         padding-top: 2px;
         padding-right: 10px;
         padding-bottom: 2px;
         padding-left: 0px;

     }

     .burger-icon {
         width: 1rem;
         height: 1rem;
     }

     .menu-label {
         margin-right: 8px;
         font-size: 1rem;
         padding-top: 2px;
     }
 }

 @media (min-width: 1025px) {

     /* A. Side Menu Desktop (50% ancho + centrado) */
     .side-menu {
         width: 50vw;
         padding: 100px 4vw 40px 4vw;
         /* Padding balanceado desktop */
         justify-content: center;
         /* Centrado vertical total */
     }

     .side-menu .menu-item {
         padding: 15px 25px;
     }

     .side-menu .menu-years {
         font-size: var(--fs-menu-year);
     }

     /* B. Ocultar elementos Mobile */
     .mobile-only-menu,
     .side-menu-footer,
     .scroll-ui-arrow {
         display: none !important;
     }

     /* C. Ajustes Scroll Content */
     .scroll-ui-content {
         padding-right: 0 !important;
         overflow-x: visible;
     }
 }