/* ==========================================================================
   1. CONFIGURACIONES GENERALES Y FUENTES
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Limpieza total y única del body */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;         /* Centra el wrapper principal */
    justify-content: flex-start; /* Permite que la página crezca de arriba a abajo */
    background: #1e1e1e;
    overflow-x: hidden;
}

/* Contenedor que agrupa todo para mantener el ancho máximo controlado */
.main-wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

/* ====================================================================
   ESTILOS PARA EL TÍTULO TEXTUAL EN MOVIMIENTO (CUADRI)
   ========================================================================== */
div.cuadri {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh; /* Ocupa el 100% del alto de la pantalla de inicio */
   
    /* Centrado absoluto perfecto */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
   
    text-align: center;
    
    /* RESTAURADO: Capa baja para que las imágenes (que tienen z-index superior) pasen por encima */
    z-index: 5 !important; 
    
    pointer-events: none;
    box-sizing: border-box;
}

div.cuadri h1 {
    font-family: 'Black Ops One', sans-serif;
    font-size: 120px;
    color: #e1e1e1;
    margin: 0;
    padding: 0 20px;
    letter-spacing: 6px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

h2 {
    font-family: 'Black Ops One', sans-serif;
    font-size: 60px;
    color: #e1e1e1;
    margin-top: 80px;
    letter-spacing: 4px;
}

/* AQUÍ ESTÁ TU H4 EN POPPINS CON NEGRITA */
h4 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 23px;              
    color: #efc300;   
    margin-top: -10px;  
    text-align: left !important; 
}

/* ==========================================================================
   LÍNEA CON MEDIDA FIJA E INDEPENDIENTE PARA TÍTULOS
   ========================================================================== */

.linea-titulo {
    position: relative;        
    display: inline-block;    
    padding-bottom: 15px;     /* Espacio vertical entre texto y línea */
    margin-bottom: 30px;      
    
    /* Evita que herede distorsiones si el título tiene efectos de escala o movimiento */
    transform: translateZ(0); 
    backface-visibility: hidden;
}

.linea-titulo::after {
    content: "";              
    position: absolute;
    bottom: 0;                
    left: 50%;                
    transform: translateX(-50%); 
    
    /* CONTROL DE MEDIDA FIJA: */
    width: 1150px;             /* Aquí manejas el largo a tu gusto */
    
    /* CONFIGURACIÓN ULTRA NITIDEZ: Fija 1px real sin importar la resolución */
    height: 1px;              
    background-color: #e1e1e1; 
    
    /* SOLUCIÓN AL SUBPIXEL RENDERING: Obliga al navegador a renderizar bordes limpios */
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

/* ==========================================================================
   2. TEXTOS Y ANIMACIONES DE PÁRRAFO
   ========================================================================== */

p {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;              
    color: #e1e1e1;              
    line-height: 1.6;
    margin: 40px auto 80px auto;
    text-align: center;            
    
    /* ESTADO INICIAL: Oculto y un poco más abajo */
    opacity: 0;
    transform: translateX(-50%) translateY(30px); 
    
    width: 75vw;                 
    max-width: 1600px;           
    position: relative;
    left: 50%;
    padding: 0;                  

    /* Configuración de 2 columnas */
    columns: 1;                  
    column-gap: 110px;           
    text-wrap: pretty;           

    /* Transición suave para que funcione en ambas direcciones */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ESTADO VISIBLE: Esta clase se pondrá al bajar y se quitará al subir */
p.parrafo-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Vuelve a su altura original */
}

/* ==========================================================================
   TEXTO AUTOR (UNA SOLA COLUMNA REAL Y CONTINUA)
   ========================================================================== */
.texto-autor { 
    font-family: 'Poppins', sans-serif;
    font-size: 20px;              
    color: #e1e1e1;              
    line-height: 1.6;
    margin: 40px auto 80px auto;
    
    /* EL REMEDIO REAL: Fuerza a comportarse como un bloque único y continuo */
    display: block;                
    text-align: center;           
    
    /* ANULA CUALQUIER DIVISIÓN DE COLUMNAS HEREDADA DEL PADRE */
    column-count: 1 !important;   
    columns: 1 !important;
    
    /* Tu estructura de movimiento original intacta */
    position: relative;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    opacity: 0;
}

/* El estado visible para la animación */
p.visible,
.texto-autor.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0); 
}

/* ==========================================================================
   3. ESTRUCTURA DE PANTALLAS Y NAVEGACIÓN
   ========================================================================== */
.screen {
    display: none;
}

.screen.active {
    display: block;
}

#inicio {
    min-height: 300vh;
    background: #1e1e1e;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 100px 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

/* ==========================================================================
   4. PESTAÑA DE NAVEGACIÓN SUPERIOR FIJA
   ========================================================================== */
.buttons-group {
    display: flex !important;
    flex-direction: row !important;   
    justify-content: center !important; 
    align-items: center !important;
    gap: 24px !important;              
    
    position: fixed !important;        
    top: 0 !important;                
    left: 0 !important;                
    width: 100vw !important;          
    height: 65px !important;          
    background-color: #e1e1e1 !important; 
    
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); 
    z-index: 99999 !important; 
    box-sizing: border-box !important;
    padding: 0 20px !important;
    margin: 0 !important;              
}

