/* ==========================================================
   LOOnix - styles.css (ORDENADO Y COMENTADO)
   Colores marca:
   - Verde principal: #00cc23
   - Naranja: #ff8a2a (puedes ajustar)
========================================================== */

/* =========================
   1) VARIABLES DE COLOR
   CAMBIA AQUÍ si quieres
========================= */
:root{
  --bg: #070a08;
  --bg2:#0b0f0c;
  --card: rgba(255,255,255,.03);

  --text:#eaf5ee;
  --muted:#a7b6ad;

  /* ✅ Color marca LOOnix */
  --green:#00cc23;
  --green2:#00a61d;
  --orange:#ff8a2a;

  --white:#ffffff;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}

/* =========================
   2) BASE / RESETEO
========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  /* Fondo más vivo y menos "verde oscuro" */
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(0,204,35,.14), transparent 58%),
    radial-gradient(700px 450px at 80% 15%, rgba(255,138,42,.12), transparent 58%),
    linear-gradient(180deg, var(--bg2), var(--bg) 65%, #060806);
}

/* =========================
   3) UTILIDADES / LAYOUT
========================= */
.container{width:min(1100px, 92%); margin:0 auto;}
.section{padding:74px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.muted{color:var(--muted)}
.section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:22px;
}
.section__head h2{margin:0; font-size: clamp(24px, 3vw, 32px);}

/* =========================
   4) HEADER / NAV (BLANCO)
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;

  /* ✅ Fondo blanco */
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0; gap: 14px;
}

/* Logo más visible sobre blanco */

.brand{
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.brand__logo{
  height: 90px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.10));
}

.nav{
  display:flex;
  gap: 10px;
  align-items:center;
}

.nav a{
  color: var(--green);         /* ✅ Verde por defecto */
  text-decoration:none;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 14px;
  transition: .2s;
  border: 1px solid transparent;
}

/* ✅ Hover: Naranja */
.nav a:hover{
  color: var(--orange);
  background: rgba(255,138,42,.10);
  border-color: rgba(255,138,42,.20);
  transform: translateY(-1px);
}

/* ✅ Activo: Naranja + subrayado */
.nav a.is-active{
  color: var(--orange);
  background: rgba(255,138,42,.10);
  border-color: rgba(255,138,42,.25);
  position: relative;
}
.nav a.is-active::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px;
  height:2px;
  border-radius:99px;
  background: linear-gradient(90deg, var(--orange), var(--green));
}

/* Botón CTA */
.nav__cta{
  color: #0b0f0c !important;
  background: linear-gradient(90deg, rgba(0,204,35,.25), rgba(255,138,42,.22));
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.nav__cta:hover{
  filter: brightness(1.02);
}

/* Burger */
.burger{
  display:none;
  width:46px; height:46px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  cursor:pointer;
}
.burger span{
  display:block;
  width:20px; height:2px;
  background: rgba(0,0,0,.70);
  margin:5px auto;
  border-radius: 2px;
}

/* Responsive NAV (móvil) */
@media (max-width: 720px){
  .brand__logo{ height: 44px; }

  .nav{
    position: fixed;
    inset: 76px 12px auto 12px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.96);
    padding: 12px;
    display:none;
    flex-direction:column;
    gap: 6px;
  }
  .nav a{ width:100%; }
  .burger{display:block;}
}


/* =========================
   HERO PRINCIPAL (PRO)
========================= */
.hero{
  position: relative;
  padding: 90px 0 80px;
  overflow: hidden;

  /* 🔥 Fondo profesional */
  background:
    /* capa oscura para legibilidad */
    linear-gradient(
      90deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,.85) 100%
    ),
    /* degradado marca */
    radial-gradient(
      900px 500px at 10% 20%,
      rgba(0,204,35,.35),
      transparent 60%
    ),
    radial-gradient(
      700px 450px at 90% 30%,
      rgba(255,138,42,.28),
      transparent 60%
    ),
    /* 👉 IMAGEN DE FONDO */
    url("hero1.png");

  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* efecto pro */
}


/* Fondo animado del hero (tech sutil) */
.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(600px 380px at 20% 25%, rgba(0,204,35,.18), transparent 62%),
    radial-gradient(520px 360px at 80% 25%, rgba(255,138,42,.14), transparent 62%);
  animation: heroMove 12s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes heroMove{
  0%{transform: translateY(0) translateX(0);}
  100%{transform: translateY(-36px) translateX(28px);}
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 26px;
  align-items: stretch;
}

