/* Fusion Deck — CSS de página (adaptado del <style> de fusion.html para convivir con el tema de WordPress) */

/* Posicionamiento del canvas 3D según diapositiva activa.
   El tamaño real del contenedor es fijo (650x650) y los cambios de tamaño se hacen
   con transform:scale(): así el ResizeObserver de breo-hero.js no dispara
   renderer.setSize() en cada frame de la transición (redimensionar un canvas WebGL
   lo borra y provoca parpadeos del robot al cambiar de diapositiva). */
#breo-arm-canvas {
    position: fixed;
    z-index: 3;
    width: 650px;
    height: 650px;
    transition: top 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                left 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 1.4s;
    pointer-events: auto;
}

/* Slide 1 (Hero) - Centrado a la derecha, grande */
.slide-active-0 #breo-arm-canvas {
    top: 55%;
    left: 70%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Slide 2 (Features) - Fondo sutil a la derecha (480/650 = escala 0.738) */
.slide-active-1 #breo-arm-canvas {
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%) scale(0.738);
    opacity: 0.15;
    pointer-events: none;
}

/* Slides 3, 4 y 5 - Oculto. visibility en lugar de display:none para que el
   fundido termine antes de ocultarlo (display:none corta la transición en seco
   y hace aparecer/desaparecer el robot de golpe al subir o bajar). */
.slide-active-2 #breo-arm-canvas,
.slide-active-3 #breo-arm-canvas,
.slide-active-4 #breo-arm-canvas {
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%) scale(0.738);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* El canvas de Three.js ocupa todo su contenedor */
#breo-arm-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
}

/* En el prototipo la navegación de puntos iba oculta porque fusion.html tenía su propia
   cabecera con menú de diapositivas. Aquí la cabecera es la de WordPress (menú real del
   sitio), así que los puntos laterales se muestran para poder saltar entre diapositivas. */
.apple-nav-dots {
    display: flex;
}

/* El plugin binarial-robot-ui inyecta su HUD de telemetría dentro de #breo-arm-canvas
   en toda la web; en el deck Fusion sobra (el diseño ya tiene su propia composición). */
body.page-template-template-fusion .binarial-robot-dashboard-overlay {
    display: none !important;
}

/* ============================================================================
   Navbar con el diseño de la cabecera del prototipo (.apple-header):
   píldora de cristal flotante y centrada, con blur y borde suave. Se mantiene
   el markup del tema (menú con submenús, botón contacto e idiomas de Polylang),
   solo se re-estiliza. Al ser flotante tampoco empuja el deck hacia abajo.
   ============================================================================ */
body.page-template-template-fusion header.header.big-menu {
    position: fixed;
    top: 24px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    max-width: 1100px;
    height: 52px;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(29, 29, 31, 0.08);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    z-index: 200;
    line-height: normal;
}

body.page-template-template-fusion header.big-menu .top-bar {
    height: 100%;
    max-width: none;
    padding: 0 24px;
}

/* Logo compacto a la izquierda (como el hex + BINARIAL del prototipo) */
body.page-template-template-fusion header.big-menu .top-bar-left .menu .logo-header {
    height: 20px;
    max-width: 150px;
    background-position: left center;
}

/* Los elementos del menú se centran en los 52px de la píldora
   (el tema les daba 10rem de alto para la cabecera grande) */
