/* ═══════════════════════════════════════════════════════════════════════════
   PRECIOS · LOS PLANES ARRIBA DEL TODO (maqueta del dueño, 2026-10-03)
   ───────────────────────────────────────────────────────────────────────────
   «Quiero quitar ese banner principal y que aparezca directamente los
   planes»: fuera el banner; la página abre con la etiqueta, el titular, el
   conmutador mensual/anual y las cuatro tarjetas, como su maqueta. La planta
   y el gráfico son dibujos de ChatGPT hechos desde su maqueta; los iconos de
   las tarjetas, también.
   ═══════════════════════════════════════════════════════════════════════════ */

.pz {
  --pz-tinta: #0b0b1e; --pz-gris: #6b6b80; --pz-violeta: #6d28d9; --pz-linea: #efecf8;
  position: relative; overflow-x: clip;
  /* la barra va fija encima (70 px): la página empieza debajo */
  padding: 86px 0 18px;
}
/* Las tarjetas de su maqueta son más anchas que el resto de la web (1396 px
   en una ventana de 1851): esta sección se sale del ancho común. */
.pz-in { position: relative; z-index: 1; max-width: 1448px; }
/* Con la franja delante la barra va en su sitio (sticky): sobran sus 71 px. */
.mk-topbar ~ .pz { padding-top: 15px; }

