/* ============================================================
   Nidu — Movimiento y fondos (landing somosnidu.uy)
   Requiere css/tokens.css (usa --verde, --crema, --coral, --ease...).
   Cargar DESPUÉS de components.css.
   ============================================================ */

/* ---------- 1. Madeja 3D (canvas de fondo) ---------- */
.nd-stage        { position: relative; overflow: hidden; }
.nd-stage > .nd-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: .85; pointer-events: none;
}
.nd-stage > .nd-content { position: relative; }

/* ---------- 2. Caos → orden ---------- */
.nd-orden        { position: relative; max-width: 420px; margin: 0 auto; }
.nd-orden-nota {
  position: absolute; left: 0; top: 0; width: 250px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px 16px; background: var(--surface); border-radius: var(--r-md);
  border: 1px solid transparent;
  box-shadow: var(--sh-3);
  font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--texto);
  transform: translate(var(--nd-x), var(--nd-y)) rotate(var(--nd-rot));
  transition: transform .78s var(--ease) var(--nd-delay, 0ms),
              width .78s var(--ease) var(--nd-delay, 0ms),
              box-shadow .6s var(--ease), border-color .6s linear;
}
.nd-orden-nota .nd-dot {
  width: 18px; height: 18px; flex: none; border-radius: var(--r-pill);
  border: 2px solid rgba(37,51,49,.2); background: transparent;
  transition: all .5s var(--ease);
}
.nd-orden.is-ordenado .nd-orden-nota {
  width: 100%; border-color: var(--borde); box-shadow: var(--sh-1);
  transform: translate(0, var(--nd-y-final)) rotate(0deg);
}
.nd-orden.is-ordenado .nd-orden-nota .nd-dot { border-color: var(--verde); }
.nd-orden.is-ordenado .nd-orden-nota:first-child .nd-dot { background: var(--verde); }
.nd-orden.is-ordenado .nd-orden-nota:first-child .nd-label {
  text-decoration: line-through; color: var(--texto-3);
}
.nd-orden-nota .nd-label { transition: color .5s linear; }

/* ---------- 3. Notas con profundidad ---------- */
.nd-parallax       { perspective: 900px; display: grid; place-items: center; }
.nd-parallax-inner { position: relative; transform-style: preserve-3d; transition: transform .12s linear; }
.nd-layer          { position: absolute; padding: 14px 16px; background: var(--surface);
                     border-radius: var(--r-sm); box-shadow: var(--sh-3);
                     font-size: var(--fs-14); font-weight: var(--fw-bold); }
.nd-layer.nd-z-back  { transform: translateZ(-60px) rotate(-4deg); background: var(--surface-2); color: var(--texto-3); }
.nd-layer.nd-z-mid   { transform: translateZ(10px)  rotate(2deg); }
.nd-layer.nd-z-front { transform: translateZ(76px)  rotate(-1.5deg); box-shadow: 0 22px 46px rgba(37,51,49,.18); }

/* ---------- 4. Hilo tejido por scroll ---------- */
.nd-hilo      { position: absolute; left: 0; top: 0; width: 120px; overflow: visible; pointer-events: none; }
.nd-hilo-base { stroke: rgba(47,118,109,.16); }
.nd-hilo-live { stroke: var(--verde); }
.nd-hilo path { fill: none; stroke-width: 2.5; stroke-linecap: round; }

/* ---------- 5. Tarjeta que se resuelve ---------- */
.nd-resolve-scene { perspective: 800px; }
.nd-resolve {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--sh-2); cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.nd-resolve:hover, .nd-resolve:focus-visible {
  transform: rotateX(7deg) rotateY(-7deg) translateZ(28px);
  box-shadow: var(--sh-brand);
}
.nd-resolve:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.nd-resolve .nd-ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--suave); color: var(--verde);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.nd-resolve .nd-ico path { stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .5s var(--ease) .1s; }
.nd-resolve:hover .nd-ico { background: var(--verde); color: var(--crema); }
.nd-resolve:hover .nd-ico path { stroke-dashoffset: 0; }
.nd-resolve .nd-bar  { margin-top: var(--sp-4); height: 5px; border-radius: var(--r-pill);
  background: var(--surface-sunk); overflow: hidden; }
