/* ========================================
   RESPONSIVE FIXES PARA HÉROES ANIMADOS
   ======================================== */

/* --- HERO 1: Ajustes generales móvil y tablets --- */

/* Por defecto: mostrar versión desktop */
#hero-animado .hero-title-desktop {
    display: block;
}

#hero-animado .hero-title-mobile {
    display: none;
}

/* Rango intermedio: 768px a 999px */
@media (min-width: 768px) and (max-width: 999px) {
    /* Cambiar a título de una línea también en tablets */
    #hero-animado .hero-title-desktop {
        display: none !important;
    }
    
    #hero-animado .hero-title-mobile {
        display: block !important;
    }
    
    #hero-animado .hero-3d-container {
        height: 380px !important;
    }
    
    #hero-animado .glass-card-chatbot {
        transform: scale(0.65) !important;
        max-width: 280px;
    }
    
    /* Ocultar SEO Growth también en tablets */
    #hero-animado .seo-growth-card {
        display: none !important;
    }
    
    #hero-animado .hero-title {
        font-size: 2.5rem !important;
    }
    
    #hero-animado .lead {
        font-size: 1rem !important;
    }
}

/* Móviles: menos de 768px */
@media (max-width: 767px) {
    #hero-animado {
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    /* Cambiar a título de una línea y permitir flujo normal */
    #hero-animado .hero-title-desktop {
        display: none !important;
    }
    
    #hero-animado .hero-title-mobile {
        display: block !important;
        white-space: normal !important;
    }
    
    #hero-animado .hero-title-mobile span {
        display: inline !important;
    }
    
    #hero-animado .hero-3d-container {
        height: 280px !important;
        margin-bottom: 2rem;
        margin-top: 0 !important;
    }
    
    #hero-animado .glass-card-chatbot {
        transform: scale(0.85) !important; /* Más grande en móvil */
        max-width: 300px;
        left: 50% !important;
        top: 50% !important;
    }

    /* Círculo decorativo más pequeño bajo el chat */
    #hero-animado .deco-circle {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.1rem;
    }
    
    /* Ocultar card SEO Growth */
    #hero-animado .seo-growth-card {
        display: none !important;
    }
    
    #hero-animado .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
    }
    
    #hero-animado .lead {
        font-size: 0.9rem !important;
        max-width: 100% !important;
    }
    
    #hero-animado .btn-hero-primary,
    #hero-animado .btn-hero-secondary {
        font-size: 0.85rem !important;
        padding: 10px 18px !important;
    }
    
    /* Ajustar orbes para que no se salgan */
    #hero-animado .orb-glow {
        transform: scale(0.5) !important;
    }
}

/* Hero 1: breakpoints de escritorio */
@media (min-width: 768px) {
    #hero-animado .glass-card-chatbot {
        width: 320px;
    }
}

@media (min-width: 1200px) {
    #hero-animado .glass-card-chatbot {
        width: 360px;
        padding: 1.75rem;
        transform: scale(1.35) !important;
    }
}

@media (min-width: 1000px) {
    #hero-animado .deco-circle {
        margin-left: -12.5rem;
        margin-top: 1.5rem;
    }
}

/* --- HERO 2: Ajustes móvil --- */
@media (max-width: 767px) {
    /* CRÍTICO: Limitar ancho del deck-info para que no se desborde */
    #hero-scene-2-root .deck-info {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    #hero-scene-2-root .deck-info h2 {
        margin-bottom: 0.1rem !important;
        margin-top: -0.2rem !important;
        font-size: 1.6rem !important; /* Más pequeño para que quepa */
        white-space: normal !important;
    }
    
    #hero-scene-2-root .slide-title {
        font-size: 1.5rem !important; /* Títulos más pequeños */
        white-space: normal !important;
    }
    
    #hero-scene-2-root .deck-info p {
        margin-top: -5px !important;
        position: relative;
        z-index: 10;
        font-size: 0.85rem !important; /* Un poco más pequeño */
        line-height: 1.4 !important;
        max-width: 100% !important;
    }
    
    /* Ajustar el contenedor del SVG "Potencial Demostrado" */
    #hero-scene-2-root .deck-info > div:first-child {
        margin-bottom: 0.2rem !important;
    }
    
    #hero-scene-2-root .control-deck {
        padding: 15px 15px 30px !important; /* Reducir padding lateral */
        gap: 1rem !important;
    }
}

/* --- HERO 4: Ajustes por rangos de resolución --- */

