ul#top-menu.top-menu li#category-51 a {
  background-color: #ff1100 !important;
  color: #fff !important;
}
.footer-container {
  position: relative;
  overflow: hidden;
}

.ladron-corre {
  position: absolute;
  bottom: 40px;
  left: -200px;
  height: 300px;
  width: auto;
  z-index: 1;
  animation: ladron-run 14s linear infinite;
  border: none;                  /* sin marco */
  box-shadow: none;
  background: transparent;
  z-index: 10;
}

@keyframes ladron-run {
      0%    { left: -200px; }
    42%   { left: 110%; }      /* llega a la derecha */
    70%   { left: 110%; }      /* pausa ~5 segundos */
    70.1% { left: -200px; }    /* reaparece */
    100%  { left: -200px; }
}

/* Zona fija arriba para el dron */
#drones-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;        /* ocupa todo el ancho */
  height: 200px;      /* franja superior de vuelo */
  overflow: hidden;   /* evita que se salga */
  z-index: 2147483647; /* siempre encima */
  pointer-events: none; /* no bloquea clics */
}

/* Dron */
.drone-pro {
  position: absolute;
  top: 60px;          /* altura inicial */
  left: -200px;       /* arranca fuera de pantalla */
  width: 180px;
  height: 120px;
  background: url('/themes/classic/assets/css/dron.png') no-repeat center/contain;
  
  animation: vuelo-entret 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 2147483647;
}

/* Luces del dron estilo vigilancia */
.drone-pro .drone-light {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: vigilanciaFlash 1s infinite alternate;
}

/* Luz izquierda (roja) */
.drone-pro .drone-light.left {
  top: 20px;
  left: 25px;
  background: red;
  box-shadow: 0 0 15px red;
}

/* Luz derecha (azul) */
.drone-pro .drone-light.right {
  top: 20px;
  right: 25px;
  background: blue;
  box-shadow: 0 0 15px blue;
}

/* Animación intermitente estilo patrulla */
@keyframes vigilanciaFlash {
  0%   { opacity: 1; }
  50%  { opacity: 0.2; }
  100% { opacity: 1; }
}

/* Vuelo entretenido: cruza y sube/baja suavemente */
@keyframes vuelo-entret {
  0%   { left: -200px; top: 60px; transform: rotate(0deg); }
  25%  { left: 25%;    top: 40px; transform: rotate(-5deg); }
  50%  { left: 85%;    top: 70px; transform: rotate(5deg); }
  75%  { left: 45%;    top: 50px; transform: rotate(-3deg); }
  100% { left: -200px; top: 60px; transform: rotate(0deg); }
}

/* Refuerzo para que los botones flotantes no se vean afectados */
.whatsapp-button,
.chat-button {
  position: fixed !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

.muralla-edificio {
    position: relative;
    z-index: 0;
    background: linear-gradient(180deg, #b0b0b0 0%, #989898 50%, #a5a5a5 100%) !important;
    background-image: 
        linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    box-shadow: 
        inset 0 12px 24px rgba(0,0,0,0.25),
        inset 0 -12px 24px rgba(0,0,0,0.2);
    
        background: linear-gradient(259deg, #7a7a7a 0%, #232323 50%, #999 100%) !important;
    background-size: 4px 6px !important;
}

.muralla-edificio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 60px,
        rgba(0,0,0,0.08) 60px,
        rgba(0,0,0,0.08) 61px
    );
    pointer-events: none;
    z-index: -1;
}

.muralla-edificio::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    pointer-events: none;
    z-index: -1;
}

/* Logo con borde futurista y más fuerza */
#header .logo,
#logo img,
.logo img {
    filter: 
        drop-shadow(0 8px 15px rgba(0,0,0,0.75)) 
        drop-shadow(0 0 20px rgba(0, 160, 255, 0.7)) 
        brightness(1.12) !important;
    transition: all 0.4s ease;
    transform: perspective(500px) rotateX(10deg) scale(1.02);
    border: 3px solid rgba(0, 180, 255, 0.6);
    border-radius: 12px;
    background: rgba(0,0,0,0.4);
    margin-left: 25px;
}

