/* =========================
   INICIO.CSS (solo Inicio)
   - No toca su style.css global
========================= */

/* =========================
   HERO (cuadro azul oscuro)
========================= */
.hero{
  position: relative !important;
  overflow: hidden !important;     /* recorta partículas dentro del hero */
  isolation: isolate;              /* aísla z-index dentro del hero */
  background: #050b1a;             /* azul oscuro base */

  /* Hacer el hero "más ancho hacia abajo" (más alto) */
  min-height: 86vh;                /* antes 640px -> esto se adapta a pantalla */
  padding-bottom: 140px;           /* extiende el área azul hacia abajo */
}

/* Layer del canvas SOLO dentro del hero */
.hero-antigravity{
  position: absolute !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Canvas ocupa el hero completo y no se sale */
#antigravity-canvas{
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Velo para legibilidad (arriba del canvas) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(
    circle at 30% 35%,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.35) 55%,
    rgba(0,0,0,0.70) 100%
  );
}

/* Contenido del hero arriba de todo */
.hero-inner,
.hero-content,
.hero-media{
  position: relative;
  z-index: 2;
}

/* =========================
   CORTE PRO (fade al final del hero)
   - hace transición elegante a Novedades
========================= */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:160px;                    /* más alto = transición más suave */
  z-index:2;                       /* arriba del canvas y del velo */
  pointer-events:none;

  /* Fade a un azul ligeramente distinto para separar */
  background: linear-gradient(
    to bottom,
    rgba(5,11,26,0) 0%,
    rgba(5,11,26,0.55) 55%,
    rgba(7,12,30,0.92) 85%,
    rgba(7,12,30,1) 100%
  );
}

/* =========================
   NOVEDADES (bajarla)
========================= */
.news-section{
  position: relative;
  z-index: 3;

  /* Esto es lo que la BAJA (lo que usted quiere) */
  margin-top: 80px;                /* suba a 120px si quiere más espacio */
  padding-top: 30px;

  /* opcional: que novedades tenga su propio “bloque” limpio */
  background: transparent;         /* no forzamos color, depende de su style.css */
}

/* Si su .news-section trae un fondo propio en style.css y no quiere,
   puede forzarlo aquí (opcional):
.news-section{
  background: #070c1e;
}
*/