.discover-btn {
    display: inline-flex !important;        
    align-items: center !important;        
    justify-content: center !important;    
    text-align: center !important;         
    white-space: nowrap !important;        
    
    padding: 8px 18px !important;          
    border: 2px solid #1e1e1e !important;      
    border-radius: 25px !important;            
    background: #1e1e1e !important;
    color: #ffffff !important;
    
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;            
    letter-spacing: 2px;        
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.discover-btn:hover {
    background: #ffffff !important;          
    color: #1e1e1e !important;                
    border-color: #1e1e1e !important;        
}

/* ==========================================================================
   COMPENSACIÓN DE SCROLL PARA ENLACES ANCLA
   ========================================================================== */
#seccion-info,
#seccion-concepto,
#seccion-Pix,
#seccion-materialidad {
    scroll-margin-top: 95px !important;
}

.espaciador-inferior {
    display: block;
    width: 100%;
    height: 300px;
    pointer-events: none;
}

/* ==========================================================================
   5. IMÁGENES Y CAPAS VISUALES (PARALLAX)
   ========================================================================== */
.cuadri {
    width: 1100px;
    height: 200px;
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

.img-01, .img-02, .img-03, .img-04,
.img-001, .img-002, .img-003, .img-004,
.img-001-1, .img-002-1, .img-003-1, .img-004-1, .img-003-2 {
    position: absolute;
    z-index: 10;
    left: 50%;
    will-change: transform;
    transition: transform 0.08s linear;
}

.img-01 { width: 450px; height: 650px; top: 400px; margin-left: -500px; transform: rotate(45deg); }
.img-02 { width: 450px; height: 650px; top: 500px; margin-left: 100px;  transform: rotate(-45deg); }
.img-03 { width: 300px; height: 450px; top: 200px; margin-left: 200px;  transform: rotate(80deg); }
.img-04 { width: 200px; height: 300px; top: 35px;  margin-left: -400px; transform: rotate(-65deg); }

.img-004-1 { width: 300px; height: 450px; top: 1400px; margin-left: -400px; transform: rotate(80deg); }
.img-001-1 { width: 300px; height: 450px; top: 1400px; margin-left: 0px;    transform: rotate(80deg); }
.img-003-2 { width: 300px; height: 450px; top: 1400px; margin-left: 200px;  transform: rotate(80deg); }

.img-002   { width: 250px; height: 350px; top: 1450px; margin-left: -200px; transform: rotate(60deg); }
.img-004   { width: 250px; height: 350px; top: 1480px; margin-left: 150px;  transform: rotate(45deg); }
.img-001   { width: 350px; height: 450px; top: 1500px; margin-left: -500px; transform: rotate(150deg); }
.img-003-1 { width: 300px; height: 450px; top: 1500px; margin-left: -200px; transform: rotate(80deg); }
.img-002-1 { width: 300px; height: 450px; top: 1500px; margin-left: 200px;  transform: rotate(80deg); }
.img-003   { width: 250px; height: 250px; top: 1550px; margin-left: -50px;  transform: rotate(80deg); }

.img-01, .img-02, .img-03, .img-04 {
    cursor: pointer !important;
    animation: pulsoEsperaSeguro 2s ease-in-out infinite !important;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
}

.img-01:hover, .img-02:hover, .img-03:hover, .img-04:hover {
    filter: brightness(1.2) !important;
    opacity: 1 !important;
}

@keyframes pulsoEsperaSeguro {
    0%, 100% { opacity: 0.9; filter: brightness(0.85) contrast(1); }
    50% { opacity: 1; filter: brightness(1.15) contrast(1.05); }
}

/* ==========================================================================
   BOTONES ESTÁTICOS
   ========================================================================== */
.grupo-botones-estaticos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; 
    margin: 30px 0;
    width: 100%;
}

.btn-estatico-escala {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0 !important; 
    width: 100px !important;  
    height: 35px !important; 
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important; 
    text-align: center;
    letter-spacing: normal !important;
    font-weight: normal !important; 
}

.btn-estatico-escala:hover {
    transform: scale(1.09) !important;
}

.btn-estatico-escala:active {
    transform: scale(1.02) !important; 
}

.grupo-botones-estaticos .btn-estatico-escala:nth-child(1) {
    background-color:  #aa4d3c !important; 
    color: #ffffff !important;            
}

.grupo-botones-estaticos .btn-estatico-escala:nth-child(2) {
    background-color: #74aa9f !important; 
    color: #ffffff !important;
}

.grupo-botones-estaticos .btn-estatico-escala:nth-child(3) {
    background-color: #273584 !important; 
    color: #ffffff !important;
}

/* ==========================================================================
   PRIMERA GALERIA DE GIFS
   ========================================================================== */
.seccion-bloques-gifs {
    display: flex;            
    justify-content: center;  
    align-items: center;      
    gap: 25px;                
    width: 100%;
    margin-top: 40px;         
    margin-bottom: 90px;      
    margin-left: auto;
    margin-right: auto;       
}

.caja-gif {
    background-color: #000000;
    padding: 12px;            
    border-radius: 15px;      
    box-sizing: border-box;
    width: 350px;             
    height: 350px;            
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;         
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    position: relative;
    z-index: 1;
}

.caja-gif:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 2; 
}

.caja-gif .gif-media {
    width: 100%;              
    height: 100%;             
    object-fit: cover;        
    border-radius: 8px;       
    display: block;
    filter: brightness(0.5);  
    transition: filter 0.4s ease; 
}

.caja-gif:hover .gif-media {
    filter: brightness(1);    
}

/* ==========================================================================
   COMPONENTES TÉCNICOS LINEALES
   ========================================================================== */

