/* ═══════════════════════════════════════════════════════════════
   MPH+ — estilos específicos de la página.
   Se apoya en ../platform-home/home.css (tokens, botones, títulos por
   línea, abanico de portadas, revelado) y en ../design-system.
   Solo presentación: los planes, precios, checkout y el estado de acceso
   (Store API + bridge) siguen siendo los mismos ids y scripts.
═══════════════════════════════════════════════════════════════ */

.mp :where(ol) { list-style: none; margin: 0; padding: 0; }
.mp :where(figure) { margin: 0; }
.mp :where(details) { display: block; }

/* ── Hero ─────────────────────────────────────────────────── */
.mp-hero { padding-top: clamp(36px, 4.5vw, 60px); }
.crumb { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--on-ink-2); margin-bottom: clamp(32px, 4vw, 52px); position: relative; }
.crumb a { text-decoration: none; transition: color 200ms; }
.crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.crumb [aria-current] { color: #fff; }
.mp-new { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid rgba(240,242,244,.26); border-radius: 6px; font-size: 15px; color: var(--on-ink); margin-bottom: 26px; }
.mp-new i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: ping 2.4s ease-out infinite; flex: none; }
.mp-hero .mph__title { font-size: clamp(80px, 11vw, 150px); }
.mp-hero .lead { max-width: 50ch; }
.mp-hero .mph__sub { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; max-width: 22ch; }
.mp-hero .fan { --w: clamp(130px, 17vw, 244px); }
.mp-hero .mph__cta { margin-top: 30px; }

/* ── Qué es / qué incluye ─────────────────────────────────── */
.what__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
.what__l { position: sticky; top: 96px; }
.ben { border-top: 1px solid var(--line-2); }
.ben__i { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); padding: 30px 0 32px; border-bottom: 1px solid var(--line); isolation: isolate; }
.ben__i::before { content: ''; position: absolute; inset: 0 -20px; background: var(--mist); border-radius: 8px; transform: scaleY(0); transform-origin: bottom; transition: transform 450ms var(--ease-out); z-index: -1; }
.ben__i:hover::before { transform: scaleY(1); }
.ben__n { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--text-3); transition: color 250ms, transform 450ms var(--ease-out); padding-top: 4px; }
.ben__i:hover .ben__n { color: var(--red); transform: translateX(4px); }
.ben__b h3 { font-weight: 800; font-size: clamp(28px, 2.8vw, 38px); line-height: 1; letter-spacing: .01em; }
.ben__b p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 58ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { font-size: 14px; font-weight: 500; padding: 5px 11px; border-radius: 6px; background: var(--mist); border: 1px solid var(--line); color: var(--ink); transition: background-color 250ms; }
.ben__i:hover .chips li { background: #fff; }
.chips .chips__hot { background: rgba(204,41,54,.09); border-color: rgba(204,41,54,.3); color: var(--red-d); }

/* ── Acceso vs edición individual ─────────────────────────── */
.time { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-s); padding: clamp(22px, 3vw, 40px); margin-bottom: clamp(28px, 4vw, 48px); }
.time__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.time__row + .time__row { margin-top: 18px; }
.time__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.time__track { display: flex; align-items: stretch; height: 64px; min-width: 0; }
.time__bar { display: flex; align-items: center; padding: 0 18px; border-radius: 6px; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; min-width: 0; }
.time__bar--acc { flex: 0 0 58%; background: var(--red); border-radius: 6px 0 0 6px; }
.time__bar--ind { flex: 1; background: var(--ink); }
.time__end { flex: 1; display: flex; align-items: center; gap: 10px; padding-left: 16px; border: 1.5px dashed var(--line-2); border-left: 0; border-radius: 0 6px 6px 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.time__end i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--red); flex: none; }
.time__inf { flex: none; width: 64px; display: grid; place-items: center; font-size: 40px; line-height: 1; color: var(--ink); }
.time__axis { position: relative; margin: 12px 0 0 190px; height: 22px; font-size: 14px; color: var(--text-3); }
.time__axis span:first-child { position: absolute; left: 0; }
.time__axis span:last-child { position: absolute; left: 58%; transform: translateX(-50%); white-space: nowrap; }
.js .time .time__bar { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--ease-out) 250ms; }
.js .time.is-in .time__bar { clip-path: inset(0); }
.js .time.is-in .time__bar--ind { transition-delay: 600ms; }

