:root{--tamano-cubo:2}

html{height:100%;overflow:hidden;background:#0f172a}

body{margin:0;padding:0;min-height:100dvh;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:hidden;background:url('img/fondo.png') center/cover no-repeat;color:#f8fafc;font-family:Arial,sans-serif;text-align:center;perspective:1000px}

.cubo-contenedor{position:fixed;width:300px;height:300px;top:calc(50% - 150px);left:calc(50% - 150px);transform-style:preserve-3d;animation:rotarCubo 20s infinite linear;z-index:1;pointer-events:none}

@keyframes rotarCubo{
from{transform:scale(var(--tamano-cubo)) rotateX(0) rotateY(0)}
to{transform:scale(var(--tamano-cubo)) rotateX(360deg) rotateY(360deg)}
}

.cara{position:absolute;width:100%;height:100%;background:rgba(56,189,248,.005);border:2px solid #38bdf811;box-shadow:0 0 20px #38bdf811}
.cara-frente{transform:translateZ(150px)}
.cara-atras{transform:rotateY(180deg) translateZ(150px)}
.cara-derecha{transform:rotateY(90deg) translateZ(150px)}
.cara-izq{transform:rotateY(-90deg) translateZ(150px)}
.cara-arriba{transform:rotateX(90deg) translateZ(150px)}
.cara-abajo{transform:rotateX(-90deg) translateZ(150px)}

.container{width:100%;max-width:800px;padding:5px 20px 20px;box-sizing:border-box;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}

picture{display:block;width:100%}
.logo{width:100%;max-width:600px;margin:auto;display:block}

h1{margin:20px 0 5px;color:#38bdf8;font-size:1.8rem;font-weight:600}

p{margin-bottom:10px;color:#38bdf8;font-size:1rem;line-height:1.4}
p a{color:inherit;text-decoration:none}

.media{width:100%;max-width:800px;margin:30px auto;border-radius:20px;overflow:hidden}

.media img{width:100%;height:auto;display:block}