/* ===========================================================================
   daClic — nueva.css
   La portada que mandó la diseñadora.

   CASI TODO ES CSS, A PROPÓSITO
   -----------------------------
   Las manchas de color del fondo, el degradado de marca, las tarjetas de
   enlace, las píldoras de redes y las tarjetas flotantes están dibujadas aquí.
   Podrían ser imágenes —el mockup lo son— pero entonces la portada pesaría
   varios megas, se vería borrosa en pantallas Retina y cambiar un color
   costaría abrir Figma. Dibujadas, pesan cero y se ajustan solas al modo noche.

   Lo ÚNICO que va como imagen son los objetos 3D (cohete, mano, estrella…) y
   la foto del perfil: eso no se dibuja con CSS sin que se note.

   Esta hoja NO toca nada del resto del sitio: todo cuelga de .nv.
   =========================================================================== */

/* La portada COMÚN reserva una franja arriba para su barra fija
   (`body.landing { padding-top: var(--nav-h) }`). Esta campaña trae su propia
   barra, que va dentro del degradado y no fija — así que esa franja se veía
   como una banda blanca sobre las manchas, y el fondo arrancaba cortado.
   Se anula aquí y no allá porque allá es correcta: esta hoja solo carga en
   esta campaña. */
body.landing:has(.nv) { padding-top: 0; }

/* Respaldo para navegadores sin :has() — Firefox lo tiene desde la 121, pero
   una franja blanca en la portada no puede depender de la versión de nadie. */
@supports not selector(:has(*)) {
  body.landing { padding-top: 0; }
}

.nv {
  /* La paleta de la campaña, encerrada aquí. Vive en la hoja de la campaña y
     no en el tema del sitio porque es de ESTA portada: cambiarla no puede
     repintarle los botones al panel de nadie. */
  --nv-purple: #6d3ff0;
  --nv-purple-2: #8b5cf6;
  --nv-indigo: #4f46e5;
  --nv-pink: #ec4899;
  --nv-pink-2: #f472b6;
  --nv-cyan: #22d3ee;
  --nv-yellow: #fbbf24;
  --nv-green: #22c55e;

  --nv-ink: #14162b;
  --nv-soft: #5b6478;
  --nv-card: #ffffff;
  --nv-bg: #f4f4fd;

  --nv-grad: linear-gradient(135deg, var(--nv-purple) 0%, var(--nv-pink) 100%);
  --nv-shadow: 0 10px 30px rgba(80, 40, 180, .10);
  --nv-shadow-lg: 0 24px 60px rgba(80, 40, 180, .16);

  position: relative;
  overflow: hidden;                /* las manchas no pueden dar scroll lateral */
  /* Arranca en el borde de arriba y llena la pantalla aunque el contenido sea
     corto: si no, en un monitor alto el fondo termina a media página y debajo
     asoma el gris del sitio. */
  min-height: 100vh; min-height: 100dvh;
  background: var(--nv-bg);
  color: var(--nv-ink);
  font-family: var(--font);
  isolation: isolate;              /* las manchas se quedan detrás de todo */
}

/* La campaña se ve igual de día y de noche: es una página de venta con su
   propia identidad, no una pantalla del panel. Forzar el esquema evita que el
   navegador pinte los controles nativos en oscuro sobre un fondo claro. */
.nv { color-scheme: light; }

/* ── Las manchas del fondo ─────────────────────────────────────────────────
   Cada una es un div con degradado y bordes redondeados asimétricos. Doce
   manchas en CSS pesan lo que ocupa este comentario; las mismas doce como PNG
   pesarían dos megas y se verían borrosas en un teléfono moderno.

   `pointer-events: none` porque son adorno: si atraparan el ratón, taparían
   los botones que tienen debajo sin que nadie entendiera por qué. */
