/* ==========================================================
   Nosotros: bento con las mismas formas lavanda de Mommy's tips,
   frase que se ilumina con el scroll y «Encuéntranos en».
   Se apoya en styles.css y product.css. Medidas en --u (1440).
   ========================================================== */

.nos-page .prod-body { position: relative; }

/* ---------- encabezado ---------- */
.nos { position: relative; z-index: 1; margin-top: calc(var(--u) * 60); }
.nos-head { position: absolute; left: calc(var(--u) * 104); top: calc(var(--u) * -6); width: calc(var(--u) * 700); z-index: 2; }
.nos-head h1 { margin: 0; line-height: 1; }
.nos-head .script { display: block; font: 400 calc(var(--u) * 100) / 1.1 var(--f-script); color: #8181d2; }
.nos-head p { margin: calc(var(--u) * 6) 0 0 calc(var(--u) * 4); font: 300 calc(var(--u) * 22) / 1.4 var(--f-body); color: var(--iris); }

/* ---------- bento ---------- */
.nos-group { position: relative; width: calc(var(--u) * 1337); height: calc(var(--u) * 1100); margin-left: calc(var(--u) * 53); }
.blob-svg { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); display: block; }
.npost { display: contents; }

.ncard {
  position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y));
  width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h));
  display: flex; overflow: hidden; isolation: isolate;
  background: #fffbfa; border-radius: calc(var(--u) * 30);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.na  { --x: 819; --y: 22;  --w: 496; --h: 245; flex-direction: column; padding: calc(var(--u) * 26) calc(var(--u) * 34); }
.nb  { --x: 22;  --y: 202; --w: 573; --h: 413; flex-direction: column; }
.nc  { --x: 757; --y: 393; --w: 559; --h: 387; flex-direction: row; }
.nd1 { --x: 22;  --y: 766; --w: 613; --h: 312; flex-direction: row; }
.nd2 { --x: 679; --y: 882; --w: 636; --h: 196; flex-direction: column; justify-content: center; padding: 0 calc(var(--u) * 36); }

/* foco de luz que sigue al cursor */
.ncard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(194, 191, 228, .42), transparent 55%);
}
.ncard.is-hot::before { opacity: 1; }
.ncard.is-hot { box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 40) rgba(79, 81, 137, .22); }

.n-heart { height: calc(var(--u) * 40); width: auto; align-self: flex-start; transform-origin: 50% 80%; }
.ncard:hover .n-heart { animation: beat-s 1.1s var(--ease-out) 1; }
@keyframes beat-s { 0% { scale: 1; } 30% { scale: 1.3; } 55% { scale: 1.05; } 75% { scale: 1.18; } 100% { scale: 1; } }
.n-statement { margin: calc(var(--u) * 12) 0 0; font: 600 calc(var(--u) * 31) / 1.22 var(--f-body); letter-spacing: -0.01em; color: var(--iris-deep); text-wrap: balance; }

.n-img { display: block; position: relative; overflow: hidden; flex: none; }
.n-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease-out); }
.n-img.contain { background: rgba(194, 191, 228, .4); }
.n-img.contain img { object-fit: contain; padding: calc(var(--u) * 10); }
.ncard:hover .n-img img { scale: 1.06; }
.nb .n-img { height: calc(var(--u) * 140); }
.nc .n-img { width: calc(var(--u) * 190); }
.nd1 .n-img { width: calc(var(--u) * 216); margin: calc(var(--u) * 18); border-radius: calc(var(--u) * 22); }

