/* ================================================== */
/* CORRECCIÓN PARA ANIMACIÓN DEL EDITOR DE CÓDIGO */
/* ================================================== */

/* Editor más ancho y sin restricciones de contenedor */
.code-editor-container {
    position: relative;
    z-index: 10 !important; 
    isolation: isolate; 
    overflow: visible !important; /* Volver a visible para mostrar el editor completo */
    max-height: none !important; /* Sin restricción de altura */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important; /* Sin padding que lo haga más pequeño */
    margin: 0 !important;
}

/* Eliminar scrollbars del contenedor del editor */
.code-editor-container::-webkit-scrollbar {
    display: none !important;
}

.code-editor-container {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* SVG del editor más grande y sin restricciones */
.code-editor-container svg {
    position: relative;
    z-index: 2 !important;
    overflow: visible !important; /* Volver a visible para mostrar el editor completo */
    max-height: none !important; /* Sin restricción de altura */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    transform: scale(1.1) !important; /* Hacer el editor un poco más grande */
}

/* Eliminar scrollbars del SVG completamente sin afectar el contenido */
.code-editor-container svg::-webkit-scrollbar {
    display: none !important;
}

.code-editor-container svg {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Asegurar que el contenedor de la columna no genere scrollbars */
.hero-section .col-lg-6 {
    overflow: visible !important;
}

.hero-section .col-lg-6::-webkit-scrollbar {
    display: none !important;
}

.hero-section .col-lg-6 {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Contenedor del código sin restricciones */
.code-editor-container #code-content {
    overflow: visible !important;
}

/* Asegurar altura suficiente para el contenedor del editor */
.code-editor-container {
    min-height: 600px !important; /* Altura mínima para evitar recortes */
    height: auto !important;
}

/* Ajustar partículas dinámicas para que no interfieran con el editor */
.dynamic-particles {
    z-index: 1 !important; /* Menor que el editor */
}

.dynamic-particle {
    z-index: 1 !important;
}

/* Ajustar partículas de código flotantes */
.code-particle {
    z-index: 0 !important; /* Menor que el editor */
    pointer-events: none !important;
}

/* Asegurar que las partículas no se superpongan al contenido principal */
.hero-section .dynamic-particles,
.hero-section .code-particle {
    max-height: 80vh; /* Limitar altura para evitar interferencias */
}

/* Mejorar la contención del editor */
.hero-section .col-lg-6:last-child {
    position: relative;
    z-index: 5;
    isolation: isolate;
}

/* Ajustar el contenedor principal del hero para mejor jerarquía */
.hero-content {
    z-index: 15 !important;
    position: relative;
}

/* Asegurar que los elementos flotantes no interfieran */
.floating-icons {
    z-index: 0 !important;
}

.floating-icon {
    z-index: 0 !important;
}

/* Prevenir que las animaciones se salgan de sus contenedores */
.hero-section {
    overflow-x: hidden !important; /* Solo ocultar desbordamiento horizontal */
    overflow-y: visible !important; /* Permitir que se vea el contenido vertical */
    position: relative !important;
}

/* Eliminar scrollbars específicamente de la hero section */
.hero-section::-webkit-scrollbar {
    display: none !important;
}

.hero-section {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Prevenir scrollbars específicamente en el contenedor del editor */
.hero-section .col-lg-6:last-child {
    position: relative;
    z-index: 5;
    isolation: isolate;
    overflow: visible !important; /* Asegurar que el editor se vea completo */
}

/* Eliminar scrollbars de todas las columnas de Bootstrap en hero */
.hero-section .container,
.hero-section .container-fluid,
.hero-section .row,
.hero-section .col-lg-6,
.hero-section .col-md-6,
.hero-section .col-sm-12 {
    overflow: visible !important;
}

.hero-section .container::-webkit-scrollbar,
.hero-section .container-fluid::-webkit-scrollbar,
.hero-section .row::-webkit-scrollbar,
.hero-section .col-lg-6::-webkit-scrollbar,
.hero-section .col-md-6::-webkit-scrollbar,
.hero-section .col-sm-12::-webkit-scrollbar {
    display: none !important;
}

.hero-section .container,
.hero-section .container-fluid,
.hero-section .row,
.hero-section .col-lg-6,
.hero-section .col-md-6,
.hero-section .col-sm-12 {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Optimizar las animaciones para mejor rendimiento */
.dynamic-particle,
.code-particle,
.floating-icon {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ================================================== */
/* ARREGLOS PARA RESPONSIVE Y SCROLL MÓVIL */
/* ================================================== */

/* Asegurar scroll funcional en mobile */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
}

html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Arreglar cualquier contenedor que bloquee el scroll */
.container-fluid,
.container {
    overflow: visible !important;
    position: relative !important;
}

/* Responsive mejorado */
@media (max-width: 768px) {
    .code-editor-container svg {
        transform: scale(0.75) !important; /* Escala menor en mobile */
    }
    
    /* Reducir partículas en mobile para mejor rendimiento */
    .dynamic-particles {
        opacity: 0.3;
    }
    
    .code-particle {
        opacity: 0.2;
    }
    
    /* Asegurar que el scroll funcione en todas las secciones */
    .hero-section,
    .features-section,
    .about-section,
    .equirent-section,
    .contact-section {
        overflow: visible !important;
        position: relative !important;
        touch-action: auto !important;
    }
    
    /* Optimizar padding y margins para mobile */
    .hero-section {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 576px) {
    .code-editor-container svg {
        transform: scale(0.65) !important; /* Escala aún menor en móviles pequeños */
    }
    
    /* Asegurar que el contenido sea scrolleable */
    .col-lg-6,
    .col-md-6,
    .col-sm-12 {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Mejorar el espaciado en móviles pequeños */
    .hero-section {
        min-height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 30px !important;
    }
}

/* Arreglar problemas específicos de iOS Safari */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: scroll !important;
    }
}

/* Eliminar cualquier superposición no deseada */
.code-editor-container::before {
    z-index: -1 !important;
}

.code-editor-container::after {
    z-index: -1 !important;
}

/* Arreglar contenedores que puedan estar bloqueando el touch/scroll */
.hero-section .row,
.hero-section .col-lg-6 {
    pointer-events: none !important;
}

.hero-section .row > *,
.hero-section .col-lg-6 > * {
    pointer-events: auto !important;
}

/* ================================================== */
/* REGLAS ANTI-SCROLLBAR FUERTES */
/* ================================================== */

/* Forzar que NO aparezcan scrollbars en hero section */
.hero-section,
.hero-section *,
.hero-section .container,
.hero-section .row,
.hero-section .col-lg-6,
.hero-section .code-editor-container,
.hero-section .code-editor-container svg {
    overflow: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hero-section::-webkit-scrollbar,
.hero-section *::-webkit-scrollbar,
.hero-section .container::-webkit-scrollbar,
.hero-section .row::-webkit-scrollbar,
.hero-section .col-lg-6::-webkit-scrollbar,
.hero-section .code-editor-container::-webkit-scrollbar,
.hero-section .code-editor-container svg::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Asegurar que solo el body tenga scroll */
html, body {
    overflow-x: hidden !important;
}

/* Forzar overflow visible en cualquier elemento problemático */
.hero-section div,
.hero-section section {
    overflow: visible !important;
}