/* Mitic · Precios "Selector de tamaño" (2026-10-18). Tarjetas limpias unidas (patrón Linear/Stripe) + barra de
   socios que enciende el plan que corresponde (.is-reco, lo pone mitic-precios.js). Usa los tokens de la marca:
   funciona igual en claro y oscuro. La calculadora Enterprise conserva .enterprise-f/.input/.ent-precio de arcg.css. */
.pz{background:var(--fondo)}
.pz-cab{text-align:center;max-width:760px;margin:0 auto 32px}
.pz-cab .eyebrow{justify-content:center}
.pz-cab h2{font-size:clamp(30px,2.2vw + 16px,46px);margin:0 auto}
.pz-cab .lead{margin:12px auto 0;max-width:50ch}

/* barra de tamaño */
.pz-tam{max-width:720px;margin:0 auto 40px;padding:22px 26px 18px;border-radius:20px;background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1)}
.pz-tam-l{display:block;font-weight:700;font-size:15.5px;margin-bottom:12px}
.pz-tam-fila{display:flex;align-items:center;gap:18px}
.pz-tam-n{flex:0 0 auto;min-width:4.2ch;text-align:right;font-family:var(--f-mono);font-size:30px;font-weight:600;color:var(--marca-txt);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pz-rango{flex:1;-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#EA580C 0,#FB923C calc(var(--p,33) * 1%),var(--superficie-2) calc(var(--p,33) * 1%))}
.pz-rango::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #EA580C;box-shadow:0 4px 12px -2px rgba(194,65,12,.5);transition:transform .15s}
.pz-rango::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #EA580C;box-shadow:0 4px 12px -2px rgba(194,65,12,.5)}
.pz-rango:active::-webkit-slider-thumb{transform:scale(1.12)}
.pz-rango:focus-visible{outline:3px solid var(--foco);outline-offset:6px}
.pz-marcas{position:relative;height:18px;margin:6px calc(4.2ch + 18px + 14px) 0 14px;font-family:var(--f-mono);font-size:11.5px;color:var(--tinta-3)}
.pz-marcas span{position:absolute;left:calc(var(--x) * 1%);translate:-50% 0}
.pz-tam-t{margin:10px 0 0;font-size:15px;color:var(--tinta-2)}
.pz-tam-t b{color:var(--tinta)}

/* tarjetas: una sola pieza con divisores; la recomendada se eleva con filo naranja */
.pz-planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--borde);border-radius:24px;background:var(--superficie);box-shadow:var(--sombra-1)}
.pz-plan{position:relative;display:flex;flex-direction:column;padding:30px 24px 24px;border-left:1px solid var(--borde);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,background .45s,border-color .45s;border-radius:22px}
.pz-plan:first-child{border-left:0}
.pz-plan.is-reco{z-index:2;transform:translateY(-14px) scale(1.02);background:var(--superficie);border:2px solid #EA580C;margin:-1px;
  box-shadow:0 34px 60px -28px rgba(194,65,12,.55),0 0 0 6px rgba(234,88,12,.1)}