.badge{
  display:inline-flex; gap:10px; align-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.dot{
  width:10px; height:10px; border-radius:99px;
  background: linear-gradient(90deg, var(--green), var(--orange));
  box-shadow: 0 0 0 6px rgba(0,204,35,.10);
}

.hero h1{
  font-size: clamp(38px, 4.5vw, 56px);
  line-height: 1.05;
  text-shadow: 0 14px 40px rgba(0,0,0,.65);
}

.accent{color: var(--green)}
.accent2{color: var(--orange)}
.lead{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(234,245,238,.9);
}

/* =========================
   Efecto movimiento suave
========================= */
.hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(
      circle at center,
      rgba(0,204,35,.10),
      transparent 60%
    );
  animation: heroMove 14s linear infinite;
  pointer-events:none;
}

@keyframes heroMove{
  0%{ transform: translateX(-5%) translateY(-5%); }
  50%{ transform: translateX(5%) translateY(5%); }
  100%{ transform: translateX(-5%) translateY(-5%); }
}


/* Botones */
.cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}
.btn{
  border: 1px solid rgba(255,255,255,.14);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  transition:.2s;
  cursor:pointer;
}
.btn--primary{
  border-color: rgba(0,204,35,.38);
  background: linear-gradient(90deg, rgba(0,204,35,.22), rgba(255,138,42,.16));
  box-shadow: var(--shadow);
  color: var(--text);
}
.btn--primary:hover{transform: translateY(-1px); filter: brightness(1.05);}
.btn--ghost{
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.btn--ghost:hover{background: rgba(255,255,255,.07); transform: translateY(-1px);}

/* Mini features */
.mini{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.mini__item{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 12px;
  border-radius: var(--radius);
}
.mini__item strong{display:block}
.mini__item span{color: var(--muted); font-size:.92rem}

/* Panel derecho */
.hero__card{display:flex;}
.glass{
  width:100%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 420px at 20% 10%, rgba(0,204,35,.14), transparent 58%),
    radial-gradient(700px 420px at 80% 20%, rgba(255,138,42,.12), transparent 58%),
    rgba(255,255,255,.02);
  padding: 18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.glass h3{margin:0}
.quick{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.quick__btn{
  position:relative;
  display:flex; align-items:center; gap:10px;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  color: var(--text);
  transition:.2s;
}
.quick__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(0,204,35,.20);
}
.quick__btn::before{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  background: radial-gradient(220px 90px at 20% 20%, rgba(0,204,35,.18), transparent);
  opacity:0; transition:.25s;
}
.quick__btn:hover::before{opacity:1}

/* Aros animados */
.pulse{
  position:absolute; inset:auto -140px -140px auto;
  width: 260px; height: 260px;
  pointer-events:none;
  opacity:.55;
}
.pulse__ring{
  position:absolute; inset:0;
  border-radius: 999px;
  border: 1px solid rgba(0,204,35,.30);
  animation: ring 3.2s infinite ease-out;
}
.pulse__ring:nth-child(2){border-color: rgba(255,138,42,.24); animation-delay: .7s;}
.pulse__ring:nth-child(3){border-color: rgba(255,255,255,.10); animation-delay: 1.4s;}
@keyframes ring{
  0%{transform: scale(.35); opacity:.0;}
  20%{opacity:.55;}
  100%{transform: scale(1.12); opacity:0;}
}

/* Scroll hint */
.scroll{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color: rgba(234,245,238,.72);
  margin: 26px auto 0;
  width:max-content;
}
.mouse{
  width: 22px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  position:relative;
}
.mouse:after{
  content:"";
  width:4px; height:6px;
  background: linear-gradient(180deg, var(--green), var(--orange));
  border-radius: 8px;
  position:absolute; left:50%; top:7px;
  transform: translateX(-50%);
  animation: wheel 1.3s infinite ease-in-out;
}
@keyframes wheel{
  0%{opacity:.0; transform: translate(-50%, 0);}
  20%{opacity:1;}
  100%{opacity:0; transform: translate(-50%, 12px);}
}

/* =========================
   SERVICIOS: fondo con servi.png
========================= */
#servicios{
  position: relative;
  overflow: hidden;

  /* Imagen de fondo */
  background: url("servi.png") center/cover no-repeat;
}

/* Capa oscura para que las cards se lean perfecto */
#servicios::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.86)),
    radial-gradient(900px 500px at 18% 20%, rgba(0,204,35,.18), transparent 60%),
    radial-gradient(700px 450px at 85% 35%, rgba(255,138,42,.14), transparent 60%);
  pointer-events:none;
}

/* Para que el contenido quede por encima del overlay */
#servicios .container{
  position: relative;
  z-index: 1;
}


