* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: 'Cormorant Garamond', serif;

  /* 🌈 FONDO MULTICOLOR ORIGINAL */
  background:
    radial-gradient(circle at 20% 20%, rgba(0,229,255,.30), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,126,179,.22), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(124,255,0,.22), transparent 45%),
    linear-gradient(180deg, #060b1f, #0b0f1a);

  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

/* CONTENEDOR PRINCIPAL */
main {
  max-width: 420px;
  width: 100%;
  padding: 50px;
  text-align: center;
  border-radius: 28px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.05),
    rgba(0,229,255,.08),
    rgba(255,126,179,.06)
  );

  backdrop-filter: blur(14px);
  box-shadow: 0 0 60px rgba(0,229,255,.35);
  animation: enter 1.2s ease forwards;
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TITULOS */
h1 {
  font-size: 3rem;
  font-weight: 700;

  background: linear-gradient(
    90deg,
    #ffffff,
    #00e5ff,
    #ff7eb3,
    #7cff00,
    #ffffff
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ===== TITULO AUREX ===== */
.empresa {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 15px;

  background: linear-gradient(
    90deg,
    #ffffff,
    #00e5ff,
    #ff7eb3,
    #7cff00,
    #ffffff
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.descripcion {
  color: #ffffff;
  opacity: .9;
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: 1.05rem;
}

.slogan {
  margin: 14px 0 24px;
  font-weight: 700;
  color: #ffffff;
  opacity: .9;
}

/* BOTONES */
.access {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-secondary {
  padding: 10px 22px;
  border-radius: 26px;
  font-weight: 700;
  color: #eaffff;
  text-decoration: none;

  background: rgba(0,229,255,.15);
  border: 1px solid rgba(0,229,255,.7);
  box-shadow: 0 0 15px rgba(0,229,255,.45);
  cursor: pointer;

  transition: .3s;
}

.btn-secondary:hover {
  background: linear-gradient(
    90deg,
    #39ffb6,
    #00e5ff
  );
  color: #002;
}

.btn-main {
  margin-top: 18px;
  padding: 14px 32px;
  border-radius: 32px;
  font-weight: 700;
  border: none;
  cursor: pointer;

  background: linear-gradient(
    90deg,
    #39ffb6,
    #00e5ff
  );

  color: #002;

  box-shadow: 0 0 30px rgba(0,229,255,.8);
}

/* FORMULARIOS */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.form input,
.form select {
  padding: 14px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.35);
  color: white;
  font-size: 1rem;
  outline: none;
}

.form input::placeholder {
  color: rgba(255,255,255,.6);
}

.form input:focus,
.form select:focus {
  border-color: #00e5ff;
}

/* TEXTOS */
.note {
  font-size: .9rem;
  color: #ffffff;
  opacity: .85;
}

.link {
  margin-top: 16px;
  color: #ddd;
}

.link a {
  color: #00e5ff;
  cursor: pointer;
  text-decoration: none;
}

/* SECCIONES */
section {
  display: block;
}

/* ===================================
   TECNOLOGÍA FLOTANTE AUREX - VANTYX
   =================================== */

.flotante{
  position: fixed;
  z-index: 999;
  opacity: .35;
  pointer-events: none;
  animation: flotar 8s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255,255,255,.50));
}

.flotante:hover{
  opacity:.35;
}

.f1{
  top:8%;
  left:4%;
  font-size:2.8rem;
}

.f2{
  top:15%;
  right:8%;
  font-size:2.5rem;
}

.f3{
  top:38%;
  left:3%;
  font-size:2.6rem;
  animation: girar 12s linear infinite;
}

.f4{
  top:55%;
  right:6%;
  font-size:3rem;
}

.f5{
  top:72%;
  left:6%;
  font-size:2.8rem;
}

.f6{
  top:82%;
  right:10%;
  font-size:2.6rem;
}

.f7{
  top:25%;
  left:25%;
  font-size:2rem;
}

.f8{
  top:60%;
  left:18%;
  font-size:2.3rem;
}

.f9{
  top:35%;
  right:20%;
  font-size:2.4rem;
}

.f10{
  bottom:18%;
  right:25%;
  font-size:2.4rem;
}

/* PARTÍCULAS EXTRA */

body::before{
  content:"";
  position:fixed;
  width:320px;
  height:320px;

  top:-100px;
  right:-100px;

  border-radius:50%;

  background:rgba(0,229,255,.15);

  filter:blur(90px);

  animation:pulseGlow 8s infinite;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;

  width:280px;
  height:280px;

  bottom:-100px;
  left:-100px;

  border-radius:50%;

  background:rgba(124,255,0,.12);

  filter:blur(90px);

  animation:pulseGlow 10s infinite;
  z-index:0;
}

/* ANIMACIONES */

@keyframes flotar{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-25px);
  }

  100%{
    transform:translateY(0px);
  }

}

@keyframes girar{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}

@keyframes pulseGlow{

  0%{
    transform:scale(1);
    opacity:.3;
  }

  50%{
    transform:scale(1.2);
    opacity:.6;
  }

  100%{
    transform:scale(1);
    opacity:.3;
  }

}

/* ASEGURAR QUE EL CONTENIDO
   ESTÉ ENCIMA DE LOS EFECTOS */

main{
  position:relative;
  z-index:10;
}

/* ===================================
   CELULARES Y TABLETS
   =================================== */

@media (max-width: 768px){

body{
    padding:20px;
    align-items:flex-start;
}

main{
    max-width:95%;
    width:95%;
    padding:20px 20px;
    margin-top:10px;
    min-height: 500px;
}

#aurex{
  min-height: 350px;

  display:flex;
  flex-direction: column;
  justify-content: center;

}

#vantyx{
  min-height: 350px;

  display:flex;
  flex-direction: column;
  justify-content: center;
}

h1{
    font-size:2rem;
}

.empresa{
    font-size:2.2rem;
}

.slogan{
    font-size:.95rem;
}

.descripcion{
    font-size:.95rem;
}

.btn-main,
.btn-secondary{
    width:100%;
}

.form input,
.form select{
    font-size:.95rem;
    padding:12px;
}

/* Reducir iconos flotantes */

.f1,.f2,.f3,.f4,.f5,
.f6,.f7,.f8,.f9,.f10{
    font-size:1.5rem !important;
    opacity:.18;
}

}