/* =========================================================
   NIUVO POINTS — Programa de fidelidad de Niuvo Bebes
   Regla: 1 sol = 1 punto | 550 puntos = S/ 10 de descuento
   Prefijo de clases: .np-  (no choca con otros estilos)
   ========================================================= */
   :root {
       --np-lila: #E06CE6;
       --np-lila-osc: #B743C9;
       --np-rosa: #FC66C0;
       --np-celeste: #1AB0F8;
       --np-celeste-osc: #0A8FD4;
       --np-tinta: #2B2140;
       --np-gris: #6E6680;
       --np-crema: #FFF7FC;
       --np-lavanda: #F6EAFB;
       --np-cielo: #E8F6FF;
       --np-blanco: #FFFFFF;
       --np-borde: #EFE3F5;
       --np-degradado: linear-gradient(135deg, var(--np-lila) 0%, var(--np-rosa) 100%);
       --np-degradado-cielo: linear-gradient(135deg, var(--np-celeste) 0%, var(--np-lila) 100%);
       --np-sombra: 0 18px 40px -18px rgba(183, 67, 201, .35);
       --np-radio: 28px;
   }

   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0
   }

   body,
   input,
   button,
   textarea,
   select,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: var(--tipo-principal);
   }

   @font-face {
       font-family: 'Utendo';
       src: url('../fonts/Utendo-Regular.woff2') format('woff2');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'Utendo';
       src: url('../fonts/Utendo-Bold.woff2') format('woff2');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }

   body {
       font-family: 'Utendo', sans-serif;
       color: var(--np-tinta);
       background: var(--np-blanco);
       line-height: 1.5
   }

   .np-contenedor {
       width: min(1180px, 100% - 32px);
       margin-inline: auto
   }

   .np-titulo-seccion {
       font-family: 'Quicksand', sans-serif;
       font-weight: 700;
       font-size: clamp(28px, 4vw, 44px);
       text-align: center;
       letter-spacing: -.5px;
       margin-bottom: 12px
   }

   .np-titulo-seccion em {
       font-style: normal;
       background: var(--np-degradado);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent
   }

   .np-subtitulo {
       text-align: center;
       color: var(--np-gris);
       font-size: 17px;
       max-width: 620px;
       margin: 0 auto 48px
   }

   .np-nota {
       font-size: 13px;
       color: var(--np-gris);
       margin-top: 28px;
       line-height: 1.6
   }

   /* ---------- Botones ---------- */
   .np-boton {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 14px 30px;
       border-radius: 999px;
       font-family: 'Quicksand', sans-serif;
       font-weight: 700;
       font-size: 16px;
       text-decoration: none;
       cursor: pointer;
       border: 2px solid transparent;
       transition: transform .2s, box-shadow .2s, background .2s
   }

   .np-boton:hover {
       transform: translateY(-2px)
   }

   .np-boton--relleno {
       background: var(--np-degradado);
       color: var(--np-blanco);
       box-shadow: var(--np-sombra)
   }

   .np-boton--contorno {
       background: var(--np-blanco);
       color: var(--np-lila-osc);
       border-color: var(--np-lila)
   }

   .np-boton--contorno:hover {
       background: var(--np-lavanda)
   }

   .np-boton--blanco {
       background: var(--np-blanco);
       color: var(--np-lila-osc)
   }

   /* ---------- 1. Portada ---------- */
   .np-portada {
       padding: 40px 0
   }

   .np-portada__caja {
       position: relative;
       overflow: hidden;
       border-radius: var(--np-radio);
       background: linear-gradient(120deg, var(--np-lavanda) 0%, var(--np-crema) 50%, var(--np-cielo) 100%);
       display: grid;
       grid-template-columns: 1.1fr 1fr;
       align-items: center;
       gap: 24px;
       padding: 56px 64px;
       min-height: 460px
   }

   .np-portada__burbuja {
       position: absolute;
       border-radius: 50%;
       pointer-events: none
   }

   .np-portada__burbuja--1 {
       width: 140px;
       height: 140px;
       background: var(--np-celeste);
       opacity: .25;
       top: -30px;
       right: 38%
   }

   .np-portada__burbuja--2 {
       width: 90px;
       height: 90px;
       background: var(--np-rosa);
       opacity: .25;
       bottom: 30px;
       left: -20px
   }

   .np-portada__burbuja--3 {
       width: 120px;
       height: 120px;
       background-image: radial-gradient(var(--np-lila) 2px, transparent 2px);
       background-size: 12px 12px;
       opacity: .45;
       bottom: 40px;
       left: 42%
   }

   .np-portada__texto {
       position: relative;
       z-index: 1;
       text-align: center
   }

   .np-insignia {
       width: 230px;
       height: 230px;
       border-radius: 50%;
       background: var(--np-degradado);
       margin: 0 auto 28px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       color: var(--np-blanco);
       box-shadow: 0 24px 50px -16px rgba(224, 108, 230, .6);
       position: relative
   }

   .np-insignia::after {
       content: "";
       position: absolute;
       inset: -10px;
       border-radius: 50%;
       border: 2px dashed var(--np-lila);
       opacity: .45;
       animation: np-girar 30s linear infinite
   }

   .np-insignia__marca {
       font-family: 'Quicksand', sans-serif;
       font-weight: 700;
       font-size: 44px;
       line-height: 1
   }

   .np-insignia__puntos {
       font-family: 'Quicksand', sans-serif;
       font-weight: 600;
       font-size: 52px;
       line-height: 1;
       margin-top: 2px
   }

   .np-insignia__corazon {
       font-size: 22px;
       margin-top: 6px;
       opacity: .9
   }

   .np-portada__lema {
       font-size: 22px;
       font-weight: 600;
       max-width: 420px;
       margin: 0 auto 30px
   }

   .np-portada__acciones {
       display: flex;
       gap: 16px;
       justify-content: center;
       flex-wrap: wrap
   }

   .np-portada__imagen {
       position: relative;
       z-index: 1;
       display: flex;
       justify-content: center
   }

   .np-portada__imagen img {
       width: 100%;
       max-width: 820px;
       filter: drop-shadow(0 20px 30px rgba(183, 67, 201, .2));
       animation: np-flotar 5s ease-in-out infinite
   }

   /* ---------- 2. Cómo funciona ---------- */
   .np-pasos {
       padding: 72px 0
   }

   .np-pasos__rejilla {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px
   }

   .np-paso {
       background: var(--np-blanco);
       border: 1px solid var(--np-borde);
       border-radius: 24px;
       padding: 32px 24px;
       text-align: center;
       transition: transform .25s, box-shadow .25s
   }

   .np-paso:hover {
       transform: translateY(-6px);
       box-shadow: var(--np-sombra)
   }

   .np-paso__numero {
       font-family: 'Quicksand', sans-serif;
       font-weight: 700;
       font-size: 80px;
       line-height: 1;
       background: var(--np-degradado);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent
   }

   .np-paso:nth-child(even) .np-paso__numero {
       background: var(--np-degradado-cielo);
       -webkit-background-clip: text;
       background-clip: text
   }

   .np-paso__titulo {
       font-family: 'Quicksand', sans-serif;
       font-weight: 700;
       font-size: 22px;
       color: var(--np-lila-osc);
       margin: 10px 0 6px
   }

   .np-paso__texto {
       color: var(--np-gris)
   }

   .np-paso__texto strong {
       color: var(--np-tinta)
   }

   /* ---------- 3. Equivalencias + calculadora ---------- */
   .np-equivalencias {
       padding: 72px 0;
       background: var(--np-crema)
   }

   .np-equivalencias__rejilla {
       display: grid;
       grid-template-columns: 1fr 1.2fr;
       gap: 32px;
       align-items: start
   }

   .np-calculadora {
       background: var(--np-degradado);
       color: var(--np-blanco);
       border-radius: var(--np-radio);
       padding: 36px;
       box-shadow: var(--np-sombra)
   }

   .np-calculadora__titulo {
       font-family: 'Quicksand', sans-serif;
       font-size: 24px;
       font-weight: 700;
       margin-bottom: 6px
   }

   .np-calculadora__regla {
       opacity: .92;
       margin-bottom: 24px
   }

   .np-calculadora__etiqueta {
       font-weight: 700;
       font-size: 14px;
       display: block;
       margin-bottom: 8px
   }

   .np-calculadora__campo {
       width: 100%;
       padding: 16px 20px;
       border-radius: 16px;
       border: none;
       font-size: 20px;
       font-family: 'Nunito', sans-serif;
       font-weight: 700;
       color: var(--np-tinta);
       outline: none
   }

   .np-calculadora__campo:focus {
       box-shadow: 0 0 0 4px rgba(255, 255, 255, .45)
   }

   .np-calculadora__resultados {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 14px;
       margin-top: 20px
   }

   .np-calculadora__dato {
       background: rgba(255, 255, 255, .18);
       border-radius: 18px;
       padding: 16px
   }

   .np-calculadora__dato span {
       display: block;
       font-size: 13px;
       opacity: .9
   }

   .np-calculadora__dato strong {
       font-family: 'Quicksand', sans-serif;
       font-size: 28px
   }

   .np-calculadora__extra {
       margin-top: 14px;
       font-size: 14px;
       opacity: .95
   }

   .np-tabla {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       background: var(--np-blanco);
       border-radius: var(--np-radio);
       overflow: hidden;
       box-shadow: 0 10px 30px -18px rgba(43, 33, 64, .25)
   }

   .np-tabla th {
       background: var(--np-tinta);
       color: var(--np-blanco);
       font-family: 'Quicksand', sans-serif;
       font-size: 15px;
       padding: 16px;
       text-align: center
   }

   .np-tabla td {
       padding: 13px 16px;
       text-align: center;
       border-bottom: 1px solid var(--np-borde);
       font-weight: 600
   }

   .np-tabla tr:last-child td {
       border-bottom: none
   }

   .np-tabla tbody tr:hover td {
       background: var(--np-lavanda)
   }

   .np-tabla__destacada td {
       background: var(--np-cielo);
       color: var(--np-celeste-osc);
       font-weight: 800
   }

   .np-tabla__descuento {
       color: var(--np-lila-osc)
   }

   /* ---------- 4. Banner de canje ---------- */
   .np-canje {
       padding: 72px 0
   }

   .np-canje__caja {
       border-radius: var(--np-radio);
       background: var(--np-degradado-cielo);
       color: var(--np-blanco);
       display: grid;
       grid-template-columns: auto 1fr;
       gap: 40px;
       align-items: center;
       padding: 56px 64px;
       position: relative;
       overflow: hidden
   }

   .np-canje__caja::before {
       content: "";
       position: absolute;
       width: 320px;
       height: 320px;
       border-radius: 50%;
       background: rgba(255, 255, 255, .12);
       right: -80px;
       top: -120px
   }

   .np-canje__cupon {
       background: var(--np-blanco);
       color: var(--np-tinta);
       border-radius: 24px;
       padding: 28px 36px;
       text-align: center;
       position: relative;
       border: 3px dashed var(--np-rosa);
       transform: rotate(-4deg)
   }

   .np-canje__cupon small {
       display: block;
       color: var(--np-gris);
       font-weight: 700
   }

   .np-canje__cupon strong {
       font-family: 'Quicksand', sans-serif;
       font-size: 56px;
       line-height: 1;
       background: var(--np-degradado);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent
   }

   .np-canje__titulo {
       font-family: 'Quicksand', sans-serif;
       font-size: clamp(28px, 3.6vw, 42px);
       line-height: 1.15;
       margin-bottom: 12px
   }

   .np-canje__texto {
       font-size: 18px;
       opacity: .95;
       margin-bottom: 24px;
       max-width: 520px
   }

   .np-canje__texto,
   .np-canje__titulo,
   .np-canje .np-boton {
       position: relative
   }

   /* ---------- 5. Niveles ---------- */
   .np-niveles {
       padding: 72px 0 88px
   }

   .np-niveles__rejilla {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px
   }

   .np-nivel {
       border: 1px solid var(--np-borde);
       border-radius: var(--np-radio);
       padding: 34px 28px;
       background: var(--np-blanco);
       display: flex;
       flex-direction: column;
       position: relative;
       transition: transform .25s, box-shadow .25s
   }

   .np-nivel:hover {
       transform: translateY(-6px);
       box-shadow: var(--np-sombra)
   }

   .np-nivel--destacado {
       background: var(--np-tinta);
       color: var(--np-blanco);
       border-color: var(--np-tinta)
   }

   .np-nivel__etiqueta {
       position: absolute;
       top: -14px;
       left: 50%;
       transform: translateX(-50%);
       background: var(--np-degradado);
       color: var(--np-blanco);
       font-size: 12px;
       font-weight: 800;
       letter-spacing: 1px;
       padding: 6px 16px;
       border-radius: 999px;
       text-transform: uppercase;
       white-space: nowrap
   }

   .np-nivel__icono {
       width: 64px;
       height: 64px;
       border-radius: 20px;
       display: grid;
       place-items: center;
       font-size: 30px;
       margin-bottom: 18px
   }

   .np-nivel--pasitos .np-nivel__icono {
       background: var(--np-cielo)
   }

   .np-nivel--abrazos .np-nivel__icono {
       background: var(--np-lavanda)
   }

   .np-nivel--estrella .np-nivel__icono {
       background: rgba(255, 255, 255, .12)
   }

   .np-nivel__marca {
       font-family: 'Quicksand', sans-serif;
       font-weight: 600;
       font-size: 15px;
       color: var(--np-gris)
   }

   .np-nivel--destacado .np-nivel__marca {
       color: #C9BFDB
   }

   .np-nivel__nombre {
       font-family: 'Quicksand', sans-serif;
       font-weight: 700;
       font-size: 32px;
       line-height: 1.1;
       margin-bottom: 6px
   }

   .np-nivel--pasitos .np-nivel__nombre {
       color: var(--np-celeste-osc)
   }

   .np-nivel--abrazos .np-nivel__nombre {
       color: var(--np-lila-osc)
   }

   .np-nivel--estrella .np-nivel__nombre {
       background: var(--np-degradado);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent
   }

   .np-nivel__consumo {
       font-weight: 700;
       padding-bottom: 18px;
       margin-bottom: 18px;
       border-bottom: 1px solid var(--np-borde)
   }

   .np-nivel--destacado .np-nivel__consumo {
       border-color: rgba(255, 255, 255, .15)
   }

   .np-nivel__lista {
       list-style: none;
       display: grid;
       gap: 12px;
       flex: 1
   }

   .np-nivel__lista li {
       display: flex;
       gap: 10px;
       align-items: flex-start
   }

   .np-nivel__lista li::before {
       content: "";
       flex: 0 0 20px;
       height: 20px;
       border-radius: 50%;
       margin-top: 2px;
       background: var(--np-degradado) center/12px no-repeat;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--np-degradado)
   }

   .np-nivel__lista li.np-nivel__no {
       opacity: .4
   }

   .np-nivel__lista li.np-nivel__no::before {
       background: var(--np-borde)
   }

   /* ---------- Animaciones ---------- */
   @keyframes np-flotar {

       0%,
       100% {
           transform: translateY(0)
       }

       50% {
           transform: translateY(-12px)
       }
   }

   @keyframes np-girar {
       to {
           transform: rotate(360deg)
       }
   }

   @media (prefers-reduced-motion:reduce) {
       * {
           animation: none !important;
           transition: none !important
       }
   }

   /* ---------- Responsive ---------- */
   @media (max-width:960px) {
       .np-portada__caja {
           grid-template-columns: 1fr;
           padding: 44px 28px
       }

       .np-portada__imagen {
           order: -1
       }

       .np-portada__imagen img {
           max-width: 240px
       }

       .np-pasos__rejilla {
           grid-template-columns: repeat(2, 1fr)
       }

       .np-equivalencias__rejilla {
           grid-template-columns: 1fr
       }

       .np-canje__caja {
           grid-template-columns: 1fr;
           text-align: center;
           padding: 44px 28px
       }

       .np-canje__cupon {
           margin: 0 auto
       }

       .np-canje__texto {
           margin-inline: auto
       }

       .np-niveles__rejilla {
           grid-template-columns: 1fr;
           gap: 32px
       }
   }

   @media (max-width:560px) {
       .np-pasos__rejilla {
           grid-template-columns: 1fr
       }

       .np-insignia {
           width: 190px;
           height: 190px
       }

       .np-insignia__marca {
           font-size: 36px
       }

       .np-insignia__puntos {
           font-size: 42px
       }

       .np-calculadora {
           padding: 26px
       }

       .np-tabla th,
       .np-tabla td {
           padding: 11px 8px;
           font-size: 14px
       }
   }