/* =========================================
   1. CUSTOM CURSOR
   ========================================= */
 .custom-cursor {
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9999;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
     -o-transition: opacity 0.4s ease, visibility 0.4s ease;
     transition: opacity 0.4s ease, visibility 0.4s ease;
 }

 .custom-cursor.visible {
     opacity: 1;
     visibility: visible;
 }

 .cursor-circle {
     width: 70px;
     height: 70px;
     background-color: rgba(248, 248, 248, .95);
     border: 2px solid var(--color-green);
     color: var(--color-green);
     border-radius: 50%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     -webkit-transform-origin: center center;
     -ms-transform-origin: center center;
     transform-origin: center center;
 }

 .cursor-circle svg {
     width: 50px;
     height: 50px;
     stroke-width: 1px;
 }

 .cursor-text {
     margin-top: 10px;
     font-family: var(--font-sans);
     font-weight: 700;
     font-size: 11px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--color-green);
     -webkit-transform-origin: center center;
     -ms-transform-origin: center center;
     transform-origin: center center;
 }


 .single-etapas {
     cursor: -webkit-grab;
     cursor: grab;
 }

 .single-etapas.is-dragging {
     cursor: -webkit-grabbing;
     cursor: grabbing;
 }

 .side-menu,
 .menu-overlay,
 .full-screen-popup {
     cursor: pointer;
 }

 /* Ocultar scrollbar para Lenis/Scroller Wrapper */
 html.lenis,
 body.lenis {
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 html.lenis::-webkit-scrollbar,
 body.lenis::-webkit-scrollbar {
     display: none;
 }

 .scroller-wrapper {
     scrollbar-width: none;
     -ms-overflow-style: none;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     position: relative;
 }

 .scroller-wrapper::-webkit-scrollbar {
     display: none;
 }

 /* Utilidades: Evitar arrastre */
 .scroller-wrapper img,
 .scroller-wrapper a,
 .scroller-wrapper video {
     -webkit-user-drag: none;
     user-drag: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -ms-touch-action: pan-y;
     touch-action: pan-y;
 }


 /* Header Pills */
 .header-pills {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 20px;
 }

 .header-pill {
     padding: 5px 5px 4px 8px;
     border-radius: 50px;
     text-transform: uppercase;
     font-size: 0.8rem;
     cursor: pointer;
     -webkit-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
     font-family: var(--font-sans);
     letter-spacing: 1px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     color: var(--color-white);
     border-color: var(--color-white);
     background: transparent;
 }

 .visible .header-pill {
     color: var(--color-black);
     border-color: var(--color-black);
 }

 .visible .header-pill svg path {
     stroke: var(--color-black);
 }

 .visible .header-pill:hover {
     background: var(--color-black);
     color: var(--color-white);
 }

 .visible .header-pill:hover svg path {
     stroke: var(--color-white);
 }





 /* =========================================
   2. POPUP FULLSCREEN (INFO)
   ========================================= */
 .full-screen-popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     z-index: 99999;

     /* Fondo & Filtros */
     background: rgba(27, 58, 40, .94);
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);

     /* Layout Base */
     display: flex;
     flex-direction: column;
     padding-top: 20px;

     /* Animación Entrada */
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s ease;
 }

 .full-screen-popup.active {
     opacity: 1;
     pointer-events: auto;
 }

 /* --- Controles Superiores (Close & Title) --- */
 .full-screen-popup .popup-top-bar {
     position: absolute;
     top: 30px;
     right: 40px;
     z-index: 1000;
     display: none;
 }

 .full-screen-popup.active .popup-top-bar {
     display: block;
 }

 .full-screen-popup .popup-close {
     background: none;
     border: none;
     cursor: pointer;
     width: 40px;
     height: 40px;
     position: relative;
     transition: transform 0.3s ease;
 }

 .full-screen-popup .popup-close:hover {
     transform: rotate(90deg);
 }

 .full-screen-popup .close-icon::before,
 .full-screen-popup .close-icon::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 2px;
     background-color: var(--color-white);
 }

 .full-screen-popup .close-icon::before {
     transform: translate(-50%, -50%) rotate(45deg);
 }

 .full-screen-popup .close-icon::after {
     transform: translate(-50%, -50%) rotate(-45deg);
 }

 .popup-section-label {
     font-size: 1rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--color-white);
     text-align: center;
     padding: 0 20px 20px 20px;
 }

 /* --- Navegación (Tabs) --- */
 .full-screen-popup .popup-tabs-nav {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
     margin-bottom: 2vh;
     position: relative;
     z-index: 10;
     flex-shrink: 0;
 }

 .full-screen-popup .tab-pill {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: rgba(255, 255, 255, 0.5);
     padding: 4px 20px;
     border-radius: 50px;
     text-transform: uppercase;
     font-size: 0.85rem;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .full-screen-popup .tab-pill:hover {
     border-color: rgba(255, 255, 255, 0.8);
     color: var(--color-white);
 }

 .full-screen-popup .tab-pill.active {
     background: var(--color-gold-hover);
     border-color: var(--color-green);
     color: var(--color-green);
     box-shadow: 0 4px 15px rgba(27, 58, 40, 0.4);
 }

 /* --- Contenedor de Contenido --- */
 .full-screen-popup .popup-content-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .full-screen-popup .tab-content {
     display: none;
     /* Oculto por defecto */
     width: 100%;
     height: 100%;
     padding: 0 5vw 40px 5vw;
     overflow-y: auto;

     /* Estado inicial animación */
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.5s ease, transform 0.5s ease;
 }

 .full-screen-popup .tab-content.active {
     display: flex !important;
     flex-direction: column;
     min-height: 100%;

     /* Estado final animación */
     opacity: 1;
     transform: translateY(0);
 }

 .tab-wraper {
     margin: auto;
     width: 100%;
     max-width: 1400px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* --- Tipografía y Elementos Base --- */
 .full-screen-popup .tab-content h3 {
     font-family: var(--font-serif);
     font-size: 2.5rem;
     margin-bottom: 2rem;
     text-transform: uppercase;
     color: var(--color-gold-hover);
     text-align: left;
     width: 100%;
 }

 /* Centrar título si es columna única */
 .full-screen-popup .tab-content:has(.inner-grid.col-1) h3 {
     text-align: center;
 }

 /* Listas y Texto */
 .tab-content .ecosystem-list,
 .tab-content dl,
 .tab-content ul {
     margin: 0;
     padding: 0;
     list-style: none;
     text-align: left;
 }

 .tab-content li,
 .tab-content dt,
 .skill-item {
     position: relative;
     padding-left: 25px;
     margin-bottom: 25px;
     font-family: var(--font-sans);
     font-size: 1.2rem;
     line-height: 1.6;
     font-weight: 300;
     color: var(--color-white);
 }

 .tab-content li::before,
 .tab-content dt::before,
 .skill-item::before {
     content: "•";
     position: absolute;
     left: 0;
     font-weight: bold;
 }

 .skill-name {
     font-weight: bold;
 }

 .tab-content dd,
 .skill-evolution,
 .full-screen-popup .col-item p {
     font-family: var(--font-sans);
     font-size: 1.2rem;
     line-height: 1.7;
     font-weight: 300;
     color: var(--color-white);
     opacity: 0.8;
     /* Unificado opacity para p y dd */
 }

 /* --- Sistema de Grid (Columnas) --- */
 .full-screen-popup .inner-grid {
     display: grid;
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     align-content: center;
     align-items: start;
     gap: 80px;
 }

 .full-screen-popup .inner-grid.col-3 {
     grid-template-columns: repeat(3, 1fr);
 }

 .full-screen-popup .inner-grid.col-2 {
     grid-template-columns: repeat(2, 1fr);
 }

 .full-screen-popup .inner-grid.col-1 {
     grid-template-columns: 1fr;
     max-width: 800px;
     text-align: center;
 }

 .full-screen-popup .col-item h4 {
     font-size: 1.2rem;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 1px;
     padding-bottom: 15px;
     color: var(--color-white);
 }









 /* =========================================
   3. SLIDES LAYOUTS
   ========================================= */

 /* --- Content Typography (General) --- */
 .big-serif-title {
     font-family: var(--font-serif);
     color: var(--color-gold);
     font-size: var(--fs-h2);
     line-height: 0.9;
     margin-bottom: 25px;
     text-transform: uppercase;
     font-weight: 300;
 }

 .body-desc {
     font-family: var(--font-sans);
     font-size: var(--fs-p);
     line-height: 1.3em;
     font-weight: 400;
     max-width: 90%;
     color: var(--black-text);
 }

 .title-date {
     font-family: var(--font-serif);
     font-size: 24px;
     font-weight: 700;
     color: var(--color-green);
     white-space: nowrap;
     letter-spacing: 0.5px;
 }

 /* --- Basic Panels --- */
 .panel-text {
     width: 40vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding: 150px 4vw 60px 4vw;
     position: relative;
     background-color: var(--color-white);
     z-index: 2;
 }

 .panel-gallery {
     width: 60vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding: 0 4vw;
     position: relative;
     background-color: var(--color-white);
 }

 /* --- Advanced Panels: Combined & Masonry --- */
 .panel-combined {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     width: 100vw;
     height: 100vh;
     min-height: 100vh;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 0 5vw;
     gap: 100px;
     position: relative;
     background-color: var(--color-white);
 }

 .combined-text-col {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     height: auto;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 40%;
     flex: 0 0 40%;
     width: 40%;
 }

 .combined-gallery-col {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     height: 100%;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
     width: 50%;
 }

 /* Masonry System */
 .masonry-wrapper {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 100%;
     height: 70vh;
     gap: 20px;
 }

 .masonry-row {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     gap: 20px;
     width: 100%;
     min-height: 0;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 .masonry-item {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     position: relative;
     height: 100%;
     overflow: hidden;
     background-color: #f4f4f4;
     max-width: 600px;
 }

 .masonry-item img,
 .masonry-item video,
 .img-container-parallax {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     -o-object-position: center;
     object-position: center;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     max-height: none !important;
 }




 /* Badges */
 .img-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     width: 28px;
     height: 28px;
     background: var(--color-white);
     color: var(--color-green);
     border-radius: 50%;
     font-size: 0.8rem;
     font-weight: 700;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     z-index: 20;
     -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
 }

 .img-label-bottom {
     position: absolute;
     bottom: 0px;
     left: 0px;
     background: rgba(255, 255, 255, 0.9);
     color: var(--color-green);
     padding: 5px 8px 4px 8px;
     font-size: 0.75rem;
     font-style: italic;
     z-index: 20;
     -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 /* --- Next Chapter Panel --- */
 .panel-next-chapter {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 100vw;
     background-color: var(--color-green);
     color: var(--color-cream);
     min-height: 100vh;
 }

 .panel-next-chapter .cta-link {
     margin-top: 40px;
 }

 .next-chapter-content {
     width: 50%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding: 0 8%;
     border-left: 1px solid rgba(255, 255, 255, 0.1);
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

 .next-chapter-img {
     width: 50%;
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .next-chapter-img img {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
 }

 .next-label {
     font-family: var(--font-sans);
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 20px;
     color: var(--color-gold);
 }

 .next-title {
     font-family: var(--font-serif);
     font-size: var(--fs-h2);
     line-height: 1;
     margin-bottom: 30px;
     text-transform: uppercase;
     color: var(--color-white);
     font-weight: 300;
 }

 .final-tit {
     max-width: 70%;
     margin: 0 auto;
 }


 .slide-final .next-chapter-content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 100vw;
     background-color: var(--color-green);
     color: var(--color-cream);
     min-height: 100vh;

     justify-content: center;

 }

 .slide-final h2 {
     margin-bottom: 80px;

 }

 .slide-final .center-content {
     max-width: 960px;
     margin: auto;
     text-align: center;
 }

 .slide-final .body-desc {
     width: 100%;
     max-width: 100%;
 }


 .slide-final .cta-icon {
     transform: unset;

 }

 .slide-final a:hover .cta-icon {

     -webkit-transform: translateX(3px) !important;
     -ms-transform: translateX(3px) !important;
     transform: translateX(3px) !important;
 }

 /* =========================================
   4. UI CONTROLS & TIMELINES & LANG FOOTER
   ========================================= */

 /* Bottom UI Wrapper (Desktop) */
 .bottom-ui-wrapper {
     position: fixed;
     bottom: 24px;
     left: 0;
     width: 100%;
     z-index: 90;
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: 1fr auto 1fr;
     grid-template-columns: 1fr auto 1fr;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding: 0 30px;
     opacity: 0;
     -webkit-transform: translateY(100px);
     -ms-transform: translateY(100px);
     transform: translateY(100px);
     -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
     transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
     -o-transition: opacity 0.5s ease, transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
     pointer-events: none;
 }

 .bottom-ui-wrapper.visible {
     opacity: 1;
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
 }

 /* Left: Lang & Legal */
 .footer-nav {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 15px;
     -ms-grid-column-align: start;
     justify-self: start;
     pointer-events: auto;
 }

 .ui-pill-btn {
     background: var(--color-white-glass);
     border: 2px solid var(--color-black);
     color: var(--color-black);
     font-family: var(--font-sans);
     font-size: 0.8rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     padding: 2px 16px 0 18px;
     height: 32px;
     border-radius: 50px;
     cursor: pointer;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     text-decoration: none;
     -webkit-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
     white-space: nowrap;
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
 }

 .ui-pill-btn:hover {
     background: var(--color-green);
     border-color: var(--color-green);
     color: var(--color-gold);
     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .legal-btn {
     color: var(--color-black);
 }

 .legal-btn:hover {
     color: var(--color-gold);
 }


 /* Center: Floating Timeline (Desktop) */
 .floating-timeline-nav {
     position: fixed;
     bottom: 20px;
     left: 50%;
     -webkit-transform: translateX(-50%) translateY(100px);
     -ms-transform: translateX(-50%) translateY(100px);
     transform: translateX(-50%) translateY(100px);
     z-index: 90;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     gap: 0;
     padding: 5px 25px 10px 25px;
     background: rgba(27, 58, 40, 0.95);
     border-radius: 60px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     opacity: 0;
     -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
     transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
     -o-transition: opacity 0.5s ease, transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
 }

 .floating-timeline-nav.visible {
     opacity: 1;
     -webkit-transform: translateX(-50%) translateY(0);
     -ms-transform: translateX(-50%) translateY(0);
     transform: translateX(-50%) translateY(0);
 }

 .floating-timeline-nav.inner-nav {
     position: static;
     -webkit-transform: none !important;
     -ms-transform: none !important;
     transform: none !important;
     margin: 0;
     opacity: 1 !important;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     -ms-grid-column-align: center;
     justify-self: center;
     pointer-events: auto;
 }

 .ft-year {
     font-family: var(--font-serif);
     color: rgba(255, 255, 255, 0.5);
     font-size: 1.2rem;
     font-weight: 400;
     cursor: pointer;
     -webkit-transition: color 0.3s ease;
     -o-transition: color 0.3s ease;
     transition: color 0.3s ease;
     position: relative;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     white-space: nowrap;
 }

 .ft-year:not(:last-child)::after {
     content: '';
     display: block;
     width: 30px;
     height: 1px;
     border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
     margin: 0 15px;
 }

 .ft-year:hover {
     color: rgba(255, 255, 255, 0.9);
 }

 .ft-year.active-year {
     color: var(--color-gold);
 }



 .mt-label {
     color: var(--color-gold);
     font-family: var(--font-serif);
     font-size: 1.1rem;
     line-height: 1em;
     font-weight: 600;
     white-space: nowrap;
     padding-bottom: 4px;
     /* PROPIEDADES PARA CENTRAR: */
     /* Tu altura fija */
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     /* 1. Habilita el control de caja flexible */
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     /* 2. Centra verticalmente el texto */
 }

 .select-wrapper {
     position: relative;
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .timeline-select {
     width: 100%;
     height: 100%;
     background: transparent;
     border: none;
     color: var(--color-white);
     font-family: var(--font-sans);
     font-weight: 600;
     font-size: 0.95rem;
     -moz-appearance: none;
     appearance: none;
     -webkit-appearance: none;
     outline: none;
     padding-right: 30px;
     text-align: right;
     cursor: pointer;
     z-index: 2;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .timeline-select option {
     background-color: var(--color-green);
     color: var(--color-white);
 }

 .custom-select-arrow {
     position: absolute;
     right: 0;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     pointer-events: none;
     z-index: 1;
     color: var(--color-white);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     line-height: 0;
 }


 /* Mobile Timeline Bar & Select */
 .mobile-timeline-bar {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     position: fixed;
     bottom: 20px;
     left: 20px;
     right: 20px;
     width: calc(100% - 40px);
     background: var(--color-green);
     border: 1px solid var(--color-gold);
     border-radius: 50px;
     padding: 0 20px;
     height: 50px;
     z-index: 150;
     -webkit-transform: translateY(150%);
     -ms-transform: translateY(150%);
     transform: translateY(150%);
     -webkit-transition: -webkit-transform 0.4s ease;
     transition: -webkit-transform 0.4s ease;
     -o-transition: transform 0.4s ease;
     transition: transform 0.4s ease;
     transition: transform 0.4s ease, -webkit-transform 0.4s ease;
     -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
 }

 .mobile-timeline-bar.visible {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
 }


 /* =========================================
   8. GLOBAL MEDIA QUERIES (RESPONSIVE)
   ========================================= */

 /* --- Desktop Logic (> 1025px) --- */
 @media (min-width: 1025px) {

     /* Combined Panel Layouts */
     .panel-combined.layout-50-50 .combined-text-col,
     .panel-combined.layout-50-50 .combined-gallery-col {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 calc(50% - 50px);
         flex: 0 0 calc(50% - 50px);
         width: calc(50% - 50px);
     }

     .panel-combined.layout-40-60 .combined-text-col {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 calc(40% - 50px);
         flex: 0 0 calc(40% - 50px);
         width: calc(40% - 50px);
     }

     .panel-combined.layout-40-60 .combined-gallery-col {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 calc(60% - 50px);
         flex: 0 0 calc(60% - 50px);
         width: calc(60% - 50px);
     }

     .panel-combined.layout-60-40 .combined-text-col {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 calc(60% - 50px);
         flex: 0 0 calc(60% - 50px);
         width: calc(60% - 50px);
     }

     .panel-combined.layout-60-40 .combined-gallery-col {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 calc(40% - 50px);
         flex: 0 0 calc(40% - 50px);
         width: calc(40% - 50px);
     }

     .panel-combined.layout-100 {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         gap: 60px;
         text-align: center;
     }

     .panel-combined.layout-100 .combined-text-col,
     .panel-combined.layout-100 .combined-gallery-col {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         width: 100%;
         max-width: 1000px;
     }

     /* Masonry fix for 3 items */
     .masonry-wrapper.masonry-3-items .masonry-row:last-child {
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
     }

     .masonry-wrapper.masonry-3-items .masonry-row:last-child .masonry-item {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 calc(50% - 10px);
         flex: 0 0 calc(50% - 10px);
         max-width: calc(50% - 10px);
     }
 }

 /* --- Laptop & Tablet Horizontal (> 769px) --- */
 @media (min-width: 1025px) {
     .side-menu {
         width: 50vw;
         padding: 100px 4vw 40px 4vw;
         overflow: hidden;
     }

     .menu-timeline {
         height: 100%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
     }

     .cta-icon {
         -webkit-transform: rotate(-90deg);
         -ms-transform: rotate(-90deg);
         transform: rotate(-90deg);
     }

     .cta-link:hover .cta-icon {
         -webkit-transform: rotate(-90deg) translateY(3px);
         -ms-transform: rotate(-90deg) translateY(3px);
         transform: rotate(-90deg) translateY(3px);
     }
 }


 /* ==========================================================================
   TABLET / HYBRID LAYOUT (max-width: 1024px)
   ========================================================================== */
 @media (max-width: 1024px) {
     header .menu-overlay {
         display: none;
     }

     header .side-menu {
         padding-left: 20px;
         padding-right: 20px;
     }

     #sec-1 {
         padding-top: 180px;
     }

     /* Panel Combinado: De horizontal a columna */
     .panel-combined {
         width: 100%;
         height: auto;
         min-height: auto;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         padding: 40px 0;
         gap: 40px;
     }

     .panel-combined .combined-text-col,
     .panel-combined .combined-gallery-col {
         width: 100% !important;
         -webkit-box-flex: 0 !important;
         -ms-flex: 0 0 100% !important;
         flex: 0 0 100% !important;
     }

     .combined-text-col {
         margin-bottom: 20px;
     }

     /* Masonry Reset */
     .masonry-wrapper {
         height: auto;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
     }

     .masonry-row {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         height: auto;
         -webkit-box-flex: 0;
         -ms-flex: none;
         flex: none;
         gap: 15px;
     }

     .masonry-item {
         width: 100%;
         height: 320px;
         max-width: 100%;
         -webkit-box-flex: 0;
         -ms-flex: none;
         flex: none;
     }


     /* ------------------------------------------------------
       1. GLOBAL RESET & SCROLL
       ------------------------------------------------------ */
     body {
         padding-bottom: 0px;
     }

     .scroller-wrapper {
         width: 100%;
         height: auto;
         overflow: visible;
     }

     .track-container {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         width: 100%;
         height: auto;
     }

     .panel {
         width: 100% !important;
         height: auto;
         min-height: auto;
     }

     /* ------------------------------------------------------
       2. HEADER: LAYOUT, GLASS & SMART BEHAVIOR
       ------------------------------------------------------ */
     header {
         /* A. Layout Grid 2x2 */
         display: -ms-grid;
         display: grid;
         -ms-grid-columns: 1fr 0 auto;
         grid-template-columns: 1fr auto;
         -ms-grid-rows: auto 15px auto;
         grid-template-rows: auto auto;
         padding: 15px 20px;
         gap: 15px 0;

         /* B. Posicionamiento Fijo */
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 1000;

         /* C. Glassmorphism */
         background-color: rgba(255, 255, 255, 0.85);
         -webkit-backdrop-filter: blur(16px);
         backdrop-filter: blur(16px);
         border-bottom: 1px solid rgba(27, 58, 40, 0.08);
         -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);

         /* D. Smart Header Animation */
         -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
         transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
         -o-transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
         transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
         transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
     }

     header>*:nth-child(1) {
         -ms-grid-row: 1;
         -ms-grid-column: 1;
     }

     header>*:nth-child(2) {
         -ms-grid-row: 1;
         -ms-grid-column: 3;
     }

     header>*:nth-child(3) {
         -ms-grid-row: 3;
         -ms-grid-column: 1;
     }

     header>*:nth-child(4) {
         -ms-grid-row: 3;
         -ms-grid-column: 3;
     }

     /* Estado Colapsado (Scroll Down) */
     header.header-collapsed {
         -webkit-transform: translateY(-58px);
         -ms-transform: translateY(-58px);
         transform: translateY(-58px);
     }

     /* Estado Expandido Forzoso (Menu Abierto) */
     header.sidemenu-active {
         -webkit-transform: translateY(0) !important;
         -ms-transform: translateY(0) !important;
         transform: translateY(0) !important;
     }

     /* Override específico para HOME en Mobile */
     .home header {
         gap: 0 !important;
         background-color: transparent !important;
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
         border-bottom: none !important;
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
         position: unset !important;
         /* Mantener fixed para el smart header */
     }

     /* ------------------------------------------------------
       3. HEADER COMPONENTS (Logo, Burger, Pills)
       ------------------------------------------------------ */



     /* Burger Button */
     #burgerBtn {
         -ms-grid-column: 2;
         grid-column: 2;
         -ms-grid-row: 1;
         grid-row: 1;
         -ms-grid-column-align: end;
         justify-self: end;
         -ms-grid-row-align: center;
         align-self: center;

         /* Reset & Visuals */
         -webkit-transform: none !important;
         -ms-transform: none !important;
         transform: none !important;
         opacity: 1 !important;
         pointer-events: auto !important;
         padding: 2px 10px 2px 0px;
         /* Ajuste alineación */

         border-color: var(--color-green) !important;
         color: var(--color-green) !important;
     }

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

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

     .burger-line {
         background-color: var(--color-green) !important;
     }



     /* Menú Contextual (Pills Container) */
     .header-context-menu {
         grid-column: 1 / -1;
         -ms-grid-row: 2;
         grid-row: 2;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         width: 100%;
         gap: 12px;
         padding-top: 10px;
         position: relative;
         opacity: 1 !important;
         -webkit-transform: none !important;
         -ms-transform: none !important;
         transform: none !important;
         pointer-events: auto !important;
     }

     .header-section-label {
         font-size: 0.8rem;
         font-weight: 600;
         letter-spacing: 1px;
         color: var(--color-green);
         margin: 0;
         padding-left: 2px;
         white-space: nowrap;
         overflow: hidden;
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
         max-width: 100%;
     }

     /* Scroll Horizontal Pills */
     .header-pills {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
         gap: 8px;
         width: calc(100vw);
         margin-left: -20px;
         margin-right: -20px;
         padding: 0 20px;

         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
         -ms-overflow-style: none;
     }

     .header-pills::-webkit-scrollbar {
         display: none;
     }

     /* Estilo Pills */
     .header-pill {
         -ms-flex-negative: 0;
         flex-shrink: 0;
         white-space: nowrap;
         font-size: 0.7rem;
         padding: 8px 14px;
         border-radius: 50px;
         background: rgba(255, 255, 255, 0.4);
         border: 1px solid var(--color-green);
         color: var(--color-green);
         -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .header-pill svg path {
         stroke: var(--color-green);
         -webkit-transition: stroke 0.3s ease;
         -o-transition: stroke 0.3s ease;
         transition: stroke 0.3s ease;
     }

     .header-pill.active {
         background: var(--color-green);
         color: var(--color-white);
         border-color: var(--color-green);
         -webkit-box-shadow: 0 2px 8px rgba(27, 58, 40, 0.2);
         box-shadow: 0 2px 8px rgba(27, 58, 40, 0.2);
     }

     .header-pill.active svg path {
         stroke: var(--color-white);
     }

     /* ------------------------------------------------------
       4. SECCIONES Y CONTENIDO
       ------------------------------------------------------ */


     .panel-text {
         width: 100%;
         padding: 60px 20px 80px 20px;
     }

     .combined-text-col {
         width: 100%;
         padding: 0 20px 40px 20px;
     }

     .combined-gallery-col {
         width: 100%;
         padding: 0 20px;
     }

     .panel-gallery {
         width: 100%;
         height: auto;
         padding: 40px 20px;
         -webkit-box-sizing: content-box;
         box-sizing: content-box;
     }

     .panel-image-strip {
         width: 100%;
         height: 50vh;
     }

     .panel-image-strip img {
         mix-blend-mode: normal;
         -webkit-filter: none;
         filter: none;
         opacity: 1;
     }

     .panel-next-chapter {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         height: auto;
         min-height: 100vh;
         min-width: 100vw !important;
     }

     .next-chapter-img {
         width: 100%;
         height: 40vh;
         -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
         order: 1;
     }

     .next-chapter-content {
         width: 100%;
         -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
         order: 2;
         padding: 60px 20px;
         border-left: none;
     }

     /* ------------------------------------------------------
       5. UI SWITCHES
       ------------------------------------------------------ */
     .bottom-ui-wrapper,
     .floating-timeline-nav {
         display: none !important;
     }

     .menu-overlay {
         width: 100vw;
         background-color: rgba(0, 90, 60, 0.8);
     }

     /* =========================================
   POPUP OPTIMIZADO PARA MÓVIL Y TABLET
   ========================================= */

     .full-screen-popup {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         /* Usamos dvh para evitar problemas con la barra de URL en móviles */
         height: 100vh;
         height: 100dvh;
         z-index: 99999;

         /* Fondo sólido/glass para legibilidad */
         background: rgba(27, 58, 40, 0.98);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);

         /* Layout Flex Vertical: Cabecera Fija + Cuerpo Flexible */
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         padding: 0;
         overflow: hidden;
         /* Importante: evita scroll en el body principal */

         opacity: 0;
         visibility: hidden;
         pointer-events: none;
         -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
         -o-transition: opacity 0.4s ease, visibility 0.4s ease;
         transition: opacity 0.4s ease, visibility 0.4s ease;
     }

     .full-screen-popup.active {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
     }

     /* 1. ZONA SUPERIOR FIJA (Botón cerrar + Título) */
     .full-screen-popup.active .popup-top-bar {
         position: relative;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: end !important;
         -ms-flex-pack: end !important;
         justify-content: flex-end !important;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;

         top: 0;
         left: 0;
         width: 100%;
         padding: 10px;
         z-index: 20;
     }

     .full-screen-popup .popup-close {
         background: none;
         border: none;
         cursor: pointer;
         width: 32px;
         height: 32px;
         /* Área de toque más grande para dedo */
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;

     }

     /* Título de sección (Visible en móvil para contexto) */
     .popup-section-label {
         display: block;
         font-size: 0.85rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1px;
         color: var(--color-gold);
         padding: 0 20px 20px 20px;
         -ms-flex-negative: 0;
         flex-shrink: 0;
     }

     /* 2. NAVEGACIÓN TABS (Scroll Horizontal) */
     .full-screen-popup .popup-tabs-nav {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         gap: 10px;
         padding: 0 20px 15px 20px;
         width: 100%;
         -ms-flex-negative: 0;
         flex-shrink: 0;
         /* Evita que se encoja */
         -webkit-box-pack: start;
         -ms-flex-pack: start;
         justify-content: flex-start;
         /* Scroll horizontal suave */
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;

         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .full-screen-popup .popup-tabs-nav::-webkit-scrollbar {
         display: none;
     }

     .full-screen-popup .tab-pill {
         -ms-flex-negative: 0;
         flex-shrink: 0;
         white-space: nowrap;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.3);
         color: var(--color-white);
         padding: 8px 18px;
         border-radius: 50px;
         font-size: 0.8rem;
         font-weight: 500;
         text-transform: uppercase;
         -webkit-transition: all 0.3s;
         -o-transition: all 0.3s;
         transition: all 0.3s;
     }

     .full-screen-popup .tab-pill.active {
         background: var(--color-gold);
         border-color: var(--color-gold);
         color: var(--color-green);
         font-weight: 700;
     }

     /* 3. ÁREA DE CONTENIDO (Scroll Vertical Independiente) */
     .full-screen-popup .popup-content-wrapper {
         -webkit-box-flex: 1;
         -ms-flex-positive: 1;
         flex-grow: 1;
         /* Ocupa todo el espacio restante */
         position: relative;
         width: 100%;
         overflow: hidden;
     }

     .full-screen-popup .tab-content {
         display: none;
         position: absolute;
         /* Anclado para permitir scroll interno */
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;

         padding: 25px 20px 100px 20px;
         /* Padding inferior grande para no tapar con UI del móvil */

         /* Scroll Vertical */
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;

         opacity: 0;
         -webkit-transform: translateY(20px);
         -ms-transform: translateY(20px);
         transform: translateY(20px);
         -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
         transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
         -o-transition: opacity 0.4s ease, transform 0.4s ease;
         transition: opacity 0.4s ease, transform 0.4s ease;
         transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
     }

     .full-screen-popup .tab-content.active {
         display: block !important;
         opacity: 1;
         -webkit-transform: translateY(0);
         -ms-transform: translateY(0);
         transform: translateY(0);
     }

     /* 4. ESTILOS INTERNOS (Textos y Grids) */
     .tab-wraper {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         gap: 30px;
         width: 100%;
     }

     .full-screen-popup .tab-content h3 {
         font-family: var(--font-serif);
         font-size: 1.8rem;
         line-height: 1.1;
         margin-bottom: 1rem;

     }

     /* Forzar grids a 1 columna en móvil/tablet vertical */
     .full-screen-popup .inner-grid {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         gap: 30px;
         width: 100%;
     }

     .full-screen-popup .col-item {
         width: 100%;
     }

     /* Ajustes de texto para lectura en pantallas pequeñas */
     .tab-content p,
     .tab-content li,
     .skill-item {
         font-size: 1.2rem;
         line-height: 1.2em;
         color: rgba(255, 255, 255, 0.9);
     }


     /* 1. CONTENEDOR PRINCIPAL: Caja cerrada */
     .full-screen-popup {
         display: -webkit-box !important;
         display: -ms-flexbox !important;
         display: flex !important;
         -webkit-box-orient: vertical !important;
         -webkit-box-direction: normal !important;
         -ms-flex-direction: column !important;
         flex-direction: column !important;
         /* Apila cabecera y contenido verticalmente */
         height: 100vh !important;
         height: 100dvh !important;
         /* Altura real en móviles */
         overflow: hidden !important;
         /* El popup NO scrollea, scrollea el hijo */
     }

     /* Elementos fijos que no deben encogerse */
     .popup-top-bar,
     .popup-tabs-nav {
         -ms-flex-negative: 0 !important;
         flex-shrink: 0 !important;
     }

     /* 2. WRAPPER DE SCROLL: El área que se mueve */
     .popup-content-wrapper {
         -webkit-box-flex: 1 !important;
         -ms-flex-positive: 1 !important;
         flex-grow: 1 !important;
         /* Ocupa todo el espacio sobrante */
         height: 100% !important;
         /* Fuerza a llenar el hueco flex */
         min-height: 0 !important;
         /* CRUCIAL: Evita que flexbox rompa el scroll */

         overflow-y: auto !important;
         /* Aquí nace el scroll */
         overflow-x: hidden !important;
         -webkit-overflow-scrolling: touch;
         /* Suavidad en iOS */

         position: relative !important;
         display: block !important;
     }

     /* 3. CONTENIDO INTERNO: Crece libremente */
     .tab-content {
         position: static !important;
         /* Quitamos absolute/relative conflictivos */
         height: auto !important;
         /* Altura basada en el contenido */
         overflow: visible !important;
         /* No ocultar desbordamiento interno */
         padding-bottom: 80px;
         /* Espacio final para que el dedo no tape contenido */
         display: none;
     }

     .tab-content.active {
         display: block !important;
     }
 }



 /* =========================================
    SCROLL MENU CONTEXTUAL (Mobile)
   ========================================= */

 /* 1. EL CONTENEDOR (Wrapper) */
 .scroll-ui-wrapper {
     position: relative;
     width: 100%;
     -ms-flex-negative: 0;
     flex-shrink: 0;
 }

 /* 2. LA FLECHA (Base común) */
 .scroll-ui-arrow {
     position: absolute;
     right: -20px;
     top: 0;
     bottom: 0;
     z-index: 20;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     border: none;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: opacity 0.3s ease;
     -o-transition: opacity 0.3s ease;
     transition: opacity 0.3s ease;
     padding-left: 8px;
 }

 .scroll-ui-arrow.visible {
     opacity: 1;
     visibility: visible;
 }

 /* 3. TEMAS (Colores y Tamaños específicos) */

 /* Tema Header (Fondo Blanco / Texto Verde) */
 .scroll-ui-arrow.theme-light {
     width: 30px;
     background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 1)));
     background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 100%);
     background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 100%);
     color: var(--color-green);
 }

 /* Tema Popup (Fondo Oscuro / Texto Dorado) */
 .scroll-ui-arrow.theme-dark {
     width: 45px;
     /* Un poco más ancho para mejor degradado oscuro */
     background: -webkit-gradient(linear, left top, right top, from(rgba(27, 58, 40, 0)), color-stop(40%, rgba(27, 58, 40, 0.9)), to(rgba(27, 58, 40, 1)));
     background: -o-linear-gradient(left, rgba(27, 58, 40, 0) 0%, rgba(27, 58, 40, 0.9) 40%, rgba(27, 58, 40, 1) 100%);
     background: linear-gradient(to right, rgba(27, 58, 40, 0) 0%, rgba(27, 58, 40, 0.9) 40%, rgba(27, 58, 40, 1) 100%);
     color: var(--color-gold);
     right: 0;
     height: 32px;
 }


 /* 4. EL CONTENEDOR DE ITEMS (Donde se hace scroll) */
 .scroll-ui-content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     /* Asegura layout horizontal */
     overflow-x: auto;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     /* Firefox */

     /* Espacio extra al final para que la flecha no tape el último item */
     padding-right: 20px !important;
 }

 .scroll-ui-content::-webkit-scrollbar {
     display: none;
 }

 /* Chrome/Safari */


 /* 5. OCULTAR EN DESKTOP */
 @media (min-width: 1025px) {
     .scroll-ui-arrow {
         display: none !important;
     }

     .scroll-ui-content {
         padding-right: 0 !important;
         overflow-x: visible;
     }
 }


 /* 5. OCULTAR EN DESKTOP */
 @media screen and (min-width: 768px) and (max-width: 1024px) {


     .full-screen-popup .tab-content.active,
     .next-chapter-content {
         padding: 40px 80px;
     }

     .combined-text-col {
         padding: 0 80px 40px 80px;
     }

     .combined-gallery-col {
         padding: 0 80px;
     }

     .full-screen-popup .popup-tabs-nav,
     .scroll-ui-content {
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
     }

     .next-chapter-content,
     .next-chapter-img {
         min-height: 50vh;

     }


     .masonry-2-items,
     .masonry-3-items .masonry-row {
         display: flex;
         flex-direction: row;

     }

     .masonry-2-items .masonry-row,
     .masonry-3-items .masonry-row .masonry-item {
         max-width: 50%;

     }

     .masonry-1-items .masonry-item{
        height:600px;
        max-width: 600px;
        margin: auto;
     }


 }


 .next-chapter-img img {
     width: 100%;
     /* Ajusta al ancho del contenedor */
     height: 100%;
     /* O la altura fija que tenga tu contenedor */
     object-fit: cover;
     /* Cubre el área sin deformar la imagen */
     object-position: top center;
     /* Alinea la imagen a la parte superior */
 }



.masonry-1-items .masonry-item {
    position: relative;
    width: 100% !important;
    max-width: 600px; /* Ajusta según tu diseño */
    margin: 0 auto;
}



.masonry-2-items .masonry-item {
    position: relative;
    width: 100% !important;
    max-width: 500px; /* Ajusta según tu diseño */
    margin: 0 auto;
}