/* Reset básico */
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #272727;
}

/* Escena 3D */
.escena {
    margin-top: 500px;
    margin-bottom: 500px;
    width: 200px;
    height: 200px;
    perspective: 1000px;
    
}

/* Cubo contenedor */
.cubo {
    width: 100%;
    height: 100%;
    position: relative;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    animation: girar 20s infinite linear;
    will-change: transform;
}

/* Estilos comunes para las caras */
.cara {
    position: absolute;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='noise' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' seed='0'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.3 0'/%3E%3C/filter%3E%3ClinearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='100%'%3E%3Cstop offset='0%' stop-color='%230a0a0a'/%3E%3Cstop offset='50%' stop-color='%23101010'/%3E%3Cstop offset='100%' stop-color='%23080808'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23grad)'/%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.25'/%3E%3Cpath d='M0 0 L100 0 L100 1 L0 1 Z' fill='rgba(255,255,255,0.02)'/%3E%3Cpath d='M0 0 L0 100 L1 100 L1 0 Z' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E");
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    opacity: 1;
}
.letra {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(36, 35, 35);
    display: flex;
    justify-content: center;
    font-size: 2.5px;
    align-items: center;
    font-weight: bold;
    border: 0.1px solid rgba(255, 255, 255, 0.7); /* Borde semitransparente inicial */
    color: #fff;
    will-change:opacity;
  
    /* Efecto LED estático (base) */
    text-shadow: 
      0 0 1px #fff,
      0 0 2px #fff;
    box-shadow: 
      0 0 1px rgba(255, 255, 255, 0.7),
      0 0 2px rgba(255, 255, 255, 0.5);
    
    /* Animación de respiración (texto + borde) */
    animation: breathing 3s ease-in-out infinite;

}
.logoFG{
    transform: rotateY(180deg) translateZ(-1px) translateX(-80px) translateY(-10px); 
    width: 40px;
    height:40px;
    border:  0.1px solid rgb(255, 255, 255);
    font-family: "Petit Formal Script", cursive;
    will-change:opacity;
    font-style: italic;
    letter-spacing: 1px;
    border-radius: 50px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    animation: breathing 3s ease-in-out infinite;
    background: linear-gradient(
        145deg,
        #3A3A3A 0%,      /* Gris casi negro */
        #6B6B6B 25%,     /* Gris medio */
        #2C2C2C 50%,     /* Sombra */
        #5E5E5E 75%,     /* Brillo metálico */
        #1E1E1E 100%),     /* Base oscura */
}

/* Posicionamiento de cada cara 
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/abfa1d55-5135-4daf-850c-7806f8161fe0/dge4a5g-df0c4eed-8a87-4fd9-aaaf-6eaf6232aae4.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FiZmExZDU1LTUxMzUtNGRhZi04NTBjLTc4MDZmODE2MWZlMFwvZGdlNGE1Zy1kZjBjNGVlZC04YTg3LTRmZDktYWFhZi02ZWFmNjIzMmFhZTQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.yRCKpr2wO6LeGm6jMdC5FbmVacGxVrB6Y_AzCEvmlSw");
*/
.frontal{ 
    width: 192px;
    height:92px;
    transform: translateZ(4px);
    background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/abfa1d55-5135-4daf-850c-7806f8161fe0/dge4a5g-df0c4eed-8a87-4fd9-aaaf-6eaf6232aae4.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FiZmExZDU1LTUxMzUtNGRhZi04NTBjLTc4MDZmODE2MWZlMFwvZGdlNGE1Zy1kZjBjNGVlZC04YTg3LTRmZDktYWFhZi02ZWFmNjIzMmFhZTQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.yRCKpr2wO6LeGm6jMdC5FbmVacGxVrB6Y_AzCEvmlSw");
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 4px solid #000;
}
.derecha{ 
    width: 3px;
    height:100px;
    transform: rotateY(90deg) translateZ(197px) translateX(-3px); 
}
.atras{ 
    transform: rotateY(180deg) translateZ(-2px); 
    width: 200px;
    height:100px;
    background-color: rgb(0, 0, 0);
    opacity: 1;
}
.izquierda{ 
    width: 3px;
    height:100px;
    transform: rotateY(90deg) translateZ(-1px) translateX(-3px); 
}
.superior{ 
    width: 200px;
    height:3px;
    transform: rotateX(90deg) translateZ(1px) translateY(3px) ; 
}
.inferior{ 
    width: 200px;
    height:3px;
    transform: rotateX(90deg) translateZ(-99px) translateY(3px); 
}
.bisagra{
    width: 150px;
    height:13px;
    transform: rotateX(65deg) translateZ(-83px) translateY(49px) translateX(25px);
}

.frontalT{ 
    width: 200px;
    height:6px;
    transform: translateZ(50px) translateY(105px) translateZ(50px);
}

.derechaT{ 
    width: 100px;;
    height:6px;
    transform: rotateY(-90deg) translateZ(40px) translateY(105px) translateX(50px) translateZ(-190px); 
}

.izquierdaT{ 
    width: 100px;;
    height:6px;
    transform: rotateY(-90deg) translateZ(40px) translateY(105px) translateX(50px) translateZ(10px); 
}
.atrasT{ 
    width: 200px;
    height:6px;
    transform: translateZ(0px) translateY(105px);
}

.superiorT{ 
    width: 100px;
    height:200px;
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-5px) translateY(-50px) translateX(50px);
}
.inferiorT{ 
    width: 100px;
    height:200px;
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-11px) translateY(-50px) translateX(50px);
}
/*FILA1*/
.esc{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(10px);
}
.f1{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(25px);
}
.f2{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(32px);
}
.f3{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(39px);
}
.f4{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(46px);
}
.f5{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(56px);
}
.f6{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(63px);
}
.f7{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(70px);
}
.f8{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(77px);
}
.f9{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(87px);
}
.f10{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(94px);
}
.f11{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(101px);
}
.f12{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(108px);
}
.prt{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(129px);
}
.scr{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(136px);
}
.pause{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(26px) translateX(143px);
}
/*FILA 2*/
.º{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(10px); 
}
.n1{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(17px); 
}
.n2{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(24px); 
}
.n3{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(31px); 
}
.n4{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(38px); 
}
.n5{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(45px); 
}
.n6{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(52px); 
}
.n7{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(59px); 
}
.n8{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(66px); 
}
.n9{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(73px); 
}
.n0{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(80px); 
}
.ap{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(87px); 
}
.exin{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(94px); 
}
.del{
    width: 18px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(101px); 
}
.ins{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(129px); 
}
.inicio{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(136px); 
}
.re{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(143px); 
}
.npnum{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(159px); 
}
.npentre{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(166px); 
}
.nppor{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(173px); 
}
.npmen{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(35px) translateX(180px); 
}

