/* 📂 css/landing.css */
/* Estilos Landing Page v4.0 - Pyramid & Gradient Buttons */

:root {
    --bg-dark: #050505;
}

/* === 1. ANIMACIÓN PYRAMID LOADER (Grande) === */
.hero-visual-container {
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Un poco de padding para que no choque con los bordes al escalar */
    padding: 50px; 
}

.pyramid-loader {
  position: relative;
  width: 300px;
  height: 300px;
  display: block;
  transform-style: preserve-3d;
  /* Aquí aplicamos el "MAS GRANDE" mrk: Escalado x2 */
  transform: rotateX(-20deg) scale(2); 
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

.pyramid-loader .wrapper .side {
  width: 70px;
  height: 70px;
  /* Gradients exactos */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pyramid-loader .wrapper .side1 {
  transform: rotateZ(-30deg) rotateY(90deg);
  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

.pyramid-loader .wrapper .side2 {
  transform: rotateZ(30deg) rotateY(90deg);
  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

.pyramid-loader .wrapper .side3 {
  transform: rotateX(30deg);
  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

.pyramid-loader .wrapper .side4 {
  transform: rotateX(-30deg);
  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

.pyramid-loader .wrapper .shadow {
  width: 60px;
  height: 60px;
  background: #8B5AD5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotateX(90deg) translateZ(-40px);
  filter: blur(12px);
}

/* === 2. BOTONES GRADIENT NEON === */
.button {
  position: relative;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
  padding: 14px 30px; /* Un pelín más ancho para que se vea bien */
  border-radius: 10px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  border: none; /* Quitamos bordes por defecto */
  display: inline-block;
}

.button span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio entre texto e icono */
}

/* El fondo oscuro interno */
.button::before {
  content: "";
  position: absolute;
  inset: 1px; /* El borde fino */
  background: #050505; /* Mismo que el fondo de la web para efecto cutout */
  border-radius: 9px;
  transition: 0.5s;
  z-index: 0;
}

.button:hover::before {
  opacity: 0.7; /* Al hover se ve más el color de fondo */
}

/* El brillo (glow) externo */
.button::after {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
  border-radius: 9px;
  transition: 0.5s;
  opacity: 0;
  filter: blur(20px); /* El glow */
  z-index: -1;
}

.button:hover:after {
  opacity: 0.8;
}