body.page-template-template-fusion header.big-menu .menu .menu-item,
body.page-template-template-fusion header.big-menu .menu .menu-item-has-children {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Enlaces de primer nivel: tipografía del prototipo (pequeña, mayúsculas,
   espaciada, gris que pasa a oscuro) con subrayado turquesa animado */
body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li > a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: normal;
    color: #86868B;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li > a:hover,
body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li > a:focus,
body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li.current-menu-item > a,
body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li.current-page-ancestor > a {
    color: #1D1D1F;
}

body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li:not(.contact) > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: -2px;
    left: 0;
    background-color: #1FA184;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li:not(.contact) > a:hover::after,
body.page-template-template-fusion header.big-menu .top-bar-right > .menu > li.current-menu-item:not(.contact) > a::after {
    width: 100%;
}

/* Botón Contacto: se conserva pero compacto para caber en la píldora */
body.page-template-template-fusion header.big-menu .menu .menu-item.contact a {
    padding: 9px 20px;
    font-size: 12px;
    line-height: 1;
    color: white !important;
}

/* El deck ocupa el viewport en escritorio: se anula cualquier margen del
   contenedor del tema. OJO: esta regla debe ir ANTES del bloque móvil de abajo,
   que la desactiva (misma especificidad: a igual selector gana el último). */
body.page-template-template-fusion .main-canvas-wrapper,
body.page-template-template-fusion .main-canvas-content {
    height: 100vh;
    overflow: hidden;
}

/* ============================================================================
   Móvil / pantallas estrechas. El prototipo fusion.html era solo de escritorio;
   aquí se adapta: contenido en una columna, robot más pequeño y diapositivas
   que pueden crecer más que la pantalla. Muchos tamaños del deck vienen como
   estilos inline desde fusion_app.js, de ahí los !important.
   ============================================================================ */
@media (max-width: 900px) {
    /* La píldora del navbar ocupa casi todo el ancho */
    body.page-template-template-fusion header.header.big-menu {
        top: 12px;
        width: calc(100% - 24px);
    }

    /* El canvas del robot es fijo y vive fuera del contenedor con scroll: en
       táctil se traga los gestos de deslizar (su touch-action:pan-y intenta
       desplazar el body, que está bloqueado). En móvil el robot es decorativo:
       los toques lo atraviesan y llegan a las diapositivas, que sí scrollean. */
    #breo-arm-canvas {
        pointer-events: none !important;
    }

    /* El styles.css del prototipo trae un modo móvil (<=768px) en el que el deck
       deja de scrollear por dentro y pasa a scrollear el body como una página
       normal. Los contenedores del tema no pueden recortar ese flujo: si quedan
       en overflow:hidden el contenido existe pero es inalcanzable (no scrollea
       nada en vertical). */
    body.page-template-template-fusion .main-canvas-wrapper,
    body.page-template-template-fusion .main-canvas-content {
        height: auto;
        overflow: visible;
    }

    /* Con el contenido en columna las diapositivas son más altas que la
       pantalla y el imán del scroll-snap devuelve al usuario al inicio de la
       diapositiva una y otra vez (parece que "solo existe" el hero). En móvil
       el recorrido es scroll libre normal; las animaciones y los estados del
       robot se siguen activando porque la detección es por posición. */
    #presentation-container {
        scroll-snap-type: none;
    }
    .slide {
        height: auto !important;
        min-height: 100vh;
        min-height: 100svh;
        padding: 84px 20px 48px !important;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    /* Hero: robot arriba, texto abajo (necesita alto fijo para poder anclar
       el texto al fondo con el wrapper interno de height:100%) */
    #hero.slide {
        height: 100vh !important;
        height: 100svh !important;
    }
    #hero-glass-card {
        align-self: flex-end;
        margin-bottom: 6vh;
    }
    #hero h1 {
        font-size: 38px !important;
    }
    .slide-active-0 #breo-arm-canvas {
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.55);
    }
    .slide-active-1 #breo-arm-canvas {
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
    }

    /* Features: cabecera en columna y tarjetas apiladas */
    #features .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
        margin-bottom: 28px !important;
    }
    #features .section-title {
        font-size: 30px !important;
    }
    #features .grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #features .binarial-studio-card {
        padding: 22px !important;
    }

    /* Noticias: tarjetas apiladas */
    #noticias h2 {
        font-size: 30px !important;
    }
    #noticias div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* Contacto & empresa: las 4 columnas pasan a 2 */
    #contacto div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    #contacto img {
        height: 26px !important;
    }

    /* Barra legal inferior: que pueda partir en dos líneas */
    #contacto div[style*="justify-content: space-between"] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Puntos de navegación pegados al borde derecho */
    .apple-nav-dots {
        right: 10px !important;
        transform: translateY(-50%) scale(0.85);
    }
}