/* Mostrar/ocultar descripciones según resolución */
#hero-scene-4-root .h4-description-full {
    display: block;
}

#hero-scene-4-root .h4-description-mobile {
    display: none;
}

/* Rango crítico: 600px a 976px (tablets pequeñas) */
@media (min-width: 600px) and (max-width: 976px) {
    #hero-scene-4-root .h4-container {
        grid-template-columns: 1fr !important;
        padding: 15px 20px 40px !important;
        gap: 1rem !important; /* Menos gap */
    }
    
    /* Texto arriba */
    #hero-scene-4-root .h4-text-col {
        order: 1 !important;
        z-index: 30 !important;
    }
    
    /* Ocultar descripción larga, mostrar corta */
    #hero-scene-4-root .h4-description-full {
        display: none !important;
    }
    
    #hero-scene-4-root .h4-description-mobile {
        display: block !important;
        margin-bottom: 0.3rem !important;
    }
    
    /* Visual abajo - NO subir para evitar superposición */
    #hero-scene-4-root .h4-visual-col {
        order: 2 !important;
        height: 380px !important;
        z-index: 10 !important;
        position: relative !important;
        margin-top: 0 !important; /* Sin margen negativo */
    }
    
    #hero-scene-4-root .studio-card {
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        margin: 0 auto !important;
    }
    
    #hero-scene-4-root .scene-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Ocultar prompt box */
    #hero-scene-4-root .prompt-box {
        display: none !important;
    }
}

/* Rango móviles: 400px a 599px */
@media (min-width: 400px) and (max-width: 599px) {
    #hero-scene-4-root .h4-container {
        grid-template-columns: 1fr !important;
        padding: 10px 15px 20px !important;
        gap: 0.25rem !important; /* Aún menos gap entre texto e imagen */
    }
    
    /* Texto arriba */
    #hero-scene-4-root .h4-text-col {
        order: 1 !important;
        z-index: 30 !important;
    }
    
    /* Ocultar descripción larga, mostrar corta */
    #hero-scene-4-root .h4-description-full {
        display: none !important;
    }
    
    #hero-scene-4-root .h4-description-mobile {
        display: block !important;
        margin-bottom: 0.2rem !important;
    }
    
    /* Visual abajo - subir un poco */
    #hero-scene-4-root .h4-visual-col {
        order: 2 !important;
        height: 320px !important;
        z-index: 10 !important;
        position: relative !important;
        margin-top: -15px !important; /* Subir un poco */
    }
    
    #hero-scene-4-root .studio-card {
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        margin: 0 auto !important;
    }
    
    /* Mejorar visibilidad de las imágenes con formato apaisado */
    #hero-scene-4-root .card-bg-layer {
        background: #0a0a0a !important;
        border-radius: 1.5rem !important;
    }
    
    #hero-scene-4-root .scene-img-wrapper {
        display: block !important;
        z-index: 1 !important;
        border-radius: 1.5rem !important;
    }
    
    #hero-scene-4-root .scene-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: scale(1.05) !important;
        opacity: 0.95 !important;
    }
    
    #hero-scene-4-root .scene-img-wrapper.active .scene-img {
        opacity: 1 !important;
    }
    
    /* Ajustar tamaños de texto */
    #hero-scene-4-root h1 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    #hero-scene-4-root p {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important; /* Menos espacio bajo el texto */
    }
    
    /* Ocultar prompt box en móviles */
    #hero-scene-4-root .prompt-box {
        display: none !important;
    }
}

/* Móviles pequeños: menos de 400px */
@media (max-width: 399px) {
    #hero-scene-4-root .h4-container {
        padding: 10px 15px 20px !important;
        gap: 0.3rem !important; /* Muy poco espacio */
    }
    
    #hero-scene-4-root .h4-visual-col {
        margin-top: -10px !important; /* Subir imagen */
    }
    
    /* Ocultar descripción larga, mostrar corta */
    #hero-scene-4-root .h4-description-full {
        display: none !important;
    }
    
    #hero-scene-4-root .h4-description-mobile {
        display: block !important;
    }
    
    #hero-scene-4-root h1 {
        font-size: 2rem !important;
    }
    
    #hero-scene-4-root p {
        font-size: 0.9rem !important;
    }
    
    #hero-scene-4-root .badge {
        font-size: 8px !important;
        padding: 4px 8px !important;
    }
    
    #hero-scene-4-root .h4-visual-col {
        height: 280px !important;
    }
    
    #hero-scene-4-root .studio-card {
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
    }
    
    #hero-scene-4-root .scene-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    #hero-scene-4-root .thumb-btn {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Ocultar prompt box */
    #hero-scene-4-root .prompt-box {
        display: none !important;
    }

    
}

