/* Napsi — página de producto. Noche → amanecer. Colores de la app: tinta f1eeff, lavanda b3aaff, albaricoque ffc98b.
   Las secciones pegadas reciben --p desde js/site.js; los estados (Isla, avisos, etapas) los pone js/napsi.js. */

.np { --lav: #b3aaff; --apr: #ffc98b; --ink-n: #f4f1ff; --soft: #b9b4d8; --deep: #07081a;
  --spring: cubic-bezier(.34, 1.32, .5, 1); --rounded: ui-rounded, "SF Pro Rounded", "Inter Tight", system-ui, sans-serif; }
.np main { position: relative; overflow-x: clip; }
.np-soft { color: var(--soft); }
.np .kicker { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.01em; color: var(--apr); }
.np-grad { background: linear-gradient(180deg, #fff 25%, #cfc8ff 75%, #b3aaff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.np-grad-warm { background: linear-gradient(90deg, #b3aaff, #e5b5e9 45%, #ffc98b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Aurora: tres manchas de luz muy lentas detrás de todo */
.np-aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.np-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; will-change: transform;
  background: radial-gradient(closest-side, rgba(124, 104, 255, .22), transparent); animation: aur 26s ease-in-out infinite alternate; }
.np-aurora i:nth-child(1) { left: -25vmax; top: -30vmax; }
.np-aurora i:nth-child(2) { right: -30vmax; top: 10vh; background: radial-gradient(closest-side, rgba(255, 170, 200, .12), transparent); animation-duration: 32s; animation-delay: -10s; }
.np-aurora i:nth-child(3) { left: 10vw; bottom: -45vmax; background: radial-gradient(closest-side, rgba(255, 201, 139, .1), transparent); animation-duration: 38s; }
@keyframes aur { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.np main > section { position: relative; z-index: 1; }

/* ——— 1 · Apertura ——— */
.nh { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--nav) + 5vh) 22px 8vh; text-align: center; overflow: clip; }
.nh-text { display: grid; gap: 14px; justify-items: center;
  transform: translateY(calc(var(--p, 0) * -8vh)); opacity: calc(1 - var(--p, 0) * 1.4); }
.nh-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; color: var(--ink-n); }
.nh-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.nh-title { font-family: var(--display); font-weight: 700; font-size: clamp(46px, 8.4vw, 124px); line-height: .98; letter-spacing: -.045em; padding-bottom: .06em; }
.nh-art { position: relative; display: grid; place-items: center; min-height: 0;
  transform: translateY(calc(var(--p, 0) * -10vh)) scale(calc(1 + var(--p, 0) * .18)); opacity: calc(1 - var(--p, 0) * .85); }
.nh-moon { position: relative; z-index: 1; width: min(520px, 76vw, 46vh); animation: float 8s ease-in-out infinite; filter: drop-shadow(0 0 60px rgba(255, 210, 120, .28)) drop-shadow(0 40px 60px rgba(0, 0, 0, .5)); }
.nh-halo { position: absolute; width: min(820px, 120vw, 78vh); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .2), rgba(169, 155, 255, .16) 45%, transparent); animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
.nh-star, .nh-cloud { position: absolute; z-index: 2; pointer-events: none; }
.nh-star { width: clamp(30px, 3.4vw, 50px); animation: twinkle-big 4s ease-in-out infinite; }
.nh-star.s1 { left: calc(50% - min(330px, 44vw, 30vh)); top: 18%; }
.nh-star.s2 { left: calc(50% + min(290px, 40vw, 27vh)); top: 62%; width: clamp(22px, 2.4vw, 34px); animation-delay: -2s; }
@keyframes twinkle-big { 50% { transform: scale(.8) rotate(12deg); opacity: .6; } }
.nh-cloud { width: clamp(80px, 10vw, 150px); opacity: .9; animation: drift 14s ease-in-out infinite alternate; }
.nh-cloud.c1 { left: calc(50% + min(220px, 30vw, 22vh)); top: 6%; }
.nh-cloud.c2 { left: calc(50% - min(380px, 50vw, 34vh)); top: 68%; width: clamp(60px, 7vw, 110px); animation-delay: -7s; opacity: .7; }
@keyframes drift { to { transform: translateX(26px) translateY(-8px); } }
.nh-foot { display: grid; gap: 18px; justify-items: center; opacity: calc(1 - var(--p, 0) * 1.6); }
.nh-foot .lead { max-width: 560px; }
.nh .cue { position: absolute; left: 50%; bottom: 22px; width: 1.5px; height: 34px; background: rgba(255, 255, 255, .5); animation: cue 2.4s var(--ease) infinite; opacity: calc(1 - var(--p, 0) * 4); }

