/* ==========================================================
   Embajadoras · Mommy's Love Collective
   Mismo lenguaje que Nosotros y Mommy's tips: marcos lavanda con
   tarjeta interior, banda rasgada, títulos en script.
   Se apoya en styles.css y product.css. Medidas en --u (1440).
   ========================================================== */

.emb-page .prod-body { position: relative; }
[hidden] { display: none !important; }

/* ---------- botón principal ---------- */
.solid-btn {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 16) calc(var(--u) * 34); border: 0; border-radius: 999px; cursor: pointer;
  background: var(--iris-deep); color: #fff; font: 800 calc(var(--u) * 22) / 1 var(--f-nav); letter-spacing: -0.02em;
  transition: transform .35s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.solid-btn span { transition: translate .35s var(--ease-out); }
.solid-btn.big { padding: calc(var(--u) * 20) calc(var(--u) * 44); font-size: calc(var(--u) * 24); }
.solid-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .solid-btn:hover { transform: translateY(calc(var(--u) * -3)); background: #3e407a; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(79, 81, 137, .32); }
  .solid-btn:hover span { translate: calc(var(--u) * 6) 0; }
}

/* ---------- presentación ---------- */
.emb { position: relative; z-index: 1; margin-top: calc(var(--u) * 60); }
.emb-head { margin: 0 0 calc(var(--u) * 26) calc(var(--u) * 104); }
.emb-head h1 { margin: 0; line-height: 1; }
.emb-head .script { display: block; font: 400 calc(var(--u) * 100) / 1.1 var(--f-script); color: #8181d2; }
.emb-head .sub { display: block; margin: calc(var(--u) * 4) 0 0 calc(var(--u) * 6); font: 500 calc(var(--u) * 26) / 1.2 var(--f-body); letter-spacing: .02em; color: var(--iris); }

.emb-hero { position: relative; width: calc(var(--u) * 1337); height: calc(var(--u) * 560); margin-left: calc(var(--u) * 53); }
.emb-hero .frame { position: absolute; inset: 0; background: var(--lavender); border-radius: calc(var(--u) * 50); }
.hero-card { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 22); width: calc(var(--u) * 1293); height: calc(var(--u) * 516); display: flex; overflow: hidden; background: #fffbfa; border-radius: calc(var(--u) * 30); }
.hero-text { flex: 1; min-width: 0; padding: calc(var(--u) * 40) calc(var(--u) * 56); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-text h2 { margin: 0 0 calc(var(--u) * 20); font: 600 calc(var(--u) * 44) / 1.14 var(--f-body); letter-spacing: -0.015em; color: var(--iris-deep); text-wrap: balance; max-width: calc(var(--u) * 700); }
.hero-text p { margin: 0 0 calc(var(--u) * 14); max-width: calc(var(--u) * 700); font: 300 calc(var(--u) * 20) / 1.55 var(--f-body); color: #44445c; }
.hero-text .solid-btn { margin-top: calc(var(--u) * 14); }
.hero-img { flex: none; width: calc(var(--u) * 420); margin: calc(var(--u) * 18); border-radius: calc(var(--u) * 24); overflow: hidden; background: var(--lavender); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease-out); }
.hero-card:hover .hero-img img { scale: 1.05; }
.hero-seal {
  position: absolute; right: calc(var(--u) * 44); top: calc(var(--u) * -62); z-index: 3;
  width: calc(var(--u) * 190); height: calc(var(--u) * 190); border-radius: 50%; cursor: pointer;
  animation: spin 38s linear infinite; 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) { .hero-seal:hover { scale: 1.08; } }

/* ---------- banda rasgada (títulos de sección) ---------- */
.e-band { position: relative; left: calc(50% - 50vw); width: 100vw; height: calc(var(--u) * 280); display: grid; place-items: center; }
.e-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.e-band h2 { position: relative; margin: 0; max-width: calc(var(--u) * 1100); padding: 0 calc(var(--u) * 40); text-align: center; font: 500 calc(var(--u) * 46) / 1.2 var(--f-body); color: #fff; text-wrap: balance; }

/* ---------- lo que vivirás ---------- */
.perks-sec { margin-top: calc(var(--u) * 100); }
.perks-lead { margin: calc(var(--u) * 30) 0 0; text-align: center; font: 300 calc(var(--u) * 26) / 1.4 var(--f-body); color: var(--iris-deep); }
.perks { width: calc(var(--u) * 1337); margin: calc(var(--u) * 40) 0 0 calc(var(--u) * 53); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 26); }
.perk { background: var(--lavender); border-radius: calc(var(--u) * 44); padding: calc(var(--u) * 14); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.perk.p5 { grid-column: span 2; }
.perk-in { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; gap: calc(var(--u) * 22); height: 100%; min-height: calc(var(--u) * 190); padding: calc(var(--u) * 30) calc(var(--u) * 32) calc(var(--u) * 34); background: #fffbfa; border-radius: calc(var(--u) * 32); }
.perk-in::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, .45), transparent 58%); }
.perk.is-hot { box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 40) rgba(79, 81, 137, .22); }
.perk.is-hot .perk-in::before { opacity: 1; }
.num { position: relative; flex: none; width: calc(var(--u) * 64); height: calc(var(--u) * 56); transition: transform .5s var(--ease-out); }
.num img { position: absolute; }
.num > img:first-child { inset: 0; width: 100%; height: 100%; }
.num .b2 { left: calc(var(--u) * 5); top: calc(var(--u) * 4.5); width: calc(var(--u) * 55); height: calc(var(--u) * 47); }
.num b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 calc(var(--u) * 30) / 1 var(--f-body); color: #fff; }
.perk:hover .num { transform: rotate(-8deg) scale(1.12); }
.perk-text { padding-top: calc(var(--u) * 4); font: 400 calc(var(--u) * 22) / 1.42 var(--f-body); color: #3d3f6e; }

/* ---------- quién puede ser parte ---------- */
.who { margin-top: calc(var(--u) * 100); }
.who-grid { width: calc(var(--u) * 1337); margin-left: calc(var(--u) * 53); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 30); align-items: stretch; }
.who-card { background: var(--lavender); border-radius: calc(var(--u) * 50); padding: calc(var(--u) * 14); }
.who-card > * { position: relative; }
.who-card { display: block; }
.who-card .inner, .who-card { }
.who-card h2 { margin: 0; padding: calc(var(--u) * 40) calc(var(--u) * 48) 0; background: #fffbfa; border-radius: calc(var(--u) * 36) calc(var(--u) * 36) 0 0; }
.who-card .script { display: block; font: 400 calc(var(--u) * 64) / 1.15 var(--f-script); color: #8181d2; }
.who-lead { margin: 0; padding: calc(var(--u) * 8) calc(var(--u) * 48) 0; background: #fffbfa; font: 500 calc(var(--u) * 24) / 1.3 var(--f-body); color: var(--iris-deep); }
.checks { margin: 0; padding: calc(var(--u) * 22) calc(var(--u) * 48) calc(var(--u) * 44); list-style: none; display: grid; gap: calc(var(--u) * 20); background: #fffbfa; border-radius: 0 0 calc(var(--u) * 36) calc(var(--u) * 36); }
.checks li { display: flex; align-items: center; gap: calc(var(--u) * 18); font: 400 calc(var(--u) * 22) / 1.35 var(--f-body); color: #3d3f6e; }
.tick { flex: none; display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: var(--lavender); color: var(--iris-deep); transition: background .35s var(--ease-out), color .35s var(--ease-out), scale .35s var(--ease-out); }
.tick svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.checks li:hover .tick { background: var(--coral); color: #fff; scale: 1.12; }

.who-note { position: relative; overflow: hidden; display: grid; align-content: center; padding: calc(var(--u) * 64) calc(var(--u) * 60); background: #f7d9d3; border-radius: calc(var(--u) * 50); }
.who-note p { position: relative; margin: 0; font: 500 calc(var(--u) * 42) / 1.25 var(--f-body); letter-spacing: -0.012em; color: var(--iris-deep); text-wrap: balance; }
.n-deco { position: absolute; right: calc(var(--u) * 40); top: calc(var(--u) * 34); height: calc(var(--u) * 64); width: auto; rotate: 14deg; opacity: .9; animation: beat-s 2.8s var(--ease-out) infinite; }
@keyframes beat-s { 0%, 55%, 100% { scale: 1; } 12% { scale: 1.22; } 26% { scale: 1.02; } 38% { scale: 1.14; } }
[data-words] .w { display: inline-block; opacity: calc(.28 + .72 * var(--on, 1)); translate: 0 calc((1 - var(--on, 1)) * var(--u) * 8); }

/* ---------- registro ---------- */
.join { margin-top: calc(var(--u) * 100); }
.form-wrap { width: calc(var(--u) * 1100); margin: calc(var(--u) * 50) auto 0; }
.form-frame { background: var(--lavender); border-radius: calc(var(--u) * 50); padding: calc(var(--u) * 14); }
.form { background: #fffbfa; border-radius: calc(var(--u) * 38); padding: calc(var(--u) * 52) calc(var(--u) * 56) calc(var(--u) * 46); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 26) calc(var(--u) * 30); }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; margin: 0 0 calc(var(--u) * 10) calc(var(--u) * 12); font: 600 calc(var(--u) * 21) / 1.25 var(--f-body); color: var(--iris-deep); }
.req { color: #d9585f; }
.control { position: relative; }
.control input:not([type="checkbox"]), .control select, .control textarea {
  width: 100%; height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 54) 0 calc(var(--u) * 26);
  font: 400 calc(var(--u) * 20) / 1.3 var(--f-body); color: var(--iris-deep);
  background: var(--lavender); border: 2px solid transparent; border-radius: 999px; outline: none; appearance: none;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.control textarea { height: auto; min-height: calc(var(--u) * 150); padding: calc(var(--u) * 20) calc(var(--u) * 26); border-radius: calc(var(--u) * 30); resize: vertical; }
.control ::placeholder { color: #565893; opacity: 1; }
.control select:invalid { color: #565893; }
.control:focus-within input, .control:focus-within select, .control:focus-within textarea { background: #fff; border-color: var(--coral); box-shadow: 0 0 0 calc(var(--u) * 5) rgba(255, 131, 139, .25); }
.caret { position: absolute; right: calc(var(--u) * 52); top: 50%; translate: 0 -50%; width: calc(var(--u) * 16); height: calc(var(--u) * 11); color: var(--iris-deep); pointer-events: none; }
.control .ok { position: absolute; right: calc(var(--u) * 22); top: 50%; translate: 0 -50%; height: calc(var(--u) * 24); width: auto; opacity: 0; scale: .3; pointer-events: none; transition: opacity .3s var(--ease-out), scale .45s var(--ease-out); }
.control.select .ok { right: calc(var(--u) * 84); }
.control.area .ok { top: calc(var(--u) * 30); translate: 0 0; }
.control:has(input:not(:placeholder-shown):user-valid) .ok,
.control:has(select:user-valid) .ok,
.control:has(textarea:not(:placeholder-shown):user-valid) .ok { opacity: 1; scale: 1; }
.err { display: none; margin: calc(var(--u) * 8) 0 0 calc(var(--u) * 12); font: 500 calc(var(--u) * 16) / 1.3 var(--f-body); color: #b3303a; }
.field:has(:user-invalid) .err, .form.was-submitted .field:has(:invalid) .err { display: block; }
.field:has(:user-invalid) .control input, .field:has(:user-invalid) .control select, .field:has(:user-invalid) .control textarea,
.form.was-submitted .field:has(:invalid) .control input, .form.was-submitted .field:has(:invalid) .control select, .form.was-submitted .field:has(:invalid) .control textarea { border-color: #d9585f; }
.count { margin: calc(var(--u) * 6) calc(var(--u) * 12) 0 0; text-align: right; font: 400 calc(var(--u) * 14) / 1 var(--f-body); color: #6d6d86; }

.agree { display: grid; gap: calc(var(--u) * 14); margin: calc(var(--u) * 28) 0 0 calc(var(--u) * 8); }
.box { display: flex; align-items: center; gap: calc(var(--u) * 14); cursor: pointer; font: 400 calc(var(--u) * 19) / 1.35 var(--f-body); color: #3d3f6e; }
.box input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.box .mark { flex: none; display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 10); background: var(--lavender); color: transparent; transition: background .25s var(--ease-out), color .25s var(--ease-out), scale .35s var(--ease-out), box-shadow .25s; }
.box .mark svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.box input:checked + .mark { background: var(--iris-deep); color: #fff; scale: 1.08; }
.box input:focus-visible + .mark { box-shadow: 0 0 0 calc(var(--u) * 5) rgba(255, 131, 139, .35); }
.box a { color: var(--iris-deep); text-decoration: underline; text-underline-offset: 3px; }
.form.was-submitted .box:has(input:invalid) .mark { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(217, 88, 95, .45); }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 14) calc(var(--u) * 28); margin-top: calc(var(--u) * 32); }
.note { margin: 0; font: 300 calc(var(--u) * 17) / 1.4 var(--f-body); color: #6d6d86; }

.done { display: grid; justify-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 64) calc(var(--u) * 40); text-align: center; background: #fffbfa; border-radius: calc(var(--u) * 38); }
.done:focus { outline: none; }
.done-seal { width: calc(var(--u) * 150); height: calc(var(--u) * 150); border-radius: 50%; animation: spin 38s linear infinite; }
.done h3 { margin: 0; font: 600 calc(var(--u) * 40) / 1.15 var(--f-body); color: var(--iris-deep); }
.done p { margin: 0 0 calc(var(--u) * 8); max-width: calc(var(--u) * 640); font: 300 calc(var(--u) * 22) / 1.5 var(--f-body); color: #44445c; }

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

  .js .emb-hero .frame[data-r] { translate: none; opacity: 0; scale: .94; transition: opacity .7s var(--ease-out), scale 1.1s var(--ease-out); }
  .js .emb-hero .frame[data-r].in { opacity: 1; scale: 1; }
  .js .hero-card[data-r] { opacity: 0; scale: .95; translate: 0 calc(var(--u) * 44); transition: opacity .8s var(--ease-out) .25s, scale 1.1s var(--ease-out) .25s, translate 1.1s var(--ease-out) .25s; }
  .js .hero-card[data-r].in { opacity: 1; scale: 1; translate: 0 0; }
  .js .hero-text > *, .js .hero-img { opacity: 0; translate: 0 calc(var(--u) * 16); transition: opacity .7s var(--ease-out), translate .8s var(--ease-out); }
  .js .hero-card.in .hero-text > *, .js .hero-card.in .hero-img { opacity: 1; translate: 0 0; }
  .js .hero-text > :nth-child(1) { transition-delay: .55s; } .js .hero-text > :nth-child(2) { transition-delay: .67s; }
  .js .hero-text > :nth-child(3) { transition-delay: .79s; } .js .hero-text > :nth-child(4) { transition-delay: .91s; }
  .js .hero-img { transition-delay: .7s; }
  .js .hero-seal { opacity: 0; scale: .3; transition: opacity .7s 1s, scale 1.1s 1s var(--ease-out); }
  .js .emb-hero:has(.hero-card.in) .hero-seal { opacity: 1; scale: 1; }

  .js .perk[data-r] { opacity: 0; scale: .93; translate: 0 calc(var(--u) * 46); rotate: calc((var(--i, 0) - 2) * .7deg);
    transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 110ms), translate 1s var(--ease-out) calc(var(--i, 0) * 110ms), scale 1s var(--ease-out) calc(var(--i, 0) * 110ms), rotate 1s var(--ease-out) calc(var(--i, 0) * 110ms), transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
  .js .perk[data-r].in { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }
  .js .num { scale: .3; transition: scale .7s var(--ease-out) calc(var(--i, 0) * 110ms + 450ms), transform .5s var(--ease-out); }
  .js .perk.in .num { scale: 1; }

  .js .checks li { opacity: 0; translate: calc(var(--u) * -26) 0; transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 120ms + 350ms), translate .8s var(--ease-out) calc(var(--i, 0) * 120ms + 350ms); }
  .js .who-card.in .checks li { opacity: 1; translate: 0 0; }

  .js .form-wrap[data-r] { scale: .97; transition: opacity .8s var(--ease-out), translate 1s var(--ease-out), scale 1s var(--ease-out); }
  .js .form-wrap[data-r].in { scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-seal, .done-seal, .n-deco { animation: none; } }

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 800px) {
  .emb { margin-top: 26px; }
  .emb-head { margin: 0 6px 14px; }
  .emb-head .script { font-size: 60px; }
  .emb-head .sub { font-size: 18px; }

  .emb-hero { width: 100%; height: auto; margin: 0; padding: 12px; background: var(--lavender); border-radius: 26px; }
  .emb-hero .frame { display: none; }
  .hero-card { position: relative; left: auto; top: auto; width: auto; height: auto; flex-direction: column-reverse; border-radius: 20px; }
  .hero-img { width: auto; height: 230px; margin: 12px 12px 0; border-radius: 16px; }
  .hero-text { padding: 22px 20px 26px; }
  .hero-text h2 { font-size: 28px; }
  .hero-text p { font-size: 16.5px; }
  .solid-btn { padding: 14px 28px; font-size: 18px; }
  .solid-btn.big { padding: 16px 34px; font-size: 20px; }
  .hero-seal { right: 14px; top: -44px; width: 96px; height: 96px; }

  .e-band { height: 190px; }
  .e-band h2 { font-size: 24px; padding: 0 22px; }
  .perks-sec { margin-top: 56px; }
  .perks-lead { font-size: 18px; padding: 0 12px; }
  .perks { width: 100%; margin: 24px 0 0; grid-template-columns: 1fr; gap: 14px; }
  .perk.p5 { grid-column: auto; }
  .perk { padding: 10px; border-radius: 28px; }
  .perk-in { min-height: 0; padding: 20px 20px 22px; gap: 16px; border-radius: 20px; }
  .num { width: 48px; height: 42px; }
  .num .b2 { left: 4px; top: 3px; width: 41px; height: 35px; }
  .num b { font-size: 22px; }
  .perk-text { font-size: 17px; }

  .who { margin-top: 56px; }
  .who-grid { width: 100%; margin: 0; grid-template-columns: 1fr; gap: 14px; }
  .who-card { padding: 10px; border-radius: 28px; }
  .who-card h2 { padding: 26px 22px 0; border-radius: 20px 20px 0 0; }
  .who-card .script { font-size: 46px; }
  .who-lead { padding: 6px 22px 0; font-size: 19px; }
  .checks { padding: 16px 22px 28px; gap: 14px; border-radius: 0 0 20px 20px; }
  .checks li { font-size: 17px; gap: 14px; }
  .tick { width: 34px; height: 34px; }
  .tick svg { width: 19px; height: 19px; }
  .who-note { padding: 40px 26px 34px; border-radius: 28px; }
  .who-note p { font-size: 25px; }
  .n-deco { right: 18px; top: 16px; height: 40px; }

  .join { margin-top: 56px; }
  .form-wrap { width: 100%; margin-top: 30px; }
  .form-frame { padding: 10px; border-radius: 28px; }
  .form { padding: 26px 18px 26px; border-radius: 20px; }
  .grid { grid-template-columns: 1fr; gap: 20px; }
  .field label { font-size: 17px; margin-left: 8px; }
  .control input:not([type="checkbox"]), .control select, .control textarea { height: 54px; font-size: 17px; padding-left: 20px; }
  .control textarea { height: auto; min-height: 130px; }
  .caret { right: 44px; width: 15px; height: 10px; }
  .control .ok { height: 20px; right: 18px; }
  .control.select .ok { right: 70px; }
  .err { font-size: 14px; }
  .count { font-size: 13px; }
  .agree { margin-left: 2px; gap: 12px; }
  .box { font-size: 16px; gap: 12px; }
  .box .mark { width: 28px; height: 28px; }
  .box .mark svg { width: 17px; height: 17px; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .solid-btn { justify-content: center; }
  .note { font-size: 14px; text-align: center; }
  .done { padding: 38px 20px; border-radius: 20px; }
  .done-seal { width: 110px; height: 110px; }
  .done h3 { font-size: 28px; }
  .done p { font-size: 17px; }
}