.n-text { min-width: 0; }
.nb .n-text { padding: calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * 20); }
.nc .n-text { padding: calc(var(--u) * 30) calc(var(--u) * 28); align-self: center; }
.nd1 .n-text { padding: calc(var(--u) * 26) calc(var(--u) * 28) calc(var(--u) * 26) calc(var(--u) * 6); align-self: center; }
.n-text h2 { margin: 0 0 calc(var(--u) * 8); font: 600 calc(var(--u) * 26) / 1.18 var(--f-body); letter-spacing: -0.01em; color: var(--iris-deep); text-wrap: balance; }
.n-text p { margin: 0; font: 300 calc(var(--u) * 19) / 1.5 var(--f-body); color: #44445c; }
.nd2 .n-text h2 { font-size: calc(var(--u) * 24); }

/* ---------- frase que se ilumina ---------- */
.nos-quote { position: relative; margin-top: calc(var(--u) * 100); }
.q-band { position: relative; left: calc(50% - 50vw); width: 100vw; height: calc(var(--u) * 360); display: grid; place-items: center; }
.q-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.q-text { position: relative; margin: 0; max-width: calc(var(--u) * 980); padding: 0 calc(var(--u) * 20); text-align: center; font: 500 calc(var(--u) * 58) / 1.2 var(--f-body); letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
.q-text .w { display: inline-block; opacity: calc(.3 + .7 * var(--on, 1)); translate: 0 calc((1 - var(--on, 1)) * var(--u) * 10); }
.q-seal {
  position: absolute; right: calc(var(--u) * 110); top: calc(var(--u) * -70); z-index: 3;
  width: calc(var(--u) * 200); height: calc(var(--u) * 200); border-radius: 50%; cursor: pointer;
  animation: spin 38s linear infinite; user-select: none; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(79, 81, 137, .26));
  transition: scale .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .q-seal:hover { scale: 1.08; } }

/* ---------- dónde encontrarnos ---------- */
.where { margin-top: calc(var(--u) * 100); text-align: center; }
.where h2 { margin: 0; font: 400 calc(var(--u) * 110) / 1.15 var(--f-script); color: var(--coral); }
.where-lead { margin: calc(var(--u) * 6) 0 0; font: 300 calc(var(--u) * 24) / 1.4 var(--f-body); color: var(--iris); }
.shops { display: flex; justify-content: center; gap: calc(var(--u) * 50); margin: calc(var(--u) * 44) 0 calc(var(--u) * 54); padding: 0; list-style: none; }
.shop a {
  position: relative; display: grid; justify-items: center; gap: calc(var(--u) * 28); width: calc(var(--u) * 430);
  padding: calc(var(--u) * 44) calc(var(--u) * 36) calc(var(--u) * 34); border-radius: calc(var(--u) * 40);
  background: #fffbfa; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(79, 81, 137, .14), 0 0 0 1px rgba(194, 191, 228, .55);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.shop-logo { display: grid; place-items: center; height: calc(var(--u) * 140); }
.shop-logo img { width: auto; max-width: none; height: calc(var(--u) * 126); transition: transform .6s var(--ease-out); }
.shop:last-child .shop-logo img { height: calc(var(--u) * 100); }
.shop-go { display: inline-flex; align-items: center; gap: calc(var(--u) * 14); font: 600 calc(var(--u) * 22) / 1.1 var(--f-body); color: var(--iris-deep); }
.shop .t-go {
  display: grid; place-items: center; flex: none; width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%;
  background: var(--lavender); color: var(--iris-deep); transition: background .3s var(--ease-out), color .3s var(--ease-out), translate .4s var(--ease-out);
}
.shop .t-go svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
@media (hover: hover) and (pointer: fine) {
  .shop a:hover { transform: translateY(calc(var(--u) * -8)); box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 48) rgba(79, 81, 137, .24), 0 0 0 1px rgba(194, 191, 228, .8); }
  .shop a:hover .shop-logo img { transform: scale(1.08) rotate(-3deg); }
  .shop a:hover .t-go { background: var(--coral); color: #fff; translate: calc(var(--u) * 4) 0; }
}

.pill-btn {
  display: inline-block; padding: calc(var(--u) * 16) calc(var(--u) * 36); border-radius: 999px;
  background: var(--lavender); color: var(--iris-deep); font: 800 calc(var(--u) * 22) / 1 var(--f-nav); letter-spacing: -0.02em;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out);
}
.pill-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pill-btn:hover { transform: translateY(calc(var(--u) * -3)); background: #b6b2de; } }

/* =========================================================
   MOVIMIENTO DE ENTRADA
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .nos-head[data-r] { translate: none; opacity: 1; }
  .js .nos-head .script { clip-path: inset(-12% 110% -12% -12%); transition: clip-path 1.5s var(--ease-out) .15s; }
  .js .nos-head.in .script { clip-path: inset(-12% -4% -12% -12%); }
  .js .nos-head p { opacity: 0; translate: 0 calc(var(--u) * 14); transition: opacity .8s var(--ease-out) .9s, translate .9s var(--ease-out) .9s; }
  .js .nos-head.in p { opacity: 1; translate: 0 0; }

  .js .blob-svg[data-r] { opacity: 0; translate: none; scale: .9; transition: opacity .7s var(--ease-out), scale 1s var(--ease-out); }
  .js .blob-svg.b1[data-r] { transform-origin: 100% 0; }
  .js .blob-svg.b2[data-r] { transform-origin: 100% 50%; }
  .js .blob-svg.b3[data-r] { transform-origin: 0 100%; }
  .js .blob-svg[data-r].in { opacity: 1; scale: 1; }

  .ncard.na  { --dx: 50;  --dy: -24; --rot: 1.5deg; }
  .ncard.nb  { --dx: -50; --dy: 28;  --rot: -1.5deg; }
  .ncard.nc  { --dx: 50;  --dy: 28;  --rot: 1.5deg; }
  .ncard.nd1 { --dx: -50; --dy: 34;  --rot: -1.2deg; }
  .ncard.nd2 { --dx: 60;  --dy: 22;  --rot: 1deg; }
  .js .ncard[data-r] {
    opacity: 0; scale: .94; rotate: var(--rot);
    translate: calc(var(--u) * var(--dx)) calc(var(--u) * var(--dy));
    transition:
      opacity .7s var(--ease-out) calc(var(--i, 0) * 110ms + 250ms),
      translate 1s var(--ease-out) calc(var(--i, 0) * 110ms + 250ms),
      scale 1s var(--ease-out) calc(var(--i, 0) * 110ms + 250ms),
      rotate 1s var(--ease-out) calc(var(--i, 0) * 110ms + 250ms),
      transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  }
  .js .ncard[data-r].in { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }
  .js .ncard .n-img, .js .ncard .n-heart, .js .ncard .n-statement, .js .ncard h2, .js .ncard .n-text p {
    opacity: 0; translate: 0 calc(var(--u) * 14); transition: opacity .7s var(--ease-out), translate .8s var(--ease-out);
  }
  .js .ncard.in .n-img, .js .ncard.in .n-heart, .js .ncard.in .n-statement, .js .ncard.in h2, .js .ncard.in .n-text p { opacity: 1; translate: 0 0; }
  .js .ncard .n-img, .js .ncard .n-heart { transition-delay: calc(var(--i, 0) * 110ms + 450ms); }
  .js .ncard h2, .js .ncard .n-statement { transition-delay: calc(var(--i, 0) * 110ms + 580ms); }
  .js .ncard .n-text p { transition-delay: calc(var(--i, 0) * 110ms + 700ms); }

  /* socios: cada tarjeta gira un poco al entrar */
  .js .shop[data-r] { translate: 0 calc(var(--u) * 40); scale: .92; rotate: calc((var(--i, 0) * 2 - 1) * -4deg); transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 140ms), translate 1s var(--ease-out) calc(var(--i, 0) * 140ms), scale 1s var(--ease-out) calc(var(--i, 0) * 140ms), rotate 1s var(--ease-out) calc(var(--i, 0) * 140ms); }
  .js .shop[data-r].in { translate: 0 0; scale: 1; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .q-seal { animation: none; } }

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 800px) {
  .nos { margin-top: 26px; }
  .nos-head { position: relative; left: auto; top: auto; width: auto; padding: 0 6px 18px; }
  .nos-head .script { font-size: 58px; }
  .nos-head p { font-size: 17px; margin-left: 2px; }

  .nos-group { width: 100%; height: auto; margin: 0; display: grid; gap: 14px; }
  .blob-svg { display: none; }
  .npost { display: grid; gap: 10px; padding: 12px; border-radius: 26px; background: var(--lavender); }
  .ncard { position: relative; left: auto; top: auto; width: auto; height: auto; border-radius: 20px; }
  .na { padding: 20px 22px; }
  .nb .n-img { height: 150px; }
  .nc .n-img { width: 34%; }
  .nd1 .n-img { width: 34%; margin: 12px; border-radius: 16px; }
  .nb .n-text, .nc .n-text, .nd1 .n-text { padding: 16px 18px 18px; }
  .nd1 .n-text { padding-left: 4px; }
  .nd2 { padding: 18px 22px; }
  .n-statement { font-size: 23px; }
  .n-text h2, .nd2 .n-text h2 { font-size: 20px; }
  .n-text p { font-size: 16px; }
  .n-heart { height: 30px; }

  .nos-quote { margin-top: 56px; }
  .q-band { height: 280px; }
  .q-text { font-size: 28px; max-width: 90%; }
  .q-seal { right: 16px; top: -56px; width: 108px; height: 108px; }

  .where { margin-top: 56px; }
  .where h2 { font-size: 66px; }
  .where-lead { font-size: 17px; padding: 0 18px; }
  .shops { flex-direction: column; align-items: center; gap: 18px; margin: 26px 0 32px; }
  .shop a { width: min(86vw, 340px); padding: 28px 24px 24px; gap: 18px; border-radius: 28px; }
  .shop-logo { height: 92px; }
  .shop-logo img { height: 84px; }
  .shop:last-child .shop-logo img { height: 68px; }
  .shop-go { font-size: 17px; }
  .shop .t-go { width: 36px; height: 36px; }
  .shop .t-go svg { width: 17px; height: 17px; }
  .pill-btn { padding: 14px 28px; font-size: 18px; }
}