.caja-componente-tecnico {
    width: 240px;                     
    background-color: #1e1e1e;        
    border: 1px solid #e1e1e1;        
    border-radius: 4px;               
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.ruleta-tecnica-contenedor {
    width: 100%;
    padding: 25px 0;                  
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #e1e1e1; 
}

.ruleta-svg {
    width: 170px;                     
    height: 170px;
}

.linea-tecnica {
    fill: none;
    stroke: #e1e1e1;                  
    stroke-width: 1px;                
}

.texto-tecnico-numero {
    fill: #e1e1e1;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-anchor: middle;              
    dominant-baseline: middle;  
    text-align: left;      
}

.espacio-texto-tecnico {
    padding: 15px;
    background-color: #1e1e1e;        
    color: #e1e1e1;
    font-family: 'Poppins', sans-serif;
    text-align: left;  
}

.espacio-texto-tecnico h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    letter-spacing: 2px;              
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.espacio-texto-tecnico p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #e1e1e1;                   
    width: 100% !important;           
    max-width: 100% !important;
    transform: none !important;       
    opacity: 1 !important;            
    left: 0 !important;
    columns: 1 !important;            
    text-align: left;  
    margin-top: 15px;
}

/* ==========================================================================
   ANIMACIÓN DE ROTACIÓN PARA LA RULETA
   ========================================================================== */
.ruleta-svg {
    transform-origin: center center;     
    transform-box: fill-box;             
    transition: transform 0.8s ease-out; 
}

.caja-componente-tecnico:hover .ruleta-svg {
    animation: girarRuletaCompleta 8s linear infinite;
}

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

/* ==========================================================================
   COMPONENTES TÉCNICOS LINEALES - ADICIÓN DE FICHA
   ========================================================================== */

.grafico-tecnico-contenedor {
    width: 100%;
    padding: 25px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #e1e1e1;
}

.ficha-svg {
    width: 170px;
    height: 170px;
}

.linea-guia-tecnica {
    fill: none;
    stroke: #e1e1e1;                  
    stroke-width: 1px;
    stroke-dasharray: 4 4;            
}

.ficha-svg {
    transform-origin: bottom center;     
    transform-box: fill-box;
    transition: transform 0.2s ease;
}

.caja-componente-tecnico:hover .ficha-svg {
    animation: sacudirPeonTecnico 0.4s ease-in-out infinite;
}

@keyframes sacudirPeonTecnico {
    0%   { transform: rotate(0deg) translate(0, 0); }
    20%  { transform: rotate(-3deg) translate(-0.5px, 0); }
    40%  { transform: rotate(2deg) translate(0.5px, 0); }
    60%  { transform: rotate(-2deg) translate(-0.5px, 0); }
    80%  { transform: rotate(1deg) translate(0.5px, 0); }
    100% { transform: rotate(0deg) translate(0, 0); }
}

/* ==========================================================================
   COMPONENTES TÉCNICOS LINEALES - ADICIÓN DE CARTA
   ========================================================================== */

.carta-svg {
    width: 170px;
    height: 170px;
}

.texto-carta-sub {
    fill: #e1e1e1;                     
    font-family: 'Poppins', sans-serif;
    font-size: 7px;
    font-weight: bold;
    letter-spacing: 1px;
    text-anchor: middle;
}

.texto-carta-titulo {
    fill: #e1e1e1;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-anchor: middle;
}

.texto-carta-cuerpo {
    fill: #e1e1e1;
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    text-anchor: middle;
}

.texto-carta-resaltado {
    fill: #e1e1e1;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-anchor: middle;
}

.carta-svg {
    transform-origin: center center;
    transform-box: fill-box;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
    will-change: transform; 
}

.caja-componente-tecnico:hover .carta-svg {
    transform: scale(1.1); 
    filter: drop-shadow(0px 0px 8px rgba(225, 225, 225, 0.15)); 
}

/* ==========================================================================
   ALINEACIÓN EN FILA ESTRICTA (SCOLL HORIZONTAL SIN PERDER TAMAÑO)
   ========================================================================== */
.contenedor-ruletas-fila {
    display: flex;                  
    flex-direction: row;            
    gap: 25px;                      
    justify-content: flex-start;    
    align-items: stretch;           
    flex-wrap: nowrap !important;   
    overflow-x: auto;               
    padding: 20px 10px;             
    margin: 40px auto;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #e1e1e1 #1e1e1e;
}

.contenedor-ruletas-fila::-webkit-scrollbar {
    height: 6px;
}
.contenedor-ruletas-fila::-webkit-scrollbar-track {
    background: #1e1e1e;
}
.contenedor-ruletas-fila::-webkit-scrollbar-thumb {
    background-color: #e1e1e1;
    border-radius: 3px;
}

/* ==========================================================================
   COMPONENTES TÉCNICOS LINEALES - ADICIÓN DE TABLERO
   ========================================================================== */

.tablero-svg {
    width: 170px;
    height: 170px;
}