.cmp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp__c { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; box-shadow: var(--shadow-s); }
.cmp__tag { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px 3px; border-radius: 4px; background: rgba(204,41,54,.1); color: var(--red-d); }
.cmp__tag--ink { background: var(--ink); color: #fff; }
.cmp__c h3 { margin-top: 16px; font-weight: 800; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; }
.cmp__lead { margin: 14px 0 20px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.cmp__l { margin-bottom: 28px; border-top: 1px solid var(--line); flex: 1; }
.cmp__l li, .plan__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; line-height: 1.45; padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.cmp__l li svg, .plan__list li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--red); }
.cmp__l .is-dim { color: var(--text-3); }
.cmp__l .is-dim svg { color: var(--text-3); }
.cmp__c .btn-h { align-self: flex-start; }
.cmp__note { margin-top: 24px; padding: 22px 28px; background: var(--ink); color: var(--on-ink); border-radius: 10px; font-size: 18px; line-height: 1.5; }
.cmp__note strong { color: #fff; font-weight: 600; }

/* ── Archivo ──────────────────────────────────────────────── */
.eds { border-top: 1px solid var(--line-2); }
.ed { display: grid; grid-template-columns: 72px 128px minmax(0, 1fr) auto; gap: clamp(18px, 2.6vw, 36px); align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.ed__num { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; color: rgba(13,27,42,.14); transition: color 300ms; }
.ed:hover .ed__num { color: var(--red); }
.ed__cover { width: 128px; border-radius: 4px; box-shadow: 0 2px 4px rgba(13,27,42,.1), 0 14px 26px rgba(13,27,42,.18); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.ed:hover .ed__cover { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 4px 8px rgba(13,27,42,.12), 0 22px 36px rgba(13,27,42,.24); }
.ed__label { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.ed__theme { margin: 8px 0 10px; font-weight: 800; font-size: clamp(30px, 3.2vw, 46px); line-height: .98; }
.ed__sub { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 56ch; }
.ed__qr { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); }
.ed__qr svg { width: 17px; height: 17px; flex: none; }
.ed__act { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ed__badge { font-size: 14px; font-weight: 600; padding: 4px 11px; border-radius: 4px; background: var(--mist); color: var(--text-2); border: 1px solid var(--line); }
.ed__badge--new { background: var(--red); color: #fff; border-color: var(--red); }
.ed__alt { font-size: 15px; }
.ed--new { background: var(--mist); margin: 0 -28px; padding: 38px 28px; border-radius: 10px; border-bottom: 0; grid-template-columns: 72px 176px minmax(0, 1fr) auto; }
.ed--new .ed__cover { width: 176px; }
.ed--new .ed__theme { font-size: clamp(34px, 4vw, 58px); }

.inside { margin-top: clamp(56px, 7vw, 100px); display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.inside__h { font-weight: 800; font-size: clamp(32px, 3.4vw, 48px); line-height: .98; }
.inside__t p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.inside__f img { border-radius: 8px; box-shadow: var(--shadow-m); width: 100%; transition: transform 700ms var(--ease-out); }
.inside__f:hover img { transform: translateY(-6px) scale(1.01); }
.inside__f figcaption { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.inside__f figcaption b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }

/* ── Planes ───────────────────────────────────────────────── */
.plans-sec { overflow: hidden; }
.plans-sec::before { content: ''; position: absolute; width: 800px; height: 800px; left: -300px; bottom: -380px; background: radial-gradient(circle, rgba(204,41,54,.14), transparent 62%); pointer-events: none; }
.plans-sec .head2 { margin-bottom: 40px; }
.plans-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 16px; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid rgba(240,242,244,.14); border-radius: 10px; padding: clamp(26px, 3vw, 38px); }
.plan--featured { background: var(--tech-white, #F0F2F4); color: var(--ink); border-color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: translateY(-16px); padding-top: clamp(34px, 3.6vw, 46px); }
.plan__badge { position: absolute; top: -15px; left: clamp(26px, 3vw, 38px); background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 13px 4px; border-radius: 4px; }
.plan__period { font-family: var(--font-display); font-weight: 800; font-size: 40px; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
.plan__price { margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 4.6vw, 68px); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__note { margin-top: 6px; font-size: 15px; color: var(--on-ink-2); }
.plan--featured .plan__note { color: var(--text-2); }
.plan__list { margin: 26px 0 30px; border-top: 1px solid rgba(240,242,244,.16); flex: 1; }
.plan--featured .plan__list { border-top-color: var(--line-2); }
.plan__list li { border-bottom-color: rgba(240,242,244,.16); color: var(--on-ink); }
.plan--featured .plan__list li { border-bottom-color: var(--line-2); color: var(--ink); }
.plan__list li svg { color: #fff; }
.plan--featured .plan__list li svg { color: var(--red); }
.plan__list .is-dim { opacity: .62; }
.plan__list .is-dim svg { color: var(--steel); }
.plan__cta { width: 100%; }
.plan--featured .plan__cta { box-shadow: 0 1px 2px rgba(13,27,42,.12), 0 10px 24px rgba(204,41,54,.3); }
.plans-foot { position: relative; margin-top: 36px; font-size: 16px; line-height: 1.6; color: var(--on-ink-2); max-width: 74ch; }
.plans-foot .link-h { margin-left: 6px; font-size: 16px; }

/* ── Herramientas exclusivas ──────────────────────────────── */
.tools-x__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 100px); align-items: start; }
.tools-x__l { position: sticky; top: 96px; }
.tools-x__img { margin-top: 36px; }
.tools-x__img img { width: 100%; filter: drop-shadow(0 24px 34px rgba(13,27,42,.2)); }
.tl { border-top: 1px solid var(--line-2); }
.tl__i { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding-left 400ms var(--ease-out); }
.tl__i:hover { padding-left: 10px; }
.tl__ic { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; background: var(--mist); color: var(--ink); flex: none; transition: background-color 250ms, color 250ms, transform 400ms var(--ease-out); }
.tl__ic svg { width: 22px; height: 22px; }
.tl__i:hover .tl__ic { background: var(--red); color: #fff; transform: rotate(-6deg); }
.tl__i b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.tl__i span > span { display: block; margin-top: 3px; font-size: 16px; color: var(--text-2); }

/* ── Muestra gratuita ─────────────────────────────────────── */
.free__g { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.art { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.art:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.art img { width: 100%; height: 230px; object-fit: cover; object-position: center 30%; transition: transform 900ms var(--ease-out); }
.art:hover img { transform: scale(1.04); }
.art > img { transform-origin: center; }
.art__b { display: grid; gap: 10px; padding: 26px 28px 28px; align-content: start; }
.art__t { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--red-d); }
.art__b b { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.02; text-transform: uppercase; }
.art__b > span:not(.art__t):not(.art__l) { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.art__l { margin-top: 6px; justify-self: start; }
.art:hover .art__l { background-size: 100% 2px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 7vw, 100px); align-items: start; }
.faq__grid > div:first-child { position: sticky; top: 96px; }
.faq__l { border-top: 1px solid var(--line-2); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 26px); letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; transition: color 200ms; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--red); }
.faq__i summary svg { width: 24px; height: 24px; flex: none; color: var(--text-3); transition: transform 350ms var(--ease-out), color 200ms; }
.faq__i[open] summary svg { transform: rotate(45deg); color: var(--red); }
.faq__a { padding: 0 0 26px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--text-2); animation: faqin 500ms var(--ease-out); }
.faq__a a { color: var(--red-d); text-decoration: underline; text-underline-offset: 3px; }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }

/* ── Cierre ───────────────────────────────────────────────── */
.mp-close { overflow: hidden; padding-bottom: clamp(100px, 11vw, 150px); }
.mp-close .close__t { max-width: none; }
.mp-notes { position: relative; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: 16px; color: var(--on-ink-2); }
.mp-notes li { display: flex; align-items: center; gap: 9px; }
.mp-notes svg { width: 18px; height: 18px; color: var(--amber); }

/* cierre: dos portadas */
.mp-close__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mp-close__v { position: relative; aspect-ratio: 1.05; max-width: 520px; width: 100%; justify-self: end; }
.mp-close__v img { position: absolute; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 28px 44px rgba(0,0,0,.5); }
.mp-close__b { width: 44%; left: 6%; top: 8%; transform: rotate(-7deg); animation: bob 8s ease-in-out infinite alternate; --r0: -9deg; --r1: -5deg; }
.mp-close__f { width: 50%; right: 8%; top: 0; transform: rotate(5deg); animation: bob 9s ease-in-out infinite alternate -3s; --r0: 3deg; --r1: 7deg; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ed, .ed--new { grid-template-columns: 112px minmax(0, 1fr); }
  .ed__num { display: none; }
  .ed--new { grid-template-columns: 112px minmax(0, 1fr); }
  .ed__cover, .ed--new .ed__cover { width: 112px; }
  .ed__act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .plans-grid { grid-template-columns: 1fr; max-width: 560px; }
  .plan--featured { transform: none; }
  .inside { grid-template-columns: 1fr 1fr; }
  .inside__t { grid-column: 1 / -1; max-width: 56ch; }
}
@media (max-width: 960px) {
  .mp-close__grid { grid-template-columns: 1fr; }
  .mp-close__v { justify-self: start; max-width: 380px; }
  .what__grid, .tools-x__grid, .faq__grid { grid-template-columns: 1fr; }
  .what__l, .tools-x__l, .faq__grid > div:first-child { position: static; }
  .cmp__cols, .free__g { grid-template-columns: 1fr; }
  .tools-x__img { max-width: 560px; }
  .ben__i::before { inset: 0 -12px; }
}
@media (max-width: 640px) {
  .time__row { grid-template-columns: 1fr; gap: 8px; }
  .time__axis { margin-left: 0; }
  .time__track { height: 72px; }
  .time__bar { padding: 0 12px; font-size: 14px; }
  .time__end { padding-left: 10px; font-size: 16px; }
  .ben__i { grid-template-columns: 52px minmax(0, 1fr); }
  .ed, .ed--new { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .ed__cover, .ed--new .ed__cover { width: 88px; }
  .ed--new { margin: 0 -16px; padding: 28px 16px; }
  .inside { grid-template-columns: 1fr; }
  .mp-hero .mph__title { font-size: clamp(76px, 24vw, 110px); }
  .crumb { margin-bottom: 28px; }
}
/* (bloque reduced-motion retirado) */

/* Movimiento: el sitio ya no se apaga con el ajuste «reducir movimiento» del teléfono (muchos Android lo activan con el ahorro de batería y dejaba todo estático). Las animaciones son suaves (fundidos y desplazamientos cortos). */