#ss-main-wrapper {
--c: #00e5ff; --r: #ff2244; --g: #00ff88; --nb: #020b1a; --yw: #ffcc00;
position: relative;
width: 100%;
height: 85vh; /* Altura ideal para un Hero en WordPress */
min-height: 600px;
background: #000;
color: #fff;
font-family: "Rajdhani", sans-serif;
overflow: hidden;
margin: 0 auto;
}



/* ─── SLIDER ────────────────────────────────── */

#ss-main-wrapper .slider {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}


#ss-main-wrapper .track {
display: flex;
width: 300%;
height: 100%;
transition: transform .65s cubic-bezier(.77,0,.18,1);
}



/* ─── SLIDE ─────────────────────────────────── */

/*

MOBILE-FIRST STRATEGY

─────────────────────

The images are 1290×920 (landscape).

On portrait mobile they would be heavily cropped if we used

object-fit:cover, making hotspot % positions wrong.



Fix: render the SCENE at the image's exact aspect-ratio

(width:100%, height:auto via aspect-ratio property).

This means ZERO cropping → hotspot % always hit the right spot.



On landscape desktop (min-aspect-ratio media query) we flip

to absolute fullscreen – the slight top/bottom crop is fine

because there's no meaningful horizontal shift.

*/

#ss-main-wrapper .slide {
width: 33.3333%;
height: 100%;
position: relative;
flex-shrink: 0;
}



/* ─── SCENE WRAPPER ──────────────────────────── */

/* Mobile: natural image proportions, no crop */

#ss-main-wrapper .scene-wrap {
position:relative;
width:100%;
flex-shrink:0;
overflow:hidden;
}



/* Office photos = 1290/920 */

#ss-main-wrapper .sw-photo { aspect-ratio:1920/1080; }

/* CSS-drawn scenes = 4/3 */

#ss-main-wrapper .sw-43 { aspect-ratio:1920/1080; }

/* Inside .scene-wrap everything is absolutely positioned */

#ss-main-wrapper .scene{position:absolute;inset:0;}

/* ─── LAYERS ────────────────────────────────── */

#ss-main-wrapper .ln,.lx{position:absolute;inset:0;}
#ss-main-wrapper .lx{z-index:2;clip-path:inset(100% 0 0 0);}
#ss-main-wrapper .ln img,.lx img{width:100%;height:100%;object-fit:fill;display:block;}


/* ─── SCAN LINE ─────────────────────────────── */

#ss-main-wrapper .scan-line{
position:absolute;left:0;right:0;height:3px;
background:linear-gradient(90deg,transparent,var(--g) 20%,var(--g) 80%,transparent);
box-shadow:0 0 18px var(--g),0 0 50px rgba(0,255,136,.35);
z-index:5;top:0;display:none;pointer-events:none;
}



#ss-main-wrapper .scan-line::after{
content:"";position:absolute;top:-35px;bottom:-35px;left:0;right:0;
background:linear-gradient(180deg,transparent,rgba(0,255,136,.06),transparent);
}



/* ─── HOTSPOTS (inside .scene → % = % of image) ─ */

#ss-main-wrapper .hotspot{position:absolute;z-index:8;display:none;}
#ss-main-wrapper .dot{
width:clamp(26px,7vw,34px);
height:clamp(26px,7vw,34px);
background:var(--r);border-radius:50%;
border:2px solid #fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:clamp(12px,3.5vw,15px);font-weight:700;
box-shadow:0 0 18px rgba(255,34,68,.85);
position:relative;
animation:dp 1.6s ease-in-out infinite;
user-select:none;
}



@keyframes dp{
0%,100%{transform:scale(1);box-shadow:0 0 16px rgba(255,34,68,.8),0 0 0 0 rgba(255,34,68,.4);}
50%{transform:scale(1.1);box-shadow:0 0 28px rgba(255,34,68,1),0 0 0 10px rgba(255,34,68,0);}
}



#ss-main-wrapper .dot-ring{
position:absolute;inset:-5px;border-radius:50%;
border:1.5px solid var(--r);pointer-events:none;
animation:dr 1.6s ease-out infinite;
}

@keyframes dr{0%{transform:scale(1);opacity:.8;}100%{transform:scale(2.6);opacity:0;}}

/* ─── POPUPS (fixed → always visible on any screen) ─ */

#ss-main-wrapper .popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
z-index: 999999; /* Por encima de cualquier menú de BeBuilder */
background: var(--nb);
border: 1px solid var(--c);
display: none; /* Se activa con la clase .show desde JS */
}



