/*==========================================================
            PORTAFOLIO PIXSAI
==========================================================*/


/*==========================================================
                    VARIABLES
==========================================================*/

:root{

    --negro:#0D0D0D;

    --blanco:#FBFBFB;

    --cian:#00E8E8;

    --gris:#1B1B1B;

    --borde:2px solid #00E8E8;

    --radio:18px;

    --transicion:.35s ease;

}



/*==========================================================
                    RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/*==========================================================
                    BODY
==========================================================*/

body{

    font-family:'Erica One', cursive;

    text-transform:uppercase;

    color:var(--blanco);

    background-image:url("../documentos/imagenes/fondo.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

    overflow-x:hidden;

}



/*==========================================================
            TIPOGRAFÍA GENERAL
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
a,
span,
label{

    font-family:'Erica One', cursive;

    text-transform:uppercase;

    color:var(--blanco);

    -webkit-text-stroke:1px #000;

}



/*==========================================================
            TÍTULOS
==========================================================*/

h1,
h2{

    color:var(--cian);

    text-shadow:

    0 0 6px rgba(0,232,232,.8),

    0 0 12px rgba(0,232,232,.6),

    0 0 18px rgba(0,232,232,.4);

}



/*==========================================================
                CONTENEDOR BOOTSTRAP
==========================================================*/

.container-fluid{

    padding:25px;

    min-height:100vh;

}



/*==========================================================
                    PANEL GENERAL
==========================================================*/

.panel{

    border:var(--borde);

    border-radius:var(--radio);

    height:calc(100vh - 50px);

    padding:25px;

    backdrop-filter:blur(10px);

    transition:var(--transicion);

    overflow:hidden;

}

/*==========================================================
                    PANEL IZQUIERDO
==========================================================*/

.panel-izquierdo{

    background-image:url("../documentos/imagenes/fondo 2.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    flex-direction:column;

    overflow-y:auto;
}



/*==========================================================
                    LOGO
==========================================================*/

.logo{

    text-align:center;

    margin-bottom:35px;

}

.logo h1{

    font-size:2.3rem;

    letter-spacing:3px;

}

.logo p{

    font-size:.9rem;

    margin-top:8px;

    color:var(--cian);

}



/*==========================================================
                    MENÚ
==========================================================*/

.menu{

    display:flex;

    flex-direction:column;

    gap:15px;

}



/*==========================================================
                    BOTONES
==========================================================*/

.menu-btn{

    width:100%;

    padding:15px 18px;

    border:var(--borde);

    border-radius:12px;

    background:rgba(13,13,13,.60);

    color:var(--blanco);

    cursor:pointer;

    transition:all .35s ease;

    text-align:left;

    letter-spacing:1px;

}



/*==========================================================
                EFECTO HOVER
==========================================================*/

.menu-btn:hover{

    transform:translateX(8px);

    background:rgba(0,232,232,.20);

    color:var(--cian);

    box-shadow:

    0 0 10px rgba(0,232,232,.8),

    0 0 20px rgba(0,232,232,.5);

}



/*==========================================================
            BOTÓN ACTIVO
==========================================================*/

.menu-btn.activo{

    background:var(--cian);

    color:#000;

    box-shadow:

    0 0 12px var(--cian),

    0 0 25px var(--cian);

}



/*==========================================================
            SCROLL PANELES LATERALES
==========================================================*/

/* Barra de desplazamiento */

.panel-izquierdo::-webkit-scrollbar,
.panel-derecho::-webkit-scrollbar{

    width:8px;

}

/* Fondo de la barra */

.panel-izquierdo::-webkit-scrollbar-track,
.panel-derecho::-webkit-scrollbar-track{

    background:rgba(13,13,13,.35);

    border-radius:10px;

}

/* Barra deslizante */

.panel-izquierdo::-webkit-scrollbar-thumb,
.panel-derecho::-webkit-scrollbar-thumb{

    background:var(--cian);

    border-radius:10px;

    border:2px solid rgba(13,13,13,.35);

}

/* Efecto al pasar el mouse */

.panel-izquierdo::-webkit-scrollbar-thumb:hover,
.panel-derecho::-webkit-scrollbar-thumb:hover{

    background:#37FFFF;

}

/*==========================================================
                    PANEL CENTRAL
==========================================================*/

.panel-centro{

    background:rgba(13,13,13,.55);

    display:flex;

    flex-direction:column;

    height:100%;

}


/*==========================================================
                    ENCABEZADO
==========================================================*/

.visor-header{

    text-align:center;

    margin-bottom:25px;

}

.visor-header h2{

    font-size:2rem;

    margin-bottom:10px;

}

.visor-header p{

    color:var(--cian);

    font-size:.9rem;

}



/*==========================================================
                    VISOR
==========================================================*/

.visor{

    flex:1;

    background:rgba(0,0,0,.35);

    border:var(--borde);

    border-radius:18px;

    overflow:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}



/*==========================================================
                PANTALLA INICIAL
==========================================================*/

.pantalla-inicio{

    text-align:center;

    padding:40px;

}

.pantalla-inicio h3{

    color:var(--cian);

    margin-bottom:20px;

}

.pantalla-inicio p{

    font-size:1rem;

}



/*==========================================================
                    PDF
==========================================================*/

#visorPDF{

    display:none;

    width:100%;

    height:100%;

    border:none;

    background:#fff;

}

/*==========================================================
                    IMAGEN
==========================================================*/

#visorImagen{

    display:none;

    max-width:95%;

    max-height:95%;

    width:auto;

    height:auto;

    object-fit:contain;

}

