@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');


/*-------------------- Global --------------------*/
:root {
  --primary: #0d6efd;
  --dark: #212529;
  --body: #888;
  --boxsha: 0 8px 22px rgba(0, 0, 0, 0.15);
  --navy: #003B5C;
  --white: #fff;
  --footer-text: #009ec0;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  /*font-family: 'Sora', sans-serif;*/
  font-family: 'Russo One', sans-serif;

  color: var(--dark);
  background-image: url("../pics/space.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}



h3, h5, h6 { color: var(--white); }

h2 {
  font-size: 1.5vw;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto;
  max-width: 90%;
  word-wrap: break-word;
  color: var(--white);
}

/*-------------------- Links / botones --------------------*/
/*a { color: var(--primary); text-decoration: none; }*/

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  transition: all 0.3s ease-in-out;
}
.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}




/*-------------------- Secciones / contenedor --------------------*/
/*.section { padding: 60px 0; }*/

.content-wrapper {
  padding: 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: var(--boxsha);
  border-radius: 50px;
  background: transparent;
}
.content-wrapper-gdd {
  max-width: 1200px;
  box-shadow: var(--boxsha);
  border-radius: 50px;
  background-image: url("../pics/fondo.png");
  /*background: transparent;*/
}
.back-prueba {
  background-image: url("../pics/fondo.png");
}

/*-------------------- Hero --------------------*/
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

/* Quita font-size fijo, deja que Tailwind maneje tamaños */
.hero h1 {
  color: #fdfeff;
}


.hero-year {
    color: #FFD700;
}

.mov-bar {
  text-shadow: 0 0 6px rgb(0, 0, 0)
}




/*-------------------- Utilidades --------------------*/
.text-center p { font-size: 1rem; }




/*-------------------- Im�genes presentaci�n --------------------*/
.presentation img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
}

/*-------------------- Registro / listas --------------------*/
.registro .list-group-item { transition: all 0.3s ease-in-out; }
.registro .list-group-item:hover {
  background-color: var(--primary);
  color: #fff;
}
.registro .row.align-items-center {
  display: flex;
  align-items: center;
}
.registro h5.align-middle {
  margin-top: 30px;
  margin-bottom: 20px;
}

/*-------------------- Social --------------------*/
.icon-lg { font-size: 2rem; color: var(--primary); }

/* estilos base */
.social-media a {
  color: #ffffff; /* color inicial */
  text-decoration: none;
  transition: all 0.3s ease; /* animación suave */
}

.social-media a[href*="tiktok"] i{
  color: #e3e3e3;
  text-decoration: none;
  transition: all 0.3s ease; /* animación suave */
}

.social-media a[href*="facebook"] i{
  color: #e3e3e3;
  text-decoration: none;
  transition: all 0.3s ease; /* animación suave */
}

.social-media a[href*="instagram"] i{
  color: #e3e3e3;
  text-decoration: none;
  transition: all 0.3s ease; /* animación suave */
}
.social-media a[href*="tiktok"]:hover {
  color: #69C9D0; /* azul tiktok */
  transform: scale(1.15);
}

.social-media a[href*="facebook"]:hover {
  color: #1877f2; /* azul oficial Facebook */
  transform: scale(1.15);
}

.social-media a[href*="instagram"]:hover {
  color: #e4405f; /* rosa oficial Instagram */
  transform: scale(1.15);
}

.social-media a[href*="tiktok"]:hover i{
  color: #ffffff; /* rosa tiktok */
}

.social-media a[href*="facebook"]:hover i{
  color: #ffffff; /* azul oficial Facebook */
}

.social-media a[href*="instagram"]:hover i{
  color: #ffffff; /* rosa oficial Instagram */
}