/* ——— 2 · Isla Dinámica ——— */
.ndi { height: 260vh; }
.ndi-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6vw;
  max-width: 1180px; margin: 0 auto; padding: var(--nav) 22px 0; }
.ndi-copy { position: relative; height: 380px; }
.ndi-step { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .8s var(--ease); pointer-events: none; }
.ndi-step.on { opacity: 1; transform: none; }
.ndi-step .lead { max-width: 440px; }

.ndi-phone { --W: min(500px, 46vw, calc((100svh - var(--nav) - 30px) * .82)); --u: calc(var(--W) / 460);
  width: var(--W); height: calc(100svh - var(--nav) - 10px); align-self: end; padding: calc(var(--u) * 10) calc(var(--u) * 10) 0;
  border-radius: calc(var(--u) * 72) calc(var(--u) * 72) 0 0; background: linear-gradient(90deg, #26252b, #3a3940 8%, #1d1c21 50%, #3a3940 92%, #26252b);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 -30px 120px -20px rgba(140, 120, 255, .35);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
  transform: translateY(calc((1 - var(--in, 1)) * 12vh)); }
.ndi-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 62) calc(var(--u) * 62) 0 0; background: #000; color: #fff;
  background: radial-gradient(120% 60% at 50% 0%, #3b2e86 0%, #1c1648 46%, #0b0c19 100%); font-family: var(--rounded); }
.ndi-status { position: absolute; top: calc(var(--u) * 21); right: calc(var(--u) * 32); display: flex; gap: calc(var(--u) * 6); align-items: center; color: #fff; }
.ndi-status svg { height: calc(var(--u) * 12); width: auto; fill: currentColor; }
.ndi-lock { position: absolute; left: 0; right: 0; top: calc(var(--u) * 70); text-align: center; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.ndi-date { font-size: calc(var(--u) * 20); font-weight: 600; opacity: .8; font-family: var(--display); letter-spacing: -.01em; }
.ndi-clock { font-size: calc(var(--u) * 104); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-family: var(--display);
  background: linear-gradient(180deg, #fff, #d9d3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.di { position: absolute; z-index: 3; left: 50%; top: calc(var(--u) * 11); transform: translateX(-50%); background: #000; overflow: hidden;
  width: calc(var(--u) * 126); height: calc(var(--u) * 37); border-radius: calc(var(--u) * 20);
  transition: width .75s var(--spring), height .75s var(--spring), border-radius .75s var(--spring); }
[data-island].is-compact .di, [data-island].is-card .di { width: calc(var(--u) * 204); }
[data-island].is-expanded .di { width: calc(var(--u) * 414); height: calc(var(--u) * 166); border-radius: calc(var(--u) * 48); }
.di-compact, .di-expanded { position: absolute; inset: 0; transition: opacity .3s; }
.di-compact { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 10); opacity: 0; }
.di-compact img { width: calc(var(--u) * 24); }
.di-compact span { font-size: calc(var(--u) * 15); font-weight: 600; color: var(--lav); font-variant-numeric: tabular-nums; }
[data-island].is-compact .di-compact, [data-island].is-card .di-compact { opacity: 1; transition-delay: .25s; }
.di-expanded { width: calc(var(--u) * 414); padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 16) calc(var(--u) * 16); opacity: 0; display: grid; align-content: space-between; }
[data-island].is-expanded .di-expanded { opacity: 1; transition: opacity .45s .3s; }
.di-top { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.di-scene { width: calc(var(--u) * 58); }
.di-who { display: grid; flex: 1; line-height: 1.15; }
.di-who b { font-size: calc(var(--u) * 12); letter-spacing: .08em; color: var(--lav); }
.di-who span { font-size: calc(var(--u) * 17); font-weight: 600; color: var(--ink-n); }
.di-time { display: grid; justify-items: end; line-height: 1.1; }
.di-time b { font-size: calc(var(--u) * 30); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-n); }
.di-time span { display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 13); font-weight: 600; color: var(--soft); }
.di-time img, .la-btn img { width: calc(var(--u) * 15); }
.di-bottom { display: flex; align-items: center; gap: calc(var(--u) * 14); }

.la-bar { position: relative; flex: 1; height: calc(var(--u) * 7); border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.la-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, .42) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--lav), var(--apr)); }
.la-btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 9) calc(var(--u) * 16); border-radius: 99px; flex: none;
  font-size: calc(var(--u) * 15); font-weight: 600; color: #fff;
  background: linear-gradient(180deg, rgba(255, 201, 139, .34), rgba(255, 201, 139, .12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.la-btn.small { font-size: calc(var(--u) * 14); padding: calc(var(--u) * 8) calc(var(--u) * 14); }

.la-card { position: absolute; z-index: 2; left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--u) * 268);
  display: grid; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16) calc(var(--u) * 18); border-radius: calc(var(--u) * 30);
  background: linear-gradient(180deg, #403073, #1a143d 60%, #0b0c19); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(calc(var(--u) * 60)) scale(.94); transition: opacity .6s var(--ease), transform .9s var(--spring); }
[data-island].is-card .la-card { opacity: 1; transform: none; }
.la-row { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.la-scene { width: calc(var(--u) * 80); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
.la-main { flex: 1; line-height: 1.05; }
.la-eyebrow { font-size: calc(var(--u) * 12); font-weight: 700; letter-spacing: .09em; color: var(--lav); }
.la-elapsed { font-size: calc(var(--u) * 42); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-n); }
.la-wake { display: grid; justify-items: end; align-self: start; padding-top: calc(var(--u) * 12); line-height: 1.1; }
.la-wake span { font-size: calc(var(--u) * 11); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.la-wake b { font-size: calc(var(--u) * 22); font-weight: 600; color: var(--apr); }
.la-progress { flex: 1; display: grid; gap: calc(var(--u) * 6); }
.la-progress span { font-size: calc(var(--u) * 13); font-weight: 500; color: var(--soft); }

/* Isla en miniatura (portada): la misma Isla, en un teléfono más bajo que no depende de la pantalla */
.ndi-phone.mini { --W: min(440px, 84vw); --u: calc(var(--W) / 460); height: calc(var(--u) * 330); align-self: auto; transform: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }

/* ——— 3 · Recorrido ——— */
.tour { position: relative; height: 360vh; }
.tour-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
  max-width: 1120px; margin: 0 auto; padding: var(--nav) 22px 0; }
.tour-copy { position: relative; height: 360px; }
.tour-step { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .8s var(--ease); pointer-events: none; }
.tour-step.on { opacity: 1; transform: none; }
.tour-step .lead { max-width: 430px; }
.tour-phone { position: relative; display: grid; justify-items: center; gap: 22px; }
.tour-phone .iphone.portrait { --w: min(330px, 30vw, 34vh); transform: none; z-index: 1; }
.tour-glow { position: absolute; left: 50%; top: 45%; width: min(640px, 70vw, 70vh); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--g, rgba(169, 155, 255, .4)), transparent); transition: background 1s; }
.tour[data-step="1"] .tour-glow { --g: rgba(255, 201, 139, .3); }
.tour[data-step="2"] .tour-glow { --g: rgba(120, 220, 200, .24); }
.tour[data-step="3"] .tour-glow { --g: rgba(255, 150, 190, .26); }
.tour-screen { opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.tour-screen.on { opacity: 1; transform: none; }
.tour-dots { display: flex; gap: 8px; z-index: 1; }
.tour-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .25); transition: width .5s var(--ease), background .5s; }
.tour-dots i.on { width: 22px; background: #fff; }
.tour-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tour-deco .fl { position: absolute; width: clamp(70px, 8vw, 120px); opacity: 0; transform: translateY(30px) scale(.6) rotate(-10deg);
  transition: opacity .6s var(--ease), transform .9s var(--spring); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); }