.tablero-svg {
    transform-origin: center center;     
    transform-box: fill-box;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.caja-componente-tecnico:hover .tablero-svg {
    transform: scale(1.1);               
}

/* ==========================================================================
   COMPONENTES TÉCNICOS LINEALES - ADICIÓN DE CUADRÍCULA
   ========================================================================== */

.cuadrula-svg {
    width: 170px;
    height: 170px;
}

.texto-matriz-num {
    fill: #e1e1e1;                     
    font-family: 'Poppins', sans-serif;
    font-size: 7px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
}

.texto-matriz-num-centro {
    fill: #e1e1e1;                     
    font-family: 'Poppins', sans-serif;
    font-size: 7.5px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
}

.cuadrula-svg rect,
.cuadrula-svg path,
.cuadrula-svg circle {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.4s ease;
}

.cuadrula-svg rect[x="145"] {
    transform-origin: 145px 87.5px;
    transform-box: fill-box;
    will-change: transform;
}

.caja-componente-tecnico:hover .cuadrula-svg rect[x="145"] {
    transform: translateX(-50px);
    stroke: #efc300; 
}

.caja-componente-tecnico:hover .cuadrula-svg .linea-guia-tecnica,
.caja-componente-tecnico:hover .cuadrula-svg circle[fill="#e1e1e1"] {
    opacity: 0;
}

/* ==========================================================================
   INTERACCIÓN HOVER: EFECTO AMARILLO TÉCNICO EN DIBUJOS
   ========================================================================== */

.linea-tecnica, 
.texto-tecnico-numero,
.texto-matriz-num-centro,
.ficha-svg circle[fill="#e1e1e1"], 
.ruleta-svg circle[fill="#e1e1e1"],
.texto-carta-titulo,
.texto-carta-resaltado {
    transition: stroke 0.3s ease, fill 0.3s ease;
}

.caja-componente-tecnico:hover .linea-tecnica {
    stroke: #efc300;  
}

.caja-componente-tecnico:hover .texto-tecnico-numero,
.caja-componente-tecnico:hover .texto-matriz-num-centro,
.caja-componente-tecnico:hover .texto-carta-titulo,
.caja-componente-tecnico:hover .texto-carta-resaltado {
    fill: #efc300;  
}

.caja-componente-tecnico:hover .ruleta-svg circle[fill="#e1e1e1"] {
    fill: #efc300;  
}

/* ==========================================================================
   NUEVA GALERÍA ACORDEÓN DE IMPACTO VISUAL
   ========================================================================== */

.galeria-acordeon-impacto {
    display: flex;
    width: 100%;
    max-width: 1150px;           
    height: 400px;              
    gap: 10px;                  
    margin: 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.panel-componente {
    flex: 1;                    
    height: 100%;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    border-radius: 16px;
    overflow: hidden;           
}

.panel-componente .caja-fondo-negro {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #a8a8a8;
    padding: 10px;              
    box-sizing: border-box;
    border-radius: 16px;
}

.panel-componente img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    
    filter: brightness(0.3) grayscale(0.2);
    transition: filter 0.5s ease;
}

.panel-componente .contenido-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.95) 60%); 
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.panel-componente .contenido-panel h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #ffeb3b;             
    font-size: 24px;
    margin: 0 0 10px 0;
}

.panel-componente .contenido-panel p3 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e1e1e1;
    line-height: 1.5;
    text-align: left;
    display: block;
    width: 100%;
    margin: 0;
    
    columns: 1 !important; 
}

.galeria-acordeon-impacto:hover .panel-componente:hover {
    flex: 5;                    
}

.panel-componente:hover img {
    filter: brightness(1) grayscale(0);
}

.panel-componente:hover .contenido-panel {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;    
}

@media (max-width: 768px) {
    .galeria-acordeon-impacto {
        flex-direction: column; 
        height: auto;
        gap: 15px;
    }
    .panel-componente {
        height: 200px;
        flex: none !important;  
    }
    .panel-componente:hover {
        height: 320px;          
    }
    .panel-componente .contenido-panel {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 30%);
    }
    .panel-componente img {
        filter: brightness(0.6);
    }
}

/* ==========================================================================
   CONTENEDOR DE VIDEO INTERACTIVO
   ========================================================================== */

.caja-video-contenedor {
    background-color: #000000;   
    padding: 12px;               
    border-radius: 16px;         
    display: block;              
    overflow: hidden;            
    width: 100%;
    margin: 40px auto;           
    max-width: 750px;            
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease; 
    filter: brightness(0.6);     
}

.caja-video-contenedor video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;          
}

.caja-video-contenedor:hover {
    transform: scale(1.04);      
    filter: brightness(1);       
}

/* ==========================================================================
   ESTADOS DE CONTROL PARA EL DESPLEGABLE INTERACTIVO
   ========================================================================== */