@media (max-width: 600px) {

    #hero-scene-4-root .h4-text-col .title-line, #hero-scene-4-root .h4-text-col .title-reveal  {
        font-size: 19px !important;
    }

    #hero-scene-2-root .slide-title {
	font-size: 25px !important;
}

}



/* --- HERO 5: Ocultar badge IA en móvil --- */
@media (max-width: 767px) {
    #hero-scene-5-root .h5-ai-badge {
        display: none !important;
    }
    
    #hero-scene-5-root .h5-container {
        padding: 60px 20px !important;
    }
    
    #hero-scene-5-root h1 {
        font-size: 2.2rem !important;
    }
    
    #hero-scene-5-root .h5-browser {
        max-width: 100% !important;
        margin: 0 auto;
    }

    /* Colocar las rayitas de navegación justo debajo de la imagen y centradas */
    #hero-scene-5-root .h5-dots {
        justify-content: center;
        margin-top: 1rem !important;
    }
}

/* --- HERO 6: Responsive móvil --- */

/* Ocultar resize handle en móvil (no funciona sin ratón) */
@media (max-width: 799px) {
    #hero-scene-6-root .resize-handle {
        display: none !important;
    }
    
    #hero-scene-6-root .instruction {
        display: none !important;
    }
    
    /* Habilitar botones clickeables en móvil */
    #hero-scene-6-root .device-item {
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: all 0.3s ease !important;
        opacity: 0.5 !important;
    }
    
    /* Botón activo: visible y con color */
    #hero-scene-6-root .device-item.active {
        opacity: 1 !important;
        color: #14b8a6 !important;
        transform: scale(1.1) !important;
    }
    
    /* Feedback táctil al tocar */
    #hero-scene-6-root .device-item:active {
        transform: scale(0.95) !important;
    }
    
    /* Iconos en botones activos */
    #hero-scene-6-root .device-item.active i {
        color: #14b8a6 !important;
    }
    
    #hero-scene-6-root .fluid-window {
        width: 70%; /* Ancho inicial = centro del breathing (45%-95%) */
        max-width: 100%;
        min-height: 400px;
        height: auto !important; /* Permitir altura dinámica */
        overflow: visible !important; /* Permitir ver contenido escalado */
        transition: width 0.15s ease-out !important; /* Transición rápida para breathing fluido */
        pointer-events: none !important; /* NO tocar/arrastrar la ventana */
        user-select: none !important; /* NO seleccionar texto */
        touch-action: none !important; /* NO responder a toques */
        cursor: default !important; /* Cursor normal, no interactivo */
        -webkit-user-drag: none !important; /* NO arrastrar en Safari */
    }
    
    /* Bloquear todos los elementos internos de la ventana excepto botones */
    #hero-scene-6-root .fluid-window * {
        pointer-events: none !important;
        user-select: none !important;
        cursor: default !important;
    }
    
    #hero-scene-6-root .fluid-content {
        padding: 1.5rem;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform-origin: top center;
    }
    
    #hero-scene-6-root .fluid-content h2 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    /* Ocultar el párrafo en móviles */
    #hero-scene-6-root .fluid-content p {
        display: none !important;
    }
    
    /* Device bar ajustada para móvil */
    #hero-scene-6-root .device-bar {
        transform: scale(0.85) translateY(-106px) !important;
        margin-bottom: 1rem;
        pointer-events: auto !important; /* Habilitar clics en barra */
        touch-action: auto !important; /* Permitir todos los toques */
    }
    
    /* Asegurar que los botones de dispositivo sean clickeables */
    #hero-scene-6-root .device-bar .device-item {
        pointer-events: auto !important;
        touch-action: auto !important;
    }
    
    /* Cards grid controlado por JS en móvil */
    #hero-scene-6-root .cards-grid {
        gap: 0.75rem;
        transition: grid-template-columns 0.3s ease !important; /* Transición suave al cambiar columnas */
    }
    
    #hero-scene-6-root .fluid-container-wrapper {
        height: auto;
        min-height: 500px; /* Ajustado para contenido escalado */
        margin-top: 4.5rem;
        padding-bottom: 2rem;
        pointer-events: none !important; /* Deshabilitar mousemove en móvil */
        touch-action: pan-y !important; /* Solo permitir scroll vertical */
    }
    
    /* Deshabilitar wrapper completamente para eventos de ratón/touch */
    #hero-scene-6-root .fluid-wrapper-h6 {
        pointer-events: none !important;
        touch-action: pan-y !important;
    }
    
    /* Re-habilitar pointer-events SOLO en botones/enlaces dentro de cards */
    #hero-scene-6-root .fluid-card button,
    #hero-scene-6-root .fluid-card a,
    #hero-scene-6-root .fluid-card .badge {
        pointer-events: auto !important;
        cursor: pointer !important;
        user-select: auto !important;
    }
    
    /* Asegurar que las cards sean visibles pero no interactivas en su contenedor */
    #hero-scene-6-root .fluid-card {
        pointer-events: auto !important;
    }
}

