/* ==============================
   CarpeDiemDiaz – Premium Theme
   Azul / Violeta Neon
================================ */

:root {
  /* Identidad */
  --neon-primary: #6a5cff;   /* violeta humano */
  --neon-accent:  #3fdcff;   /* cyan viajero */
  --neon-soft:    #a9a4ff;

  /* Fondo */
  --bg-main: #0b0f1a;
  --bg-glass: rgba(255, 255, 255, 0.08);

  /* Texto */
  --text-main: #ffffff;
  --text-muted: #b9c2ff;
}

/* ==============================
   Base
================================ */

body {
  background: radial-gradient(
    circle at top,
    #151b3a 0%,
    #0b0f1a 60%
  );
  color: var(--text-main);
}

/* ==============================
   Título principal
================================ */

h1 {
  position: relative;
  z-index: 20;

  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 0.06em;

  background: linear-gradient(
    90deg,
    var(--neon-primary),
    var(--neon-accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Glow limpio, visible en Chrome */
  text-shadow:
    0 0 6px rgba(106, 156, 255, 0.6),
    0 0 18px rgba(63, 220, 255, 0.35),
    0 0 40px rgba(63, 220, 255, 0.15);

  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal;
}

/* Apellido Diaz ligeramente distinto */
h1 .diaz {
  background: linear-gradient(
    90deg,
    #ffffff,
    var(--neon-accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==============================
   Botones
================================ */

button {
  background: linear-gradient(
    90deg,
    var(--neon-primary),
    var(--neon-accent)
  );
  box-shadow: 0 0 25px rgba(120, 120, 255, 0.45);
}

button:hover {
  box-shadow: 0 0 40px rgba(160, 140, 255, 0.75);
}

/* ==============================
   Holograma ajustes
================================ */

.holo-wrapper {
  margin: 2.5rem auto;
  display: flex;
  justify-content: center;
  perspective: 900px;
}

.holo-face {
  width: 280px;
  max-width: 70vw;
  opacity: 0.78;
  filter:
    drop-shadow(0 0 25px rgba(63,220,255,0.45))
    drop-shadow(0 0 60px rgba(106,156,255,0.25));
  animation: holo-float 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes holo-float {
  0%   { transform: translateY(0px) rotateY(-6deg); }
  50%  { transform: translateY(-12px) rotateY(6deg); }
  100% { transform: translateY(0px) rotateY(-6deg); }
}

/* ==============================
   Glass hero
================================ */

.hero {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes holoPresence {
  0%   { opacity: 0; transform: translateY(10px) scale(0.98); }
  15%  { opacity: 0.75; transform: translateY(0) scale(1); }
  70%  { opacity: 0.75; }
  85%  { opacity: 0.25; }
  100% { opacity: 0; transform: translateY(-6px) scale(0.97); }
}

.holo-face {
  animation:
    holoPresence 14s ease-in-out infinite,
    holo-float 6s ease-in-out infinite;
}