:root{
  --nx-bg: #0b1220;
  --nx-card: rgba(255,255,255,.06);
  --nx-stroke: rgba(255,255,255,.12);
  --nx-text: rgba(255,255,255,.86);
  --nx-muted: rgba(255,255,255,.62);
  --nx-brand: #4cc9f0;
  --nx-brand2:#4361ee;
}

html, body{
  height: 100%;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 500px at 10% 0%, rgba(76,201,240,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(67,97,238,.20), transparent 60%),
              var(--nx-bg);
  color: var(--nx-text);
}

a{ text-decoration: none; }

.nx-nav{
  backdrop-filter: blur(12px);
  background: rgba(10,15,25,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.nx-hero{
  position: relative;
  overflow: hidden;
}

.nx-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,32,.10), rgba(11,18,32,.92)),
    url("assets/img/nexora_fondo.png");
  background-size: cover;
  background-position: center;
  opacity: .45;
  pointer-events: none;
}

.nx-hero-inner{
  position: relative;
  padding: 84px 0 34px;
}

.nx-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  border: 1px solid var(--nx-stroke);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: .35rem .75rem;
  color: var(--nx-muted);
  font-size: .9rem;
}

.nx-title{
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.03;
}

.nx-lead{
  color: var(--nx-muted);
  font-size: 1.05rem;
}

.nx-card{
  background: var(--nx-card);
  border: 1px solid var(--nx-stroke);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.nx-card-hover{
  transition: transform .18s ease, border-color .18s ease;
}
.nx-card-hover:hover{
  transform: translateY(-4px);
  border-color: rgba(76,201,240,.30);
}

.nx-icon{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid var(--nx-stroke);
  background: rgba(255,255,255,.04);
}

.nx-btn-gradient{
  border: 0;
  background: linear-gradient(90deg, var(--nx-brand2), var(--nx-brand));
  color: #06111f;
  font-weight: 700;
}

.nx-outline{
  border: 1px solid var(--nx-stroke);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
}

.nx-section{
  padding: 54px 0;
}

.nx-muted{
  color: var(--nx-muted);
}

.nx-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
}

.nx-footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(10,15,25,.35);
}

.form-control, .form-select, .form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  box-shadow: none;
}
.form-control::placeholder{
  color: rgba(255,255,255,.45);
}

@media (max-width: 576px){
  .nx-hero-inner{ padding: 70px 0 22px; }
  .nx-lead{ font-size: 1rem; }
}



/* =========================================================
   ✅ FIX SOLO MÓVIL (NO TOCA PC)
   ========================================================= */
@media (max-width: 576px){

  /* 1) Contenedor tipo "app" para que no se vea feo/estirado */
  .container{
    max-width: 520px;           /* evita que se vea enorme en pantallas raras */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 2) Navbar más compacto */
  .nx-nav .navbar-brand span{ font-size: 1.05rem; }
  .nx-nav .navbar-brand img{ width: 30px; height: 30px; }
  .navbar-toggler{
    padding: .38rem .55rem;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10) !important;
  }
  .navbar-collapse{
    margin-top: .6rem;
    padding: .75rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,15,25,.75);
  }
  .navbar-nav .nav-link{
    padding: .75rem .85rem;
    border-radius: 12px;
  }
  .navbar-nav .nav-link.active{
    background: rgba(255,255,255,.06);
  }

  /* 3) HERO más “app-like” (menos alto, más limpio) */
  .nx-hero-inner{
    padding: 54px 0 18px !important;
  }
  .nx-badge{
    font-size: .82rem;
    padding: .3rem .6rem;
  }
  .nx-title{
    font-size: 1.65rem !important;  /* antes era muy grande */
    line-height: 1.12 !important;
  }
  .nx-lead{
    font-size: .98rem !important;
  }

  /* 4) Botones en móvil: grandes, bonitos y consistentes */
  .nx-hero .btn{
    padding: .9rem 1.1rem !important;
    font-weight: 800;
    border-radius: 16px !important;
  }

  /* 5) Chips (Responsive / FEL / Reportes) en 2 columnas */
  .nx-hero .mt-4{
    gap: .6rem !important;
  }
  .nx-hero .mt-4 > div{
    flex: 1 1 calc(50% - .6rem);
    padding: .35rem .4rem;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    justify-content: center;
  }

  /* 6) Cards: menos padding y más redondas */
  .nx-card{
    border-radius: 18px !important;
  }
  .nx-card.p-4{ padding: 1rem !important; }
  .nx-card.p-3{ padding: .95rem !important; }

  /* 7) “Vista rápida”: que no se vea gigante */
  #inicio .nx-card .row.g-3{ --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; }
  #inicio .nx-card .nx-card-hover{
    padding: .85rem !important;
    border-radius: 16px;
  }
  .nx-icon{
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  /* 8) Secciones: menos espacio vertical (en móvil se siente más moderno) */
  .nx-section{
    padding: 36px 0 !important;
  }

  /* 9) Módulos: que se vean tipo “lista premium” */
  #modulos .col-md-6,
  #modulos .col-lg-4{
    width: 100%;
  }
  #modulos .nx-card{
    padding: 1rem !important;
  }

  /* 10) Planes: tarjetas más compactas y botón pegado */
  #planes .display-6{
    font-size: 2.0rem !important;
    margin: .6rem 0 .25rem !important;
  }
  #planes ul{
    margin-bottom: 1rem !important;
  }
  #planes .btn{
    padding: .85rem 1rem !important;
    border-radius: 16px !important;
  }

  /* 11) Formulario: inputs grandes y cómodos */
  label.form-label{ margin-bottom: .35rem; }
  .form-control, .form-select{
    padding: .85rem .95rem !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }
  textarea.form-control{
    min-height: 140px;
  }

  /* 12) Footer: links en 2 filas centrado */
  .nx-footer .container{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: .6rem !important;
  }
  .nx-footer .container > div:last-child{
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem 1rem;
  }
}