@media (max-width: 500px) {
    #hero-scene-6-root .fluid-content h2 {
        font-size: 1.3rem !important;
    }
    
    #hero-scene-6-root .fluid-content {
        padding: 1rem;
    }
    
    /* Device-bar más grande en móviles pequeños (heredado del @media 799px) */
    
    #hero-scene-6-root .fluid-container-wrapper {
        min-height: 450px;
        padding-bottom: 1.5rem;
    }
}

/* Ajustes adicionales de Hero 2 y Hero 3 */
#hero-scene-2-root .spatial-stage {
    padding-top: 20px;
}

#hero-scene-3-root.is-loaded .control-panel {
    transform: translateY(-66px) !important;
}

#hero-scene-3-root .control-panel {
    padding-left: 15px;
}

.deck-info {
    width: 100%;
}

/* --- HERO 3: Centrar en móvil --- */
@media (max-width: 767px) {
    #hero-scene-3-root .control-panel {
        text-align: center !important;
        padding: 0 15px 2rem !important;
    }
    
    #hero-scene-3-root .control-panel > div:first-child {
        align-items: center !important;
    }
    
    #hero-scene-3-root .control-panel h2 {
        text-align: center !important;
        font-size: 1.8rem !important;
    }
    
    #hero-scene-3-root .control-panel p {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    #hero-scene-3-root .h3-cta-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    #hero-scene-3-root .h3-stats {
        display: none !important;
    }
    
    #hero-scene-3-root .badge-tech {
        font-size: 0.6rem !important;
    }
    #hero-scene-3-root .h3-cta-buttons {
        margin: 0 auto;
    }
}

/* --- HERO 4: Centrar en móvil y ocultar side-actions --- */
@media (max-width: 767px) {
    #hero-scene-4-root .h4-text-col {
        align-items: center !important;
        text-align: center !important;
    }
    
    #hero-scene-4-root h1 {
        text-align: center !important;
    }
    
    #hero-scene-4-root p {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    #hero-scene-4-root .scene-selector {
        justify-content: center !important;
    }
    
    /* Ocultar side-actions (botones laterales de la imagen) */
    #hero-scene-4-root .side-actions {
        display: none !important;
    }
    
    /* Centrar stats */
    #hero-scene-4-root .h4-text-col > div:last-child {
        justify-content: center !important;
    }

    /* Ocultar bloque de escenarios ilimitados en móvil para reducir distancia */
    #hero-scene-4-root .h4-stats {
        display: none !important;
    }
}

/* Hero 4: Subir imagen aún más en móviles muy pequeños */
@media (max-width: 500px) {
    #hero-scene-4-root .h4-visual-col {
        margin-top: -60px !important;
        height: 300px !important;
    }
    
    #hero-scene-4-root .h4-container {
        gap: 0 !important;
    }
}

/* --- HERO 6: Botones más grandes y visibles --- */
@media (max-width: 799px) {
    #hero-scene-6-root .device-bar {
        transform: scale(1.1) translateY(-80px) !important; /* Más grande */
    }
    
    #hero-scene-6-root .device-item {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    #hero-scene-6-root .device-item i {
        font-size: 1.2rem !important;
    }
    
    #hero-scene-6-root .device-item span {
        font-size: 0.7rem !important;
    }
}

/* --- AJUSTES GENERALES PARA TODOS LOS HÉROES --- */
@media (max-width: 767px) {
    .hero-indicators {
        bottom: 15px !important;
        padding: 8px 12px !important;
    }
    
    .hero-nav-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    .hero-nav-arrow.left {
        left: 10px !important;
    }
    
    .hero-nav-arrow.right {
        right: 10px !important;
    }
}