.tour-deco .f-a { left: calc(50% + min(150px, 13vw, 15vh)); top: 6%; }
.tour-deco .f-b { left: calc(50% - min(150px, 13vw, 15vh) - clamp(70px, 8vw, 120px)); top: 58%; transition-delay: .08s; }
.tour-deco.on .fl { opacity: 1; transform: none; }
.tour-deco.on .fl.f-a { animation: float 6s ease-in-out .9s infinite; }
.tour-deco .np-banner { position: absolute; left: 50%; top: 13%; width: min(360px, 34vw, 40vh); transform: translate(-50%, -20px) scale(.92); opacity: 0;
  transition: opacity .6s var(--ease) .2s, transform .9s var(--spring) .2s; }
.tour-deco.on .np-banner { opacity: 1; transform: translate(-50%, 0); }
.d0 .fl.f-a { left: calc(50% - min(150px, 13vw, 15vh) - clamp(70px, 8vw, 120px)); top: 54%; }

/* Aviso al estilo de iOS */
.np-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 22px; text-align: left;
  background: rgba(46, 42, 78, .72); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px rgba(0, 0, 0, .4); color: #fff; }
.np-banner > img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.np-banner > div { flex: 1; min-width: 0; line-height: 1.25; }
.nb-head { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .04em; opacity: .6; }
.nb-head b { font-weight: 600; }
.nb-title { font-size: 15px; font-weight: 600; }
.nb-body { font-size: 14px; opacity: .78; }