#header .logo:hover,
#logo img:hover,
.logo img:hover {
    filter: 
        drop-shadow(0 10px 22px rgba(0,0,0,0.8)) 
        drop-shadow(0 0 30px rgba(0, 200, 255, 0.9)) 
        brightness(1.3) !important;
    transform: perspective(500px) rotateX(5deg) scale(1.06);
    border-color: rgba(0, 220, 255, 0.9);
}

/* Marco Moderno - Solo borde */
#header {
    position: relative;
    
}

#header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(to right, 
        transparent, 
        #00ccff, 
        #0088ff, 
        #00ccff, 
        transparent);
    box-shadow: 0 4px 12px rgba(0, 204, 255, 0.6);
        background: linear-gradient(to right, transparent, #00ccff57, #0088ff30, #00ccff4a, transparent);
    box-shadow: 0px 0px 80px 13px rgba(0, 204, 255, 0.6);

}

/* === PUERTA MÁS GRANDE Y ARRIBA === */
.door-container {
       width: 617px;
    height: 355px;
    margin: 289px auto -13px;
    background: #1a1a1a;
    border: 18px solid #000000;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,0.95),
                inset 0 0 60px rgba(0,0,0,0.9);
    cursor: pointer;
    border-radius: 30px;
        box-shadow: 0px 0px 20px 0px rgba(54, 127, 238, .3), 0 0px 20px 20px #ff9a5200, 0px 0px 0px 0px #ff9a52, inset 0px 0px 20px 6px rgb(0 0 0), 0px 20px 19px 20px rgba(54, 127, 238, .3), 0px 0px 0px 20px #333, 20px 0px 0px 0px #333;
    box-shadow: 0px 0px 0px 0px #ff4c4c, 0 0px 20px 4px #036ff4, 0px 0px 0px 0px #ff9a52, 0px 0px 0px 20px rgb(0 0 0), 0px 0px 4px 20px #035df4, 0px 0px 0px 20px #333, 20px 0px 0px 0px #333;
    border-radius: 1px;
    border-right: 30px outset #333;
    border-bottom: 30px solid #232323;
    border-top: 32px inset #5f5f5f;
    border-left: 30px solid rgb(0 0 0);
        box-shadow: rgb(255, 76, 76) 0px 0px 20px 0px, rgb(0, 0, 0) 0px 0px 0px 8px, rgb(255, 255, 255) 0px 0px 20px 12px, rgb(0, 0, 0) 0px 0px 0px 20px, rgb(0, 0, 0) 0px 0px 4px 20px, rgb(51, 51, 51) 0px 0px 20px 20px, rgb(51, 51, 51) 0px -20px 20px 0px;
       border-image: none;
    overflow: hidden;
    border-radius: 30px 30px 0px 0px;
    border-bottom: 25px solid rgb(0 0 0);
        box-shadow: #1a1a1a 0px 0px 153px 20px, inset rgb(0, 0, 0) 0px 0px 20px 20px, #000000 0px 0px 20px 12px, inset rgb(0, 0, 0) 20px 0px 91px 20px, rgb(0, 0, 0) 0px 0px 2px 20px, inset rgb(51, 51, 51) 0px 0px 0px 0px, rgb(51, 51, 51) 0px 0px 0px 0px;

}

