/*
 * El sistema de plazos de ehost.ec (hosting-cpanel.html): pestañas
 * Mensual / Anual / 2 años / 3 años, precio tachado, equivalente al mes,
 * «Facturado $X» y la caja verde del ahorro. Su CSS va en linea alla;
 * aqui vive en este archivo. El JS que recalcula esta en el pie de cada
 * pagina (generar.py), copiado del mismo sitio.
 */
.pz-wrap { text-align: center; margin: 0 0 30px; }
.pz-tabs { display: inline-flex; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 5px; gap: 4px; box-shadow: 0 4px 14px -8px rgba(27,23,22,0.14); }
.pz-tab { border: none; background: none; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #64748B; padding: 10px 22px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.16s, color 0.16s; white-space: nowrap; }
.pz-tab.activo { background: #F05243; color: #FFFFFF; }
.pz-off { background: #ECFDF5; color: #047857; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.pz-tab.activo .pz-off { background: rgba(255,255,255,0.24); color: #FFFFFF; }
.pz-nota { color: #64748B; font-size: 13px; margin: 10px 0 0; }
.pz-antes { font-size: 15px; color: #94A3B8; text-decoration: line-through; height: 21px; margin-bottom: 2px; }
.pz-fact { font-size: 13px; color: #64748B; margin-top: -10px; margin-bottom: 14px; min-height: 18px; }
.pz-ahorro { background: linear-gradient(135deg, #ECFDF5 0%, #D9F7E9 100%); border: 1.5px solid #A7E3C7; border-radius: 12px; padding: 14px 12px; margin-bottom: 18px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pz-ahorro-num { color: #047857; font-size: 25px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; }
.pz-ahorro-txt { color: #059669; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; }
.pz-ahorro.oculto { visibility: hidden; }
@media (max-width: 760px) {
  .pz-tabs { flex-direction: column; width: 100%; max-width: 300px; }
.pz-tab { justify-content: center; }
@media (max-width: 760px) {
  .pz-tabs { flex-direction: column; width: 100%; max-width: 300px; }
  .pz-tab { justify-content: center; }
}