.nd-resolve .nd-bar > i { display: block; height: 100%; width: 38%; border-radius: var(--r-pill);
  background: var(--verde); transition: width .7s var(--ease); }
.nd-resolve:hover .nd-bar > i { width: 100%; }
.nd-resolve:hover .nd-title { text-decoration: line-through; color: var(--texto-3); }
.nd-resolve .nd-title { transition: color .4s linear; }

/* ---------- 6. Grano de papel + luz que sigue al cursor ---------- */
.nd-paper { position: relative; background: var(--crema); overflow: hidden; }
.nd-paper > .nd-luz {
  position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(340px circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
.nd-paper > .nd-grano {
  position: absolute; inset: 0; opacity: .42; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}
.nd-paper > .nd-content { position: relative; }

/* ---------- 7. El teléfono en 3D ---------- */
/* Variante en uso: 7B (.nd-tel-scroll). 7A y 7C quedan por si se retoman. */
.nd-tel-scene       { perspective: 1100px; display: grid; place-items: center; }
.nd-tel-tilt        { transform-style: preserve-3d; transition: transform .14s linear;
                      transform: rotateY(-13deg) rotateX(6deg); }
.nd-tel-scene.nd-tel-deep { perspective: 1200px; }

.nd-tel {
  position: relative; width: 178px; height: 310px;
  background: var(--oscuro); border-radius: 30px; padding: 7px;
  box-shadow: 0 34px 60px rgba(37,51,49,.3), 0 4px 10px rgba(37,51,49,.2);
}
.nd-tel::before {
  content: ''; position: absolute; left: 50%; top: 12px; z-index: 2;
  width: 44px; height: 5px; margin-left: -22px;
  background: rgba(255,255,255,.22); border-radius: var(--r-pill);
}
.nd-tel > .nd-tel-screen {
  height: 100%; background: var(--crema); border-radius: 24px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* 7B — ELEGIDA. El ángulo lo escribe el JS; este es el estado inicial de perfil. */
.nd-tel-scroll      { transform: rotateY(20deg); }
/* 7C: dos teléfonos a distinta distancia de cámara. */
.nd-tel-pair        { position: relative; width: 230px; height: 310px;
                      transform-style: preserve-3d; transition: transform .14s linear;
                      transform: rotateY(-16deg) rotateX(5deg); }
.nd-tel-pair .nd-tel-back  { position: absolute; right: 0; top: 26px;
                             width: 150px; height: 262px; border-radius: 26px;
                             background: #3D4E4B; transform: translateZ(-70px);
                             box-shadow: 0 26px 50px rgba(37,51,49,.24); }
.nd-tel-pair .nd-tel-front { position: absolute; left: 0; top: 0;
                             width: 166px; height: 292px; transform: translateZ(60px);
                             box-shadow: 0 36px 64px rgba(37,51,49,.32); }
@media (max-width: 640px) {
  /* En celular no hay mouse: de frente y sin inclinación. */
  .nd-tel-tilt, .nd-tel-pair, .nd-tel-scroll { transform: none !important; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .nd-orden-nota, .nd-parallax-inner, .nd-resolve, .nd-resolve .nd-ico,
  .nd-resolve .nd-ico path, .nd-resolve .nd-bar > i { transition: none !important; }
  .nd-orden .nd-orden-nota { transform: translate(0, var(--nd-y-final)) rotate(0deg); width: 100%; }
  .nd-paper > .nd-luz { display: none; }
  .nd-tel-tilt, .nd-tel-pair, .nd-tel-scroll { transform: none !important; transition: none !important; }
}