/* Nubbun v3 - capa de efectos (React Bits portados) */

/* 1. Spotlight Card: luz suave que sigue al puntero */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    120px circle at var(--fx-x, 50%) var(--fx-y, 50%),
    rgba(255, 122, 136, 0.16),
    rgba(202, 38, 56, 0.06) 45%,
    transparent 70%
  );
  z-index: 1;
}
.fx-spot:hover::after { opacity: 1; }

/* 2. Star Border: anillo de luz girando en los CTA principales */
@property --fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.fx-star { position: relative; }
.fx-star::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--fx-angle),
    rgba(255, 255, 255, 0) 0deg 235deg,
    rgba(255, 122, 136, 0.85) 285deg,
    rgba(255, 255, 255, 0.95) 325deg,
    rgba(255, 255, 255, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fx-star-spin 6.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes fx-star-spin { to { --fx-angle: 360deg; } }


@media (prefers-reduced-motion: reduce) {
  .fx-star::before { animation: none; }
}


/* 5. Fondo general: Line Waves desenfocado y a baja opacidad */
.fx-waves {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.15;
  filter: blur(4px);
}
.fx-waves canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Titular: dos lineas con perspectiva propia, sin giros en X ni Z.
   La perspectiva va dentro de cada transform (perspective() como funcion),
   asi cada linea se proyecta sobre su propio centro y no arrastra la inclinacion
   de la linea vecina. */
.hero__title {
  font-size: clamp(52px, 7.6vw, 96px);   /* +25% sobre 42-78px */
  max-width: 1100px;
  line-height: 0.9;                     /* lineas mas juntas */
  margin-bottom: 0;
}
.hero__title .line {
  display: inline-block;
  transform-origin: left center;
  backface-visibility: hidden;
}
.hero__title .line--1 {
  font-size: 1.0em;
  opacity: 0.85;
  transform: perspective(650px) rotateY(28deg);
}
.hero__title .line--2 {
  font-size: 0.85em;
  transform: perspective(650px) rotateY(-28deg);
}
@media (max-width: 680px) {
  .hero__title { line-height: 1.08; }
  .hero__title .line--1 { font-size: 0.8em; }
  .hero__title .line--1,
  .hero__title .line--2 { transform: none; }
}

/* Subtitulo: mas cerca del titular, mas grande y en dos lineas */
.hero__sub {
  margin-top: -18px;
  font-size: clamp(18px, 2.4vw, 23px);
  max-width: 430px;
  line-height: 1.45;
}