#ss-main-wrapper .popup.show {
display: block;
animation: ss-scaleIn 0.3s forwards;
}



@keyframes ss-scaleIn {
to { transform: translate(-50%, -50%) scale(1); }
}



#ss-main-wrapper .p-close{
position:absolute;top:10px;right:12px;
background:none;border:none;color:rgba(200,220,255,.5);
font-size:16px;cursor:pointer;padding:2px 6px;
}



#ss-main-wrapper .p-icon{font-size:20px;margin-bottom:4px;}
#ss-main-wrapper .p-tag{font-family:"Orbitron",sans-serif;font-size:8px;letter-spacing:2px;
color:var(--c);margin-bottom:4px;}

#ss-main-wrapper .p-name{font-family:"Rajdhani",sans-serif;font-size:17px;font-weight:700;
margin-bottom:6px;line-height:1.2;}

#ss-main-wrapper .p-desc{font-size:13px;color:rgba(190,215,255,.82);line-height:1.5;}

#ss-main-wrapper .p-risk{
margin-top:10px;display:flex;align-items:center;gap:6px;
font-family:"Orbitron",sans-serif;font-size:9px;letter-spacing:1px;
}

#ss-main-wrapper .p-risk.hi{color:var(--r);}

#ss-main-wrapper .p-risk.md{color:var(--yw);}

#ss-main-wrapper .p-risk-dot{width:6px;height:6px;border-radius:50%;background:currentColor;

flex-shrink:0;animation:blink 1s infinite;}

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


/* ─── HERO CONTENT (Único y Sincronizado) ───────────────────── */



/* --- 1. ESTADO BASE (Móvil y PC) --- */
#ss-main-wrapper .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    padding: 20px 24px 30px;
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none; /* Bloqueado por defecto */
    background: transparent;
    transition: opacity 0.8s ease, transform 0.8s ease, background 0.6s ease;
}

/* --- 2. ESTADO ACTIVO (Móvil) --- */
#ss-main-wrapper .hero-content.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto; /* En móvil dejamos que todo reciba clics */
    background: linear-gradient(
        to top,
        rgba(2,11,26,1) 0%,
        rgba(2,11,26,0.9) 70%,
        transparent 100%
    );
}

/* --- CONFIGURACIÓN DE PANTALLA ANCHA (PC/LAPTOP) --- */
@media (min-width: 1025px) {
    /* Contenedor Padre: Solo reparte el espacio */
    #ss-main-wrapper .hero-content.show {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 5% 50px 5%;
        pointer-events: none; /* Sigue siendo necesario para los hotspots */
    }

    /* Bloque Izquierdo */
    #ss-main-wrapper .hc-left {
        flex: 1; /* Toma su espacio natural */
        text-align: left;
    }

    /* Bloque Derecho: La clave del centrado */
    #ss-main-wrapper .hc-right {
        flex: 1; /* Toma el mismo espacio que el izquierdo para equilibrio */
        display: flex;
        flex-direction: column;
        align-items: center; /* Alineación natural al centro */
        gap: 25px;
    }

    /* El Menú: Ahora se centra por herencia de hc-right */
    #ss-main-wrapper .nav-wrap {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        pointer-events: auto; /* Activamos clics aquí */
    }

    /* El Botón y Texto: Se centran por herencia de hc-right */
    #ss-main-wrapper .cta-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        pointer-events: auto; /* Activamos clics aquí */
    }
}

    /* Reactivación de clics */
    #ss-main-wrapper .hc-right .cta-btn, 
    #ss-main-wrapper .hc-right .npill {
        pointer-events: auto !important;
    }


#ss-main-wrapper .h-tag{font-family:"Orbitron",sans-serif;font-size:8px;letter-spacing:3px;
color:var(--c);margin-bottom:8px;
opacity:0;transform:translateY(10px);transition:all .5s ease;}

#ss-main-wrapper .h-title{font-family:"Rajdhani",sans-serif;font-size:clamp(24px,6.5vw,42px);
font-weight:700;line-height:1.1;margin-bottom:8px;
opacity:0;transform:translateY(14px);transition:all .5s .1s ease;}

#ss-main-wrapper .h-title span{color:var(--c);}

#ss-main-wrapper .h-sub{font-size:clamp(13px,3.5vw,15px);color:rgba(195,215,255,.78);
line-height:1.55;max-width:400px;
opacity:0;transform:translateY(10px);transition:all .5s .2s ease;}

#ss-main-wrapper .h-tag,
#ss-main-wrapper .h-title,
#ss-main-wrapper .h-sub,
#ss-main-wrapper .nav-wrap,