/* ——— 4 · Cuadrícula ——— */
.nb { max-width: 1180px; margin: 0 auto; padding: 18vh 22px 12vh; }
.nb-head-text { text-align: center; margin-bottom: 64px; }
.nb-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.card { position: relative; overflow: hidden; border-radius: 30px; padding: 30px; display: grid; align-content: space-between; gap: 22px; min-height: 300px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); grid-column: span 4;
  transition: transform .6s var(--ease), box-shadow .6s, opacity 1s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px rgba(0, 0, 0, .3); }
.card[data-reveal] { transform: translateY(40px) scale(.98); }
.card[data-reveal].in { transform: none; }
.card h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink-n); }
.card-text p { margin-top: 8px; color: var(--soft); font-size: 16px; line-height: 1.45; max-width: 440px; }
.card .icons { display: flex; gap: 10px; }
.card .icons img { width: 92px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .4)); }
.card .big { font-family: var(--display); font-weight: 700; font-size: clamp(54px, 5.4vw, 76px); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff, var(--lav)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card .big small { font-size: .42em; letter-spacing: -.02em; }
.c-widgets { grid-column: span 7; min-height: 470px; background: radial-gradient(90% 70% at 30% 10%, rgba(126, 104, 255, .35), transparent), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.c-siri { grid-column: span 5; min-height: 470px; }
.c-growth, .c-report { grid-column: span 6; min-height: 400px; }
.c-feed { background: radial-gradient(80% 60% at 20% 0%, rgba(255, 201, 139, .16), transparent), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.c-meds { background: radial-gradient(80% 60% at 20% 0%, rgba(255, 130, 130, .14), transparent), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }

.wall { position: relative; display: grid; grid-template-columns: 1.75fr 1fr; gap: 16px; align-items: start; font-family: var(--rounded); }
.wall > div { border-radius: 24px; padding: 16px; color: #fff; background: linear-gradient(180deg, #45357a, #1c1642 70%, #11102a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 40px rgba(0, 0, 0, .35); }
.w-med { display: flex; align-items: center; gap: 12px; aspect-ratio: 2.12; background: linear-gradient(180deg, #ffcf9a 0%, #f5a7b8 45%, #7f6bd8 100%) !important; }
.w-med img { width: 44%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); }
.w-eye { font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .75; }
.w-big { font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.w-sub { font-size: 12.5px; font-weight: 600; opacity: .85; margin-top: 4px; }
.w-small { position: relative; aspect-ratio: 1; }
.w-small img { position: absolute; right: 10px; bottom: 10px; width: 36%; }
.w-acc { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, .05) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
.w-acc .ring { position: relative; width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--lav) 0 42%, rgba(255, 255, 255, .14) 42% 100%); }
.w-acc .ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #17142f; }
.w-acc .ring img { position: relative; width: 30px; }
.w-acc .rect { line-height: 1.2; font-size: 14px; }
.w-acc .rect b { display: block; font-size: 12px; letter-spacing: .06em; opacity: .7; }
.w-acc .lock-time { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -.03em; opacity: .9; }

.ctl { display: grid; gap: 16px; justify-items: start; }
.ctl-tile { display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px; border-radius: 40px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ctl-btn { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--lav); box-shadow: 0 10px 30px rgba(179, 170, 255, .45); }
.ctl-btn img { width: 46px; }
.ctl-tile p { display: grid; line-height: 1.2; }
.ctl-tile b { font-size: 19px; font-weight: 600; color: var(--ink-n); }
.ctl-tile span { font-size: 14px; color: var(--soft); }
.c-siri.in .ctl-btn { animation: tapme 3.6s var(--ease) 1s infinite; }
@keyframes tapme { 0%, 70%, 100% { transform: none; } 76% { transform: scale(.9); } 84% { transform: scale(1.04); } }
.ctl-reply { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 22px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 15px; line-height: 1.35; max-width: 400px; }
.ctl-reply img { width: 34px; height: 34px; border-radius: 8px; }

.c-meds .np-banner.mini { padding: 10px 12px; border-radius: 18px; }
.c-meds .np-banner.mini > img { width: 30px; height: 30px; border-radius: 7px; }
.c-meds .icons img { width: 74px; }

.pct { width: 100%; height: auto; overflow: visible; }
.pct .band { fill: rgba(179, 170, 255, .08); }
.pct .p { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; stroke-dasharray: 4 6; }
.pct .p.mid { stroke: rgba(255, 255, 255, .35); stroke-dasharray: none; }
.pct .me { fill: none; stroke: var(--apr); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease) .3s; }
.pct text { fill: rgba(255, 255, 255, .45); font: 600 10px var(--text); }
.pct .tag { fill: var(--apr); font-size: 12px; opacity: 0; transition: opacity .4s 2.3s; }
.c-growth.in .tag { opacity: 1; }
.pct .dot { fill: var(--apr); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--spring) 2.1s, opacity .3s 2.1s; }
.c-growth.in .me { stroke-dashoffset: 0; }
.c-growth.in .dot { opacity: 1; transform: none; }

.pdf { position: relative; justify-self: center; width: min(100%, 360px); padding: 22px 22px 20px; border-radius: 14px; background: #fbfaff; color: #2b2550;
  transform: rotate(-2.5deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); font-family: var(--text); }
.pdf-k { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #7b6fd6; }
.pdf-t { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.pdf-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.pdf-figs div { display: grid; line-height: 1.15; }
.pdf-figs b { font-family: var(--display); font-size: 19px; }
.pdf-figs span { font-size: 11px; color: #7a7499; }
.pdf-bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.pdf-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #b3aaff, #8a7cf0); }
.pdf > img { position: absolute; right: -26px; top: -30px; width: 84px; transform: rotate(8deg); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }

.c-alerts .ring { transform-origin: 50% 10%; }
.c-alerts.in .ring { animation: ring 3.2s ease-in-out 1s infinite; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); } 76% { transform: rotate(8deg); } 82% { transform: rotate(-4deg); } }
.c-babies .icons img { width: 120px; margin-right: -24px; }
.c-memories .icons img { width: 78px; }

/* ——— 5 · Familia ——— */
.nf { height: 220vh; }
.nf-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 4vw;
  max-width: 1180px; margin: 0 auto; padding: var(--nav) 22px 0; }
.nf-copy { display: grid; gap: 16px; }
.nf-copy .lead { max-width: 480px; }
.nf-copy .h-xl { font-size: clamp(42px, 5.6vw, 84px); }
.nf-stage { position: relative; display: grid; place-items: center; }
.nf-glow { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 140, .28), rgba(169, 155, 255, .12) 55%, transparent); }
.nf-art { position: relative; width: min(540px, 100%, 62vh); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45));
  transform: scale(calc(.92 + var(--p, 0) * .08)); }