/*==========================================================
                    PANEL DERECHO
==========================================================*/

.panel-derecho{

    background-image:url("../documentos/imagenes/fondo 2.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    flex-direction:column;

    overflow-y:auto;
}



/*==========================================================
                    TÍTULO
==========================================================*/

.titulo-fases{

    text-align:center;

    margin-bottom:30px;

}



/*==========================================================
                BOTONES FASES
==========================================================*/

.fase-btn{

    width:100%;

    margin-bottom:15px;

    padding:14px;

    border:var(--borde);

    border-radius:12px;

    background:rgba(13,13,13,.60);

    color:var(--blanco);

    cursor:pointer;

    transition:.35s;

    text-align:left;

}



.fase-btn:hover{

    background:rgba(0,232,232,.20);

    color:var(--cian);

    transform:translateX(6px);

    box-shadow:

    0 0 10px rgba(0,232,232,.8),

    0 0 20px rgba(0,232,232,.5);

}



/*==========================================================
                    POPUP
==========================================================*/

.popup-fase{

    display:none;

    position:fixed;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:420px;

    max-width:90vw;

    background:rgba(15,15,15,.95);

    border:2px solid var(--cian);

    border-radius:20px;

    padding:25px;

    z-index:9999;

    box-shadow:

    0 0 15px rgba(0,232,232,.8),

    0 0 35px rgba(0,232,232,.4);

}



/*==========================================================
            TÍTULO DEL POPUP
==========================================================*/

.popup-fase h3{

    text-align:center;

    color:var(--cian);

    margin-bottom:20px;

}



/*==========================================================
            TEXTO DEL POPUP
==========================================================*/

.popup-fase p{

    line-height:1.7;

    text-align:justify;

}



/*==========================================================
            BOTÓN CERRAR
==========================================================*/

.cerrar-popup{

    position:absolute;

    top:12px;

    right:12px;

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--cian);

    color:black;

    font-size:18px;

    transition:.3s;

}



.cerrar-popup:hover{

    transform:rotate(90deg);

}



/*==========================================================
                ANIMACIÓN
==========================================================*/

@keyframes aparecer{

    from{

        opacity:0;

        transform:translate(-50%,-60%);

    }

    to{

        opacity:1;

        transform:translate(-50%,-50%);

    }

}



.popup-fase.activo{

    display:block;

    animation:aparecer .35s ease;

}