#ss-main-wrapper .cta-bar {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out; /* Esta es la clave de la fluidez */
}



/* HUD overlay (always absolute over scene) */

#ss-main-wrapper .hud{position:absolute;inset:0;z-index:15;pointer-events:none;display:none;}

#ss-main-wrapper .hc{position:absolute;width:18px;height:18px;border-color:var(--c);border-style:solid;opacity:.6;}

#ss-main-wrapper .hc.tl{top:42px;left:12px;border-width:2px 0 0 2px;}

#ss-main-wrapper .hc.tr{top:42px;right:12px;border-width:2px 2px 0 0;}

#ss-main-wrapper .hc.bl{bottom:4px;left:12px;border-width:0 0 2px 2px;}

#ss-main-wrapper .hc.br{bottom:4px;right:12px;border-width:0 2px 2px 0;}

#ss-main-wrapper .hud-freq{position:absolute;top:62px;left:12px;font-family:"Orbitron",sans-serif;
font-size:8px;letter-spacing:1.5px;color:var(--c);opacity:.6;}


/* 1. Tu regla base (Se aplica por defecto en PC y pantallas grandes) */
#ss-main-wrapper .hud-status{
    position:absolute;
    bottom:50px;
    left: 50%;
    transform: translateX(-50%);
    font-family:"Orbitron",sans-serif;
    font-size:15px;
    color:var(--g);
    letter-spacing:2px;
    text-align:right;}

/* 2. LA REGLA PARA CELULARES (Media Query) */
@media (max-width: 800px) {
  #ss-main-wrapper .hud-status {
    bottom: 20px; 
    font-size:10px;
  }
}

/* Threats counter */

#ss-main-wrapper .threats{
position:absolute;top:44px;right:12px;z-index:20;
display:none;flex-direction:column;align-items:flex-end;
}

#ss-main-wrapper .threats-n{font-family:"Orbitron",sans-serif;font-size:32px;font-weight:900;
color:var(--r);line-height:1;text-shadow:0 0 20px rgba(255,34,68,.7);}
#ss-main-wrapper .threats-l{font-family:"Orbitron",sans-serif;font-size:8px;color:var(--r);letter-spacing:2px;}



/* Progress bar */
#ss-main-wrapper .pbar-wrap{
position:absolute;bottom:0;left:0;right:0;z-index:20;
height:3px;background:rgba(255,255,255,.1);display:none;
}

#ss-main-wrapper .pbar{height:100%;background:var(--g);width:0%;box-shadow:0 0 10px var(--g);}



/* Top nav */

#ss-main-wrapper .topnav{
position:absolute;top:0;left:0;right:0;z-index:25;
display:flex;justify-content:space-between;align-items:center;
padding:12px 16px;
background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,transparent 100%);
}

#ss-main-wrapper .brand{font-family:"Orbitron",sans-serif;font-size:13px;font-weight:700;
letter-spacing:1px;color:#fff;text-shadow:0 0 16px rgba(0,229,255,.5);}

#ss-main-wrapper .brand em{color:var(--c);font-style:normal;}

#ss-main-wrapper .badge{
font-family:"Orbitron",sans-serif;font-size:8px;letter-spacing:2px;
padding:4px 10px;border-radius:20px;
border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.7);
background:rgba(0,0,0,.45);white-space:nowrap;
}



/* Swipe hint */

#ss-main-wrapper .hint{
position:absolute;z-index:20;
font-family:"Orbitron",sans-serif;font-size:9px;letter-spacing:2px;
color:rgba(0,229,255,.8);white-space:nowrap;
display:none;animation:fadeIO 2s ease-in-out infinite;

/* placed at bottom of scene-wrap */

bottom:6px;left:50%;transform:translateX(-50%);
}

@keyframes fadeIO{0%,100%{opacity:.3;}50%{opacity:1;}}


/* ─── DIM overlay ───────────────────────────── */

#ss-main-wrapper .dim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;display:none;}

#ss-main-wrapper .dim.on{display:block;}



/* ─── BOTTOM NAV BAR ────────────────────────── */

#ss-main-wrapper .nav-wrap{
display:flex;align-items:center;justify-content:center;
gap:6px;flex-wrap:wrap;
margin-top:12px;
opacity:0;
transform:translateY(10px);
transition:opacity .5s .25s ease, transform .5s .25s ease;
}

