:root {
  --planeta-pc: clamp(60px, 20vw, 60px);
  --planeta-mobile: clamp(28px, 8vw, 45px);
  --velocidad: 60s;

  /* 🔥 CLAVE: tamaños base (PC) */
  --radio-signos: clamp(135px, 30vw, 260px);
  --radio-planetas: clamp(70px, 20vw, 180px);
}

/* 🔥 RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

/* 🔥 BODY */
body {
  font-family: sans-serif;
  color: white;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
}

/* 🔥 NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 20px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  z-index: 50;
}

/* 🔥 LOGO */
.logo {
  font-size: 50px;
  font-weight: bold;
  color: #ffd79b;

  text-shadow:
    0 0 5px #ffd79b,
    0 0 10px #ffd79b,
    0 0 20px #eeff00,
    0 0 40px #eeff00;
}
/* 🔥 FONDOS */
#estrellas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

#fondo-video {
  position: fixed;
  inset: 0;
  object-fit: cover;
  z-index: -1;
}

/* 🔥 CONTENEDOR */
.contenedor {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 🔥 SECCIÓN RUEDA */
.seccion-rueda {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 70px);

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 🔥 grados de los signos  */
.seccion-contenido {
    position: relative; 
  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;

  z-index: 5;
}

/* 🔥 RUEDAS */
.rueda-signos {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: girar 40s linear infinite;
}

.rueda-planetas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: girarPlanetas var(--velocidad) linear infinite reverse;
  z-index: 5;
}

/* INTERACCIONES */
.rueda-planetas { pointer-events: none; }
.signo { pointer-events: auto; }
.planeta { pointer-events: auto; }