@media (max-width: 576px){
  body{ overflow-x: hidden; }
  .nx-hero, .nx-section, footer{ overflow-x: hidden; }
}

/* =========================================================
   ✅ PARCHE FINAL SOLO MÓVIL
   - más margen/aire (no pegado)
   - fondo uniforme (mismo color)
   - separación bonita entre tarjetas y secciones
   ========================================================= */
@media (max-width: 576px){

  /* A) Fondo uniforme en móvil (sin cambios raros de color) */
  body{
    background: var(--nx-bg) !important;
  }

  /* Mantén el hero bonito pero sin “corte” de color */
  .nx-hero::before{
    opacity: .28 !important;
    background:
      radial-gradient(700px 420px at 20% 0%, rgba(76,201,240,.16), transparent 60%),
      radial-gradient(700px 420px at 85% 10%, rgba(67,97,238,.18), transparent 60%),
      linear-gradient(180deg, rgba(11,18,32,.25), rgba(11,18,32,.92)),
      url("assets/img/nexora_fondo.png") !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* B) Margen lateral tipo “app” */
  .container{
    max-width: 520px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* C) Espacio vertical general (aire) */
  .nx-hero-inner{
    padding: 58px 0 26px !important;
  }
  .nx-section{
    padding: 40px 0 !important;
  }

  /* D) Separación entre bloques dentro del Hero */
  .nx-badge{ margin-bottom: 14px !important; }
  .nx-title{ margin-bottom: 12px !important; }
  .nx-lead{ margin-bottom: 18px !important; }

  /* Botones con separación y no pegados */
  #inicio .d-flex.flex-column.flex-sm-row{
    gap: 10px !important;
    margin-top: 6px !important;
  }

  /* Chips (Responsive/FEL/Reportes/Roles) con más aire */
  .nx-hero .mt-4{
    margin-top: 16px !important;
    gap: 10px !important;
  }
  .nx-hero .mt-4 > div{
    padding: .55rem .55rem !important;
    border-radius: 14px !important;
  }

  /* E) Las cards “respiran” (no pegadas) */
  .nx-card{
    border-radius: 20px !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
  }

  /* Separación entre tarjetas dentro de secciones */
  .row.g-3{ --bs-gutter-y: 14px !important; }
  .row.g-4{ --bs-gutter-y: 18px !important; }

  /* Vista rápida: que no se vea pegado al hero */
  #inicio .col-lg-6:last-child .nx-card{
    margin-top: 10px !important;
  }

  /* Módulos: estilo lista premium y espacio */
  #modulos .nx-card{
    padding: 1.05rem !important;
  }

  /* Planes: separa más cada plan */
  #planes .col-lg-4 .nx-card{
    margin-bottom: 12px !important;
  }

  /* Contacto: separa tarjetas WhatsApp/Correo */
  #contacto .nx-card .nx-card{
    margin-top: 10px !important;
  }

  /* Footer con más aire */
  .nx-footer{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* F) Evitar cualquier scroll horizontal raro */
  body, .nx-hero, .nx-section, footer{
    overflow-x: hidden !important;
  }
}


/* =========================================================
   ✅ MARGEN REAL EN TELÉFONO (tipo app moderna)
   ========================================================= */
