/* Netposible Hero: mismas capas que la web original.
   Cielo de La Rioja atenuado, estrellas (canvas) y las montañas por delante. */

.np-hero-on {
  position: relative;
  overflow: hidden;
  background: #00000f !important;
}
.np-hero-on > .elementor-background-overlay { display: none !important; }
.np-hero-on > .elementor-container { position: relative; z-index: 3; }

.np-hero-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 90%;
  opacity: 0;
  transition: opacity .7s ease;
}
.np-hero-sky { z-index: 0; background-image: url('sky.jpg'); }
.np-hero-mountains { z-index: 2; background-image: url('mountain.png'); }
.np-hero-on.np-ready .np-hero-sky { opacity: .3; }
.np-hero-on.np-ready .np-hero-mountains { opacity: 1; }

.np-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
.np-hero-on.np-stars .np-hero-canvas { opacity: 1; }

/* El GIF del muñequito se apaga mientras las estrellas toman su lugar.
   !important porque Elementor fija opacity: 1 en esa imagen desde su CSS de página. */
.np-hero-gif img { transition: opacity 1.6s ease; }
.np-hero-on.np-formed .np-hero-gif img { opacity: 0 !important; }

/* "Software" dibujado en puntos que explotan. El texto sigue ahí para Google y lectores de pantalla. */
.np-sw { display: inline-block; }
.np-sw-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.np-sw svg { display: inline-block; height: .72em; width: auto; overflow: visible; vertical-align: baseline; }
.np-sw rect { fill: currentColor; transition: transform 1.5s cubic-bezier(.17, .67, 0, 1.34), fill .6s ease; }
.np-sw rect.np-hit { fill: transparent; cursor: crosshair; }
.np-sw.no-anim rect { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .np-sw rect { transition-duration: .01s; }
}

/* ---------- Modo pantalla completa (como la vista previa) ----------
   La portada ocupa toda la primera pantalla debajo del encabezado: título grande con SOFTWARE debajo,
   el texto y los botones a la izquierda, y la constelación grande a la derecha. Solo cambia la
   disposición; los textos y botones son los de Elementor. */
.np-hero-on.np-full { padding: 0 !important; }
.np-full > .elementor-container {
  min-height: calc(100vh - var(--np-top, 0px));
  min-height: calc(100svh - var(--np-top, 0px));
  max-width: 1280px !important;
  align-items: center;
  padding: clamp(16px, 4vh, 40px) clamp(16px, 4vw, 48px) clamp(90px, 14vh, 170px);
  box-sizing: border-box;
}
.np-full > .elementor-container > .elementor-column > .elementor-widget-wrap { max-width: 640px; margin-right: auto; }
.np-full.np-has-gl .np-col-gif { display: none !important; }
.np-full .np-col-copy { width: 100% !important; }
.np-full .np-row-copy > .elementor-container,
.np-full .np-row-cta > .elementor-container { justify-content: flex-start !important; }

.np-full .np-title .elementor-widget-container,
.np-full .np-title p { text-align: left !important; }
.np-full .np-title p {
  display: inline-flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 22px);
  margin: 0 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(52px, min(9vw, 13vh), 130px) !important;
  line-height: .9 !important;
  letter-spacing: -.045em !important;
  color: #fff !important;
  text-shadow: none !important;
}
.np-full .np-sw svg { width: 100%; height: auto; }

.np-full .np-lead,
.np-full .np-lead .elementor-widget-container,
.np-full .np-lead p { text-align: left !important; }
.np-full .np-lead p {
  max-width: 54ch;
  margin: clamp(16px, 2.6vh, 28px) 0 0 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.55 !important;
  color: #e6e6e6 !important;
}

.np-full .np-title { margin-bottom: 0 !important; }
.np-full .np-row-cta { margin-top: clamp(10px, 2vh, 22px); }
.np-full .np-row-cta > .elementor-container { flex-wrap: wrap; gap: 4px; }
.np-full .np-row-cta .elementor-column { width: auto !important; }
.np-full .np-row-cta .elementor-button-wrapper { text-align: left !important; }
.np-full .np-row-cta .elementor-button {
  border-radius: 24px !important;
  padding: 14px 22px !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

@media (max-width: 820px) {
  .np-full > .elementor-container { align-items: flex-end; padding-top: 27svh; padding-bottom: 62px; }
  .np-full .np-title p { font-size: clamp(44px, 13vw, 64px) !important; gap: 10px; }
  .np-full .np-lead p { font-size: 15px !important; line-height: 1.5 !important; margin-top: 14px !important; }
}