.pz-plan.is-reco+.pz-plan{border-left-color:transparent}
.pz-pill{position:absolute;top:-13px;left:50%;translate:-50% 0;padding:5px 12px;border-radius:999px;background:#EA580C;color:#1A1816;font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  white-space:nowrap;opacity:0;scale:.8;transition:opacity .3s,scale .3s}
.pz-plan.is-reco .pz-pill{opacity:1;scale:1}
.pz-nombre{margin:0;font-size:20px}
.pz-para{margin:4px 0 18px;font-size:14px;line-height:1.45;color:var(--tinta-2);min-height:2.9em}
.pz-precio{margin:0 0 18px;display:flex;align-items:baseline;gap:2px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.pz-moneda{font-size:20px;color:var(--tinta-3);align-self:flex-start;margin-top:8px}
.pz-monto{font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1}
.pz-per{font-family:var(--f-sans);font-size:14.5px;color:var(--tinta-3);margin-left:6px}
.pz-cta{width:100%;justify-content:center;background:var(--superficie-2);color:var(--tinta);border:1px solid var(--borde-fuerte)}
.pz-cta:hover{border-color:var(--tinta)}
.pz-plan.is-reco .pz-cta{background:var(--marca-fuerte);color:#fff;border-color:transparent;box-shadow:var(--sombra-btn)}
.pz-lim{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px dashed var(--borde);display:grid;gap:11px}
.pz-lim li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--tinta-2)}
.pz-lim .ic{width:18px;height:18px;flex:0 0 auto;color:var(--marca-txt)}
.pz-lim b{color:var(--tinta);font-family:var(--f-mono);font-weight:600}
.pz-nota{margin:auto 0 0;padding-top:18px;font-size:12.5px;color:var(--tinta-3)}

/* todo incluido */
.pz-incl{margin:44px auto 0;text-align:center}
.pz-incl-t{margin:0 0 14px;font-family:var(--f-mono);font-size:13px;color:var(--tinta-3)}
.pz-chips{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:920px}
.pz-chips li{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--superficie);border:1px solid var(--borde);font-size:14px;font-weight:500}
.pz-chips .ic{width:16px;height:16px;color:var(--al-dia-txt,#15803D);--ic-acc:currentColor}

/* Enterprise sobrio */
.pz-ent{margin:40px auto 0;padding:24px 26px;border-radius:20px;border:1px solid var(--borde);background:var(--superficie);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:end}
.pz-ent-cab{display:flex;gap:14px;align-items:flex-start}
.pz-ent-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#1A1816;color:#FB923C}
.pz-ent-ic .ic{width:22px;height:22px}
.pz-ent h3{margin:0 0 4px;font-size:18px}
.pz-ent-cab p{margin:0;font-size:14px;color:var(--tinta-2);max-width:52ch}
.pz-ent .enterprise-f{flex-wrap:nowrap}
.pz-ent .input{width:96px}

/* garantía */
.pz-garantia{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.pz-garantia li{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.pz-garantia .ic{width:18px;height:18px;color:var(--al-dia-txt,#15803D);--ic-acc:currentColor}
.pz-nota-pie{text-align:center;max-width:78ch;margin:14px auto 0}
.pz .cmp{margin-top:24px;text-align:center}
.pz .cmp-body{text-align:left}

@media(max-width:860px){
  .pz-planes{grid-template-columns:1fr;border:0;background:none;box-shadow:none;gap:14px}
  .pz-plan{border:1px solid var(--borde)!important;background:var(--superficie)}
  .pz-plan.is-reco{transform:none;border:2px solid #EA580C!important;margin:0}
}
@media(max-width:1100px){
  .pz-ent{grid-template-columns:1fr}
  .pz-ent .enterprise-f{flex-wrap:wrap}
}
@media(max-width:620px){
  .pz-tam{padding:18px 16px 14px}
  .pz-tam-n{font-size:24px}
  .pz-planes{grid-template-columns:1fr;border:0;background:none;box-shadow:none;gap:14px}
  .pz-plan{border:1px solid var(--borde)!important;background:var(--superficie)}
  .pz-plan.is-reco{transform:none;border:2px solid #EA580C!important;margin:0}
  .pz-para{min-height:0}
}
@media(prefers-reduced-motion:reduce){.pz-plan,.pz-pill{transition:none}}
/* 2026-10-19 (evaluación UX): número exacto editable + sedes y usuarios */
input.pz-tam-n{width:5.2ch;padding:2px 4px;border:0;border-bottom:2px dashed var(--borde-fuerte);background:transparent;-moz-appearance:textfield}
input.pz-tam-n::-webkit-inner-spin-button,input.pz-tam-n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input.pz-tam-n:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-bottom-color:var(--marca)}
.pz-tam-extra{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:14px}
.pz-tam-extra label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--tinta-2)}
.pz-tam-extra .input{width:76px;height:40px}
.pz-marcas{margin-right:calc(5.2ch + 18px + 14px)}

/* Banner de prueba (2026-10-27): reemplaza al plan Gratis */
.pz-prueba{max-width:720px;margin-left:auto!important;margin-right:auto!important;display:flex;flex-direction:column;gap:6px;margin:0 0 22px;padding:16px 20px;border:1px solid #EA580C;border-radius:16px;background:var(--superficie);box-shadow:var(--sombra-1)}
.pz-prueba b{font-size:17px;color:var(--tinta)}
.pz-prueba span{font-size:14.5px;color:var(--tinta-2)}