/*==========================================================
                TABLET
==========================================================*/

@media (max-width:992px){

.container-fluid{

    padding:15px;

}

.panel{

    min-height:auto;

}

.logo h1{

    font-size:1.8rem;

}

.menu-btn{

    font-size:13px;

    padding:12px;

}

.fase-btn{

    font-size:13px;

    padding:12px;

}

.visor{

    height:60vh;

}

.popup-fase{

    width:90%;

}

}



/*==========================================================
                CELULAR
==========================================================*/

@media (max-width:768px){

.container-fluid{

    padding:10px;

}

.row{

    gap:15px;

}

.panel{

    min-height:auto;

    padding:18px;

}

.logo{

    margin-bottom:20px;

}

.logo h1{

    font-size:1.6rem;

}

.logo p{

    font-size:.75rem;

}

.menu{

    gap:10px;

}

.menu-btn{

    font-size:12px;

    padding:12px;

    text-align:center;

}

.titulo-fases{

    margin-bottom:20px;

}

.fase-btn{

    font-size:12px;

    text-align:center;

}

.visor-header h2{

    font-size:1.5rem;

}

.visor-header p{

    font-size:.8rem;

}

.visor{

    height:50vh;

}

.imagen-audio{

    width:120px;

}

#visorAudio audio{

    width:100%;

}

.popup-fase{

    width:95%;

    padding:20px;

}

}



/*==========================================================
                PANTALLAS GRANDES
==========================================================*/

@media (min-width:1400px){

.logo h1{

    font-size:2.8rem;

}

.menu-btn{

    font-size:16px;

}

.fase-btn{

    font-size:15px;

}

.visor-header h2{

    font-size:2.3rem;

}

}

/*==========================================
            PIXSAI ENGINE
==========================================*/

#pixsai{

position:fixed;

left:0;

top:0;

width:95px;

height:95px;

pointer-events:none;

z-index:999999;

}



#pixsai img{

width:100%;

position:relative;

z-index:5;

animation:

flotar 3s ease-in-out infinite;

}



#pixsai-glow{

position:absolute;

left:50%;

top:50%;

width:90px;

height:90px;

transform:translate(-50%,-50%);

border-radius:50%;

background:rgba(0,232,232,.25);

filter:blur(18px);

animation:

respirar 2s infinite alternate;

}



@keyframes respirar{

0%{

transform:translate(-50%,-50%) scale(.9);

opacity:.5;

}

100%{

transform:translate(-50%,-50%) scale(1.25);

opacity:1;

}

}

/*==========================================
            BURBUJA
==========================================*/

#pixsai-bubble{

position:absolute;

left:95px;

top:-15px;

background:rgba(15,15,15,.92);

border:2px solid var(--cian);

border-radius:18px;

padding:12px 16px;

min-width:230px;

color:white;

-webkit-text-stroke:0.6px #000;

text-shadow:
1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;

font-size:12px;

line-height:1.5;

opacity:0;

transform:translateY(10px);

transition:.4s;

box-shadow:

0 0 18px rgba(0,232,232,.5);

}


#pixsai-bubble.mostrar{

opacity:1;

transform:translateY(0);

}
/*==========================================================
                PARTÍCULAS PIXSAI
==========================================================*/

.pixel{

    position:fixed;

    width:8px;

    height:8px;

    background:var(--cian);

    pointer-events:none;

    z-index:999998;

    border-radius:2px;

    box-shadow:
        0 0 8px var(--cian),
        0 0 15px var(--cian);

    animation:desaparecerPixel .8s linear forwards;

}

@keyframes desaparecerPixel{

    0%{

        opacity:1;

        transform:
            translate(0, 0)
            scale(1)
            rotate(0deg);

    }

    100%{

        opacity:0;

        transform:
            translate(
                var(--movimiento-x),
                var(--movimiento-y)
            )
            scale(.2)
            rotate(180deg);

    }


}

@keyframes flotar{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}
}