.door-container:hover {
    box-shadow: 0 25px 55px rgba(0,0,0,0.95);
        box-shadow: 0px 0px 20px 0px rgba(54, 127, 238, .3), 0 0px 20px 20px #ff9a5200, 0px 0px 0px 0px #ff9a52, inset 0px 0px 20px 6px rgb(0 0 0), 0px 20px 19px 20px rgba(54, 127, 238, .3), 0px 0px 0px 20px #333, 20px 0px 0px 0px #333;
    box-shadow: 0px 0px 0px 0px #ff4c4c, 0 0px 20px 4px #036ff4, 0px 0px 0px 0px #ff9a52, 0px 0px 0px 20px rgb(0 0 0), 0px 0px 4px 20px #035df4, 0px 0px 0px 20px #333, 20px 0px 0px 0px #333;
    border-radius: 1px;
    border-right: 12px outset #333;
    border-bottom: 12px solid #232323;
    border-top: 32px inset #5f5f5f;
    border-left: 12px solid rgb(0 0 0);
        border-radius: 30px 30px 0px 0px;
    border-bottom: 25px solid rgb(0 0 0);
    box-shadow: #1a1a1a 0px 0px 153px 20px, inset rgb(0, 0, 0) 0px 0px 20px 20px, #000000 0px 0px 20px 12px, inset rgb(0, 0, 0) 20px 0px 91px 20px, rgb(0, 0, 0) 0px 0px 2px 20px, inset rgb(51, 51, 51) 0px 0px 0px 0px, rgb(51, 51, 51) 0px 0px 0px 0px;
}

.door-left, .door-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(#222, #151515);
    transition: transform 0.8s ease;
    border: 6px solid #111;
      border-radius: 10px;
  background: linear-gradient(
    145deg,
    #2e2e2e 0%,
    #1a1a1a 45%,
    #0f0f0f 100%
  );
  
  /* Borde moderno con doble línea */
  box-shadow: 
    0 0 0 3px #111,
    0 0 0 6px #333,
    0 0 0 7px #1f1f1f,
    inset 0 0 25px rgba(0, 0, 0, 0.7);
  
  /* Brillo sutil en el borde superior */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
      box-shadow: 0 0 0px 20px rgb(0 0 0), 0 0 0 6px #000000, 0 0 0 7px rgba(54, 127, 238, .3), inset 0 0 25px rgb(0 0 0);
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 5px solid #000;

}

.door-left  { left: 0; border-right: none; }
.door-right { right: 0; border-left: none; }

.door-container:hover .door-left  { transform: translateX(-92%); }
.door-container:hover .door-right { transform: translateX(92%); }

.door-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;           /* Invisible antes del hover */
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    z-index: 10;
    transition: all 0.5s ease;

}

.door-container:hover .door-text {
    color: #00ccff;               /* Aparece al pasar el mouse */
}

