/* FUENTES FUTURISTAS DE GOOGLE */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap');

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

body { 
    /* Fondo espacial/oscuro tecnológico */
    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 ESTILO FORTNITE */
.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%); /* Botones inclinados */
}
.navegacion a:hover, .navegacion a.activo { 
    background-color: #00d2ff; color: #000;
    box-shadow: 0 0 15px #00d2ff;
}

/* PANEL HOLOGRÁFICO (Ex Animación de Libro) */
.pagina-libro {
    flex: 1; max-width: 850px; margin: 40px auto; 
    background: rgba(10, 15, 30, 0.85); 
    padding: 40px; 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;
}

@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); }
}

/* CARTA Y FOTOS */
.carta-agradecimiento { text-align: center; }
.foto-milu { 
    border-radius: 15px; /* Corte más Roblox/Geométrico */
    border: 4px solid #00d2ff; 
    width: 180px; height: 180px; 
    object-fit: cover;
    box-shadow: 0 0 25px #00d2ff, inset 0 0 10px #00d2ff;
    margin-bottom: 25px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Forma Hexagonal */
}
h1 { 
    color: #fff; font-family: 'Orbitron', sans-serif; 
    text-transform: uppercase; margin-bottom: 20px; font-size: 2.5rem; 
    text-shadow: 0 0 10px #b100e8, 0 0 20px #b100e8; 
    letter-spacing: 2px;
}
p { font-size: 1.3rem; line-height: 1.8; color: #c2d1f0; text-align: justify; }

/* DECORACIONES REDISEÑADAS A CIBERNÉTICAS */
.decoracion-css { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 30px 0; }

/* Ex Flor -> Ahora es un Núcleo de Energía Giratorio */
.css-flor { 
    width: 40px; height: 40px; background: transparent; 
    position: relative; display: inline-block; 
    border: 3px solid #00ffcc;
    box-shadow: 0 0 15px #00ffcc, inset 0 0 15px #00ffcc;
    animation: spinBlock 4s linear infinite;
}
.css-flor::before, .css-flor::after { 
    content: ''; position: absolute; background: transparent; 
    border: 2px solid #b100e8; width: 30px; height: 30px; 
    top: 2px; left: 2px; box-shadow: 0 0 10px #b100e8;
}
.css-flor::after { transform: rotate(45deg); border-color: #00d2ff; box-shadow: 0 0 10px #00d2ff;}

@keyframes spinBlock { 100% { transform: rotate(360deg); } }

/* Ex Conejito -> Ahora es un Conejito Mecha/Robótico (Estilo Roblox) */
.css-conejito { 
    width: 50px; height: 40px; background: #1a1a2e; 
    position: relative; border: 3px solid #b100e8; 
    box-shadow: 0 0 15px #b100e8; border-radius: 10px; /* Cabeza bloque */
    display: flex; justify-content: center; align-items: center;
}
/* Visor LED */
.css-conejito::before { 
    content: ''; position: absolute; width: 30px; height: 8px; 
    background: #00d2ff; box-shadow: 0 0 10px #00d2ff;
    top: 10px; border-radius: 0; left: auto; transform: none;
}
/* Orejas Metálicas */
.css-conejito::after { 
    content: ''; position: absolute; width: 50px; height: 25px; background: transparent; 
    border-left: 10px solid #b100e8; border-right: 10px solid #b100e8;
    top: -25px; border-radius: 0; transform: none; right: auto;
}

/* 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; }