/* ── LA CABECERA ─────────────────────────────────────────────────────────── */
.pz-cab { text-align: center; }
.pz-eti { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pz-violeta); }
.pz-h { margin: 6px 0 0; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(34px, 3.7vw, 56px); line-height: 1.06; letter-spacing: -.035em; color: var(--pz-tinta); text-wrap: balance; }
.pz-h em { font-style: normal; color: #7a2cf0; }
.pz-sub { margin: 10px auto 0; max-width: 36em; font-size: 17px; line-height: 1.5; color: var(--pz-gris); }
/* El conmutador de su maqueta: la opción elegida, con borde y letra morados;
   el descuento, en verde. */
/* la hoja común le pone 40 px debajo: en su maqueta las tarjetas van pegadas */
.pz .mk-toggle { margin: 16px auto 0; background: #fff; border: 1px solid #e6e1f7; box-shadow: 0 10px 26px -20px rgba(76,29,149,.4); }
.pz .mk-toggle button { font-weight: 600; color: #4b4b63; }
.pz .mk-toggle button.is-on { color: var(--pz-violeta); border: 1.5px solid #8b5cf6; background: #fff; }
.pz .mk-toggle .save { background: #dcf7e6; color: #15803d; font-weight: 700; }

/* ── LAS CUATRO TARJETAS ─────────────────────────────────────────────────── */
/* LAS FILAS DE LAS CUATRO TARJETAS VAN ALINEADAS: precio con precio, lista con
   lista, botón con botón, aunque una descripción ocupe tres líneas y otra
   dos. Cada tarjeta ocupa cinco filas de la rejilla y las comparte (subgrid). */
.pz .mk-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0 16px;
  margin: 18px auto 0; max-width: 1400px; align-items: stretch; }
.pz .mk-plan { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
  padding: 24px 22px 22px; text-align: left;
  background: #fff; border: 1px solid #ebe6fb; border-radius: 20px; box-shadow: 0 22px 46px -34px rgba(76,29,149,.35);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, border-color .25s ease; }
.pz .mk-plan:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -34px rgba(76,29,149,.45); }
/* la hoja común agranda la de Pro (scale 1.03): en su maqueta las cuatro
   empiezan y acaban a la misma altura; la destaca el borde, no el tamaño */
.pz .mk-plan--pop { border: 2px solid #8b5cf6; box-shadow: 0 30px 60px -34px rgba(109,40,217,.5); transform: none; }
.pz .mk-plan--pop:hover { transform: translateY(-4px); }
.pz .mk-plan-badge { position: absolute; top: -15px; right: 18px; padding: 7px 15px; border-radius: 999px;
  background: #6d28d9; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.pz-plan-cab { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--pz-linea); }
.pz-plan-ic { width: 56px; height: 56px; flex: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pz .mk-plan:hover .pz-plan-ic { transform: rotate(-6deg) scale(1.05); }
.pz .mk-plan h3 { margin: 3px 0 0; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 800;
  font-size: 22px; line-height: 1.15; letter-spacing: -.02em; color: var(--pz-tinta); }
.pz .mk-plan-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--pz-gris); min-height: 0; }
.pz .mk-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 0; }
.pz .mk-plan-price b { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.035em; color: var(--pz-tinta); }
.pz .mk-plan-price span { font-size: 17px; font-weight: 600; color: #4b4b63; }
.pz .mk-plan-cycle { margin: 8px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--pz-linea); font-size: 15px; color: var(--pz-gris); }
.pz .pz-siempre { font-size: 17px; font-weight: 600; color: #7a7a90; }
.pz .mk-plan-feats { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 11px; align-content: start; flex: 1; }
.pz .mk-plan-feats li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: #2b2b3d; }
.pz .mk-plan-feats strong { font-weight: 700; color: var(--pz-tinta); }
/* el tick de su maqueta: morado, sin círculo */
.pz .mk-plan-feats .ck { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  background: none; color: #7c3aed; border-radius: 0; }
.pz .mk-plan-feats .ck svg { width: 17px; height: 17px; }
.pz .mk-plan-feats li.off { color: #a3a3b5; }
.pz .mk-plan-feats li.off .ck { color: #c4c4d2; }
.pz .pz-boton { align-self: end; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px;
  border-radius: 16px; border: 1.5px solid #c9b8fa; background: #fff; color: #5b1bd6; font-size: 16px; font-weight: 700;
  text-decoration: none; box-shadow: none; transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease; }
.pz .pz-boton svg { width: 17px; height: 17px; transition: transform .2s ease; }
.pz .pz-boton:hover { transform: translateY(-2px); background: #faf7ff; box-shadow: 0 14px 26px -18px rgba(91,27,214,.55); }
.pz .pz-boton:hover svg { transform: translateX(3px); }
.pz .pz-boton--lleno { background: linear-gradient(180deg, #7130f4 0%, #6620f2 55%, #5413d9 100%); color: #fff; border-color: transparent;
  box-shadow: 0 16px 30px -18px rgba(102,32,242,.75); }
.pz .pz-boton--lleno:hover { background: linear-gradient(180deg, #6a28ee 0%, #5d18e6 55%, #4c0fca 100%); }

/* ── LO QUE VALE PARA TODOS ──────────────────────────────────────────────── */
.pz-ok { list-style: none; margin: 34px auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, auto);
  justify-content: center; }
.pz-ok li { display: flex; align-items: center; gap: 14px; padding: 4px 34px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--pz-tinta); }
.pz-ok li + li { border-left: 1px solid #e4e0f2; }
.pz-ok img { width: 50px; height: 50px; flex: none; }
.pz .mk-plan-nota { margin: 30px auto 0; }

/* ── LA PLANTA Y EL GRÁFICO ───────────────────────────────────────────────
   En su maqueta (1851 px de ancho) van en los márgenes, junto a las tarjetas.
   En una ventana de 1280 no hay margen: ahí se ponen a los lados del titular,
   apoyados detrás de las tarjetas. Y en un móvil, fuera: no caben sin tapar. */
.pz-adorno { position: absolute; z-index: 0; pointer-events: none; }
.pz-adorno img { display: block; width: 100%; height: auto; }
.pz-adorno--planta { width: 150px; top: 112px; left: calc(50% - 600px); }
.pz-adorno--grafico { width: 200px; top: 150px; right: calc(50% - 600px); }
@media (min-width: 1480px) {
  /* en su maqueta: la planta asoma detrás de la primera tarjeta, el gráfico
     detrás de la última, los dos a la altura de la cabecera de las tarjetas */
  .pz-adorno--planta { width: 235px; top: 300px; left: calc(50% - 925px); }
  .pz-adorno--grafico { width: 240px; top: 330px; right: calc(50% - 925px); }
}
@media (max-width: 1180px) {
  .pz-adorno--planta { left: 8px; width: 120px; }
  .pz-adorno--grafico { right: 6px; width: 160px; }
}

/* ── CUANDO NO CABEN CUATRO ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .pz .mk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .pz .mk-plan { margin-bottom: 26px; }
  .pz-ok { grid-template-columns: repeat(2, auto); row-gap: 16px; }
  .pz-ok li:nth-child(3) { border-left: 0; }
}
@media (max-width: 760px) {
  .pz-adorno { display: none; }
}
@media (max-width: 620px) {
  .pz { padding-top: 92px; }
  .pz .mk-plans { grid-template-columns: 1fr; max-width: 420px; }
  .pz-ok { grid-template-columns: 1fr; justify-content: stretch; max-width: 420px; }
  .pz-ok li { padding: 4px 6px; }
  .pz-ok li + li { border-left: 0; }
  .pz-ok br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pz .mk-plan, .pz .mk-plan:hover, .pz-plan-ic, .pz .pz-boton, .pz .pz-boton:hover, .pz .pz-boton svg { transition: none; transform: none; }
}