.iframe-oculto {
    display: none !important;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.iframe-visible {
    display: block !important;
    opacity: 1;
    scroll-margin-top: 85px;
}

/* ==========================================================================
   CONTENEDOR PARA IFRAME INTERACTIVO (PIX)
   ========================================================================== */

.caja-iframe-contenedor {
    background-color: #000000;   
    padding: 15px;               
    border-radius: 16px;         
    margin: 40px auto;           
    overflow: hidden;            
    box-sizing: border-box;
    width: 100%;                 
    max-width: 900px;            
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
    filter: brightness(0.6);     
}

.caja-iframe-contenedor iframe {
    width: 100%;
    display: block;
    border-radius: 8px;          
    height: 600px;               
}

.caja-iframe-contenedor:hover {
    transform: scale(1.02);      
    filter: brightness(1);       
}

/* ==========================================================================
   DESPLAZAMIENTO FORZADO DEL PÁRRAFO HACIA LA IZQUIERDA
   ========================================================================== */

.seccion-mixta-oculto {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
}

.texto-columna-izquierda {
    flex: 1;                     
    text-align: left;             
    margin: 0;                   
    margin-left: -210px; 
    max-width: 650px;             
    margin-right: auto;           
    font-family: 'Poppins', sans-serif;
    color: #e1e1e1;
    font-size: 20px;
    line-height: 1.6;             
}

.texto-interactivo-ajuste {
    align-self: flex-start;       
    margin-top: 50px !important; 
}

.contenedor-bloques-secundario {
    display: flex;            
    flex-direction: column;       
    gap: 20px;                    
    flex-shrink: 0;               
    width: 350px;      
}

.caja-gif-secundaria {
    background-color: #000000;
    padding: 12px;            
    border-radius: 15px;      
    box-sizing: border-box;
    width: 340px;             
    height: 300px;            
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;         
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.caja-gif-secundaria .gif-media {
    width: 100%;              
    height: 100%;             
    object-fit: cover;        
    border-radius: 8px;       
    display: block;
    filter: brightness(0.5);  
    transition: filter 0.4s ease;
}

.caja-gif-secundaria:hover {
    transform: scale(1.04);   
}

.caja-gif-secundaria:hover .gif-media {
    filter: brightness(1);    
}

/* ==========================================================================
   FILA DE CUADROS INTERACTIVOS
   ========================================================================== */

.contenedor-cuadros-color {
    display: flex;
    justify-content: center;  
    align-items: center;
    gap: 20px;                
    width: 100%;
    margin: 40px auto;
    flex-wrap: wrap;          
}

.contenedor-cuadros-color .caja-cuadro {
    background: transparent;  
    padding: 0;               
    box-sizing: border-box;
    width: 110px;             
    height: 100px;            
    transform: scale(1);
    opacity: 1;
    transition: transform 1.9s ease, opacity 0.3s ease;
}

.contenedor-cuadros-color .caja-cuadro img {
    width: 100%;
    height: 100%;
    object-fit: cover;        
    border-radius: 12px;      
}

.contenedor-cuadros-color .caja-cuadro:hover {
    transform: scale(1.15);   
    opacity: 0;               
    transition-property: transform, opacity;
    transition-duration: 0.2s, 0.5s;
    transition-delay: 0s, 0.1s;
    transition-timing-function: ease;
}

.contenedor-interactivo {
    display: flex;
    align-items: center;
    gap: 20px; 
    width: 100%;
    margin: 20px 0;
}

.texto-acompanante {
    flex: 1;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #ffffff; 
}

/* ==========================================================================
   CUADRÍCULA ORIGINAL RECTIFICADA
   ========================================================================== */

.cuadricula-miniatura {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 300px;  
    height: 300px; 
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0; 
    background-color: #111111; 
    background-image: 
        linear-gradient(to right, #e1e1e1 2px, transparent 2px),
        linear-gradient(to bottom, #e1e1e1 2px, transparent 2px);
    background-size: 75px 75px; 
    box-shadow: inset 0px 0px 0px 2px #e1e1e1; 
}

.cuadro-amarillo {
    background-color: #ffd32a; 
    cursor: pointer;
    border-radius: 4px; 
    grid-column: 1;
    grid-row: 1;
    z-index: 2; 
    transform: scale(0.80); 
    transition: transform 0.1s ease;
}

/* ==========================================================================
   NUEVO CONTENEDOR NEGRO PARA LA CUADRÍCULA
   ========================================================================== */
.contenedor-negro-juego {
    background-color: #000000;    
    padding: 20px;                
    border-radius: 15px;          
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 340px;                 
    height: 340px;                
    flex-shrink: 0;
    margin-top: 30px;
    position: relative; 
}

/* ==========================================================================
   VARIACIONES DE COLOR PARA LOS CLICKS
   ========================================================================== */

.cuadro-amarillo, .color-amarillo { 
    background-color: #ffd32a !important; 
    box-shadow: 0 0 15px rgba(255, 250, 231, 0.4);
}

.cuadro-rojo, .color-rojo { 
    background-color: #aa4d3c !important; 
    box-shadow: 0 0 15px rgba(252, 167, 167, 0.4);
    border-radius: 4px; 
    transform: scale(0.80); 
}

.cuadro-verde, .color-verde { 
    background-color: #74aa9f !important; 
    box-shadow: 0 0 15px rgba(212, 255, 230, 0.4);
    border-radius: 4px; 
    transform: scale(0.80); 
}

.cuadro-azul, .color-azul { 
    background-color: #1565c0 !important; 
    box-shadow: 0 0 15px rgba(219, 236, 253, 0.4);
    border-radius: 4px; 
    transform: scale(0.80); 
}

/* ==========================================================================
   SECCIÓN DE FONDO COMPLETO DE EXTREMO A EXTREMO
   ========================================================================== */

.franja-fondo {
    width: 100%;                  
    box-sizing: border-box;
    background-color: #1e1e1e;    
    padding: 60px 0;              
    margin: 40px 0;               
    box-shadow: 0 0 0 100vw #ffffff;
    clip-path: inset(0 -100vw);
}

.franja-fondo .main-wrapper {
    width: 100%;
    max-width: 1100px;            
    margin: 0 auto;               
    padding: 0 20px;              
    box-sizing: border-box;
}

.franja-fondo h2 {
    text-align: center !important; 
}

/* ==========================================================================
   ESTILO PARA EL TEXTO INFERIOR
   ========================================================================== */
.texto-prueba-interaccion {
    position: absolute;
    bottom: -35px; 
    left: 50%;
    transform: translateX(-50%); 
    white-space: nowrap; 
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #e1e1e1;
    text-align: center;
}

/* ==========================================================================
   11. SECCIÓN DE COLOR CLARA / FOOTER
   ========================================================================== */

.site-footer {
    background: #e1e1e1;
    padding: 60px 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.site-footer > .footer-logos {
    display: none !important;
}

.site-footer .footer-content {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 35px;

    margin: 0 auto !important;
    padding: 0 !important;

    animation: none !important;
    transition: none !important;
}

.site-footer .footer-content .footer-logos {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;

    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;

    animation: none !important;
    transition: none !important;
}

.footer-logo-placeholder {
    width: 250px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    animation: none !important;
    transition: none !important;
}

.site-footer .footer-content .p2 {
    font-family: 'Poppins', sans-serif !important;
    color: #1e1e1e !important;
    font-size: 14px !important;
    line-height: 1.7 !important;

    text-align: center !important;

    width: 100% !important;
    max-width: 750px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    white-space: normal !important;
    box-sizing: border-box !important;

    animation: none !important;
    transition: none !important;
}

.footer-link {
    color: #1e1e1e;
    text-decoration: underline;
    font-weight: 500;
    display: inline-block;
    margin-top: 5px;

    animation: none !important;
    transition: none !important;
}
/* ==========================================================================
   EFECTO LÍQUIDO LOCALIZADO (LETRA POR LETRA)
   ========================================================================== */
.contenedor-letras {
    font-family: 'Black Ops One', sans-serif !important; 
    font-size: 60px !important;
    color: #ffffff !important;
    letter-spacing: 4px !important;
    display: inline-block;
    cursor: default;
}

.contenedor-letras span {
    display: inline-block;
    transition: filter 0.2s ease, opacity 0.4s ease; 
    opacity: 1;
    filter: none;
    white-space: pre; 
}

.contenedor-letras span.letra-activa {
    filter: url(#deformacion-liquida) !important; 
    opacity: 0 !important; 
    transition: filter 0.1s ease, opacity 0.1s ease; 
}


/* ==========================================================================
   NUEVA TRANSICIÓN: DESAPARICIÓN ALEATORIA Y PARPADEO
   ========================================================================== */

.capa-transicion-negra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 1.2s ease-in-out;
}

.capa-transicion-negra.activa {
    opacity: 1;
    pointer-events: all;
}

.letra-esfumada {
    opacity: 0 !important;
    filter: blur(4px) !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

@keyframes parpadeoTenso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.boton-parpadeo-activo {
    animation: parpadeoTenso 0.2s ease-in-out infinite !important;
    pointer-events: none;
}


/* ==========================================================================
   ANIMACIÓN DE ENTRADA SUAVE
   ========================================================================== */

.cortina-entrada-negra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 99999; 
    pointer-events: none; 
    animation: desvanecerEntrada 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes desvanecerEntrada {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden; 
    }
}


/* ==========================================================================
   13. PERSONALIZACIÓN EXCLUSIVA DEL BOTÓN FINAL DESCUBRIR
   ========================================================================== */
.discover-btn-final {
    padding: 16px 45px;          
    font-size: 18px;             
    min-width: 220px;            
    border: 2px solid #e1e1e1;
    border-radius: 25px;
    background: #1e1e1e;
    color: #e1e1e1;
    letter-spacing: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
    text-decoration: none;
    display: inline-flex;      
    align-items: center;        
    justify-content: center;    
    text-align: center;        
}

.discover-btn-final:hover {
    background: #e1e1e1;
    color: black;
}

/* ==========================================================================
   14. CONFIGURACIÓN COMPLETA DEL MINIJUEGO
   ========================================================================== */
.escenario-juego {
    width: 100vw !important;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #1e1e1e !important;
    cursor: default !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    perspective: 1000px !important;
}

.linterna-oscuridad {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #1e1e1e !important;
    z-index: 10 !important;
    pointer-events: none !important;
    
    mask-image: radial-gradient(circle 160px at var(--x, -500px) var(--y, -500px), transparent 100%, black 100%) !important;
    -webkit-mask-image: radial-gradient(circle 160px at var(--x, -500px) var(--y, -500px), rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
}

.cuadricula-oculta {
    position: absolute !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important;
    grid-template-rows: repeat(auto-fill, minmax(50px, 1fr)) !important;
    background-color: #1a1a1a !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: calc(100vw - 40px) !important;
    height: calc(100vh - 40px) !important;
    overflow: hidden !important;
}

.casilla-secreta {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease !important;
}

.cuadrado-rojo {
    background-color: #aa4d3c !important;
    box-shadow: 0 0 25px rgba(255, 164, 149, 0.9) !important;
    pointer-events: auto !important;
    border-radius: 4px !important;
    z-index: 20 !important;
    transition: transform 0.2s ease, opacity 0.5s ease !important;
}
.cuadrado-rojo:active { transform: scale(0.85) !important; }

.cuadrado-verde {
    background-color: #74aa9f !important;
    box-shadow: 0 0 25px rgba(177, 255, 181, 0.9) !important;
    pointer-events: auto !important;
    border-radius: 4px !important;
    z-index: 20 !important;
    transition: transform 0.2s ease, opacity 0.5s ease !important;
}
.cuadrado-verde:active { transform: scale(0.85) !important; }

.cuadrado-amarillo {
    background-color: #fbc02d !important;
    box-shadow: 0 0 25px rgba(251, 236, 196, 0.9) !important;
    pointer-events: auto !important;
    border-radius: 4px !important;
    z-index: 20 !important;
    transition: transform 0.2s ease, opacity 0.5s ease !important;
}
.cuadrado-amarillo:active { transform: scale(0.85) !important; }

.cuadrado-azul {
    background-color: #1565c0 !important;
    box-shadow: 0 0 25px rgba(191, 221, 255, 0.9) !important;
    pointer-events: auto !important;
    border-radius: 4px !important;
    z-index: 20 !important;
    transition: transform 0.2s ease, opacity 0.5s ease !important;
}
.cuadrado-azul:active { transform: scale(0.85) !important; }

/* ==========================================================================
   CLASES PARA LOS COLORES MALOS
   ========================================================================== */
.cuadrado-malo-morado { background-color: #6a1b9a !important; border-radius: 4px !important; }
.cuadrado-malo-naranja { background-color: #d84315 !important; border-radius: 4px !important; }
.cuadrado-malo-gris { background-color: #4e342e !important; border-radius: 4px !important; }
.cuadrado-malo-rosa { background-color: #c2185b !important; border-radius: 4px !important; }
.cuadrado-malo-cian { background-color: #00838f !important; border-radius: 4px !important; }

/* ==========================================================================
   EFECTO DE SACUDIDA / TEMBLOR AL FALLAR
   ========================================================================== */
.efecto-temblor {
    animation: temblor 0.15s ease-in-out infinite !important;
}

@keyframes temblor {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* ==========================================================================
   ESTILOS PARA EL MENSAJE DE ÉXITO FINAL
   ========================================================================== */
.mensaje-exito-pantalla {
    position: absolute;
    bottom: 40px;               
    left: 50%;
    transform: translateX(-50%) translateY(20px); 
    
    font-family: 'Poppins', sans-serif; 
    font-size: 16px;                  
    letter-spacing: 1px;              
    color: #1e1e1e;                   
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); 
    z-index: 100;                     
    pointer-events: none;             
    
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mensaje-exito-pantalla.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0); 
}

/* ==========================================================================
   FONDO NEGRO PARA EL FINAL DE LAS 4 CONSTELACIONES
   ========================================================================== */

.escenario-juego.final-constelaciones {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
}

.escenario-juego.final-constelaciones .cuadricula-oculta {
    background-color: #1e1e1e !important;
    background: #1e1e1e!important;
}

.escenario-juego.final-constelaciones .mensaje-exito-pantalla {
    color: #e1e1e1 !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   SELECTOR INICIAL DE CANTIDAD DE FORMAS
   ========================================================================== */
#selector-constelaciones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 24px;
    padding: 55px 55px 50px 55px; 
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: white;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 640px;
    max-width: 95%; 
    min-height: 280px; 
    box-sizing: border-box;
}

.back-arrow {
    position: absolute;       
    top: 20px;                
    left: 25px;               
    text-decoration: none;
    color: #e1e1e1;
    font-size: 38px;          
    font-weight: bold;
    line-height: 1;
    transition: transform 0.25s ease;
    cursor: pointer;
    z-index: 10000;           
}

.back-arrow:hover {
    transform: scale(1.15);
}

.advertencia-sitio {
    all: unset !important; 
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    color: #ffbc42 !important; 
    font-weight: 700 !important;
    margin: 45px 0 10px 0 !important;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    max-width: 100%;
    box-sizing: border-box;
}

#selector-constelaciones h2 {
    margin: 10px 0 24px 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    color: white;
}

.selector-botones-shapes {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; 
}

.boton-cantidad-formas {
    padding: 14px 22px;
    border-radius: 18px;
    border: 1px solid white;
    background: transparent;
    color: white;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.boton-cantidad-formas:hover {
    background: white;
    color: #1e1e1e;
}

#boton-continuar-juego:hover {
    transform: translateX(-50%) scale(1.05) !important;
    background-color: #e1e1e1 !important;
    font-family: 'Poppins', sans-serif;
}

/* ==========================================================================
   ESTILOS PARA EL BOTÓN "CONTINUAR"
   ========================================================================== */
.boton-continuar-interactivo {
    position: fixed;         
    top: 10%;                
    left: 50%;
    transform: translateX(-50%) scale(1); 
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 1px;
    padding: 14px 32px;
    outline: none;
    background-image: none !important; 
    filter: none !important;            
    background: #ffffff !important; 
    background-color: #ffffff !important; 
    color: #1e1e1e !important;            
    border: 2px solid #ffffff !important; 
    border-radius: 25px;       
    cursor: pointer;
    z-index: 9999999 !important;   
    pointer-events: auto !important;      
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.boton-continuar-interactivo.mostrar {
    opacity: 1;
}

.boton-continuar-interactivo:hover {
    transform: translateX(-50%) scale(1.12) !important; 
    background: #ffffff !important;                     
    background-color: #ffffff !important; 
    color: #1e1e1e !important;                           
    border-color: #ffffff !important;      
}

.boton-continuar-interactivo:active {
    transform: translateX(-50%) scale(0.98) !important; 
}


/* ==========================================================================
   ESTILO DEFINITIVO Y UNIFICADO PARA EL BOTÓN DE VOLVER
   ========================================================================== */
#boton-volver-experiencia {
    display: inline-block !important;    
    visibility: visible !important;
    top: 10px;
    opacity: 0;                          
    transition: opacity 1s ease-in-out !important; 
    margin: 40px auto !important;        
    background-color: #ffffff !important; 
    color: #000000 !important;            
    border: 3px solid #ffffff !important; 
    padding: 14px 28px !important;        
    font-size: 1.1rem !important;
    font-weight: 700 !important;          
    font-family: 'Poppins', sans-serif !important; 
    text-transform: none !important;      
    cursor: pointer !important;
    border-radius: 30px !important;       
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4) !important; 
}

#boton-volver-experiencia.mostrar-suave {
    opacity: 1 !important;                
}

#boton-volver-experiencia:hover {
    background-color: #ffffff !important; 
    color: #1e1e1e !important;            
    border-color: #ffffff !important;
}

/* ==========================================================================
   ESTILOS PARA EL FINAL INTERACTIVO "CUADRICULANDO"
   ========================================================================== */
#revelacion-palabra-oculta {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    animation: aparecerPalabra 0.3s ease-out;
    text-transform: uppercase;
}

@keyframes aparecerPalabra {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.linea-trayectoria {
    pointer-events: none !important;
}

#contenedor-linea-final svg rect {
    animation: pulsoLuminosoEstatico 1.5s infinite ease-in-out !important;
    cursor: pointer;
    opacity: 1 !important; 
}

@keyframes pulsoLuminosoEstatico {
    0% {
        filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
        stroke: rgba(255, 255, 255, 0.4);
        stroke-width: 1.5;
    }
    50% {
        filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 1)); 
        stroke: rgba(255, 255, 255, 1); 
        stroke-width: 3; 
    }
    100% {
        filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
        stroke: rgba(255, 255, 255, 0.4);
        stroke-width: 1.5;
    }
}

/* ==========================================================================
   15. EFECTOS FINALES: INVERSIÓN TOTAL Y COLAPSO CINEMÁTICO
   ========================================================================== */
.escenario-juego.modo-invertido {
    background-color: #e1e1e1 !important;
    transition: background-color 0.4s ease !important;
}

.linterna-oscuridad.linterna-invertida {
    background-color: #e1e1e1 !important;
    mask-image: radial-gradient(circle 160px at var(--x, -500px) var(--y, -500px), black 100%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(circle 160px at var(--x, -500px) var(--y, -500px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%) !important;
}

.cuadricula-oculta.cuadricula-invertida {
    background-color: #e1e1e1 !important;
}

.cuadricula-invertida .casilla-secreta {
    border: 1px solid rgba(30, 30, 30, 0.15) !important;
    perspective: 1200px !important;
}

.casilla-colapsada {
    animation: colapsoCinematico 5.0s cubic-bezier(0.3, 0, 0.2, 1) forwards !important;
}

@keyframes colapsoCinematico {
    0% { transform: translate(0, 0) rotate(0deg) scale(1) rotateX(0deg); opacity: 1; }
    25% { transform: translate(calc(var(--rx) * 2), calc(var(--ry) * 2)) rotate(var(--rot)) scale(0.95) rotateX(25deg); opacity: 0.9; }
    55% { transform: translate(calc(var(--rx) * -1.5), calc(var(--ry) * 4 + 100px)) rotate(calc(var(--rot) * -1.5)) scale(0.7) rotateY(45deg); opacity: 0.7; }
    100% { transform: translate(calc(var(--rx) * 5), calc(var(--ry) * 10 + 900px)) rotate(calc(var(--rot) * 4)) scale(0) rotateX(90deg); opacity: 0; }
}

/* ==========================================================================
   16. FASE 2: MATRIZ DE DECODIFICACIÓN
   ========================================================================== */
#contenedor-linea-final {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.linea-trayectoria {
    stroke: #aa4d3c !important;
    stroke-width: 2px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: 4 4 !important;
    opacity: 0;
    transition: opacity 1.2s ease 3.5s !important;
}

.linea-trayectoria.mostrar-linea {
    opacity: 0.6 !important;
}

.particula-cuadrado {
    position: absolute !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid #111111 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: monospace !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: transparent !important; 
    box-sizing: border-box !important;
    pointer-events: auto !important; 
    
    animation: flotacionAleatoria 3.2s infinite ease-in-out alternate;
    transition: transform 0.2s ease-out, border-color 0.4s ease !important;
    will-change: transform;
}

.particula-cuadrado.esquivando-cursor {
    animation: none !important;
}

.particulas-congeladas .particula-cuadrado {
    animation: none !important;
    animation-play-state: paused !important;
    border-color: #aa4d3c !important;
}

.particulas-reunidas .particula-cuadrado {
    animation: none !important;
    animation-play-state: paused !important;
    pointer-events: none !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(var(--desfase-x), -50%) rotate(0deg) !important;
    border: 1px solid #aa4d3c !important;
    background-color: #111111 !important;
    color: #ffffff !important; 
    box-shadow: 0 0 15px rgba(170, 77, 60, 0.4) !important;
    transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1), left 2.5s cubic-bezier(0.25, 1, 0.5, 1), top 2.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.5s, color 0.5s !important;
}

.particulas-explotadas .particula-cuadrado {
    animation: none !important;
    opacity: 0 !important;
    color: #ffffff !important;
    background-color: #111111 !important;
    
    transform: translate(var(--exp-x), var(--exp-y)) translateZ(850px) rotate(var(--exp-r)) scale(8) !important;
    border-color: #aa4d3c !important;
    box-shadow: 0 0 40px rgba(170, 77, 60, 0) !important;
    
    transition: transform 2.5s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 2.2s cubic-bezier(0.1, 0.8, 0.2, 1), color 0.3s ease !important;
}

@keyframes flotacionAleatoria {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(var(--mov-x, 80px), var(--mov-y, 75px)) rotate(var(--mov-r, 70deg)); }
}

/* ==========================================================================
   18. TEXTO DE INSTRUCCIÓN INICIAL (PARPADEANTE)
   ========================================================================== */
#instruccion-juego {
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    letter-spacing: 2px !important;
    text-transform: lowercase;
    z-index: 15 !important; 
    pointer-events: none !important;
    
    animation: parpadeoSutil 2.5s infinite ease-in-out !important;
    transition: opacity 0.5s ease !important;
}

@keyframes parpadeoSutil {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.75; }
}

.casilla.activado-rojo {
    background-color: #aa4d3c !important; 
    box-shadow: 0 0 15px rgba(170, 77, 60, 0.6) !important; 
    transition: background-color 0.5s ease, box-shadow 0.5s ease !important;
}

/* ==========================================================================
   CARRUSEL AUTO-RESPONSIVO
   ========================================================================== */
.carrusel-loop-contenedor {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    background: transparent;
    padding: 1.5vh 0; 
    margin: 1rem 0;   
    box-sizing: border-box;
    display: flex;
}

.carrusel-loop-tira {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw; 
    width: max-content;
    animation: carruselInfinitoPerfecto 12s linear infinite;
}

.carrusel-loop-tira img {
    height: clamp(40px, 5vw, 90px); 
    width: auto;  
    object-fit: contain;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

@keyframes carruselInfinitoPerfecto {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-50% - 1vw), 0, 0);
    }
}