@media (max-width: 576px){

  /* 1️⃣ Margen exterior real */
  body{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 2️⃣ Que el contenido no toque los bordes */
  .nx-hero,
  .nx-section,
  .nx-footer{
    border-radius: 22px;
  }

  /* 3️⃣ Separación vertical entre bloques */
  .nx-hero{
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .nx-section{
    margin-bottom: 16px;
  }

  .nx-footer{
    margin-bottom: 16px;
  }

  /* 4️⃣ Que las cards no se peguen al borde */
  .nx-card{
    border-radius: 22px !important;
  }

}


/* =========================================================
   ✅ AJUSTE FINO MÓVIL (subir contenido + efecto flotante)
   ========================================================= */
@media (max-width: 576px){

  /* 1️⃣ Quitar espacio extra arriba */
  body{
    padding-top: 6px !important;
  }

  .nx-hero-inner{
    padding-top: 35px !important;   /* antes estaba muy abajo */
    padding-bottom: 20px !important;
  }

  /* 2️⃣ Separar del fondo (efecto tarjeta flotando) */
  .nx-hero{
    margin-top: 8px !important;
    margin-bottom: 18px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, #0e1a2f, #0b1426) !important;
    box-shadow: 
      0 15px 40px rgba(0,0,0,.55),
      0 0 0 1px rgba(255,255,255,.05);
  }

  /* 3️⃣ Separación bonita del navbar */
  .nx-nav{
    margin-bottom: 8px !important;
  }

  /* 4️⃣ Que el contenido no quede pegado a los lados */
  body{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

}


/* =========================================================
   ✅ OVERRIDE FINAL (SUBIR AÚN MÁS ARRIBA) - SOLO MÓVIL
   ========================================================= */
@media (max-width: 576px){

  /* Quita espacio de arriba */
  body{ padding-top: 0 !important; }

  /* Navbar sticky: que no deje tanto aire */
  .nx-nav{ margin-bottom: 4px !important; }

  /* El hero completo más arriba */
  .nx-hero{ margin-top: 4px !important; }

  /* SUBE el contenido del hero (este es el key) */
  .nx-hero-inner{
    padding-top: 10px !important;   /* 🔥 antes 35 / 54 / 58 */
    padding-bottom: 20px !important;
  }

  /* Opcional: baja un poquito el badge para que no quede pegado */
  .nx-badge{ margin-top: 0 !important; }
}


/* =========================================================
   ✅ CENTRAR TEXTO EN TELÉFONO (SOLO HERO)
   ========================================================= */
@media (max-width: 576px){

  /* Centrar TODO el bloque de texto del hero */
  #inicio .col-lg-6:first-child{
    text-align: center !important;
  }

  /* Badge centrado */
  #inicio .nx-badge{
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  /* Párrafo centrado y con ancho cómodo */
  #inicio .nx-lead{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 34ch;
  }

  /* Botones centrados y con ancho bonito */
  #inicio .d-flex.flex-column.flex-sm-row{
    justify-content: center !important;
    align-items: center !important;
  }
  #inicio .d-flex.flex-column.flex-sm-row .btn{
    width: 100%;
    max-width: 360px;
  }

  /* Chips centradas */
  #inicio .mt-4{
    justify-content: center !important;
  }
  #inicio .mt-4 > div{
    text-align: center !important;
  }
}


/* =========================================================
   ✅ Fondo uniforme en TODO el sitio (PC)
   - El mismo look del hero, pero suave en toda la página
   ========================================================= */

body{
  position: relative; /* necesario para el overlay */
}

/* Overlay global para que no haya “corte” de color */
body::before{
  content: "";
  position: fixed;      /* cubre toda la pantalla siempre */
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* mismo estilo que el hero pero más suave */
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(76,201,240,.14), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(67,97,238,.16), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.35), rgba(11,18,32,.95));
}


/* =========================================================
   ✅ FONDO 100% UN SOLO COLOR (PC + MÓVIL)
   - sin gradientes
   - sin overlays
   - sin cortes
   ========================================================= */

/* 1) Fondo plano en todo */
html, body{
  background: var(--nx-bg) !important;
}

/* 2) Apaga cualquier overlay/gradiente global */
body::before{
  content: none !important;
  display: none !important;
}

/* 3) Apaga el fondo con imagen/overlay del hero (para que no cambie tono) */
.nx-hero::before{
  content: none !important;
  display: none !important;
}

/* 4) Asegura que secciones y footer no metan tonos distintos */
.nx-hero,
.nx-section,
.nx-footer,
section,
footer{
  background: transparent !important;
}

/* 5) Si algún contenedor trae fondo, lo hacemos transparente */
.container,
.container-fluid{
  background: transparent !important;
}

/* 6) El footer NO cambia color */
.nx-footer{
  border-top: 1px solid rgba(255,255,255,.10);
}


/* ✅ WhatsApp más arriba SOLO en teléfono */
@media (max-width: 576px){
  .nx-wa-float{
    bottom: 92px !important;   /* sube el botón (ajusta 80-120 si quieres más/menos) */
    right: 16px !important;
  }
  .nx-wa-tip{
    bottom: 102px !important;  /* que el tooltip suba junto al botón */
    right: 84px !important;
  }
}