@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&family=Share+Tech+Mono&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; }

body { background: radial-gradient(circle at center, #1b0033 0%, #05050f 100%); color: #e0eaff; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

/* Navegación */
.navegacion { background: linear-gradient(90deg, #0f0c29, #302b63, #24243e); padding: 20px; text-align: center; border-bottom: 3px solid #00d2ff; box-shadow: 0 0 20px rgba(0, 210, 255, 0.5); }
.navegacion a { color: #00d2ff; text-decoration: none; margin: 0 15px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.1rem; padding: 8px 20px; border: 2px solid transparent; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%); }
.navegacion a:hover, .navegacion a.activo { background-color: #00d2ff; color: #000; box-shadow: 0 0 15px #00d2ff; }

/* Holograma */
.pagina-libro { flex: 1; max-width: 850px; margin: 40px auto; background: rgba(10, 15, 30, 0.85); padding: 50px; border-radius: 10px; border: 2px solid #b100e8; box-shadow: 0 0 30px rgba(177, 0, 232, 0.4), inset 0 0 20px rgba(0, 210, 255, 0.2); backdrop-filter: blur(10px); transform-origin: center; animation: hologramDeploy 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: flex; justify-content: center; align-items: center; }

@keyframes hologramDeploy { 0% { transform: scale(0.5) translateY(100px); opacity: 0; filter: hue-rotate(90deg); } 100% { transform: scale(1) translateY(0); opacity: 1; filter: hue-rotate(0deg); } }

/* TARJETA CYBER HACKER */
.tarjeta-creditos { 
    text-align: center; background: rgba(0,0,0,0.6); padding: 40px; 
    border-radius: 0; border: 2px solid #00ffcc; width: 100%;
    position: relative; box-shadow: inset 0 0 30px rgba(0, 255, 204, 0.2);
}
/* Esquinas Tecnológicas */
.tarjeta-creditos::before { content: ''; position: absolute; top: -2px; left: -2px; width: 20px; height: 20px; border-top: 4px solid #fff; border-left: 4px solid #fff; }
.tarjeta-creditos::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-bottom: 4px solid #fff; border-right: 4px solid #fff; }

/* Foto Hacker */
.foto-john {
    border-radius: 0; /* Forma de bloque */
    border: 4px solid #00ff00; 
    width: 160px; height: 160px; object-fit: cover; margin-bottom: 20px;
    box-shadow: 0 0 20px #00ff00;
    filter: contrast(1.2) saturate(1.5); /* Filtro más intenso */
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.nombre-creador { font-family: 'Orbitron', sans-serif; font-size: 3rem; color: #00d2ff; margin-bottom: 10px; text-shadow: 0 0 10px #00d2ff; text-transform: uppercase;}

/* Etiqueta Hacker Matrix Terminal */
.etiqueta-hacker {
    display: inline-block; background-color: #001a00; color: #00ff00;
    font-family: 'Share Tech Mono', monospace; padding: 10px 20px;
    border: 1px solid #00ff00; border-radius: 0; font-size: 1.3rem;
    margin-bottom: 25px; box-shadow: 0 0 15px rgba(0,255,0,0.5);
    letter-spacing: 2px; text-transform: uppercase;
}
.etiqueta-hacker::before { content: '>_ '; color: #fff; }

.descripcion-creador { font-size: 1.4rem; line-height: 1.6; color: #a3c2c2; }

/* Dinero -> Cyber Chip de Créditos / V-Bucks */
.css-dinero {
    display: inline-block; width: 45px; height: 28px;
    background-color: #1a1a1a; border: 2px solid #f39c12; 
    position: relative; vertical-align: middle; margin-left: 10px;
    box-shadow: 0 0 10px #f39c12, inset 0 0 10px #f39c12;
    transform: skewX(-15deg); /* Inclinación dinámica */
}
.css-dinero::before {
    content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px;
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(243, 156, 18, 0.3) 2px, rgba(243, 156, 18, 0.3) 4px);
}
.css-dinero::after {
    content: '$'; position: absolute; color: #fff; font-family: 'Orbitron', sans-serif;
    font-size: 16px; font-weight: bold; top: 50%; left: 50%;
    transform: translate(-50%, -50%) skewX(15deg); /* Desinclinar el texto */
    text-shadow: 0 0 5px #fff;
}

/* Footer */
footer { background: #0f0c29; text-align: center; padding: 20px; margin-top: auto; border-top: 2px solid #b100e8; }
footer p { color: #00d2ff; font-family: 'Orbitron', sans-serif; font-size: 1rem; text-shadow: 0 0 5px #00d2ff; display: inline-block; }