.nf-art { margin-right: 22%; }
.nf-stack { position: absolute; right: -2%; bottom: 4%; width: min(360px, 66%); display: grid; gap: 10px; }
.nf-stack .np-banner { opacity: 0; transform: translateY(-24px) scale(.94); transition: opacity .5s var(--ease), transform .8s var(--spring); }
.nf-stack .np-banner.on { opacity: 1; transform: none; }

/* ——— 6 · Crece contigo: una tira ——— */
.ng2 { max-width: 1180px; margin: 0 auto; padding: 16vh 22px 4vh; text-align: center; }
.ng2-head { display: grid; gap: 12px; justify-items: center; }
.ng2-head .lead { max-width: 560px; }
.ng2-row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; margin-top: 56px; padding-bottom: 8px; }
.ng2-row::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(179, 170, 255, .1), var(--lav), var(--apr), rgba(255, 201, 139, .1)); }
.ng2-row figure { display: grid; gap: 12px; justify-items: center; }
.ng2-row img { width: 100%; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45)); transition: transform .6s var(--spring); }
.ng2-row figure:hover img { transform: translateY(-8px) scale(1.04); }
.ng2-row figcaption { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink-n); padding-bottom: 18px; position: relative; }
.ng2-row figcaption::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 201, 139, .2); }

