/* =========================
   RESET
========================= */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

body {
  background:#031e1a;
  color:white;
}

/* =========================
   FONDO (Three.js)
========================= */
#bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* CAPAS */
.navbar,
.hero,
.axon {
  position:relative;
  z-index:2;
}

/* =========================
   NAVBAR
========================= */
.navbar {
  height:70px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 20px;
  background:rgba(45,95,77,0.9);
  backdrop-filter:blur(12px);
}

/* CENTRO */
.nav-center {
  display:flex;
  justify-content:center;
}

.logo {
  height:32px;
}

/* DERECHA */
.nav-right {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

/* =========================
   BOTONES HEADER
========================= */
.btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #7ed957;
  color:#7ed957;
  text-decoration:none;
  font-size:14px;
  transition:all .25s ease;
  white-space:nowrap;
}

/* ICONOS SVG */
.btn img {
  width:16px;
  height:16px;
  object-fit:contain;

  /* tint verde automático */
  filter: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(500%) hue-rotate(50deg);
}

/* HOVER */
.btn:hover {
  background:#7ed957;
  color:#021f1a;
  transform:scale(1.05);
}

/* ICONOS EN HOVER */
.btn:hover img {
  filter:none;
}

/* SOLO ICONO */
.icon-only {
  padding:6px;
}

/* =========================
   HERO
========================= */
.hero {
  height:100vh;
  display:flex;
  align-items:top;
  margin-top:120px;
  justify-content:center;
}

.hero-content {
  text-align:center;
  max-width:800px;
  padding:0 20px;
}

/* FRASE */
.headline {
  font-size:40px;
  margin-bottom:20px;
  line-height:1.2;
}

/* SUBFRASE */
.subheadline {
  font-size:18px;
  opacity:.7;
  margin-bottom:55px;
}

/* =========================
   BOTONES HERO (MOVA STYLE)
========================= */
.hero-buttons {
  display:flex;
  gap:30px;
  justify-content:center;
  align-items:center;
}

.hero-btn {
  width:160px;
  height:160px;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  text-decoration:none;
  color:white;
  transition:all .3s ease;
}

/* ICONOS */
.hero-btn img {
  width:40px;
}

/* HOVER */
.hero-btn:hover {
  transform:scale(1.1);
  box-shadow:0 0 40px rgba(126,217,87,0.4);
}

/* MOVA DESTACADO */
.mova {
  background:linear-gradient(135deg,#8bc34a,#6fa832);
}

.mova img {
  width:90%;
}

/* =========================
   CHAT AXON
========================= */
.axon {
  position:fixed;
  right:25px;
  bottom:25px;
}

/* BOT FLOTANTE */
.bot {
  width:180px;
  cursor:pointer;
  animation:float 3s infinite ease-in-out;
}

@keyframes float {
  50% {
    transform:translateY(-12px);
  }
}

/* CHAT BOX */
.chat {
  width:300px;
  height:380px;
  background:#0b2e25;
  border-radius:16px;
  position:absolute;
  bottom:100px;
  right:0;
  display:none;
  flex-direction:column;
}

/* HEADER CHAT */
.chat-header {
  background:#7ed957;
  color:black;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* BODY CHAT */
.chat-body {
  flex:1;
  padding:10px;
  overflow-y:auto;
  font-size:14px;
}

/* INPUT */
.chat-input {
  display:flex;
}

.chat-input input {
  flex:1;
  padding:10px;
  border:none;
  outline:none;
}

.chat-input button {
  background:#7ed957;
  border:none;
  padding:0 15px;
  cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px){

  /* NAV */
  .navbar {
    grid-template-columns:1fr;
    height:auto;
    gap:10px;
    padding:10px;
  }

  .nav-right {
    justify-content:center;
    flex-wrap:wrap;
  }

  /* TEXTO */
  .headline {
    font-size:26px;
  }

  .subheadline {
    font-size:14px;
  }

  /* HERO */
  .hero-buttons {
    flex-direction:column;
    gap:15px;
  }

  .hero-btn {
    width:120px;
    height:120px;
  }

  /* CHAT */
  .bot {
    width:120px;
  }

  .chat {
    width:90vw;
    right:5%;
  }
}