/* === NUEVO PISO DEL EDIFICIO === */
.piso-nuevo {
    background: linear-gradient(#161616, #0a0a0a);
    padding: 35px 0 25px 0;
    margin-top: 0;
    position: relative;
    
    box-shadow: 0 10px 35px rgba(0,0,0,0.9);
        margin-top: 108px;
    position: absolute;
    bottom: -3px;
    
    width: 100%;
    
    transform: perspective(900px) rotateX(23deg);
    
    padding: 35px 0px 25px;
    border-left: 95px solid #000;
    border-right: 95px solid #000;
        transform: perspective(900px) rotateX(23deg);
    padding: 35px 0px 25px;
    border-left: 50px solid #000;
    border-right: 50px solid #000;
    height: -webkit-fill-available;
        width: 81%;
    
    background: linear-gradient(90deg, #232323 0%, #888 20%, #ff4c4c 40%, #aaa 60%, #03a9f4 75%, #232323 90%, #232323 100%);
    box-shadow: inset 0px 0px 1076px 70px rgba(0, 0, 0, 0.9);
    
    background: linear-gradient(90deg, #232323 0%, #888 20%, #ff4c4c 40%, #aaa 60%, #03a9f4 75%, #232323 90%, #232323 100%);
    
    width: 84%;
    
    transform: perspective(900px) rotateX(30deg);

    transform: perspective(900px) rotateX(43deg);
    bottom: -570px;
    margin-top: -115px;
    width: 85%;
    
        width: 100%;
    background: linear-gradient(180deg, #12151c 0%, #0c0e13 25%, #080a0e 60%, #050608 100%);
    box-shadow: inset 0 20px 30px rgba(0, 0, 0, 0.65), inset 0 -15px 25px rgba(0, 0, 0, 0.5), 0 -10px 30px rgba(0, 0, 0, 0.4);
    z-index: 5;


}

/* Luces que cambian sutilmente */
.piso-nuevo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
   
    animation: luces-piso 10s linear infinite;
}

.piso-nuevo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    
}

@keyframes luces-piso {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(250%); }
}

/* Textura del piso */
.piso-textura {
    height: 55px;
  
    opacity: 0.7;
    
}

/* === BASE EDIFICIO CON MÚLTIPLES CAPAS DE PROFUNDIDAD === */
  

/*=========================================
    PILAR 3D MOBRI
=========================================*/

.pilar-mobriizq{

    width:100px;
    height:100%;

    position:absolute;
    overflow:hidden;
    top:0;

    
    border-right:2px solid #121212;

       background: repeating-linear-gradient(313deg, #1a1a1a00 34px, rgb(0 0 0) 20px, #23232300 20px, rgb(0 0 0) 38px), repeating-linear-gradient(90deg, #1a1a1a 10px, #1a1a1a 8px, #2a2a2a 8px, #000000 16px), linear-gradient(to right, #000, #000000 50%, #111111);
    
    background: linear-gradient(259deg, #7a7a7a 0%, #232323 50%, #333 100%) !important;
    background: linear-gradient(24deg, #002180 0%, #0380f4 50%, #035df4 100%) !important;
    border-right: 14px solid black;

}


/*=========================================
    RANURAS DEL PILAR
=========================================*/

.pilar-mobriizq::before{

    content:"";

    position:absolute;
    inset:0;

      
    
        width: 60px;
   

        border-right: 25px solid black;
        box-shadow: inset 0px 0px 10px 0px rgb(0 0 0), 0px 0px 15px 0px #000;

}


/*=========================================
    TAPA SUPERIOR
=========================================*/

.pilar-mobriizq::after{

    content:"";

    position:absolute;

    top:0;
    left:-3px;
    right:-3px;

    height:10px;

    background:

    linear-gradient(
        to bottom,
        #eeeeee,
        #979797,
        #292929
    );

    box-shadow:

        0 3px 8px rgba(0,0,0,.45);

        background: linear-gradient(to bottom, rgb(0 0 0), #1e0200, rgb(0 0 0));
    box-shadow: 0px 20px 20px 13px rgb(0 0 0);

}

.mobri-pilar-derecho{
    position:absolute;
    top:0;
    right:0;
    width:100px;
    height:100%;
    z-index:0;
    pointer-events:none;
       background: repeating-linear-gradient(313deg, #1a1a1a00 34px, rgb(0 0 0) 20px, #23232300 20px, rgb(0 0 0) 38px), repeating-linear-gradient(90deg, #1a1a1a 10px, #1a1a1a 8px, #2a2a2a 8px, #000000 16px), linear-gradient(to right, #000, #000000 50%, #111111);

    background: linear-gradient(259deg, #333 0%, #232323 50%, #333 100%) !important;
    background: linear-gradient(24deg, #002180 0%, #0380f4 50%, #035df4 100%) !important;
    border-left: 14px solid black;
   
}

.mobri-pilar-derecho::before{
    content:"";
    position:absolute;
    inset: 0;
    width: 60px;
    border-right: 25px solid black;
    box-shadow: inset 0px 0px 10px 0px rgb(0 0 0), -20px 0px 20px 0px #000;
}

.mobri-pilar-derecho::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
       left: -3px;
    height: 10px;
    background: linear-gradient(to bottom, #eeeeee, #979797, #292929);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
        background: linear-gradient(to bottom, rgb(0 0 0), #1e0200, rgb(0 0 0));
    box-shadow: 0px 20px 20px 13px rgb(0 0 0);
}


.zona-central {
    position: absolute;
    top: 140px;
    
    right: 110px;
    height: 91.5%;
    background: #aaa;
    overflow: hidden;
    z-index: 0;
            background: repeating-linear-gradient(313deg, #1a1a1a00 34px, rgb(0 0 0) 20px, #23232300 20px, rgb(0 0 0) 38px), repeating-linear-gradient(90deg, #1a1a1a 10px, #1a1a1a 8px, #2a2a2a 8px, #000000 16px), linear-gradient(to right, #000, #000000 50%, #111111);
        
    z-index: 1;
        
    
        background: linear-gradient(#000, rgb(0 0 0 / 64%));
        background: linear-gradient(to right, #000000, #ccc, #000000);
           
    border: 5px solid #333;
    border-left: 20px solid #000000;
    border-right: 20px solid #000000;
    border-top: 8px solid #1d1f1f;
        
    border-left: 50px outset #232323;
    border-right: 50px inset #232323;
    
    border-bottom: 28px outset #580808;
        background: linear-gradient(90deg, #232323 0%, #888 20%, #ff4c4c 40%, #aaa 60%, #03a9f4 75%, #232323 90%, #232323 100%);
    transform: perspective(900px) rotateX(357deg);
    margin-top: 4px;
    border-left: 10px inset #333;
    border-right: 10px solid rgb(0, 0, 0);
    border-bottom: 30px outset #333;
        background: linear-gradient(90deg, #232323 0%, #888 20%, #ff4c4c 40%, #aaa 60%, #03a9f4 75%, #232323 90%, #232323 100%);
    border-bottom: 64px solid rgb(0 0 0 / 69%);
    border-left: 20px solid rgb(43 47 53 / 30%);
    border-right: 20px solid rgb(22 22 22 / 30%);
    
        border-bottom: 64px solid rgb(0 0 0 / 90%);
    border-left: 20px solid #00020e;
    border-right: 20px solid #000411;
    border-top: 40px inset #333;
    
        height: 891px;
    margin: -109px auto -13px;
        height: 883px;
    margin: -110px auto 13px;
    left: 128px;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.6), inset -6px 0 12px rgba(0, 0, 0, 0.5);
        left: 50%;
    bottom: 70px;
    width: 75%;
    height: 776px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #0c1117, #020406 55%, #000 100%);
    border: 10px solid #05080d;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .95), inset 0 0 35px rgba(0, 120, 220, .15);
    
        background: linear-gradient(to bottom, #020305, #26333e 35%, #05080c 70%, #000 100%);
    border-radius: 25px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .9), 0 0 20px rgba(0, 110, 220, .18);
        top: 75px;
    bottom: 0;
    background: linear-gradient(90deg, #03070b 0%, #101923 18%, #05080c 50%, #101923 82%, #03070b 100%);
    border-left: 8px solid #05090f;
    border-right: 8px solid #05090f;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 1), inset 0 0 20px rgba(0, 100, 200, .25);

        border-left: 8px solid #05090f;
    border-right: 8px solid #05090f;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 1), inset 0 0 20px rgba(0, 100, 200, .25);
    top: 133px;
    bottom: 0;
    background: linear-gradient(to bottom, #020305, #26333e 35%, #05080c 70%, #000 100%);
    border-radius: 25px;
    width: 75%;
    height: 743px;
    transform: translateX(-50%);
    border: 10px solid #05080d;
    left: 50%;


}

.techo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, #2a2a2a, #1c1c1c);
    
    z-index: 3;
    border-bottom: 2px solid #000000;
    background: linear-gradient(#ccc, #1a1a1a);
        background: linear-gradient(#1a1a1a, #1a1a1a);
        background: linear-gradient(rgb(0, 0, 0), #0d0d0d);
    
    background: linear-gradient(90deg, #232323 0%, #888 20%, #ff4c4c 40%, #aaa 60%, #03a9f4 75%, #232323 90%, #232323 100%);
    border-left: 20px solid rgb(43 47 53 / 30%);
    border-right: 20px solid rgb(22 22 22 / 30%);
       top: -25px;
    left: -25px;
    right: -25px;

    height: 45px;

    background:
        linear-gradient(
            to bottom,
            #020305,
            #26333e 35%,
            #05080c 70%,
            #000 100%
        );

    border-radius: 25px;

    box-shadow:
        0 12px 25px rgba(0,0,0,.9),
        0 0 20px rgba(0,110,220,.18);

    
}

.piso {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, .15) 0%, transparent 15%),
        linear-gradient(to left, rgba(0, 0, 0, .4) 0%, transparent 15%),
        linear-gradient(to top, #1f1f1f, #3a3a3a, #2a2a2a);
    box-shadow: 0 -15px 30px rgba(0,0,0,0.6);
    z-index: 3;
           

    background: linear-gradient(#000, rgb(0 0 0 / 64%));
           
    z-index: 3;
    

}

.pared-izquierda {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    
    z-index: 4;
        clip-path: polygon(0 0, 100% 6%, 100% 95%, 0 100%);
  
        background: repeating-linear-gradient(313deg, #1a1a1a00 34px, rgb(0 0 0) 20px, #23232300 20px, rgb(0 0 0) 38px), repeating-linear-gradient(90deg, #1a1a1a 10px, #1a1a1a 8px, #2a2a2a 8px, #000000 16px), linear-gradient(to right, #000, #000000 50%, #111111);

        background: linear-gradient(259deg, #000 0%, #000 50%, #000 100%) !important;
           background: linear-gradient(259deg, #7a7a7a 0%, #333 50%, #7a7a7a 100%) !important;
          position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, #0a0c11, #12151c, #0a0c11);
  box-shadow: 
    inset 8px 0 15px rgba(0, 0, 0, 0.7),
    inset -4px 0 10px rgba(0, 0, 0, 0.4);

  box-shadow: inset 0 0 25px rgba(0, 0, 0, .9);
    bottom: 0;
    width: 32%;
    clip-path: polygon(0 0, 100% 12%, 78% 88%, 0 100%);

    clip-path: polygon(0 0, 78% 25%, 78% 78%, 0 100%);
       

}

.pared-derecha {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
   
    z-index: 4;
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 95%);
   
        background: repeating-linear-gradient(313deg, #1a1a1a00 34px, rgb(0 0 0) 20px, #23232300 20px, rgb(0 0 0) 38px), repeating-linear-gradient(90deg, #1a1a1a 10px, #1a1a1a 8px, #2a2a2a 8px, #000000 16px), linear-gradient(to right, #000, #000000 50%, #111111);

        background: linear-gradient(259deg, #333 0%, #232323 50%, #000 100%) !important;
      background: linear-gradient(259deg, #000 0%, #000 50%, #000 100%) !important;
      background: linear-gradient(259deg, #333 0%, #7a7a7a 50%, #000 100%) !important;
        position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, #0a0c11, #12151c, #0a0c11);
  box-shadow: 
    inset 8px 0 15px rgba(0, 0, 0, 0.7),
    inset -4px 0 10px rgba(0, 0, 0, 0.4);

        box-shadow: inset 0 0 25px rgba(0, 0, 0, .9);
    bottom: 0;
    width: 18%;
    right: 0;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 22% 88%);


}


/* =========================================================
   PUERTA MOBRI 3D - ENTRADA PRINCIPAL
   ========================================================= */

.mobri-door {
    position: relative;
    width: 100%;
    height: 449px;

    perspective: 1200px;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    overflow: hidden;
        transform: translateY(232px);
    top: -44px;    

    top: -174px;
    border-left: 20px solid rgb(43 47 53 / 30%);
    border-right: 20px solid rgb(22 22 22 / 30%);
    border-top: 2px solid #000000;
    background: linear-gradient(90deg, #232323 0%, #888 20%, #ff4c4c 40%, #aaa 60%, #03a9f4 75%, #232323 90%, #232323 100%);
    margin-top: 4px;
    border-bottom: 64px solid rgb(0 0 0);

    background: linear-gradient(270deg, #232323 0%, rgb(0, 0, 0) 20%, #33a4d7 40%, #074f70 60%, #05080be8 75%, #06355a 90%, #232323 100%);
    border-bottom: 64px solid rgb(0 0 0 / 74%);
    /* width: 780px; */
    height: 539px;
    margin: 131px auto -13px;
    
    padding: 35px 0px 25px;
   
    
        background: linear-gradient(90deg, #0a0c11, #12151c, #0a0c11);
    box-shadow: inset 8px 0 15px rgba(0, 0, 0, 0.7), inset -4px 0 10px rgba(0, 0, 0, 0.4);

        
    left: 0;
    right: 0;
    bottom: -30px;
    border-left: 30px outset #000000;
    border-right: 30px inset #000000;
    border-top: 35px inset #000000;
    border-bottom: 125px outset rgb(0 0 0 / 0%);
    width: 100%;
    background: linear-gradient(180deg, #12151c 0%, #0c0e13 25%, #080a0e 60%, #050608 100%);

        width: 73%;
    border-left: 301px inset #989797;
    border-right: 30px inset #000000;
    border-top: 67px inset #345e7e00;
    left: 156px;
    right: 0px;
    
    background: linear-gradient(90deg, #0a0c11, #680303, #440505);
    height: 372px;


}


/* =========================================================
   TÚNEL DE ACCESO
   ========================================================= */

.door-tunnel {
      position: relative;
    width: 590px;
    height: 452px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
        background: linear-gradient(180deg, #1a1e27, #0f1218);
    border-radius: 12px 12px 4px 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), inset 0 3px 8px rgba(255, 255, 255, 0.05), inset 0 -8px 20px rgba(0, 0, 0, 0.6), 0 0 0 3px #0a0c11;
}


/* =========================================================
   MARCO PRINCIPAL
   ========================================================= */

.door-frame {
    position: relative;

    width: 540px;
    

    margin-bottom: 124px;

    background:
        linear-gradient(
            90deg,
            #050608 0%,
            #151a20 8%,
            #080a0d 15%,
            #08090b 85%,
            #151a20 92%,
            #050608 100%
        );

    border: 12px solid #050609;

    border-radius: 38px 38px 8px 8px;

    box-shadow:
        0 20px 35px rgba(0,0,0,.9),
        inset 0 0 25px rgba(0,0,0,.95);

    
    width: 800px;
    transform: translateY(77px);

}


/* =========================================================
   PROFUNDIDAD IZQUIERDA
   ========================================================= */

.door-depth-left {
    position: absolute;

    left: -38px;
    top: 30px;

    width: 42px;
    height: 285px;

    background:
        linear-gradient(
            90deg,
            #050609 0%,
            #07101a 45%,
            #0c3150 100%
        );

    transform:
        skewY(-13deg)
        translateZ(-15px);

    transform-origin: right center;

    box-shadow:
        -12px 8px 20px rgba(0,0,0,.8);

    border-left: 5px solid #020306;
}


/* =========================================================
   PROFUNDIDAD DERECHA
   ========================================================= */

.door-depth-right {
    position: absolute;

    right: -38px;
    top: 30px;

    width: 42px;
    height: 285px;

    background:
        linear-gradient(
            90deg,
            #0c3150 0%,
            #07101a 55%,
            #050609 100%
        );

    transform:
        skewY(13deg)
        translateZ(-15px);

    transform-origin: left center;

    box-shadow:
        12px 8px 20px rgba(0,0,0,.8);

    border-right: 5px solid #020306;
}


/* =========================================================
   TECHO INTERIOR
   ========================================================= */

.door-ceiling {
    position: absolute;

    left: 20px;
    right: 20px;
    top: -2px;

    height: 70px;

    background:
        linear-gradient(
            180deg,
            #020305 0%,
            #101820 60%,
            #050608 100%
        );

    transform:
        perspective(400px)
        rotateX(-25deg);

    transform-origin: bottom;

    border-radius: 30px 30px 0 0;

    box-shadow:
        0 -12px 25px rgba(0,0,0,.9),
        inset 0 -5px 12px rgba(0,120,220,.18);
}


/* =========================================================
   LÍNEA LED SUPERIOR
   ========================================================= */

.door-ceiling::after {
    content: "";

    position: absolute;

    left: 80px;
    right: 80px;
    bottom: 9px;

    height: 3px;

    background: #168cff;

    box-shadow:
        0 0 6px rgba(0,140,255,.8),
        0 0 18px rgba(0,100,255,.35);

    opacity: .75;
}


/* =========================================================
   PISO INTERIOR
   ========================================================= */

.door-floor {
    position: absolute;

    left: 15px;
    right: 15px;
    bottom: -10px;

    height: 105px;

    background:
        linear-gradient(
            180deg,
            #10151a 0%,
            #050607 65%,
            #000000 100%
        );

    transform:
        perspective(500px)
        rotateX(55deg);

    transform-origin: top;

    border-top: 3px solid #101820;

    box-shadow:
        0 -10px 25px rgba(0,0,0,.8);
}


/* =========================================================
   PUERTA AUTOMÁTICA
   ========================================================= */

.automatic-door {
    position: absolute;

    left: 48px;
    right: 48px;
    top: 62px;
    bottom: 25px;

    display: flex;

    background: #020406;

    border: 8px solid #030508;

    border-radius: 18px 18px 3px 3px;

    overflow: hidden;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.95),
        0 0 20px rgba(0,0,0,.9);
}


/* =========================================================
   PANELES DE VIDRIO
   ========================================================= */

.door-panel {
    position: relative;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            125deg,
            #10161c 0%,
            #05080b 38%,
            #171c21 70%,
            #050607 100%
        );

    overflow: hidden;
}


/* =========================================================
   REFLEJO DEL VIDRIO
   ========================================================= */

.glass-reflection {
    position: absolute;

    top: 0;
    left: 15%;

    width: 25%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    transform: skewX(-18deg);

    opacity: .8;
}


/* =========================================================
   REFLEJO AZUL MUY SUTIL
   ========================================================= */

.door-panel::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 18px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,110,190,.45),
            transparent
        );

    box-shadow:
        0 -5px 15px rgba(0,100,200,.18);
}


/* =========================================================
   SEPARACIÓN CENTRAL
   ========================================================= */

.door-center-line {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 5px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #000000,
            #171b1f,
            #000000
        );

    box-shadow:
        0 0 8px rgba(0,0,0,.9);

    z-index: 5;
}


/* =========================================================
   MARCO INTERIOR SUPERIOR
   ========================================================= */

.automatic-door::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 7px;

    background:
        linear-gradient(
            90deg,
            #020304,
            #17232d,
            #020304
        );

    z-index: 10;
}


/* =========================================================
   LÍNEA AZUL INFERIOR
   ========================================================= */

.automatic-door::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: 5px;

    height: 2px;

    background: #0878c9;

    box-shadow:
        0 0 7px rgba(0,130,255,.8);

    opacity: .55;

    z-index: 10;
}


/* =========================================================
   MARCO EXTERIOR - ILUMINACIÓN LATERAL
   ========================================================= */

.door-frame::before {
    content: "";

    position: absolute;

    left: 9px;
    top: 72px;

    width: 3px;
    height: 190px;

    background: #075b9c;

    box-shadow:
        0 0 10px rgba(0,110,200,.6);

    opacity: .55;
}


.door-frame::after {
    content: "";

    position: absolute;

    right: 9px;
    top: 72px;

    width: 3px;
    height: 190px;

    background: #075b9c;

    box-shadow:
        0 0 10px rgba(0,110,200,.6);

    opacity: .55;
}


/* =========================================================
   ANIMACIÓN MUY SUTIL DE ILUMINACIÓN
   ========================================================= */

@keyframes mobriDoorGlow {

    0% {
        opacity: .35;
    }

    50% {
        opacity: .75;
    }

    100% {
        opacity: .35;
    }

}


.door-ceiling::after {
    animation:
        mobriDoorGlow 4s ease-in-out infinite;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .mobri-door {
        height: 330px;
    }

    .door-tunnel {
        width: 100%;
        height: 300px;
    }

    .door-frame {
        width: 78%;
        height: 260px;

        border-width: 8px;
        border-radius: 28px 28px 5px 5px;
    }

    .automatic-door {
        left: 35px;
        right: 35px;
        top: 48px;
        bottom: 18px;
    }

    .door-depth-left {
        left: -25px;
        width: 30px;
        height: 210px;
    }

    .door-depth-right {
        right: -25px;
        width: 30px;
        height: 210px;
    }

    .door-floor {
        height: 75px;
    }

}