/* =========================================================
   NECORA Landing — 13-steps.css
   EXTRAÍDO DESDE landing.css v30.5
   Scope:
   - steps wave
   - desktop pin system
   - ghost numbers
   - mobile vertical timeline
   - CTA internos
   ========================================================= */

/* =========================================================
   @steps
   14) STEPS WAVE — v2 (simple + tunable)
   ✅ 1 solo sistema
   ✅ JS ancla el PIN sobre el SVG por data-t
   ✅ CSS ajusta PIN / TEXTO / GHOST con variables (X/Y)
   ✅ Desktop: items como “puntos”
   ✅ Mobile: lista vertical sin SVG
   ========================================================= */

.nl-stepsWave{
  padding-top: clamp(18px, 2.8vw, 40px);
  padding-bottom: clamp(18px, 3vw, 44px);
}

.nl-stepsWave__head{
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}

.nl-stepsWave__head .nl-sub{
  margin: 8px auto 0;
  max-width: 34ch;
  font-size: 14.5px;
  color: rgba(12,18,28,.62);
}

/* ---------- Stage ---------- */
.nl-stepsWave--v2 .nl-stepsWave__stage{
  position: relative;
  margin-top: 14px;

  border-radius: 26px;
  border: 1px solid rgba(12,18,28,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  box-shadow: 0 18px 54px rgba(10,20,35,.07);

  padding: clamp(22px, 3.2vw, 40px);
  min-height: 460px;

  overflow: hidden;
  isolation: isolate;
}

/* ---------- SVG wave ---------- */
.nl-stepsWave--v2 .nl-stepsWave__svg{
  position:absolute;
  left:0;
  right:0;
  top: 56%;
  transform: translateY(-50%);
  width:100%;
  height:auto;
  pointer-events:none;
  opacity:.95;
  z-index:0;
}

.nl-stepsWave--v2 .nl-stepsWave__line{
  fill:none;
  stroke: rgba(0,161,223,.72);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nl-stepsWave--v2 .nl-stepsWave__glow{
  fill:none;
  stroke: rgba(0,161,223,.18);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity:.95;
  filter: blur(.4px);
}

/* ---------- Layer items ---------- */
.nl-stepsWave--v2 .nl-stepsWave__items{
  position: relative;
  z-index: 2;
}

/* =========================================================
   QUITAR NUMERITOS CHIQUITOS del <ol>
   ========================================================= */
.nl-stepsWave--v2 .nl-stepsWave__items{
  color: transparent;
}

/* restaura texto interno */
.nl-stepsWave--v2 .nl-stepsWave__item{
  color: initial;
}

/* =========================================================
   QUITAR “1.” “2.” “3.” del <ol> (markers reales)
   ========================================================= */
.nl-stepsWave--v2 .nl-stepsWave__items{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Modern browsers */
.nl-stepsWave--v2 .nl-stepsWave__items > li::marker{
  color: transparent !important;
  font-size: 0 !important;
}

/* Fallback */
.nl-stepsWave--v2 .nl-stepsWave__items > li{
  list-style: none !important;
}

/* =========================================================
   CONTROLES
   ========================================================= */
.nl-stepsWave--v2{
  --nl-s1-x: 12%;
  --nl-s1-y: 66%;
  --nl-s2-x: 50%;
  --nl-s2-y: 36%;
  --nl-s3-x: 88%;
  --nl-s3-y: 56%;
}

/* JS escribe --nl-s{n}-x/y */
.nl-stepsWave--v2 .nl-stepsWave__item.is-1{ --x: var(--nl-s1-x); --y: var(--nl-s1-y); }
.nl-stepsWave--v2 .nl-stepsWave__item.is-2{ --x: var(--nl-s2-x); --y: var(--nl-s2-y); }
.nl-stepsWave--v2 .nl-stepsWave__item.is-3{ --x: var(--nl-s3-x); --y: var(--nl-s3-y); }

/* =========================================================
   DESKTOP (>=821): PIN ancla + texto flotante + ghost
   ========================================================= */
@media (min-width: 821px){

  .nl-stepsWave--v2 .nl-stepsWave__item{
    position: absolute;
    left: var(--x, 50%);
    top:  var(--y, 50%);
    width:0;
    height:0;
    padding:0;
    margin:0;
    border:0;
    background: transparent;
    box-shadow:none;
    pointer-events:none;
  }

  /* =========================
     AJUSTES POR STEP
     ========================= */
  .nl-stepsWave--v2 .nl-stepsWave__item.is-1{
    --pin-dx: 0px;
    --pin-dy: 208px;
    --ghost-dx: 0px;
    --ghost-dy: -20px;
    --text-dx: 78px;
    --text-dy: -8px;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-2{
    --pin-dx: 0px;
    --pin-dy: 252px;
    --ghost-dx: 80px;
    --ghost-dy: 25px;
    --text-dx: 50%;
    --text-dy: 240px;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-3{
    --pin-dx: 0px;
    --pin-dy: 170px;
    --ghost-dx: 0px;
    --ghost-dy: 150px;
    --text-dx: calc(-100% - -50px);
    --text-dy: -10px;
  }

  /* ---------- Pin bubble ---------- */
  .nl-stepsWave--v2 .nl-stepsWave__pin{
    position:absolute;
    left:0;
    top:0;
    transform: translate(
      calc(-50% + var(--pin-dx, 0px)),
      calc(-50% + var(--pin-dy, 0px))
    );
    z-index: 3;
    pointer-events:auto;

    width:56px;
    height:56px;
    border-radius:999px;
    display:grid;
    place-items:center;

    border: 1px solid rgba(12,18,28,.10);
    background:
      radial-gradient(28px 28px at 30% 25%, rgba(255,255,255,.98), rgba(255,255,255,0) 70%),
      rgba(255,255,255,.98);
    box-shadow:
      0 26px 52px rgba(10,20,35,.12),
      0 18px 36px rgba(0,161,223,.14),
      inset 0 1px 0 rgba(255,255,255,.70);
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin::after{
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    width:66px;
    height:22px;
    transform: translate(-50%, -6px);
    background: radial-gradient(closest-side, rgba(0,161,223,.22), rgba(0,161,223,0));
    filter: blur(6px);
    opacity: .65;
    pointer-events:none;
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin span{
    font-size: 18px;
    color: rgba(0,161,223,.95);
    filter: drop-shadow(0 8px 14px rgba(0,161,223,.18));
  }

  /* =========================================================
     GHOST NUMBER (1/2/3 grande)
     ========================================================= */
  .nl-stepsWave--v2{
    --nl-wave-r: 0;
    --nl-wave-g: 161;
    --nl-wave-b: 223;

    --nl-ghost-alpha: .14;
    --nl-ghost-shadow: .14;
    --nl-ghost-blueGlow: .10;
    --nl-ghost-stroke: .14;
    --nl-ghost-blur: 0.2px;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item::before{
    content: attr(data-step);
    position:absolute;
    left:0;
    top:0;
    transform: translate(
      calc(-50% + var(--ghost-dx, 0px)),
      var(--ghost-dy, -110px)
    );

    font-weight: 1000;
    font-size: clamp(118px, 13.2vw, 220px);
    line-height: 1;
    letter-spacing: -0.06em;

    color: rgba(10, 22, 35, var(--nl-ghost-alpha));

    text-shadow:
      0 26px 64px rgba(10,20,35,var(--nl-ghost-shadow)),
      0 10px 26px rgba(10,20,35,calc(var(--nl-ghost-shadow) * .55)),
      0 18px 52px rgba(var(--nl-wave-r), var(--nl-wave-g), var(--nl-wave-b), var(--nl-ghost-blueGlow));

    -webkit-text-stroke: 1px rgba(10, 22, 35, var(--nl-ghost-stroke));
    text-stroke: 1px rgba(10, 22, 35, var(--nl-ghost-stroke));

    filter: blur(var(--nl-ghost-blur));
    pointer-events:none;
    z-index: 1;
  }

  /* ---------- Content floating ---------- */
  .nl-stepsWave--v2 .nl-stepsWave__content{
    position:absolute;
    left:0;
    top:0;
    max-width: 260px;
    z-index: 2;
    pointer-events:auto;
  }

  .nl-stepsWave--v2 .nl-stepsWave__content::before{
    content:"";
    position:absolute;
    inset: -8px -10px -10px -10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.34));
    border: 1px solid rgba(12,18,28,.06);
    box-shadow: 0 14px 34px rgba(10,20,35,.06);
    z-index:-1;
    pointer-events:none;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-1 .nl-stepsWave__content{
    transform: translate(var(--text-dx, 18px), var(--text-dy, -96px));
    text-align:left;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-2 .nl-stepsWave__content{
    transform: translate(var(--text-dx, -50%), var(--text-dy, 74px));
    text-align:center;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-3 .nl-stepsWave__content{
    transform: translate(var(--text-dx, calc(-100% - 18px)), var(--text-dy, 62px));
    text-align:right;
  }

  .nl-stepsWave--v2 .nl-stepsWave__t{
    margin:0;
    font-size: 18px;
    font-weight: 1000;
    letter-spacing: -0.02em;
    color: rgba(12,18,28,.94);
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    -webkit-font-smoothing: antialiased;
  }

  .nl-stepsWave--v2 .nl-stepsWave__p{
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(12,18,28,.66);
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
  }

  .nl-stepsWave--v2 .nl-stepsWave__cta{
    display:flex;
    gap:10px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-2 .nl-stepsWave__cta{
    justify-content:center;
  }

  .nl-stepsWave--v2 .nl-stepsWave__item.is-3 .nl-stepsWave__cta{
    justify-content:flex-end;
  }

  .nl-stepsWave--v2 .nl-stepsWave__cta .nl-btn{
    border-radius: 999px;
    padding: 8px 12px;
    border: 1px solid rgba(12,18,28,.08);
    box-shadow:
      0 14px 30px rgba(10,20,35,.10),
      inset 0 1px 0 rgba(255,255,255,.60);
    transition: box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  }

  @media (hover:hover){
    .nl-stepsWave--v2 .nl-stepsWave__cta .nl-btn:hover{
      border-color: rgba(0,161,223,.22);
      box-shadow:
        0 18px 40px rgba(0,161,223,.16),
        0 14px 30px rgba(10,20,35,.10),
        inset 0 1px 0 rgba(255,255,255,.60);
      filter: saturate(1.02);
    }

    .nl-stepsWave--v2 .nl-stepsWave__item:hover .nl-stepsWave__pin{
      transform: translate(
        calc(-50% + var(--pin-dx, 0px)),
        calc(-50% + var(--pin-dy, 0px))
      ) translateY(-2px);
    }
  }
}

/* ---------- Tablet tuning ---------- */
@media (max-width: 1024px){
  .nl-stepsWave--v2 .nl-stepsWave__stage{ min-height: 520px; }

  @media (min-width: 821px){
    .nl-stepsWave--v2 .nl-stepsWave__item.is-1{ --text-dy: -96px; }
    .nl-stepsWave--v2 .nl-stepsWave__item.is-2{ --text-dy: 84px; }
    .nl-stepsWave--v2 .nl-stepsWave__item.is-3{ --text-dy: 72px; }
  }
}

/* =========================================================
   14.1) STEPS WAVE — MOBILE PRO v2.3 (<=820)
   ========================================================= */
@media (max-width: 820px){

  .nl-stepsWave--v2 .nl-stepsWave__svg{ display:none; }

  /* ====== CONTROLES ====== */
  .nl-stepsWave--v2{
    --axis-x: 14px;
    --pin-size: 46px;
    --items-pl: 30px;
    --content-pl: 46px;
  }

  /* Stage */
  .nl-stepsWave--v2 .nl-stepsWave__stage{
    min-height:auto;
    padding: 16px 14px 18px;
    border-radius: 24px;
    position:relative;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  }

  /* Wrapper */
  .nl-stepsWave--v2 .nl-stepsWave__items{
    display:grid;
    gap: 12px;
    position: relative;
    padding-left: var(--items-pl);
  }

  /* Línea vertical */
  .nl-stepsWave--v2 .nl-stepsWave__items::before{
    content:"";
    position:absolute;
    left: var(--axis-x);
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(
      180deg,
      rgba(0,161,223,.18),
      rgba(0,161,223,.28),
      rgba(0,161,223,.18)
    );
    box-shadow:
      0 18px 40px rgba(0,161,223,.10),
      inset 0 1px 0 rgba(255,255,255,.65);
    opacity: .9;
  }

  /* Glow detrás */
  .nl-stepsWave--v2 .nl-stepsWave__items::after{
    content:"";
    position:absolute;
    left: var(--axis-x);
    top: 0;
    bottom: 0;
    width: 14px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0,161,223,.16), rgba(0,161,223,0));
    filter: blur(10px);
    opacity:.75;
    pointer-events:none;
  }

  /* Card */
  .nl-stepsWave--v2 .nl-stepsWave__item{
    position: relative;
    width:100%;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(12,18,28,.07);
    background:
      radial-gradient(120px 70px at 18% 0%, rgba(0,161,223,.06), rgba(0,161,223,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
    box-shadow:
      0 18px 54px rgba(10,20,35,.10),
      inset 0 1px 0 rgba(255,255,255,.70);

    overflow: visible;
    isolation:isolate;
  }

  /* Pin */
  .nl-stepsWave--v2 .nl-stepsWave__pin{
    position:absolute;
    left: var(--axis-x);
    top: 12px;
    width: var(--pin-size);
    height: var(--pin-size);
    transform: translateX(-50%);
    z-index: 3;

    border-radius: 999px;
    border: 1px solid rgba(12,18,28,.10);
    background:
      radial-gradient(24px 24px at 30% 25%, rgba(255,255,255,.98), rgba(255,255,255,0) 70%),
      rgba(255,255,255,.98);
    box-shadow:
      0 18px 44px rgba(10,20,35,.12),
      0 12px 26px rgba(0,161,223,.14),
      inset 0 1px 0 rgba(255,255,255,.75);
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin svg,
  .nl-stepsWave--v2 .nl-stepsWave__pin img{
    width: 20px;
    height: 20px;
    display:block;
    margin:auto;
  }

  /* Nodo mini debajo */
  .nl-stepsWave--v2 .nl-stepsWave__pin::after{
    content:"";
    position:absolute;
    left: 50%;
    top: 100%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -2px);
    border-radius: 999px;
    background: rgba(0,161,223,.55);
    box-shadow: 0 10px 18px rgba(0,161,223,.16);
    opacity:.9;
  }

  /* Contenido */
  .nl-stepsWave--v2 .nl-stepsWave__content{
    position: relative;
    transform:none !important;
    max-width:none;
    text-align:left;
    z-index: 2;
    padding-left: var(--content-pl);
    padding-top: 2px;
  }

  .nl-stepsWave--v2 .nl-stepsWave__content::before{ content:none; }

  /* Título + texto */
  .nl-stepsWave--v2 .nl-stepsWave__t{
    margin:0;
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: -0.02em;
    color: rgba(12,18,28,.92);
  }

  .nl-stepsWave--v2 .nl-stepsWave__p{
    margin: 6px 0 0;
    font-size: 13.6px;
    line-height: 1.35;
    color: rgba(12,18,28,.66);
  }

  /* Watermark 1/2/3 */
  .nl-stepsWave--v2 .nl-stepsWave__item::before{
    content: attr(data-step);
    position:absolute;
    right: -10px;
    top: -26px;
    font-weight: 1000;
    font-size: 112px;
    line-height:1;
    letter-spacing:-0.06em;
    color: rgba(0,161,223,.10);
    text-shadow:
      0 18px 42px rgba(10,20,35,.06),
      0 10px 24px rgba(0,161,223,.08);
    pointer-events:none;
    z-index: 1;
  }

  /* CTA */
  .nl-stepsWave--v2 .nl-stepsWave__cta{
    margin-top: 12px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .nl-stepsWave--v2 .nl-stepsWave__cta > .nl-btn:only-child{
    grid-column: 1 / -1;
  }

  .nl-stepsWave--v2 .nl-stepsWave__cta .nl-btn{
    width:100%;
    justify-content:center;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(0,161,223,.18);
    box-shadow:
      0 14px 28px rgba(10,20,35,.08),
      0 10px 22px rgba(0,161,223,.10),
      inset 0 1px 0 rgba(255,255,255,.70);
  }

  /* Press feedback */
  @media (prefers-reduced-motion: no-preference){
    .nl-stepsWave--v2 .nl-stepsWave__item{
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .nl-stepsWave--v2 .nl-stepsWave__item:active{
      transform: scale(.992);
      box-shadow:
        0 16px 46px rgba(10,20,35,.12),
        inset 0 1px 0 rgba(255,255,255,.70);
    }
  }
}

@media (max-width: 820px){

  .nl-stepsWave--v2 .nl-stepsWave__pin{
    display: grid;
    place-items: center;
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin > svg,
  .nl-stepsWave--v2 .nl-stepsWave__pin > img{
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 !important;
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin > svg{
    overflow: visible;
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin > svg *{
    transform-box: fill-box;
    transform-origin: center;
  }

  .nl-stepsWave--v2{
    --icon-nudge-x: 0px;
    --icon-nudge-y: 0px;
  }

  .nl-stepsWave--v2 .nl-stepsWave__pin > svg,
  .nl-stepsWave--v2 .nl-stepsWave__pin > img{
    transform: translate(var(--icon-nudge-x), var(--icon-nudge-y));
  }
}

/* =========================================================
   14.2) STEPS — Header solo móvil + menos separación en desktop
   ========================================================= */
@media (min-width: 821px){
  .nl-stepsWave--v2 .nl-stepsWave__head{
    display: none !important;
  }

  .nl-stepsWave--v2{
    padding-top: 0 !important;
  }

  .nl-stepsWave--v2 .nl-stepsWave__stage{
    margin-top: 0 !important;
    padding-top: clamp(14px, 2.2vw, 28px);
  }
}