/* ====================== VARIABLES ====================== */
@property --color-izq {
  syntax: '<color>';
  inherits: false;
  initial-value: #201503;
}

@property --color-der {
  syntax: '<color>';
  inherits: false;
  initial-value: #404202;
}

:root {
  --color: #1e293b;
  --c1: #5affe6;
  --c2: #fbda61;
  --c3: #b6eb25;
  --gradient: linear-gradient(60deg, var(--c3), var(--c2), var(--c1), var(--c2), var(--c3));
  --scale-start: 0.5;
  --scale-end: 1.001;
}

/* ====================== GENERAL ====================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui;
  font-weight: 800;
  text-align: center;
  overflow-x: hidden;
  background: linear-gradient(135deg, var(--color-izq), var(--color-der));
  background-attachment: fixed;
  animation: bg-dinamico linear both;
  animation-timeline: scroll();
}

/* ====================== PARTICLES (más blur) ====================== */
#particles-js {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2 !important;
  background-color: transparent;
  filter: blur(5px); /* más blur como pediste */
}

/* ====================== HERO ====================== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  z-index: 2;
}

.logo-box {
  margin-bottom: 12vh;
}

.logo-img {
  max-width: 75%;
  height: auto;
  animation: logo-dance 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(255,255,255,0.6)); /* brillo del logo restaurado */
}

.enlaces-box {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* alineados perfectamente por abajo */
  gap: 5rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1100px;
}

.opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  transition: all 0.4s ease;
  animation: opcion-float 4s ease-in-out infinite;
}

.opcion:hover {
  animation-play-state: paused;
  transform: translateY(-18px) scale(1.12);
  filter: brightness(1.2) drop-shadow(0 0 30px rgba(90,255,230,0.8)); /* brillo al hover restaurado */
}

.opcion img {
  width: min(270px, 32vw); /* un pelín más pequeños */
  height: auto;
  margin-bottom: 1rem;
}

.opcion span {
  font-size: clamp(1.55rem, 3.2vw, 2.3rem); /* texto más pequeño */
  font-weight: 800;
  background-image: var(--gradient);
  color: white;
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ====================== VIDEO (intacto) ====================== */
.box-video {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin-top: 0;
}

.box-video video {
  width: min(500px, 50vw);
  height: auto;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.banderas {
  margin-top: 2rem;
}

/* ====================== ANIMACIONES ====================== */
@keyframes bg-dinamico {
  0%, 20% { --color-izq: #1a1000; --color-der: #363801; }
  35% { --color-izq: #001440; --color-der: #193800; }
  80%, 100% { --color-izq: #002d1d; --color-der: #202100; }
}

@keyframes logo-dance {
  0%   { transform: translateY(0px) rotate(-2deg) scale(1); }
  25%  { transform: translateY(-6px) rotate(2deg) scale(1.02); }
  50%  { transform: translateY(0px) rotate(-1deg) scale(1); }
  75%  { transform: translateY(-4px) rotate(1deg) scale(1.015); }
  100% { transform: translateY(0px) rotate(-2deg) scale(1); }
}

@keyframes opcion-float {
  0%   { transform: translateY(0px) rotate(-1deg); }
  50%  { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(-1deg); }
}

/* Responsive */
/* Táblets */
@media (max-width: 900px) {
  .enlaces-box { gap: 2.5rem; }
  
  .banderas img { 
    max-width: 690px;
  }
}

/* Móviles */
@media (max-width: 600px) {
  .enlaces-box { 
    flex-direction: column; 
    align-items: center; 
    gap: 4rem; 
  }

  .box-video video {
    width: 98vw !important; 
  }

  .banderas img { 
    max-width: 510px;
  }

  .box-video { padding-top: 1rem; }
}