/* =========================
   6) CARDS / GRIDS
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  transition: .2s;
  position:relative;
  overflow:hidden;
}
.card:hover{transform: translateY(-2px); border-color: rgba(0,204,35,.22);}
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(0,204,35,.12), transparent);
  opacity:0; transition:.25s;
}
.card:hover::after{opacity:1;}

.card__icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.card h3{margin:0 0 6px}
.card p{margin:0 0 10px; color: rgba(234,245,238,.80); line-height:1.5}
.link{
  color: var(--orange);
  font-weight: 800;
  text-decoration:none;
}
.link:hover{text-decoration: underline;}

/* Card destacado */
.card--featured{
  border-color: rgba(0,204,35,.22);
  background: radial-gradient(500px 220px at 10% 10%, rgba(0,204,35,.14), transparent 60%), rgba(255,255,255,.02);
}

/* Nota */
.note{
  margin-top: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  padding: 12px 14px;
  border-radius: 14px;
}

/* =========================
   7) SOBRE / STATS
========================= */
.two{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:start;
}
.list{margin:12px 0 0; padding-left:18px; color: rgba(234,245,238,.88)}
.list li{margin:8px 0}
.stats{display:grid; gap: 12px;}
.stat{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: var(--radius);
  padding: 14px;
}
.stat__num{
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(90deg, var(--green), var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.stat__txt{display:block; color: var(--muted)}

/* =========================
   8) PROCESO / PASOS
========================= */
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.step{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding: 16px;
}
.step__n{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: var(--text);
  background: linear-gradient(90deg, rgba(0,204,35,.20), rgba(255,138,42,.18));
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.step h3{margin:0 0 6px}
.step p{margin:0; color: rgba(234,245,238,.80); line-height:1.5}

/* =========================
   9) CONTACTO / FORM
========================= */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.contact__box{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 22px;
  padding: 16px;
  margin-top: 12px;
}
.contact__row{
  display:flex; gap:12px;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  margin-bottom: 10px;
}
.contact__row a{color: var(--text)}
.contact__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px;}

.form{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 22px;
  padding: 16px;
}
.form h3{margin: 0 0 6px}
label{display:block; margin-top: 10px; font-weight:800}
input, select, textarea{
  width:100%;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
textarea{resize: vertical}
.tiny{margin-top: 10px; font-size: .9rem}

/* =========================
   10) FOOTER + WHATSAPP
========================= */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 22px 0;
  background: rgba(0,0,0,.18);
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.footer__logo{height:24px; width:auto; vertical-align:middle; margin-right:10px;}
.footer__left{display:flex; align-items:center; gap:10px; color: rgba(234,245,238,.8)}
.footer__right{display:flex; gap:14px}
.footer__right a{color: rgba(234,245,238,.78); text-decoration:none; font-weight:800}
.footer__right a:hover{color: var(--white)}

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  background: linear-gradient(90deg, rgba(0,204,35,.24), rgba(255,138,42,.18));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 20px;
  transition:.2s;
}
.wa-float:hover{transform: translateY(-2px); filter: brightness(1.06);}

/* =========================
   11) ANIMACIONES SUAVES
========================= */
.fade-up{
  opacity:0;
  transform: translateY(18px);
  animation: fadeUp .8s ease forwards;
}
@keyframes fadeUp{
  to{opacity:1; transform:none;}
}

/* =========================
   12) RESPONSIVE
========================= */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; }
  .mini{grid-template-columns: 1fr; }
  .grid{grid-template-columns: 1fr 1fr;}
  .steps{grid-template-columns: 1fr 1fr;}
  .two{grid-template-columns: 1fr;}
  .contact{grid-template-columns: 1fr;}
}
@media (max-width: 720px){
  .brand__logo{ height: 44px; }

  .nav{
    position: fixed;
    inset: 76px 12px auto 12px;
    border-radius: 18px;
    border: 1px solid rgba(0,204,35,.18);
    background: rgba(8,12,9,.94);
    padding: 12px;
    display:none;
    flex-direction:column;
    gap: 6px;
  }
  .nav a{ width:100%; }
  .burger{display:block;}
  .grid{grid-template-columns: 1fr;}
  .steps{grid-template-columns: 1fr;}
}

/* =========================
   ANIMACIÓN: aparece al hacer scroll
========================= */
.reveal{
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* cascada: que aparezcan uno por uno */
.grid .card.reveal{
  transition-delay: var(--d, 0ms);
}

/* Hover más dinámico (extra) */
.card{
  transform-style: preserve-3d;
}
.card:hover{
  transform: translateY(-4px);
}

/* =========================
   EFECTO TILT (mouse)
========================= */
.card{
  transition: transform .15s ease, border-color .2s ease;
}
.card.is-tilt{
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
}

.brand__logo{
  will-change: transform;
}