/*FILA 3*/
.tab{
    width: 12px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(10px);
}
.q{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(23px);
}
.w{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(30px);
}
.e{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(37px);
}
.r{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(44px);
}
.t{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(51px);
}
.y{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(58px);
}
.u{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(65px);
}
.i{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(72px);
}
.o{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(79px);
}
.p{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(86px);
}
.let1{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(93px);
}
.mas{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(100px);
}
.enter{
    width: 12px;
    font-size:5px;
    height:13px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-98px) translateY(45.5px) translateX(107px);
}
.supr{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(129px);
}
.fin{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(136px);
}
.av{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(143px);
}
.np7{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(159px); 
}
.np8{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(166px); 
}
.np9{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(42px) translateX(173px); 
}
.npmas{
    width: 6px;
    height:12px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-98px) translateY(45px) translateX(180px); 
}
/*FILA 4*/
.mayus{
    width: 12px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(10px);
}
.a{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(23px);
}
.s{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(30px);
}
.d{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(37px);
}
.f{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg)translateZ(-101px) translateY(49px) translateX(44px);
}
.g{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(51px);
}
.h{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(58px);
}
.j{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(65px);
}
.k{  
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(72px);
}
.l{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(79px);
}
.ñ{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(86px);
}
.apo{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(93px);
}
.ç{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(100px);
}
.np4{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(159px);
}
.np5{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(166px);
}
.np6{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(49px) translateX(173px);
}
/*FILA 5*/
.shift1{
    width: 12px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(10px);
}
.menor{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(23px);
}
.z{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(30px);
}
.x{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(37px);
}
.c{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(44px);
}
.v{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(51px);
}
.b{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(58px);
}
.n{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(65px);
}
.m{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(72px);
}
.coma{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(79px);
}
.punto{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(86px);
}
.guion{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(93px);
}
.shift2{
    width: 19px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(100px);
}
.arr{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(136px);
}
.np1{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(159px);
}
.np2{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(166px);
}
.np3{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(56px) translateX(173px);
}
.npenter{
    width: 6px;
    height:14px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-97px) translateY(59px) translateX(180px);
}
/*FILA 6*/
.ctrl{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(10px);
}
.system{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(17px);
}
.alt{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(24px);
}
.barra{
    width: 67px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(31px);
}
.alt2{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(99px);
}
.fn{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(106px);
}
.ctrl2{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(113px);
}
.izq{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(129px);
}
.abj{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(136px);
}
.der{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(143px);
}
.np0{
    width: 13px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(159px);
}
.nppunto{
    width: 6px;
    height:6px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-101px) translateY(63px) translateX(173px);
}
/*FILA 6*/
.touchpad{
    width: 50px;
    height:20px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-95px) translateY(82px) translateX(75px);
    background-color: rgb(79, 82, 82);
}
.btnTP{
    width: 25px;
    height:5px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-82px) translateY(95px) translateX(75px);
    border: 0.2px solid black;
    background-color: rgb(79, 82, 82);
}
.btnTP2{
    width: 25px;
    height:5px;
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-76.5px) translateY(95px) translateX(100px);
    border: 0.2px solid black;
    background-color: rgb(79, 82, 82);
}
.btnOff{
    width: 8px;
    height:8px;
    border-radius: 50px;
    border-color: 2px solid rgb(5, 189, 14);
    transform: rotateX(90deg) rotateZ(360deg) translateZ(-70px) translateY(20px) translateX(174px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='6px' viewBox='0 -960 960 960' width='6px' fill='green'%3E%3Cpath d='M480-480q-17 0-28.5-11.5T440-520v-320q0-17 11.5-28.5T480-880q17 0 28.5 11.5T520-840v320q0 17-11.5 28.5T480-480Zm0 360q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-61 20-118.5T198-704q11-14 28-13.5t30 13.5q11 11 10 27t-11 30q-27 36-41 79t-14 88q0 117 81.5 198.5T480-200q117 0 198.5-81.5T760-480q0-46-13.5-89.5T704-649q-10-13-11-28.5t10-26.5q12-12 29-12.5t28 12.5q39 48 59.5 105T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    mask: urlurl("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='6px' viewBox='0 -960 960 960' width='6px' fill='green'%3E%3Cpath d='M480-480q-17 0-28.5-11.5T440-520v-320q0-17 11.5-28.5T480-880q17 0 28.5 11.5T520-840v320q0 17-11.5 28.5T480-480Zm0 360q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-61 20-118.5T198-704q11-14 28-13.5t30 13.5q11 11 10 27t-11 30q-27 36-41 79t-14 88q0 117 81.5 198.5T480-200q117 0 198.5-81.5T760-480q0-46-13.5-89.5T704-649q-10-13-11-28.5t10-26.5q12-12 29-12.5t28 12.5q39 48 59.5 105T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Z'/%3E%3C/svg%3E")no-repeat center;
    animation: breathingBTN 3s infinite;
}
.webcam{
    width: 1px;
    height:1px;
    border-radius:50px;
    transform: translateZ(4px) translateX(99px) translateY(-38px);
    background: rgba(83, 83, 83, 0.1);    /* Fondo semi-transparente */
    backdrop-filter: blur(10px);             /* Desenfoque del contenido detrás */
    border: 1px solid rgba(255, 255, 255, 0.2);  /* Borde sutil */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: breathingBTN 3s infinite;
}
/* Animación de giro (eje Y) */
@keyframes girar {
    from { transform: rotateX(0deg) }
    to { transform: rotateX(360deg) }
}
@keyframes breathing {
    0%, 100% {
        opacity: 0.4;
        border-color: rgba(255, 255, 255, 0.5); /* Borde más tenue */
        border-width: 0.1px; /* Grosor mínimo */
        text-shadow: 
            0 0 1px #fff,
            0 0 2px #fff;
        box-shadow: 
            0 0 1px rgba(255, 255, 255, 0.5),
            0 0 2px rgba(255, 255, 255, 0.3);
    }
    50% {
        opacity: 1;
        border-color: rgba(255, 255, 255, 0.863); /* Borde brillante al máximo */
        border-width: 0.2px; /* Ligero aumento de grosor */
        text-shadow: 
            0 0 2px #fff,
            0 0 3px #fff;
        box-shadow: 
            0 0 2px rgba(255, 255, 255, 0.8),
            0 0 3px rgba(255, 255, 255, 0.6);
    }
    
  }
  @keyframes breathingBTN {
    0%, 100% {
        opacity: 0.4;
        border-color: rgba(30, 202, 44, 0.5); /* Borde más tenue */
        border-width: 0.1px; /* Grosor mínimo */
        text-shadow: 
            0 0 1px green,
            0 0 2px green;
        box-shadow: 
            0 0 1px rgba(30, 202, 44, 0.5),
            0 0 2px rgba(30, 202, 44, 0.3);
    }
    50% {
        opacity: 1;
        border-color: rgba(30, 202, 44, 0.863); /* Borde brillante al máximo */
        border-width: 0.2px; /* Ligero aumento de grosor */
        text-shadow: 
            0 0 2px green,
            0 0 3px green;
        box-shadow: 
            0 0 2px rgba(30, 202, 44, 0.8),
            0 0 3px rgba(30, 202, 44, 0.6);
    }
    
  }