@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");

body {
  margin: 0;
  padding: 0;
  display: flex; /* Cambiamos grid por flex */
  flex-direction: column; /* Apila los elementos: Header -> Main -> Footer */
  align-items: center; /* Centra horizontalmente */
  min-height: 100vh; /* Permite que el cuerpo crezca si el contenido es mucho */
  width: 100vw;
  overflow-x: hidden; /* Evita el scroll lateral */
  background: black;
  color: white;
}

.clock {
  --clock-size: 360px;
  max-width: 90vw; /* Asegura que el reloj nunca sea más ancho que la pantalla */
  width: var(--clock-size);
  height: var(--clock-size);
  font-family: "Comfortaa", sans-serif;
  margin: auto; /* Esto lo mantendrá centrado verticalmente en el espacio sobrante */
  border-radius: 50%;
  position: relative;
}

.spike {
  z-index: 5;
  position: absolute;
  width: 8px;
  height: 1px;
  background: #fff9;
  line-height: 20px;
  transform-origin: 50%;
  inset: 0;
  margin: auto;
  font-style: normal;
  transform: rotate(var(--rotate)) translateX(var(--dail-size));
}

.spike:nth-child(5n + 1) {
  box-shadow: -7px 0 #fff9;
}

.spike:nth-child(5n + 1):after {
  content: attr(data-i);
  position: absolute;
  right: 22px;
  top: -10px;
  transition: 1s linear;
  transform: rotate(calc(var(--dRotate) - var(--rotate)));
}

.seconds {
  --dRotate: 0deg;
  --dail-size: calc((var(--clock-size) / 2) - 8px);
  font-weight: 800;
  font-size: 16px;
  transform: rotate(calc(-1 * var(--dRotate)));
  position: absolute;
  inset: 0;
  margin: auto;
  transition: all 0.2s ease-out;
}

.minutes {
  --dail-size: calc((var(--clock-size) / 2) - 65px);
  position: absolute;
  inset: 0;
  font-size: 16px;
  transform: rotate(calc(-1 * var(--dRotate)));
  margin: auto;
  transition: all 0.2s ease-out;
}

.hour {
  font-size: 70px;
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.minute {
  z-index: 10;
  font-size: 36px;
  font-weight: 900;
  position: absolute;
  background: black;
  right: calc(var(--clock-size) / 4.5);
  top: 50%;
  transform: translateY(-50%);
}

.minute:after {
  content: "";
  position: absolute;
  border: 2px solid #29ff08;
  border-right: none;
  height: 50px;
  left: -10px;
  top: 50%;
  border-radius: 40px 0 0 40px;
  width: calc(var(--clock-size) / 2.75);
  transform: translateY(-50%);
}

.menu {
  width: 100%;
  background: rgba(114, 47, 55, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: var(--shadow);
}

.menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 14px;
  flex-wrap: wrap;
}

.link {
  display: inline-block;
  position: relative;
  padding: 12px 22px;
  color: var(--text-main);
  border-radius: 999px;
  overflow: hidden;
  transition: var(--transition);
  text-decoration: none;
  z-index: 1;
  font-weight: 600;
}

.link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--primary);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}

.link:hover {
  color: #000;
}

.link:hover::before {
  clip-path: circle(100% at 50% 50%);
}

/* =========================
   VARIABLES
========================= */
:root {
  --bg-main: #0d0d0d;
  --bg-card: #171717;
  --bg-soft: #222222;
  --primary: #38bdf8;
  --primary-dark: #0ea5e9;
  --accent: #722f37;
  --text-main: #ffffff;
  --text-soft: #cfcfcf;
  --text-muted: #9ca3af;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --transition: all 0.3s ease;
}

@media (max-width: 600px) {
  .menu {
    border-radius: 20px; /* Menos redondeado en móvil para aprovechar espacio */
    width: 95%;
    margin-top: 10px;
  }

  .menu ul {
    flex-direction: column; /* Aquí ocurre la magia: apilamos los enlaces */
    gap: 5px;
    padding: 0;
  }

  .link {
    width: 100%; /* El botón ocupa todo el ancho del menú */
    text-align: center;
    padding: 10px 0;
  }

  .clock {
    --clock-size: 280px; /* Reducimos el reloj para que quepa bien con el menú abierto */
  }

  .hour {
    font-size: 50px; /* Ajustamos el tamaño de la fuente para que no se desborde */
  }
}