/* CENTRO */
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* SIGNOS */
.signo {
    color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(35px, 9vw, 70px);
  color: white;
  text-decoration: none;
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.aries .icono { color: #ff0000; }
.tauro .icono { color: #6cc34a; }
.geminis .icono { color: #dfcd6a; }
.cancer .icono { color: #00bfff; }
.leo .icono { color: #ff0000; }
.virgo .icono { color: #6cc34a; }
.libra .icono { color: #dfcd6a; }
.escorpio .icono { color: #00bfff; }
.sagitario .icono { color: #ff0000; }
.capricornio .icono { color: #6cc34a; }
.acuario .icono { color: #dfcd6a; }
.piscis .icono { color: #00bfff; }

.icono {
  display: inline-block;
  pointer-events: none;

  animation: contraGiro 40s linear infinite;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Arial Unicode MS", sans-serif;


  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
}

.signo:hover .icono {
  transform: scale(1.3);
}

/* 🔥 POSICIONES SIGNOS */
.aries { transform: translate(-50%, -50%) rotate(0deg) translate(var(--radio-signos)) rotate(0deg); }
.tauro { transform: translate(-50%, -50%) rotate(30deg) translate(var(--radio-signos)) rotate(-30deg); }
.geminis { transform: translate(-50%, -50%) rotate(60deg) translate(var(--radio-signos)) rotate(-60deg); }
.cancer { transform: translate(-50%, -50%) rotate(90deg) translate(var(--radio-signos)) rotate(-90deg); }
.leo { transform: translate(-50%, -50%) rotate(120deg) translate(var(--radio-signos)) rotate(-120deg); }
.virgo { transform: translate(-50%, -50%) rotate(150deg) translate(var(--radio-signos)) rotate(-150deg); }
.libra { transform: translate(-50%, -50%) rotate(180deg) translate(var(--radio-signos)) rotate(-180deg); }
.escorpio { transform: translate(-50%, -50%) rotate(210deg) translate(var(--radio-signos)) rotate(-210deg); }
.sagitario { transform: translate(-50%, -50%) rotate(240deg) translate(var(--radio-signos)) rotate(-240deg); }
.capricornio { transform: translate(-50%, -50%) rotate(270deg) translate(var(--radio-signos)) rotate(-270deg); }
.acuario { transform: translate(-50%, -50%) rotate(300deg) translate(var(--radio-signos)) rotate(-300deg); }
.piscis { transform: translate(-50%, -50%) rotate(330deg) translate(var(--radio-signos)) rotate(-330deg); }

/* PLANETAS */
.planeta {
  position: absolute;
  top: 50%;
  left: 50%;
}

.sol { transform: translate(-50%, -50%) rotate(0deg) translate(var(--radio-planetas)) rotate(0deg); }
.luna { transform: translate(-50%, -50%) rotate(27deg) translate(var(--radio-planetas)) rotate(-27deg); }
.mercurio { transform: translate(-50%, -50%) rotate(54deg) translate(var(--radio-planetas)) rotate(-54deg); }
.venus { transform: translate(-50%, -50%) rotate(81deg) translate(var(--radio-planetas)) rotate(-81deg); }
.marte { transform: translate(-50%, -50%) rotate(108deg) translate(var(--radio-planetas)) rotate(-108deg); }
.jupiter { transform: translate(-50%, -50%) rotate(135deg) translate(var(--radio-planetas)) rotate(-135deg); }
.saturno { transform: translate(-50%, -50%) rotate(162deg) translate(var(--radio-planetas)) rotate(-162deg); }
.urano { transform: translate(-50%, -50%) rotate(189deg) translate(var(--radio-planetas)) rotate(-189deg); }
.neptuno { transform: translate(-50%, -50%) rotate(216deg) translate(var(--radio-planetas)) rotate(-216deg); }
.pluton { transform: translate(-50%, -50%) rotate(243deg) translate(var(--radio-planetas)) rotate(-243deg); }
.quiron { transform: translate(-50%, -50%) rotate(270deg) translate(var(--radio-planetas)) rotate(-270deg); }
.nodo { transform: translate(-50%, -50%) rotate(297deg) translate(var(--radio-planetas)) rotate(-297deg); }
.lilith { transform: translate(-50%, -50%) rotate(324deg) translate(var(--radio-planetas)) rotate(-324deg); }

/* ICONO PLANETA */
.icono-planeta {
  display: inline-block;
  pointer-events: none;
  font-size: var(--planeta-pc);
  animation: contraPlaneta var(--velocidad) linear infinite;

  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
}

/* COLORES */
.sol .icono-planeta { color: #FFD700; }
.luna .icono-planeta { color: #C0C0C0; }
.mercurio .icono-planeta { color: #a9a9a9; }
.venus .icono-planeta { color: #ff69b4; }
.marte .icono-planeta { color: #ff4500; }
.jupiter .icono-planeta { color: #ff8c00; }
.saturno .icono-planeta { color: #d2b48c; }
.urano .icono-planeta { color: #00ffff; }
.neptuno .icono-planeta { color: #4169e1; }
.pluton .icono-planeta { color: #9370db; }
.quiron .icono-planeta { color: #ffffff; }
.nodo .icono-planeta { color: #00ffcc; }
.lilith .icono-planeta { color: #ff1493; }

/* ANIMACIONES */
@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes girarPlanetas {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes contraGiro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes contraPlaneta {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* FOOTER */
.footer {
  margin-top: auto;
  width: 100%;
  padding: 60px 20px 30px;
  background: linear-gradient(to top, #000000, transparent);
  text-align: center;
}

/* 🔥 RESPONSIVE */
@media (max-width: 600px) {
  :root {
    --radio-signos: clamp(90px, 35vw, 160px);
    --radio-planetas: clamp(80px, 24vw, 180px);
  }
}

  .logo {
    font-size: 28px;
    text-align: center;
  }

  .navbar {
    justify-content: center;
  }

  .icono-planeta {
    font-size: var(--planeta-mobile);
  }
  /* 🔥 BOTÓN HAMBURGUESA */
.menu-toggle {
  font-size: 30px;
  cursor: pointer;
  z-index: 100;
}

/* 🔥 MENÚ */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 260px;
  height: 100vh;

  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(10px);

  transition: 0.4s ease;
  z-index: 99;

  padding: 80px 20px;

  /* 🔥 CLAVE */
  overflow-y: auto;
}

/* ACTIVO */
.menu.activo {
  right: 0;
}

/* CONTENIDO */
.menu-contenido {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu h3 {
  margin-top: 20px;
  color: #ffd79b;
}

.menu a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

.menu a:hover {
  color: white;
  text-shadow: 0 0 10px white;
}

/* 🔥 CONTENEDOR TITULO (SIGNO + FLECHA) */
.menu-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 🔥 FLECHA */
.flecha {
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* 🔥 FLECHA ACTIVA (gira) */
.flecha.activa {
  transform: rotate(180deg);
}

/* 🔥 SUBMENU (OCULTO POR DEFECTO) */
.submenu {
  display: none;
  padding-left: 12px;
  margin-top: 6px;
  border-left: 1px solid rgba(255,255,255,0.1);
}

/* 🔥 SUBMENU ACTIVO */
.submenu.activo {
  display: block;
}

/* 🔥 ITEMS */
.submenu li {
  list-style: none;
}

/* 🔥 LINKS */
.submenu a {
  display: block;
  padding: 6px 0;
  color: #00bfff;
  text-decoration: none;
  transition: 0.3s;
}

/* 🔥 HOVER */
.submenu a:hover {
  color: #ffffff;
  transform: translateX(5px);
}


/* 📱 FIX RESPONSIVE REAL */
@media (max-width: 600px) {

  .contenedor {
    width: 100%;
  }

  .seccion-rueda {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
  }

  .rueda-signos,
  .rueda-planetas {
    width: 100%;
    height: 100%;
  }

  /* 🔥 HACE QUE LA RUEDA ESCALE */
  .seccion-rueda {
    transform: scale(1.2);
  }

  /* 🔥 CENTRADO PERFECTO */
  .rueda-planetas {
    transform: translate(-50%, -50%) scale(1.1);
  }

  /* 🔥 ICONOS MÁS GRANDES EN CELU */
  .icono {
    font-size: clamp(26px, 7vw, 42px);
  }

  .icono-planeta {
    font-size: clamp(24px, 6vw, 40px);
  }

  /* 🔥 LOGO MÁS CHICO */
  .logo {
    font-size: 22px;
    text-align: center;
  }

  /* 🔥 NAV CENTRADO */
  .navbar {
    justify-content: center;
  }
}
/* 🔥 CTA CENTRADO PRO */
.seccion-contenido {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 20px;
}

.cta-grado {
  max-width: 500px;
}

/* TITULO */
.cta-grado h2 {
  font-size: 32px;
  margin-bottom: 15px;

  color: #ffd79b;

  text-shadow:
    0 0 10px #ffd79b,
    0 0 20px #ffae00;
}

/* TEXTO */
.cta-grado p {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 25px;
}

/* BOTÓN */
.btn-grado {
  display: inline-block;
  padding: 15px 30px;

  font-size: 18px;
  text-decoration: none;
  color: white;

  border-radius: 30px;

  background: linear-gradient(45deg, #ff0000, #ff7300);

  box-shadow:
    0 0 10px #ff0000,
    0 0 25px #ff0000;

  transition: 0.3s;

  animation: latido 1.5s infinite;
}

/* HOVER */
.btn-grado:hover {
  transform: scale(1.1);

  box-shadow:
    0 0 20px #ff0000,
    0 0 40px #ff0000;
}

/* ANIMACIÓN */
@keyframes latido {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 📱 MOBILE */
@media (max-width: 600px) {
  .cta-grado h2 {
    font-size: 24px;
  }

  .btn-grado {
    font-size: 16px;
    padding: 12px 22px;
  }
}
   
.famosos-grado {
  text-align: center;
  margin-top: 40px;
}

.famosos-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.famoso {
  width: 100px;
}

.famoso img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}

.famoso img:hover {
  transform: scale(1.1);
}

.famoso p {
  margin-top: 8px;
  font-size: 14px;
}



/* carrusel */
.carrusel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carrusel-track {
  display: flex;
  gap: 20px;
  padding: 10px;
}

.famoso {
  min-width: 120px;
  scroll-snap-align: center;
  flex-shrink: 0; /* 🔥 clave */
}
/* Que quede fijo en pc */
@media (min-width: 768px) {

  .carrusel {
    overflow-x: visible; /* ❌ sacamos scroll */
  }

  .carrusel-track {
    width: 100%;
    justify-content: center; /* 🔥 centra todo */
  }

}
#resultadoIA {
  max-height: 400px;   /* límite de altura */
  overflow-y: auto;    /* scroll vertical */
  padding: 15px;
  margin-top: 20px;

  background: rgba(0,0,0,0.6);
  border-radius: 10px;

  text-align: left;
}
#resultadoIA::-webkit-scrollbar {
  width: 6px;
}

#resultadoIA::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}