/* ——— 7 · Privacidad ——— */
.np-priv { max-width: 1080px; margin: 0 auto; padding: 18vh 22px 10vh; text-align: center; }
.np-priv-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 70px; }
.np-priv-cols div { display: grid; gap: 10px; justify-items: center; }
.np-priv-cols img { width: 96px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4)); margin-bottom: 6px; }
.np-priv-cols h3 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.np-priv-cols p { color: var(--soft); max-width: 300px; }

/* ——— 8 · Amanecer ——— */
.np-dawn { padding: 16vh 22px 22vh; text-align: center; display: grid; gap: 14px; justify-items: center;
  background: radial-gradient(90% 60% at 50% 100%, rgba(255, 190, 130, .4), rgba(255, 140, 170, .14) 45%, transparent 75%); }
.np-icon { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); margin-bottom: 10px; }
.np-dawn .actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.np .footer { position: relative; z-index: 1; }

/* ——— Móvil ——— */
@media (max-width: 900px) {
  .ndi { height: 250vh; }
  .ndi-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; padding-top: calc(var(--nav) + 12px); }
  .ndi-copy { height: 200px; text-align: center; }
  .ndi-step { align-content: start; justify-items: center; gap: 8px; }
  .ndi-step .h-l { font-size: clamp(28px, 7.6vw, 40px); }
  .ndi-step .lead { font-size: 16px; }
  .ndi-phone { --W: min(92vw, 440px); justify-self: center; height: 100%; }

  .tour { height: 380vh; }
  .tour-sticky { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; padding-top: calc(var(--nav) + 8px); }
  .tour-phone { order: -1; }
  .tour-phone .iphone.portrait { --w: min(220px, 52vw, 26vh); }
  .tour-copy { height: 200px; text-align: center; }
  .tour-step { justify-items: center; align-content: start; gap: 8px; }
  .tour-step .h-l { font-size: clamp(28px, 7.5vw, 40px); }
  .tour-step .lead { font-size: 16px; }
  .tour-deco .fl { width: 64px; }
  .tour-deco .f-a { left: calc(50% + min(110px, 26vw, 13vh) - 10px); }
  .tour-deco .f-b, .d0 .fl.f-a { left: calc(50% - min(110px, 26vw, 13vh) - 54px); }
  .tour-deco .np-banner { width: min(330px, 86vw); top: 8%; }

  .nb { padding-top: 12vh; }
  .nb-head-text { margin-bottom: 36px; }
  .nb-grid { grid-template-columns: 1fr; gap: 14px; }
  .card, .c-widgets, .c-siri, .c-growth, .c-report { grid-column: auto; min-height: 0; padding: 24px; }
  .card .icons img { width: 72px; }
  .wall { gap: 10px; }
  .wall > div { padding: 12px; border-radius: 20px; }
  .w-big { font-size: 24px; }
  .w-eye { font-size: 10px; }
  .w-sub { font-size: 11px; }
  .w-acc .lock-time { font-size: 30px; }

  .nf { height: 210vh; }
  .nf-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; padding-top: calc(var(--nav) + 18px); text-align: center; }
  .nf-copy { justify-items: center; gap: 10px; }
  .nf-copy .h-xl { font-size: clamp(34px, 9vw, 52px); }
  .nf-copy .lead { font-size: 16px; }
  .nf-stage { align-self: start; margin-top: 3vh; }
  .nf-art { width: min(360px, 76vw, 34vh); margin-right: 0; }
  .nf-stack { top: 58%; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); width: min(360px, 92vw); }
  .nf-stack .np-banner { padding: 10px 12px; }

  .ng2-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; margin: 36px -22px 0; padding: 0 22px 8px; scrollbar-width: none; }
  .ng2-row::-webkit-scrollbar { display: none; }
  .ng2-row figure { flex: 0 0 52vw; scroll-snap-align: center; }
  .ng2-row::after { left: 22px; right: auto; width: calc(52vw * 5 + 16px); }
  .np-priv-cols { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .nh-title { font-size: clamp(44px, 12.5vw, 80px); }
}
.di-time i { font-style: normal; }