.nv-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* El <svg> con las siluetas no ocupa nada: solo guarda los recortes. */
.nv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.nv-blob {
  position: absolute;
  opacity: .9;
  /* La forma la da el RECORTE, no `border-radius`. Aquel solo hace formas
     convexas —un círculo abollado— y por eso las manchas seguían leyéndose
     como globos por mucho que se desparejaran los ocho radios. Un recorte
     admite entrantes, que es lo que convierte un óvalo en una mancha.

     Las siluetas están en la vista, en unidades de 0 a 1, así que se estiran
     solas al tamaño de cada una. */
  will-change: transform;
  animation: nv-drift 22s ease-in-out infinite;
}

/* Un vaivén muy lento. Antes se animaban los radios; ahora que la forma es un
   recorte fijo, lo que respira es la mancha entera: gira un grado y medio y
   crece un 4%. Es suficiente para que el fondo no parezca una calcomanía, y no
   se nota mientras se lee. */
@keyframes nv-drift {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(var(--rot, 2deg)) scale(1.04); }
}

/* Salen bastante FUERA del borde a propósito: en el diseño se ven trozos de
   mancha entrando por las esquinas, no formas completas flotando. */
.nv-blob.b1 {
  clip-path: url(#nvb1); --rot: 3deg;
  top: -22%; left: -16%; width: 36rem; height: 32rem;
  background: linear-gradient(140deg, var(--nv-purple-2), var(--nv-pink));
  animation-delay: -3s;
}
.nv-blob.b2 {
  clip-path: url(#nvb2); --rot: -2.5deg;
  top: -16%; right: -20%; width: 34rem; height: 36rem;
  background: linear-gradient(200deg, var(--nv-cyan), var(--nv-purple-2));
  animation-delay: -9s;
}
.nv-blob.b3 {
  clip-path: url(#nvb3); --rot: 2deg;
  top: 42%; left: -18%; width: 28rem; height: 26rem;
  background: linear-gradient(160deg, #fb7185, var(--nv-yellow));
  opacity: .85; animation-delay: -14s;
}
.nv-blob.b4 {
  clip-path: url(#nvb4); --rot: -3deg;
  bottom: -14%; right: -16%; width: 30rem; height: 32rem;
  background: linear-gradient(180deg, var(--nv-cyan), var(--nv-green));
  opacity: .85; animation-delay: -6s;
}
.nv-blob.b5 {
  clip-path: url(#nvb5); --rot: 2.5deg;
  bottom: -20%; left: 16%; width: 26rem; height: 22rem;
  background: linear-gradient(120deg, var(--nv-purple), var(--nv-cyan));
  opacity: .7; animation-delay: -17s;
}

/* Puntos de confeti. Van con box-shadow múltiple: un solo elemento pinta
   nueve puntos sin nueve divs en el HTML. */
.nv-dots {
  position: absolute; top: 12%; left: 4%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--nv-purple);
  box-shadow:
     14rem  10rem 0 -1px var(--nv-green),
     44rem  -4rem 0 -2px var(--nv-pink),
     10rem  34rem 0  0px var(--nv-green),
     50rem  40rem 0 -2px var(--nv-yellow),
     60rem  16rem 0 -1px var(--nv-cyan),
      4rem  50rem 0 -1px var(--nv-purple-2),
     56rem  56rem 0 -2px var(--nv-pink);
}

/* ── Barra ────────────────────────────────────────────────────────────────── */
.nv-nav {
  position: relative; z-index: 3;
  padding: 1.25rem 0;
}
.nv-nav-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nv-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.nv-logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--nv-grad);
  display: inline-block;
}
.nv-logo-text {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--nv-ink);
}
.nv-logo-text b { color: var(--nv-purple); font-weight: 800; }

/* El logotipo subido, cuando lo hay. Algo más grande que en el panel (30 px):
   aquí es la marca de una portada, no un adorno de la barra de una aplicación.
   `width:auto` para que un logotipo ancho no salga aplastado. */
.nv-logo .brand-logo { height: 38px; width: auto; }

@media (max-width: 560px) {
  .nv-logo .brand-logo { height: 32px; }
}

.nv-nav-links { display: flex; align-items: center; gap: .625rem; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.nv-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-weight: 700; font-size: .9375rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nv-btn:hover { transform: translateY(-2px); text-decoration: none; }
.nv-btn:active { transform: translateY(0); }
.nv-btn .nv-i { width: 18px; height: 18px; flex: 0 0 auto; }

.nv-btn-grad  { background: var(--nv-grad); color: #fff; box-shadow: 0 8px 20px rgba(109,63,240,.35); }
.nv-btn-grad:hover { box-shadow: 0 12px 26px rgba(109,63,240,.45); color: #fff; }
.nv-btn-pink  { background: linear-gradient(135deg, var(--nv-pink), #f43f5e); color: #fff;
                box-shadow: 0 8px 20px rgba(236,72,153,.35); }
.nv-btn-pink:hover { color: #fff; }
.nv-btn-white { background: #fff; color: var(--nv-ink); box-shadow: var(--nv-shadow); }
.nv-btn-white:hover { color: var(--nv-ink); }
.nv-btn-plain { background: transparent; color: var(--nv-ink); }
.nv-btn-plain:hover { color: var(--nv-purple); transform: none; }
.nv-btn-blue  { background: linear-gradient(135deg, #3b82f6, var(--nv-indigo)); color: #fff;
                box-shadow: 0 8px 20px rgba(59,130,246,.3); }
.nv-btn-blue:hover { color: #fff; }
.nv-btn-lg { padding: .95rem 1.6rem; font-size: 1.0625rem; }

/* ── El escenario ─────────────────────────────────────────────────────────
   Tres columnas en escritorio: el gancho, la tarjeta del perfil y las
   tarjetas flotantes. En celular se apila y las flotantes pasan a ser una
   fila normal — encima del contenido no caben y taparían lo importante. */
.nv-stage {
  position: relative; z-index: 2;
  display: grid;
  gap: 1.5rem;
  padding: 1rem 0 3rem;
}
@media (min-width: 1024px) {
  .nv-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
    padding: 2rem 0 4rem;
  }
}
/* En un monitor de 2560px, el contenedor del sitio (1120px) se queda corto y
   las tres columnas quedan apretadas en medio de un desierto. Aquí se ensancha
   —solo en esta campaña— sin llegar a estirarse de borde a borde. */
.nv .container { max-width: 1240px; }

/* ── El gancho ────────────────────────────────────────────────────────────── */
.nv-hook { align-self: center; }
.nv-h1 {
  margin: 0 0 .875rem;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;
}
.nv-h1 em {
  font-style: normal;
  /* El degradado sobre el texto: se pinta el fondo y se recorta a las letras.
     Con `color: transparent` sin `background-clip`, el texto desaparece — por
     eso van siempre juntas. */
  background: var(--nv-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.nv-lead {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem; line-height: 1.6; color: var(--nv-soft);
  max-width: 22rem; text-wrap: pretty;
}

/* La nota manuscrita con su flechita. La flecha es un SVG en línea: una curva
   dibujada pesa 200 bytes y se recolorea sola. */
.nv-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1.25rem; }
.nv-note-arrow { flex: 0 0 auto; color: var(--nv-pink); }
.nv-note-txt { font-size: .9375rem; font-weight: 700; color: var(--nv-pink); padding-top: 1.5rem; }

/* ── La tarjeta del perfil ────────────────────────────────────────────────── */
.nv-card { position: relative; text-align: center; }

.nv-ava-wrap { position: relative; display: inline-block; margin-bottom: 1rem; }
/* El aro degradado: un padding con el degradado de fondo y la foto encima.
   Sin borrar el borde con `border`, que no acepta degradados. */
.nv-ava {
  width: clamp(9rem, 26vw, 12.5rem); aspect-ratio: 1;
  border-radius: 50%;
  padding: 6px;
  background: var(--nv-grad);
  box-shadow: var(--nv-shadow-lg);
}
.nv-ava img, .nv-ava-ph {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: 5px solid #fff;
  background: linear-gradient(160deg, var(--nv-purple-2), var(--nv-pink));
}
/* Sin foto, el hueco no se ve roto: se pinta el degradado con las iniciales.
   La diseñadora manda la foto, pero la portada no puede depender de que llegue. */
.nv-ava-ph {
  display: grid; place-items: center;
  color: #fff; font-size: 2.5rem; font-weight: 800;
}

.nv-name {
  margin: 0; display: inline-flex; align-items: center; gap: .4rem;
  font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -.02em;
}
.nv-check { color: var(--nv-indigo); flex: 0 0 auto; }
.nv-user { margin: .125rem 0 .75rem; color: var(--nv-purple); font-weight: 600; }
.nv-bio  { margin: 0 auto 1.125rem; max-width: 24rem; color: var(--nv-soft);
           font-size: .9375rem; line-height: 1.6; text-wrap: pretty; }

/* ── Las redes ───────────────────────────────────────────────────────────── */
.nv-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-bottom: 1.25rem; }
.nv-social {
  width: 44px; height: 44px;                 /* tocable con el pulgar */
  display: inline-grid; place-items: center;
  background: #fff; border-radius: 50%;
  box-shadow: var(--nv-shadow);
  color: var(--nv-ink);
  transition: transform .15s ease, color .15s ease;
}
.nv-social:hover { transform: translateY(-3px) scale(1.05); }
.nv-social svg { width: 20px; height: 20px; }

/* ── Las tarjetas de enlace ───────────────────────────────────────────────
   El color de cada una viaja en una variable del propio elemento, así que la
   regla es UNA y no seis: agregar una red es una línea en el HTML, no un
   bloque nuevo aquí. */
.nv-links { display: grid; gap: .75rem; }
.nv-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: .875rem;
  padding: .875rem 1.125rem;
  border-radius: 16px;
  background: var(--nv-l, var(--nv-grad));
  color: #fff; text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 22, 43, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nv-link:hover { transform: translateY(-3px) scale(1.01); color: #fff; text-decoration: none;
                 box-shadow: 0 14px 30px rgba(20, 22, 43, .18); }
.nv-link-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.95);
  color: var(--nv-lc, #14162b);
}
.nv-link-ic svg { width: 22px; height: 22px; }
.nv-link-t { min-width: 0; text-align: left; }
.nv-link-t b { display: block; font-size: .9375rem; font-weight: 700; }
.nv-link-t span { display: block; font-size: .8125rem; opacity: .85; }
.nv-link-go { opacity: .9; }

/* Cada red con su color de marca. Van en variables sobre el elemento: el
   bloque de arriba no se repite. */
.nv-l-ig  { --nv-l: linear-gradient(120deg, #f9737b, #e844a1 55%, #c13584); --nv-lc: #e844a1; }
.nv-l-tt  { --nv-l: linear-gradient(120deg, #1c1c22, #0b0b0f);             --nv-lc: #111118; }
.nv-l-yt  { --nv-l: linear-gradient(120deg, #f0322f, #cc1e1c);             --nv-lc: #e02320; }
.nv-l-sp  { --nv-l: linear-gradient(120deg, #35d46f, #16a34a);             --nv-lc: #17a44b; }
.nv-l-sh  { --nv-l: linear-gradient(120deg, #38bdf8, #2f7ff0);             --nv-lc: #2f7ff0; }
.nv-l-ml  { --nv-l: linear-gradient(120deg, #8b5cf6, #6d3ff0);             --nv-lc: #6d3ff0; }

.nv-add {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 1.125rem auto 0;
  padding: .8rem 1.35rem;
  background: #fff; border: 2px dashed #d9d5f5; border-radius: 999px;
  color: var(--nv-purple); font-weight: 700; font-size: .9375rem;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.nv-add:hover { border-color: var(--nv-purple); transform: translateY(-2px); color: var(--nv-purple); }

/* ── Tarjetas flotantes ──────────────────────────────────────────────────── */
.nv-side { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 1024px) {
  .nv-side-l { padding-top: 9rem; }
  .nv-side-r { padding-top: 3rem; }
}
.nv-float {
  position: relative;
  padding: 1.5rem;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  box-shadow: var(--nv-shadow-lg);
}
.nv-float-ic {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  margin-bottom: .875rem;
  background: var(--nv-fi, var(--nv-grad));
  color: #fff;
  box-shadow: 0 8px 18px rgba(20,22,43,.14);
}
.nv-float-ic svg { width: 26px; height: 26px; }
.nv-float h3 {
  margin: 0 0 .5rem;
  font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
}
.nv-float h3 em { font-style: normal; display: block; color: var(--nv-ink); }
.nv-float p { margin: 0 0 1.125rem; color: var(--nv-soft); font-size: .9375rem; line-height: 1.55; text-wrap: pretty; }
.nv-float .nv-btn { font-size: .875rem; padding: .7rem 1.15rem; }

/* El acento del título de cada tarjeta. */
.nv-float.is-pink   h3 { color: var(--nv-pink); }
.nv-float.is-purple h3 { color: var(--nv-purple); }
.nv-float.is-blue   h3 { color: #2f7ff0; }
.nv-float.is-pink   { --nv-fi: linear-gradient(135deg, var(--nv-pink), #f43f5e); }
.nv-float.is-purple { --nv-fi: var(--nv-grad); }
.nv-float.is-blue   { --nv-fi: linear-gradient(135deg, #38bdf8, #2f7ff0); }

/* ── Los objetos 3D ───────────────────────────────────────────────────────
   Es lo ÚNICO que va como imagen: un cohete con luces y sombras no se dibuja
   con CSS sin que se note. Se colocan en absoluto sobre el escenario y
   DESAPARECEN en celular — ahí no hay margen donde ponerlos sin tapar el
   contenido, y son adorno.

   Cada uno se posiciona con dos variables, así que mover uno es cambiar dos
   números en el HTML y no agregar una regla aquí. */
.nv-props { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
@media (min-width: 1200px) { .nv-props { display: block; } }
.nv-prop {
  position: absolute;
  top: var(--y); left: var(--x);
  width: var(--w, 6rem);
  filter: drop-shadow(0 12px 22px rgba(60,30,120,.18));
  animation: nv-float 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes nv-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 2deg)); }
}

/* ── Cierre ──────────────────────────────────────────────────────────────── */
.nv-tagline {
  position: relative; z-index: 2;
  max-width: 22rem; margin: 0 auto;
  padding: 1.5rem 2rem;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 28px;
  box-shadow: var(--nv-shadow);
  text-align: center;
}
.nv-tagline b {
  display: block;
  font-size: clamp(1.25rem, 3.5vw, 1.6rem); font-weight: 800; line-height: 1.35;
  letter-spacing: -.02em;
}
.nv-tagline b:last-child { color: var(--nv-purple); }

.nv-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 2.5rem 0 2rem;
}
.nv-foot-note { margin: .375rem 0 0; font-size: .875rem; color: var(--nv-soft); }
.nv-foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.nv-foot-links a { color: var(--nv-soft); font-size: .875rem; text-decoration: none; }
.nv-foot-links a:hover { color: var(--nv-purple); }

/* ── Movimiento reducido ──────────────────────────────────────────────────
   Quien pidió menos movimiento no ve flotar nada. No es un detalle de
   cortesía: a algunas personas el movimiento en bucle les provoca mareo. */
@media (prefers-reduced-motion: reduce) {
  /* Las manchas se quedan quietas en su primera forma: siguen siendo manchas,
     solo que sin respirar. A algunas personas el movimiento en bucle —aunque
     sea lento y de fondo— les provoca mareo. */
  .nv-prop { animation: none; }
  /* Las manchas se quedan quietas. Siguen siendo manchas —la forma es un
     recorte, no la animación—, solo que sin moverse. A algunas personas el
     movimiento en bucle, aunque sea lento y de fondo, les provoca mareo. */
  .nv-blob { animation: none; }
  .nv-btn, .nv-link, .nv-social, .nv-add { transition: none; }
  .nv-btn:hover, .nv-link:hover, .nv-social:hover, .nv-add:hover { transform: none; }
}