.gradient-text {
  font-weight: 900;
  background: linear-gradient(to top, #44ddf0 0%, #7ce2d8 35%, #c3faf7 65%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === EFECTO DE APARICIÓN === */
.fade-text {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}
.fade-text.show {
  opacity: 1;
  transform: translateY(0);
}

/* === ANIMACIÓN FLOTANTE DEL ROBOT === */
.robot-mobile img,
.robot-desktop img {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* === EFECTO DE CAMBIO ENTRE ROBOTS (hover) === */
.img-normal { opacity: 1; }
.img-ataque { opacity: 0; }
.robot-desktop:hover .img-normal { opacity: 0; }
.robot-desktop:hover .img-ataque { opacity: 1; }

/* === MÓVIL: swap por toque === */
.robot-mobile.swap .img-normal { opacity: 0; }
.robot-mobile.swap .img-ataque { opacity: 1; }

/* === RESPONSIVE EXTRA === */
@media (max-width: 400px) {
  .robot-mobile img {
    width: 12rem !important;
  }
}




/* Titular con animación de color */
.titulocb_color2 {
  font-size: 3rem; /* ajusta según necesites */
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 40%,
    #facc15 60%,
    #facc15 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sweepFill 10s ease-in-out infinite;
}

.titulocb_color {
  font-size: 3rem; /* ajusta según necesites */
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 40%,
    #00ff00 60%,
    #00ff00 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sweepFill 10s ease-in-out infinite;
}

@keyframes sweepFill {
  0% {
    background-position: 100% 0; /* todo blanco */
  }
  50% {
    background-position: 0% 0;   /* todo amarillo */
  }
  100% {
    background-position: 100% 0; /* vuelve a blanco */
  }
}




/*css cards*/
.timeline-card {
  background: rgba(40, 18, 57, 1);
  border-radius: 20px;
  /*box-shadow: 0 0 15px #c3209dba;*/
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.timeline-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px white;
  z-index: 10;
}

/*Propiedad personalizada para animar gradiente */
@property --deg {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.cat1-color{
  --color1:#ff0000;
}

.cat2-color{
  --color1:#cc00eb;
}
.cat3-color{
  --color1:#0fffdf;
}
.cat4-color{
  --color1:#48ff00;
}
.cat5-color{
  --color1:#0082FC;
}
.cat6-color{
  --color1:#ffdd00;
}
.gradient-border {
  background: linear-gradient(var(--deg),var(--color1), var(--color1), #ffffff,#ffffff00, #ffffff00);
  animation: spin 6s linear infinite;
  border-radius: 0.75rem; /* Igual que rounded-xl en Tailwind */
  padding: 3px; /* Espesor del borde */
  display: inline-block; /* Para que se ajuste al tamaño de la card */
}

@keyframes spin {
  to {
    --deg: 360deg;
  }
}

.act-label {
  /*font-size: 0.70rem;*/
  text-transform: uppercase;
  font-family: 'Russo One', sans-serif;
  user-select: none;
}
.act-title {
  /*font-size: 1.5rem;*/
  font-weight: 900;
  font-family: 'Russo One', sans-serif;
  letter-spacing: 0.1em;
  margin-top: 0.05rem;
  color: #ddd;
  user-select: none;
}


@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.animate-pulse-scale {
  animation: pulse-scale 2s ease-in-out infinite;
}

/* Borde difuminado estilo “gota” */
.group {
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* --- ESTILOS EDICIÓN 2026 --- */

/* Animación Meteorito */
@keyframes caerMeteorito {
    0% {
        transform: translate(120vw, -100px) rotate(-45deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translate(-20vw, 120vh) rotate(-45deg);
        opacity: 0;
    }
}

.animacion-activa {
    display: block !important;
    animation: caerMeteorito 2s linear forwards;
}

/* Animación Robot */
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.robot-flotando {
    animation: flotar 3s ease-in-out infinite;
}

/* --- FONDO DE ESTRELLAS  --- */

/* Animación (No cambia) */
@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

/* --- CAPA 1: Pequeñas (Lejanas) --- */
#stars1 {
  width: 4px; 
  height: 4px; 
  background: transparent;
  border-radius: 50%; 
  box-shadow: 10vw 10vh #FFF, 20vw 50vh #FFF, 30vw 80vh #FFF, 80vw 10vh #FFF, 
              50vw 50vh #FFF, 90vw 90vh #FFF, 10vw 30vh #FFF, 60vw 20vh #FFF,
              40vw 40vh #FFF, 70vw 70vh #FFF, 20vw 90vh #FFF, 50vw 10vh #FFF;
  animation: animStar 50s linear infinite;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -3;
  opacity: 0.5; 
}


#stars1::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 4px; 
  height: 4px; 
  background: transparent;
  border-radius: 50%; 
  box-shadow: 10vw 10vh #FFF, 20vw 50vh #FFF, 30vw 80vh #FFF, 80vw 10vh #FFF, 
              50vw 50vh #FFF, 90vw 90vh #FFF, 10vw 30vh #FFF, 60vw 20vh #FFF,
              40vw 40vh #FFF, 70vw 70vh #FFF, 20vw 90vh #FFF, 50vw 10vh #FFF;
}

/* --- CAPA 2: Medianas --- */
#stars2 {
  width: 7px; 
  height: 7px; 
  background: transparent;
  border-radius: 50%; 
  box-shadow: 15vw 15vh #FFF, 35vw 55vh #FFF, 75vw 25vh #FFF, 
              55vw 85vh #FFF, 25vw 35vh #FFF, 85vw 65vh #FFF;
  animation: animStar 35s linear infinite;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  opacity: 0.7;
}

#stars2::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 7px; 
  height: 7px; 
  background: transparent;
  border-radius: 50%; 
  box-shadow: 15vw 15vh #FFF, 35vw 55vh #FFF, 75vw 25vh #FFF, 
              55vw 85vh #FFF, 25vw 35vh #FFF, 85vw 65vh #FFF;
}

/* --- CAPA 3: Grandes (Cercanas) --- */
#stars3 {
  width: 10px; 
  height: 10px; 
  background: transparent;
  box-shadow: 5vw 5vh #FFF, 25vw 25vh #FFF, 45vw 45vh #FFF, 
              65vw 65vh #FFF, 85vw 85vh #FFF;
  animation: animStar 20s linear infinite;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 50%;
  opacity: 0.9;
}

#stars3::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 10px; 
  height: 10px; 
  background: transparent;
  box-shadow: 5vw 5vh #FFF, 25vw 25vh #FFF, 45vw 45vh #FFF, 
              65vw 65vh #FFF, 85vw 85vh #FFF;
  border-radius: 50%;
}

/* --- EFECTOS PARA CONTADOR --- */
.counter-number {
  font-size: 2.25rem;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 
               0 0 20px rgba(59, 130, 246, 0.6),
               0 0 30px rgba(59, 130, 246, 0.4),
               2px 2px 4px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7));
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 
                 0 0 20px rgba(59, 130, 246, 0.6),
                 0 0 30px rgba(59, 130, 246, 0.4),
                 2px 2px 4px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7));
  }
  50% {
    text-shadow: 0 0 15px rgba(59, 130, 246, 1), 
                 0 0 30px rgba(59, 130, 246, 0.8),
                 0 0 45px rgba(59, 130, 246, 0.6),
                 2px 2px 4px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 1));
  }
}

.counter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #e0e7ff;
  text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}