#ss-main-wrapper .npill{
display:flex;align-items:center;gap:6px;
cursor:pointer;padding:7px 14px;border-radius:24px;
transition:all .3s;border:1px solid rgba(255,255,255,.15);
background:rgba(0,0,0,.4);
}

#ss-main-wrapper .npill.on{
background:rgba(0,229,255,.15);
border-color:rgba(0,229,255,.5);
}

/* CTA fixed bar replacing old nav position */

#ss-main-wrapper .cta-bar{
display:flex;flex-direction:column;align-items:center;
gap:10px;
margin-top:14px;
padding:14px 18px 0;
opacity:0;
transform:translateY(10px);
transition:opacity .5s .35s ease, transform .5s .35s ease;
}

#ss-main-wrapper .cta-text{
font-family:"Rajdhani",sans-serif;
font-size:clamp(14px,3.8vw,17px);
font-weight:600;
color:rgba(220,235,255,.92);
text-align:center;
line-height:1.3;
}

#ss-main-wrapper .cta-btn{
font-family:"Orbitron",sans-serif;
font-size:clamp(10px,2.8vw,12px);
letter-spacing:1.5px;font-weight:700;
color:var(--nb);background:var(--c);
border:none;border-radius:6px;
padding:12px 28px;
cursor:pointer;text-decoration:none;
display:inline-block;
box-shadow:0 0 18px rgba(0,229,255,.3);
}

#ss-main-wrapper .cta-btn:hover{background:#33eeff;}

#ss-main-wrapper .npill-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s;flex-shrink:0;}

#ss-main-wrapper .npill.on .npill-dot{background:var(--c);box-shadow:0 0 8px var(--c);}

#ss-main-wrapper .npill-lbl{font-family:"Orbitron",sans-serif;font-size:9px;letter-spacing:2px;
color:rgba(255,255,255,.4);transition:color .3s;white-space:nowrap;}

#ss-main-wrapper .npill.on .npill-lbl{color:var(--c);}

#ss-main-wrapper .nsep{width:1px;height:18px;background:rgba(255,255,255,.12);}


/* PC arrows */

#ss-main-wrapper .narr{
position:fixed;top:50%;transform:translateY(-50%);z-index:50;
background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.5);font-size:26px;
width:38px;height:68px;border-radius:6px;
cursor:pointer;transition:all .3s;
display:flex;align-items:center;justify-content:center;
opacity:0;
}

@media(hover:hover){.narr{opacity:.3;}}

#ss-main-wrapper .narr:hover{opacity:1!important;background:rgba(0,229,255,.15);border-color:var(--c);color:var(--c);}

#ss-main-wrapper .narr.L{left:8px;}

#ss-main-wrapper .narr.R{right:8px;}

@media(max-width:500px){.narr{display:none;}}



/* ─── DESKTOP OVERRIDE ──────────────────────────

When the viewport IS landscape (wider than the

image ratio), flip scene to fullscreen cover.

─────────────────────────────────────────────── */



@media (orientation:landscape) and (min-width:600px){

#ss-main-wrapper .slide {
height: 85vh; /* Mantenemos la consistencia con el Hero */
min-height: 600px; /* Evitamos que en paisajes muy estrechos se vea mal */
overflow: hidden;
}


#ss-main-wrapper .scene-wrap {

position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: unset !important; /* Mantenemos el ajuste de imagen */
}
}



/* On desktop the images fill via object-fit:cover */

#ss-main-wrapper .ln img,.lx img{
object-fit:cover !important;

/* keep center horizontally, office scene key content is center */

object-position:center center;
}



#ss-main-wrapper .popup {
z-index: 9999999 !important;
}

#ss-main-wrapper .dim {
z-index: 9999998 !important;
}

/* ACTIVACIÓN DE ELEMENTOS INTERNOS */
#ss-main-wrapper .hero-content.show .h-tag, 
#ss-main-wrapper .hero-content.show .h-title, 
#ss-main-wrapper .hero-content.show .h-sub, 
#ss-main-wrapper .hero-content.show .nav-wrap, 
#ss-main-wrapper .hero-content.show .cta-bar {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Ajuste de tiempos para que el texto entre con elegancia */
#ss-main-wrapper .hero-content.show .h-tag { transition-delay: 0.1s; }
#ss-main-wrapper .hero-content.show .h-title { transition-delay: 0.2s; }
#ss-main-wrapper .hero-content.show .h-sub { transition-delay: 0.3s; }
#ss-main-wrapper .hero-content.show .nav-wrap { transition-delay: 0.4s; }
#ss-main-wrapper .hero-content.show .cta-bar { transition-delay: 0.5s; }