/* ============================================================
   NOCTA — Capa de DINAMISMO (inspirada en vasava.es)
   Solo se activa en index-dinamico.html (body.home-dyn).
   Añade movimiento SIN tocar estructura ni contenido.
   ============================================================ */

/* ---- Reveal cinético de títulos (palabras suben desde una máscara) ---- */
.dyn-split { opacity: 1 !important; transform: none !important; }
.dyn-line {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.dyn-word {
  display: inline-block;
  transform: translateY(118%) rotate(4deg);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.dyn-split.in .dyn-word { transform: none; }

/* ---- Toggles Modo/Idioma: roll de texto que adelanta el cambio al pasar ---- */
.home-dyn .n-ctrl .dyn-roll {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  height: 1.25em; line-height: 1.25em;
}
.home-dyn .n-ctrl .dyn-roll-inner {
  display: flex; flex-direction: column;
  transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-dyn .n-ctrl .dyn-roll-cur,
.home-dyn .n-ctrl .dyn-roll-alt {
  height: 1.25em; line-height: 1.25em; white-space: nowrap;
}
.home-dyn .n-ctrl:hover .dyn-roll-inner { transform: translateY(-1.25em); }
.home-dyn .n-ctrl:hover .dyn-roll-alt { color: var(--n-live); }

/* ---- Nav: subrayado que se dibuja al pasar ---- */
.home-dyn .nav-links a { position: relative; }
.home-dyn .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-dyn .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Botones magnéticos: retorno suave ---- */
.home-dyn .n-btn,
.home-dyn .n-btn--green,
.home-dyn .n-btn--outline { will-change: transform; transition: transform .35s cubic-bezier(0.16,1,0.3,1), filter .3s var(--n-ease), background .3s var(--n-ease), color .3s var(--n-ease), border-color .3s var(--n-ease); }

/* ---- Cursor personalizado: LUNA ---- */
.dyn-cursor {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  pointer-events: none; z-index: 9999; will-change: transform;
}
.dyn-cursor .dyn-moon {
  width: 100%; height: 100%; display: block;
  fill: var(--n-live);
  filter: drop-shadow(0 0 7px var(--n-live-soft));
  transform: rotate(-18deg);
  transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}
.dyn-cursor.is-hover .dyn-moon { transform: rotate(-18deg) scale(2); }

/* ---- Hover con zoom en media (flyers en movimiento) ---- */
.home-dyn .n-ind-card { overflow: hidden; }
.home-dyn .n-ind-card video,
.home-dyn .n-ind-card img { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.home-dyn .n-ind-card:hover video,
.home-dyn .n-ind-card:hover img { transform: scale(1.06); }

/* ---- Franjas: micro-inclinación al pasar (vida) ---- */
.home-dyn .n-band-item { transition: transform .5s var(--n-ease), color .4s var(--n-ease); }
.home-dyn .n-band-item:hover { transform: skewX(-8deg); }

@media (pointer: coarse) {
  .dyn-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dyn-word { transform: none !important; }
  .dyn-cursor { display: none; }
}

/* ============================================================
   AJUSTES VISUALES (petición de Luis, 2026-07-09)
   Home más compacta y estática: menos aire entre secciones,
   botones quietos, carrusel sin difuminado y esquinas rectas.
   ============================================================ */
/* Espacios verticales más compactos en toda la home */
.home-v2 .n-section { padding-top: clamp(64px, 9vh, 120px); padding-bottom: clamp(64px, 9vh, 120px); }
.n-clubs-head { margin-bottom: clamp(28px, 4vh, 48px); }
.n-ind { padding-bottom: clamp(48px, 7vh, 90px); }
.n-ind-head { margin-bottom: clamp(28px, 4vh, 48px); }

/* CTA del nav: verde lima con la letra blanca pura */
.n-btn--green { background: var(--n-live); color: #FFFFFF; }

/* Botones estáticos: sin desplazamiento en hover (el efecto magnético
   se desactivó en home-dyn.js) */
.n-btn:hover,
.n-btn--green:hover,
.n-btn--outline:hover { transform: none; }
.n-btn:hover .n-btn-arrow { transform: none; }
.n-serv-row:hover { padding-left: 0; }
.n-serv-row:hover .n-serv-arrow { transform: none; }

/* Branding for Clubs: la imagen se ve ENTERA en un solo pantallazo */
.n-clubs-img { width: auto; max-width: min(1100px, 92%); max-height: 86svh; margin: 0 auto; }

/* Individual Projects: sin difuminado en los laterales y esquinas rectas */
.n-ind-marquee { -webkit-mask-image: none; mask-image: none; }
.n-ind-card { border-radius: 0; }

/* Filosofía: layout original de 2 columnas (título arriba-izq, párrafo
   abajo-der alineado a la derecha) — según la referencia visual de Luis. */

/* Precios de servicios: "Desde" con el color secundario del tema
   (lima en oscuro, morado en modo claro — ver css/home-test.css) */
.n-serv-price em { color: var(--n-live); }

/* CTA final sin el gran bloque negro vacío (antes ocupaba 100svh) */
.n-cta { min-height: 0; padding: clamp(80px, 12vh, 140px) var(--n-gut); }